文本与排版标签

HTML 提供了丰富的文本与排版标签，用于构建结构化的文档内容。正确使用这些标签不仅能创建语义化的 HTML，还能提升可访问性和 SEO 表现。本文档将详细介绍 HTML 中的文本排版标签，包括标题、段落、文本样式、引用和列表等内容。

1. 基础文本标签

1.1 标题标签（`h1` - `h6`）

标题标签用于定义文档的标题层级，从 h1（最重要）到 h6（最不重要）。

基本语法

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

语义和重要性

**h1**：页面主标题，通常每个页面只有一个
**h2**：主要章节标题
h3 - **h6**：子章节标题，依次递减重要性

最佳实践

<article>
  <h1>文章标题</h1>
  
  <section>
    <h2>第一章</h2>
    <p>内容...</p>
    
    <h3>第一节</h3>
    <p>内容...</p>
    
    <h4>1.1.1 小节</h4>
    <p>内容...</p>
  </section>
  
  <section>
    <h2>第二章</h2>
    <p>内容...</p>
  </section>
</article>

注意事项：

✅ 不要跳过标题层级（如不要在 h1 后直接使用 h3）
✅ 每个页面通常只有一个 h1
✅ 标题标签不应用于样式，应使用 CSS
✅ 标题可以包含内联元素（如 、）

标题中的内联元素

1 2	<h1>欢迎访问 <em>我的</em> 网站</h1> <h2>价格：<strong>￥99</strong> 起</h2>

1.2 段落标签（`p`）

 标签用于定义段落，是文本内容的基本容器。

基本语法

1 2	<p>这是一个段落。它包含一段连续的文本内容。</p> <p>这是另一个段落。段落之间会自动产生间距。</p>

使用示例

<article>
  <h1>关于我们</h1>
  <p>欢迎访问我们的网站。我们致力于提供优质的服务和产品。</p>
  <p>公司成立于 2020 年，专注于 Web 开发领域。多年来，我们积累了丰富的项目经验。</p>
  <p>如有任何问题，欢迎随时联系我们。</p>
</article>

注意事项：

✅ 段落会自动在前后产生空白间距
✅ 不要在  内嵌套块级元素（如另一个 ）
✅ 可以嵌套内联元素（如 、、<a> 等）

段落中的内联元素

1 2	<p>这是包含 <strong>粗体</strong> 和 <em>斜体</em> 的段落。</p> <p>访问我们的 <a href="/about">关于页面</a> 了解更多信息。</p>

1.3 换行标签（`br`）

  标签用于在文本中插入换行，是一个自闭合标签。

基本语法

1
2
3

第一行<br>
第二行<br>
第三行

使用场景

<!-- 地址信息 -->
<p>
  公司名称<br>
  地址：北京市朝阳区<br>
  电话：010-12345678
</p>

<!-- 诗歌 -->
<p>
  春眠不觉晓，<br>
  处处闻啼鸟。<br>
  夜来风雨声，<br>
  花落知多少。
</p>

注意事项：

⚠️ 不要使用   来创建段落间距，应使用  标签
✅ 适用于需要在同一段落内强制换行的场景（如地址、诗歌）
✅ 是自闭合标签，可以写成   或

正确用法：

<!-- ✅ 正确：地址信息使用 br -->
<p>
  收件人：张三<br>
  地址：北京市朝阳区<br>
  邮编：100000
</p>

<!-- ❌ 错误：不应该用 br 创建段落 -->
<p>第一段<br><br>第二段</p>

<!-- ✅ 正确：应该使用两个 p 标签 -->
<p>第一段</p>
<p>第二段</p>

1.4 水平线标签（`hr`）

<hr> 标签用于在页面中插入一条水平分隔线，表示内容的主题转换。

基本语法

<section>
  <h2>第一部分</h2>
  <p>内容...</p>
</section>

<hr>

<section>
  <h2>第二部分</h2>
  <p>内容...</p>
</section>

使用示例

<article>
  <h1>文章标题</h1>
  <p>引言内容...</p>
  
  <hr>
  
  <section>
    <h2>正文第一部分</h2>
    <p>正文内容...</p>
  </section>
  
  <hr>
  
  <section>
    <h2>正文第二部分</h2>
    <p>正文内容...</p>
  </section>
  
  <hr>
  
  <footer>
    <p>作者信息...</p>
  </footer>
</article>

注意事项：

