HTML 的 `<math>`？MathML。

HTML 里确实可以直接写 <math>，它就是 MathML（Mathematical Markup Language，W3C 定义的数学标记语言）的根元素；从 2023 年 1 月起 Chrome/Edge 109、Safari、Firefox 全部原生渲染它，普通静态公式不再需要 MathJax，更不需要截图。

<math> 和 MathML 是什么关系？

结论：<math> 是 MathML 的根元素，MathML 是这门标记语言本身——就像 <html> 和 HTML 的关系。

MathML 1.0 在 1998 年 4 月成为 W3C 推荐标准，2010 年 10 月出到 MathML 3；浏览器只实现了其中一个子集，W3C 后来把这个子集单独规范化，叫 MathML Core（MathML 核心规范），新特性基本只往这里加。

HTML5 允许 <math> 直接内联写在 HTML 文档里，解析器会自动把它切到 MathML 命名空间，所以 .html 文件里不用写 xmlns；只有在 XHTML 或 XML 文档中才必须写 xmlns="http://www.w3.org/1998/Math/MathML"。

浏览器支持到什么程度？

结论：Firefox 从 1.0（2004 年）、Safari 从 5.1（2011 年）就支持 MathML；Chrome 和 Edge 从 109 版（2023 年 1 月 10 日 / 1 月 12 日发布）起默认开启 MathML Core，也就是 2023 年 1 月之后三大引擎都能原生渲染 <math>。

判断方法很简单：目标用户不用 Chrome 108 及更早版本，就不必引任何 polyfill。要兼容更老的 Chrome，用 MathJax 做客户端兜底即可。

注意浏览器实现的是 MathML Core 子集，<maction>（点击切换公式）这类元素不在 Core 里，不要依赖。

<math> 怎么写？最小示例

结论：把公式拆成「标识符 <mi>、数字 <mn>、运算符 <mo>、分组 <mrow>」四种基本零件，再套上分数、上下标等结构元素就够了。

<p>质能方程：<math display="block">
  <mi>E</mi><mo>=</mo><mi>m</mi>
  <msup><mi>c</mi><mn>2</mn></msup>
</math></p>

<math>
  <mfrac>
    <mrow><mo>−</mo><mi>b</mi><mo>±</mo>
      <msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt>
    </mrow>
    <mrow><mn>2</mn><mi>a</mi></mrow>
  </mfrac>
</math>

三个必须知道的默认行为：

1. 单个字符的 <mi> 默认斜体（表示变量 x），写多个字符如 <mi>sin</mi> 默认正体，这是 MathML 的排版惯例，不用手动写 font-style。
2. <mo> 里的括号、根号、求和号会自动拉伸去匹配内容高度。
3. <math> 默认 display: inline，加 display="block" 等价于 CSS display: block math，此时分数、根号按完整尺寸排版；行内模式下会被压缩（math-style: compact）。

样式上，MathML Core 把大量表现属性交给了 CSS：颜色用 color、背景用 background-color、字号用 font-size，另有 math-style、math-depth、math-shift 三个专属属性；mathvariant 只剩 normal 一个值，粗体请用 font-weight。

MathML、LaTeX、MathJax、KaTeX 该选哪个？

结论：能直接写 MathML 就直接写；公式源是 LaTeX（论文、博客源码）时用 KaTeX 或 MathJax 转换，首选构建期转成 MathML 输出。

• MathML vs LaTeX：MathML 描述结构（「这是一个分数，分子是…」），LaTeX 是排版语法，\frac{-b\pm\sqrt{b^2-4ac}}{2a} 写起来短得多，但浏览器不认 LaTeX。
• KaTeX：输入只能是 LaTeX，输出 HTML+CSS，同时在隐藏的 <span class="katex-mathml"> 里放一份 MathML 供屏幕阅读器朗读；渲染快，适合文档站。
• MathJax 3：输入支持 TeX、MathML、AsciiMath，输出 CHTML 或 SVG；功能最全、体积也最大，适合化学式、大矩阵、自定义宏等复杂场景。
• 推荐组合：构建期用 KaTeX/MathJax 把 LaTeX 转成 <math> 写进静态 HTML——页面零 JS、公式可选中复制、屏幕阅读器可读；仅在需要兼容 Chrome 108 及以下时，再客户端加载 MathJax 兜底。

用 MathML 容易踩的坑有哪些？

结论：正确姿势是「结构写全、样式交给 CSS、别用 Core 之外的元素」。

不要用 <math> 包整段文字——它是行内元素，一段话里的多个公式会被排在同一行；长公式统一加 display="block"。不要再用 MathML 3 时代的 numalign、denomalign、<maction>，Chrome 和 Safari 都不会理。可访问性上不必额外做事：MathML 自带语义，NVDA、VoiceOver 能直接朗读公式，这正是它比「公式图片」强的地方。

总结：<math> 就是 MathML，2023 年 1 月起 Chrome/Edge 109 与 Firefox、Safari 全部原生支持；写清 <mi>/<mn>/<mo> 结构、用 display="block" 控制块级排版、样式走 CSS，就能不依赖任何 JS 得到可选中、可朗读的网页公式；公式源头是 LaTeX 时，构建期转成 MathML 是当前最划算的方案。