html标签如何表示上标下标_sup和sub标签用法【说明】

HTML中用<sup>和<sub>标签实现上标下标，语义明确、原生支持；应优先用于化学式、数学公式、脚注等场景，避免用CSS模拟；仅允许内联内容，不可嵌套或包裹块级元素；现代浏览器兼容性好，但需注意行高、字体大小等显示细节。HTML 里怎么写上标和下标直接用 <sup> 和 <sub> 标签就行，不需要额外 CSS 或 JS。它们是语义明确的内联元素，浏览器原生支持，渲染稳定。什么时候该用 <sup> 而不是 CSS 的 vertical-align: super语义优先：化学式（H₂O）、数学公式（x²）、脚注编号（参见文献¹）这些有明确含义的场景，必须用 <sup>/<sub>。CSS 方式只是视觉模拟，对屏幕阅读器、SEO、复制粘贴都不友好。用 <sup> 后，NVDA/JAWS 会读作“上标1”，而 vertical-align 不触发任何语义播报复制 H₂O 到纯文本编辑器，结果是 “H?O”（如果字体支持 Unicode 下标），而 CSS 模拟会变成 “H2O”<sub> 在 MathML 或 LaTeX 导出工具中可被识别并转换，CSS 写法则丢失信息<sup> 和 <sub> 的常见错误写法它们只接受**短文本或内联内容**，不能包裹块级元素，也不能嵌套自身。浏览器虽会容错渲染，但校验工具报错，且在严格模式（如 XHTML 或某些 SSR 渲染链路）下可能出问题。? 错误：^{<p>文字</p>} —— <p> 是块级标签，不允许出现在 <sup> 里? 错误：_{_x} —— 嵌套无意义，也不符合 HTML 规范? 正确：_CO₂（注意：这里外层 <sub> 是为了整体下标，内层是 CO? 中的 2；但更推荐直接写 CO₂，除非真有“CO? 整体作为下标”的特殊排版需求）兼容性和显示细节要注意什么所有现代浏览器都支持 <sup>/<sub>，包括 IE9+。但默认样式由浏览器决定：字体大小约 75%，垂直偏移量不统一，行高可能受影响。 Murf AI AI文本转语音生成工具