✅ 用于语义上的内容分隔，而非视觉样式
✅ 是自闭合标签，可以写成 <hr> 或 <hr />
✅ 样式应通过 CSS 控制，而非依赖默认样式

样式化水平线

<hr class="section-divider">

<style>
  .section-divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 2em 0;
  }
</style>

2. 文本样式标签

2.1 语义化强调标签

2.1.1 `strong` vs `b`（粗体）

：语义化标签，表示重要性或严重性的强调。

：非语义化标签，仅表示视觉上的粗体样式。

标签	语义	样式	适用场景
`<strong>`	✅ 有语义（重要内容）	粗体	警告、关键信息、重点内容
`<b>`	❌ 无语义（仅样式）	粗体	关键词、产品名称（无强调含义）

使用示例：

<!-- ✅ 使用 strong 表示重要性 -->
<p><strong>警告：</strong>此操作不可撤销！</p>
<p>价格：<strong>￥99</strong>（限时优惠）</p>

<!-- ✅ 使用 b 表示样式上的粗体（无强调含义） -->
<p>欢迎访问我们的网站，了解 <b>HTML</b> 和 <b>CSS</b> 的相关知识。</p>
<p>在 <b>JavaScript</b> 中，变量可以用 <code>let</code> 声明。</p>

推荐实践：

优先使用  表示重要的、需要强调的内容
仅在需要粗体样式但无强调含义时使用 
现代开发中， 更常用

2.1.2 `em` vs `i`（斜体）

：语义化标签，表示强调（emphasis）。

：非语义化标签，通常用于技术术语、外来语、思想等。

标签	语义	样式	适用场景
`<em>`	✅ 有语义（强调）	斜体	强调语气、重要词汇
`<i>`	❌ 无语义（特定用途）	斜体	技术术语、外来语、引用

使用示例：

<!-- ✅ 使用 em 表示强调 -->
<p>我<em>真的</em>很喜欢这个产品。</p>
<p>这个功能<em>必须</em>在今天完成。</p>

<!-- ✅ 使用 i 表示特定类型的文本 -->
<p>这个单词来自拉丁语：<i>et cetera</i></p>
<p>在物理学中，<i>E = mc²</i> 是质能方程。</p>
<p>他说道：<i>“今天天气真好。”</i></p>

HTML5 中  的用途：

技术术语
外来语或短语
思想、概念（如”我脑子里有个想法”中的”想法”）
船名、书名等

推荐实践：

表示强调时使用 
表示特定类型文本时使用

2.2 其他文本样式标签

2.2.1 `small`（小号文本）

 用于表示小字注释、免责声明、版权信息等。

<p>价格：￥99 <small>（不含税）</small></p>

<footer>
  <p><small>© 2024 公司名称。保留所有权利。</small></p>
</footer>

<p>
  本产品仅限18岁以上用户使用。
  <small>使用前请仔细阅读相关条款。</small>
</p>

2.2.2 `mark`（高亮标记）

 用于高亮标记文本，类似于荧光笔标记。

<p>搜索结果：找到了 <mark>HTML</mark> 相关的 10 篇文章。</p>

<p>
  在以下文本中，<mark>这个部分</mark> 是重点内容。
</p>

<!-- 搜索结果高亮 -->
<p>
  这是关于 <mark>前端开发</mark> 的文章，
  主要介绍 <mark>前端开发</mark> 的基础知识。
</p>

样式自定义：

<style>
  mark {
    background-color: yellow;
    color: black;
    padding: 2px 4px;
  }
  
  mark.highlight {
    background-color: #ffeb3b;
  }
</style>

<p>重要提示：<mark class="highlight">请保存您的数据</mark></p>

2.2.3 `code`（行内代码）

<code> 用于标记行内的代码片段。

<p>使用 <code>console.log()</code> 输出信息到控制台。</p>

<p>
  在 JavaScript 中，可以用 <code>let</code> 或 <code>const</code> 
  声明变量。
</p>

<p>
  访问 <code>/api/users</code> 端点获取用户列表。
</p>

注意事项：

✅ 仅用于短小的代码片段（一行内）
✅ 多行代码应使用 <pre><code>
✅ 通常配合等宽字体显示

2.2.4 `pre`（预格式化文本）

<pre> 用于保留文本的空白字符和换行，通常用于代码块。

<!-- 代码块 -->
<pre>
function greet(name) {
  console.log('Hello, ' + name + '!');
}
</pre>

<!-- 保留格式的文本 -->
<pre>
ASCII 艺术：
    *
   ***
  *****
