必须用仅当内容具明确语义：化学式、数学幂次、脚注、电荷标记；否则应优先用CSS vertical-align或Unicode字符，避免误导辅助技术与渲染错位。
直接用 和 标签就能排版上下标，但排出来“对不对”不取决于标签写没写对，而取决于你有没有踩中语义、样式、嵌套这三类坑。
什么时候必须用
只有内容本身具备明确语义时才该用：化学式（H2O）、数学幂次（x2）、脚注编号（参见文献3）、电荷标记（SO42-）。这些场景下，屏幕阅读器会读出“上标2”“下标4”，复制粘贴也能保留 Unicode 下标字符（如 H₂O）；如果只是想让“cm³”里的 3 小一点偏上，那该用 CSS 的 vertical-align，否则会误导辅助技术。
它们默认就生效，但容易被样式链意外覆盖：
- 全局 CSS 重置（如 Normalize.css）把
vertical-align强制设为baseline，直接废掉上下标位置 - 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放失效 - 在
或等宽字体环境里，默认偏移常错位，此时应改用font-variant-position: super - 手动给
加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
复杂表达式里
简单幂次或单层电荷没问题，但一涉及复合结构就崩：
-
2是非法嵌套，HTML 不允许 -
x2i渲染成 “x²i”，而非 “xᵢ²”，顺序和位置全错 - 分数、根号、求和号等根本无法表达；真要写公式，优先用 MathML 或 KaTeX
- 化学式里像
PO43-这种多数字+符号组合，浏览器默认偏移常不一致，建议整个公式包进再用 flex 对齐内部标签
真正难的不是写对标签，而是判断什么时候该放弃 / —— 比如单位符号 m²、摄氏度 ℃，直接用 Unicode 字符（²、℃）反而更稳，也免去样式调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
