HTML基础-文本与排版标签

文本是网页内容的核心，掌握HTML文本和排版标签能让内容表达更准确、更具可读性。

本文将深入介绍HTML中的标题、段落、文本格式化、引用等标签的使用方法与最佳实践。

# 一、标题标签

# 1.1 六级标题 `<h1>` - `<h6>`

HTML提供了六级标题，从 <h1> 到 <h6>，重要性依次递减。

<h1>一级标题 - 最重要</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题 - 最不重要</h6>

视觉效果：

<h1> 默认最大，通常用于页面主标题
<h6> 默认最小，用于最小层级的子标题
可通过CSS自定义样式

# 1.2 标题使用原则

1. 保持逻辑层级

<!-- ✅ 正确：有逻辑的层级结构 -->
<h1>网站主标题</h1>
  <h2>章节1</h2>
    <h3>章节1.1</h3>
    <h3>章节1.2</h3>
  <h2>章节2</h2>
    <h3>章节2.1</h3>

<!-- ❌ 错误：跳级 -->
<h1>主标题</h1>
  <h3>跳过了h2</h3>  <!-- 不要这样做 -->

2. 每页只有一个 <h1>

<!-- ✅ 推荐：一个页面一个 h1 -->
<body>
  <h1>页面主标题</h1>
  <main>
    <article>
      <h2>文章标题</h2>
      <h3>章节标题</h3>
    </article>
  </main>
</body>

<!-- ❌ 不推荐：多个 h1 -->
<h1>主标题</h1>
<h1>另一个主标题</h1>  <!-- 避免 -->

3. 不要仅为样式使用标题

<!-- ❌ 错误：仅为了加粗效果 -->
<h3>这不是标题，只是想要加粗</h3>

<!-- ✅ 正确：使用适当的标签 -->
<p><strong>需要加粗的文本</strong></p>

# 1.3 标题与SEO

标题标签对SEO至关重要：

<!-- 优化的标题结构 -->
<h1>Python编程入门教程 - 从零开始学Python</h1>
  <h2>第一章：Python基础</h2>
    <h3>1.1 安装Python环境</h3>
    <h3>1.2 第一个Python程序</h3>
  <h2>第二章：数据类型</h2>
    <h3>2.1 数字类型</h3>
    <h3>2.2 字符串</h3>

SEO要点：

<h1> 包含主要关键词
标题清晰描述内容
保持自然，避免关键词堆砌

# 二、段落与换行

# 2.1 段落 `<p>`

<p> 标签定义段落，是最常用的文本容器。

<p>这是第一个段落。段落会自动在前后添加空白。</p>
<p>这是第二个段落。浏览器会自动在段落之间添加间距。</p>

<!-- 段落中的文本会自动换行 -->
<p>
  这是一个很长的段落，
  即使在代码中换行了，
  浏览器也会将其显示为连续的文本。
  只有遇到 p 标签结束才会换行。
</p>

特性：

块级元素，独占一行
前后自动添加空白
代码中的换行和多个空格会被合并为一个空格

# 2.2 换行 `<br>`

<br> 标签创建文本换行，是一个空标签。

<p>
  第一行文本<br>
  第二行文本<br>
  第三行文本
</p>

<!-- 诗歌排版 -->
<p>
  床前明月光，<br>
  疑是地上霜。<br>
  举头望明月，<br>
  低头思故乡。
</p>

<!-- 地址格式 -->
<address>
  公司名称<br>
  北京市朝阳区某某街道123号<br>
  邮编：100000<br>
  电话：010-12345678
</address>

使用注意：

不要用多个 <br> 创建段落间距（应该用CSS）
适用于诗歌、地址等需要保持格式的内容
HTML5中写作 <br> 或 <br />（推荐前者）

<!-- ❌ 不推荐：用 br 创建间距 -->
<p>第一段</p>
<br><br><br>
<p>第二段</p>

<!-- ✅ 推荐：用 CSS 控制间距 -->
<p>第一段</p>
<p style="margin-top: 2em;">第二段</p>

# 2.3 水平线 `<hr>`

