HTML中和默认可渲染，但易被CSS重置（如vertical-align: baseline）覆盖；应确保其vertical-align为super/sub，避免手动设置或嵌套，适用于单层上标下标，多级需MathML或KaTeX。
HTML 里
浏览器默认会渲染 和 ，但前提是它们没被 CSS 重置掉。常见情况是全局样式里写了 vertical-align: baseline 或直接清掉了 font-size，导致上标/下标“看起来没效果”。
- 只用语义不用样式时，
x渲染为上标，2渲染为下标，无需额外 class - 若页面用了重置 CSS（比如 Normalize.css 或某些 UI 框架），检查是否覆盖了
sup/sub的默认vertical-align值（应为super/sub） - 不要套在
里再加style="vertical-align: super"—— 这绕过了语义，还可能和父元素 line-height 冲突
数学公式、化学式里用
它们只适合简单、单层的上标/下标，比如 H2O、E = mc2。一旦涉及多级（如 xyz）、对齐或大小控制，HTML 原生标签就力不从心了。
- 化学式中数字必须用
：CO2，不能写成 CO2 或用模拟 - 单位里的 “²” “³” 可用 Unicode（m²），但带变量时（如 v2）仍推荐
- 避免嵌套：
2无效，浏览器只认一层；需要多级请用 MathML 或 KaTeX
和 CSS 的 vertical-align 混用时为什么反而错位
和 本身已自带 vertical-align: super 和 vertical-align: sub，再手动加 CSS 很容易破坏行高计算，尤其在内联文本中。
- 如果设了
line-height: 1.2，而字体缩小到 75%，可能导致上下文字基线错开、行间距塌陷 - 想统一控制大小？改
sup, sub { font-size: 0.7em; }，别碰vertical-align - 和图标或 emoji 并排时，
可能抬得太高 —— 此时用display: inline-flex+align-items: baseline更稳
兼容性和可访问性上容易被忽略的点
屏幕阅读器基本都能识别 和 的语义，但前提是没被 aria-hidden="true" 或 display: none 拦截。老版本 IE 对 font-size 缩放支持弱，不过现在基本不用考虑。
- 别用
做装饰性角标（比如“NEW”徽章）—— 那该用+ CSS - PDF 导出工具（如 wkhtmltopdf）有时会丢掉
sup/sub的垂直偏移，测试时务必检查生成效果 - 如果内容来自 CMS 或用户输入，注意 XSS 过滤可能误删
标签 —— 白名单里得显式放开
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
