必须用和标签而非css实现上下标，因其承载语义：指数（x²）、化学式（h₂o）、脚注编号、单位（m³）等需被读屏器正确识别为“上标2”“下标2”，而非普通数字；©2025中年份无上标语义，误用会干扰辅助技术。
直接用 <sup></sup> 和 <sub></sub> 标签，别绕弯写 CSS；语义对了，可访问性和 SEO 才不会掉链子。
什么时候必须用 <sup></sup> 和 <sub></sub> 而不是 vertical-align
当内容本身具有明确语义时——比如数学中的指数（x<sup>2</sup>）、化学式里的原子数（H<sub>2</sub>O）、脚注编号（参见文献<sup>3</sup>）或单位（m<sup>3</sup>）。这些不是“看起来高一点/低一点”就够了，而是浏览器、读屏软件、搜索引擎都需要知道“这个 2 是上标指数，不是普通数字”。用 vertical-align: super 只改视觉，没语义，读屏器会念成“x 2”，而不是“x 的平方”。
- 化学式中下标错误会导致语义断裂：写成
H2O（无标签）→ 读屏器读作“H 2 O”；H<sub>2</sub>O→ 读作“H 下标 2 O” - 数学公式里混用 CSS 容易破坏行高：不同字体下
vertical-align偏移量不一致，段落内多处上下标可能错位或撑开行距 - 版权符号
©<sup>2025</sup>是常见误用——© 2025即可，年份不是上标语义，加<sup></sup>反而干扰辅助技术
<sup></sup> 和 <sub></sub> 的默认样式与兼容性
所有现代浏览器都原生支持这两个标签，无需 polyfill。它们是行内元素，字号默认约为父级的 75%，垂直偏移量由浏览器 UA 样式决定（通常是基线向上/向下约 1/4 行高）。不需要额外写 CSS 就能正常渲染，但要注意：
- 嵌套使用合法：
H<sub>2</sub>O<sup>−</sup>（水分子带负电荷）可正常显示 - 不要在
<pre class="brush:php;toolbar:false;"></pre>或等宽字体环境里依赖默认偏移——等宽字体下上下标位置可能偏移异常，此时建议用font-variant-position: sub/super替代 - 旧版 IE（≤8）虽支持标签，但默认字号偏大、偏移不准；如需兼容，可加轻量 reset：
sup, sub { font-size: 75%; line-height: 0; position: relative; }，再手动调top/bottom
容易被忽略的排版细节
上下标本身不改变文本流宽度，但会影响行高和基线对齐。尤其在混合中英文、多数字母组合时，问题更明显：
- 连续多个
<sub></sub>（如CO<sub>2</sub><sub>3</sub>）会叠加降低，应合并为CO<sub>23</sub>或用CO<sub>2</sub><sub>3</sub>（后者语义错误，不推荐） - 数学表达式如
a<sub>n+1</sub>，加号不是下标语义，应写作a<sub>n</sub>+1或a<sub>n+1</sub>（仅当整个 “n+1” 是下标索引时才合法） - HTML 不校验语义，但 WCAG 和部分无障碍检测工具会警告非标准用法，例如把序数词
1<sup>st</sup>当作纯装饰——其实它属于合法上标语义（first 的缩写），但2<sup>nd</sup>就存在争议，稳妥起见建议用纯文本2nd
真正难的不是怎么写标签，而是判断哪个数字或符号“本质上属于上标/下标语义”。写完记得用屏幕阅读器试读一遍，或者打开浏览器的无障碍树查看节点 role 和属性——这才是验证是否用对的关键动作。
