必须用<sup>和<sub>实现上下标以保留语义：屏幕阅读器可读、纯文本粘贴保留Unicode、SEO可识别；化学式如H₂O、SO₄²⁻需分层标注，禁嵌套；数学复杂公式应改用MathML或KaTeX；CSS仅调font-size和vertical-align（em单位），禁设line-height。
用 <sup> 和 <sub> 标签实现上下标，不是 CSS 模拟
必须用 <sup> 和 <sub>，而不是 vertical-align: super 或 font-size 手动调位置。前者带语义：屏幕阅读器会读“上标2”“下标4”，复制到纯文本时能保留 Unicode 下标字符（如 H₂O → “H₂O”），SEO 也能识别上下文；后者只是视觉欺骗，粘贴出来就是 H2O，辅助技术完全无视。
常见误用场景包括：单位写成 m<sup>2</sup> 正确，但写成 m<span style="vertical-align:super;font-size:0.75em;">2</span> 就丢语义；脚注编号用 参见文献<sup>1</sup> 合理，用 CSS 模拟则无法被引用解析工具识别。
<sub> 写化学式时数字不能脱离元素符号
化学式中下标数字必须紧贴对应元素，且不能把整个分子式包进一个 <sub>。比如 H₂O 要写成 H<sub>2</sub>O，不是 <sub>H2O</sub>，更不是 H<sub>2</sub><sub>O</sub>（O 不是下标）。
多原子基团需分层处理：SO₄²⁻ 应写为 SO<sub>4</sub><sup>2−</sup>，其中 4 是下标（原子个数），2− 是上标（电荷）。不要写成 SO<sub>4<sup>2−</sup></sub> —— 这属于嵌套 <sub> 里套 <sup>，虽浏览器可能渲染出来，但语义混乱，校验失败，且在 SSR 或严格 XHTML 环境下会出错。
立即学习“前端免费学习笔记（深入）”；
- 错误：
CO<sub>2</sub><sub>3</sub>（两个独立<sub>，中间无连接） - 错误：
<sub>CO2</sub>（把字母和数字一起下标，违背化学排版惯例） - 正确：
CO<sub>2</sub>、NH<sub>4</sub><sup>+</sup>、PO<sub>4</sub><sup>3−</sup>
数学公式里 <sup> 和 <sub> 只负责单层，别硬撑复杂表达式
<sup> 和 <sub> 是为简单幂次、脚标、单位设计的，比如 x<sup>2</sup>、a<sub>n</sub>、cm<sup>−3</sup>。遇到多层（a<sup>b<sup>c</sup></sup>）、积分上下限、分式或带括号的指数（(x+y)<sup>2</sup>），视觉上可能勉强可读，但语义已失效，渲染也容易错位。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
例如 E=mc<sup>2</sup> 没问题，但 log<sub>10</sub>(x) 中的括号如果也想变小，<sub> 无法控制括号大小，强行套 log<sub>10</sub><sup>(x)</sup> 会把括号变成上标，彻底错误。
此时应换 MathML 或 KaTeX：它们支持完整数学语义，能正确导出、缩放、语音朗读。硬用 <sup>/<sub> 写 ∑<sub>i=1</sub><sup>n</sup> 类似结构，不仅难维护，还会在高 DPI 屏幕或缩放时出现基线偏移。
微调样式只改 font-size 和 vertical-align，别碰 line-height
浏览器默认给 <sup> 设了 font-size: 75% 和 vertical-align: super，<sub> 类似但用 sub。如需统一调整，CSS 只该覆盖这两个属性：
sup, sub {
font-size: 65%;
vertical-align: 0.25em;
}
注意：vertical-align 必须用 em 单位（不是 px），否则页面缩放时角标会漂移；line-height 绝对不能设，它会破坏段落整体行高，导致上下文文字挤压或截断。另外，<sup> 和 <sub> 之间别加空格，mol<sup>-1</sup>s<sup>-1</sup> 正确，mol <sup>-1</sup> s<sup>-1</sup> 会在单位间留明显间隙。
真正容易被忽略的是嵌套顺序：要加粗 Eg，写 <strong>E<sub>g</sub></strong>，而不是 <sub><strong>g</strong></sub> —— 后者会让 <sub> 的样式继承异常，字体大小和对齐都可能错乱。
