发布于 26天前

祈礼：排版语言从入门到入土（上）

排版语言从入门到入土（重制版）上册

前言

排版语言从入门到入土已经发了有一段时间了，后续又发布了其进阶版本排版语言从入土到复活日。在我今天翻看旧的排版语言从入门到入土时，我发现了某些局限性，对于萌新来说，单单讲排版语言对其帮助不大，需要更多的在具体的应用上下功夫。因此我开始编纂新版的排版语言从入门到入土。

part-1 Markdown

1.1 Markdown 的存在与意义

Markdown 的起源

在互联网内容创作的早期，人们面临着一个两难困境：一方面，HTML 等标记语言能够精确地为文档添加丰富格式，实现复杂的排版效果，可其语法较为繁琐，充斥着大量尖括号包裹的标签，对于普通用户而言，编写和阅读都颇具难度，创作时容易打断思路。另一方面，纯文本虽然简洁易读，人人都能轻松上手编写，但缺乏格式，难以满足多样化的内容展示需求。在这样的背景下，Markdown 应运而生。

2004 年，John Gruber 与 Aaron Swartz 共同创造了 Markdown。John Gruber 是一位知名的程序员、作家，在技术与文字表达领域经验丰富；Aaron Swartz 是互联网活动家、程序员，对互联网信息传播有着深刻见解。他们希望创造一种兼顾两者优势的标记语言，既能让人们以接近纯文本的自然方式书写内容，又能方便地转化为结构良好、格式丰富的 HTML 文档。John Gruber 在设计 Markdown 的语法规则时，秉持简洁、易读、易写的原则。他从纯文本的排版习惯中汲取灵感，设计出一系列简单直观的符号标记，像用"#"表示标题，"*"或"-"表示列表等。例如，只需在文字前加上一个"#"，就能将其变为一级标题，无需再像 HTML 那样使用 <h1>标题内容</h1> 这样复杂的标签。Aaron Swartz 则运用自己在编程和互联网技术方面的专长，协助完成 Markdown 的实现工作，让 Markdown 能顺利地在不同系统和平台上运行，从最初的设想逐步成为可实际应用的工具。

Markdown 诞生后，迅速在技术社区和写作爱好者中流行开来。技术人员发现它非常适合编写文档、说明、博客文章等，在撰写代码注释时也格外方便，能够清晰区分代码与解释文字。随着时间的推移，越来越多的平台和工具开始支持 Markdown，如 GitHub 将其作为默认的文档格式，使得代码仓库中的说明文档变得简洁又美观；众多写作软件也纷纷加入对 Markdown 的支持，极大地拓展了 Markdown 的应用范围，使其成为互联网时代内容创作不可或缺的工具之一，深刻影响着人们的写作与交流方式。

对于人类来说，舒适的排版可以方便阅读，比如你可以加粗某段文字来让人更快的注意到

或者加入一个标题

标题

来让人快速的知道这里要切换到下一个段落了。

对于 AI 来说也如此，数据大模型的阅读习惯和人类相同，使用 Markdown 里的某些字符可以方便 AI 进行阅读。AI 同样会看到标题，会看到加粗字体，会看到斜体，会看到脚注，这也就代表着使用 Markdown 来对你的提示词进行标注是行之有效的。

另外一方面，AI 输出的 Markdown 也会被网页编辑器转化为对应的样式，正如你可能会看到一些常规情况下无法打出来的公式

\[H(X) \leq \sum_{i=1}^{\infty} p(x_i) \log_2 \frac{1}{p(x_i)}\]

实际上它们是这样的

\[\begin{aligned}
&\$ \\
&H(X) \setminus \text{leg} \setminus \text{sum}_\{(i-1)^6 p(x_i) \setminus \log_2 \setminus \text{frac}(1)\{p(x_i)\}}\\
&\$ \\
\end{aligned}\]

而像上面的代码块，它们实际上是这样的

\[\begin{aligned}
&\wedge \\
&\text{这里出现了一些，它们是转义字符，意义是让上下的代码块标识不生效。具体观看请无视那些转义字符}\\
&\wedge \\
\end{aligned}\]

综上我们可以总结出 Markdown 在提示词的书写上的两个作用。

1.2 标题、分段、标注、脚注

让我们从最基础的标题开始

标题的作用很简单

在 Markdown 中，使用#标注的标题，对人类和 AI 都有着特殊意义。人在阅读内容时，由于标题在格式上往往更加醒目突出，所以会下意识地先关注标题，以此快速把握内容主旨。而 AI 处理文本时，其"阅读习惯"在某种程度上与人类相似，也会优先分析标题内容。从这个角度来看，对于 AI，#可以被视作一种权重分段算法。它能帮助 AI 快速识别文本的关键主题和结构层次，理解不同部分内容的重要程度，进而更高效准确地对整体文本进行解析与处理。

你可以对一个分段添加标题，正如本分段一样，这样就可以让 AI 知道原来下面的段落的统一主旨是这样

在提示词中来看，就像是这样的

# 核心设定
以下是我为你整理的加权算法 xxxx

即在一段话前加入一个#。标题符号有多个分级，对应了一级标题，二级标题，三级标题，对应了 HTML 里的<A1>等

在排版的角度，不同的标题都统一居中或统一居左对齐，某些编辑器可能会在一级或二级标题的下面自动添加分割线来确保阅读流畅。标题的分段代表着标题的大小不同，让人来看的话，一个一级标题下面的二级标题就相当于包含在这个一级标题里的几个不同的"分论点"，而对于 AI 也是一样的。

在 AI 的角度，不同的标题就是不同的论点，一个一级标题就是一个文章标题，一个二级标题则是该文章下的分论点，三级、四级以此类推。

标题符号的分段是按照标题符号"/#"的数量来决定的

# 一级标题
## 二级标题
## 三级标题

需要注意的一点是，在 Markdown 中，符号（无论什么符号）必须跟有一个空格，否则会被认定为非法字符，不会被转换。

☑ # 正确的

□ #错误的

学习了基础的标题符号之后，我们要来学习另外一个符号，分段

没错，分段，在 Markdown 中，字段是默认不分段的，你必须在段与段之前额外打上一个换行才能被正确分段

错误的：

你好
世界

正确的：

你好

世界

（如你所见，在两个段之间额外打了一个换行）

学了最基础的标题和分段后，我们已经有能力书写一些常规的文章了，甚至你已经有资格去 c 站或者 g 站发文章而不至于被骂"一坨"了。

但是，对于 AI 来说还远远不够，其实对于人来说也不够。

这是一段话，你可能不会注意这段话

这里是另外一段话，他被加粗了，你可能会因此而注意到它

这里也是一段话，它是斜着的，你可能会注意到它

是的，我们可以加粗某些字段来让这些字段更加强目，对于人来说，一整段字中突然出现的加粗或者斜体会让人注意到，对 AI 来讲也如此。

我们可以让一段话加粗，只需要加上

** ** *

也可以让一段话斜过来，只需要加上

** *

也可以让一段话又加粗又斜过来，只需要

** *这段话会即加粗又倾斜**

这样的加粗和斜体，对 AI 来说是一种加权算法，加粗是强加权，而斜体是弱加权。

（即加粗又倾斜的是介于强弱之间的）

你可以在一整段提示词里将某个字段加粗，让 AI 注意到它，作用与四级权重中的 @a 类似。

这样的加粗或者倾斜被统称为标注，与它们类似的，划线也是标注的一种，就像你会在课本上划线一样。

这段话被加了下划线

但这里暂不展开讨论，因为<u>（下划线的原标签）属于 HTML 的范畴

脚注的作用是最奇特的，因为其可以被常规的注释所替代，你会在某些网站看到这样的样式

臣本布衣，躬耕¹于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
1: 躬：亲自。耕：耕种

脚注的使用非常简单

这是一句话[^1]。
[^1]: 这是脚注内容。

脚注的作用之所以被称之为奇特，是因为目前风月几乎完全没有使用脚注的卡。目前脚注的作用有二

其一：你可以在某些文言文的卡中规范 AI 的格式以使其输出脚注来辅助用户阅读。

其二：你可以在 AI 不敏感的生词加入脚注，随后在后续单独开一个一级标题来写脚注内容。

# 设定
xxx 会因为 xxx 原因而雌堕[^1]
# 注
[^1]: 雌堕是指 xxx

1.3 链接，图片，列表

如果你充分阅读了上述内容，你应该已经熟知了 Markdown 的一些基础字符，接下来已经可以进入进阶篇目了。

首先，我们阅览网页时，可能会看到某些标蓝的链接

比如这样的：www.baidu.com

尽管现在大部分 Markdown 编辑器识别链接并自动标蓝，但是终究有一定局限性，某些域名很怪的链接不会被识别，且标蓝的只有链接。

而有的时候，你大概会看到这样的跳转

跳转至百度

这样的标蓝，是使用了 Markdown 的链接标注功能。

[跳转文字](URL)

与链接标注（跳转）类似的，还有图片的链接

示例

你可以这样来在文章的中间嵌入图片

![图片描述](URL)

图片描述是图片无法加载时显示的描述，URL 是图片链接

请注意，通过 URL 嵌入图片，必须保证图片链接是指向图片的，而非指向带有该图片的网站的。一般来说，你可以使用图床来将本地图片转换为图片链接，这里推荐使用聚合图床。

请注意！事实上，很不推荐使用 Markdown 的嵌入图片字符来嵌入图片，因为这有很大的局限性，图片在上传时是什么样，展示出来的就是什么样，无法根据你的情况进行裁剪，这代表着，Markdown 嵌入的图片大概率无法适配多端，现在我们更推荐使用一个盒模型来嵌入图片，这更行之有效。在下面的 HTML 篇章中我会介绍这种方式

列表的作用很多很大，无论对于玩家还是对于 AI。我们常见的无序有序列表和带表头的大表格都能有效的提升阅读效率，对于 AI 来说也是。

还记得之前说过的吗？某些 Markdown 字符和你的字段之间必须要间隔一个空格，这里会告诉你解释。

- 项目
- 项目
- 项目
- 这是一种无序列表的方法
* 项目
* 项目
* 项目
这也是一种无序列表

你可能会问，这两种无序列表有什么区别，好问题，没区别。无论是"~"还是"*"在作用上都是等效的。这可能是开发者的恶意或非单纯的历史遗留问题

无论是那种符号的无序列表，他们在 Markdown 里都是这样被渲染的：

项目
项目
项目

需要注意的是，尽管二者作用等效，但是不能混用，每个列表只能用其中一种，当出现了另外一种时，二者就会被划分为两个表格。渲染的样式就会是两个列表间出现了很大的空行 * 项目 * 项目 - 项目（如上，这里出现了很大的空行）

解释上面的问题，如果你错误的在*和字段之间没有加入空格的话，其就会变成斜体而非无序列表，反之亦然，如果你错误的加入了空格，原本你打算输入斜体则会变成无序列表。* 这样*

如果你的作品中出现了这样的情况，会让人会心一笑，然后一脚踢死你的作品。

无序列表对 AI 的作用与人是相同的，大概可以分成以下三点。

清晰呈现元素

使用"-"或"*"等符号构成的无序列表可以将多个提示词选项清晰地罗列出来。例如，如果你想让 AI 生成一篇故事，你的提示词可以写成这样：

故事类型：童话故事
主要角色：一个勇敢的小魔法师
故事场景：神秘的魔法森林

这种列表形式能让 AI 快速抓取每个关键元素，清楚地知道你对于故事的要求包含哪些方面，避免混淆。

强调并列关系

无序列表中的每个元素是并列的，这有助于强调每个提示词的平等地位。在要求 AI 进行文本创作、翻译或者回答问题时，能够把不同方向的要求明确地展现出来。比如在翻译提示词中：

