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>

列印頁面