sub和sup标签专用于化学式与数学幂运算的语义化标记：化学式原子个数用sub，幂指数用sup，允许合理嵌套如so₄²⁻和¹⁴c，禁用css模拟以保障可访问性。
Sub（下标）和 Sup（上标）标签是 HTML5 中专用于表示化学式与数学幂运算的语义化元素，用对了能兼顾可读性、无障碍支持和样式可控性，关键在于语义准确、嵌套合理、避免滥用。
化学分子式：用 sub 标签表达原子个数
化学式中元素右下角的数字表示该原子的个数，属于典型的下标场景，应严格使用 <sub></sub> 包裹。注意元素符号本身不用 sub，只包裹数字或括号后的下标。
- H2O：氢原子个数为 2，O 无下标，不加 sub
- Ca(OH)2：括号外的 2 表示整个 OH 基团出现两次，必须套在括号整体之后，写作
Ca(OH)<sub>2</sub> - CH3CH2OH：多个独立下标需分别包裹，不可合并为
CH<sub>3CH2</sub>OH
数学幂运算：用 sup 标签表达指数
幂运算中的指数（如 x²、eiπ）属于标准上标语义，应使用 <sup></sup>。注意区分“幂”与“编号”“商标”等非数学上标场景——后者不应使用 sup，而应靠 CSS 实现视觉效果。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- x2 + y2 = z2：每个指数独立包裹，保持语义清晰
- 10−3：负号是指数的一部分，应整体置于 sup 内，写作
10<sup>−3</sup>（推荐用 Unicode 减号 “−” U+2212，而非短横 “-”） - an+1：含运算符的复合指数，全部放入 sup，如
a<sup>n+1</sup>
组合与嵌套：处理复杂表达式
实际公式常需 sub 与 sup 共存（如离子电荷、同位素标记），此时允许合法嵌套，但层级不宜过深。优先保证逻辑顺序：先写主体，再按位置添加 sub/sup。
- 硫酸根离子：SO42− → 先写 SO4，再对整个基团加电荷上标：
SO<sub>4</sub><sup>2−</sup> - 碳-14：14C → 质量数在左上角，用 sup 包裹数字，紧邻元素符号：
<sup>14</sup>C - 避免
<sub>H<sup>+</sup></sub>这类错误嵌套——H⁺ 是氢离子，+ 是电荷上标，H 本身无下标，正确写法是 H+
样式与可访问性提醒
sub 和 sup 默认有浏览器内置样式（垂直偏移 + 字号缩小），一般无需额外 CSS。若需微调，建议用相对单位（如 vertical-align: sub; font-size: 75%）并确保缩放后仍清晰。更重要的是：屏幕阅读器会识别 sub/sup 的语义，读作“H 下标 2”或“x 上标 2”，所以不要用 CSS 模拟上下标（如 span { transform: translateY(...) }），否则丧失语义和可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
