必须用和标签实现上标下标，因其语义明确、原生支持、读屏器可识别；适用于数学幂次、化学式、脚注等场景，禁用嵌套与空格，微调仅限font-size和vertical-align。
用 <sup></sup> 和 <sub></sub> 标签实现上角标与下角标
HTML 原生就支持上角标和下角标，不需要 CSS 或 JS——直接用 <sup></sup> 和 <sub></sub> 标签就行。它们语义明确、浏览器兼容性好（从 IE6 到最新 Chrome 都支持），且默认样式就是缩小+偏移，开箱即用。
什么时候该用 <sup></sup> 而不是 CSS 的 vertical-align
语义优先：如果内容本身是数学指数（如 x2）、化学式（H2O）、脚注编号（见注1）或单位（cm2），必须用 <sup></sup>/<sub></sub>；仅靠 CSS 模拟会丢失可访问性（屏幕阅读器无法识别）和 SEO 语义。
-
<sup></sup>适合：幂运算（2<sup>10</sup>→ 2¹⁰）、版权符号（©<sup>®</sup>）、脚注标记 -
<sub></sub>适合：化学式（H<sub>2</sub>O）、下标变量（v<sub>initial</sub>）、音标（IPA 中的t<sub>ʃ</sub>） - 别用
vertical-align: super替代<sup></sup>：它只是视觉模拟，没有语义，且在不同字体下偏移量不稳定
常见错误：嵌套、空格、与内联元素混用
容易出问题的地方不是标签本身，而是上下文处理不当：
- 不要在
<sup></sup>里再套<sup></sup>或<sub></sub>：浏览器虽不报错，但语义混乱（比如<sup>x<sup>2</sup></sup>是“x 的上角标再上角标”，非标准写法） - 避免在
<sup></sup>前后加空格：HTML 会把空格当普通文本渲染，导致角标位置错位（例如mol <sup>-1</sup> s<sup>-1</sup>比mol<sup>-1</sup>s<sup>-1</sup>多出多余间隙） - 跟
<em></em>、<strong></strong>等内联元素混用时，顺序影响样式继承：建议先包裹语义结构，再加强调，如<strong>E<sub>g</sub></strong>，而非<sub><strong>g</strong></sub>
需要微调样式时，只改 font-size 和 vertical-align
浏览器对 <sup></sup> 默认设为 font-size: 75% 和 vertical-align: super，<sub></sub> 类似但用 sub。如需统一调整（比如让所有上角标更小或更高），用 CSS 即可：
sup, sub {
font-size: 65%;
vertical-align: 0.25em;
}
注意：vertical-align 推荐用 em 单位而非 px，否则缩放页面时角标会错位；也不要设 line-height，它会影响行高计算，导致段落间距异常。
真正麻烦的是数学公式或复杂排版（比如多层指数、积分上下限），那得用 MathML 或 KaTeX——<sup></sup> 和 <sub></sub> 只负责最基础、最通用的单层角标场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