<hr> 创建主题分隔线。

<section>
  <h2>第一节</h2>
  <p>第一节的内容...</p>
</section>

<hr>

<section>
  <h2>第二节</h2>
  <p>第二节的内容...</p>
</section>

语义：

表示主题转换或内容分隔
不仅仅是视觉上的横线
可通过CSS自定义样式

# 三、文本格式化标签

# 3.1 强调类标签

# `<strong>` - 重要性强调

<p><strong>警告：</strong>此操作不可撤销！</p>
<p>这是<strong>非常重要</strong>的信息。</p>

表示内容的重要性
默认显示为粗体
对SEO和屏幕阅读器有影响

# `<em>` - 语气强调

<p>我<em>真的</em>很喜欢这个！</p>
<p>请<em>不要</em>在这里停车。</p>

表示语气上的强调
默认显示为斜体
改变句子的含义

# `<mark>` - 高亮标记

<p>搜索结果：包含<mark>HTML</mark>的文章</p>
<p>重点内容：<mark>这部分需要特别注意</mark></p>

标记相关或需要注意的文本
默认显示为黄色背景
HTML5新增

# 3.2 样式类标签

# `<b>` - 粗体（无语义）

<p><b>产品名称：</b>智能手机</p>
<p>关键词：<b>HTML</b>、<b>CSS</b>、<b>JavaScript</b></p>

纯粹的视觉加粗
无特殊语义
适合关键词、产品名等

# `<i>` - 斜体（无语义）

<p><i>学名：</i>Homo sapiens</p>
<p>书名：<i>《红楼梦》</i></p>

纯粹的视觉斜体
无特殊语义
适合术语、外文、书名等

# `<u>` - 下划线

<p><u>拼写错误</u>的单词</p>
<p>中文<u>专有名词</u>标注</p>

添加下划线
避免与链接混淆
慎用

# `<s>` - 删除线

<p>原价：<s>¥999</s> 现价：¥699</p>
<p><s>已售罄</s></p>

表示不再准确或相关的内容
适合标注价格变化、过时信息

# 3.3 `<strong>` vs `<b>`、`<em>` vs `<i>`

<!-- 语义化：使用 strong 和 em -->
<p><strong>重要：</strong>会议时间<em>已改为</em>下午3点。</p>

<!-- 无语义：使用 b 和 i -->
<p><b>产品型号：</b>XYZ-<i>2000</i></p>

<!-- 决策原则 -->
<!-- 内容重要？→ strong -->
<!-- 语气强调？→ em -->
<!-- 纯粹视觉？→ b 或 i -->

# 3.4 上标与下标

# `<sup>` - 上标

<p>面积：10m<sup>2</sup></p>
<p>E = mc<sup>2</sup></p>
<p>2<sup>10</sup> = 1024</p>

# `<sub>` - 下标

<p>化学式：H<sub>2</sub>O</p>
<p>数学：log<sub>2</sub>8 = 3</p>

# 3.5 小号文本 `<small>`

<p>版权所有 © 2024</p>
<p><small>本站内容仅供参考，不构成投资建议</small></p>

<article>
  <h2>文章标题</h2>
  <p><small>发布于 2024-01-15</small></p>
</article>

表示旁注、法律声明等次要信息
默认显示为较小字号

# 四、引用标签

# 4.1 块级引用 `<blockquote>`

<blockquote cite="https://example.com/article">
  <p>
    成功不是终点，失败也不是末日，
    重要的是继续前进的勇气。
  </p>
  <footer>
    — <cite>温斯顿·丘吉尔</cite>
  </footer>
</blockquote>

<!-- 带样式的引用 -->
<blockquote>
  <p>
    设计不仅仅是看起来和感觉起来如何，
    设计是它如何工作的。
  </p>
  <footer>— Steve Jobs</footer>
</blockquote>

属性：

cite：引用来源的URL（不显示，用于语义）
默认有缩进样式
块级元素

# 4.2 行内引用 `<q>`

<p>
  正如爱因斯坦所说：<q>想象力比知识更重要</q>。