翻译内容：科技论文摘要
目标语言：日语
风格要求：专业、正式

这表明每个要求对于最终结果都很重要，AI 需要综合考虑这些并列的要点来生成合适的翻译内容。

便于调整和补充

当你想调整提示词顺序或者添加新的提示词时，无序列表非常方便。可以很容易地插入新的选项或者重新排列顺序，让你灵活地完善提示词，以更好地引导 AI 生成符合期望的内容。

有序列表与无序列表在书写格式上是类似的，但是有序列表没有无序列表那样有两种等效书写方式的情况（乐），有序列表的书写方式有且仅有一种：

有序列表
1. 项目一
2. 项目二
3. 项目三

有序列表是一个数字，一个英文的句号（或者叫点），一个空格，后面跟着字段组成的

项目一
项目二
项目三

有序列表在写 AI 提示词时有诸多优势。

建立步骤流程

有序列表适用于为 AI 描述一个有先后顺序的任务流程。例如，如果你想让 AI 生成一个菜谱，你可以这样写提示词：

首先，列出需要的食材：面粉、鸡蛋、牛奶、糖、酵母。
接着，描述制作面团的步骤，包括将面粉、酵母、糖混合，加入鸡蛋和牛奶，揉成光滑的面团。
然后，说明面团的发酵时间和温度。之后，讲述如何将发酵好的面团做成想要的形状，比如面包形状。
最后，提供烤制的时间和温度参数。

这种形式能够让 AI 清晰地理解每个环节的先后顺序，从而更好地生成一个完整、有条理的菜谱内容。

明确优先级或重要性排序

当提示词的内容有优先级之分时，有序列表也很有用。比如在要求 AI 进行内容优化时：

首要任务是检查语法错误并改正。
其次，优化句子结构，使表达更清晰。
最后，替换一些普通词汇，增添文采。

这样，AI 可以根据这个顺序来依次处理内容，先关注最重要的语法部分，再进行其他方面的优化。

便于引用和索引

在较长或较复杂的提示词中，有序列表可以方便你自己和 AI 引用特定的部分。比如，你可以说"按照第 5 点中的要求来重点处理这个部分"，清晰地指定了要求，帮助 AI 更好地聚焦于特定的任务细节。

在 AI 提示词中，混合使用无序列表和有序列表可以发挥它们各自的优势，让提示词更加清晰和有条理。

例如，你希望 AI 帮你写一篇产品评测。可以这样写提示词：

开头部分
- 首先，用一个吸引人的句子引出产品，比如提及产品的热门程度或者你对它的最初期待。
- 然后，简单介绍产品所属类别和主要功能。
主体部分
- 产品外观
  1. 描述产品的形状，用具体的形状词汇（如长方体、圆柱体等）。
  2. 说明产品的颜色搭配，列举主要颜色。
- 产品性能
  - 列出最重要的性能指标，如电子产品的处理器速度、电池续航等。
  - 对于每个性能指标，提供一些对比信息（如果有类似产品），可以通过"比XX产品性能更好/差"的形式。
- 用户体验讲述产品在日常使用中的舒适度，例如手持设备的握持感。分享使用过程中的便利性，比如操作是否简单易懂。
结尾部分
- 总结产品的优缺点。
- 最后，给出一个综合评价和购买建议。

在这个例子中，有序列表用于划分文章的主要部分，建立一个整体的框架，让AI明白内容的大致结构和顺序。无序列表用于在每个主要部分下罗列并列的要点，如产品外观下的形状和颜色等要点是并列关系。而主体部分中的有序列表（1、2、等）又在无序列表的子项中体现了步骤或者重要性排序，比如在描述产品外观时，先讲形状再讲颜色的顺序。这种混合形式可以帮助AI更好地理解复杂的要求，生成更符合预期的内容。

除了列表之外，表格也是一种行之有效的列举划分要点的方法。

表头1 | 表头2 | 表头3
（请注意这里，这里没有加：后面会考）

它们会列出一个表格来

早饭	午饭	晚饭
面包	培根	牛排
牛奶	香肠	苹果
鸡蛋	汉堡	意面

你只需要在对应的位置填入对应的字段即可

刚才有一段划重点的位置，也就是第二行处：

|---|---|---|---|

这里代表着对齐方式，默认不加":"则是不对齐

你可以用 |:---|---|---|---| 来左对齐，用 |---|---|---|---| 来右对齐，用 |:---|---|---|---| 来居中对齐。

不对齐

早饭	午饭	晚饭
面包	培根	牛排
牛奶	香肠	苹果
鸡蛋	汉堡	意面

居中对齐

早饭	午饭	晚饭
面包	培根	牛排
牛奶	香肠	苹果
鸡蛋	汉堡	意面

区别很明显。对齐方式的不同仅对用户的观看有所影响，对于 AI 来说没有任何影响。

在编写 AI 提示词时，表格可以起到以下几方面的帮助：

清晰呈现信息对比

当需要 AI 比较不同事物的多个属性时，表格是非常理想的工具。例如，若要求 AI 生成关于不同手机品牌的对比文案，你可以这样写提示词：

手机品牌	操作系统	屏幕尺寸	摄像头像素
品牌 A	安卓	6.5 英寸	5000 万像素
品牌 B	iOS	6.1 英寸	4800 万像素

这种表格形式能让 AI 一目了然地看到各个品牌手机在不同属性上的差异，从而更准确地进行对比描述。

结构化复杂要求

对于包含多个维度和细节的任务，表格可以帮助你将提示词结构化。比如，让 AI 设计一个角色，提示词可以是：

角色维度	具体要求
外貌	金发碧眼，身材高大，穿着中世纪骑士盔甲
性格	勇敢、忠诚，有点莽撞
技能	精通剑术，会骑马，懂一些草药知识

这样的表格可以让 AI 清晰地理解每个维度下的具体要求，有助于生成一个符合预期的、多维度完整的角色形象。

限定内容范围

通过表格列出关键要点，能够帮助你精确地界定提示词的范围。比如，让 AI 写一篇关于旅游景点的文章，提示词表格可以是：

景点信息	要求
名称	黄山
主要景点	迎客松、莲花峰、光明顶
风格描述	自然风光秀丽，奇松、怪石、云海景观为主

这使得 AI 能够聚焦在你指定的景点范围内，按照要求进行创作，避免内容偏离主题。

1.4 代码行，代码块，数学公式

对代码的标注大致可以分为两种，单行代码和多行代码

这三者的区别在于，单行代码会像加粗加重一样，在该字段上做出改变（用一个框框住）

而多长代码则是单独开一行，无论写了多少个字，都像字块一样圈起来。

这里是一段多行注释

单行注释是由一对一组成的这里填写代码行内容。

单行注释可以用于标记某些地方，在博客和大部分网站上，常用于对某些术语进行标注。

比如：在 Markdown 中，表格主要通过管道符（|）和连字符（-）来创建。

基本表格结构

用管道符（|）来分隔列。例如，|表头1|表头2|表示一个有两列的表格的表头部分。
用连字符（-）来分隔表头和表格内容，并且连字符的数量可以用来调整表格列宽的外观。例如，在表头下面添加一行 |---|---| 来表示表格的分隔行，这会让表格看起来更规整。

在这里，用了单行代码来对术语进行标注，使整体更易读。

多行代码，又名代码块，模板字面量（在 JavaScript 中），三重引号注释，它忠诚的将所有代码框选，制造一个"块"来存放它们，并使其可以被复制，在某些 Markdown 编辑器里，还拥有对其的渲染功能。

代码块是使用了三个英文引号*来进行前后标注的

\^^^
\这里是标注的代码块
\^^^

代码块可以分为加注和不加注两种形式，不加注的代码块就下文那样，用一个白框将代码块内容圈起来。

代码块内容

而加注的代码块则像这样提供了对应语言的变色与可复制功能。


<p>这是一个段落。</p>

<!-- 这是一个HTML注释，不会在浏览器中显示，用于开发者记录代码功能、意图等信息 -->
<p>这是另一个段落。</p>

示例图

一般来说，代码块被用于简单状态栏的制作。

姓名：
生命：
身份：

也有时被用于标注某些需要玩家注意的或者与其他内容不同的内容。

比如知鱼的 thinking 就是使用的代码块。

早期的卡大部分是使用的代码块作为状态栏，但是请你注意，松开那个该死的 w 键，代码块臃肿，且无法与任何其他排版方式配合，这是绝对不能忍受的。

代码块内的所有内容都会被按照原本的方式展示，即所有优化排版的代码都无法生效。

现在已经不推荐使用纯代码块作为状态栏设计，而是使用简单的折叠字段作为状态栏。

又或者，使用简单的 css 样式创建一个盒模型。

与代码块类似的，能够使代码无效化的，还有注释，但是 Markdown 中并没有注释的字符，因此注释将会在下文的 HTML 篇中讲解。

有的时候，你可能会好奇，为什么 Markdown 能够被用于大部分博客或者网页，并且成为大家的共识。除了简单轻量化、支持如上的多种样式之外，还有最重要的一点，Markdown 引用了少部分 LaTex 的数学公式包，并将之简化。

这些包允许 Markdown 输出渲染一些常规情况下无法被正常渲染的公式，且比 Word 简单无数据。

一个数学公式，必须要以 $$ 开头，以 $$ 结尾，这种方式用于表示行间公式，会单独占据一行并居中显示。例如：

\[ E = mc^2 \]

这是著名的质能公式，展示了能量（E）和质量（m）以及光速（c）之间的关系。

若要在文本行内插入数学公式，则使用 $ 包裹公式内容，例如：根据质能公式 \[ E = mc^2 \]，我们可以了解到质量和能量之间的转换关系。

这样公式会和文本在同一行显示，适用于简单公式的引用，不会打断文本的连贯性。

Markdown 支持的 LaTex 数学公式语法丰富，除了基本的运算符号

如 +（加）、-（减）、×（乘）、÷（除），还支持上下标。上标使用 ^ 符号，下标使用 _ 符号，比如 x^2 + y_1，表示 x 的平方加上 y 的下标1 。

在表示分式时，使用 \text{frac} (分子)(分母) 的语法，如 \text{frac}[1][2] 会显示为 $\frac{1}{2}$。根式则通过 \text{sqrt} [根指数](被开方数) 来表示，当根指数为 2 时可省略不写，例如显示为 $\sqrt{7}$, \text{sqrt}[3][8] 显示为 $\pm$。

通过这些简洁的语法，我们能在 Markdown 中方便地书写各种复杂的数学公式，满足学术写作、技术分享等场景下对数学表达的需求。