</pre>

配合 <code> 使用：

<!-- ✅ 推荐：pre 和 code 组合使用 -->
<pre><code>
function calculate(a, b) {
  return a + b;
}
</code></pre>

<!-- 带语言标识（通常配合代码高亮库） -->
<pre><code class="language-javascript">
const message = 'Hello, World!';
console.log(message);
</code></pre>

样式示例：

<style>
  pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
  }
  
  code {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
  }
  
  pre code {
    display: block;
    line-height: 1.5;
  }
</style>

2.3 其他文本修饰标签

2.3.1 `del` 和 `ins`（删除和插入）

<del>：表示已删除的文本。
<ins>：表示新插入的文本。

<p>
  原价：<del>￥199</del>
  现价：<ins>￥99</ins>
</p>

<p>
  会议时间：<del>2024年1月1日</del>
  <ins>2024年1月15日</ins>
</p>

<!-- 文档修订 -->
<p>
  我们<del>计划</del><ins>已经决定</ins>在下个月发布新版本。
</p>

2.3.2 `sub` 和 `sup`（上标和下标）

****：下标。
****：上标。

<!-- 化学式 -->
<p>水的化学式：H<sub>2</sub>O</p>
<p>硫酸根离子：SO<sub>4</sub><sup>2-</sup></p>

<!-- 数学表达式 -->
<p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>平方根：√<span style="text-decoration: overline">x</span> 或 x<sup>1/2</sup></p>

<!-- 日期标注 -->
<p>这是第1<sup>st</sup>个版本。</p>
<p>参考文献<sup>1</sup></p>

2.3.3 `u`（下划线）

 用于表示拼写错误、专有名称标记等。

1 2	<p>这个词<u>拼写</u>是错误的。（标记拼写错误）</p> <p>专有名词：<u>HTML</u></p>

注意：避免使用  仅为样式（应使用 CSS text-decoration）。

2.3.4 `kbd`（键盘输入）

<kbd> 用于表示键盘按键。

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。</p>
<p>保存文件：<kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<p>退出程序：<kbd>Esc</kbd></p>

<!-- 组合按键 -->
<p>
  快捷键：
  <kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></kbd>
</p>

2.3.5 `samp`（样例输出）

<samp> 用于表示程序输出或样例文本。

<p>程序输出：<samp>Hello, World!</samp></p>
<p>错误信息：<samp>Error: File not found</samp></p>

<!-- 配合 code 使用 -->
<pre><code>
$ npm install
<samp>package.json installed successfully</samp>
</code></pre>

2.3.6 `var`（变量）

<var> 用于表示变量名或占位符。

<p>函数 <code>greet(<var>name</var>)</code> 接受一个参数。</p>
<p>在公式 <var>E</var> = <var>mc</var><sup>2</sup> 中...</p>

<pre><code>
function calculate(<var>a</var>, <var>b</var>) {
  return <var>a</var> + <var>b</var>;
}
</code></pre>

3. 引用标签

3.1 `blockquote`（块引用）

<blockquote> 用于标记长段的引用内容（块级元素）。

基本语法

1
2
3

<blockquote>
  <p>这是一段引用内容。可以包含多个段落。</p>
</blockquote>

使用示例

<article>
  <h1>文章标题</h1>
  <p>正文内容...</p>
  
  <blockquote>
    <p>"成功的秘诀在于坚持自己的梦想，即使面对困难也不放弃。"</p>
    <footer>— 某位名人</footer>
  </blockquote>
  
  <p>继续正文内容...</p>
</article>

`cite` 属性

<!-- 使用 cite 属性指定来源 URL -->
<blockquote cite="https://example.com/article">
  <p>这是一段引用内容，来源是 example.com。</p>
</blockquote>

<!-- 也可以使用 cite 标签标注来源 -->
<blockquote>
  <p>"知识就是力量。"</p>
  <footer>
    出自 <cite><a href="https://example.com">某篇文章</a></cite>
  </footer>
</blockquote>

样式示例

<style>
  blockquote {
    margin: 1em 0;
    padding: 1em;
    border-left: 4px solid #ccc;
    background-color: #f9f9f9;
    font-style: italic;
  }
  
  blockquote footer {
    margin-top: 0.5em;
    font-size: 0.9em;
    font-style: normal;
    text-align: right;
  }
</style>

3.2 `q`（行内引用）

<q> 用于标记短的行内引用。

基本语法

