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