必须用仅当内容具明确语义：化学式、数学幂次、脚注、电荷标记；否则应优先用CSS vertical-align或Unicode字符，避免误导辅助技术与渲染错位。
直接用 <sup></sup> 和 <sub></sub> 标签就能排版上下标，但排出来“对不对”不取决于标签写没写对，而取决于你有没有踩中语义、样式、嵌套这三类坑。
什么时候必须用 <sup></sup> 和 <sub></sub>，而不是 CSS
只有内容本身具备明确语义时才该用：化学式（H<sub>2</sub>O）、数学幂次（x<sup>2</sup>）、脚注编号（参见文献<sup>3</sup>）、电荷标记（SO<sub>4</sub><sup>2-</sup>）。这些场景下，屏幕阅读器会读出“上标2”“下标4”，复制粘贴也能保留 Unicode 下标字符（如 H₂O）；如果只是想让“cm³”里的 3 小一点偏上，那该用 CSS 的 vertical-align，否则会误导辅助技术。
<sup></sup> 和 <sub></sub> 渲染错位的常见原因
它们默认就生效，但容易被样式链意外覆盖：
- 全局 CSS 重置（如 Normalize.css）把
vertical-align强制设为baseline，直接废掉上下标位置 - 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放失效 - 在
<pre class="brush:php;toolbar:false;"></pre>或等宽字体环境里，默认偏移常错位，此时应改用font-variant-position: super - 手动给
<sup></sup>加style="vertical-align: super"—— 多此一举，还可能和行高冲突
需要微调显示效果时怎么安全覆盖默认样式
可以改，但别碰 vertical-align 值本身；优先用比例单位控制缩放和偏移：
立即学习“前端免费学习笔记（深入）”；
- 统一字号：
sup, sub { font-size: 0.75em; }（避免写死 px，适配深色模式/缩放） - 微调上移量：
sup { margin-bottom: -0.15em; }（比vertical-align: 0.2em更稳，不破坏基线） - 若需像素级对齐（比如和 SVG 图标并排），用
transform: translateY(-0.2em)比top更兼容旧 Safari
复杂表达式里 <sup></sup>/<sub></sub> 容易翻车的点
简单幂次或单层电荷没问题，但一涉及复合结构就崩：
-
<sub><sup>2</sup></sub>是非法嵌套，HTML 不允许 -
x<sup>2</sup><sub>i</sub>渲染成 “x²i”，而非 “xᵢ²”，顺序和位置全错 - 分数、根号、求和号等根本无法表达；真要写公式，优先用 MathML 或 KaTeX
- 化学式里像
PO<sub>4</sub><sup>3-</sup>这种多数字+符号组合，浏览器默认偏移常不一致，建议整个公式包进<span class="chem"></span>再用 flex 对齐内部标签
真正难的不是写对标签，而是判断什么时候该放弃 <sub></sub>/<sup></sup> —— 比如单位符号 m²、摄氏度 ℃，直接用 Unicode 字符（²、℃）反而更稳，也免去样式调试。
