必须用和标签实现上标下标，因其语义明确、原生支持、读屏器可识别；适用于数学幂次、化学式、脚注等场景，禁用嵌套与空格，微调仅限font-size和vertical-align。
用
HTML 原生就支持上角标和下角标，不需要 CSS 或 JS——直接用 和 标签就行。它们语义明确、浏览器兼容性好（从 IE6 到最新 Chrome 都支持），且默认样式就是缩小+偏移，开箱即用。
什么时候该用 vertical-align
语义优先：如果内容本身是数学指数（如 x2）、化学式（H2O）、脚注编号（见注1）或单位（cm2），必须用 /；仅靠 CSS 模拟会丢失可访问性（屏幕阅读器无法识别）和 SEO 语义。
-
适合：幂运算（210→ 2¹⁰）、版权符号（©®）、脚注标记 -
适合：化学式（H2O）、下标变量（vinitial）、音标（IPA 中的tʃ） - 别用
vertical-align: super替代：它只是视觉模拟，没有语义，且在不同字体下偏移量不稳定
常见错误：嵌套、空格、与内联元素混用
容易出问题的地方不是标签本身，而是上下文处理不当：
- 不要在
里再套或：浏览器虽不报错，但语义混乱（比如x2是“x 的上角标再上角标”，非标准写法） - 避免在
前后加空格：HTML 会把空格当普通文本渲染，导致角标位置错位（例如mol -1 s-1比mol-1s-1多出多余间隙） - 跟
、等内联元素混用时，顺序影响样式继承：建议先包裹语义结构，再加强调，如Eg，而非g
需要微调样式时，只改 font-size 和 vertical-align
浏览器对 默认设为 font-size: 75% 和 vertical-align: super， 类似但用 sub。如需统一调整（比如让所有上角标更小或更高），用 CSS 即可：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
sup, sub {
font-size: 65%;
vertical-align: 0.25em;
}
注意：vertical-align 推荐用 em 单位而非 px，否则缩放页面时角标会错位；也不要设 line-height，它会影响行高计算，导致段落间距异常。
真正麻烦的是数学公式或复杂排版（比如多层指数、积分上下限），那得用 MathML 或 KaTeX—— 和 只负责最基础、最通用的单层角标场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