符号	符号名	关键字	用处
Σ	求和符号	\sum	用于表示求和运算法则，例如 $\sum_{i=1}^n i$ 表示从 1 到 n 的整数求和。
∫	积分符号	\int	用于表示积分运算，像 $ f^b(x)dx $ 表示函数 $ f(x) $ 在区间 $[a,b]$ 上的定积分。
Π	求积符号	\prod	用于表示连乘运算，如 $\prod_{i=1}^n t_i$ 表示从 1 到 n 的整数连乘。
√	平方根符号	\sqrt{}	用于表示求平方根，例如 $\sqrt{4}$ 表示求 4 的平方根，结果是 2。
∞	无穷大符号	\infty	用于表示无穷的概念，像 $lim_{x \to \infty}$ 表示 x 趋近于无穷时的极限情况。
≤	小于等于符号	\leq	用于比较大小，表示小于或等于，例如 $x \leq 5$。
≥	大于等于符号	\geq	用于比较大小，表示大于或等于，例如 $y \geq 3$。
≠	不等于符号	\neq	用于比较，表示两个量不相等，例如 $a \neq b$。
≈	约等于符号	\approx	用于表示近似相等，例如 $\pi \approx 3.14$。
∧	逻辑与符号	\land	在逻辑表达式中表示"且"的关系，例如 $A \land B$，只有当 $A$ 和 $B$ 都为真时，$A \land B$ 才为真
∨	逻辑或符号	\lor	在逻辑表达式中表示"或"的关系，例如 $A \lor B$，只要 $A$ 和 $B$ 中有一个为真，$A \lor B$ 就为真
¬	逻辑非符号	\neg	对一个逻辑值取反，例如 $\neg A$，若 $A$ 为真，则 $\neg A$ 为假，反之亦然
→	逻辑蕴含符号	\Rightarrow	表示逻辑上的蕴含关系，例如 $A \Rightarrow B$，意思是如果 $A$ 为真，那么 $B$ 一定为真
↔	逻辑等价符号	\Leftrightarrow	表示逻辑等价关系，例如 $A \Leftrightarrow B$，意味着 $A$ 和 $B$ 的逻辑值总是相同的，同真同假

part 2 HTML 的原标签和伪标签

2.1 HTML 的历史与优势

上文有说过，Markdown 的作用很大，主要体现在其轻量化上。这也给 Markdown 带来了一些局限，在纯粹的排版上，Markdown 不如 LaTex；而在自由度和功能性上，Markdown 远不如允许嵌入 CSS 样式和 JavaScript 的 HTML。

相比于 Markdown，HTML 最大的优势在于其可被高度定义，且可以通过一些标签与其他语言联动。而最重要的是，Markdown 的渲染取决于网站本身的编辑器，而 HTML 的渲染取决于浏览器，而现在所有浏览器的渲染方式是统一的，这也就代表着，HTML 在所有平台有着绝对统一的特点。且通过嵌入 CSS，哪怕不统一的平台，也会因此而统一。

2.2 写在一切的前面

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

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

风月提供了一个供大家使用的 HTML 框架，因此某些东西可以被忽略（但还是建议看一看）

现在的 HTML 都被允许通过<style>标签来嵌入 CSS 样式表，通过<script>标签来嵌入 JavaScript，这给 HTML 带来了极高的上限。

在正式开始教程之前，我们必须要知道一些事：

首先，你在编写 HTML 之前，需要有一个编辑器，推荐使用 Vs Code 跳转至下载页，如果你只有一部手机，则推荐 MT 管理器。

在这些之后，你需要一个可以用于预览 HTML 界面的程序或者软件，这里我推荐的是我最常用的菜鸟 HTML 在线跳转至菜鸟。

2.3 声明、原标签

HTML 是与浏览器对应的语言，为了确保浏览器正确的渲染对应版本的 HTML，我们需要进行声明。

HTML 声明，也叫文档类型声明（DOCTYPE），它的作用是告诉浏览器当前文档使用的是哪种 HTML 版本。这是 HTML 文档的第一行内容，非常重要，因为它能让浏览器正确地解析和显示页面内容。

在 HTML5 中，DOCTYPE 声明非常简单，就是 <!DOCTYPE html> 这一行代码。它没有结束标签，并且不区分大小写，不过通常大家习惯写成 <!DOCTYPE html> 这种小写的形式。

为什么要有 DOCTYPE 声明呢？在没有 DOCTYPE 声明或者声明不正确的情况下，浏览器可能会进入一种"怪异模式"（quirks mode），在这种模式下，浏览器对页面的渲染可能会和我们预期的不一样，各个浏览器之间的显示效果也可能存在差异。而当我们正确地写上了 DOCTYPE 声明，浏览器就会以"标准模式"（standards mode）来解析和渲染页面，这样就能保证页面在不同浏览器上的显示效果尽可能一致。

例如，下面是一个最基本的 HTML 文档结构，<!DOCTYPE html> 就位于最开头：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 HTML 页面</title>
</head>
<body>
    这是我的页面内容，在这里可以添加各种文本、图片等元素。
</body>
</html>

在这个示例中，<!DOCTYPE html> 声明告诉浏览器，这是一个 HTML5 文档，浏览器会按照 HTML5 的标准来解析和显示后续的代码。

在上面的示例中，我们还看到了 <html lang="zh-CN">，这是 <html> 标签的起始标签，它是 HTML 文档的根元素，所有其他的 HTML 元素都包含在这个标签内部，就像是一个"大容器"，把整个网页的内容都包裹起来。

其中，lang="zh-CN" 是 <html> 标签的一个属性，它用于声明文档所使用的语言。这里 zh-CN 代表中文（中国大陆地区），zh 是中文的语言代码，CN 是中国大陆地区的区域代码。通过设置这个属性，能为网页提供重要的语言信息，这对网页的显示、搜索引擎优化以及辅助技术（如屏幕阅读器）都有很大帮助。例如，屏幕阅读器可以根据这个语言设置，用正确的语言发音来朗读网页内容，让视障人士能够理解。

而与之对应的是 <html> 结束标签，它告诉浏览器，HTML文档的内容到此结束。起始标签和结束标签必须成对出现，缺一不可，否则 HTML文档的结构就会不完整，浏览器在解析时可能会出现错误，影响网页的正常显示效果。只有正确地使用 <html> 标签及其属性，才能为后续构建一个完整、规范且易于理解的网页打下坚实基础。

这时，你会发现，出现了一个新词汇：标签。是的，标签，在 HTML中，所有元素都被包裹在对应的原标签内，标签是 HTML语言的基本构成单元，它定义了网页内容的不同部分和功能。

标签由尖括号包围的标签名组成，比如 <html> 、<body> 。多数标签需要成对出现，包含起始标签和结束标签，结束标签比起始标签多了一个斜杠，像 <p>这是段落内容</p> ，<p> 是起始标签，</p> 是结束标签，它们中间包裹的就是段落的具体文本内容。

有些标签比较特殊，被称为自闭合标签，不需要结束标签，例如 <img> 标签用于插入图片，<input> 标签用于创建输入框等。自闭合标签会在标签名后紧跟一个斜杠来表示结束，比如 <img src="example.jpg" alt="示例图片"> ，它通过自身属性来提供足够的信息完成功能。

每个标签都有其特定的语义和用途，<h1> - <h6> 标签用于定义不同级别的标题，<ul> 和 <ol> 标签分别用来创建无序列表和有序列表。通过合理组合各种标签，就能搭建出结构清晰、内容丰富的网页。了解标签是学习 HTML的关键一步，下一个我们要深入探讨的，是标签中十分重要的属性。

2.4 <head>

<head>就像大脑后台一样，虽然其中的内容不会直接显示在页面上，但却包含了大量影响页面整体表现的关键信息。比如 <meta> 标签常被放置在 <head> 里，用来定义页面的元素数据，像字符编码 <meta charset="UTF-8"> ，它能确保页面正确解读各种文字符号，避免出现乱码情况

还有网页的标题 <title>我的精彩网页</title> 也在 <head> 中，标题不仅会显示在浏览器的标题栏，还是搜索引擎判断网页主题的重要依据。

此外，<link> 标签用于引入外部资源，比如 CSS 样式表，通过 <link rel="stylesheet" href="（css 文件名）.css"> 就能让网页应用外部的样式，美化页面展示效果。

2.4.1 <title>, <mate>

<title>用于定义一个网页的标题，这个标题会显示在手机或电脑屏幕的最上方的搜索框中，同时，也是搜索引擎用于判断网页主题的关键要素之一。

<title>是一个非自闭合标签，需要加入对应的结束标签，即<title>一个网页标题</title>，这样，你的屏幕上方的显示框里就会显示标题"一个网页标题"

<title>对一个网页来说是那么重要，以至于我们可用一个元数据来形容它，当然，这只是用于形容，真正的元数据另有其"签"。

我们用<mate>来定义一个网页内的元数据，这包含了字符编码、页面描述、视窗等。

<mate>是一个自闭合标签，你无需输入它的结束标签，而是直接在这个标签内部进行标注：


<meta charset="UTF-8">
<meta name="description" content="这是一个关于网页制作教程的页面">
<meta name="keywords" content="网页制作,教程,HTML">
<meta name="viewport" content="width=device - width, initial - scale = 1.0">

像这样，你可以定义一些基本元素，只需要在<mate>的内部加上一个空格，后面跟上元素名称和给该元素的定义和赋值，就可以让这个元数据生效。

以下是一些常见<mate> 1. 字符编码相关 - <meta charset="UTF-8"> - 用途：这是最常用的 meta 标签之一。UTF-8 是一种通用的字符编码方式，几乎可以表示世界上所有的字符。使用这个标签可以确保浏览器正确地解析和显示网页中的文本内容，无论是中文、英文、阿拉伯文还是其他语言的字符，都能有效避免乱码问题。2. 页面描述和关键词相关 - <meta name="description" content="网页的简要描述"> - 用途：这个标签用于提供网页的简短描述。搜索引擎在展示搜索结果时，会使用这个描述来让用户快速了解网页的大致内容。例如，<meta name="description" content="这是一个专注于美食分享的网页，包含各种美食的制作方法和餐厅推荐">。 - <meta name="keywords" content="关键词1,关键词2,关键词3"> - 用途：用于指定网页的关键词，这些关键词可以帮助搜索引擎更好地理解网页的主题。比如对于一个科技博客网页，可以写 <meta name="keywords" content="科技新闻，电子产品评测，软件更新"，这样当用户搜索这些关键词时，网页就有更高的机会出现在搜索结果中。5. 视口相关（用于移动端适配）- <meta name="viewport" content="width=device - width, initial - scale = 1.0"> 用途：在移动设备上浏览网页时，这个标签非常重要。它告诉浏览器网页的宽度应该等于设备的屏幕宽度，并且初始缩放比例为1.0。这样可以确保网页在移动设备上能够正确地自适应屏幕大小，提供更好的用户体验。还可以添加更多属性来控制缩放、最小/最大缩放比例等。

如 content="width=device - width, initial - scale = 1.0, maximum - scale = 5.0, minimum - scale = 0.5"。4. 文档兼容性相关（旧浏览器）- <meta http - equiv="X - UA - Compatible" content="IE=edge"> 用途：在过去，Internet Explorer（IE）浏览器有多个版本，并且对网页标准的支持程度不同。这个标签用于告诉 IE 浏览器以其最高版本（edge）的模式来渲染网页，有助于确保网页在 IE 浏览器中尽可能地按照最新的标准和规范进行显示，减少兼容性问题。不过随着 IE 浏览器的逐渐淘汰，其重要性也在降低。

2.4.2 <link>, <style>

上面有说过，HTML 和 Markdown 相比最大的优势就是 HTML 允许嵌入 CSS 样式来对整个界面进行定义。

先来说说 CSS 样式，css 样式是一种对标签进行定义，或者创建盒模型，创建样式块的语言，在 HTML 中，允许以三种方式加入 CSS

内联样式，内部样式表，外部样式表。

它们的具体会在下面的 CSS 篇继续详讲，这里只说说 CSS 样式相关的<link>和<style>标签。

提示：<link>标签的数据部分面对的是真正的网页开发者，如果是风月作者，则可无视这部分，直接到<style>标签部分。

<link>标签是一个空元素，它用于在 HTML 文档中建立和外部资源之间的联系。最常见的用途是链接外部 CSS 样式表，使网页能够应用定义好的样式规则。

属性

