下标文本标签 - <sub>

什么是 <sub> 标签？

<sub> 标签用于定义下标文本。下标文本会显示在正常文本的下方，并且字体较小。它常用于化学式、数学表达式、科学符号等场景。

基本语法

html 
正常文本<sub>下标内容</sub>正常文本

用法与语义

<sub> 标签用于表示下标文本，主要用于以下场景：

  • 化学分子式（如H₂O）
  • 数学表达式中的下标
  • 科学单位（如m/s²）
  • 对数或其他数学函数的参数
  • 计算机编程中的下标索引

<sub> 标签不会改变文本的语义，仅用于视觉上的下标显示。

示例：

html 
<!-- 化学分子式 -->
<p>水的化学式是 H<sub>2</sub>O。</p>
<p>二氧化碳的化学式是 CO<sub>2</sub>。</p>

<!-- 数学表达式 -->
<p>在数列 a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ... 中...</p>

<!-- 科学单位 -->
<p>重力加速度是 9.8 m/s<sup>2</sup>（注意：上标使用sup标签）</p>

<!-- 对数函数 -->
<p>log<sub>10</sub> 100 = 2</p>

<!-- 编程索引 -->
<p>数组元素可以通过 arr<sub>i</sub> 访问。</p>

与 <sup> 标签的区别

<sub> 标签和 <sup> 标签都是用于文本的垂直偏移，但方向相反：

标签 效果 用途
<sub> 下标文本 化学式、数学下标等
<sup> 上标文本 指数、脚注、日期后缀等

示例：

html 
<!-- 使用sub标签 -->
<p>O<sub>2</sub> 表示氧气。</p>

<!-- 使用sup标签 -->
<p>10<sup>3</sup> 表示一千。</p>

全局属性

<sub> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class自定义样式 -->
<p>
  H<sub class="chemical">2</sub>O
</p>

<!-- 使用style自定义样式 -->
<p>
  a<sub style="color: blue;">n</sub> = a<sub style="color: blue;">n-1</sub> + 1
</p>

<!-- 使用title提供额外信息 -->
<p>
  CO<sub title="表示两个氧原子">2</sub>
</p>

结合其他标签使用

<sub> 标签可以与其他HTML标签结合使用，但应注意语义的合理性：

示例：

html 
<!-- 与上标标签结合 -->
<p>x<sub>i</sub><sup>2</sup> 表示x的第i个元素的平方。</p>

<!-- 与强调标签结合 -->
<p>注意：在这个公式中，<em>n<sub>0</sub></em> 表示初始值。</p>

<!-- 与代码标签结合 -->
<code>
  for (int i = 0; i < arr.length; i++) {
    System.out.println(arr<sub>i</sub>);
  }
</code>

最佳实践

  1. 用于合适的场景：仅在需要表示化学式、数学下标、科学单位等场景时使用 <sub> 标签。

  2. 保持简洁：下标内容应该简洁明了，避免过长的下标文本。

  3. 避免嵌套：尽量避免在 <sub> 标签内部嵌套其他格式化标签，尤其是其他 <sub> 或 <sup> 标签。

  4. 考虑可访问性：确保下标文本不会影响页面的可读性，尤其是对于使用屏幕阅读器的用户。

  5. 自定义样式：可以使用CSS来自定义下标文本的样式，如字体大小、颜色等，但应保持其可读性。

好的示例：

html 
<!-- 化学公式 -->
<p>硫酸的化学式是 H<sub>2</sub>SO<sub>4</sub>。</p>

<!-- 数学表达式 -->
<p>函数 f(x) = x<sub>1</sub> + 2x<sub>2</sub> + 3x<sub>3</sub>。</p>

<!-- 科学符号 -->
<p>pH值表示为 -log<sub>10</sub>[H<sup>+</sup>]。</p>

不好的示例：

html 
<!-- 过度使用 -->
<p>这<sub>段</sub>文<sub>本</sub>有<sub>很</sub>多<sub>下</sub>标。</p>

<!-- 嵌套不当 -->
<p>x<sub>1<sub>i</sub></sub> 这样的嵌套很难阅读。</p>

<!-- 用于普通强调 -->
<p>这<sub>非常</sub>重要。</p> <!-- 应该使用em或strong -->

浏览器兼容性

<sub> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结

<sub> 标签是HTML中用于表示下标文本的标签，常用于化学式、数学表达式、科学单位等场景。它会将文本显示在正常文本的下方，并且字体较小。正确使用 <sub> 标签可以提高页面的可读性和专业性，尤其是在包含科学或数学内容的文档中。

最后更新：2026-02-07