HTML与DOM结构认知

Hollis 收录于 Python_web_crawler 和 Python网络爬虫

2025-10-13 2025-11-05 约 12400 字预计阅读 25 分钟 - 次阅读 - 条评论

本章导言

通过前三章的学习，我们已经掌握了Python基础语法、HTTP协议原理以及如何使用Requests库发送网络请求。现在我们已经能够从网络上获取到网页的原始数据了。但是，这些数据通常是HTML格式的，就像一本没有目录的书，内容杂乱无章。本章我们将学习如何理解这本书的"目录结构"——HTML与DOM，为下一章使用BeautifulSoup提取具体内容打下坚实基础。

4.1 HTML基础概念

4.1.1 什么是HTML

语法定义：

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是一种标记语言，使用标签来描述网页内容和结构。

核心特点：

由一系列元素（elements）组成
元素通过标签（tags）定义
标签通常成对出现：开始标签和结束标签
标签可以拥有属性（attributes）

4.1.2 基本HTML文档结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个一级标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

示例解析

<!DOCTYPE html>：文档类型声明
<html>：根元素，包含整个HTML文档
<head>：头部，包含元数据和引用的外部资源
<body>：主体，包含可见的网页内容

HTML练习1：基本HTML文档结构

打开：HTML教学示例和相关系统，找到“基本HTML文档结构”卡片，单击打开；
在网页的空白区域点击鼠标右键；
从弹出的菜单中选择"查看网页源代码"；
浏览器会在新标签页中显示完整的HTML源代码。
将HTML源代码的内容进行截图。

4.1.3 常用HTML标签

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它由一系列标签组成，这些标签定义了网页的结构和内容。以下是一些常用的HTML标签类型，按功能分类：

1. 文档结构标签

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：HTML文档的根元素。
<head>：包含文档的元数据（如标题、字符集、样式等）。
<body>：包含文档的主体内容。

2. 文本格式标签

<h1> 到 <h6>：定义标题，<h1> 是最高级别，<h6> 是最低级别。
<p>：定义段落。
<br>：插入换行。
<hr>：插入水平线。
<strong> 或 <b>：加粗文本。
<em> 或 <i>：斜体文本。
<u>：下划线文本。
<mark>：高亮文本。
<small>：小号文本。
<sub> 和 <sup>：下标和上标文本。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本标签示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <div class="container">
        <h1>这是一级标题 - 公司简介</h1>
        <h2>这是二级标题 - 发展历程</h2>
        <h3>这是三级标题 - 2023年里程碑</h3>
        
        <p>这是一个段落，包含了一些重要的公司信息。我们致力于为客户提供优质的服务。</p>
        
        <p>在这个段落中，我们使用了<span class="highlight">行内文本标签</span>来突出显示关键信息，
           同时使用<strong>加粗文本</strong>来强调重点内容，以及<em>斜体文本</em>来表示特殊术语。</p>
        
        <p>价格信息：原价<strong>¥999</strong>，现价<strong class="highlight">¥599</strong>！</p>
    </div>
</body>
</html>

HTML练习2：文本格式标签

打开：HTML教学示例和相关系统，找到“文本格式标签”卡片，单击打开；
鼠标右键，选择"查看网页源代码"，将网页源代码截图；
鼠标右键，选择"检查"，进入开发者工具（或者使用快捷键 F12）。
使用开发者工具查看DOM，找到页面中“¥599”文本元素的DOM结构，并截图。
将两个截图提交到讨论区。

3. 链接和多媒体标签