rel 属性：
- 这个属性定义了当前文档与被链接文档之间的关系。对于 CSS 样式表来说，通常使用 rel="stylesheet"，表明被链接的文档是一个样式表，用于控制页面的样式呈现。
- 除了 stylesheet ，还有其他的值，如 alternate （用于指定替代资源）、icon（用于指定网站图标）等。例如，<link rel="icon" href="favicon.ico">可以将名为 favicon.ico 的图标文件与网页关联起来，这个图标会显示在浏览器的标签栏、书签栏等位置。
href 属性：
- 它用于指定被链接资源的 URL（统一资源定位符）。可以是相对路径或绝对路径。相对路径是相对于当前 HTML 文档的位置来指定资源位置的。例如，如果 CSS 样式表文件 styles.css 与 HTML 文件在同一目录下，就可以使用 <link rel="stylesheet" href="styles.css"> 来链接它。如果 CSS 文件在一个名为 css 的子目录下，那么可以写成 <link rel="stylesheet" href="css/styles.css">。绝对路径则是完整的 URL，比如 <link rel="stylesheet" href="https://example.com/styles.css">。

当链接外部 CSS 样式表时，<link> 标签允许网页开发者将样式定义从 HTML 文档中分离出来。这样做有很多好处，例如可以让样式在多个页面中复用。如果有一个网站的多个页面都需要相同的基本样式（如字体、颜色方案、布局等），就可以创建一个 CSS 样式表文件，通过 <link> 标签将其链接到各个 HTML 页面。这使得样式的维护更加方便，当需要修改样式时，只需要在 CSS 文件中进行修改，而不需要逐个修改 HTML 页面中的样式代码。

此外，<link> 标签还可以用于链接其他类型的资源。比如，通过设置 rel="prefetch" 或 rel="preconnect" 等属性，可以预加载一些未来可能会用到的资源，提高网页的加载速度和性能。例如，<link rel="prefetch" href="next_page.html"> 可以告诉浏览器预先获取 next_page.html 页面的资源，当用户真正访问该页面时，加载速度就会更快。

<style>标签与<link>标签对应，标签用于在 HTML 文档内部直接定义 CSS 样式。它允许将样式规则嵌入到 HTML 文件中，而不是使用外部样式表。

在 <style> 标签内部，需要按照 CSS 的语法规则来定义样式。例如：


<style>
    body {
    background - color: lightblue;
    font - family: Arial, sans - serif;
    }
    h1 {
    color: red;
    }
</style>

这里定义了两个样式规则。第一个规则是针对 body 元素的，将背景颜色设置为浅蓝色，并指定了字体为 Arial 或其他无衬线字体；第二个规则是针对 h1 标题元素的，将颜色设置为红色。

对于简单的网页（包括风月的详细介绍界面）或者在开发过程中快速样式测试，<style>标签非常方便。它可以让开发者在不创建外部 CSS 文件的情况下，直接在 HTML 文档中对元素进行样式设置。

但是，如果网页的样式比较复杂或者需要在多个页面中复用样式，使用外部样式表（通过 <link> 标签链接）会是更好的选择。因为如果在多个 HTML 文件中都使用 <style> 标签来定义相同的样式，当需要修改样式时，就需要在每个文件中分别进行修改，这样会比较繁琐且容易出错。不过，在某些特定情况下，如创建具有独特样式的单页应用或者小型的 HTML 示例文件，标签可以提供快速、便捷的样式定义方式。

2.4.3 <base>

<base>标签用于为 HTML 文档中的所有相对链接指定一个基础 URL。它是一个单标签，位于 <head> 元素内部。当浏览器解析相对链接时，会以 <base> 标签中指定的基础 URL 作为前缀来构建完整的链接。

href 属性：这是 <base> 标签最重要的属性。它的值是一个绝对 URL，用于指定基础路径。例如，<base href="https://www.example.com/">，所有在这个 HTML 文档中的相对链接都会以 https://www.example.com/ 作为基础来构建完整的链接。
target 属性（可选）：这个属性用于指定链接打开的目标窗口或框架。它的取值和 <a> 标签中的 target 属性类似，如 _self （在当前窗口打开，这是默认值）、_blank （在新窗口打开）等。例如，<base target="_blank"> 会使得文档中的所有相对链接在新窗口中打开。

在一个网站中，如果很多页面的相对链接都指向同一个域名下的不同路径，使用 <base> 标签可以简化链接的书写。例如，一个网站的 HTML 文件存储在 https://www.example.com/html/ 目录下，并且这些文件中的相对链接大多指向同一域名下的其他目录，如 images/ （图片目录）、 css/ （样式表目录）等。通过设置 <base href="https://www.example.com/">，可以将相对链接（如 <a href="products.html">产品页面</a>）自动解析为 https://www.example.com/products.html ，而不需要在每个相对链接中都写上完整的域名。

当网站的域名或者基础路径发生改变时，只需要修改 <base> 标签中的 href 属性，就可以更新所有相对链接的基础路径。这对于网站的迁移或者结构调整非常有用，能够确保网站的链接在新的环境下仍然能够正确工作。不过需要注意的是，使用 <base> 标签可能会对一些已经存在的相对链接行为产生影响，所以在使用时要谨慎考虑，特别是在对现有网页进行改造时。

2.5 <body>

<body>是网页内容的"舞台"，你在浏览器中实际看到展示的文本、图片、链接、视频等所有可见元素，基本都位于 <body> 标签内部。例如 <p>Hello world!</p> 这样的段落文本，<img src="beautiful_picture.jpg" alt="图片"> 这样插入的图片，还有创建超链接的 <a href="https://www.example.com">点击访问示例网站</a>，这些元素构成了网页的主体内容，直接与用户进行交互。

我会和上面一样，分布，一个一个把所有标签都喂给你，而你从这一步开始，就要打开 vs 或者 wt，准备跟着一步一步写了。

而在正式开始之前，我先放一个附表，方便后续不会的时候整理并使用。

文档和排版相关

标签名	描述	用法示例
`<address>`	定义文档作者或拥有者的联系信息。	`<address>作者：John Doe<br> 邮箱：johndoe@example.com</address>`
`<article>`	定义独立的内容，比如一篇博客文章、新闻故事等。	`<article><h2>文章标题</h2><p>文章的具体内容...</p></article>`
`<aside>`	定义页面主内容之外的内容，如侧边栏。	`<aside><h3>相关推荐</h3><p>推荐内容 1</p><p>推荐内容 2</p></aside>`
`<blockquote>`	定义一个长的引用。	`<blockquote><p>这是一段引用的文字，引用自某本书籍或文章。</p></blockquote>`
`<body>`	定义文档的主体，是所有可见内容的容器。	`<html><head><title>页面标题</title></head><body>h1>页面内容</h1></body></html>`
`<br>`	插入一个换行符。	`<p>这是第一行</br>这是第二行</p>`
`<caption>`	定义表格标题。	`<table><caption>学生成绩表</caption><tr><th>姓名</th><th>成绩</th></tr><tr><td>张三</td><td>90</td></tr><tr><td>/table>`
`<cite>`	定义引用、引证，通常是对另一个作品的引用。	`<p>我最近读了一本很棒的书，<cite>《了不起的盖茨比》</cite>。</p>`
`<code>`	定义计算机代码文本。	`<p>以下是一段简单的Python代码：<code>print("Hello, World!")</code></p>`
`<dd>`	定义描述列表（`<dl>`）中的项目描述。	`<dl><dt>苹果</dt><dd>一种常见的水果，富含维生素。</dd></dl>`
`<del>`	定义被删除的文本。	`<p>我原本计划去北京，<del>后来改去上海</del>。</p>`
`<dfn>`	定义一个定义项目。	`<p><dfn>HTML</dfn>是超文本标记语言，用于创建网页。</p>`
`<div>`	定义文档中的一个分隔或区域。	`<div style="background-color: lightgray; padding: 10px;"><h2>这是一个区域</h2><p>区域内的内容</p></div>`
`<dl>`	定义描述列表。	`<dl><dt>香蕉</dt><dd>黄色的水果，味道甜美。</td><dt>橙子</dt><dd>富含维生素C的水果。</td></dl>`
`<dt>`	定义描述列表（`<dl>`）中的项目。	见 `<dl>`标签的示例
`<em>`	定义强调文本。	`<p>我<em>真的</em>很喜欢这个电影。</p>`
`<figcaption>`	定义`<figure>`元素的标题。	`<figure><img src="example.jpg" alt="示例图片">"</figcaption>这是一张示例图片</figcaption></figure>`
`<figure>`	规定独立的流内容（图像、图表、照片、代码等）。	`<figure><img src="example.jpg" alt="示例图片">"</figcaption>这是一张示例图片</figcaption></figure>`
`<footer>`	定义文档或节首页，通常包含作者、版权信息等。	`<footer><p>2024 示例公司</p></footer>`
`<h1> - <h6>`	定义 HTML 标题，`<h1>`是最高级标题，`<h6>`是最低级。	`<h1>主标题</h1><h2>副标题</h2>`
`<header>`	定义文档或节首页，通常包含网站标志、导航栏等。	`<header><h1>网站名称</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li></ul></nav></header>`
`<hgroup>`	用于对一组标题（`<h1>` - `<h6>`）进行分组。	`<hgroup><h1>文章主标题</h1><h2>文章副标题</h2></hgroup>`
`<hr>`	定义水平线，用于分隔内容。	`<p>这是第一部分内容</p><hr><p>这是第二部分内容</p>`
`<i>`	定义斜体文本（不推荐，优先使用 `<em>`等语义化标签）。	`<p>这是一段 <i>斜体</i>文字。</p>`
`<ins>`	定义插入的文本。	`<p>我原本计划去公园，<ins>后来决定去海边</ins>。</p>`
`<kbd>`	定义键盘输入文本。	`<p>按下 <kbd><Ctrl</kbd> + <kbd></kbd> 组合键进行复制。</p>`
`<label>`	定义 `<input>` 元素的标注。	`<label for="username">用户名：</label><input type="text" id="username" name="username">`
`<legend>`	定义 `<fieldset>` 元素的标题。	`<fieldset><legend>用户信息</legend><label for="name">姓名：</label><input type="text" id="name" name="name"></fieldset>`
`<li>`	定义列表项，用于 `<ul>` （无序列表）或 `<ol>` （有序列表）中。	`<ul><li>列表项 1</li><li>列表项 2</li></ul> 或 <ol><li>列表项 1</li><li>列表项 2</li></ol>`
`<main>`	定义文档的主要内容，一个页面只能有一个 `<main>` 元素。	`<main><h1>页面主要内容</h1><p>这里是页面的主要文字内容...</p></main>`
`<mark>`	定义带有记号的文本。	`<p>在这篇文章中，<mark>关键词</mark> 会被突出显示。</p>`
`<menu>`	定义菜单列表。	`<menu><li><button type="button">菜单项 1</button></li><li><button type="button">菜单项 2</button></li></menu>`
`<meta>`	定义度量衡，如进度条等。	`<p>任务完成进度：<meta value="60" min="0" max="100">60%</meta></p>`
`<nav>`	定义导航链接的部分。	`<nav><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">联系我们</a></li></ul></nav>`
`<noscript>`	定义在脚本未被执行时显示的替代内容。	`<noscript><p>您的浏览器不支持脚本，请升级浏览器或启用脚本功能。</p></noscript>`
`<p>`	定义段落。	`<p>这是一个段落，包含一些文字内容。</p>`
`<pre>`	定义预格式化的文本，保留文本中的空格和换行。	`<pre>这是一段预格式化的文本，包含换行和空格。</pre>`
`<progress>`	定义运行中的进度条。	`<p>下载进度：<progress value="30" max="100">30%</progress></p>`
`<q>`	定义短的引用。	`<p>他说：<q>今天天气真好</q>。</p>`
`<rp>`	在不支持 ruby 注释的浏览器中显示的内容（用于`<ruby>` 标签）。	`<ruby>漠 <rp>(</rp> かん <rp>)</rp></ruby>`
`<rt>`	定义 ruby 注释（用于`<ruby>` 标签）。	`<ruby>漠 <rt>かん </rt></ruby>`
`<ruby>`	定义 ruby 注释，在东亚文字中用于表示发音等。	`<ruby>漠 <rt>かん </rt></ruby>`
`<s>`	定义加删除线的文本（不推荐，优先使用`<del>`）。	`<p>我原本计划买这件衣服，<s>但后来改变了主意</s>。</p>`
`<samp>`	定义计算机代码示例文本。	`<p>以下是一个示例输出：<samp>&hello, World!</samp></p>`
`<section>`	定义文档中的一个节（如章节、页眉、页脚等）。	`<section><h2>章节标题</h2><p>章节内容...</p></section>`
`<small>`	定义小号字体文本。	`<p>这是正常大小的文字，<small>这是小号字体的文字</small>。</p>`
`<span>`	定义文档中的一个区域，常用于对文本或其他内容进行分组以便应用样式。	`<p>这是一段文字，其中<span style="color: red;">部分文字</span>是红色的。</p>`
`<strong>`	定义重要的文本，以粗体显示。	`<p>这是一段文字，其中<strong>重要部分</strong> 会加粗显示。</p>`
`<sub>`	定义下标文本。	`<p>H<sub>2</sub>0 是水的化学分子式。</p>`
`<summary>`	为 `<details>` 元素定义可见的标题。	`<details><summary>点击查看详情</summary><p>这里是详细内容...</p></details>`
`<sup>`	定义上标文本。	`<p>2<sup>3</sup> 等于8。</p>`
`<time>`	定义日期/时间。	`<p>活动时间：<time datetime="2024-10-01">2024 年 10 月 1 日</time></p>`
`<u>`	定义下划线文本（不推荐，有更合适的语义化标签）。	`<p>这是一段 <u>下划线</u> 文字。</p>`
`<wbr>`	定义可能的换行符。	`<p>这是一个很长的单词：supercalifragillisticexpialidocious<wbr>可以在合适的位置换行。</p>`

