必须用和标签处理数学幂次、化学式、脚注编号、单位等具明确语义的内容，因其保障可访问性、seo和语义正确；css模拟仅视觉有效，会丢失语义且损害辅助技术识别。

什么时候必须用 <sup></sup> 和 <sub></sub>，而不是 CSS 模拟

当内容本身具有语义——比如数学幂次、化学式、脚注编号、单位（如 cm²、mol_s⁻¹）——就必须用 <sup></sup> 和 <sub></sub>。屏幕阅读器能识别它们，搜索引擎也能理解上下文；而用 vertical-align: super 或 font-size 手动模拟，只是“看起来像”，实际是普通文本，语义丢失，可访问性降级。

<sup></sup> 和 <sub></sub> 的典型错误写法

常见问题不在标签本身，而在嵌套和空格处理：

• 别嵌套：<sup>x<sup>2</sup></sup> 是非法语义（上标里的上标），应改为 x<sup>2</sup>
• 别加空格：mol <sup>-1</sup> s<sup>-1</sup> 渲染后会有明显间隙，正确写法是 mol<sup>-1</sup>s<sup>-1</sup>
• 别和 <strong></strong> 等混用顺序错：应写 <strong>E<sub>g</sub></strong>，而非 <sub><strong>g</strong></sub>，否则样式继承异常

微调角标样式时只改这两个属性

浏览器默认给 <sup></sup> 设了 font-size: 75% 和 vertical-align: super，<sub></sub> 类似但用 sub。如需统一调整，CSS 只该改：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

sup, sub {
  font-size: 65%;
  vertical-align: 0.25em;
}

注意：vertical-align 必须用 em 单位（不是 px），否则缩放页面时角标会偏移；也别碰 line-height，它会破坏段落行高。

复杂公式别硬撑——<sup></sup>/<sub></sub> 只负责单层

<sup></sup> 和 <sub></sub> 是为简单、通用场景设计的：单层指数（a<sup>2</sup>）、单层下标（H<sub>2</sub>O）、脚注编号（见注<sup>1</sup>）。遇到多层（如 a<sup>b<sup>c</sup></sup>）、积分上下限、分式或矩阵，就得换 MathML 或 KaTeX——这时候硬套 <sup></sup> 不仅难读，还会让渲染错乱。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！