MathML 数学标记

一、MathML 概述

1.1 什么是 MathML

MathML（Mathematical Markup Language，数学标记语言）是一种基于 XML 的标记语言，用于在 Web 页面中描述数学符号和公式。与 LaTeX 类似，MathML 可以精确表达数学结构，但它是 W3C 推荐的标准 Web 技术。

<!-- 二次方程公式 -->
<math>
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mn>4</mn>
            <mi>a</mi>
            <mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

1.2 MathML 的价值

纯文本公式：x = (-b ± sqrt(b² - 4ac)) / 2a
MathML 公式：结构化、可访问、可语义化

• 可访问性：屏幕阅读器可以正确朗读数学内容
• 可复制：用户可以直接复制 MathML 公式为纯文本
• 搜索引擎：搜索引擎可以理解公式的语义结构
• CSS/JS 控制：可以通过样式和脚本操作公式

二、MathML 核心元素

2.1 基础元素一览

2.2 分数与根号

<!-- 分数 a/b -->
<mfrac>
  <mi>a</mi>
  <mi>b</mi>
</mfrac>

<!-- 平方根 sqrt(x) -->
<msqrt>
  <mi>x</mi>
</msqrt>

<!-- n 次方根 sqrt[n](x) -->
<mroot>
  <mi>x</mi>
  <mi>n</mi>
</mroot>

2.3 上下标

<!-- 下标 x_i -->
<msub>
  <mi>x</mi>
  <mi>i</mi>
</msub>

<!-- 上标 x^2 -->
<msup>
  <mi>x</mi>
  <mn>2</mn>
</msup>

<!-- 上下标 x_i^2 -->
<msubsup>
  <mi>x</mi>
  <mi>i</mi>
  <mn>2</mn>
</msubsup>

<!-- 组合：e^(-t) -->
<msup>
  <mi>e</mi>
  <mrow>
    <mo>-</mo>
    <mi>t</mi>
  </mrow>
</msup>

2.4 矩阵与表格

<!-- 2x2 矩阵 -->
<mtable>
  <mtr>
    <mtd><mn>1</mn></mtd>
    <mtd><mn>0</mn></mtd>
  </mtr>
  <mtr>
    <mtd><mn>0</mn></mtd>
    <mtd><mn>1</mn></mtd>
  </mtr>
</mtable>

三、浏览器支持

3.1 现代浏览器支持

好消息：MathML Core 已成为 Baseline 广泛可用技术，自 2023 年 1 月起得到主流浏览器良好支持。

// 检测 MathML 支持
if ('math' in document.createElement('math')) {
  console.log('MathML supported');
}

3.2 样式与布局

/* MathML 元素样式 */
math {
  font-size: 1.2em;
}

.math-highlighted {
  background-color: yellow;
}

3.3 降级处理

<!-- 使用 mathvariant 属性 -->
<mi mathvariant="bold">x</mi>

<!-- 对于不支持的环境，考虑 polyfill -->

四、MathML vs LaTeX vs 图片

4.1 技术对比

4.2 何时使用 MathML

• 需要良好可访问性的教育网站
• 需要与 DOM/CSS/JS 交互的动态数学应用
• 符合 W3C 标准的场景
• 简单的数学公式（复杂公式 LaTeX 更合适）

五、实战应用

5.1 基础数学公式

<!-- 勾股定理 c² = a² + b² -->
<math>
  <mrow>
    <msup>
      <mi>c</mi>
      <mn>2</mn>
    </msup>
    <mo>=</mo>
    <msup>
      <mi>a</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
      <mi>b</mi>
      <mn>2</mn>
    </msup>
  </mrow>
</math>

<!-- 积分 ∫f(x)dx -->
<math>
  <mrow>
    <mo>∫</mo>
    <mi>f</mi>
    <mo>(</mo>
    <mi>x</mi>
    <mo>)</mo>
    <mo>ⅆ</mo>
    <mi>x</mi>
  </mrow>
</math>

5.2 带样式的高级公式

<!-- 使用 mspace 调整间距 -->
<math>
  <mrow>
    <mi>A</mi>
    <mspace width="0.5em" />
    <mo>+</mo>
    <mspace width="0.5em" />
    <mi>B</mi>
  </mrow>
</math>

<!-- 使用 mpadded 调整内部间距 -->
<mpadded width="+1ex">
  <mi>x</mi>
</mpadded>

六、面试高频问题

Q: MathML 和 LaTeX 有什么区别？各适合什么场景？

回答要点：MathML 是 W3C Web 标准，结构化、可访问、可 DOM 操作；LaTeX 是排版系统，语法简洁但需要转换。MathML 适合需要可访问性和标准兼容的 Web 应用；LaTeX 适合学术论文和专业排版。

Q: 如何在不支持 MathML 的浏览器中显示公式？

回答要点：可以使用 MathJax 等 JavaScript 库将 LaTeX 或 MathML 渲染为 HTML/CSS 或 SVG。对于简单场景，也可以考虑将公式降级为图片或使用 Unicode 数学符号。

参考资料

• MDN: MathML
• W3C MathML Core
• MathML Polyfills

延展阅读

• MathJax Documentation
• MDN: MathML Elements
• W3C MathML Specification