Module 01 · Crowdsourcing Short squeeze Dashboard
HTML for Webscraping网络抓取的 HTML 基础
在本视频中，我们将回顾用于网络爬虫的 超文本标记语言 (HTML)。网页中蕴含着海量的有用数据，例如房地产价格、代码问题解决方案，以及像维基百科这样的人类知识库。只要掌握了 HTML，你就可以利用 Python 提取这些信息。
学习目标
- 复习基础网页的 HTML 结构。
- 理解 HTML 标签 (Tag) 的组成部分。
- 理解 HTML 树 (HTML Trees) 结构。
- 理解 HTML 表格 (HTML Tables) 的构造。
一、 HTML 网页概览
假设你需要从一个网页中获取 国家篮球联盟 (NBL) 球员的姓名和薪资。网页本质上是由 HTML 构成的，它由被方括号包围的蓝色文本元素（即标签）和普通文本组成。
核心作用： 标签告知浏览器如何显示内容，而我们需要的数据通常就嵌套在这些标签之中。
1. 基础结构组件
<!DOCTYPE html>：声明该文档为 HTML 文档。<html>：网页的根元素。<head>：包含关于页面的元信息 (Meta Information)。<body>：包含网页上显示的内容，这通常是我们感兴趣的数据所在。
2. 常见内容标签
<h3>：3级标题。使文本变大变粗，通常用于包裹球员姓名。- 格式示例：
<h3> 球员姓名 </h3>（以<h3>开始，以</h3>结束）。
- 格式示例：
<p>：段落 (Paragraph)。在示例中，每个<p>标签包含了球员的薪资。
二、 HTML 标签的组成部分
以 HTML 锚点标签 (Anchor Tag) 为例：
<a href="IBM.com"> IBM </a>
| 组成部分 | 详细说明 |
|---|---|
| 标签名 (Tag Name) | 例如 <a>，定义了一个用于页面跳转的超链接。 |
| 起始标签 (Start Tag) | 标志着元素的开始。 |
| 结束标签 (End Tag) | 由标签名前加斜杠组成，如 </a>。 |
| 内容 (Content) | 位于起始和结束标签之间，即网页上实际显示的文本（如 "IBM"）。 |
| 属性 (Attribute) | 由 属性名 (href) 和 属性值 (IBM.com) 组成，提供额外信息。 |
💡 小贴士： 可以将每个标签名看作 Python 中的一个类 (Class)，而每个具体的标签则是该类的一个实例 (Instance)。
三、 HTML 文档树 (Document Tree)
HTML 文档可以被视为一棵“家族树”，标签可以包含字符串或其他标签。
- 子元素 (Children)： 嵌套在某个标签内部的元素。
- 层级关系：
<html>是根节点，包含<head>和<body>。<head>和<body>是<html>的直接子元素，也是其后代。<html>是它们的父元素。<head>和<body>处于同一层级，互为兄弟元素 (Siblings)。<title>是<head>的子元素，它是<html>的后代，但不是直接子元素。
四、 HTML 表格结构
HTML 表格的定义遵循特定的层级逻辑：
<table>：定义一个表格的开始。<tr>(Table Row)：定义表格的一行。<th>(Table Header)：可选，用于定义首行的表头单元格。<td>(Table Data)：定义具体的表格单元格。
数据排列逻辑示例：
- 第一行：
<tr>➔<td>(第1单元格),<td>(第2单元格)... - 第二行：
<tr>➔<td>(第1单元格),<td>(第2单元格)...
五、 进阶探索
现实中的网页远比示例复杂，还包含 CSS (样式) 和 JavaScript (交互) 等内容（本课程暂不涉及）。
- 检查工具： 在浏览器中，你可以选中任何元素并点击“检查 (Inspect)”来查看其背后的 HTML 源码。