Html 简明教程

HTML - MathML

HTML MathML (Mathematical Markup Language) 用来将数学方程式和化学反应方程式嵌入到 HTML 文档中。

Mathematical Markup Language (MathML)

  1. 数学标记语言是基于 XML 的标记语言，于 2015 年推出。

  2. 它有助于以人类可读的格式表示复杂的数学公式。

  3. 这种表示法还可以帮助软件了解方程式的上下文。

  4. 若要在网页中嵌入 MathML 元素，我们可以使用 HTML <math> 标记。

HTML MathML Elements

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

Element

Description

<math>

它是所有 MathML 元素的顶级标记（根）。

<mrow>

它指示给定表或矩阵的行。

<msqrt>

它在表达式中显示平方根符号。

<msub>

它用于在给定的表达式中添加下标。

<msup>

它用于在给定的表达式中添加上标。

<mo>

它表示运算符，例如等于、逗号等。

<mi>

它表示标识符，例如变量或常量。

<mtable>

它用于创建表格或矩阵。

<mtr>

它用于表格行或矩阵行。

<mtd>

它用于在表格或矩阵的单元格中输入数据。

Purpose of HTML MathML

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

MathML 只在 Google Chrome 和 Mozilla Firefox 浏览器中受支持。请在测试前确保您的浏览器支持 MathML。

Examples MathML in HTML

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

Pythagorean theorem Using 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>

Quadratic Equation using 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>

Make Matrix in 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>

Redox Equation in 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>