sub标签是唯一推荐方式，因其直接表达下标语义，确保浏览器、屏幕阅读器和搜索引擎正确解析；而vertical-align等css模拟方式会导致偏移不稳、可访问性缺失、pdf导出失效及cms过滤等问题。
sub 标签是唯一推荐方式，不是“一种可选方案”。它直接表达“这个数字属于前一个元素的下标”这一语义，浏览器、屏幕阅读器、搜索引擎都依赖这个标记做正确解析。
为什么不能用 vertical-align 或 span 模拟
视觉上看似能凑合，但实际踩坑密集：
- 不同字体下
vertical-align: sub的偏移量浮动明显，Roboto和系统默认sans-serif渲染出的 “2” 高度可能差 2px 以上 - 屏幕阅读器读
<span style="vertical-align: sub">2</span>就是 “H 2 O”，不会提示下标身份；而H<sub>2</sub>O多数会读作 “H 下标 2 O” - PDF 导出工具（如
wkhtmltopdf）常完全忽略vertical-align，导致导出后所有 “2” 全部平排，化学式失效 - CMS 或富文本编辑器若未在 XSS 白名单中显式放行
sub，保存时标签直接被过滤掉
sub 标签的正确写法与常见错误
语法极简，但细节决定是否真能用：
- 必须成对闭合：
<sub>2</sub>✅，<sub>2</sub>❌（后续所有文字都会被当上下标） - 多位数要整体包裹：
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>✅，C<sub>6</sub>H<sub>1</sub><sub>2</sub>O❌（语义断裂 + 渲染错位） - 括号不参与下标：
Ca<sub>3</sub>(PO<sub>4</sub>)<sub>2</sub>✅，Ca<sub>3</sub>(<sub>PO</sub>4)<sub>2</sub>❌（括号本身不是下标内容） - 计量系数不是下标：
2H<sub>2</sub> + O<sub>2</sub>✅，<sub>2</sub>H<sub>2</sub>❌（前面的 “2” 是反应系数，属普通数字）
多 sub 连续出现时对齐不齐怎么办
像 Fe<sub>2</sub>(SO<sub>4</sub>)<sub>3</sub>·9H<sub>2</sub>O 这类结构，括号和数字混排后，“4” 和 “3” 看起来高度不一致——这不是 bug，是 sub 默认按各自基线对齐的结果。
- 不要改
font-size单独调大小，容易叠加偏移导致下沉过深 - 推荐加统一类名：
<sub class="chem">2</sub>，再配 CSS：sub.chem { font-size: 0.72em; vertical-align: baseline; transform: translateY(0.12em); } - 避免在
flex或grid容器里直接对sub设vertical-align—— 它对这些 display 类型完全无效，必须外包一层span或改用transform
真正难的不是写出 H<sub>2</sub>O，而是确保它在暗色模式、缩放 200%、等宽字体环境、PDF 导出、以及 JAWS/NVDA 各种朗读模式下，依然保持语义完整、位置可控、可读不糊。原生 sub 提供的是底线保障，绕开它等于主动放弃这一整套基础设施。
