<sub>-下标文本

<sub>标签的基本概念

<sub>是HTML中用于定义下标文本的标签。下标文本通常比正常文本位置低半行，并且可能使用较小的字体。这种排版方式在数学公式、化学式、脚注编号等场景中非常常见。例如H₂O中的数字2就是典型的下标应用。

<p>水的化学式是H<sub>2</sub>O</p>

下标文本的典型应用场景

化学分子式表示

在化学领域，<sub>标签用于表示分子中原子的数量。比如二氧化碳(CO₂)、甲烷(CH₄)等化学式的表示：

<p>二氧化碳: CO<sub>2</sub></p>
<p>甲烷: CH<sub>4</sub></p>
<p>硫酸: H<sub>2</sub>SO<sub>4</sub></p>

数学表达式

数学公式中的下标常用于表示变量序列或特殊符号：

<p>斐波那契数列: F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></p>
<p>对数函数: log<sub>2</sub>8 = 3</p>

脚注和参考文献标记

学术写作中常用下标数字来标记脚注：

<p>根据最新研究<sub>[1]</sub>显示...</p>
<p>另有学者提出不同观点<sub>[2,3]</sub></p>

<sub>标签的样式控制

虽然<sub>标签有默认样式，但可以通过CSS进行自定义：

sub {
  vertical-align: sub;
  font-size: 0.8em;
  color: #666;
  line-height: 1;
}

自定义下标位置

如果需要更精确控制下标位置：

.custom-sub {
  vertical-align: -0.25em;
  font-size: 75%;
  position: relative;
  bottom: -0.2em;
}

与其他标签的配合使用

结合<sup>标签

在复杂公式中，可能同时需要上标和下标：

<p>二项式系数: C<sup>n</sup><sub>k</sub></p>
<p>积分表达式: ∫<sub>0</sub><sup>1</sup>x<sup>2</sup>dx</p>

在表格中使用

表格中的科学数据经常需要下标：

<table>
  <tr>
    <th>物质</th>
    <th>化学式</th>
  </tr>
  <tr>
    <td>氧气</td>
    <td>O<sub>2</sub></td>
  </tr>
  <tr>
    <td>臭氧</td>
    <td>O<sub>3</sub></td>
  </tr>
</table>

浏览器兼容性与注意事项

所有现代浏览器都支持<sub>标签，包括：

• Chrome 1+
• Firefox 1+
• Safari 1+
• Opera 4+
• Edge 12+
• Internet Explorer 3+

可访问性考虑

屏幕阅读器通常能正确识别<sub>标签的内容，但对于纯装饰性用途的下标，建议使用CSS而非语义化标签：

<span class="decorative-sub">装饰性下标</span>

实际开发中的技巧

响应式设计中的处理

在小屏幕上可能需要调整下标大小：

@media (max-width: 600px) {
  sub {
    font-size: 0.7em;
  }
}

与数学ML的结合

对于复杂数学表达式，可以结合MathML使用：

<math>
  <msub>
    <mi>H</mi>
    <mn>2</mn>
  </msub>
  <mo></mo>
  <mi>O</mi>
</math>

替代方案比较

CSS方案

纯CSS实现下标效果：

<span style="vertical-align: sub; font-size: smaller;">下标文本</span>

Unicode字符

某些情况下可以使用Unicode下标字符：

<p>H₂O</p>

但这种方法局限性大，只适用于有限字符集(0-9和部分字母)。

在JavaScript动态生成下标

通过DOM操作动态创建下标元素：

function addSubscript(text, subText) {
  const element = document.createElement('span');
  element.innerHTML = `${text}<sub>${subText}</sub>`;
  return element;
}

document.body.appendChild(addSubscript('X', 'i'));

特殊用例展示

多层下标

虽然不常见，但可以创建多层下标：

<p>Y<sub>i<sub>j</sub></sub></p>

下标中的样式

下标内部可以包含其他样式：

<p>A<sub><em>重要</em>下标</sub></p>

性能考量

大量使用<sub>标签对页面性能影响微乎其微，但在极端情况下(如数千个下标)，可以考虑使用CSS类替代：

.sub-like {
  vertical-align: sub;
  font-size: smaller;
}

与其他技术的集成

SVG中的下标

在SVG中实现下标效果：

<svg>
  <text x="10" y="20">H<tspan baseline-shift="sub" font-size="smaller">2</tspan>O</text>
</svg>

Canvas绘图

Canvas中绘制下标文本：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
ctx.fillText('H', 10, 20);
ctx.font = '12px Arial';
ctx.fillText('2', 18, 22);
ctx.font = '16px Arial';
ctx.fillText('O', 24, 20);