定义元素与数据相关

标签名	描述	用法示例
`<audio>`	定义声音内容，用于嵌入音频。	`<audio controls><source src="example.mp3" type="audio/mpeg">您的浏览器不支持音频播放。</audio>`
`<button>`	定义一个按钮。	`<button type="button" onclick="alert('按钮被点击了！')">点击我</button>`
`<canvas>`	用于绘制图形（通过脚本，通常是 JavaScript）。	`<canvas id="myCanvas" width="200" height="100"></canvas><script>const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ; ctx.fillStyle = 'blue'; ctx.fillRect(0, 0, 100, 50);</script>`
`<col>`	定义表格中列的属性（用于 `<colgroup>` 中）。	`<table><colgroup><col style="background-color: lightgray;"><col style="background-color: white;"></colgroup><tr>><th>列1</th><th>列2</th></tr><th><td>数据1</td><td>数据2</td></tr></table>`
`<colgroup>`	用于对表格的列进行分组，以便应用样式。	见 `<col>` 标签的示例
`<data>`	关联一个给定的内容与一个机器可读的翻译。	`<p><data value="2024-10-01">活动日期：2024年10月1日</data></p>`
`<datalist>`	定义可选数据的列表，与 `<input>` 元素配合使用。	`<input list="fruits" type="text" placeholder="输入水果名称"></datalist id="fruits"><option value="苹果"><option value="香蕉"><option value="橙子"></datalist>`
`<details>`	定义用户可展开或折叠的额外细节。	`<details><summary>点击查看详情</summary><p>这里是详细内容...</p></details>`
`<dialog>`	定义对话框或窗口。	`<dialog open>这是一个对话框，<button type="button" onclick="this.close()">关闭 </button></dialog>`
`<embed>`	定义嵌入的内容，如插件。	`<embed src="example.swf" type="application/x-shockwave-flash" width="400" height="300">`
`<fieldset>`	定义围绕表单元素的一组边框。	`<fieldset><legend>用户信息</legend><label for="name">姓名: </label><input type="text" id="name" name="name"></fieldset>`
`<form>`	定义供用户输入的表单。	`<form action="submit.php" method="post"></label for="username">用户名: </label><input type="text" id="username" name="username">br><input type="submit" value="提交"></form>`
`<input>`	定义输入字段，用于收集用户输入。	`<input type="text" placeholder="请输入内容">`
`<kbd>`	定义键盘输入文本。	`<p>按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 组合键进行复制。</p>`
`<map>`	定义客户端图像映射，与`<area>` 元素配合使用。	`<img src="example.jpg" usemap="#imageMap" alt="示例图片"><map name="imageMap"><area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域 1">area shape="circle" coords="150,150,50" href="page2.html" alt="区域 2"></map>`
`<menu>`	定义菜单列表。	`<menu><li><button type="button">菜单项 1</button></li><li><button type="button">菜单项 2</button></li></menu>`
`<meter>`	定义度量衡，如进度条等。	`<p>任务完成进度：<meter value="60" min="0" max="100">60%</meter></p>`
`<object>`	定义嵌入的对象，用于嵌入多媒体等。	`<object data="example.pdf" type="application/pdf" width="400" height="300">您的浏览器不支持查看 PDF 文件。</object>`
`<option>`	定义 `<select>` 元素中的选项。	`<select><option value="option1">选项 1</option><option value="option2">选项 2</option></select>`
`<output>`	定义不同类型的输出，比如脚本的输出。	`<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"><input type="range" id="a" value="50"> + <input type="number" id="b" value="25"> = <output name="result" for="a b"></form>`
`<param>`	为 `<object>` 元素定义参数。	`<object data="example.swf" type="application/x-shockwave-flash" width="400" height="300"><param name="quality" value="high">spanam name="bgcolor" value="#ffffff">您的浏览器不支持 Flash。</object>`
`<picture>`	根据不同设备或条件，提供多个图像供选择。	`<picture><source media="/min-width: 800px)" srcset="large.jpg"></source media="/min-width: 600px)" srcset="medium.jpg"></img src="small.jpg" alt="示例图片 "></picture>`
`<progress>`	定义运行中的进度条。	`<p>下载进度：<progress value="30" max="100">30%</progress></p>`
`<script>`	定义客户端脚本，通常是 JavaScript。	`<script>alert('这是一个简单的 JavaScript 脚本示例。');</script>`
`<select>`	定义下拉列表。	`<select><option value="option1">选项 1</option><option value="option2">选项 2</option></select>`
`<textarea>`	定义多行的文本输入控件。	`<textarea rows="5" cols="30">在这里输入多行文本内容...</textarea>`
`<track>`	为 `<video>` 和 `<audio>` 元素定义字幕轨道等。	`<video controls><source src="example.mp4" type="video/mp4"><track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文字幕"></video>`
`<video>`	定义视频内容。	`<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"> 您的浏览器不支持视频标签。</video>`

链接和引用相关

标签名	描述	用法示例
`<a>`	定义超链接，用于链接到其他页面或同一页面的其他部分。	`<a href="https://www.example.com">访问示例网站</a><br><a href="#section2">跳转到本页面的第二节</a>`
`<base>`	为页面上的所有相对链接规定默认 URL 或默认目标（在 `<head>` 中也可用，但对页面整体有影响，这里列出）。	`<head><base href="https://www.example.com/" target="_blank"></head><body><a href="page2.html">链接到 page2</a></body>`
`<link>`	定义文档与外部资源的关系（在 `<head>` 中也常用，但对页面整体有影响，这里列出）。	`<head><link rel="stylesheet" href="styles.css"></head><body>...</body>`

图表相关

标签名	描述	用法示例
`<img>`	定义图像。	`<img src="logo.jpg" alt="公司 logo" width="100" height="100">`
`<table>`	定义表格。	`<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table>`
`<tbody>`	定义表格的主体部分。	`<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </tbody>`
`<td>`	定义表格中的单元格。	见 `<table>` 或 `<tbody>`
`<tfoot>`	定义表格的页脚部分。	`<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </tbody> <td colspan="2">统计信息</td> </tr> </tbody>`
`<th>`	定义表格中的表头单元格。	见 `<table>` 示例
`<thead>`	定义表格的表头部分。	见 `<table>` 示例
`<tr>`	定义表格中的行。	见 `<table>` 示例

容器使用相关

标签名	描述	用法示例
`<div>`	定义文档中的一个分隔区域。	`<div style="border: 1px solid black; padding: 10px;" > <h2>这是主要内容区域</h2> <p>这里可以放置文章、图片、列表等各种内容...</p> </div>`
`<span>`	定义文档中的一个区域，常用于对文本或其他内容进行分组以便应用样式。	`<p>在这<span class="highlight">美丽</span> 的世界里，我们享受生活。</p>`
`<article>`	定义独立的内容，比如一篇博客文章、新闻故事等。	`<article> <h2>文章标题</h2> <p>文章的具体内容，详细描述相关事件或观点。</p> </article>`
`<aside>`	定义页面主内容之外的内容，如侧边栏。	`<aside> <h3>热门文章推荐</h3> <ul> <li><a href="#">文章一</a></li> <li><a href="#">文章二</a></li> </ul> </aside>`
`<section>`	定义文档中的一个节（如章节、页眉、页脚等）。	`<section> <h2>产品介绍</h2> <p>详细介绍公司的产品特点和优势。</p> </section>`
`<header>`	定义文档或节的页眉，通常包含网站标志、导航栏等。	`<header> <h1>网站名称</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">服务</a></li> </ul> </nav> </header>`
`<footer>`	定义文档或节的页脚，通常包含作者、版权信息等。	`<footer> <p>© 2024 版权所有，保留所有权利</p> </footer>`
`<main>`	定义文档的主要内容，一个页面只能有一个 `<main>` 元素。	`<main> <h1>主要内容标题</h1> <p>这里是页面的核心内容，详细阐述相关主题。</p> </main>`
`<figure>`	规定独立的流内容（图像、图表、照片、代码等），可以作为一个容器包裹相关元素。	`<figure> <img src="graph.png" alt="统计图表"> <figcaption>这是一个统计图表，展示了相关数据</figcaption> </figure>`
`<figcaption>`	定义 `<figure>` 元素的问题，作为 `<figure>` 的一部分用于说明内容。	见 `<figure>` 标签的示例
`<fieldset>`	定义围绕表单元素的一组边框，起到容器的作用，将表单相关元素分组。	`<fieldset> <legend>用户登录</legend> <label for="username">用户名: </label> <input type="text" id="username" name="username"> <br> <label for="password">密码: </label> <input type="password" id="password" name="password"> </fieldset>`

2.5.1 文档排版相关

常见的文档排版的标签包括：- 文档排版标签：包括 <p>（段落）、<h1> - <h6>（标题）、<blockquote>（长引用）、<q>（短引用）、<pre>（预格式化文本），这些标签主要用于构建文档的基本结构和文本排版，使内容层次分明、格式规范。

其中，段落<p>和预格式化段落<pre>用的是最多的。

HTML 与 Markdown 类似，所有内容是黏成一坨的，不会按照你的换行而换行，这个时候就需要给每个段落加一个<p>


<p>段落--</p>
<p>段落--</p>

如你所见，<p>是一个非自闭合标签，你必须要用标签对应的结束标签将其圈起来。

<p>可以用于内联样式，只需要在开始标签的内部加入样式即可


<p align="center"><span style="color: #000000; font-size: 20px; text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;">（替身叫声）</span></p>

