HTML5 MathML 数学标记语言

MathML（Mathematical Markup Language）是HTML5内置的数学标记语言，用于在网页中优雅地显示数学公式和符号。

简介

MathML 是一种基于 XML 的标准，专门用于描述数学符号和公式。它是 HTML5 标准的一部分，可以直接在 HTML 文档中使用，无需任何插件或额外依赖。

MathML 非常适合显示复杂的数学表达式，如代数公式、微积分、统计学符号等，广泛应用于教育网站、科学计算网站和学术论文展示。

基本用法

使用 <math> 标签包裹数学表达式：

基本数学表达式

<math>
    <mrow>
        <mi>x</mi>
        <mo>+</mo>
        <mi>y</mi>
    </mrow>
</math>

MathML 核心元素：

<math> - 根元素，包裹整个数学表达式
<mi> - 标识符（变量名、函数名）
<mo> - 运算符（加号、减号等）
<mn> - 数字
<mrow> - 行内分组，将多个元素组合

分数

使用 <mfrac> 标签创建分数：

分数示例

<math>
    <mfrac>
        <mi>a</mi>
        <mi>b</mi>
    </mfrac>
</math>

<!-- 分数示例: a/b -->

上标和下标

使用 <msup> 和 <msub> 创建上标和下标：

上下标示例

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

<!-- 下标 x₁ -->
<math>
    <msub>
        <mi>x</mi>
        <mn>1</mn>
    </msub>
</math>

<!-- 同时上下标 -->
<math>
    <msubsup>
        <mi>x</mi>
        <mn>0</mn>
        <mn>n</mn>
    </msubsup>
</math>

根号

使用 <msqrt> 创建平方根，<mroot> 创建n次方根：

根号示例

<!-- 平方根 √x -->
<math>
    <msqrt>
        <mi>x</mi>
    </msqrt>
</math>

<!-- 三次方根 ∛x -->
<math>
    <mroot>
        <mi>x</mi>
        <mn>3</mn>
    </mroot>
</math>

复杂示例

下面是一些常见的复杂数学表达式：

复杂公式示例

<!-- 二次方程求根公式 -->
<math>
    <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>
</math>

浏览器支持

MathML 的浏览器支持情况：

Firefox - 完全支持
Safari - 完全支持
Chrome - 从版本109开始支持
Edge - 基于Chromium，支持
旧版浏览器 - 可使用 MathJax 等 JavaScript 库作为回退方案

提示

如果需要兼容旧版浏览器，可以使用 MathJax 或 KaTeX 等 JavaScript 数学渲染库，它们可以将 LaTeX 或 MathML 语法渲染为高质量的数学公式。