化学式下标仅数字需用sub标签，如h₂o；离子电荷“2+”须整体sup；括号外下标应置于括号后，如ca(oh)₂；上下标顺序影响渲染，so₄²⁻须先sub后sup；避免嵌套及误用sub/sup于计量系数或脚注。
化学式下标必须只包数字，别碰元素符号
写 H2O 是对的，写 H2O 或 H2O 就错了。元素符号（H、O、Ca）本身不是下标，只有右下角表示原子个数的数字才用 sub。
常见错误现象：CH<sub>3CH2</sub>OH 渲染后整个 “3CH2” 都变小下沉，因为 sub 没闭合或包裹过宽；正确写法是 CH<sub>3</sub>CH<sub>2</sub>OH，每个独立下标单独包裹。
- 括号外的下标（如 Ca(OH)2）必须套在括号整体之后，不能写成 Ca(OH2)
- 离子电荷（如 Ca2+、SO42−）中，“2+”“2−”必须完整放在
sup里，不能拆成Ca<sup>2</sup>+ - Unicode 减号推荐用 “−”（U+2212），不是短横 “-”，否则
10<sup>−3</sup>比10<sup>-3</sup>更符合排版规范
上标下标并存时顺序决定渲染位置
浏览器按 HTML 标签出现顺序叠加定位：SO<sub>4</sub><sup>2−</sup> 渲染为 SO₄²⁻（下标先贴基线，上标再叠上去）；反过来写 SO<sup>2−</sup><sub>4</sub> 就变成 SO²⁻₄，完全错乱。
典型翻车场景：a<sup>n+1</sup><sub>i</sub> 会把 i 放在 “aⁿ⁺¹” 右下角，而数学上常需 aᵢⁿ⁺¹ —— 正确顺序是 a<sub>i</sub><sup>n+1</sup>。
- 不要嵌套
<sub><sup></sup></sub>：无语义支撑，渲染不可控，校验工具报错 - 计量系数（如 2H2 + O2）不是下标，不能套
sub，否则屏幕阅读器会读成 “下标 2 H 下标 2” - 脚注引用用
<sup>1</sup>即可，别加方括号——那是视觉装饰，应由 CSS 或文案处理
默认样式被重置？优先查 vertical-align 和 line-height
sub 和 sup 默认靠 vertical-align: sub/super 实现偏移，但 Normalize.css、Ant Design 等框架常重置为 baseline，导致上下标“消失”。
别手动写 style="vertical-align: super" —— 它可能和父容器 line-height 冲突，尤其在富文本编辑器或 SSR 渲染中更易失效。
- 检查是否全局设置了
sup, sub { vertical-align: baseline; }，删掉或覆盖为super/sub - 避免父容器设
line-height: 1或font-size: 0，它们会压制子元素缩放 - 微调显示可用
sup, sub { font-size: 0.75em; line-height: 0; }，比硬调vertical-align更稳
什么时候该放弃 sub/sup，直接切 MathML 或 KaTeX
只要出现分数、根号、求和号 ∑、积分 ∫、自动缩放括号，或者需要 e<sup>x</sup> 中 x 更小更贴近 e 的专业排版，sub/sup 就已超出能力边界。
它们不是排版引擎，只是语义标签。强行用 x<sup>1/2</sup> 显示 √x，斜杠不会缩小，分母不上抬，屏幕阅读器也只会念 “x 上标 1 slash 2”。
- 含运算符的复合指数（如
a<sup>n+1</sup>）尚可接受，但a<sup>n<sub>i</sub>+1</sup>已属失控边缘 - PDF 导出（如 wkhtmltopdf）常忽略
sub/sup偏移，关键文档建议额外标注说明 - 与 SVG 图标并排时上下标常抬得过高，此时用
display: inline-flex; align-items: baseline;包裹更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
