html原生和标签用于语义正确的上标与下标，适用于数学公式（如e=mc2）、化学式（如h2o）及单位符号；禁用作装饰性角标，需避免嵌套错误、空格干扰与转义失效。
用 <sup></sup> 和 <sub></sub> 标签实现角标与下标
HTML 原生就支持上标（角标）和下标，不需要 CSS 或 JS 就能快速渲染。关键在于语义正确：数学公式、化学式、单位符号等场景必须用 <sup></sup> 和 <sub></sub>，而不是靠 font-size + vertical-align 模拟。
常见错误是把它们当“样式标签”滥用，比如给价格加“®”用 <sup></sup> 虽然视觉上可行，但屏幕阅读器会读作“注册商标上标”，语义混乱。真正该用的场景包括：
- 数学表达式：
E = mc<sup>2</sup> - 化学式：
H<sub>2</sub>O - 单位或编号：
km<sup>2</sup>、CH<sub>4</sub>
<sup></sup> 和 <sub></sub> 的默认样式与兼容性
这两个标签在所有现代浏览器中默认有 vertical-align: super/sub 和缩小字号（通常为 80% 左右），但具体数值由浏览器 UA 样式决定，不可跨平台保证一致。例如 Chrome 和 Firefox 对 <sup></sup> 的 vertical-align 偏移量略有差异，导致多行文本中对齐微偏。
如果需要精确控制，建议最小干预式覆盖：
sup, sub {
font-size: 75%;
line-height: 0;
}
sup { vertical-align: super; }
sub { vertical-align: sub; }
注意：不要重置 line-height: normal，否则可能撑高行高；也不要设固定像素字号（如 10px），会破坏响应式缩放。
嵌套、组合与易错点
可以嵌套使用，比如同位素表示 <sup>14</sup>C，但不能写成 <sup><sub>14</sub>C</sup> —— 这会导致语义错乱且渲染异常。更常见的错误是混用空格或换行：
<sup> 2 </sup>
这种写法会在上标内容前后引入空白符，造成额外间距。正确写法是紧贴内容：<sup>2</sup>。
另外，部分 CMS 或富文本编辑器会把 <sup></sup> 自动转义为 <sup>，导致标签失效 —— 需确认输出层是否做了 HTML 实体转义。
替代方案：CSS 的 vertical-align 什么时候该用？
只有当语义不是上标/下标时才考虑 CSS。比如产品价格旁的“促销”角标：<span class="badge">新品</span>，这时用 vertical-align: top + font-size: 0.7em 更合理。强行用 <sup></sup> 会让辅助技术误判内容层级。
性能上无差别，但可访问性风险明确：WAI-ARIA 不提供对应 role，全靠标签语义传达。如果用了 <sup></sup> 却塞进按钮文字或导航链接，NVDA 或 VoiceOver 会读得非常突兀。
角标位置偏移量小、字体小、颜色常为灰色 —— 这些视觉特征是设计约定，不是 HTML 的责任。别指望只靠标签自动匹配 UI 规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
