必须用标签而非css模拟，因其原生支持语义正确、浏览器自动适配字体基线、保障屏幕阅读器准确朗读，适用于化学式（如h₂o）、数学公式等需精确对齐与无障碍访问的场景。

直接用 <sub></sub> 标签最稳妥，浏览器原生支持、语义正确、无需额外样式。CSS 的 vertical-align: sub 虽然也能实现视觉下移，但缺乏语义，对屏幕阅读器不友好，也不适用于需要精确对齐的化学式（比如 H₂O 中的 “2” 必须紧贴 O 左下方）。

什么时候必须用 <sub></sub> 而不是 CSS 模拟？

化学式、数学公式、脚注编号这类有明确语义的场景，<sub></sub> 是唯一推荐方式。例如写 CO₂，若只靠 vertical-align，可能因字体度量差异导致数字位置偏高或过低；而 <sub></sub> 会触发浏览器内置的下标排版逻辑，自动匹配当前字体的基线与下标偏移量。

常见错误现象：
– 用 span + font-size: 75%; vertical-align: -0.2em 写 H₂SO₄，结果 “2” 和 “4” 高度不一致
– 在不同字体（如系统默认 sans-serif vs 网页加载的 Roboto）下，CSS 下标位置漂移明显
– 屏幕阅读器读出 “H two S O four”，而非 “H sub 2 S O sub 4”

<sub></sub> 的基础写法和注意事项

语法极简，但几个细节容易踩坑：

• 必须成对使用：<sub>2</sub> 正确，<sub>2</sub> 单标签会导致后续所有文本被误判为下标
• 不能嵌套其他行内元素（如 <strong></strong>）在 <sub></sub> 里——虽然多数浏览器能渲染，但 HTML 规范不鼓励，且某些严格解析器会降级处理
• 不要给 <sub></sub> 加 font-size：浏览器已按比例缩放（通常为 75%），手动设值会破坏默认比例，导致与上文文字基线错位
• 多个连续下标要分开包裹：CO₂ 不等于 CO₂（后者是正确写法），更不能写成 CO₂（这是无效 HTML）

遇到复杂分子式（含括号、多级下标）怎么办？

纯 HTML 可以应付绝大多数情况，关键在于结构清晰：

例如写 Ca₃(PO₄)₂：
– 外层括号用普通文本，括号内的 “PO₄” 是一个完整下标单元
– 整个 “(PO₄)” 作为整体再被外层 <sub>2</sub> 包裹
– 不要试图用 CSS 把括号也拉低，括号本身不需要下标语义

如果真遇到像 Fe₂(SO₄)₃·9H₂O 这类带点号和多组下标的，建议分段写：
Fe<sub>2</sub>(SO<sub>4</sub>&gt)<sub>3</sub>·9H<sub>2</sub>O

注意：· 是 HTML 实体，比直接打英文句点更符合化学书写规范；避免用 . 或 •，前者易被误解析为小数点，后者在部分旧浏览器中显示异常。

真正麻烦的不是怎么写，而是怎么让下标在各种字体、缩放比例、暗色模式下都保持可读又不失真——<sub></sub> 原生支持就是为此存在的，别绕路。

立即进入“夸克AI手把手教你，操作像呼吸一样简单！☜☜☜☜☜点击进入”；