必须用和仅当内容具明确语义：化学式（h2o）、数学幂次（x2）、脚注编号（1）、商标符号（tm™）；视觉需求应优先用css，数学公式需mathml或katex。
HTML 里用 <sup></sup> 和 <sub></sub> 就能加最轻量、语义最准的上标下标，不需要 CSS 或 JS —— 但乱用会破坏可访问性，数学公式里尤其容易出错。
什么时候必须用 <sup></sup> 和 <sub></sub>？
只有内容本身具有明确语义时才该用：化学式（H<sub>2</sub>O）、数学幂次（x<sup>2</sup>）、脚注编号（见注释<sup>1</sup>）、商标符号（TM<sup>™</sup>）。如果只是“视觉上想小一点偏上”，比如单位缩写 cm<sup>3</sup>，其实该用 <span></span> + CSS，因为立方厘米是单位整体，不是“3”在上标位置才有意义。
常见错误现象：<sup>2024</sup> 写年份、<sub>用户协议</sub> 做小字说明 —— 这些既无语义，又会让屏幕阅读器读成“上标二零二四”，干扰理解。
<sup></sup> 和 <sub></sub> 的默认样式和兼容性
所有现代浏览器都原生支持，无需 polyfill。它们默认是：
- 字号约为主文本的 75%
-
<sup></sup>垂直偏移约字体高度的 0.3em（上移） -
<sub></sub>垂直偏移约字体高度的 0.2em（下移） - 行高不受影响（不会撑开段落）
但注意：这些偏移值是 UA stylesheet 定义的，不能跨浏览器精确一致；若需像素级对齐（比如和 SVG 图标并排），得用 vertical-align 覆盖。
数学公式里为什么不能只靠 <sup></sup>/<sub></sub>？
像 a<sup>n</sup> + b<sup>m</sup> = c<sup>k</sup> 这种简单幂次可以，但遇到复合结构就崩了：
-
<sub><sup>2</sup></sub>是非法嵌套，HTML 不允许<sub></sub>直接包<sup></sup> -
x<sup>2</sup><sub>i</sub>会渲染成“x²i”，而非“xᵢ²”，顺序和位置全错 - 分数、根号、求和号等根本无法表达
真要写数学公式，优先用 MathML（<math></math>）或 KaTeX/TeX 语法渲染，<sup></sup>/<sub></sub> 只适合孤立、单层、非运算型标记。
替代方案：什么时候该用 CSS 而不是标签？
当目标是“视觉效果”而非“语义角色”时，CSS 更可控也更安全：
- 单位缩写：
<span style="font-size: 0.8em; vertical-align: super;">3</span>（比<sup></sup>更易统一字体比例） - 自定义偏移：
vertical-align: -0.2em精确控制位置 - 响应式调整：配合
@media动态改font-size和vertical-align - 避免语义污染：比如按钮里的“新NEW”标签，用
<span aria-hidden="true"></span>包起来更妥当
真正难处理的是混合场景——比如化学式 <sub>2</sub><sup>−</sup> 表示带负电荷的双原子离子，既要语义正确，又要排版紧凑。这时候得手动调 line-height 或用 transform: translateY() 微调，纯标签搞不定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
