和需手动添加，仅用于化学式、数学幂次/索引、脚注编号、商标符号；失效主因是css重置vertical-align或xss过滤删标签；禁止嵌套块级元素或自身，内容须为纯内联文本。
<sub></sub> 和 <sup></sup> 不是“保存为”的产物，而是你手写或程序生成时主动插入的语义标签。浏览器不会自动把普通数字转成上下标——你得明确告诉它“这个 2 是化学式里的原子数”或“这个 n 是幂次”，它才用正确方式渲染和播报。
哪些内容必须手动套 <sub></sub> 和 <sup></sup>
只有以下几类文本才有资格用这两个标签，其他一律不许碰：
- 化学式中的原子个数：
H<sub>2</sub>O、SO<sub>4</sub><sup>2−</sup>（注意电荷用 Unicode 减号 U+2212，不是 ASCII-） - 数学幂次或索引：
x<sup>2</sup>、a<sub>n</sub>、log<sub>10</sub>x - 脚注编号：
参见文献<sup>3</sup>（不加括号、不加点、不加空格） - 商标符号：
TM<sup>™</sup>（™是符号，不是年份）
别写 ©<sup>2025</sup> 或 <sub>用户协议</sub> —— 年份和说明文字没有下标/上标语义，读屏器会念成“版权 上标 二零二五”，干扰理解。
<sub></sub> 和 <sup></sup> 渲染失效的真正原因
它们默认就生效，所谓“没效果”几乎全是外部干扰：
- 全局 CSS 重置了
vertical-align：比如 Normalize.css 或 Ant Design 的 reset 会设sup, sub { vertical-align: baseline; }，直接覆盖浏览器原生行为 - 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放被压制 - 富文本编辑器或 CMS 的 XSS 过滤没放开
<sup></sup>/<sub></sub>，保存后标签被删 - 手动给
<sup></sup>加style="vertical-align: super"—— 多此一举，还可能和行高冲突
查是否失效最直接的方法：打开开发者工具，看 computed 样式里 vertical-align 是不是 super 或 sub，而不是 baseline。
嵌套顺序和内容限制要盯紧
HTML 规范只允许内联内容，不能包裹块级元素，也不支持嵌套自身：
- ❌ 错误：
<sup><p>文字</p></sup>——<p></p>是块级标签，不允许出现在<sup></sup>里 - ❌ 错误：
<sub><sub>x</sub></sub>—— 嵌套无意义，校验工具报错，SSR 渲染链路可能出问题 - ✅ 正确：
SO<sub>4</sub><sup>2−</sup>（先<sub></sub>后<sup></sup>，浏览器按位置排布） - ⚠️ 注意：
<sup>12</sup>里不能有空格或换行，否则破坏内联流，布局容易断裂
真正容易被忽略的是：上下标内容一旦带空格或换行，会破坏内联流；而更隐蔽的问题是，很多 CMS 或 Markdown 解析器默认不放行 <sub></sub>/<sup></sup>，需要显式配置白名单。写完别光看页面效果，一定进开发者工具确认 computed 样式和 DOM 结构是否如你所写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
