html的仅作视觉修饰，无法正确排版数学公式；mathml的标签才是语义正确、支持分数根号嵌套等专业排版的标准方案。
纯靠 <sup></sup>、<sub></sub>、<u></u> 这类 HTML 格式化标签，只能应付极简数学表达（比如 a² + b₂ = c），无法正确排版分数、根号、上下标嵌套、运算符间距等——它不是数学排版工具，只是视觉修饰层。
为什么<sup></sup>和<sub></sub>不能当数学公式用
它们只控制单个字符的垂直偏移，不处理语义、对齐、缩放或间距逻辑。比如 x<sub>i</sub><sup>2</sup> 渲染为 xᵢ²，但指数 2 和下标 i 的基线不一致；写 <sup>a/b</sup> 不会变成上标里的分数，只会把整个 "a/b" 往上提。
- 不识别运算符：+、=、∑ 等不会自动加空格，
<sup>a</sup>+<sup>b</sup>紧贴着显示 - 不支持嵌套深度：
<sup><sub>n</sub></sup>在多数浏览器里被忽略或错位 - 无法控制字体样式：变量该斜体、数字该正体、运算符该等宽——这些都得手动
style硬调，且跨浏览器表现不一 - 无障碍支持差：屏幕阅读器读不出“x 的 i 次方”，只读 “x i 2”
<math></math> 是唯一语义正确、可扩展的方案
MathML 是 HTML5 原生数学标记标准，<math></math> 标签及其子元素（如 <mi></mi>、<mfrac></mfrac>、<msqrt></msqrt>）明确区分变量、数字、运算符、分数结构，浏览器或渲染库据此做专业排版。
-
<mi>x</mi><mo>+</mo><mn>1</mn>→ 自动给+加左右间距，x斜体，1正体 -
<mfrac><mi>a</mi><mi>b</mi></mfrac>→ 分子分母自动居中、分数线长度随内容伸缩 -
<msup><mi>x</mi><mn>2</mn></msup>→ 指数位置精准，支持多层嵌套（如<msup><mi>x</mi><mrow><mi>i</mi><mo>+</mo><mn>1</mn></mrow></msup>） - 必须显式声明
display="inline"才能嵌入段落，否则默认块级换行
Chrome/Edge 里<math></math>不显示？不是代码错，是没加载渲染器
Firefox 和 Safari（macOS/iOS 14.5+）原生支持 <math></math>；Chrome/Edge 从 104 开始实验性支持，但默认仍关闭 MathML 渲染引擎——DOM 存在、检查元素可见，就是空白或乱序。这不是语法错误，而是渲染层缺失。
- 最稳解法：引入
https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js，它会自动接管所有<math></math>块 - 别用
async或defer加载 MathJax，否则可能在 DOM 渲染前执行，导致漏掉公式 - 动态插入公式（如 AJAX 加载后）需手动调用
MathJax.typeset([domElement]) - 若只想轻量降级，可用
mathml.js（12KB），它检测到不支持时自动转成 SVG
别把<var></var>当公式标签用
<var></var> 只是语义化标记「变量名」，比如 <p>圆面积公式 π × <var>r</var>²</p>，它不参与任何数学排版，也不影响 <sup></sup> 行为。写成 <var>r</var><sup>2</sup> 是合法的，但 <var>r<sup>2</sup></var> 是无效嵌套——<var></var> 里不能含格式化标签。
真正容易被忽略的是：MathML 的 <mi></mi> 已经承担了「变量名」语义，且自带斜体与间距逻辑；<var></var> 应仅用于说明性文本，而非公式构建环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
