一篇文章帶你了解HTML5 MathML

作者：前端進階者 2020-10-23 08:17:29

網絡網絡管理

MathML 是數學標記語言，是一種基于XML(標準通用標記語言的子集)的標準，用來在互聯網上書寫數學符號和公式的置標語言。

[[347913]]

HTML5 可以在文檔中使用 MathML 元素，對應的標簽是 $...$ 。

MathML 是數學標記語言，是一種基于XML(標準通用標記語言的子集)的標準，用來在互聯網上書寫數學符號和公式的置標語言。

注意：

大部分瀏覽器都支持 MathML 標簽，如果你的瀏覽器不支持該標簽，可以使用最新版的 Firefox 或 Safari 瀏覽器查看。

一、MathML 簡單實例

以下是一個簡單的 MathML 實例。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>項目</title> 
    </head> 
 
    <body style="background-color: aqua;"> 
 
        <math xmlns="http://www.w3.org/1998/Math/MathML"> 
 
            <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 字符

想象一下，下面是一個用作字符 ⁢ 的標記：XML/HTML Code粘貼內容到剪貼板。

以下實例添加了一些運算符：

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8"> 
      <title>項目</title> 
   </head> 
     
   <body  style="background-color: aqua;"> 
     
      <math xmlns="http://www.w3.org/1998/Math/MathML"> 
         
         <mrow>             
            <mrow> 
                 
               <msup> 
                  <mi>x</mi> 
                  <mn>3</mn> 
               </msup> 
                     
               <mo>+</mo> 
                     
               <mrow> 
                  <mn>4</mn> 
                  <mo>⁢</mo> 
                  <mi>x</mi> 
               </mrow> 
                     
               <mo>+</mo> 
               <mn>6</mn> 
                     
            </mrow> 
                 
            <mo>=</mo> 
            <mn>0</mn> 
                 
         </mrow> 
      </math> 
         
   </body> 
</html>

運行結果圖，如下所示：

三、MathML乘法

<msgroup>用于對<mstack>元素和<mlongdiv>元素內的行進行分組，以使其位置相對于堆棧的對齊方式。帶有shift屬性的<msgroup>元素可以用于創建簡單乘法。

1. 用法

以下是使用此標簽的簡單語法。

<msgroup> expression </msgroup>

2. 參數

這是這個標簽的所有參數的描述 ( 表達式 - 表達式 )。

3. 屬性

位置 : 指定組內相對于由包含msgroup控制的位置(根據其位置和位移屬性)的行的水平位置。默認值為0。

shift : 指定組內連續子項(行或組)的位置的遞增位移。默認值為0。

4. 案例

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>項目</title> 
    </head> 
 
    <body style="background-color: aqua;"> 
        <math xmlns="http://www.w3.org/1998/Math/MathML"> 
            <mstack> 
                <msgroup> 
                    <mn>123</mn> 
                    <msrow> 
                        <mo>×</mo> 
                        <mn>321</mn> 
                    </msrow> 
                </msgroup> 
                <msline /> 
                <msgroup shift="1"> 
                    <mn>123</mn> 
                    <mn>246</mn> 
                    <mn>369</mn> 
                </msgroup> 
                <msline /> 
                <mn>39483</mn> 
            </mstack> 
        </math> 
    </body> 
</html>

四、矩陣表達出來

下面的例子，它可能會被用來指出一個比較簡單的 2x2 矩陣。XML/HTML Code副本內容到剪貼板

以下實例是一個 2×2 矩陣。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8"> 
      <title>項目</title> 
   </head> 
     
   <body  style="background-color: aqua;"> 
      <math xmlns="http://www.w3.org/1998/Math/MathML"> 
         
         <mrow> 
            <mi>BAS</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>

運行結果圖，如下所示：

五、總結

本文基于HTML基礎，介紹了MathML常見的用法。在本文中，介紹了如何用作 MathML 字符，重點介紹了MathML乘法的實際應用。通過一個個案例的分析，介紹了其用法，屬性。運行效果圖的展示，能夠讓讀者更好的理解。

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。

責任編輯：武曉燕來源：前端進階學習交流