文本格式化是指对文本加粗（<strong>）、斜体（<em>）、删除线（<del>）、小号文本（<small>）、上下标（<sup>/<sub>）等等，部分效果如下：
加粗（<strong>）、斜体（<em>）、删除线（<del>）、上标下标（<sup>/<sub>）
简单来说，HTML 文本格式化的核心是通过特定标签为文本添加语义化的格式标识（如加粗、斜体、标记等），同时部分标签自带默认视觉样式，也可配合 CSS 实现更灵活的自定义排版。
HTML 中的文本格式化标签主要分为两类：语义化格式化标签（✅推荐使用）和纯视觉格式化标签（❌️不推荐，仅做了解）。
该类标签不仅能改变文本的视觉样式，更重要的是赋予文本明确的语义（含义），让浏览器、搜索引擎、屏幕阅读器等工具能理解文本的作用和重要性，既利于 SEO 优化，也提升了网页的可访问性，是前端开发的最佳实践。
| 标签 | 语义含义 | 默认视觉样式 | 适用场景举例 |
| <strong> | 强调文本的重要性、严肃性 | 文本加粗 | 警告信息、关键条款、核心关键词 |
| <em> | 强调文本的语气、情感、着重朗读 | 文本斜体 | 需重读的内容、技术术语、引用强调 |
| <mark> | 标记、高亮文本 | 黄色背景（可自定义） | 重点标注、搜索结果匹配项 |
| <blockquote> | 块级引用（长篇引用） | 左右缩进 | 引用名人名言、整段文献内容 |
| <q> | 行内短引用 | 自动添加英文双引号 | 句子内部的简短引用 |
| <abbr> | 缩写词 / 简称 | 部分浏览器显示下划线（hover 可显示全称） | 技术术语（如 HTML、CSS）、专业简称 |
| <del> | 已删除、作废的文本 | 文本添加删除线 | 商品原价、作废的条款 |
| <ins> | 新增、插入的文本 | 文本添加下划线 | 商品优惠价、新增的补充说明 |
| <code> | 计算机代码片段 | 等宽字体 | 展示单行 HTML、CSS、JS 代码 |
| <pre> | 预格式化文本 | 保留原始换行 / 空格、等宽字体 | 展示多行代码、诗歌、表格（无需 CSS） |
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h2>商品详情</h2>
<!-- <del> 删除线，<ins> 下划线，<strong> 文本加粗 -->
<p>本商品原价：<del>¥999</del>，现新增优惠价：<ins>¥599</ins>（<strong>限量100件，售完即止</strong>）</p>
<!-- <mark>换色背景，可自定义 -->
<p>核心卖点：<mark>支持快充，续航长达72小时</mark></p>
<!-- <em>文本斜体， <abbr>下划线，<code>等宽字体 -->
<p>技术说明：<em>HTML</em>（<abbr title="HyperText Markup Language">超文本标记语言</abbr>）是网页的骨架，单行代
码示例：<code><p>这是一个段落</p></code></p>
<p>多行代码示例：</p>
<!-- 保留原始换行、空格 -->
<pre>
function sayHello() {
console.log("Hello, HTML!");
}
</pre>
<!-- <blockquote>块级引用 -->
<p>名人名言：<blockquote>生活就像海洋，只有意志坚强的人，才能到达彼岸。——马克思</blockquote></p>
<!-- <q>自动添加英文引号 -->
<p>他说：<q>今天的努力，是明天的铺垫。</q></p>
</body>
</html>运行示例，效果如下图：
注意，该类标签只有视觉样式效果，没有任何语义含义，仅用于改变文本的外观，无法被工具识别文本的作用，现在已逐渐被 CSS 替代，仅需了解即可，实际开发中尽量避免使用。
| 标签 | 视觉效果 | 替代方案（CSS） |
|---|---|---|
<b> | 文本加粗 | font-weight: bold; |
<i> | 文本斜体 | font-style: italic; |
<u> | 文本添加下划线 | text-decoration: underline; |
<s> | 文本添加删除线 | text-decoration: line-through; |
注意：<b>和<strong>、<i>和<em>视觉效果一致，但语义不同。比如<b>仅让文字加粗，而<strong>强调文字的重要性，屏幕阅读器会对<strong>进行重读强调，这是纯视觉标签无法实现的。
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h2>商品详情</h2>
<!-- <s> 删除线，<u> 下划线，<b> 文本加粗 -->
<p>本商品原价：<s>¥999</s>，现新增优惠价：<u>¥599</u>（<b>限量100件，售完即止</b>）</p>
<!-- <i>文本斜体， <abbr>下划线，<code>等宽字体 -->
<p>技术说明：<i>HTML</i>（<abbr title="HyperText Markup Language">超文本标记语言</abbr>）是网页的骨架，单行代
码示例：<code><p>这是一个段落</p></code></p>
<p>多行代码示例：</p>
<!-- 保留原始换行、空格 -->
<pre>
function sayHello() {
console.log("Hello, HTML!");
}
</pre>
<!-- <blockquote>块级引用 -->
<p>名人名言：<blockquote>生活就像海洋，只有意志坚强的人，才能到达彼岸。——马克思</blockquote></p>
<!-- <q>自动添加英文引号 -->
<p>他说：<q>今天的努力，是明天的铺垫。</q></p>
</body>
</html>运行示例，效果如下图：
📢 注意：
HTML 文本格式化核心是优先使用语义化标签，兼顾视觉效果和工具可识别性，利于 SEO 和可访问性。
常用语义化标签可覆盖加粗、高亮、删除 / 新增、代码展示等大部分场景，<strong>（重要）、<em>（语气）、<mark>（高亮）是日常开发高频使用。
纯视觉标签（<b>、<i>等）已被 CSS 替代，实际开发中应尽量避免使用，样式需求优先通过 CSS 实现。
更多关于HTML的知识请学习后续章节……
川公网安备51010802032098