Skip to content

HTML 文本格式化

HTML 提供了一系列标签,用于对文本进行格式化,赋予它们特殊的样式或语义含义。这些标签可以分为两类:物理标签(侧重于视觉表现)和逻辑标签(侧重于语义含义)。

在现代 Web 开发中,我们更推荐使用具有语义的逻辑标签,而将纯粹的样式控制交给 CSS。

物理标签 vs. 逻辑标签

物理标签 (样式)逻辑标签 (语义)描述与区别
<b><strong>粗体<b> (Bold) 只是让文字变粗,而 <strong> (Strong Importance) 强调了文本的重要性。屏幕阅读器会重读 <strong> 的内容。
<i><em>斜体<i> (Italic) 只是让文字倾斜,而 <em> (Emphasis) 表示强调。屏幕阅读器会以重音朗读 <em> 的内容。
<u><ins>下划线<u> (Underline) 只是添加下划线,而 <ins> (Inserted Text) 表示文档中插入的文本。
<s><del>删除线<s> (Strikethrough) 只是添加删除线,而 <del> (Deleted Text) 表示文档中已删除的文本。

最佳实践: 优先使用 <strong><em> 等逻辑标签,因为它们同时提供了视觉样式和语义信息,对 SEO 和可访问性都更有利。


常用格式化标签示例

粗体和强调

html
<p>这是一个普通的段落。</p>
<p><b>这是一个粗体文本。</b></p>
<p><strong>这是一个重要的文本。</strong></p>

斜体和强调

html
<p><i>这是一个斜体文本。</i></p>
<p><em>这是一个需要强调的文本。</em></p>

标记或高亮文本

使用 <mark> 标签来高亮显示文本,就像用荧光笔做标记一样。

html
<p>不要忘记今天购买<mark>牛奶</mark>。</p>

小号文本

<small> 标签用于定义小一号的文本,常用于版权信息或脚注。

html
<p><small>版权所有 &copy; 2024</small></p>

删除和插入文本

<del><ins> 经常一起使用,以显示文档的编辑和修订历史。

html
<p>我最喜欢的颜色是 <del>蓝色</del> <ins>红色</ins>!</p>

浏览器通常会为 <del> 添加删除线,为 <ins> 添加下划线。

下标和上标

  • <sub> (Subscript) 用于定义下标文本,常用于化学式或数学公式。
  • <sup> (Superscript) 用于定义上标文本,常用于脚注或数学中的次方。
html
<p>水的化学式是 H<sub>2</sub>O。</p>
<p>著名的数学公式 E = mc<sup>2</sup>。</p>

本站内容仅供学习和研究使用。