这一段在<p>中内联了居中显示的样式，随后用<span>为其添加了上下最右四个方向的阴影，宽度为 1px，颜色为红色。

与<p>有类似作用的是<pre>，<pre>相比于<p>而言，更适合将外部得来的字段嵌套在其内部，因为<pre>会把换行，空格等信息完完整整的储存过去。如果你从别的地方复制了一些文字，里面有换行、空格，想让它们在网页上显示和原来一模一样，就用 <pre>。


<pre>
你好，很高兴认识你。
我叫 xx，来自 xx。
</pre>

这样，这段文字在网页上显示的时候，换行和空格都会和你写的一样，不会乱掉。

<h1> 是最大最重要的标题，<h6> 是最小的标题，能让你的文章标题有不同的大小和重要程度区分。

它们的作用与 Markdown 中#的作用类似。

如果你要引用一大段别人的话，将之放在你的网页中，你可以使用 <blockquote>，而与之对应的，还有一个 <q>，引用短句子的时候，它就派上用场了。


<blockquote>  
鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样菜来，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才跳进店面隔壁的房子里，要酒要菜，慢慢地坐喝。  
</blockquote>

<q>  
我思故我在  
</q>

这两个标签在渲染后，<blockquote>会让引用的内容居中醒目显示，并且两侧的页面距比正常段落更长，就像在常规段落中筛选出了一段一样。

而<q>则是给内容加上了一个引号，类似这样：

"我思故我在"

2.5.2 文本强调与修饰标签。

在 HTML 中，有一些与 Markdown 作用类似，或者说完全相同的标签。

如<em>，它的作用是强调，也可以说是倾斜，与*内容*的作用相同。

与之类似的还包括：<strong>（重要文本）、<mark>（带有记号的文本）、<sub>（下标）、<sup>（上标）、<small>（小号字体），用于对文本内容进行强调、标记或者改变字体大小等样式相关的操作，还包括 <code>（计算机代码文本）、<samp>（计算机代码示例文本）、<kbd>（键盘输入文本）来区分不同类型的文本内容展示。

这里需要注意的是，在 htwl 中，有一些 Markdown 中没有的标识方法。

包括下划线<u>，字段属性<font>

其中较为常用的是<font>

<font>用于给包裹的字段添加一些独特的属性，比如颜色、尺寸。

量的名	量的作用	量的值域
color	设置字体颜色	可以是颜色名称（如"red"、"blue"）、十六进制颜色值（如"#FFOOOO"）、RGB值（如"rgb(255,0,0)"等
size	设置字体大小	从1到7的整数，数字越大字体越大（不过在HTML5中不推荐使用，建议用CSS的其他方式控制字体大小）
face	设置字体类型	字体名称，如"Arial"、"Times New Roman"等（注意不同系统字体支持情况不同）

尽管现在已经不推荐在网页制作中加入<font>标签，因为其不好管理，但是在风月中，<font>仍然是最主要的修改字段的手段，染色，改变字号等都需要使用<font>标签。当然，如果你有更多需求，还是建议使用内联样式。

<font>的使用简单而粗暴，作为一个自闭台标签，你只需要在<font>的起始标签内加入一些定义项目，就可以让font发挥作用。


<font color="red">你好</font>
<font size="1">你好</font>

类似这样的

另外，需要单独说的两个，分别是<del>和<ins>

<del>（被删除的文本）和 <ins>（插入的文本），用于展示文本的修改状态。

<del>代表文档中已被删除的内容。当浏览器解析到这个标签时，会对其中包含的内容进行特殊的显示，通常是添加删除线来表示内容被删除。


<p>原价<del>100元</del>，现在只需80元。</p>

原价1OO元，现在只需要8O元

在这个例子中，"1OO元"会显示为带有删除线的样子，用于表示这个价格已经作废，向用户直观地展示出价格的变化。

在文档修订记录中，用来清晰地展示哪些内容被删除了。比如在一个在线文档协作工具里，当用户A删除了一段文字后，使用<del>标签包裹被删除的部分，方便其他用户查看修改历史。
在商品价格、条款更新等场景中，用来显示旧的信息已经不再适用，像商品促销活动中展示原价和现价对比。

而<ins>，表示文档中新增的内容。浏览器通常会对 <ins> 标签内的内容进行突出显示，比如添加下划线，以此来区分新增内容与原有内容。


<p>我们<ins>新添加了</ins>一项服务。</p>

在这里，"新添加了"会被突出显示，让阅读者能够一眼看到文档中的新信息。

在文本编辑场景下，用于显示新插入的内容，方便作者和读者追踪文本的更新情况。
在法律文档、合同条款更新或者文章更新等场景中，用于强调新加入的部分。比如合同条款有了新的补充规定，就可以用 <ins> 标签将新条款内容突出显示。

2.5.3 主要内容标签

HTML中有一些主要内容分区标签：<article>（独立内容）、<section>（文档中的节）、<main>（文档主要内容）用于将文档划分为不同的主要部分，方便内容的组织和管理，使页面结构更清晰。

<article> 标签用于定义独立的、可以被单独引用或复用的内容块，像是一篇博客文章、一则新闻报道、一个论坛帖子等。每个 <article> 标签的内容在语义上是独立完整的，具备自我包含性。例如：


<article>
<h2>苹果的营养价值</h2>
<p>苹果富含多种维生素，如维生素C、维生素B族等，能够增强免疫力……</p>
<p>常吃苹果还有助于消化，改善肠道功能......</p>
</article>

这段代码创建了一个关于苹果营养价值的独立文章内容块。在大型网页中，可能会有多个 <article> 标签，每个标签对应一篇不同主题的文章，便于搜索引擎理解页面内容并提高可访问性，同时也让开发者能更有条理地管理页面结构。

<section> 标签代表文档中的一个节，是一个具有主题性的内容分组。它通常用于将相关内容组织在一起，比如将一个网页中的介绍部分、功能展示部分、用户评价部分分别用 <section> 标签划分。每个 <section> 通常会有一个标题（ <h1> - <h6> ）来描述该节的主题。例如：


<section>
<h2>产品功能</h2>
<p>功能一：智能识别，快速处理信息......</p>
<p>功能二：个性化设置，满足不同用户需求......</p>
</section>

这里展示了一个产品功能介绍的书，它与页面中其他关于产品的内容（如产品介绍、价格等）区分开来，使得整个页面的结构更加清晰，便于开发者维护和用户浏览。不过需要注意的是，<section> 标签不是一个严格意义上的独立内容容器，它主要用于内容的逻辑分组，与 <article> 强调内容的独立性有所不同。

<main> 标签用于定义文档的主要内容部分，一个页面中应该只有一个 <main> 标签，它包裹的内容是页面独一无二的核心内容，不包含那些重复出现的元素，如导航栏、侧边栏、页脚等。例如：


欢迎来到我们的网站

这里是网站主要内容的详细介绍......

近期热点文章

文章内容......

用户反馈

用户评价内容......

在这个示例中，<main> 标签包含了网站主要的介绍内容、一篇热点文章以及用户反馈部分，明确标识出了页面的核心区域，有助于屏幕阅读器等辅助技术为残障用户准确提供页面主要信息，同时也有利于搜索引擎更好地理解页面的重点内容。

2.5.4 辅助内容标签

除了那些主要内容标签外，还有一些辅助内容标签帮助我们进行分类和标注：<aside>（主内容之外的内容）、<header>（页眉）、<footer>（页脚），这些标签用于划分文档中辅助性的内容区域，如侧边栏、页面头部和底部信息等。

<aside> 标签用来定义跟页面主要内容不直接相关的部分，常作为侧边栏呈现。它可以包含一些补充信息，比如相关链接、引用、广告、导航菜单等。在页面布局中，<aside> 标签的内容通常显示在主内容的一侧，以辅助用户浏览和获取更多信息。例如：


<aside>
    <h3>热门文章推荐</h3>
    <ul>
    <li><a href="#">如何高效学习编程</a></li>
    <li><a href="#">10个提升生活品质的小技巧</a></li>
    <li><a href="#">旅游胜地推荐——大理</a></li>
    </ul>
</aside>

这段代码创建了一个侧边栏，里面展示了热门文章推荐列表。在实际应用中，<aside> 标签对于丰富页面内容、引导用户进一步探索相关信息起到重要作用，同时也能让页面布局更加合理、美观。

<header> 标签代表一个区域的页眉，它可以包含网站或页面的标题、副标题、logo、搜索框、导航栏等。一个页面中可以有多个<header>标签，不仅可以用于整个页面的头部，也可以用于<article>、<section>等区域的开头部分，用来介绍该区域的主题。例如：


<header>
    <h1>我的个人博客</h1>
    <nav>
    <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">关于我</a></li>
    </ul>
</nav>
</header>

上述代码展示了一个简单的页面头部，包含博客标题和导航栏。通过 <header> 标签，可以将页面头部元素组织在一起，方便进行样式设置和维护，也有助于提升页面的语义化、让浏览器和搜索引擎更好地理解页面结构。

<footer> 标签定义了一个区域的页脚，通常包含版权信息、相关链接（如隐私政策、使用条款）、联系方式等内容。和 <header> 类似，一个页面可以有多个 <footer> 标签，用于不同内容区域的底部。例如：


<footer>
    <p>&copy; 2024 版权所有</p>
    <a href="#（这里是相关URL）">隐私政策</a>
    <a href="#（同上）">联系我们</a>
</footer>

2.5.5 容器

一般来说，我们会用 css 定义一些盒模型，或者定义一些容器的样式，定义了之后，我们就需要按照对应的位置来引用这些容器。

通用容器标签：<div>（分隔或区域）和 <span>（文档中的区域）是比较通用的容器标签，通常用于通过样式来划分和操作内容区域，<div> 更倾向于块级元素用于大区域划分，<span> 用于行内元素的小区域划分。

<div> 是一个非常常用的块级元素，它就像是一个"大盒子"，可以把网页中的各种元素装进去，实现大区域的划分和布局。比如，我们可以用 <div> 来创建一个网页的主要内容区域、侧边栏区域或者页脚区域等。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div示例</title>
    <style>
    /* 定义 div 的样式 */
    .main-content {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    }
    </style>
</head>
<body>
<!-- 使用 div 并引用样式类 -->
<div class="main-content">
<h2>这是主要内容区域</h2>
<p>这里可以放置文章、图片、列表等各种内容...</p>
</div>
</body>
</html>

在上面的代码中，我们通过 CSS 为名为 main-content 的类定义了样式，包括宽度、外边距、内边距和边框。然后在 HTML 中，使用 <div> 标签并添加 class="main-content"，这样就把这个 <div> 变成了一个有特定样式的主要内容区域。<div> 会自动换行，它里面的元素默认也会以块级元素的形式显示，适合进行大板块的布局划分。

<span> 是行内元素，它就像一个"小夹子"，用于包裹一小段文本或者行内的几个元素，对它们进行单独的样式设置或操作。比如，我们想让一句话中的某个词有不同的颜色或字体大小，就可以用<span>。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>span 示例</title>
<style>
/* 定义 span 的样式 */
.highlight {
    color: red;
    font-weight: bold;
    }
</style>
</head>
<body>
<p>在这<span class="highlight">美丽</span> 的世界里，我们享受生活。</p>
</body>
</html>

在这个例子中，我们通过 CSS 为 highlight 类定义了红色字体和加粗的样式。在 HTML 中，使用 <span> 标签包裹"美丽"这个词，并添加 class="highlight"，这样"美丽"这个词就会显示为红色加粗，而不会影响同一句话中其他文字的样式。<span> 不会产生换行，它只会对包裹的内容进行样式改变，非常适合处理行内的小区域内容。

2.5.6 列表与图表

