应使用和标签标记语义化上下标：化学式中原子个数、数学中幂次或索引必须准确包裹，避免css模拟，确保可访问性与专业性。

直接用 <sub></sub> 和 <sup></sup> 标签，别套 CSS 模拟——它们不是视觉开关，而是语义标记。化学式里的数字表示原子个数，数学中的上标是幂次或索引，这些信息必须让浏览器、搜索引擎和读屏软件准确识别。

化学分子式：每个下标数字单独包裹

下标必须严格对应原子数量，不能合并或遗漏。例如：

• H₂O：氢原子数为 2，氧无下标，不写 H₂O₁
• Ca(OH)₂：括号外的 ₂ 表示两个 OH 基团，不是 O₂H₂
• C₆H₁₂O₆：12 是整体下标，写成 C₆H₁₂O₆，而非 H₁₂

数学幂运算：上标只用于真正具有指数语义的部分

幂次、序数、单位升幂等才用 <sup></sup>；加减乘除、字母变量本身不参与上下标。例如：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• x² + y²：正确，两个独立平方项
• a_n+1：仅当整个 “n+1” 是序列下标时才合法；若只是 a_n + 1，就该分开写
• (A + B)²：括号整体作为底数，上标属于整个表达式，语义清晰

避开常见语义陷阱

误用会破坏可访问性与专业性：

• ©²⁰²⁵ 是错的——年份不是上标语义，应写作 © 2025
• CO₂₃ 不合法——这是 CO₂₃，不是 CO₂ 和 CO₃ 的混合，应根据实际分子式判断
• 不用 vertical-align: super 替代 <sup></sup>：CSS 只改样式，不传语义，读屏器会念成 “x 2”，而非 “x 平方”

兼容性与渲染微调

标签本身 IE6 起全支持，但默认样式可能被 CSS 重置干扰：

• 检查是否全局设置了 sup, sub { vertical-align: baseline }，这会让上下标失效
• 如需统一缩放，可加轻量样式：sup, sub { font-size: 0.75em; line-height: 0; }
• PDF 导出工具（如 wkhtmltopdf）可能忽略偏移，关键文档建议额外标注说明

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