</p>

<p>
  他说<q>我会准时到达</q>，但实际上迟到了一小时。
</p>

特性：

行内元素
浏览器会自动添加引号
不同语言引号样式不同（可通过CSS控制）

# 4.3 引用来源 `<cite>`

<p>
  更多信息请参考
  <cite>《HTML权威指南》</cite>第三章。
</p>

<blockquote>
  <p>代码是写给人看的，只是顺便让机器执行。</p>
  <footer>
    — <cite>《计算机程序的构造和解释》</cite>
  </footer>
</blockquote>

标记作品标题（书籍、文章、电影等）
默认显示为斜体
不用于人名（用普通文本或 <span>）

# 4.4 缩写 `<abbr>`

<p>
  <abbr title="HyperText Markup Language">HTML</abbr>
  是网页的标准标记语言。
</p>

<p>
  <abbr title="World Wide Web Consortium">W3C</abbr>
  制定Web标准。
</p>

<p>
  会议时间：
  <abbr title="2024年1月15日">2024-01-15</abbr>
  上午10点
</p>

特性：

title 属性显示完整说明
鼠标悬停显示提示
部分浏览器显示下划虚线

# 4.5 地址 `<address>`

<address>
  <strong>联系我们</strong><br>
  北京市朝阳区某某大街123号<br>
  邮编：100000<br>
  邮箱：<a href="mailto:contact@example.com">contact@example.com</a><br>
  电话：<a href="tel:+861012345678">010-12345678</a>
</address>

<!-- 文章作者信息 -->
<article>
  <h1>文章标题</h1>
  <address>
    作者：<a href="mailto:author@example.com">张三</a>
  </address>
  <p>文章内容...</p>
</article>

用途：

联系信息
作者信息
默认显示为斜体

# 五、代码与预格式化文本

# 5.1 行内代码 `<code>`

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

<p>
  HTML标签如 <code>&lt;div&gt;</code> 和 <code>&lt;span&gt;</code>
  是最常用的容器元素。
</p>

特性：

等宽字体显示
行内元素
通常用于表示代码片段

# 5.2 代码块 `<pre>`

<pre>
function hello() {
  console.log('Hello, World!');
}
</pre>

<pre>
{
  "name": "example",
  "version": "1.0.0"
}
</pre>

特性：

保留空格和换行
等宽字体
不自动换行（会出现横向滚动条）

# 5.3 组合使用 `<pre>` + `<code>`

<pre><code>
function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}
</code></pre>

<pre><code class="language-python">
def hello():
    print("Hello, World!")
</code></pre>

最佳实践：

组合使用语义更清晰
便于语法高亮库识别（如Prism.js、highlight.js）
class 指定编程语言

# 5.4 键盘输入 `<kbd>`

<p>
  保存文件的快捷键是 <kbd>Ctrl</kbd> + <kbd>S</kbd>
</p>

<p>
  复制文本：<kbd>Ctrl</kbd> + <kbd>C</kbd><br>
  粘贴文本：<kbd>Ctrl</kbd> + <kbd>V</kbd>
</p>

<p>
  在终端中输入 <kbd>npm install</kbd> 来安装依赖
</p>

# 5.5 示例输出 `<samp>`

<p>
  程序输出：<samp>Hello, World!</samp>
</p>

<p>
  执行命令后显示：
  <samp>npm install completed successfully</samp>
</p>

# 5.6 变量 `<var>`

<p>
  计算公式：<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
</p>

<p>
  函数 <var>f</var>(<var>x</var>) = <var>x</var><sup>2</sup>
</p>

# 六、其他文本标签

# 6.1 定义术语 `<dfn>`

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

<p>
  <dfn id="def-closure">闭包</dfn>
  是指函数能够访问其词法作用域外部的变量。
</p>

# 6.2 时间 `<time>`

<p>
  文章发布于
  <time datetime="2024-01-15">2024年1月15日</time>
</p>

<p>
  会议时间：
  <time datetime="2024-01-15T14:30">
    2024年1月15日下午2:30
  </time>
