（纯新手教程）HTML零基础教学

（下一章：python网络爬虫）

HTML 简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。

什么是 HTML？

HTML 不是编程语言，而是一种标记语言
使用标签来描述网页内容
文件扩展名为 .html 或 .htm
由浏览器解析并渲染成可视化网页

1. 基础 HTML 结构

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
</head>
<body>在这里填入正文</body>
</html>

运行结果描述

网页显示一个空白页面，浏览器标签页标题为 “这里是标题”，页面主体区域显示文字 “在这里填入正文”。

代码解析

<!DOCTYPE html>：声明文档类型为 HTML5，告诉浏览器按 HTML5 标准解析文档。
<html lang="en">：HTML 根标签，lang="en"表示页面主要语言为英语（可改为zh-CN表示中文）。
<head>：包含页面元数据（不直接显示在页面上）。
- <meta charset="UTF-8">：指定字符编码为 UTF-8，支持多语言（包括中文）。
- <title>：定义浏览器标签页的标题，也是搜索引擎抓取的重要信息。
<body>：包含页面所有可见内容（如文字、图片、链接等）。

2. 标题标签

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><h2>我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6></body>
</html>

运行结果描述

页面显示 6 个不同大小的标题，从上到下依次减小：h1最大，h6最小。每个标题独占一行，字体加粗。

代码解析

<h1>到<h6>是标题标签，用于定义不同级别的标题，形成文档的层级结构（h1为最高级，通常一个页面只一个h1）。
标题标签的大小由浏览器默认样式控制（可通过 CSS 修改），且自带上下外边距，自动换行。
语义化标签：帮助搜索引擎理解页面结构，提升 SEO 效果。

3. 段落标签

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p></body>
</html>

运行结果描述

页面顶部显示最大的标题h1（“我是标题 1”），下方显示一个段落（“这里可以写一个段落的文字信息”），段落与标题之间有间距，段落文字正常大小（非加粗）。

代码解析

<p>是段落标签，用于定义文本段落。
段落标签自带上下外边距，会与其他元素（如标题）自动分隔，且内部文字会自动换行（根据浏览器宽度调整）。
与直接写文本相比，<p>标签更符合语义化，便于 CSS 统一样式控制。

4. 超链接标签

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p><a href="https://www.ptpress.com.cn/">链接到人民邮电出版社</a></body>
</html>

运行结果描述

页面包含h1标题、段落文字，以及一个蓝色下划线的文本 “链接到人民邮电出版社”。鼠标悬停时指针变为手形，点击后跳转到人民邮电出版社官网。

代码解析

<a>是超链接标签，用于创建页面间的跳转。
href属性：指定链接目标（可以是网址、本地文件路径或页面内锚点），此处为绝对 URL（完整网址）。
超链接默认样式：蓝色、下划线，点击后变为紫色（表示已访问），可通过 CSS 修改。

5. 注释的用法（代码标注说明）

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个段落的文字信息</p><h2>我是标题1</h2></body>
</html>

运行结果描述

页面显示h1标题（“我是标题 1”）、段落文字，以及h2标题（“我是标题 1”），h2比h1小。

代码解析

代码标注为 “提示注释的用法”，但实际代码中未包含注释。HTML 注释的格式为，用于在代码中添加说明，浏览器会忽略注释内容，不显示在页面上。
示例：若添加在<p>标签上方，页面运行时不会显示该注释，仅作为代码备注。

6. 标签属性

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head>
<body>
<h1>我是标题1</h1>
<p>这里可以写一个段落的文字信息</p>
<h3 id = 'python' , title = '我是提示信息', style="color: #799961;">Python办公自动化</h3>
</body>
</html>

运行结果描述

页面有h1标题、段落，以及h3标题 “Python 办公自动化”。h3文字为绿色（#799961对应的颜色），鼠标悬停在h3上时，会显示提示文字 “我是提示信息”。

代码解析

标签属性：通过属性名=属性值的形式为标签添加附加信息，放在标签名后。
- id='python'：为h3定义唯一标识（id 值在页面中需唯一），可用于 CSS 定位或 JavaScript 操作。
- title='我是提示信息'：定义鼠标悬停时显示的提示文本，提升用户体验。
- style="color: #799961;"：内联样式，直接设置文字颜色为十六进制颜色值#799961（绿色系）。
注意：属性间应用空格分隔（代码中用逗号分隔是不规范的，浏览器会兼容但不推荐）。

