必须用标签而非CSS模拟，因其原生支持语义正确、浏览器自动适配字体基线、保障屏幕阅读器准确朗读，适用于化学式（如H₂O）、数学公式等需精确对齐与无障碍访问的场景。
直接用 <sub> 标签最稳妥，浏览器原生支持、语义正确、无需额外样式。CSS 的 vertical-align: sub 虽然也能实现视觉下移，但缺乏语义，对屏幕阅读器不友好，也不适用于需要精确对齐的化学式（比如 H2O 中的 “2” 必须紧贴 O 左下方）。
什么时候必须用 <sub> 而不是 CSS 模拟？
化学式、数学公式、脚注编号这类有明确语义的场景，<sub> 是唯一推荐方式。例如写 CO2，若只靠 vertical-align，可能因字体度量差异导致数字位置偏高或过低；而 <sub> 会触发浏览器内置的下标排版逻辑，自动匹配当前字体的基线与下标偏移量。
常见错误现象：
– 用 span + font-size: 75%; vertical-align: -0.2em 写 H2SO4，结果 “2” 和 “4” 高度不一致
– 在不同字体（如系统默认 sans-serif vs 网页加载的 Roboto）下，CSS 下标位置漂移明显
– 屏幕阅读器读出 “H two S O four”，而非 “H sub 2 S O sub 4”
<sub> 的基础写法和注意事项
语法极简，但几个细节容易踩坑：
- 必须成对使用：
<sub>2</sub>正确，<sub>2单标签会导致后续所有文本被误判为下标 - 不能嵌套其他行内元素（如
<strong>）在<sub>里——虽然多数浏览器能渲染，但 HTML 规范不鼓励，且某些严格解析器会降级处理 - 不要给
<sub>加font-size：浏览器已按比例缩放（通常为 75%），手动设值会破坏默认比例，导致与上文文字基线错位 - 多个连续下标要分开包裹：CO2 不等于 CO2（后者是正确写法），更不能写成 CO2（这是无效 HTML）
遇到复杂分子式（含括号、多级下标）怎么办？
纯 HTML 可以应付绝大多数情况，关键在于结构清晰：
例如写 Ca3(PO4)2：
– 外层括号用普通文本，括号内的 “PO4” 是一个完整下标单元
– 整个 “(PO4)” 作为整体再被外层 <sub>2</sub> 包裹
– 不要试图用 CSS 把括号也拉低，括号本身不需要下标语义
如果真遇到像 Fe2(SO4)3·9H2O 这类带点号和多组下标的，建议分段写：Fe<sub>2</sub>(SO<sub>4</sub>)<sub>3</sub>·9H<sub>2</sub>O
注意：· 是 HTML 实体，比直接打英文句点更符合化学书写规范；避免用 . 或 •，前者易被误解析为小数点，后者在部分旧浏览器中显示异常。
真正麻烦的不是怎么写，而是怎么让下标在各种字体、缩放比例、暗色模式下都保持可读又不失真——<sub> 原生支持就是为此存在的，别绕路。
