慕少3449830 ·HTML5 數(shù)學(xué)標(biāo)記語(yǔ)言
本章介紹一個(gè)比較專業(yè)性的 HTML 知識(shí)點(diǎn) - 數(shù)學(xué)置標(biāo)語(yǔ)言，它是一種基于 XML 的標(biāo)準(zhǔn)，用來(lái)在互聯(lián)網(wǎng)上書(shū)寫數(shù)學(xué)符號(hào)和公式的置標(biāo)語(yǔ)言，由萬(wàn)維網(wǎng)聯(lián)盟的數(shù)學(xué)工作組提出。
1. 發(fā)展史
1.1 版本
- 1.01 版于 1999 年 7 月公布
- 2.0 版于 2001 年 2 月出現(xiàn)。
- 萬(wàn)維網(wǎng)聯(lián)盟在 2003 年 10 月發(fā)布了MathML 2.0 的第二版
- 2010 年 10 月發(fā)布了 MathML 3.0。
1.2 作用
MathML 包含兩個(gè)子語(yǔ)言：Presentation MathML 和 Content MathML。Presentation MathML 主要負(fù)責(zé)描述數(shù)學(xué)表達(dá)式的布局。Content MathML 主要負(fù)責(zé)標(biāo)記表達(dá)式的某些含義或數(shù)學(xué)結(jié)構(gòu)。MathML 的這一方面受到 OpenMath 語(yǔ)言的很大影響，在 MathML3 中，與 OpenMath 更為貼近。為什么需要使用 MathML 呢？
我們要想在網(wǎng)頁(yè)中插入一些數(shù)學(xué)公式，早期的方式只能通過(guò)特殊符號(hào)或者圖片來(lái)實(shí)現(xiàn)，現(xiàn)在利用 MathML標(biāo)簽可以方便款姐的實(shí)現(xiàn)所有數(shù)學(xué)公式的顯示。
2.語(yǔ)法簡(jiǎn)介
介紹語(yǔ)法之前先看一個(gè)簡(jiǎn)單的 demo：
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mn>10</mn>
</mrow>
</math>
是不是看起來(lái)有點(diǎn)眼熟，沒(méi)錯(cuò)，它就是基于 XML 語(yǔ)法格式。math 元素之最頂層的根元素，每個(gè)實(shí)例都必須包含在 math標(biāo)簽內(nèi)，一個(gè) math 元素不能包含另一個(gè) math 元素。
2.1 mrow
mrow 標(biāo)簽用于對(duì)表達(dá)式進(jìn)行分組，至少由一個(gè)到多個(gè)運(yùn)算符組成，此元素呈水平展示。良好的分組對(duì)數(shù)學(xué)表達(dá)式結(jié)構(gòu)展示起到一定的改善效果。
2.2 mi
mi 標(biāo)簽表示運(yùn)算表達(dá)式中的變量，例如：
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi> <!--表示變量-->
<mo>+</mo>
<mi>b</mi> <!--表示變量-->
</mrow>
</math>
2.3 mo
mo 標(biāo)簽用于表示運(yùn)算符，例如：
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi>
<mo>-</mo><!--減法運(yùn)算符-->
<mi>b</mi>
</mrow>
</math>
2.4 mn
mn 標(biāo)簽用于顯示表達(dá)式中的數(shù)字。
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mn>5</mn><!--表示數(shù)字-->
<mo>+</mo>
<mn>1</mn>
</mrow>
</math>
2.5 mscarries
這個(gè)標(biāo)簽可用于創(chuàng)建基本數(shù)學(xué)中出現(xiàn)的進(jìn)位，借位和交叉， mscarries 的子元素與mstack 的下一行中的元素相關(guān)聯(lián)。 mscarries 的每個(gè)孩子除了 mscarry 之外或者 none 被視為被 mscarry 隱含地包圍，舉例說(shuō)明：
<math>
<mscarries> expression <mscarry> <none/> </mscarry> </mscarries>
</math>
以上是簡(jiǎn)單的寫法.
2.6 menclose
這個(gè)標(biāo)簽用于呈現(xiàn)由其表示法屬性指定的封閉符號(hào)內(nèi)的內(nèi)容。它接受一個(gè)參數(shù)作為多個(gè)子元素的推斷。它包含一個(gè)屬性 notation，可選項(xiàng)有：
- longdiv - 精算；
- phasorangle - 激進(jìn)；
- updiagonalstrike - 盒子；
- downdiagonalstrike - 圓盒；
- verticalstrike - 圓；
- horizontalstrike - 左；
- northeastarrow - 右；
- madruwb - 頂部；
- text - 底部；
2.7 mfenced
這個(gè)標(biāo)簽是一種使用 fencing 運(yùn)算符 (如花括號(hào)，括號(hào)和括號(hào)) 而不是使用 標(biāo)簽的快捷方法。包含一個(gè)屬性 expression，可選值有：
- open 指定開(kāi)始分隔符，默認(rèn)是 “（” ;
- close 指定結(jié)束分隔符，默認(rèn)是 “）”;
- separators 指定零個(gè)或多個(gè)分隔符序列，默認(rèn)是 “,”
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mo>(</mo>
<mn>1</mn>
<mo>)</mo>
</mrow>
</math><!--這是不適用mfenced的方式-->
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mfenced>
<mn>1</mn>
</mfenced>
</math><!--使用mfenced快捷方式-->
通過(guò)上述代碼可以看得出，使用這個(gè)標(biāo)簽可以減少代碼量。
2.8 mfrac
這個(gè)標(biāo)簽用于繪制分?jǐn)?shù)，它的子元素必須是2個(gè)，不然的話會(huì)出現(xiàn)報(bào)錯(cuò)，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mfrac>
<mi>y</mi>
<mn>10</mn>
</mfrac>
</math>
以上示例中的分母是 10，分子是 y。
2.9 mlongdiv
這個(gè)標(biāo)簽用于繪制長(zhǎng)的分區(qū)，它的簡(jiǎn)單語(yǔ)法格式是：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<mlongdiv> divisor dividend result expression </mlongdiv>
2.10 mtable
這個(gè)標(biāo)簽比較類似于 HTML 中的表格元素，結(jié)合使用 mtr ，mtd 可以繪制出表格，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd><mn>0</mn></mtd>
<mtd><mn>0</mn></mtd>
</mtr>
<mtr>
<mtd><mn>0</mn></mtd>
<mtd><mn>1</mn></mtd>
<mtd><mn>0</mn></mtd>
</mtr>
</mtable>
</math>
2.11 msgroup
用于分組，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mstack>
<msgroup>
<mn>123</mn>
<msrow>
<mo>×</mo>
<mn>321</mn>
</msrow>
</msgroup>
<msline/>
</mstack>
</math>
2.12 mover
這個(gè)標(biāo)簽用于繪制下標(biāo)，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mover accent = "true">
<mrow>
<mi> 1 </mi>
<mo> + </mo>
<mi> 2 </mi>
<mo> + </mo>
<mi> 3 </mi>
</mrow>
<mo>⏞</mo>
</mover>
</math>
2.13 mpadded
這個(gè)標(biāo)簽用于在其內(nèi)容周圍添加填充或額外空間，它可用于調(diào)整尺寸和定位，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mpadded lspace = "0.2em" voffset = "0.3ex">
<mi>y</mi>
</mpadded>
<mi>z</mi>
</mrow>
</math>
2.14 mphantom
這個(gè)標(biāo)簽用于渲染無(wú)形中保持相同的大小和其他維度，包括基線位置，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mfrac>
<mrow>
<mi> x </mi>
<mo> + </mo>
<mi> y </mi>
<mo> + </mo>
<mi> z </mi>
</mrow>
<mrow>
<mi> x </mi>
<mphantom>
<mo> + </mo>
</mphantom>
<mphantom>
<mi> y </mi>
</mphantom>
<mo> + </mo>
<mi> z </mi>
</mrow>
</mfrac>
</math>
2.15 msqrt
這個(gè)元素用于構(gòu)造平方根，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<msqrt>
<mn>256</mn>
</msqrt>
</math>
2.16 msub
這個(gè)元素用于繪制下標(biāo)表達(dá)式，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<msub>
<mi>y</mi>
<mn>10</mn>
</msub>
</math>
2.17 msubsup
這個(gè)元素用于將下標(biāo)和上標(biāo)附加到表達(dá)式，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<msubsup>
<mo> ∫</mo>
<mn> 0 </mn>
<mn> 1 </mn>
</msubsup>
<mrow>
<msup>
<mi> e</mi>
<mi> x </mi>
</msup>
<mo> ⁢</mo>
<mrow>
<mi> d</mi>
<mi> x </mi>
</mrow>
</mrow>
</mrow>
</math>
2.18 msup
這個(gè)元素用于將上標(biāo)繪制到表達(dá)式，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</math>
2.19 munder
這個(gè)元素用于繪制下標(biāo)，可用于在表達(dá)式中添加重音或者限制，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<munder accent="true">
<mrow>
<mi>a </mi>
<mo> + </mo>
<mi> b </mi>
<mo> + </mo>
<mi> c </mi>
</mrow>
<mo>ȿ</mo>
</munder>
</math>
2.20 munderover
這個(gè)元素用于繪制下方和上方，它支持在表達(dá)式上和下同事添加重音或者限制，例如：
（請(qǐng)使用 Firefox 運(yùn)行下面代碼）
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<munderover>
<mo> ∫</mo>
<mn> 0 </mn>
<mi> ∞</mi>
</munderover>
</mrow>
</math>
3.兼容性
通過(guò)上圖可以看出，基本上兼容性最好的是 Firefox 和Safari ，其他瀏覽器基本上不兼容。
4.第三方工具
由于 mathml 牽涉到的專業(yè)技術(shù)門檻較高，對(duì)數(shù)學(xué)知識(shí)要求較高，一般情況下如果只是項(xiàng)目中偶爾使用的話可以使用第三方工具降低開(kāi)發(fā)成本。
4.1 在線轉(zhuǎn)換
這個(gè)網(wǎng)站可以在線將數(shù)學(xué)公式轉(zhuǎn)換成 mathml 代碼
4.2 第三方庫(kù)
通過(guò)調(diào)用第三方庫(kù)，可以使用 mathml 語(yǔ)法在不支持的瀏覽器上進(jìn)行兼容模擬，例如 mathml.js
（下面例子可以使用 chorme 瀏覽器試試了，平方根也是可以顯示出來(lái)的）
<script src="//fred-wang.github.io/mathml.css/mspace.js"></script>
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<msqrt>
<mn>256</mn>
</msqrt>
</math>
5. 總結(jié)
本章介紹了小眾語(yǔ)法 mathml，由其發(fā)展歷史以及適用場(chǎng)景引申開(kāi)來(lái)，進(jìn)而簡(jiǎn)單介紹了它的語(yǔ)法結(jié)構(gòu)，最后說(shuō)明了其兼容性問(wèn)題以及兼容性解決方案，由于目前只有極少數(shù)瀏覽器支持，所以在需要使用時(shí)需要先進(jìn)行兼容性判斷。
2025 imooc.com All Rights Reserved |