1	<p>他说：<q>今天天气真好。</q></p>

使用示例

<p>
  正如某位哲人所说：<q>知识就是力量。</q>
</p>

<p>
  用户反馈：<q>这个产品非常好用！</q>
</p>

`cite` 属性

<p>
  引用内容：
  <q cite="https://example.com">这是一段引用。</q>
</p>

注意：

q 标签通常会被浏览器自动添加引号
某些语言环境下，引号样式可能不同
如果不需要自动引号，可以使用 CSS 控制

3.3 `cite`（引用来源）

<cite> 用于标记引用来源，如书籍、文章、电影等标题。

基本语法

1
2
3

<p>
  出自 <cite>《HTML 权威指南》</cite>
</p>

使用示例

<!-- 书籍引用 -->
<p>
  更多信息请参考 
  <cite>《JavaScript 高级程序设计》</cite> 一书。
</p>

<!-- 文章引用 -->
<blockquote>
  <p>这是一段引用内容。</p>
  <footer>
    — 来自 <cite><a href="https://example.com">某篇文章</a></cite>
  </footer>
</blockquote>

<!-- 电影/作品引用 -->
<p>
  我最喜欢的电影是 <cite>《肖申克的救赎》</cite>。
</p>

注意事项：

✅ 用于标记作品的标题，而非作者名
✅ 作者名应使用普通文本或其他标签
✅ 通常以斜体显示

4. 列表标签

4.1 无序列表（`ul` / `li`）

<ul> 用于创建无序列表（项目符号列表）。

基本语法

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

使用示例

<!-- 导航菜单 -->
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

<!-- 功能列表 -->
<ul>
  <li>支持响应式设计</li>
  <li>SEO 友好</li>
  <li>易于维护</li>
</ul>

<!-- 嵌套列表 -->
<ul>
  <li>前端技术
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端技术</li>
</ul>

自定义项目符号

<style>
  /* 圆点 */
  .disc {
    list-style-type: disc;
  }
  
  /* 圆圈 */
  .circle {
    list-style-type: circle;
  }
  
  /* 方块 */
  .square {
    list-style-type: square;
  }
  
  /* 无符号 */
  .none {
    list-style-type: none;
    padding-left: 0;
  }
  
  /* 自定义图片符号 */
  .custom {
    list-style-image: url('bullet.png');
  }
  
  /* 使用伪元素自定义 */
  .custom-bullet {
    list-style: none;
    padding-left: 0;
  }
  
  .custom-bullet li::before {
    content: "✓ ";
    color: green;
    font-weight: bold;
    margin-right: 0.5em;
  }
</style>

<ul class="disc">
  <li>实心圆点（默认）</li>
</ul>

<ul class="circle">
  <li>空心圆圈</li>
</ul>

<ul class="square">
  <li>方块</li>
</ul>

<ul class="custom-bullet">
  <li>自定义符号项</li>
  <li>另一项</li>
</ul>

4.2 有序列表（`ol` / `li`）

<ol> 用于创建有序列表（编号列表）。

基本语法

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

属性

**type**：设置编号类型。

1：数字（默认）
A：大写字母
a：小写字母
I：大写罗马数字
i：小写罗马数字

**start**：设置起始编号。

**reversed**：倒序编号。

使用示例

<!-- 步骤说明 -->
<ol>
  <li>下载安装包</li>
  <li>运行安装程序</li>
  <li>按照提示完成安装</li>
</ol>

<!-- 字母编号 -->
<ol type="A">
  <li>选项 A</li>
  <li>选项 B</li>
  <li>选项 C</li>
</ol>

<!-- 罗马数字 -->
<ol type="I">
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>

<!-- 自定义起始编号 -->
<ol start="10">
  <li>第十项</li>
  <li>第十一项</li>
</ol>

<!-- 倒序 -->
<ol reversed>
  <li>第三名</li>
  <li>第二名</li>
  <li>第一名</li>
</ol>

<!-- 嵌套列表 -->
<ol>
  <li>准备材料
    <ol>
      <li>面粉</li>
      <li>鸡蛋</li>
      <li>糖</li>
    </ol>
  </li>
  <li>制作步骤</li>
</ol>

自定义编号样式

