HTML中<sup>和<sub>仅作视觉位移，非数学排版工具：须严格闭合、顺序正确（如a<sub>n</sub><sup>2</sup>），禁嵌套，电荷用Unicode减号；分数、根号等需KaTeX/MathML。
用 <sup> 和 <sub> 写化学式或简单幂次，顺序和闭合必须严格
写 H<sub>2</sub>O 没问题，但 H<sub>2O</sub> 会把整个 “2O” 当作下标，渲染成 H₂O（错乱）；SO<sub>4</sub><sup>2−</sup> 是正确写法，而 SO<sub>4</sub><sup>2</sup><sup>−</sup> 会导致减号脱离上标位置。常见错误包括：
-
<sub>或<sup>标签没闭合，后续所有文本被拉低/抬高 - 离子电荷如
2−必须用 Unicode 减号（U+2212），不是 ASCII 连字符-，否则显示为 “2-” 而非 “2−” -
Ca<sup>2+</sup>正确，Ca<sup>2</sup>+</sup>是语法错误，浏览器直接忽略第二个</sup>
<sup> 和 <sub> 的嵌套与顺序决定数学含义
浏览器按标签出现顺序逐层定位，x<sub>i</sub><sup>2</sup> 渲染为 xᵢ²（i 是下标，整体平方），而 x<sup>2</sup><sub>i</sub> 渲染为 x²ᵢ（先抬高再下拉，“i” 跑到 “2” 右下角）。这不是 bug，是 HTML 渲染模型的固有行为。所以：
- 索引优先、幂次后置：写
a<sub>n</sub><sup>2</sup>，不写a<sup>2</sup><sub>n</sub> - 避免
<sub><sup>...</sup></sub>或<sup><sub>...</sub></sup>—— 语义无效，渲染不可控 - 复合符号如
n+1必须包在同一个<sup>里：a<sup>n+1</sup>，不能拆成a<sup>n</sup>+1
哪些数学结构根本不能靠 <sup>/<sub> 实现
<sup> 和 <sub> 是位移标签，不是排版引擎。它们不缩放字号、不调整水平偏移、不处理基线对齐。以下场景一写就翻车：
- 分数：
x<sup>1/2</sup>显示为 “x¹/²”，斜杠不会变小，分母不上抬 - 根号、求和号、积分号：
<sup>∑</sup>无意义，∑ 本身不是上标内容 - 负指数对齐：e<sup>−x</sup> 中的 “−” 若用 ASCII 减号，会比数字低一截；必须用 U+2212
- 屏幕阅读器读作 “x sub i sup 2”，而非 “x i squared”，无障碍支持弱
CSS 重置或富文本编辑器常让 <sup>/<sub> 失效
标签本身没问题，但实际项目中“看不见效果”几乎全是外部干扰：
立即学习“前端免费学习笔记（深入）”；
- Normalize.css 或 Ant Design 等 UI 库默认设
sup, sub { vertical-align: baseline; }，直接覆盖浏览器原生行为 - 父容器
line-height: 1或font-size: 0会压制子元素缩放 - Obsidian / Notion / Typora 等编辑器默认支持，但某些 CMS 或富文本组件（如 TinyMCE）默认过滤
<sup>标签，需手动白名单放开 - 别给
<sup>加style="vertical-align: super"—— 多余且易冲突，浏览器已内置该值
真正需要公式排版时，<sup>/<sub> 只是临时补丁。一旦出现分式、自动括号、多行对齐或导出 PDF 需求，就得切到 KaTeX 或 MathML —— 它们处理的是数学语义，不是视觉位移。
