和是语义标签，仅用于数学幂次、化学式、脚注编号等有明确含义的场景；失效主因是css重置vertical-align、line-height过小或xss过滤删标签。

<sup></sup> 和 <sub></sub> 是 HTML 原生标签，直接写就能用，不需要 CSS 或 JS。但多数“没效果”的问题，其实不是标签不会渲染，而是被样式或上下文悄悄破坏了。

为什么<sup></sup>和<sub></sub>突然不显示偏移？

它们默认就生效，失效通常是因为外部 CSS 强行重置了关键属性：

• vertical-align: baseline —— 这是最常见的罪魁，比如 Normalize.css、Ant Design 或某些 UI 框架会全局设这个值，直接废掉上/下标位置
• line-height: 1 或 font-size: 0 在父容器上 —— 导致子元素缩放比例失效，<sub></sub> 文字被压扁甚至看不见
• 富文本编辑器或 CMS 的 XSS 过滤未放行这两个标签 —— 保存后只剩裸数字，标签被删

化学式里数字怎么包才不算错？

语义必须精准，不能图省事合并或漏包：

• H₂O：只对氢原子数 2 用 <sub></sub>，氧无下标，不写 H<sub>2</sub>O<sub>1</sub>
• Ca(OH)₂：括号外的 2 表示 OH 基团数量，括号本身不能进 <sub></sub>
• SO₄²⁻：原子数 4 用 <sub></sub>，电荷 2− 用 <sup></sup>，且减号必须是 Unicode U+2212（−），不是 ASCII 连字符（-）
• C₆H₁₂O₆：每个元素的原子数单独包裹，12 是 H 的专属下标，不可省略

能嵌套吗？什么时候该换 MathML？

<sup></sup> 和 <sub></sub> 允许相邻（如 SO<sub>4</sub><sup>2−</sup>），但禁止嵌套自身：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• ❌ 错误：<sup><sup>2</sup></sup> —— 浏览器不认多层，语义混乱
• ❌ 错误：<sub><p>x</p></sub> —— <p></p> 是块级元素，不允许出现在内联标签里
• ✅ 正确：x<sub>i</sub><sup>2</sup> → 渲染为 xᵢ²（先下标再上标）
• ⚠️ 复杂场景（如多层指数、积分上下限、对齐要求高）—— 别硬调 CSS，直接切到 MathML 或 KaTeX

真正容易被忽略的，是语义边界：©²⁰²⁵ 看起来像版权年份上标，但读屏器会念成“版权 上标 二零二五”，这是对辅助技术的干扰；<sup></sup> 不是“小一号字”的快捷键，它只属于数学指数、电荷、氧化态、同位素质量数这些有明确含义的场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！