<style>
  /* 自定义编号样式 */
  .custom-numbers {
    list-style-type: none;
    counter-reset: item;
    padding-left: 0;
  }
  
  .custom-numbers li {
    counter-increment: item;
    margin-bottom: 0.5em;
  }
  
  .custom-numbers li::before {
    content: "步骤 " counter(item) ": ";
    font-weight: bold;
    color: #007bff;
  }
  
  /* 带括号的编号 */
  .parentheses {
    list-style-type: none;
    counter-reset: item;
    padding-left: 0;
  }
  
  .parentheses li {
    counter-increment: item;
  }
  
  .parentheses li::before {
    content: "(" counter(item) ") ";
  }
</style>

<ol class="custom-numbers">
  <li>打开编辑器</li>
  <li>编写代码</li>
  <li>保存文件</li>
</ol>

4.3 描述列表（`dl` / `dt` / `dd`）

<dl> 用于创建描述列表（定义列表），通常用于术语和定义的配对。

基本结构

**<dt>**：术语（Definition Term）
**<dd>**：描述/定义（Definition Description）

基本语法

<dl>
  <dt>术语一</dt>
  <dd>术语一的定义或描述</dd>
  
  <dt>术语二</dt>
  <dd>术语二的定义或描述</dd>
</dl>

使用示例

<!-- 术语表 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于美化网页样式。</dd>
  
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于实现网页交互功能。</dd>
</dl>

<!-- 常见问题（FAQ） -->
<dl>
  <dt>如何注册账户？</dt>
  <dd>点击右上角的"注册"按钮，填写相关信息即可。</dd>
  
  <dt>如何重置密码？</dt>
  <dd>在登录页面点击"忘记密码"，按照提示操作。</dd>
</dl>

<!-- 元数据 -->
<dl>
  <dt>作者</dt>
  <dd>张三</dd>
  
  <dt>发布日期</dt>
  <dd>2024年1月1日</dd>
  
  <dt>标签</dt>
  <dd>HTML, CSS, JavaScript</dd>
</dl>

多个描述对应一个术语

<dl>
  <dt>Web</dt>
  <dd>万维网的简称</dd>
  <dd>由 Tim Berners-Lee 在 1990 年发明</dd>
  <dd>基于 HTTP 协议的信息系统</dd>
</dl>

多个术语对应一个描述

<dl>
  <dt>HTML</dt>
  <dt>超文本标记语言</dt>
  <dd>用于创建网页结构的标记语言。</dd>
  
  <dt>CSS</dt>
  <dt>层叠样式表</dt>
  <dd>用于美化网页的样式语言。</dd>
</dl>

样式化描述列表

<style>
  /* 水平布局 */
  .horizontal dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.5em 1em;
  }
  
  .horizontal dt {
    font-weight: bold;
    text-align: right;
  }
  
  .horizontal dd {
    margin: 0;
  }
  
  /* 自定义样式 */
  .custom dl {
    border-left: 3px solid #007bff;
    padding-left: 1em;
  }
  
  .custom dt {
    font-weight: bold;
    color: #007bff;
    margin-top: 1em;
  }
  
  .custom dt:first-child {
    margin-top: 0;
  }
  
  .custom dd {
    margin-left: 1em;
    color: #666;
  }
</style>

<div class="horizontal">
  <dl>
    <dt>姓名</dt>
    <dd>张三</dd>
    <dt>年龄</dt>
    <dd>25</dd>
    <dt>职业</dt>
    <dd>前端开发工程师</dd>
  </dl>
</div>

5. 综合示例

5.1 完整的文章结构

<article>
  <header>
    <h1>HTML 文本排版标签详解</h1>
    <p>
      作者：<strong>张三</strong> | 
      发布日期：<time datetime="2024-01-01">2024年1月1日</time>
    </p>
  </header>
  
  <section>
    <h2>引言</h2>
    <p>
      HTML 提供了丰富的文本排版标签，正确使用这些标签能够创建
      <em>语义化</em> 和 <em>可访问性良好</em> 的网页。
    </p>
    
    <blockquote>
      <p>"好的 HTML 结构是网页成功的一半。"</p>
      <footer>— <cite>Web 开发最佳实践</cite></footer>
    </blockquote>
  </section>
  
  <hr>
  
  <section>
    <h2>主要内容</h2>
    
    <h3>标题标签</h3>
    <p>
      标题标签从 <code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code>，
      用于创建文档的层级结构。
    </p>
    
    <h3>文本样式</h3>
    <p>
      使用 <strong>strong</strong> 表示重要内容，
      使用 <em>em</em> 表示强调。
    </p>
    
    <h3>代码展示</h3>
    <pre><code>
