sub和sup是语义标签而非排版开关，仅在化学式原子个数、数学幂次与索引、脚注编号、离子电荷、商标符号等具明确上下标语义时必须使用；滥用或误用会破坏可访问性与语义结构。

直接说结论：sub 和 sup 不是排版开关，而是语义标签——写错地方比不用更糟，尤其在化学式、数学幂次、脚注编号这些场景里，必须用，但不能拿来调大小、改位置。

什么时候必须用 sub 和 sup？

只在内容本身携带明确的下标/上标语义时才该用，浏览器和辅助技术靠这个判断结构：

• 化学式原子个数：Hsub2O、Ca(OH)sub2（括号外下标必须套在括号后）
• 离子电荷：SOsub4sup2−（“2−”整体进 sup，减号用 U+2212 “−”，不是 ASCII “-”）
• 数学幂次与索引：xsup2、asubn、logsub10x（底数 10 是下标，不是上标）
• 脚注编号：正文sup1，对应页脚用 id="fn1" 关联，不加括号、不加点
• 商标符号：TMsup™、©sup®（年份 © 2025 不能上标，但 ® 必须紧贴主体）

sub/sup 渲染失效的三个高频原因

它们默认就生效，但项目里“看不见效果”几乎全是外部干扰：

• 全局 CSS 重置了 vertical-align：Normalize.css 或 Ant Design 等框架常设 sup, sub { vertical-align: baseline; }，直接覆盖原生 super/sub
• 父容器 line-height 过小或 font-size: 0：压制子元素缩放，导致上下标“缩没了”
• CMS 或富文本编辑器 XSS 过滤没放开 <sup>/<sub>：保存后标签被删，只剩裸文本

查是否失效，打开开发者工具看 computed 样式——确认 vertical-align 真的是 super 或 sub，而不是被意外重置。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

立即学习“前端免费学习笔记（深入）”；

顺序、嵌套与数学表达式的边界

sub 和 sup 的渲染顺序由 HTML 标签出现顺序决定，这点极易翻车：

• SOsub4sup2− → SO₄²⁻（正确）；反过来 SOsup2−sub4 → SO²⁻₄（错乱）
• asubisupn+1 → aᵢⁿ⁺¹（先下标再上标）；asupn+1subi → aⁿ⁺¹ᵢ（i 跑到整个幂次右下）
• 禁止嵌套：<sub><sup>2</sup></sub> 是非法结构，校验工具报错，渲染不可控
• 复合结构撑不住：分数、根号、∑、∫、自动缩放括号——这些一出现，就得切 MathML 或 KaTeX

最常被忽略的不是怎么写 sup，而是它一旦写进 HTML，就得一路护送到最终渲染层：CSS 别吞掉、工具别过滤掉、屏幕阅读器得读对——语义写了，就得负责到底。