一篇文章帶你了解HTML5 MathML
HTML5 可以在文檔中使用 MathML 元素,對應(yīng)的標(biāo)簽是 <math>...</math> 。
MathML 是數(shù)學(xué)標(biāo)記語言,是一種基于XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)的標(biāo)準(zhǔn),用來在互聯(lián)網(wǎng)上書寫數(shù)學(xué)符號和公式的置標(biāo)語言。
注意:
大部分瀏覽器都支持 MathML 標(biāo)簽,如果你的瀏覽器不支持該標(biāo)簽,可以使用最新版的 Firefox 或 Safari 瀏覽器查看。
一、MathML 簡單實(shí)例
以下是一個(gè)簡單的 MathML 實(shí)例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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>
運(yùn)行結(jié)果圖,如下所示:
二、用作 MathML 字符
想象一下,下面是一個(gè)用作字符 ⁢ 的標(biāo)記:XML/HTML Code粘貼內(nèi)容到剪貼板。
以下實(shí)例添加了一些運(yùn)算符:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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>
運(yùn)行結(jié)果圖,如下所示:
三、MathML乘法
<msgroup>用于對<mstack>元素和<mlongdiv>元素內(nèi)的行進(jìn)行分組,以使其位置相對于堆棧的對齊方式。帶有shift屬性的<msgroup>元素可以用于創(chuàng)建簡單乘法。
1. 用法
以下是使用此標(biāo)簽的簡單語法 。
<msgroup> expression </msgroup>
2. 參數(shù)
這是這個(gè)標(biāo)簽的所有參數(shù)的描述 ( 表達(dá)式 - 表達(dá)式 )。
3. 屬性
位置 : 指定組內(nèi)相對于由包含msgroup控制的位置(根據(jù)其位置和位移屬性)的行的水平位置。默認(rèn)值為0。
shift : 指定組內(nèi)連續(xù)子項(xiàng)(行或組)的位置的遞增位移。默認(rèn)值為0。
4. 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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>
四、矩陣表達(dá)出來
下面的例子,它可能會(huì)被用來指出一個(gè)比較簡單的 2x2 矩陣。XML/HTML Code副本內(nèi)容到剪貼板
以下實(shí)例是一個(gè) 2×2 矩陣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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>
運(yùn)行結(jié)果圖,如下所示:
五、總結(jié)
本文基于HTML基礎(chǔ),介紹了MathML常見的用法。在本文中,介紹了如何用作 MathML 字符,重點(diǎn)介紹了MathML乘法的實(shí)際應(yīng)用。通過一個(gè)個(gè)案例的分析,介紹了其用法,屬性。運(yùn)行效果圖的展示,能夠讓讀者更好的理解。
歡迎大家積極嘗試,有時(shí)候看到別人實(shí)現(xiàn)起來很簡單,但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候,總會(huì)有各種各樣的問題,切勿眼高手低,勤動(dòng)手,才可以理解的更加深刻。
代碼很簡單,希望對你學(xué)習(xí)有幫助。