HTML: HTML 文本格式化
最后更新：2026-10-13
格式标签使文本不仅仅是简单的文字——有加粗、斜体、删除线、上标、引号等样式。每种格式都有相应的语义标签，既能改变外观，又能传达意义。
1. 粗体与斜体
<b> 让文字加粗，<i> 让文字倾斜。但 HTML5 更推荐使用有语义的 <strong>（表示重要内容）和 <em>（表示强调），因为浏览器和搜索引擎能理解它们的含义，而不仅仅是改变样式。
▶ 示例
▶ 试一试💡 最佳实践：
除非你只是单纯想要视觉上的粗体或斜体（比如图标字体），否则优先用
<strong> 和 <em>。屏幕阅读器会对它们做特殊处理，对无障碍更友好。
2. 删除、插入与标记
<del> 显示删除线，表示内容已被删除；<ins> 显示下划线，表示新插入的内容。注意 <u> 也能产生下划线效果，但 <ins> 带有"新增"的语义，<u> 仅仅改变外观。除此之外，<mark> 像荧光笔一样高亮文字；<small> 表示小号字体的附加说明，常用来放免责声明或版权信息。
▶ 示例
▶ 试一试3. <pre> 预格式化文本标记
此外，<pre> 标签（预格式化文本）可以保留代码中的空格和换行，非常适合展示代码片段或简单的字符画（ASCII Art）：
▶ 示例
▶ 试一试4. 上标与下标
<sub> 将文字显示为下标（底部），<sup> 显示为上标（顶部）。化学式、数学公式、脚注里很常见。
▶ 示例
▶ 试一试5. 引用与特殊文本
这类标签专门用来表示引用、缩写、联系信息等特殊内容的：
▶ 示例
▶ 试一试📌 注意：
<blockquote> 是块级元素，浏览器会为它添加缩进；<q> 是行内元素，浏览器自动加引号。<abbr> 配合 title 属性使用时，鼠标悬停会显示完整内容。<bdo dir="rtl"> 可以让文字从右向左书写，适合阿拉伯语等场景。
❓ 常见问题
Q
<strong>和<b>都是加粗，<em>和<i>都是斜体，有什么区别？A 区别在于"语义"。
<strong>表示"这段文字很重要"，<em>表示"这段文字需要强调"——它们传达的是内容的重要性；而<b>只是"把文字加粗"，<i>只是"把文字斜体"——它们只管视觉样式。搜索引擎和屏幕阅读器会识别<strong>和<em>的语义，但会忽略<b>和<i>。简单说：强调内容含义用<strong>/<em>，纯视觉效果用<b>/<i>或CSS。Q
<del>、<ins>和<u>有什么区别？A
<del>显示删除线，表示内容已被删除或过时，有明确的语义；<ins>显示下划线，表示新插入的内容，带有"新增"的语义；<u>只是给文字加下划线，纯粹是视觉效果。HTML5中<u>的用途被限制了，因为它容易和链接混淆（链接默认也有下划线）。建议：表示删除用<del>，表示新增用<ins>，不要用<u>。Q 什么时候用
<blockquote>，什么时候用<q>？A
<blockquote>是块级元素，用于长引用（通常是一个独立的段落或多个段落），浏览器会自动添加缩进；<q>是行内元素，用于短引用（一句话或几个词），浏览器会自动添加引号。简单说：长引用用<blockquote>，短引用用<q>。如果引用有明确的出处，可以在<blockquote>内用<cite>标注来源。📖 小节
<strong>表示重要，<em>表示强调——比<b>和<i>更有语义<del>删除线、<ins>语义下划线、<u>样式下划线、<mark>高亮、<small>小字说明<sub>下标、<sup>上标、<pre>保留空格和换行<blockquote>长引用、<q>短引用、<abbr>缩写、<address>联系信息、<cite>作品标题、<bdo>文字方向
📝 作业
- 格式化一段文字：写一段商品促销信息，包含原价（删除线）、现价（下划线插入）、打折说明（小字），以及一个高亮的"限时优惠"标记。
- 化学公式与上标：用
<sub>和<sup>写出CO₂和x² + y² = z²。 - 自查：在你浏览器中打开一个新闻网站，右键"检查"看看文章中的引号、强调文字、脚注分别用了哪些 HTML 标签。你能分辨出哪些用了
<strong>，哪些用了<b>吗？
