直接用<sub>和<sup>标签即可，但需注意语义正确（如H<sub>2</sub>O中仅原子数下标）、顺序规范（x<sub>i</sub><sup>2</sup>而非x<sup>2</sup><sub>i</sub>）及避免CSS重置、line-height干扰或XSS过滤导致失效。
直接用 <sub> 和 <sup> 标签就行，浏览器原生支持，不需要 CSS 或 JS；但写错位置、嵌套混乱或被全局样式覆盖，就会“看起来没效果”。
化学分子式里哪些数字必须套 <sub>
只对表示原子个数的数字用 <sub>，元素符号本身不包，括号也不包——语义错一点，读屏器和搜索引擎就全读歪了。
- H
<sub>2</sub>O：仅 “2” 是氢原子个数，O 没下标，不加<sub> - Ca(OH)
<sub>2</sub>：括号是普通字符，“2” 表示 OH 基团数量，必须紧贴括号后 - SO
<sub>4</sub><sup>2−</sup>：氧原子数 4 下标，电荷 2− 上标；减号必须用 Unicode “−”（U+2212），不能用 ASCII “-” - C
<sub>6</sub>H<sub>12</sub>O<sub>6</sub>：每个元素的原子数独立包裹，不可合并为 C<sub>6H12O6</sub>
数学幂次和下标索引用 <sup> 和 <sub> 的顺序陷阱
浏览器按 HTML 顺序渲染：先写的标签先占位，<sub> 和 <sup> 是兄弟关系，不是父子嵌套。顺序一反，结果就错。
- 正确：
x<sub>i</sub><sup>2</sup>→ 渲染为 xᵢ²（先下标 i，再上标 2） - 错误：
x<sup>2</sup><sub>i</sub>→ 渲染为 x²i（上标把 i 挤到右边） - 复合指数如 a
<sup>n+1</sup>必须整段进<sup>，不能拆成 a<sup>n</sup>+1 - log
<sub>10</sub>x：底数 10 是下标，不是上标；别写成<sup>log</sup><sub>10</sub>
<sub> 和 <sup> 渲染失效的三个高频原因
不是标签不会用，而是它们太容易被外部规则静默干掉——90% 的“没效果”问题都出在这三处。
立即学习“前端免费学习笔记（深入）”；
- 全局 CSS 重置了
vertical-align：比如 Normalize.css 或 Ant Design 默认设sup, sub { vertical-align: baseline; }，直接废掉原生偏移 - 父容器设置了
line-height: 1或font-size: 0：子元素缩放比例被压制，<sub>文字可能被压扁甚至消失 - 富文本编辑器或 CMS 的 XSS 过滤没放开
<sub>/<sup>：保存后标签被删，只剩裸数字 “2” 或 “−”
真正难搞的不是怎么写 <sup>2</sup>，而是确保它在富文本、PDF 导出、深色模式、屏幕阅读器里都不掉链子——语义一旦写进 HTML，就得一路护送到最终用户眼里。
