一篇文章帶你了解HTML5 MathML
HTML5 可以在文檔中使用 MathML 元素,對應的標簽是 <math>...</math> 。
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乘法的實際應用。通過一個個案例的分析,介紹了其用法,屬性。運行效果圖的展示,能夠讓讀者更好的理解。
歡迎大家積極嘗試,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。
代碼很簡單,希望對你學習有幫助。