HTML - MathML

HTML MathML **(数学标记语言)** 用于将数学方程式和化学反应方程式嵌入到 HTML 文档中。

数学标记语言 (MathML)

数学标记语言 (MathML) 是一种基于 XML 的标记语言，于 2015 年推出。
它有助于以人类可读的格式表示复杂的数学公式。
这种表示方式也有助于软件理解方程式的上下文。
要在网页中嵌入 MathML 元素，可以使用 HTML 的 **<math>** 标签。

HTML MathML 元素

下表包含在 HTML 中使用的 MathML 元素列表

元素	描述
<math>	它是所有 MathML 元素的顶级标签（根）。
<mrow>	它表示给定表格或矩阵的行。
<msqrt>	它在表达式中显示平方根符号。
<msub>	它用于在给定表达式中添加下标。
<msup>	它用于在给定表达式中添加上标。
<mo>	它表示运算符，例如等于、逗号等等。
<mi>	它表示标识符，例如变量或常量。
<mtable>	它用于创建表格或矩阵。
<mtr>	它用于表格行或矩阵行。
<mtd>	它用于在表格或矩阵的单元格中输入数据。

HTML MathML 的用途

MathML 有助于在技术和数学网页中显示公式。这确保了电子学习材料、科学论文和复杂算法中的数学内容清晰。

MathML 仅受 Google Chrome 和 Mozilla Firefox 浏览器支持。请确保您的浏览器支持 MathML，然后再进行测试。

HTML 中 MathML 的示例

以下是一些说明如何在 HTML 中使用 MathML 元素的示例。

使用 MathML 的勾股定理

在这个例子中，我们将使用 HTML 代码制作勾股定理方程。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Pythagorean theorem</title>
</head>
<body>
   <math>
      <mrow>
         <msup>
            <mi>a</mi>
            <mn>2</mn>
         </msup>

         <mo>+</mo>

         <msup>
            <mi>b</mi>
            <mn>2</mn>
         </msup>

         <mo>=</mo>

         <msup>
            <mi>c</mi>
            <mn>2</mn>
         </msup>
      </mrow>
   </math>
</body>
</html>

使用 MathML 的二次方程

在这个例子中，我们将使用 HTML 代码制作一个二次方程。

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <mrow>
         <msup>
            <mi>x</mi>
            <mn>2</mn>
         </msup>
         
         <mo>+</mo>
         
         <mn>4</mn>
         <!-- Invisible times operator -->
         <mo>⁢</mo> 
         <mi>x</mi>
         
         <mo>+</mo>
         
         <mn>4</mn>
         
         <mo>=</mo>
         <mn>0</mn>
      </mrow>
   </math>
</body>
</html>

在 MathML 中创建矩阵

考虑以下示例，该示例将用于表示一个简单的 2x2 矩阵

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <mrow>
         <mi>A</mi>
         <mo>=</mo>
         <mfenced open="[" close="]">
            <mtable>
               <mtr>
                  <mtd><mi>x</mi></mtd>
                  <mtd><mi>y</mi></mtd>
               </mtr>

               <mtr>
                  <mtd><mi>z</mi></mtd>
                  <mtd><mi>w</mi></mtd>
               </mtr>
            </mtable>
         </mfenced>
      </mrow>
   </math>
</body>	
</html>

MathML 中的氧化还原方程式

下面是使用 MathML 的氧化还原化学方程式的示例。

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>

<body>
      <math>
      <mrow>
         <msub>
            <mtext>Zn</mtext>
         </msub>
         <mo>+</mo>
         <msub>
            <mrow>
            <mtext>CuSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>
         
         <!-- Arrow Symbol -->
         <mo>→</mo>
         
         <msub>
            <mrow>
            <mtext>ZnSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>
         
         <mo>+</mo>
         
         <msub>
            <mtext>Cu</mtext>
         </msub>
      </mrow>
      </math>

</body>
</html>

打印页面