html中用和标签实现上标下标，语义明确、原生支持；应优先用于化学式、数学公式、脚注等场景，避免用css模拟；仅允许内联内容，不可嵌套或包裹块级元素；现代浏览器兼容性好，但需注意行高、字体大小等显示细节。

HTML 里怎么写上标和下标

直接用 <sup></sup> 和 <sub></sub> 标签就行，不需要额外 CSS 或 JS。它们是语义明确的内联元素，浏览器原生支持，渲染稳定。

什么时候该用 <sup></sup> 而不是 CSS 的 vertical-align: super

语义优先：化学式（H<sub>2</sub>O）、数学公式（x<sup>2</sup>）、脚注编号（参见文献<sup>1</sup>）这些有明确含义的场景，必须用 <sup></sup>/<sub></sub>。CSS 方式只是视觉模拟，对屏幕阅读器、SEO、复制粘贴都不友好。

• 用 <sup></sup> 后，NVDA/JAWS 会读作“上标1”，而 vertical-align 不触发任何语义播报
• 复制 H<sub>2</sub>O 到纯文本编辑器，结果是 “H₂O”（如果字体支持 Unicode 下标），而 CSS 模拟会变成 “H2O”
• <sub></sub> 在 MathML 或 LaTeX 导出工具中可被识别并转换，CSS 写法则丢失信息

<sup></sup> 和 <sub></sub> 的常见错误写法

它们只接受**短文本或内联内容**，不能包裹块级元素，也不能嵌套自身。浏览器虽会容错渲染，但校验工具报错，且在严格模式（如 XHTML 或某些 SSR 渲染链路）下可能出问题。

• ❌ 错误：<sup><p>文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></sup> —— <p></p> 是块级标签，不允许出现在 <sup></sup> 里
• ❌ 错误：<sub><sub>x</sub></sub> —— 嵌套无意义，也不符合 HTML 规范
• ✅ 正确：<sub>CO<sub>2</sub></sub>（注意：这里外层 <sub></sub> 是为了整体下标，内层是 CO₂ 中的 2；但更推荐直接写 CO<sub>2</sub>，除非真有“CO₂ 整体作为下标”的特殊排版需求）

兼容性和显示细节要注意什么

所有现代浏览器都支持 <sup></sup>/<sub></sub>，包括 IE9+。但默认样式由浏览器决定：字体大小约 75%，垂直偏移量不统一，行高可能受影响。

• Firefox 对 <sub></sub> 的下移量略大于 Chrome，但差异通常不影响可读性
• 如果父容器用了 line-height: 1，<sup></sup> 可能被截断，建议保留至少 line-height: 1.2
• 移动端 Safari 在某些字号下会让 <sup></sup> 显得过小，可微调：sup { font-size: 0.8em; }，但别改 vertical-align —— 会破坏语义对齐基准

真正容易被忽略的是：上标下标内容一旦带空格或换行，会破坏内联流，比如 <sup>1 <br>2</sup> 会导致布局断裂。保持内容紧凑、无多余空白符，是最稳妥的做法。

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