一、前言
在学习 HTML 的过程中，我们经常会遇到这样的需求：
- 想让文字变粗；
- 想让文字变成斜体；
- 想突出显示某一句话；
- 想给文字添加删除线；
- 想表示新增内容；
- 想显示数学公式；
- 想在网页中显示代码；
- 想引用一段文字。
很多初学者第一反应就是：
"给文字加粗，不就是
<b>吗？"
其实 HTML 并不是单纯用来控制"文字长什么样"的。
HTML 更重要的作用，是告诉浏览器：这段内容具有什么含义。
例如：
<strong>非常重要的内容</strong>和：
<b>加粗的内容</b>虽然浏览器默认情况下看起来都可能是粗体，但它们表达的语义并不完全相同。
现代 HTML 更强调语义化标签。MDN 也明确建议，HTML 标签应该优先表达内容的语义，而不是单纯为了视觉效果。
今天我们就系统学习 HTML 中常见的文本格式化标签。
二、什么是 HTML 文本格式化？
HTML 文本格式化，简单来说就是：
使用 HTML 标签对网页中的文字进行语义标记和结构化描述。
例如：
<p>欢迎学习 <strong>HTML</strong>！</p>浏览器显示：
欢迎学习 HTML！
这里：
<strong>表示这部分内容具有较强的重要性。
三、HTML 常见文本格式化标签
HTML 中常见的文本格式化标签包括：
| 标签 | 作用 | 常见表现 |
|---|---|---|
<b> |
引起注意的文字 | 粗体 |
<strong> |
表示重要内容 | 粗体 |
<i> |
表示特殊文本 | 斜体 |
<em> |
表示强调 | 斜体 |
<mark> |
标记重点内容 | 高亮 |
<small> |
辅助说明、小字 | 较小字体 |
<del> |
表示删除内容 | 删除线 |
<ins> |
表示新增内容 | 下划线 |
<sub> |
下标 | H₂O |
<sup> |
上标 | x² |
<code> |
行内代码 | 等宽字体 |
<pre> |
预格式化文本 | 保留空格换行 |
<q> |
短引用 | 引号 |
<blockquote> |
长引用 | 引用块 |
接下来我们逐个学习。
四、<b>：让文字变粗
<b> 是 Bold 的缩写。
最简单的使用方式：
html
<p>这是普通文字。</p>
<p><b>这是加粗文字。</b></p>浏览器通常会把：
<b>这是加粗文字。</b>显示成粗体。
但是要注意
<b> 的主要语义是：
引起读者注意，但不表示这段内容具有特别重要的意义。
例如：
html
<p>
本文章关键词：
<b>HTML</b>
</p>这里使用 <b> 就比较合适。
五、<strong>：表示重要内容
<strong> 是 HTML 中非常常用的语义化标签。
例如：
html
<p>
<strong>注意：删除数据库之前一定要做好备份。</strong>
</p>浏览器默认会显示成粗体。
但是它和 <b> 最大的区别在于：
<b>更偏向于：
"这段文字需要引起注意。"
而：
<strong>表达的是：
"这部分内容非常重要。"
MDN 将 <strong> 定义为表示内容具有较强的重要性、严重性或紧迫性。
推荐写法
例如网站中的警告：
<p>
<strong>警告：</strong>
请勿在生产环境直接删除数据库。
</p>这种场景就非常适合使用 <strong>。
六、<i>：表示特殊文本
<i> 通常会让文字显示为斜体。
例如：
<p>
<i>HTML</i> 是一种标记语言。
</p>默认情况下：
<i>HTML</i>通常显示为斜体。
但需要注意：
<i>并不只是"把文字变成斜体"。
它更多用于表示：
- 技术术语；
- 外语短语；
- 特殊语气；
- 作品中的角色思想；
- 分类学名称等。
如果你只是为了"让文字变斜"，实际项目中应该更多考虑 CSS。
七、<em>：表示强调
<em> 是 Emphasis 的缩写。
例如：
<p>
我真的 <em>非常</em> 喜欢 HTML。
</p>浏览器默认一般会将 <em> 显示为斜体。
但是：
<em>真正表达的是：
强调这部分内容。
这和 <i> 存在语义区别。
例如：
html
<p>我喜欢 HTML。</p>
<p>我 <em>非常</em> 喜欢 HTML。</p>第二句话强调了"非常"。
八、<b> 和 <strong> 到底有什么区别？
这是初学者非常容易混淆的一组标签。
1. <b>
html
<p>
<b>HTML</b> 是 Web 开发的重要基础。
</p>主要用于：
引起注意。
2. <strong>
html
<p>
<strong>请勿删除数据库。</strong>
</p>主要用于：
表示重要、严重或者紧急内容。
一句话记忆
可以这样记：
<b>：看起来重要
<strong>：语义上重要
所以，在表示真正重要的信息时，优先考虑：
<strong>而不是单纯使用：
<b>九、<i> 和 <em> 有什么区别？
同样可以采用类似的理解方式。
<i>
表示：
一段特殊文本。
例如：
<p>
<i>HTML</i> 是 HyperText Markup Language 的缩写。
</p><em>
表示：
对内容进行强调。
例如：
html
<p>
学习 HTML 时，<em>一定要多写代码</em>。
</p>因此：
<i>更偏向"特殊文本"
<em>更偏向"强调语义"
十、<mark>：高亮重要内容
<mark> 非常适合做关键词高亮。
例如：
html
<p>
HTML 是 <mark>Web 开发</mark> 的基础。
</p>浏览器通常会将：
<mark>Web 开发</mark>显示为高亮效果。
搜索关键词案例
假设用户搜索：
HTML我们可以这样显示搜索结果：
html
<p>
搜索结果：
<mark>HTML</mark> 是一种标记语言。
</p>这样用户能够快速找到关键词。
十一、<small>：显示辅助说明
<small> 通常用于：
- 免责声明；
- 辅助说明；
- 版权信息；
- 小字体提示。
例如：
html
<p>
HTML 教程
</p>
<small>
本教程仅用于学习交流。
</small>浏览器通常会把 <small> 中的文字显示得更小。
十二、<del>：表示删除的内容
<del> 表示：
这部分内容已经从文档中删除。
例如：
html
<p>
原价：
<del>999 元</del>
</p>浏览器通常显示为：
999 元
电商页面中经常可以看到类似效果。
十三、<ins>：表示新增内容
<ins> 与 <del> 可以看成一组。
例如：
html
<p>
原计划：
<del>2026 年 8 月 10 日发布</del>
</p>
<p>
新计划：
<ins>2026 年 8 月 20 日发布</ins>
</p>其中：
<del>表示删除的内容。
而：
<ins>表示新增的内容。
HTML 标准将 <ins> 用于表示添加到文档中的文本，而 <del> 用于表示从文档中删除的文本。
十四、<sub>：下标
<sub> 用于表示下标。
最常见的例子就是：
H₂OHTML 写法：
<p>水的化学式：H<sub>2</sub>O</p>浏览器显示：
H₂O
十五、<sup>：上标
<sup> 用于表示上标。
例如数学中的：
x²HTML：
<p>x<sup>2</sup></p>再例如：
<p>10<sup>2</sup> = 100</p>显示：
10² = 100
十六、<code>：显示代码
作为程序员，这个标签非常重要。
<code> 用于表示：
一小段计算机代码。
例如：
<p>
HTML 使用 <code><p></code> 标签表示段落。
</p>这里：
<code><p></code>会以代码样式显示。
MDN 将 <code> 定义为用于表示计算机代码的短片段，浏览器通常会使用等宽字体显示它。
十七、为什么 <code> 中要写 <？
这是 HTML 初学者经常遇到的问题。
如果直接写：
<code><p></code>浏览器可能会把：
<p>理解成真正的 HTML 标签。
所以需要使用 HTML 实体：
<表示：
<因此：
<code><p></code>最终显示：
<p>常见 HTML 特殊字符：
|----------|------|
| HTML 写法 | 显示结果 |
| < | < |
| > | > |
| & | & |
| " | " |
| | 空格 |
十八、<pre>：保留原始格式
<pre> 表示：
预格式化文本。
它与普通 <p> 最大的区别之一，是会保留文本中的空格和换行。MDN 对 <pre> 的定义也是按照 HTML 源文件中的格式呈现文本。
例如：
<pre>
姓名：张三
年龄：18
职业：程序员
</pre>浏览器会尽量按照原来的换行和空格进行显示。
十九、<pre> + <code>：显示代码块
如果想在网页中展示一整段代码，常见写法是：
html
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
</code>
</pre>这里：
<code>负责表达：
这是代码。
而：
<pre>负责：
保留代码原本的换行和空格。
这两个标签配合起来，非常适合展示代码。
二十、<q>：短引用
<q> 用于表示一段较短的引用文字。
例如：
html
<p>
老师经常说：
<q>实践是学习编程最好的方法。</q>
</p>浏览器通常会自动添加引号。
二十一、<blockquote>：长引用
如果引用的是一整段甚至多段内容，可以使用：
html
<blockquote>
<p>
HTML 是构建 Web 页面结构的重要基础。
学习 HTML 可以帮助我们理解网页是如何组织起来的。
</p>
</blockquote><blockquote> 主要用于较长的引用内容。
MDN 也指出，<blockquote> 用于表示较长的引用内容，而短引用更适合使用 <q>。
二十二、完整案例：制作一篇 HTML 学习介绍
下面把今天学习的知识综合起来。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 文本格式化</title>
</head>
<body>
<h1>HTML 文本格式化</h1>
<p>
<strong>HTML</strong>
是学习 Web 开发必须掌握的基础知识。
</p>
<p>
如果你想成为一名
<em>优秀的程序员</em>，
那么一定要坚持练习。
</p>
<p>
今天重点学习：
<mark>文本格式化标签</mark>
</p>
<h2>价格信息</h2>
<p>
原价：
<del>999 元</del>
</p>
<p>
现价：
<ins>99 元</ins>
</p>
<h2>数学公式</h2>
<p>
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
</p>
<h2>化学公式</h2>
<p>
H<sub>2</sub>O
</p>
<h2>HTML 代码</h2>
<pre>
<code>
<h1>Hello HTML</h1>
<p>欢迎学习 HTML！</p>
</code>
</pre>
<h2>学习建议</h2>
<blockquote>
<p>
学习编程最重要的不是记住所有代码，
而是理解代码背后的思想，并通过不断实践形成自己的编程能力。
</p>
</blockquote>
<small>
本文章用于 HTML 基础学习。
</small>
</body>
</html>通过这个案例，可以把今天学习的多个标签串联起来。
二十三、最容易犯的 5 个错误
错误 1：为了加粗全部使用 <b>
例如：
<b>重要提示</b>虽然可以实现粗体效果，但如果内容本身具有重要语义，更推荐：
<strong>重要提示</strong>记住：HTML 首先表达语义，CSS 再负责视觉效果。
错误 2：为了斜体全部使用 <i>
如果只是表达强调：
<em>非常重要</em>通常比：
<i>非常重要</i>更符合语义。
错误 3：用 <br> 控制页面布局
有些初学者喜欢：
html
<p>
第一行
<br>
<br>
<br>
第二行
</p>这样虽然能产生空行，但并不是好的页面布局方式。
真正的页面间距应该交给 CSS。
例如：
html
p {
margin-bottom: 20px;
}错误 4：用 <font> 修改文字样式
以前很多 HTML 教程会出现：
<font color="red">红色文字</font>现代 Web 开发中不推荐使用这种方式。
更推荐：
<span class="warning">重要提示</span>然后使用 CSS：
.warning {
color: red;
font-weight: bold;
}这样 HTML 负责结构和语义，CSS 负责样式。
错误 5：只记"长什么样"，不记"是什么意思"
这是学习 HTML 最容易踩的坑。
例如：
<strong>不要只记：
"它可以让文字变粗。"
应该记：
****表示内容具有重要性，浏览器默认通常以粗体显示。
这样以后学习 CSS、JavaScript、SEO 和无障碍开发时，会更加容易理解。
二十四、HTML 文本格式化标签速查表
建议初学者收藏下面这张表。
|----------------|-------------------|------|
| 标签 | 英文含义 | 主要用途 |
| <b> | Bold | 引起注意 |
| <strong> | Strong Importance | 重要内容 |
| <i> | Italic | 特殊文本 |
| <em> | Emphasis | 强调内容 |
| <mark> | Mark | 高亮内容 |
| <small> | Small | 辅助说明 |
| <del> | Delete | 删除内容 |
| <ins> | Insert | 新增内容 |
| <sub> | Subscript | 下标 |
| <sup> | Superscript | 上标 |
| <code> | Code | 行内代码 |
| <pre> | Preformatted | 保留格式 |
| <q> | Quote | 短引用 |
| <blockquote> | Block Quote | 长引用 |