如何用Sub标签在网页实现下标效果？

本文共计880个文字，预计阅读时间需要4分钟。

直接用代码+简单说明的方式呈现结果，避免图片解析，不涉及复杂计算，不超过100字，直接输出：

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

化学式、数学公式、脚注编号这类有明确语义的场景，<sub> 是唯一推荐方式。例如写 CO₂，若只靠 vertical-align，可能因字体度量差异导致数字位置偏高或过低；而 <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>2</sub> 正确，<sub>2 单标签会导致后续所有文本被误判为下标
• 不能嵌套其他行内元素（如 <strong>）在 <sub> 里——虽然多数浏览器能渲染，但 HTML 规范不鼓励，且某些严格解析器会降级处理
• 不要给 <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> 原生支持就是为此存在的，别绕路。