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