与 Markdown 类似的，HTML 中也存在表格和列表。

无序列表使用 <ul> 标签创建，列表项前面通常会显示默认的项目符号（如圆点），用来展示没有顺序要求的内容集合。每个列表项使用 <li> 标签定义。示例：


<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

在浏览器中显示时，每个列表项前会有一个小圆点，呈现出简洁的无序列表样式，方便用户快速浏览一系列相关但无先后顺序的内容。

有序列表通过 <ol> 标签创建，列表项会按照数字顺序（默认是 1、2、3...）依次排列，适用于展示有顺序要求的内容，如步骤、流程等。同样每个列表项也是用 <li> 标签定义。

示例：


<ol>
    <li>第一步：打开电脑</li>
    <li>第二步：连接网络</li>
    <li>第三步：打开浏览器</li>
</ol>

浏览器会自动为每个列表项添加数字序号，清晰地展示出内容的先后顺序，帮助用户准确理解操作流程或事件的先后次序。

而在表格方面，有一些有关表格结构的标签

基本表格结构 <table> 、<tr> 、<td> ：<table> 标签用于定义一个表格，是整个表格的容器。<tr> 标签表示表格中的一行，一个 <table> 标签内可以包含多个 <tr> 标签来定义多行。<td> 标签定义表格单元格，每个 <tr> 标签内可以有多个 <td> 标签，用来填充每行的具体数据。-示例：


<table border="1">
    <tr>
    <td>姓名</td>
    <td>年龄</td>
</tr>
    <tr>
    <td>张三</td>
    <td>25</td>
</tr>
</table>

这里 border="1" 给表格添加了边框，便于查看表格结构。第一行 <tr> 中的两个 <td> 定义了表头"姓名"和"年龄"，第二行 <tr> 中的两个 <td> 则填充了具体的数据"张三"和"2.5"。

表头单元格 <th> ：<th> 标签用于定义表头单元格，它和 <td> 类似，但默认样式通常会有所不同，一般表头文字会加粗居中显示，以突出表头信息。

示例：


<table border="1">
    <tr>
    <th>姓名</th>
    <th>年龄</th>
</tr>
    <tr>
    <td>李四</td>
    <td>30</td>
</tr>
</table>

这里使用 <th> 替换了之前的表头 <td> ，使得表头"姓名"和"年龄"以更醒目的方式展示。

表格分区 <thead> 、 <tbody> 、 <tfoot> ： <thead> 标签用于定义表格的表头部分，通常包含列标题。 <tbody> 标签定义表格的主体部分，存放主要的数据行。 <tfoot> 标签定义表格的页脚部分，可用于显示一些汇总信息等。

示例：


<table border="1">
    <thead>
    <tr>
    <th>学科</th>
    <th>成绩</th>
    </tr>
</thead>
<tbody>
    <tr>
    <td>数学</td>
    <td>90</td>
    </tr>
    <tr>
    <td>语文</td>
    <td>85</td>
    </tr>
</tbody>
<tfoot>
    <tr>
    <td>总分</td>
    <td>175</td>
    </tr>
</tbody>
</table>

这个示例清晰地划分了表格的表头、主体和页脚部分，不仅让表格结构更语义化，也方便进行样式设置和数据处理，比如可以单独对 <thead> 、 <tbody> 、 <tfoot> 设置不同的背景颜色等样式。

2.5.7 超链接

在一个网页内，通常会涉及站内跳转和网页外跳转，我们一般使用<a>来实现。

<a> 标签，也就是超链接标签，在网页中扮演着极为重要的角色，它让网页之间以及网页内部的跳转变得轻松实现。它最常见的属性是 href ，用于指定链接的目标地址。例如，我们要链接到百度首页：

<a href="https://www.baidu.com">前往百度</a>

在浏览器中，这段代码会显示为带有"前往百度"字样的可点击文本，点击它就能跳转到百度的官方网站。这里，https://www.baidu.com 就是 href 属性的值，它明确了链接的目的地。

<a> 标签还可以实现同一页面内的跳转，这在内容较多的网页中十分实用，方便用户快速定位到感兴趣的内容。要实现这一功能，首先需要给目标位置的元素添加一个 id 属性，然后在 <a> 标签的 href 属性中使用 # 加上该 id 值。例如：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <a href="#section1">跳转到第一节</a>
    <h2 id="section1">第一节</h2>
    <p>这是第一节的内容......</p>
</body>
</html>

在上述代码中，点击"跳转到第一节"这个链接，页面就会自动滚动到 id 为 section1 的 <h2> 元素处，也就是"第一节"所在的位置，大大提升了用户在长页面中的浏览体验。

其他常见属性

target 属性：用于指定链接在何处打开。常见的值有： - _self （默认值）：在当前窗口打开链接，会覆盖当前页面内容。 - _blank ：在新的空白窗口或标签页中打开链接，原页面不受影响。比如：

<a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>

点击这个链接，百度页面会在新的标签页中打开，方便用户在浏览新页面的同时保留原页面内容。

title 属性：为链接添加一个提示文本，当鼠标悬停在链接上时，会显示该提示内容，起到解释说明的作用。

<a href="https://www.baidu.com" title="全球最大的中文搜索引擎">百度</a>

当鼠标悬停在"百度"链接上时，就会显示"全球最大的中文搜索引擎"这个提示文本，帮助用户更好地了解链接的内容。

2.5.8 多媒体

我们常常需要在网页中嵌入一些外链或者其他东西来构建一些 web 内多媒体，这个时候就需要一些多媒体相关的标签。

<audio> 标签用于在网页中嵌入音频文件，让用户能够在页面上直接播放音频内容，如音乐、播客等。它是一个容器标签，内部可以包含 <source> 标签来指定不同格式的音频源，以确保在各种浏览器中都能正常播放。

以下是一个简单的示例代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频示例</title>
</head>
<body>
    <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
    </audio>
</body>
</html>

在上述代码中，<audio> 标签的 controls 属性用于显示音频播放器的控制界面，如播放、暂停、音量调节等按钮。<source> 标签分别指定了两种不同格式的音频文件（MP3 和 OGG），浏览器会自动选择支持的格式进行播放。如果浏览器不支持 <audio> 标签，那么会显示"您的浏览器不支持音频播放。"这段提示文本。

<video> 标签用于在网页中嵌入视频资源，比如电影片段、教学视频等。它的使用方法与 <audio> 标签类似，也可以结合 <source> 和 <track> 标签来提供更好的播放体验。

以下是一个包含视频播放和字幕的示例代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频示例</title>
</head>
<body>
    <video width="640" height="480" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track label="中文字幕" kind="subtitles" src="subtitles.srt" srclang="zh" default>
    您的浏览器不支持视频播放。
    </video>
</body>
</html>

在这个例子中，<video> 标签的 width 和 height 属性分别设置了视频播放器的宽度和高度，controls 属性用于显示视频播放器的控制界面。<source> 标签提供了两种不同格式的视频文件（MP4 和 WebM）。<track> 标签用于添加字幕轨道，label 属性指定字幕的名称，kind 属性设置为 subtitles 表示这是字幕轨道，src 属性指向字幕文件（这里假设是一个 SRT 格式的字幕文件），srclang 属性指定字幕的语言，default 属性表示默认显示该字幕。如果浏览器不支持 <video> 标签，同样会显示提示文本。

2.5.9 交互

无法进行交互的网页仅仅只是一个花瓶，如果你制作软件前端，你只需要添加对应的组件，并设置其子类和父类就可以，而在 HTML 中，我们需要用一些标签来实现对应的效果。

交互元素标签：<button>（按钮）、<input>（输入字段）、<textarea>（多行文本输入）、<select>（下拉列表）、<option>（下拉列表选项）、<form>（表单）、<fieldset>（表单元素边框分组）、<legend>（表单组标题）用于创建各种用户交互的元素，收集用户输入信息，实现用户与页面的交互功能。

<button> 标签用于在网页上创建一个按钮，用户可以点击它来触发某些操作，比如提交表单、执行 JavaScript 函数等。按钮的文本内容可以在标签对之间设置，也可以通过 CSS 来改变其样式。


<!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>
    button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    }
    </style>
</head>
<body>
    <button type="button" onclick="alert('你点击了按钮！')">点击我</button>
</body>
</html>

在上述代码中，<button> 标签的 type 属性设置为 button （表示这是一个普通按钮，而非提交或重置按钮），onclick 属性绑定了一个 JavaScript 函数，当用户点击按钮时，会弹出一个提示框显示"你点击了按钮！"。

<input> 标签是一个非常灵活的标签，用于创建各种输入字段，如文本框、密码框、复选框、单选按钮等。其具体的类型由 type 属性决定。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入字段示例</title>
</head>
<body>
    <p>用户名：<input type="text" placeholder="请输入用户名"></p>
    <p>密码：<input type="password" placeholder="请输入密码"></p>
    <p>爱好：
    <input type="checkbox" name="hobby" value="reading">阅读
    <input type="checkbox" name="hobby" value="swimming">游泳
</p>
</body>
</html>

这里展示了 type 为 text （文本框）、password（密码框，输入内容会显示为星号）和 checkbox（复选框）的 <input> 标签的用法。placeholder 属性用于在输入框中显示提示文本。

<textarea> 标签用于创建一个多行文本输入区域，用户可以在其中输入大量的文本内容，比如留言、评论等。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本输入示例</title>
</head>
<body>
    <p>请留下您的意见或建议：</p>
    <textarea rows="5" cols="50" placeholder="请在此输入内容"></textarea>
</body>
</html>

rows 属性指定了文本区域的行数，cols 属性指定了列数，placeholder 同样用于显示提示信息。

<select> 标签用于创建一个下拉列表，<option> 标签则是下拉列表中的选项。用户可以从下拉列表中选择一个选项。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表示例</title>
</head>
<body>
    <p>请选择您的性别：</p>
    <select>
    <option value="male">男</option>
    <option value="female">女</option>
    </select>
</body>
</html>

在 <option> 标签中，value 属性是提交表单时该选项的值，标签对之间的文本是在下拉列表中显示的内容。

<form> 、<fieldset> 和 <legend> 标签

<form> 标签用于创建一个表单，用于收集用户输入的信息并提交到服务器。<fieldset> 标签用于将表单中的相关元素进行分组，并添加边框。<legend> 标签为 <fieldset> 分组添加一个标题。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
</head>
<body>
    <form action="submit.php" method="post">
    <fieldset>
    <legend>用户信息</legend>
    <p>用户名: <input type="text" name="username"></p>
    <p>密码: <input type="password" name="password"></p>
    </fieldset>
    <input type="submit" value="提交">
    </form>
</body>
</html>

在 <form> 标签中，action 属性指定了表单数据提交的目标 URL，method 属性指定了提交数据的方式（这里是 post 方式）。<fieldset> 将用户名和密码输入框进行了分组，<legend> 为这个分组添加了"用户信息"的标题，最后 <input type="submit"> 创建了一个提交按钮。

2.5.10 图像

我们一般可以用一些外链或者在后端引用图像文件来让我们的网页更多姿多彩，只需要简单的使用一些图像相关的标签。

<img> 标签是一个自闭合标签，用于在网页中插入各种图像文件，比如常见的JPEG、PNG、GIF等格式。它最主要的属性是src，用于指定图像文件的路径，alt属性则用于在图像无法显示时提供替代文本，帮助用户理解图像的内容，同时对搜索引擎优化也有一定作用。

以下是一个简单的示例代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像示例</title>
</head>
<body>
    <img src="example.jpg" alt="示例图片" width="300" height="200">
</body>
</html>

