必须在内容本身具有明确语义时使用和标签，如化学式（h2o）、数学幂次（x2）、脚注编号（文献1）、商标符号（®），乱用会破坏可访问性。
直接用 <sup></sup> 和 <sub></sub> 标签就行，不用 CSS、不用 JS，浏览器原生支持，语义正确，屏幕阅读器能读出“上标”“下标”。
什么时候必须用 <sup></sup> 和 <sub></sub>？
只在内容本身有明确语义时才该用——不是“看起来像”，而是“它本来就是”：
- 化学式：
H<sub>2</sub>O、SO<sub>4</sub><sup>2-</sup> - 数学幂次：
x<sup>2</sup>、log<sub>2</sub>x - 脚注编号：
参见文献<sup>1</sup> - 商标/版权符号：
Brand<sup>®</sup>、©<sup>2026</sup>（注意：年份上标是常见错误，但 © 后跟年份整体是合法的版权标记）
乱用会破坏可访问性。比如把“2024 年”写成 <sup>2024</sup>，NVDA 会读成“上标二零二四”，用户完全听不懂上下文。
<sup></sup> 和 <sub></sub> 的默认行为有哪些坑？
它们不是排版工具，只是语义标签。浏览器按 UA stylesheet 渲染，但细节不可控：
- 字号约为主文本的 75%，但不同字体下实际缩放比例可能失真（比如等宽字体里
<sub></sub>看起来太小） -
<sup></sup>垂直偏移约 0.3em，<sub></sub>约 0.2em —— 这个值各浏览器不一致，混排时容易“飘”或“沉” - 行高默认不受影响，但如果父容器
line-height很小，<sup></sup>可能被裁掉顶部 - 不允许嵌套：
<sub><sup>x</sup></sub>是非法 HTML，校验失败，SSR 或严格解析场景可能出错
怎么让 <sup></sup>/<sub></sub> 对齐更稳？
靠 CSS 覆盖默认样式，而不是放弃语义标签：
sub, sup {
vertical-align: baseline;
font-size: 0.75em;
}
sub {
position: relative;
bottom: -0.25em;
}
sup {
position: relative;
top: -0.25em;
}
这样做的好处是：保留语义、兼容屏幕阅读器、复制粘贴仍能保留结构（比如 CO<sub>2</sub> 复制到 Markdown 编辑器，至少能识别为“CO₂”），同时获得像素级对齐控制。
什么情况别硬扛，该换方案？
遇到这些，<sup></sup>/<sub></sub> 就不是最优解：
- 复杂数学公式：比如
a<sub>i</sub><sup>2</sup>想表达 “aᵢ²”，但 HTML 渲染顺序是先下标后上标，结果变成 “a₂²”；真正需要的是 Unicode 组合字符或 MathML - 单位缩写如
cm<sup>3</sup>：立方厘米是整体单位，“3”单独上标无语义，应改用<span class="unit">cm³</span>或 CSSvertical-align - 需要响应式缩放：比如小屏时上标字号要缩得更小，
<sup></sup>无法 media query 精细控制，得用 class + CSS
最易被忽略的一点：混合使用 <sub></sub> 和 <sup></sup> 时（如离子电荷 PO<sub>4</sub><sup>3-</sup>），务必确保它们在同一个内联流中，不要被空格、换行或 <span></span> 隔开，否则视觉断层明显，且部分屏幕阅读器会插入停顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