7. 加粗标签

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>我是标题1</h1><p>这里可以写一个<b>段落</b>的文字信息</p></body>
</html>

运行结果描述

页面h1标题下方的段落中，“段落” 二字以加粗样式显示，其他文字正常。

代码解析

<b>是加粗标签，用于使包裹的文本显示为粗体（仅视觉效果，无语义强调）。
替代标签：<strong>也可加粗文本，但<strong>有语义强调的含义（表示内容重要），更符合语义化，推荐优先使用。
标签为行内元素：不会破坏段落的连续性，仅影响包裹的部分文字。

8. 上标、下标、加粗、下划线

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1><i>我是 </i><sup>标</sup><sub>题</sub>1</h1><p>这里可以写一个<b>段落</b>的<u>文字信息</u></p></body>
</html>

运行结果描述

h1标题中：“我是” 以斜体显示，“标” 是上标（高于正常文字），“题” 是下标（低于正常文字），整体组合为 “我是⁠标题 1”。
段落中：“段落” 加粗，“文字信息” 下划线。

代码解析

行内格式化标签（均为行内元素，不换行）：
- <i>：使文本斜体（视觉效果，无语义），对应语义化标签<em>（强调文本）。
- <sup>：上标标签，常用于数学公式（如x²）或引用标注（如[1]）。
- <sub>：下标标签，常用于化学式（如H₂O）。
- <b>：加粗（见第 7 点）。
- <u>：下划线，注意与超链接默认下划线区分（可通过 CSS 修改样式）。

9. 字体颜色

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 style="color:rgb(168,168,168)">我是标题1</h1><p style="color:#FF0000">这里写一个段落的文字信息</p><p style="color:blue">我是第二段内容</p><h2 style="background:LightSeaGreen ; color:blue">我是标题2</h2></body>
</html>

运行结果描述

h1标题文字为浅灰色（rgb(168,168,168)）。
第一个段落文字为红色（#FF0000）。
第二个段落文字为蓝色（颜色名blue）。
h2标题：背景色为浅海绿色（LightSeaGreen），文字为蓝色。

代码解析

通过style属性的color设置文字颜色，background设置背景色。
颜色值的 3 种表示方式：
- RGB 值：rgb(红,绿,蓝)，每个值 0-255（rgb(168,168,168)为灰色）。
- 十六进制：#RRGGBB（#FF0000为红色，FF=255，00=0）。
- 颜色名：如blue（蓝色）、LightSeaGreen（浅海绿），浏览器预定义的颜色名称。

10. 字体大小

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 style="font-size:38pt">我是标题1</h1><p style="font-size:1cm">我们一起学习Python办公自动化</p></body>
</html>

运行结果描述

h1标题文字大小为 38 点（pt），比默认h1更大。
段落文字大小为 1 厘米（cm），比默认段落文字大。

代码解析

font-size属性用于设置文字大小，通过style属性定义（内联样式）。
常用单位：
- pt（点）：1pt≈0.35mm，常用于印刷领域。
- cm（厘米）：物理长度单位，在不同设备上显示大小可能不同。
- 推荐单位：px（像素）、em（相对父元素）、rem（相对根元素），更适合屏幕显示。

11. 添加网页图片

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >我是标题1</h1><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48382-9/72jpg/48382.jpg" alt="图片丢失了" width="200px"></body>
</html>

运行结果描述

h1标题下方显示一张图片（尺寸 200px 宽），图片内容为某本书的封面。若图片链接失效，会显示替代文本 “图片丢失了”。

代码解析

<img>是图片标签（自闭合标签，无需结束标签），用于在页面插入图片。
核心属性：
- src：指定图片源（可以是绝对 URL、相对路径或 base64 编码），此处为网络图片 URL。
- alt：图片加载失败时显示的替代文本，也用于屏幕阅读器（无障碍访问），必填属性。
- width：设置图片宽度（200px表示 200 像素），高度会按比例自动调整（避免图片变形）。

12. 添加音频

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >我是标题1</h1><audio controls="controls" src="音乐.mp3">音乐丢失了</audio></body>
</html>

运行结果描述