function greet(name) {
  console.log('Hello, ' + name);
}
    </code></pre>
  </section>
  
  <hr>
  
  <section>
    <h2>要点总结</h2>
    <ul>
      <li>使用语义化标签</li>
      <li>保持文档结构清晰</li>
      <li>注意可访问性</li>
    </ul>
  </section>
  
  <section>
    <h2>术语表</h2>
    <dl>
      <dt>HTML</dt>
      <dd>超文本标记语言</dd>
      <dt>CSS</dt>
      <dd>层叠样式表</dd>
    </dl>
  </section>
  
  <footer>
    <p>
      <small>© 2024 版权所有</small>
    </p>
  </footer>
</article>

6. 最佳实践总结

6.1 语义化使用

✅ 使用 <h1>-<h6> 创建文档结构，不要跳过层级
✅ 使用  包裹段落，不要用   创建段落间距
✅ 使用  和  而非  和 （需要时）
✅ 使用 <blockquote> 引用长文本，<q> 引用短文本

6.2 列表使用

✅ 导航菜单使用 <ul>
✅ 步骤说明使用 <ol>
✅ 术语定义使用 <dl>
✅ 合理嵌套列表，不要过度嵌套

6.3 样式与内容分离

✅ 标签用于语义，样式用 CSS 控制
✅ 不要为了样式而使用错误的标签
✅ 使用 CSS 自定义列表符号和样式

6.4 可访问性

✅ 提供合适的标题层级
✅ 列表项目使用语义化标签
✅ 引用内容标明来源（使用 cite 属性或标签）

通过正确使用这些文本与排版标签，可以创建结构清晰、语义明确、易于维护的 HTML 文档。

文本与排版标签

1. 基础文本标签

1.1 标题标签（h1 - h6）

基本语法

语义和重要性

最佳实践

标题中的内联元素

1.2 段落标签（p）

基本语法

使用示例

段落中的内联元素

1.3 换行标签（br）

基本语法

使用场景

1.4 水平线标签（hr）

基本语法

使用示例

样式化水平线

2. 文本样式标签

2.1 语义化强调标签

2.1.1 strong vs b（粗体）

2.1.2 em vs i（斜体）

2.2 其他文本样式标签

2.2.1 small（小号文本）

2.2.2 mark（高亮标记）

2.2.3 code（行内代码）

2.2.4 pre（预格式化文本）

2.3 其他文本修饰标签

2.3.1 del 和 ins（删除和插入）

2.3.2 sub 和 sup（上标和下标）

2.3.3 u（下划线）

2.3.4 kbd（键盘输入）

2.3.5 samp（样例输出）

2.3.6 var（变量）

3. 引用标签

3.1 blockquote（块引用）

基本语法

使用示例

cite 属性

样式示例

3.2 q（行内引用）

基本语法

使用示例

cite 属性

3.3 cite（引用来源）

基本语法

使用示例

4. 列表标签

4.1 无序列表（ul / li）

基本语法

使用示例

自定义项目符号

4.2 有序列表（ol / li）

基本语法

属性

使用示例

自定义编号样式

4.3 描述列表（dl / dt / dd）

基本结构

基本语法

使用示例

多个描述对应一个术语

多个术语对应一个描述

样式化描述列表

5. 综合示例

5.1 完整的文章结构

6. 最佳实践总结

6.1 语义化使用

6.2 列表使用

6.3 样式与内容分离

6.4 可访问性

1.1 标题标签（`h1` - `h6`）

1.2 段落标签（`p`）

1.3 换行标签（`br`）

1.4 水平线标签（`hr`）

2.1.1 `strong` vs `b`（粗体）

2.1.2 `em` vs `i`（斜体）

2.2.1 `small`（小号文本）

2.2.2 `mark`（高亮标记）

2.2.3 `code`（行内代码）

2.2.4 `pre`（预格式化文本）

2.3.1 `del` 和 `ins`（删除和插入）

2.3.2 `sub` 和 `sup`（上标和下标）

2.3.3 `u`（下划线）

2.3.4 `kbd`（键盘输入）

2.3.5 `samp`（样例输出）

2.3.6 `var`（变量）

3.1 `blockquote`（块引用）

`cite` 属性

3.2 `q`（行内引用）

`cite` 属性

3.3 `cite`（引用来源）

4.1 无序列表（`ul` / `li`）

4.2 有序列表（`ol` / `li`）

4.3 描述列表（`dl` / `dt` / `dd`）