</p>

<p>
  <time datetime="2024-01-15T14:30:00+08:00">
    北京时间14:30
  </time>
</p>

datetime 格式：

日期：2024-01-15
时间：14:30:00
日期+时间：2024-01-15T14:30:00
带时区：2024-01-15T14:30:00+08:00

# 6.3 双向文本 `<bdi>` 和 `<bdo>`

<!-- bdi：隔离双向文本 -->
<ul>
  <li>用户 <bdi>张三</bdi>：95分</li>
  <li>用户 <bdi>مرحبا</bdi>：88分</li>
</ul>

<!-- bdo：覆盖文本方向 -->
<p>
  正常文本方向
</p>
<p>
  <bdo dir="rtl">从右到左的文本</bdo>
</p>

# 6.4 换行机会 `<wbr>`

<p>
  这是一个很长的URL：
  http://<wbr>www.<wbr>example.<wbr>com/<wbr>very/<wbr>long/<wbr>path
</p>

<p>
  邮箱：verylongemailaddress<wbr>@<wbr>example.<wbr>com
</p>

建议浏览器的换行位置
窗口足够宽时不换行
空间不足时在 <wbr> 处换行

# 七、文本标签选择指南

# 7.1 决策树

需要格式化文本？
├─ 表示重要性 → <strong>
├─ 表示强调语气 → <em>
├─ 仅视觉加粗 → <b>
├─ 仅视觉斜体 → <i>
├─ 高亮标记 → <mark>
├─ 删除/过时 → <s>
├─ 下划线 → <u>
├─ 次要信息 → <small>
└─ 上标/下标 → <sup>/<sub>

需要引用？
├─ 块级引用 → <blockquote>
├─ 行内引用 → <q>
├─ 作品标题 → <cite>
└─ 缩写说明 → <abbr>

需要代码？
├─ 行内代码 → <code>
├─ 代码块 → <pre><code>
├─ 键盘输入 → <kbd>
├─ 程序输出 → <samp>
└─ 变量 → <var>

# 7.2 常见场景

<!-- 博客文章 -->
<article>
  <h1>文章标题</h1>
  <p><small>发布于 <time datetime="2024-01-15">2024-01-15</time></small></p>
  
  <p>
    <strong>重要提示：</strong>
    本文介绍了 <abbr title="HyperText Markup Language">HTML</abbr> 的基础知识。
  </p>
  
  <p>
    正如 <cite>《HTML权威指南》</cite> 中所说：
    <q>语义化是HTML的核心</q>。
  </p>
  
  <p>使用 <code>&lt;p&gt;</code> 标签创建段落。</p>
</article>

