HTML中用<sup>和<sub>标签实现上标下标，语义明确、原生支持；应优先用于化学式、数学公式、脚注等场景，避免用CSS模拟；仅允许内联内容，不可嵌套或包裹块级元素；现代浏览器兼容性好，但需注意行高、字体大小等显示细节。
HTML 里怎么写上标和下标
直接用 <sup> 和 <sub> 标签就行，不需要额外 CSS 或 JS。它们是语义明确的内联元素，浏览器原生支持，渲染稳定。
什么时候该用 <sup> 而不是 CSS 的 vertical-align: super
语义优先：化学式（H<sub>2</sub>O）、数学公式（x<sup>2</sup>）、脚注编号（参见文献<sup>1</sup>）这些有明确含义的场景，必须用 <sup>/<sub>。CSS 方式只是视觉模拟，对屏幕阅读器、SEO、复制粘贴都不友好。
- 用
<sup>后，NVDA/JAWS 会读作“上标1”，而vertical-align不触发任何语义播报 - 复制 H
<sub>2</sub>O 到纯文本编辑器，结果是 “H₂O”（如果字体支持 Unicode 下标），而 CSS 模拟会变成 “H2O” -
<sub>在 MathML 或 LaTeX 导出工具中可被识别并转换，CSS 写法则丢失信息
<sup> 和 <sub> 的常见错误写法
它们只接受**短文本或内联内容**，不能包裹块级元素，也不能嵌套自身。浏览器虽会容错渲染，但校验工具报错，且在严格模式（如 XHTML 或某些 SSR 渲染链路）下可能出问题。
- ❌ 错误：
<sup><p>文字</p></sup>——<p>是块级标签，不允许出现在<sup>里 - ❌ 错误：
<sub><sub>x</sub></sub>—— 嵌套无意义，也不符合 HTML 规范 - ✅ 正确：
<sub>CO<sub>2</sub></sub>（注意：这里外层<sub>是为了整体下标，内层是 CO₂ 中的 2；但更推荐直接写CO<sub>2</sub>，除非真有“CO₂ 整体作为下标”的特殊排版需求）
兼容性和显示细节要注意什么
所有现代浏览器都支持 <sup>/<sub>，包括 IE9+。但默认样式由浏览器决定：字体大小约 75%，垂直偏移量不统一，行高可能受影响。
立即学习“前端免费学习笔记（深入）”；
- Firefox 对
<sub>的下移量略大于 Chrome，但差异通常不影响可读性 - 如果父容器用了
line-height: 1，<sup>可能被截断，建议保留至少line-height: 1.2 - 移动端 Safari 在某些字号下会让
<sup>显得过小，可微调：sup { font-size: 0.8em; }，但别改 vertical-align —— 会破坏语义对齐基准
真正容易被忽略的是：上标下标内容一旦带空格或换行，会破坏内联流，比如 <sup>1 <br>2</sup> 会导致布局断裂。保持内容紧凑、无多余空白符，是最稳妥的做法。
