钟文志的架构师之路

Appearance

HTML5 中的 MathML (Mathematical Markup Language) 是一种用于描述数学公式和符号的标记语言。MathML 使得数学公式可以直接嵌入到 HTML 文档中，并在网页中以结构化和可访问的方式呈现。以下是 MathML 的基本用法和常见元素。

基本用法 ​

MathML 的基本语法结构如下：

html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <!-- 数学表达式 -->
</math>

例如，一个简单的二次方程：

html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
        <mrow>
            <mo>-</mo>
            <mi>b</mi>
            <mo>±</mo>
            <msqrt>
                <msup>
                    <mi>b</mi>
                    <mn>2</mn>
                </msup>
                <mo>-</mo>
                <mn>4</mn>
                <mo>&#8290;</mo>
                <mi>a</mi>
                <mo>&#8290;</mo>
                <mi>c</mi>
            </msqrt>
        </mrow>
        <mrow>
            <mn>2</mn>
            <mo>&#8290;</mo>
            <mi>a</mi>
        </mrow>
    </mfrac>
</math>

常见元素 ​

  • 基本元素

    • <mi> (identifier)：用于变量和符号。
    • <mn> (number)：用于数字。
    • <mo> (operator)：用于运算符。
    • <mtext>：用于文本。
html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>a</mi>
    <mo>+</mo>
    <mi>b</mi>
    <mo>=</mo>
    <mn>5</mn>
</math>

  • 分数

    • <mfrac>：用于分数。
html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
        <mn>1</mn>
        <mn>2</mn>
    </mfrac>
</math>

  • 指数和下标

    • <msup>：用于上标（指数）。
    • <msub>：用于下标。
html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msup>
        <mi>x</mi>
        <mn>2</mn>
    </msup>
    <msub>
        <mi>a</mi>
        <mn>1</mn>
    </msub>
</math>

  • 根号

    • <msqrt>：用于平方根。
    • <mroot>：用于开任意次方根。
html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msqrt>
        <mn>16</mn>
    </msqrt>
    <mroot>
        <mn>27</mn>
        <mn>3</mn>
    </mroot>
</math>

  • 分组和行

    • <mrow>：用于将多个元素组合在一起。
    • <mfenced>：用于括号或其他括起符号。
html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <mo>(</mo>
        <mi>a</mi>
        <mo>+</mo>
        <mi>b</mi>
        <mo>)</mo>
        <mo>=</mo>
        <mn>5</mn>
    </mrow>
</math>

  • 矩阵

    • <mtable>：用于矩阵或表格。
    • <mtr>：用于表格行。
    • <mtd>：用于表格单元格。
html
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mtable>
        <mtr>
            <mtd><mi>a</mi></mtd>
            <mtd><mi>b</mi></mtd>
        </mtr>
        <mtr>
            <mtd><mi>c</mi></mtd>
            <mtd><mi>d</mi></mtd>
        </mtr>
    </mtable>
</math>

完整示例 ​

以下是一个完整的 MathML 示例，展示了二次方程的求解公式：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MathML Example</title>
</head>
<body>
    <p>二次方程的求解公式：</p>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo>
                <mi>b</mi>
                <mo>±</mo>
                <msqrt>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn>
                    <mo>&#8290;</mo>
                    <mi>a</mi>
                    <mo>&#8290;</mo>
                    <mi>c</mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn>
                <mo>&#8290;</mo>
                <mi>a</mi>
            </mrow>
        </mfrac>
    </math>
</body>
</html>

总结 ​

MathML 为在网页上展示复杂数学公式提供了强大和灵活的工具。它通过 XML 语法结构，使得数学表达式的呈现更加语义化和可访问。掌握 MathML，可以大大提升网页在科学、教育和技术领域的表现力。s