和是语义标签，用于化学式（如h2o）、数学表达式（如x2）、脚注及商标符号等有明确上下标含义的场景；禁用css模拟，因其丢失语义、损害可访问性且增加维护成本。
<sub></sub> 和 <sup></sup> 是语义标签，不是样式开关。浏览器默认渲染它们，但效果常被 CSS 重置掉——比如全局设置了 vertical-align: baseline 或清空了 font-size，就会让下标“不下去”、上标“不上来”。
什么时候必须用 <sub></sub> 和 <sup></sup>
仅当内容本身携带明确的下标/上标语义时才用，比如：
- 化学式：
H<sub>2</sub>O、CO<sub>2</sub>—— 数字是分子中原子个数，不能写成CO2或靠font-size模拟 - 数学表达式：
x<sup>2</sup>、a<sub>n</sub>—— 上标是幂次，下标是序列索引，语义不可替换 - 脚注引用：
参见文献<sup>3</sup>—— 屏幕阅读器会读作“上标 3”，辅助技术依赖这个 - 版权与商标：
©<sup>2025</sup>、MyApp<sup>®</sup>—— 不是装饰，是法律符号的组成部分
为什么不用 CSS 模拟上下标
用 span + vertical-align: super 看似能“实现效果”，但会丢掉三层关键信息：
- 语义：搜索引擎和结构化数据提取器无法识别这是指数还是普通小字
- 可访问性：屏幕阅读器不会特别提示“这是上标”，用户可能误读为“x 2”而非“x 平方”
- 维护成本：一旦设计改了字号或行高，所有手动
transform: translateY()都得重调，而原生<sup></sup>只需改一次sup { font-size: 0.7em }
<sub></sub> 和 <sup></sup> 容易被忽略的渲染陷阱
它们默认行为稳定，但以下几处极易出问题：
- 重置 CSS 干扰：Normalize.css 或某些 UI 框架会把
sup, sub { vertical-align: baseline }，直接覆盖原生super/sub值 - 行高塌陷：若父容器设了
line-height: 1.2，而<sup></sup>字体缩到 75%，可能导致上下行文字基线错位 - PDF 导出失效：wkhtmltopdf 等工具常忽略
vertical-align偏移，生成的 PDF 里<sup>2</sup>变成平排的 “2” - 用户输入过滤：CMS 或富文本编辑器的 XSS 白名单若没显式放开
<sup></sup>和<sub></sub>，内容一保存就丢标签
真正麻烦的从来不是怎么写 <sup>2</sup>，而是确保它在各种上下文里不被 CSS 吞掉、不被工具忽略、不被辅助技术跳过——语义一旦写进 HTML，就得一路护送到最终渲染层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