h1标题下方显示一个音频播放器（带播放 / 暂停、进度条、音量控制）。若 “音乐.mp3” 文件存在且路径正确，可播放音频；若文件丢失，显示 “音乐丢失了”。

代码解析

<audio>用于在页面嵌入音频文件。
核心属性：
- controls：显示音频控制界面（浏览器默认样式），值可简写为controls。
- src：指定音频文件路径（支持 mp3、wav、ogg 等格式），此处为本地文件 “音乐.mp3”（需与 HTML 文件同目录，否则需写相对路径）。
标签内容 “音乐丢失了”：当浏览器不支持<audio>标签或文件加载失败时显示。

13. 添加网页视频

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >播放视频啦</h1><video src="https://video19.ifeng.com/video09/2025/07/15/p7350679444735922881-102-083526.mp4" controls="controls" width="500"></video></body>
</html>

运行结果描述

h1标题 “播放视频啦” 下方显示一个宽度 500px 的视频播放器（带播放 / 暂停、进度条、音量、全屏等控件），可播放指定 URL 的视频。

代码解析

<video>用于嵌入视频文件，功能类似<audio>但支持视频。
核心属性：
- src：视频文件 URL（支持 mp4、webm、ogg 等格式），此处为凤凰网的视频链接。
- controls：显示视频控制界面。
- width="500"：设置视频宽度为 500 像素，高度按比例自动调整。
注意：视频文件体积较大，建议使用 CDN 或流式传输，避免加载过慢。

14. div 标签

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >我是标题1</h1><div style="background: antiquewhite"><h2>我是标题2</h2><p>我这里可以输入一个段落</p></div></body>
</html>

运行结果描述

h1标题下方有一个浅棕色（antiquewhite）背景的区块，区块内包含h2标题 “我是标题 2” 和段落文字，区块宽度占满整个页面（默认）。

代码解析

<div>：块级容器标签，用于分组页面内容（无默认样式，需配合 CSS 使用）。
作用：
- 布局：将相关元素组合成一个区块，便于统一设置样式（如背景、边距）。
- 结构：使页面代码更清晰，便于维护。
块级元素特性：默认独占一行，宽度默认占满父元素，可设置宽高（width/height）。

15. 布局示例

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >我是标题1</h1><div style="background: antiquewhite; width: 500px;height: 400px" ><h2>我是标题2</h2><div style="background: brown; width: 200px; height:300px;float: left"><p>我这里可以输入一个段落</p><p>python <span style="color:blue">办公</span> 自动化</p></div><div style="background:darkcyan; width:300px;height:300px;float:right"><h3>我是标题3</h3></div><p>最后一段内容</p></div></body>
</html>

运行结果描述

页面顶部是h1标题。
下方是一个 500px 宽、400px 高的浅棕色背景容器，内有h2标题。
容器内左侧：200px 宽、300px 高的棕色背景区块，包含两段文字，其中 “办公” 二字为蓝色。
容器内右侧：300px 宽、300px 高的深青色背景区块，包含h3标题。
容器底部有 “最后一段内容” 文字（因浮动元素脱离文档流，可能显示在两个色块下方或重叠）。

代码解析

布局核心：通过float（浮动）实现左右分栏。
- float: left：左侧区块向左浮动，脱离正常文档流。
- float: right：右侧区块向右浮动，与左侧区块并排。
<span>：行内容器标签，用于包裹局部文本（如 “办公”），设置单独样式（不破坏段落结构）。
注意：浮动元素可能导致父容器高度塌陷（此处父容器固定了高度400px，避免了塌陷），实际开发中需用清除浮动（clear）处理。

16. 表格标签

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1>创建表格</h1><table border="10"><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table></body>
</html>

运行结果描述

h1标题 “创建表格” 下方显示一个表格：边框宽度 10px，共 2 行 2 列，单元格内容分别为 “第 1 行中的第 1 格” 等文字。

代码解析

表格基本结构：
- <table>：定义表格容器。
- border="10"：设置表格边框宽度为 10px（默认无边框）。
- <tr>：定义表格行（table row）。
- <td>：定义表格单元格（table data），包含具体内容。
表格默认样式：单元格之间有间距，边框为单实线（可通过border-collapse属性合并边框）。

17. 表格表头

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >我是标题1</h1><table border="2"><th colspan="2">我是表格表头内容</th><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table></body>
</html>

运行结果描述

