和不是数学公式方案，因其仅为文本排版标签，缺乏运算符对齐、括号自适应、字号缩放等数学布局能力，且多层嵌套、双标渲染不可靠。
仅用 <sub></sub> 和 <sup></sup> 标签无法正确显示数学公式，它们只支持简单上下标，不处理运算符对齐、括号自适应、分数、根号等核心需求。
为什么 <sub></sub> 和 <sup></sup> 不是数学公式方案
这两个标签本质是纯文本排版工具，语义上仅表示“下标文字”或“上标文字”，浏览器不会调整字间距、行高、基线位置来适配数学布局。比如 E=mc<sup>2</sup> 能凑合，但 a<sub>n+1</sub> = a<sub>n</sub><sup>2</sup> + 1 会因括号和加号未参与对齐而显得错乱；更不用说 <sup>a</sup><sub>b</sub> 这种双标——HTML 规范不保证叠加渲染效果，各浏览器行为不一致。
常见错误现象：
- 上下标与前后字符粘连，如
H<sub>2</sub>O中 “2” 紧贴 H，缺乏数学所需的横向留白 - 多层嵌套失效：
x<sup>y<sup>z</sup></sup>在部分浏览器中第二层<sup></sup>被忽略 - 无法控制字号缩放比例（数学标准要求上标为默认字号的 70% 左右，
<sup></sup>固定为约 80%，且不可调）
真正在网页显示公式该用什么
生产环境必须用专为数学设计的方案，目前只有两类可靠选择：
-
MathML：W3C 标准，语义准确，原生支持（Firefox/Chrome/Safari 均已支持大部分特性），但手写繁琐，需配合
<math></math>、<msup></msup>、<msub></msub>等标签，例如：<math><msub><mi>a</mi><mn>n</mn></msub><mo>=</mo><msup><mn>2</mn><mi>n</mi></msup></math>
-
LaTeX 渲染库（推荐 MathJax 或 KaTeX）：写法直观，如
$$a_n = 2^n$$，由 JS 库解析并生成高质量 HTML+CSS 或 SVG。KaTeX 更快、更轻量，适合静态内容；MathJax 兼容性更强，支持更多 LaTeX 扩展。
使用场景差异：
- 若项目已用 Vue/React，优先选 KaTeX 的组件封装（如
react-katex），避免全局脚本冲突 - 若需打印 PDF 或服务端渲染（SSR），MathJax 的 Node 版本（
mathjax-node）仍可用，但 KaTeX 的katex.renderToString()更稳定 - 不要在 Markdown 中混用
<sub></sub>和$$...$$——解析器可能提前截断，导致公式渲染失败
什么时候可以勉强用 <sub></sub>/<sup></sup>
仅限于非数学场景的轻量标注，且接受视觉妥协：
- 化学式：
H<sub>2</sub>O、CO<sub>2</sub>（注意：离子电荷应写作Ca<sup>2+</sup>，不是Ca<sup>2</sup><sup>+</sup>） - 单位下标：
m<sub>s</sub>（毫秒）、dB<sub>m</sub> - 避免用于任何含运算符（
+、=、\sum）、括号、分式、希腊字母的表达式
性能与兼容性提醒：这些标签无渲染开销，但若强行堆砌实现伪公式（如用 <span style="font-size:0.7em;position:relative;top:-0.5em"></span> 模拟上标），会导致可访问性（a11y）丢失、屏幕阅读器误读、缩放时错位。
真正复杂的公式排版，绕不开语义化标记（MathML）或专业渲染器（KaTeX/MathJax）。把 <sub></sub> 当公式工具，就像用记事本写操作系统——能动，但不该动。
