网页中，有些文字需要特殊效果：加粗、斜体、删除线、下标、上标等。 文本格式化标签大多属于行内元素 ，写在段落
<p>、标题<h2>内部，用来修饰一小段文字，不会独占一行。
区分两个概念：
- 物理标签 ：只改变文字外观（
<b>、<i>、<s>），只有视觉效果，没有语义。 - 语义标签 ：不仅改变样式，还告诉浏览器这段文字有特殊含义（
<strong>、<em>），推荐优先使用语义标签。
全部常用格式化标签总览
| 标签 | 作用 | 类型 |
|---|---|---|
<b> |
文字加粗，仅视觉效果 | 物理标签 |
<strong> |
文字强调加粗，代表重要内容，推荐优先使用 | 语义标签 |
<i> |
斜体，仅视觉效果 | 物理标签 |
<em> |
斜体强调，表示需要着重阅读的文字，推荐优先使用 | 语义标签 |
<s> / <del> |
删除线（文字中间划横线） | <del>有语义 |
<u> |
下划线文字 | 物理标签 |
<sup> |
上标，比如数学平方 10² | 行内 |
<sub> |
下标，比如化学 H₂O | 行内 |
<mark> |
高亮标记，文字背景黄色 | 语义标签 |
<small> |
小号文字，常用于版权、备注信息 | 语义标签 |
全部都是双标签，不会自动换行，可以嵌套在 p、h 标签里面。
1、加粗：<b> 和 <strong>
<b>
只做视觉加粗，没有语义含义，单纯把文字变粗。
<strong>
表示内容非常重要 ，浏览器默认显示加粗。搜索引擎、读屏软件会识别这里内容权重更高。 ✅开发优先使用 strong。
示例：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本格式化演示</title>
</head>
<body>
<p>普通文字，<b>b标签加粗文字</b>，继续普通文字。</p>
<p>普通文字，<strong>strong强调重要文字</strong>，继续普通文字。</p>
</body>
</html>解释： 页面上看两者显示效果几乎一模一样。 语义区别：
<b>：只是样子粗；<strong>：代表这段内容很关键，有实际含义。
例子场景：警告提示文字，用
<strong>
html
<p><strong>警告：请勿触摸高温设备！</strong></p>2、斜体：<i> 和 <em>
<i>
仅视觉斜体，无语义。
<em> emphasis（着重），表示需要着重朗读、强调，默认斜体。✅优先用 em。
html
<p>这是普通文字，<i>i标签斜体文字</i>。</p>
<p>这是普通文字，<em>em着重强调文字</em>。</p>场景举例：文章里面的外来词、需要着重读的句子用<em>
html
<p>读书的时候，要<em>仔细理解文章含义</em>。</p>小总结：
- 想要表达重要、警告 → 用
<strong>- 想要表达着重、重读 → 用
<em>- 只是单纯想变粗 / 变斜，没有特殊含义，才用
<b><i>
3、删除线 <del> 和 <s>
文字中间画一条横线，表示内容被删除、作废。
<del>：有语义，表示已经删除的内容，推荐。<s>：单纯视觉删除线，旧标签。
html
<p>商品原价：<del>199元</del>，现在特价：99元。</p>
<p>旧版本内容：<s>明天早上8点集合</s></p>解释：页面中原价 199 上面会有删除横线，代表价格已经失效。
4、下划线 <u>
文字底部增加一条下划线。
⚠️网页中链接
<a>默认就是下划线，不要大量用 u，容易和链接混淆。
html
<p>注意：<u>这个地方需要填写真实姓名</u></p>5、上标 <sup>
sup = superscript，文字向上抬高，常用于数学平方、次方、版权。 例：X²，10³
html
<p>数学公式：X<sup>2</sup> + Y<sup>3</sup></p>
<p>版权符号 ©<sup>®</sup></p>渲染效果：数学公式：X² + Y³
6、下标 <sub>
sub = subscript，文字向下降低，常用于化学分子式 H₂O。
html
<p>水的分子式：H<sub>2</sub>O</p>
<p>二氧化碳：CO<sub>2</sub></p>渲染效果：水的分子式：H₂O
7、高亮标记 <mark>
给文字加上黄色背景高亮，类似荧光笔标记重点。
html
<p>学习HTML，<mark>标签一定要成对闭合</mark>，不要忘记结束标签。</p>mark 表示内容是标记突出显示的内容。
8、小号文字 <small>
文字字号比普通正文更小，适合写备注、版权声明、小字提示。
html
<p>活动最终解释权归本店所有 <small>本活动仅限周末使用</small></p>标签嵌套（重点！）
格式化标签是行内元素，可以放在 p、h 标签内部，也可以互相嵌套。
嵌套规则：先打开的标签，后关闭；后打开的标签，先关闭，禁止交叉。
✅正确嵌套示例：加粗里面嵌套斜体
html
<p>普通文字 <strong><em>既加粗又斜体的文字</em></strong> 普通文字</p>解析：
- 打开 strong → 打开 em
- 先关闭 em → 再关闭 strong
❌错误交叉写法，禁止使用
html
<p>普通文字 <strong><em>文字</strong></em></p>完整综合示例，复制直接运行
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本格式化综合案例</title>
</head>
<body>
<h2>HTML文本格式化演示</h2>
<p>普通文字，<b>b粗体</b>，<strong>strong重要加粗</strong></p>
<p>普通文字，<i>i斜体</i>，<em>em着重斜体</em></p>
<p>商品价格：原价 <del>200元</del>，现价 <strong>128元</strong></p>
<p>数学公式：A<sup>2</sup> + B<sup>2</sup> = C<sup>2</sup></p>
<p>化学：H<sub>2</sub>O 是水的分子式</p>
<p>学习提示：<mark>写标签一定要成对闭合！</mark></p>
<p>温馨提示 <small>本内容仅供新手练习使用</small></p>
<!--嵌套：加粗+斜体+高亮一起使用-->
<p>考试重点：<strong><em><mark>标签嵌套不能交叉！</mark></em></strong></p>
</body>
</html>新手常见误区
- ❌分不清
<b>和<strong>，一律用 b
有重要、警告含义优先使用
<strong>，而不是单纯<b>。<b>只做纯视觉效果。
- ❌格式化标签外面套 p，搞反顺序
html
<strong>
<p>一段文字</p>
</strong>❌错误！<strong>是行内标签，里面不要放块级 p 标签。 ✅正确：p 在外，格式化标签写 p 里面
html
<p><strong>一段文字</strong></p>-
❌标签交叉嵌套 记住口诀：后开先关，先开后关，不要交叉。
-
❌大量滥用
<u>下划线，用户会误以为是链接。 -
❌把格式化标签写在
</p>结束标签外面，脱离段落。
本篇核心知识点总结
- 文本格式化标签属于行内元素 ，放在
<p>、标题内部，只修饰局部文字，不会独占一行。 - 分为物理标签（只改变外观：
<b> <i> <s> <u>）和语义标签（带含义，推荐优先用：<strong> <em> <del> <mark> <small>）。 <strong>代表重要；<em>代表着重阅读。<sup>上标，<sub>下标，多用于数学、化学。- 标签可以互相嵌套，严禁交叉嵌套。
- 行内格式化标签内部不能放段落
<p>、标题<h2>这类块级元素。
小练习：写一段文字，包含：普通文字、strong 重要警告、del 删除价格、H₂O 下标公式、mark 高亮重点。
下节预告
下一篇教程：HTML链接。