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>版权所有 © 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>