4、HTTP协议与网页基础：请求与响应、状态码、HTML/CSS/JavaScript基础、开发者工具使用

做数据抓取，说白了就是跟网页打交道。你得先懂网页是怎么来的，才能知道怎么把它「请」下来。这一节，我带你从最底层的HTTP协议开始，一路聊到浏览器开发者工具怎么用。嗯，这些都是基本功，但也是你未来踩坑最少的地方。

4.1 HTTP协议：你发请求，服务器给响应

HTTP协议，全称是超文本传输协议。你想想看，你在浏览器里输入一个网址，回车，发生了什么？其实就是你的浏览器（客户端）向服务器发了一个「请求」，服务器处理完，给你返回一个「响应」。一来一回，网页就出来了。

我个人习惯把HTTP请求拆成三部分来看：

• 请求行：包含请求方法（GET、POST等）、请求的URL、协议版本。
• 请求头：一堆键值对，告诉服务器你的浏览器信息、接受的数据类型、Cookie等。
• 请求体：只有POST等方法才有，比如你提交表单时填的数据。

响应也是类似的结构：

• 状态行：协议版本 + 状态码 + 状态描述。
• 响应头：服务器返回的元信息，比如内容类型、缓存策略。
• 响应体：真正的网页内容，HTML、JSON、图片等都在这里。

4.2 状态码：服务器在跟你「打招呼」

状态码是服务器给你的反馈。我在项目中遇到过很多次，明明代码写对了，但就是抓不到数据，一看状态码，哦，原来是服务器在「拒绝」我。

常见的状态码就这几类：

状态码	含义	说明
200	OK	请求成功，数据正常返回。这是你最想看到的。
301/302	重定向	资源被挪走了，浏览器会自动跳转。抓数据时要注意跟随重定向。
403	Forbidden	服务器拒绝你的请求。可能是没带Cookie，或者IP被限制了。
404	Not Found	资源不存在。URL写错了？或者页面被删了。
429	Too Many Requests	你请求太快了，服务器让你歇会儿。我曾经被这个状态码搞到怀疑人生。
500	Internal Server Error	服务器内部出错了。这不是你的问题，是网站崩了。
502/503	Bad Gateway / Service Unavailable	网关或服务暂时不可用。等一会儿再试。

4.3 HTML/CSS/JavaScript：网页的骨架、皮囊和灵魂

一个网页，说白了就是三样东西的组合：

• HTML：骨架。定义标题、段落、表格、链接这些结构。
• CSS：皮囊。控制颜色、字体、布局，让页面好看。
• JavaScript：灵魂。让页面动起来，比如点击按钮弹出对话框、滚动加载更多内容。

你抓数据，主要跟HTML打交道。你需要从HTML里找到你要的数据藏在哪个标签里。比如：

<div class="post-content">
  <h2>今天股市大涨</h2>
  <p>市场情绪非常乐观...</p>
  <span class="like-count">128</span>
</div>

你看，标题在<h2>里，正文在<p>里，点赞数在<span>里。你只需要用解析工具（比如BeautifulSoup）把这些标签里的内容提取出来就行。

4.4 开发者工具：你的「数据抓取透视镜」

我个人觉得，开发者工具是抓数据最重要的武器，没有之一。你按F12或者右键「检查」，就能打开它。我重点说几个最常用的面板：

• Elements（元素）：查看网页的HTML结构。你可以直接在这里找到数据所在的标签，复制它的CSS选择器或XPath。
• Network（网络）：监控所有网络请求。这是抓数据的核心面板。你可以看到每个请求的URL、请求头、响应数据。我建议你勾选「Preserve log」，防止页面跳转时清空记录。
• Console（控制台）：可以执行JavaScript代码。有时候你想快速测试某个选择器能不能选中元素，在这里敲一行代码就知道了。

举个例子，你想抓微博热搜。打开开发者工具，切到Network面板，刷新页面。你会看到一堆请求。找那些返回JSON数据的请求（通常在Response里能看到结构化数据），那就是你要的API接口。

4.5 知识体系总览

下面这张图，是我梳理的本章知识结构。你可以把它当作一个「地图」，随时回来对照。

嗯，这一节的内容就这些。HTTP协议是地基，状态码是信号灯，HTML是你要挖的矿，开发者工具就是你的矿工镐。把这些搞明白，后面写爬虫代码的时候，你会觉得特别顺手。

---

公众号:蓝海资料掘金营，微信deep3321