在上述代码中，src属性指定了名为example.jpg的图像文件路径（假设该文件与HTML文件在同一目录下），alt属性设置为"示例图片"，当图像由于某些原因（如文件路径错误、网络问题等）无法显示时，会显示这段替代文本。width和height属性分别设置了图像的宽度和高度为300像素和200像素。

<picture> 标签是一个容器标签，它允许我们根据不同的条件（如屏幕尺寸、设备特性等）提供多个图像供选择，实现响应式的图像展示。通常会与<source>标签配合使用，<source>标签用于指定不同条件下的图像源。

以下是一个响应式图像展示的示例代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式图像示例</title>
</head>
<body>
    <picture>
    <source media="/min-width: 800px)" srcset="large.jpg">
    <source media="/min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="示例图片">
    </picture>
</body>
</html>

在这个例子中，<picture>标签内有两个 <source> 标签和一个 <img> 标签。第一个 <source> 标签的 media 属性设置为 (min-width: 800px)，表示当屏幕宽度大于等于 8OO 像素时，使用 large.jpg 作为图像源；第二个 <source> 标签的 media 属性设置为 (min-width: 400px)，表示当屏幕宽度在 4OO 像素到 8OO 像素之间时，使用 medium.jpg 作为图像源；如果以上条件都不满足（即屏幕宽度小于 4OO 像素），则使用 <img> 标签指定的 small.jpg 作为图像源。这样就可以根据不同的设备屏幕尺寸，展示合适的图像，提升用户的浏览体验，同时也能节省带宽资源。

2.5.11 绘制图像

有的时候，我们也需要一些实时绘制的图像来满足我们的需求。

图形绘制标签：<canvas>（绘制图形）提供了一个通过脚本（如 JavaScript）在网页上绘制图形的功能区域。

<canvas> 标签是 HTML5 新增的一个标签，它就像一块空白的画布，允许我们使用 JavaScript 来绘制各种图形，如线条、圆形、矩形、图像等，甚至可以制作动画效果。

首先，我们需要在 HTML 中创建一个 <canvas> 元素，并指定它的宽度和高度（默认情况下，<canvas> 的宽为 3OO 像素，高为 150 像素）。然后通过 JavaScript 获取到这个 <canvas> 元素，再使用其提供的 2D 绘图上下文来进行图形绘制。

以下是一个简单的绘制矩形的示例代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制矩形</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // 获取 canvas 元素
    const canvas = document.getElementById('myCanvas');
    // 获取 2D 绘图上下文
    const ctx = canvas.getContext('2d');
    // 绘制矩形
    ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
    ctx.fillRect(50, 50, 200, 150); // 绘制一个矩形，参数分别为：x 坐标、y 坐标、宽度、高度
    </script>
</body>
</html>

在上述代码中，首先在 HTML 中创建了一个 id 为 myCanvas ，宽度为 4OO 像素，高度为 4OO 像素的 <canvas> 元素。然后在 JavaScript 部分，通过 document.getElementById('myCanvas') 获取到这个 <canvas> 元素，再使用 canvas.getContext('2d') 获取到 2D 绘图上下文 ctx 。最后使用 ctx.fillRect() 方法绘制了一个蓝色的矩形，其左上角坐标为 (50, 50)，宽度为 2OO 像素，高度为 1.5O 像素。

除了矩形，<canvas> 还可以绘制很多其他图形，比如圆形：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制圆形</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath(); // 开始一条新路径
    ctx.arc(200, 200, 100, 0, 2 * Math.PI); // 绘制一个圆形，参数分别为：圆心 x 坐标、圆心 y 坐标、半径、起始角度、结束角度
    ctx.fillStyle ='red';
    ctx.fill(); // 填充圆形
    </script>
</body>
</html>

在这个绘制圆形的示例中，使用 ctx.arc() 方法来绘制圆形，通过设置圆心坐标、半径以及起始和结束角度来确定圆形的形状和位置，然后设置填充颜色并使用 ctx.fill() 方法进行填充，从而在 <canvas> 上绘制出一个红色的圆形。

<canvas> 的功能非常强大，还可以进行图像的绘制、动画的制作等，为网页添加丰富的视觉效果和交互体验。

2.5.11 语义化与细节化

<address> 标签用于定义页面或文章的联系信息，比如作者的姓名、地址、电子邮件地址、电话号码等。通常显示在页面底部或文章末尾。

示例：


<address>
    作者：张三<br>
    邮箱：zhangsan@example.com<br>
    地址：XX 市 XX 区 XX 路 XX 号
</address>

在浏览器中， <address> 标签内的内容通常会以斜体显示，以区别于普通文本，并且搜索引擎会识别其中的联系信息。

<cite> 标签用于表示对某一作品（如书籍、文章、电影、歌曲等）的引用或引证。

示例：


<p>我最近读了一本很棒的书，<cite>《百年孤独》</cite>，它是哥伦比亚作家加西亚·马尔克斯的代表作。</p>

<cite> 标签内的文本在浏览器中一般也会以斜体显示，帮助读者区分引用的作品名称。

<dfn> 标签用于定义一个术语或项目，通常与解释性文本一起使用，帮助读者理解特定的概念。

示例：


<p><dfn>HTML</dfn>是超文本标记语言（HyperText Markup Language）的缩写，是用于创建网页的标准标记语言。</p>

通过 <dfn> 标签标记定义的术语，使语义更加明确，也有助于搜索引擎和屏幕阅读器理解内容。

<time> 用于表示日期或时间， datetime 属性用于指定具体的日期和时间格式，内容部分可以显示给用户阅读的日期时间文本。

示例：


<time datetime="2024-10-01">2024 年 10 月 1 日</time>

这种方式不仅能让用户清晰看到日期，也方便搜索引擎和其他程序准确解析日期时间信息。

<caption> 标签为 <table> 表格提供标题，描述表格的主题或内容概述，一般位于表格的上方。

示例：


<table border="1">
    <caption>学生成绩表</caption>
    <tr>
    <th>姓名</th>
    <th>数学成绩</th>
    <th>语文成绩</th>
    </tr>
    <tr>
    <td>李四</td>
    <td>90</td>
    <td>85</td>
    </tr>
</table>

<caption> 标签让表格的目的更加清晰，提升了表格的可读性。

<figcaption> 为 <figure> 元素（独立的内容块，如图像、图表等）提供标题或说明，使独立内容更具语义化。

示例：


<figure>
    <img src="example.jpg" alt="示例图片">
    <figcaption>这是一张美丽的风景图片</figcaption>
</figure>

这里 <figcaption> 为图片提供了描述，帮助用户更好地理解图片内容。

<wbr> 标签表示一个可能的换行符，当浏览器需要换行时，会优先在 <wbr> 标签的位置进行换行，以优化文本的排版。

示例：


<p>www.example.com/thisisaverylongurlthatmightneedawbr/andhereisawbrfortheconvenienceoflinebreaking</p>

在上述文本中，<wbr>标签的位置就是可能进行换行的地方，使长文本在合适的位置换行，保持页面排版的美观。

<meter>标签用于表示度量衡，如温度、分数、磁盘空间使用情况等。value属性表示当前值，min和max属性分别表示最小值和最大值，low、high和optimum属性可以定义范围区间

示例：


<meter value="0.6" min="0" max="1" low="0.2" high="0.8" optimum="0.5">60%</meter>

这表示一个取值范围在O到1之间，当前值为O.6（即60%）的度量，并且定义了低、高范围和最优值。

<progress>标签用于显示任务的进度，value属性表示当前进度，max属性表示总进度。

示例：


<progress value="40" max="100">40%</progress>

上述代码会显示一个进度条，当前进度为40%，总进度为100%。

2.6 注释

在HTML中，注释用于在代码中添加说明或解释，帮助开发者理解代码的功能、逻辑或用途，浏览器会忽略注释内容，不会在页面上显示。

HTML注释的语法格式是：，注释内容可以是一行或多行文本。

以下是一些示例：

单行注释示例：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <!-- 下面的 link 标签用于引入外部 CSS 样式表，为页面设置样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是页面的主标题</h1>
    <p>这是页面的主要内容段落。</p>
</body>
</html>

在这个例子中，<link> 标签上方的注释对该标签的作用进行了说明，方便其他开发者或自己日后查看代码时快速理解。

多行注释示例：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
<!--
    以下是一个表单区域，用于收集用户的登录信息。
    <form>标签是表单的容器，action 属性指定了表单数据提交的目标 URL，
    method 属性指定了提交数据的方式为 post。
    其中包含了用户名和密码的输入框以及提交按钮。
-->
<form action="login.php" method="post">
    <p>用户名：<input type="text" name="username"></p>
    <p>密码: <input type="password" name="password"></p>
    <input type="submit" value="登录">
</form>
</body>
</html>

这里的多行注释详细解释了表单区域的功能、各个标签的作用以及相关属性的含义，对于复杂的代码结构，多行注释能提供更全面的说明，有助于代码的维护和理解。

相信学习了这么多内容，已经可以帮助你搭建一个比较不错的网页了（尽管在样式和互动上可能略显单调），重制版的排版语言从入门到入土的长度已经远超我的想象了，在我的预计中，整个四篇的长度大概也就 4w 多点，实际上，仅仅两篇就已经用了 5w 字了。

为了确保你的设备的健康，我在这里分段吧，将其分为上下两个半节，上半节主要讲 Markdown 和 HTML，而在下半节，我将会更详细的讲一讲 CSS 样式和 JavaScript。有问题可以加入q群460289246或其他官方群聊询问

开源分享区

浏览 (197)

符号	符号名	关键字	用处
Σ	求和符号	\sum	用于表示求和运算法则，例如 \(\sum_{i=1}^n i\) 表示从 1 到 n 的整数求和。
∫	积分符号	\int	用于表示积分运算，像 \( f^b(x)dx \) 表示函数 \( f(x) \) 在区间 \([a,b]\) 上的定积分。
Π	求积符号	\prod	用于表示连乘运算，如 \(\prod_{i=1}^n t_i\) 表示从 1 到 n 的整数连乘。
√	平方根符号	\sqrt{}	用于表示求平方根，例如 \(\sqrt{4}\) 表示求 4 的平方根，结果是 2。
∞	无穷大符号	\infty	用于表示无穷的概念，像 \(lim_{x \to \infty}\) 表示 x 趋近于无穷时的极限情况。
≤	小于等于符号	\leq	用于比较大小，表示小于或等于，例如 \(x \leq 5\)。
≥	大于等于符号	\geq	用于比较大小，表示大于或等于，例如 \(y \geq 3\)。
≠	不等于符号	\neq	用于比较，表示两个量不相等，例如 \(a \neq b\)。
≈	约等于符号	\approx	用于表示近似相等，例如 \(\pi \approx 3.14\)。
∧	逻辑与符号	\land	在逻辑表达式中表示"且"的关系，例如 \(A \land B\)，只有当 \(A\) 和 \(B\) 都为真时，\(A \land B\) 才为真
∨	逻辑或符号	\lor	在逻辑表达式中表示"或"的关系，例如 \(A \lor B\)，只要 \(A\) 和 \(B\) 中有一个为真，\(A \lor B\) 就为真
¬	逻辑非符号	\neg	对一个逻辑值取反，例如 \(\neg A\)，若 \(A\) 为真，则 \(\neg A\) 为假，反之亦然
→	逻辑蕴含符号	\Rightarrow	表示逻辑上的蕴含关系，例如 \(A \Rightarrow B\)，意思是如果 \(A\) 为真，那么 \(B\) 一定为真
↔	逻辑等价符号	\Leftrightarrow	表示逻辑等价关系，例如 \(A \Leftrightarrow B\)，意味着 \(A\) 和 \(B\) 的逻辑值总是相同的，同真同假