HTML原生<sup>和<sub>标签语义明确、兼容性好，适用于脚注、化学式、数学幂次等有逻辑上标/下标含义的场景；误用CSS模拟会丢失语义、影响可访问性和复制粘贴。
用 <sup> 和 <sub> 标签最直接实现
不需要 CSS 或 JavaScript，HTML 原生就支持上角标和下角标——<sup> 画上标（比如化学式 H<sub>₂O 中的 “2”），<sub> 画下标（比如数学公式 x² 中的 “2”）。这两个标签语义明确、浏览器兼容性极好，从 IE6 到现代 Chrome 都能正常渲染。
常见错误是误用 <font> 加 size 或硬调 style="vertical-align: super"，既冗余又丢失语义。实际只需：
<p>水的化学式是 H<sub>2</sub>O，平方用 x<sup>2</sup></p>
什么时候该用 <sup> 而不是 CSS 的 vertical-align
当内容有明确语义时，必须用 <sup>/<sub>：比如脚注编号（<a href="#fn1">¹</a>）、化学式、数学幂次、版本号（v2.1<sub>beta</sub>）。这些不是“看起来小一点偏上”，而是“逻辑上属于上标范畴”。
用 CSS 强行模拟会带来问题：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器无法识别语义，视障用户听不到“这是上标”
- 复制粘贴时可能丢掉格式（比如复制 “x²” 变成 “x2”）
- 打印或缩放时 vertical-align 容易错位
<sup> 和 <sub> 的嵌套与限制
它们可以嵌套（比如 <sup>a<sub>b</sub></sup>），但极少需要。更常见的是被误用于非角标场景，比如想把文字“变小+上移”做装饰效果——这不属于角标语义，应该用 <span> + CSS。
注意几个边界情况：
- 空格或换行在
<sup>内部会被压缩，写<sup> </sup>不会显示空白 - 不能包裹块级元素（如
<p>、<div>），否则 HTML 验证失败 - 默认字体大小约是父级的 75%，不同浏览器略有差异，如需统一可加
font-size: 0.8em
遇到显示异常先查这三件事
如果上/下标没对齐或大小不对，别急着写 CSS：
- 确认没把
<sup>写成<supe>或漏了闭合标签（</sup>） - 检查父容器是否设置了
line-height过小，挤压了角标垂直空间 - 留意字体本身不支持上下标字形（尤其某些中文字体），此时数字或字母仍正常，但特殊符号（如 ⁰¹²³）可能回退到系统默认字体
真正要处理复杂排版（比如多层指数、分数形式的角标），就得换 MathML 或 KaTeX，<sup> 和 <sub> 就是为简单、标准的单层角标设计的——够用，别超纲。