h1标题下方的表格：边框宽度 2px，第一行为表头（文字加粗居中），内容 “我是表格表头内容”，跨 2 列；下方有 2 行数据，每行 2 列。

代码解析

<th>：表头单元格（table header），用于定义表格列标题，默认样式为文字加粗、居中。
colspan="2"：列合并属性，使表头单元格横跨 2 列（colspan值为合并的列数）。
表头的作用：明确列含义，提升表格可读性，屏幕阅读器会识别表头与内容的关联。

18. 表格标题

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>这里是标题</title></head><body><h1 >添加表格标题</h1><table border="2"><caption>我是表格标题</caption><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table></body>
</html>

运行结果描述

h1标题下方的表格：边框宽度 2px，表格上方显示标题 “我是表格标题”（居中），表格内容为 2 行 2 列的单元格。

代码解析

<caption>：定义表格标题，必须直接放在<table>标签内，且在所有其他表格元素之前。
默认样式：标题位于表格上方，水平居中，与表格之间有间距。
作用：描述表格的整体内容，提升表格的语义化和可读性。

19. 搭建图书网站

代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>好书推荐网站</title></head><body><table ><caption><h1 style="color: dodgerblue ;size: 38px">好书推荐网站</h1></caption><tr><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-53619-8/72jpg/53619.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=5e6fe0f3-6ee7-40c2-8c25-9cdf9b0c87e6">心 稻盛和夫的一生嘱托</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48382-9/72jpg/48382.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=ebb3164d-06af-41f5-85bd-60f95a5e09cb">即兴演讲 掌控人生关键时刻</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41359-8/72jpg/41359.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=25c373dc-e599-4036-8534-a102aad0a776">聪明的投资者（原本第4版，平装本）</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-24669-1/72jpg/24669.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=c44b8d45-6a91-4800-b91c-c3392379b208">番茄工作法图解：简单易行的时间管理方法</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-29236-0/72jpg/29236.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=f642f34c-9f46-4a6f-ad15-c9b9b2875004">股票大作手操盘术——融合时间和价格的利弗莫尔准则</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41358-1/72jpg/41358.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=67e260c3-b0cb-41bb-b698-6f9dbd54a610">聪明的投资者（第4版，注疏点评版）</a></td></tr><tr><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-37407-3/72jpg/37407.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=4d1c7610-10d7-4d4b-a2f2-dd702983ff8d">极简主义 风靡欧美的工作与生活理念</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48908-1/72jpg/48908.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=3eee0747-bfd0-49b1-86b4-18d838480264">活好 我这样活到105岁</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-38808-7/72jpg/38808.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=ca2de4df-b928-47a8-b8ce-5a725106df07">从零开始学炒股：股票入门与实战（全彩图解版）</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-51023-5/72jpg/51023.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=c7309aeb-a7bc-45e4-9818-47bc4b5579f4">低风险创业</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48388-1/72jpg/48388.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=6498a974-0db5-4379-bb77-eaf098e57a28">政府会计制度详解与实务 条文解读 实务应用 案例讲解</a></td><td><div style="background: cornsilk ;width: 200px;height: 300px;float: left"><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-54342-4/72jpg/54342.jpg" width="200" height="250"><a href="https://www.ptpress.com.cn/shopping/buy?bookId=7a745ee7-4a02-412f-942a-bf0131743346">认知觉醒：开启自我改变的原动力</a></td></tr></table></body>
</html>

运行结果描述

网页标题为 “好书推荐网站”，页面顶部显示蓝色的h1标题 “好书推荐网站”（表格标题）。
表格内分 2 行，每行 6 列，共 12 本图书。
每列是一个米白色（cornsilk）背景的区块（200px 宽、300px 高），包含图书封面图片（200x250px）和书名超链接，点击链接跳转到对应图书的购买页。

代码解析

布局方式：使用<table>表格进行页面布局（早期常用，现在更推荐 CSS Flexbox/Grid），每行 6 列展示图书。
组合标签：
- <caption>：表格标题，包含网站主标题。
- <div>：每个图书项用div包裹，统一设置背景和尺寸。
- <img>：展示图书封面，src为网络图片 URL。
- <a>：书名作为超链接，href指向图书购买页。
注意：表格布局存在语义化差、响应式差等问题，现代网页开发中已较少使用，建议用 CSS 布局替代。