13.2 Web分析与爬虫——页面分析与CSS选择器¶

内容梗概¶

本节课从最简单的静态页面入手，讲解拿到完整 HTML 后如何分析其内容。常用的两种手段是 CSS 选择器和 XPath，老师明确以 CSS 选择器为主讲（自己用得多，怕 XPath 讲错），仅点到 XPath 的存在。课程以 B 站页面为例演示如何用浏览器开发者工具（F12 / 右键检查）定位页面文字对应的 HTML 元素，随后快速复习了 HTML 的树形结构（DOM）和 CSS 选择器的四种基本类型，并简要提及复合选择器。

知识点详解¶

页面分析的两种手段（约 00:00–00:55）¶

CSS 选择器：本课主讲，老师自己常用。
XPath：HTML 与 XML 非常类似（后期有 XHTML 标准，即用 XML 标准改造 HTML 语法），绝大多数页面符合该语法，可用 XPath 获取页面内容。老师只提一嘴，希望大家知道有这个东西，不展开讲。

用开发者工具定位元素（约 00:57–05:00）¶

以 B 站页面为例提出问题：人一眼能看到视频标题（如"我的双脚不受自己控制"），但程序看到的是一堆 HTML 文档，如何让程序找到这句话？答案：通过 CSS 选择器选中对应的 HTML 元素。
操作流程：
按 F12 打开开发者工具，在 Elements 面板中鼠标滑过节点，右侧页面会高亮对应区域，建立"元素 ↔ 页面区域"的对应关系。
更直接的做法：在页面对象文字上**右键 → 检查**，Elements 面板自动跳转到该元素位置。
由此可知目标文字位于 body 下层层嵌套结构中的一个 p（段落）元素内，获取该 p 元素的文本（text）内容即可。

HTML 树形结构与 DOM（约 02:50–03:45）¶

HTML 符合树形结构；用 JavaScript 解析这棵树时称为**文档对象模型（DOM）**，整个 HTML 页面变成一棵树，每个 HTML 元素都是树上的节点。
顶层结构：html 下有两个子节点 head 和 body，页面所有可见内容都在 body 里。

CSS 选择器的四种基本类型（约 07:30–11:50）¶

CSS 选择器本是前端为美化页面而学的知识（选中某元素/某类元素施加样式），爬虫分析页面时同样用它来定位节点。

class 选择器：.类名，如 .video-card-record。class 可对应**多个**元素（可能有十个 div 共享同一 class，甚至 div、p、a 等不同类型元素共享），选中结果是多个元素。
id 选择器：#id名，如 #reportfirst1。HTML 中 id 必须唯一（像身份证），所以 id 选择器返回**唯一**一个元素。
通配符选择器：*，选中页面所有元素（很少用，提一下即可）。
元素（标签）选择器：直接写标签名，如 div 选中页面所有 div，a 选中所有超链接。前面不加点也不加井号。例：想获取页面所有超链接，写选择器 a 即可。

复合选择器（约 11:50–12:40）¶

通过特定组合适应更复杂的情况。例：想同时选中 div 和 p 两类元素，用逗号连接即可（div, p）。
其余复合选择器不逐一细讲，等实例演示时随用随讲，用起来后自然有体会。

示例与演示¶

B 站元素定位演示：在 B 站页面对某视频标题文字右键 → 检查，观察 Elements 面板自动跳转到对应的 p 元素，理解"获取该元素的 text 即得到文字内容"这一提取思路。
选择器写法举例（结合课件中的页面结构）：
选中 class 为 video-card-record 的 div：.video-card-record
选中 id 为 reportfirst1 的元素：#reportfirst1
选中所有超链接：a
同时选中 div 和 p：div, p

重点与难点¶

重点：掌握用浏览器开发者工具（F12、右键检查）把页面可见内容与 HTML 元素对应起来的方法——这是写任何页面分析代码的第一步。
重点：四种基本选择器的写法与语义，尤其区分 class 选择器返回多个元素、id 选择器返回唯一元素。
易错点：class 可以出现在不同类型标签上、可对应多个元素，用 class 选择器时结果数量可能超预期；id 唯一这一前提决定了 id 选择器的精确性。
XPath 只需知道存在即可，不作为本课要求。

关联内容¶

前置知识：前端开发基础（HTML 结构、CSS 样式表、DOM），即第 12 章 Web 开发课程内容；老师说明"回忆不起来也没关系，这里快速过一遍"。
本课的选择器知识直接服务于后续课程：13.3 静态页面爬取中用 BeautifulSoup 的 select 方法按 CSS 选择器提取元素；13.4 动态页面爬取中 Selenium 同样用 CSS 选择器定位元素。
提到 HTML 与 XML/XHTML 的关系，呼应 Web 开发章节讲的标记语言知识。