<!-- 技术文档 -->
<section>
  <h2>安装步骤</h2>
  <p>在终端中运行以下命令：</p>
  <pre><code>npm install package-name</code></pre>
  
  <p>
    或者使用快捷键 <kbd>Ctrl</kbd> + <kbd>`</kbd> 打开终端。
  </p>
</section>

<!-- 产品页面 -->
<div class="product">
  <h2>产品名称</h2>
  <p>
    原价：<s>¥999</s><br>
    现价：<strong>¥699</strong>
  </p>
  <p><mark>限时优惠</mark></p>
  <p><small>*活动截止 <time datetime="2024-01-31">2024年1月31日</time></small></p>
</div>

# 八、最佳实践

# 8.1 语义优先

<!-- ❌ 不推荐 -->
<span style="font-weight: bold;">重要</span>
<div style="font-style: italic;">强调</div>

<!-- ✅ 推荐 -->
<strong>重要</strong>
<em>强调</em>

# 8.2 避免样式滥用

<!-- ❌ 不推荐：为了样式而用标题 -->
<h3>这不是标题</h3>

<!-- ✅ 推荐：用CSS控制样式 -->
<p class="title-style">这是需要特定样式的文本</p>

# 8.3 保持一致性

在整个项目中保持标签使用的一致性：

术语定义统一用 <dfn>
代码片段统一用 <code>
重要信息统一用 <strong>

# 8.4 考虑可访问性

<!-- 为缩写提供说明 -->
<abbr title="Cascading Style Sheets">CSS</abbr>

<!-- 时间使用标准格式 -->
<time datetime="2024-01-15">2024年1月15日</time>

<!-- 引用标明来源 -->
<blockquote cite="https://example.com">
  <p>引用内容</p>
</blockquote>

# 九、总结

HTML文本标签的使用原则：

语义优先：根据内容含义选择标签，而非视觉效果
层级清晰：标题保持逻辑层级，不跳级
恰当选择：区分语义标签（<strong>/<em>）和样式标签（<b>/<i>）
增强可访问性：使用 <abbr>、<time> 等标签提供额外信息
保持一致：在项目中统一使用规范

掌握这些文本标签，能让你的HTML更具语义性、可读性和可维护性。

祝你变得更强!

编辑

#HTML

上次更新: 2025/11/21

← HTML基础-语义化标签与文档结构 HTML基础-列表与表格→

HTML基础-文本与排版标签

# 一、标题标签

# 1.1 六级标题 <h1> - <h6>

# 1.2 标题使用原则

# 1.3 标题与SEO

# 二、段落与换行

# 2.1 段落 <p>

# 2.2 换行 <br>

# 2.3 水平线 <hr>

# 三、文本格式化标签

# 3.1 强调类标签

# <strong> - 重要性强调

# <em> - 语气强调

# <mark> - 高亮标记

# 3.2 样式类标签

# <b> - 粗体（无语义）

# <i> - 斜体（无语义）

# <u> - 下划线

# <s> - 删除线

# 3.3 <strong> vs <b>、<em> vs <i>

# 3.4 上标与下标

# <sup> - 上标

# <sub> - 下标

# 3.5 小号文本 <small>

# 四、引用标签

# 4.1 块级引用 <blockquote>

# 4.2 行内引用 <q>

# 4.3 引用来源 <cite>

# 4.4 缩写 <abbr>

# 4.5 地址 <address>

# 五、代码与预格式化文本

# 5.1 行内代码 <code>

# 5.2 代码块 <pre>

# 5.3 组合使用 <pre> + <code>

# 5.4 键盘输入 <kbd>

# 5.5 示例输出 <samp>

# 5.6 变量 <var>

# 六、其他文本标签

# 6.1 定义术语 <dfn>

# 6.2 时间 <time>

# 6.3 双向文本 <bdi> 和 <bdo>

# 6.4 换行机会 <wbr>

# 七、文本标签选择指南

# 7.1 决策树

# 7.2 常见场景

# 八、最佳实践

# 8.1 语义优先

# 8.2 避免样式滥用

# 8.3 保持一致性

# 8.4 考虑可访问性

# 九、总结

# 1.1 六级标题 `<h1>` - `<h6>`

# 2.1 段落 `<p>`

# 2.2 换行 `<br>`

# 2.3 水平线 `<hr>`

# `<strong>` - 重要性强调

# `<em>` - 语气强调

# `<mark>` - 高亮标记

# `<b>` - 粗体（无语义）

# `<i>` - 斜体（无语义）

# `<u>` - 下划线

# `<s>` - 删除线

# 3.3 `<strong>` vs `<b>`、`<em>` vs `<i>`

# `<sup>` - 上标

# `<sub>` - 下标

# 3.5 小号文本 `<small>`

# 4.1 块级引用 `<blockquote>`

# 4.2 行内引用 `<q>`

# 4.3 引用来源 `<cite>`

# 4.4 缩写 `<abbr>`

# 4.5 地址 `<address>`

# 5.1 行内代码 `<code>`

# 5.2 代码块 `<pre>`

# 5.3 组合使用 `<pre>` + `<code>`

# 5.4 键盘输入 `<kbd>`

# 5.5 示例输出 `<samp>`

# 5.6 变量 `<var>`

# 6.1 定义术语 `<dfn>`

# 6.2 时间 `<time>`

# 6.3 双向文本 `<bdi>` 和 `<bdo>`

# 6.4 换行机会 `<wbr>`