<a>：定义超链接。
<img>：插入图像。
<video>：插入视频。
<audio>：插入音频。
<source>：为 <video> 或 <audio> 提供多个媒体源。
<track>：为 <video> 或 <audio> 提供字幕或其他文本轨道。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代化产品展示页</title>
    <style>
        :root { --p: #3498db; --s: #2ecc71; --t: #333; --b: #f4f4f4; }
        body { font-family: 'Segoe UI', sans-serif; background: var(--b); color: var(--t); line-height: 1.5; font-size: 14px; margin: 0; }
        .container { max-width: 900px; margin: 0 auto; padding: 15px; background: white; box-shadow: 0 3px 5px rgba(0,0,0,0.1); }
        .nav-links { display: flex; justify-content: center; background: var(--p); padding: 10px; margin-bottom: 20px; }
        .nav-links a { color: white; text-decoration: none; margin: 0 10px; font-weight: bold; font-size: 0.9em; transition: transform 0.3s; }
        .gallery { display: flex; justify-content: space-between; gap: 15px; }
        .image-card { flex: 1; text-align: center; background: white; border-radius: 8px; padding: 10px; box-shadow: 0 3px 5px rgba(0,0,0,0.1); }
        .image-card img { max-width: 100%; border-radius: 8px; }
        .image-card a { display: inline-block; background: var(--s); color: white; text-decoration: none; padding: 6px 12px; border-radius: 4px; font-size: 0.8em; }
        #contact { text-align: center; background: var(--p); color: white; padding: 15px; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌟 网站导航与图片展示 🌟</h1>

        <div class="nav-links">
            <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度搜索</a>
            <a href="https://www.jd.com" target="_blank" rel="noopener noreferrer">京东购物</a>
            <a href="#contact" target="_blank">联系我们</a>
        </div>

        <h2>🛍️ 精选产品展示</h2>
        <div class="gallery">
            <div class="image-card">
                <img src="产品A.jpg" alt="产品A展示图">
                <p><a href="https://item.jd.com/100209268193.html" target="_blank" rel="noopener noreferrer">查看产品A详情</a></p>
            </div>
            <div class="image-card">
                <img src="产品B.jpg" alt="产品B展示图">
                <p><a href="https://item.jd.com/100089816136.html" target="_blank" rel="noopener noreferrer">查看产品B详情</a></p>
            </div>
            <div class="image-card">
                <img src="产品C.jpg" alt="产品C展示图">
                <p><a href="https://item.jd.com/100142621568.html" target="_blank" rel="noopener noreferrer">查看产品C详情</a></p>
            </div>
        </div>

        <div id="contact">
            <h3>📧 联系我们</h3>
            <p>邮箱：<a href="mailto:contact@company.com" target="_blank" rel="noopener noreferrer">contact@company.com</a></p>
        </div>
    </div>
</body>
</html>

HTML练习3：链接和多媒体标签

打开：HTML教学示例和相关系统，找到“链接和多媒体标签”卡片，单击打开；
鼠标右键，选择"查看网页源代码"，将网页源代码截图；
鼠标右键，选择"检查"，进入开发者工具（或者使用快捷键 F12）。
使用开发者工具查看DOM，找到页面中产品C 的 DIV 元素DOM结构，并截图。
将两个截图提交到讨论区。

4. 列表标签

<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<dl>：定义列表。
<dt>：定义术语。
<dd>：定义描述。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .list-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
        .navigation { background-color: #f5f5f5; }
        .steps { background-color: #f0f8f0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>列表类型展示</h1>

        <div class="list-section navigation">
            <h2>网站导航菜单（无序列表）</h2>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#products">产品中心</a>
                    <ul>
                        <li>电子产品</li>
                        <li>家居用品</li>
                        <li>服装鞋帽</li>
                    </ul>
                </li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </div>

        <div class="list-section steps">
            <h2>购买流程（有序列表）</h2>
            <ol>
                <li>浏览商品页面</li>
                <li>选择商品规格</li>
                <li>加入购物车</li>
                <li>结算支付</li>
                <li>确认收货信息</li>
                <li>完成支付</li>
            </ol>
        </div>
    </div>
</body>
</html>

HTML练习4：列表标签

打开：HTML教学示例和相关系统，找到“列表标签”卡片，单击打开；
鼠标右键，选择"查看网页源代码"，将网页源代码截图；
鼠标右键，选择"检查"，进入开发者工具（或者使用快捷键 F12）。
使用开发者工具查看DOM，找到页面中“选择商品规格”文本元素的DOM结构，并截图。
将两个截图提交到讨论区。

5. 表格标签

<table>：定义表格。
<tr>：定义表格行。
<td>：定义表格单元格。
<th>：定义表格表头单元格。
<thead>：定义表格的表头部分。
<tbody>：定义表格的主体部分。
<tfoot>：定义表格的页脚部分。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 1000px; margin: 0 auto; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #f5f5f5; }
        tr:nth-child(even) { background-color: #f9f9f9; }
        .price { text-align: right; color: #e74c3c; font-weight: bold; }
        .stock { text-align: center; }
        .in-stock { color: #27ae60; }
        .out-stock { color: #e74c3c; }
    </style>
</head>
<body>
    <div class="container">
        <h1>商品信息表格</h1>

        <table>
            <thead>
                <tr>
                    <th>商品ID</th>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>价格</th>
                    <th>库存状态</th>
                    <th>上架时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>P001</td>
                    <td>智能手机 X1</td>
                    <td>电子产品</td>
                    <td class="price">¥2,999.00</td>
                    <td class="stock in-stock">有货</td>
                    <td>2024-01-15</td>
                </tr>
                <tr>
                    <td>P002</td>
                    <td>笔记本电脑 Pro</td>
                    <td>电子产品</td>
                    <td class="price">¥5,999.00</td>
                    <td class="stock in-stock">有货</td>
                    <td>2024-01-10</td>
                </tr>
                <tr>
                    <td>P003</td>
                    <td>无线蓝牙耳机</td>
                    <td>电子产品</td>
                    <td class="price">¥399.00</td>
                    <td class="stock out-stock">缺货</td>
                    <td>2024-01-20</td>
                </tr>
                <tr>
                    <td>P004</td>
                    <td>办公椅</td>
                    <td>家居用品</td>
                    <td class="price">¥599.00</td>
                    <td class="stock in-stock">有货</td>
                    <td>2024-01-18</td>
                </tr>
                <tr>
                    <td>P005</td>
                    <td>陶瓷餐具套装</td>
                    <td>家居用品</td>
                    <td class="price">¥199.00</td>
                    <td class="stock in-stock">有货</td>
                    <td>2024-01-22</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">总计</td>
                    <td class="price">¥10,195.00</td>
                    <td colspan="2">5件商品</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

HTML练习5：表格标签

打开：HTML教学示例和相关系统，找到“表格标签”卡片，单击打开；
鼠标右键，选择"查看网页源代码"，将网页源代码截图；
鼠标右键，选择"检查"，进入开发者工具（或者使用快捷键 F12）。
使用开发者工具查看DOM，找到页面中商品名称为“无线蓝牙耳机”那一行元素的DOM结构，并截图。
将两个截图提交到讨论区。

6. 表单标签

<form>：定义表单。
<input>：定义输入字段。
<label>：定义输入字段的标签。
<textarea>：定义多行文本输入。
<button>：定义按钮。
<select>：定义下拉列表。
<option>：定义下拉列表中的选项。
<fieldset>：定义表单中的相关元素组。
<legend>：定义 <fieldset> 的标题。

7. 语义化标签（HTML5）

<header>：定义文档或节的页眉。
<nav>：定义导航链接。
<main>：定义文档的主要内容。
<section>：定义文档中的节。
<article>：定义独立的内容。
<aside>：定义侧边栏内容。
<footer>：定义文档或节的页脚。
<figure>：定义独立的流内容（如图像、图表等）。
<figcaption>：定义 <figure> 的标题。

8. 脚本和样式标签

<script>：定义客户端脚本（如JavaScript）。
<style>：定义内部CSS样式。
<link>：定义外部资源（如CSS文件）。

9. 元数据标签

<meta>：定义文档的元数据（如字符集、关键词、描述等）。
<title>：定义文档的标题（显示在浏览器标签页上）。

10. 其他常用标签

<div>：定义文档中的块级分区或节。
<span>：定义文档中的内联分区或节。
<iframe>：定义内联框架，用于嵌入另一个HTML文档。

4.1.4 HTML属性

HTML 属性是写在开始标签或单标签里的“键值对”，用来给元素添加额外的信息或行为。一句话：属性告诉浏览器“这个元素有什么特点”。

1.语法

1

<标签名 属性名="属性值">内容</标签名>

常见属性：

id：元素的唯一标识
class：元素的类名，用于CSS样式和JavaScript操作
style：内联CSS样式
src：资源路径（图片、脚本等）
href：超链接地址

作用	示例	实际效果
唯一标识	`<div id="header">`	JS 可直接 `document.getElementById('header')` 精准找到该元素
批量样式	`<p class="text-muted">`	CSS 写 `.text-muted{color:gray}` 一次让多处文字变灰
内联样式	`<h1 style="color:red">`	立刻把字号变红，无需外部 CSS
引入资源	`<img src="cat.jpg">`	把图片文件加载进来并显示
跳转地址	`<a href="https://imooc.com">`	点击后跳转到慕课网

示例：

1
2
3
4


<div id="main-content" class="container primary">
    <p class="highlight">这是一个高亮段落</p>
    <a href="https://example.com" target="_blank">访问示例网站</a>
</div>

总结：属性不改变标签的“种类”，但能给标签“加特技”，让元素变得可定位、可美化、可交互。

2.id和class属性说明

1.id（身份证）

给页面里唯一的那个元素起名字。
用来“指名道姓”地找它：CSS 写样式、JS 做操作、锚点做跳转。
名字只能出现一次，重复了浏览器不会报错，但逻辑就乱套。

2.class（制服/标签）

给一批元素贴上同样的“标签”。
用来“按类批量”处理：一次写样式，全员生效；一次抓数据，整组端走。
名字可以无限复用，一个元素还能同时贴好几套“制服”。

3.一张表看清 id vs class

对比维度	id	class
页面唯一性	必须唯一，只能出现一次	可随意复用，可出现任意次
选取范围	精确到“那一个”元素	一次性选中“那一类”元素
语法写法	`#student-2023001`	`.subject-representative`
一个元素能挂几个	只能挂 1 个	可同时挂 N 个（空格分隔）
主要用途	锚点跳转、JS 精确操作、特殊样式	批量样式、批量数据抓取、行为分组
搜索引擎/爬虫	直接定位关键字段（价格、标题）	一次性端走列表（全部商品、全部评论）
错误后果	重复 id 会导致 JS/锚点失效	无负面后果，复用越多越好
记忆口诀	“找那一个”	“找那一类”

3.示例html文件

示例1：电子产品商城HTML如下：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子产品商城</title>
    <style>
        /* 样式定义 */
        .product-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin: 10px;
            width: 250px;
            display: inline-block;
        }

        .featured {
            background-color: #fff8e1;
            border-color: #ffd54f;
        }

        .product-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .price {
            color: #e74c3c;
            font-size: 20px;
            font-weight: bold;
        }

        .discount {
            background-color: #e74c3c;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .new-tag {
            background-color: #2ecc71;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .out-of-stock {
            opacity: 0.6;
        }

        #page-title {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }

        #shopping-cart {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #3498db;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
        }

        #user-info {
            position: fixed;
            top: 20px;
            left: 20px;
            background: #ecf0f1;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <!-- 使用id的唯一元素 -->
    <h1 id="page-title">欢迎来到电子产品商城</h1>

    <div id="user-info">
        用户名: 张三
    </div>

    <div id="shopping-cart">
        购物车: <span id="cart-count">3</span> 件商品
    </div>

    <!-- 商品展示区域 -->
    <div class="products-container">
        <!-- 商品1：使用多个class -->
        <div class="product-card featured">
            <h3 class="product-name">iPhone 15 Pro</h3>
            <p class="description">最新款苹果手机，性能强劲</p>
            <div class="price">¥8999</div>
            <span class="discount">立减500</span>
            <span class="new-tag">新品</span>
            <button class="buy-btn">立即购买</button>
        </div>

        <!-- 商品2：普通商品 -->
        <div class="product-card">
            <h3 class="product-name">三星 Galaxy S23</h3>
            <p class="description">安卓旗舰手机</p>
            <div class="price">¥6999</div>
            <span class="discount">限时特惠</span>
            <button class="buy-btn">立即购买</button>
        </div>

        <!-- 商品3：缺货商品 -->
        <div class="product-card out-of-stock">
            <h3 class="product-name">iPad Air</h3>
            <p class="description">轻薄便携的平板电脑</p>
            <div class="price">¥4599</div>
            <span class="new-tag">新品</span>
            <button class="buy-btn" disabled>暂时缺货</button>
        </div>

        <!-- 商品4：特色商品 -->
        <div class="product-card featured">
            <h3 class="product-name">MacBook Pro</h3>
            <p class="description">专业级笔记本电脑</p>
            <div class="price">¥12999</div>
            <span class="discount">学生优惠</span>
            <button class="buy-btn">立即购买</button>
        </div>
    </div>

    <!-- 页脚 -->
    <div id="footer">
        <p class="copyright">© 2024 电子产品商城 版权所有</p>
        <p class="contact-info">客服电话: 400-123-4567</p>
    </div>

    <script>
        // 简单的JavaScript示例
        document.getElementById('page-title').addEventListener('click', function() {
            alert('欢迎光临我们的商城！');
        });

        // 通过class批量操作
        const buyButtons = document.getElementsByClassName('buy-btn');
        for (let button of buyButtons) {
            button.addEventListener('click', function() {
                if (!this.disabled) {
                    alert('商品已添加到购物车！');
                }
            });
        }
    </script>
</body>
</html>

HTML属性练习1：HTML属性

打开：HTML教学示例和相关系统，找到“ID与Class属性示例1”卡片，单击打开；
在网页的空白区域点击鼠标右键，从弹出的菜单中选择"查看网页源代码"；
使用快捷键 Ctrl + F 进行搜索，输入“class=”，找出所有的 class 属性及其值，将结果进行截图；
使用快捷键 Ctrl + F 进行搜索，输入“id=”，找出所有的 id 属性及其值，将结果进行截图；
将两个截图提交到讨论区。

示例2：博客系统

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126


<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>id 与 class 使用示例</title>
  <style>
    /* id 选择器（唯一元素） */
    #site-header {
      background: linear-gradient(90deg,#2b8cff,#1b6be0);
      color: white;
      padding: 18px 24px;
    }

    /* class 选择器（可复用） */
    .container {
      max-width: 980px;
      margin: 0 auto;
      padding: 16px;
    }

    /* 可复用组件类（多个元素共享） */
    .card {
      border: 1px solid #e0e6f0;
      border-radius: 8px;
      padding: 12px;
      background: white;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    /* 状态类，常用于切换显示/隐藏、激活态等 */
    .is-hidden { display: none !important; }
    .is-active { outline: 2px solid #ffb84d; }

    /* 组合类：更具体的样式 */
    .btn {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 6px;
      text-decoration: none;
      cursor: pointer;
      font-weight: 600;
    }
    .btn--primary { background: #2b8cff; color: white; border: none; }
    .btn--ghost { background: transparent; border: 1px solid #d0d7ea; color: #333; }

    /* 用 id 定位页面主体的额外样式示例 */
    #main-content { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-top: 18px; }
  </style>
</head>
<body>
  <!-- id 用于唯一标识整个站点头部（例如锚点或JS精确操作） -->
  <header id="site-header">
    <div class="container">
      <h1 id="logo">示例站点</h1> <!-- id 也可以用于 logo 等唯一元素 -->
      <nav id="main-nav" class="site-nav">
        <!-- 导航项使用 class，若需要给某项特殊样式可再加 class -->
        <a href="#home" class="site-nav__item btn btn--ghost">首页</a>
        <a href="#articles" class="site-nav__item btn btn--ghost">文章</a>
        <a href="#contact" class="site-nav__item btn btn--ghost">联系</a>
      </nav>
    </div>
  </header>

  <!-- container 是可复用布局类；id main-content 是页面唯一主体 -->
  <main id="main-content" class="container">
    <!-- 主区域：文章卡片（多个 card 使用相同 class，可复用样式） -->
    <section id="articles" class="content-list">
      <article class="card">
        <h2 class="article__title">如何正确使用 id 和 class</h2>
        <p class="article__meta">作者：张三 • 2025-10-13</p>
        <p>本文示例展示了 id 用于唯一目标，class 用于复用样式和行为。</p>
        <a class="btn btn--primary" href="#readmore1">阅读全文</a>
      </article>

      <article class="card">
        <h2 class="article__title">复用 class 的好处</h2>
        <p class="article__meta">作者：李四 • 2025-10-10</p>
        <p>多个相似组件共享 class，有利于维护和一致性。</p>
        <a class="btn btn--primary" href="#readmore2">阅读全文</a>
      </article>
    </section>

    <!-- 侧边栏：唯一元素用 id（例如单页只有一个侧栏） -->
    <aside id="sidebar" class="card">
      <h3>侧边栏</h3>
      <p>这里演示如何把通用类和局部 id 组合使用。</p>

      <!-- 状态类示例：通知条，可通过 JS 控制显示/隐藏 -->
      <div id="site-notice" class="card is-hidden">
        <strong>提醒：</strong> 这是一个示例通知（通过 id 在 JS 中定位并切换类）。
      </div>

      <div style="margin-top:12px;">
        <button id="toggle-notice" class="btn btn--ghost">显示/隐藏通知</button>
      </div>
    </aside>
  </main>

  <footer id="site-footer" class="container">
    <div class="card" style="margin-top:18px;">
      <p>© 2025 示例站点。id 应保持页面唯一性；class 用于复用。</p>
    </div>
  </footer>

  <script>
    // JS: 用 id 精确获取单个元素（唯一）
    const toggleBtn = document.getElementById('toggle-notice');
    const notice = document.getElementById('site-notice');

    toggleBtn.addEventListener('click', () => {
      // 切换状态类（class 可复用）来显示/隐藏
      notice.classList.toggle('is-hidden');
    });

    // JS: 也可以通过 class 获取一组元素（复用场景）
    // 例如把所有 .btn 元素附加一个点击日志（示例）
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(btn => {
      btn.addEventListener('click', (e) => {
        console.log('按钮被点击：', e.currentTarget.textContent.trim());
      });
    });
  </script>
</body>
</html>

HTML属性练习2：博客系统HTML属性

打开：HTML教学示例和相关系统，找到“ID与Class属性示例2”卡片，单击打开；
在网页的空白区域点击鼠标右键，从弹出的菜单中选择"查看网页源代码"；
使用快捷键 Ctrl + F 进行搜索，输入“class=”，找出所有的 class 属性及其值，将结果进行截图；
使用快捷键 Ctrl + F 进行搜索，输入“id=”，找出所有的 id 属性及其值，将结果进行截图；
将两个截图提交到讨论区。

4.2 DOM树结构

4.2.1 什么是DOM

定义： DOM（Document Object Model，文档对象模型）是HTML文档的编程接口，它将HTML文档表示为树形结构，每个节点都是一个对象，可以通过JavaScript等编程语言进行操作。

DOM树的特点：

树形结构，有明确的父子关系
每个HTML元素对应一个DOM节点

4.2.2 DOM节点类型

主要节点类型：

文档节点：整个文档（根节点）
元素节点：HTML标签
文本节点：标签中的文本内容
属性节点：标签的属性

4.2.3 DOM树示例

HTML代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>标题</h1>
    <div>
        <p>段落文本</p>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
        </ul>
    </div>
</body>
</html>

对应的DOM树结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


文档节点
└── html元素节点
    ├── head元素节点
    │   └── title元素节点
    │       └── "示例页面"文本节点
    └── body元素节点
        ├── h1元素节点
        │   └── "标题"文本节点
        └── div元素节点
            ├── p元素节点
            │   └── "段落文本"文本节点
            └── ul元素节点
                ├── li元素节点
                │   └── "项目一"文本节点
                └── li元素节点
                    └── "项目二"文本节点

4.2.4 节点关系术语

家族关系比喻：

父节点：直接包含当前节点的节点
子节点：被当前节点直接包含的节点
兄弟节点：拥有相同父节点的节点
祖先节点：当前节点的父节点，父节点的父节点等
后代节点：当前节点的子节点，子节点的子节点等

示例分析： 在之前的DOM树中：

<body>是<h1>和<div>的父节点
<h1>和<div>是兄弟节点
<html>是所有节点的祖先节点
<li>是<body>的后代节点

DOM结构练习1：分析HTML代码的DOM结构

打开：HTML教学示例和相关系统，找到“DOM树结构示例”卡片，单击打开；
“检查网页源代码”或进入“开发者工具”，分析DOM树结构，并回答下面的问题：

① <nav> 元素的父节点、子节点和兄弟节点？

② 哪些元素是 <body> 的直接子节点？

③ <ul> 元素的后代节点有哪些？

注：你需要在讨论区分三点进行作答。

DOM结构练习2：分析DOM结构并复制XPath路径

打开：HTML教学示例和相关系统，找到“学院新闻中心”卡片，单击打开；
“检查网页源代码”或进入“开发者工具”，分析DOM树结构，并回答下面的问题：
1. 定位到 id=“main” 的 div 元素，它有哪些子节点，每个子节点的class名称分别是什么？
2. 定位到“《筑梦南科院》南充科技职业学院2025版宣传片重磅发布”文本元素，进行如下操作：
  1. 鼠标放到定位到的DOM元素上面；
  2. 鼠标右键，依次点击：“Copy(复制)”> “Copy XPath(复制XPath)”；
  3. 将得到的结果粘贴，作为本问题的答案。

注：你需要在讨论区分两点进行作答。

XPath简要说明

XPath，全称是 XML Path Language，即 XML路径语言。它是一种用来在XML和HTML文档中定位和选择节点的查询语言。

你可以把XML/HTML文档想象成一棵由各种节点（如元素、属性、文本等）组成的“家族树”，而XPath就是用来在这棵树上精确地找到某一个或某一组“家庭成员”的地址描述。

4.3 开发者工具查看DOM

在浏览器开发者工具中精确定位并查看网页中特定HTML元素，具体步骤如下：

打开开发者工具：在网页上右键点击选择"检查"，或按F12快捷键；
点击Elements(元素)面板：在开发者工具窗口顶部点击"Elements"标签页；
激活选择模式：点击开发者工具左上角的"选择元素"图标（箭头指向方框的图标）；
悬停定位元素：将鼠标移动到网页上，你会看到不同区域被彩色高亮显示；
点击选择目标元素：在网页上点击你想要查看的特定元素；
查看高亮节点：在Elements面板中，对应的DOM节点会自动展开并高亮显示；
阅读DOM结构：查看高亮显示的HTML代码，包括标签名、属性和嵌套结构。

本章总结

4.5.1 重点回顾

HTML基础：标签、属性、文档结构
DOM概念：树形结构、节点关系
工具使用：开发者工具查看和分析DOM
实战应用：识别网页中的数据组织结构

4.5.2 知识关联

与前序章节：本章处理的HTML数据来自第3章的Requests请求
与后续章节：本章的DOM认知是下章BeautifulSoup解析的基础

4.5.3 下章预告

在下一章《BeautifulSoup解析技术》中，我们将：

学习使用BeautifulSoup库解析HTML
掌握根据DOM结构提取目标数据的方法
实践完整的数据采集流程

预习思考： 基于本章学习的DOM知识，思考如何通过程序自动找到并提取网页中的特定数据？

收录于合集・Python网络爬虫 5

Requests库发送HTTP请求 BeautifulSoup解析HTML