MathML是一种标记语言 ,可用于显示数学符号 。 您可以直接从HTML5使用MathML标签。 当您希望在网页中显示更多简单的数学符号时,它非常有用,并且由于其简单性和与HTML的相似性 ,因此非常易于使用。
MathML有两种标记: 演示文稿(用于布局)和内容(用于含义)。 由于浏览器仅支持演示文稿标记,因此这是可与HTML一起使用的唯一标记类型。 您也可以像在HTML上一样在其上使用CSS和JavaScript。
让我们看一下MathML。
了解MathML
Mozilla开发人员网站上列出了当前的MathML元素。 我还在本文结尾处列出了示例中使用的元素,以供快速参考。
MathML中的顶级元素是<math>
元素,当您在HTML中编写MathML代码时,请记住将其放在<math>
标记内。
<mi>
, <mo>
, <mn>
, <ms>
是分别表示标识符,运算符,数字和字符串的基本元素。 请注意,以下所有MathML元素均以字母'm'开头。
这是一些简单的例子。
如何显示上标和下标
<msup>
元素用于显示上标。 下标有一个<msub>
。
<math>
<msup>
<mi>n</mi>
<mn>7</mn>
</msup>
</math>
![MathML msup元素示例](https://i-blog.csdnimg.cn/blog_migrate/c4a52c0e9a8cfa043b70cf00312bd6bc.png)
如何显示分数
<math>
<mfrac>
<mn>7</mn>
<mn>26</mn>
</mfrac>
</math>
![MathML mfrac元素示例](https://i-blog.csdnimg.cn/blog_migrate/c548b9c3745316f8be9f0ba7c925a77f.png)
如何显示根整数
这是显示根整数的另一个简单示例。
<math>
<mroot>
<mn><mo>-</mo>678</mn>
<mn>5</mn>
</mroot>
</math>
![MathML mroot元素示例](https://i-blog.csdnimg.cn/blog_migrate/4f53f911618e7266b1a2cd5e8a686ed6.png)
对于仅平方根,存在<msqrt>
。
现在,让我们继续讨论更复杂的符号矩阵。
如何显示矩阵
要构建矩阵,我们将需要具有用于行和列的表结构。 为此,我们使用<mtable>
, <mtr>
和<mtd>
。
除此之外,我们将使用<mo>
标记在矩阵周围添加运算符[
和]
,最后将它们全部放入<mrow>
元素(对表达式进行分组的元素)中。
这是最终结果:
<math>
<mrow>
<mo> [ </mo>
<mtable>
<mtr>
<mtd> <mn>0</mn> </mtd>
<mtd> <mn>4</mn> </mtd>
<mtd> <mn>10</mn> </mtd>
</mtr>
<mtr>
<mtd> <mn>5</mn> </mtd>
<mtd> <mn>2</mn> </mtd>
<mtd> <mi>X</mi> </mtd>
</mtr>
<mtr>
<mtd> <mn>9</mn> </mtd>
<mtd> <mn>11</mn> </mtd>
<mtd> <mn>1</mn> </mtd>
</mtr>
</mtable>
<mo> ] </mo>
</mrow>
</math>
另外,让我们添加一些CSS以使“ X”在矩阵中脱颖而出。
mi {
color:red;
}
![MathML矩阵示例](https://i-blog.csdnimg.cn/blog_migrate/f52c2a92e727cfc1140e093c6f7ac30b.png)
如何显示积分方程
下面是一个基本类型的积分方程的示例。 <mmultiscripts>
用于将限制添加到积分。
![MathML积分示例](https://i-blog.csdnimg.cn/blog_migrate/4dbc9ba794920e23373d285a7ff49a09.png)
与HTML一样,MathML也具有字符和实体,示例中使用其中之一来显示希腊phi符号。 以下是显示积分方程的方法:
<math>
<mrow>
<mrow>
<mi>f</mi>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mrow>
<mmultiscripts>
<mo>∫</mo>
<mi>a</mi>
<mi>b</mi>
</mmultiscripts>
<mrow>
<mi>K</mi>
<mo>(</mo>
<mi>x</mi>
<mo>,</mo>
<mi>t</mi>
<mo>)</mo>
</mrow>
<mrow>
<mi>φ</mi>
<mo>(</mo>
<mi>t</mi>
<mo>)</mo>
</mrow>
<mi>d</mi>
<mi>t</mi>
</mrow>
</mrow>
</math>
有关MathML字符实体的列表,请单击此处在W3C网站上找到它们。
MathML属性
除了与HTML相同的属性(如id
)外,MathML还具有一组自己的属性。 Mozilla开发人员网站上有MathML属性的集合供您参考。 对于后备,可以使用JavaScript库MathJax 。 如果您需要更多工具,请在此处查看此链接。
我离开包含上面所有示例的该Codepen,以方便您参考。
MathML元素的参考列表
元素 | 定义 |
<math> | 顶级MathML元素 |
<mi> | 显示标识符(变量,常量,函数名称) |
<mn> | 显示数字文字 |
<mo> | 显示运算符 |
<ms> | 显示字符串文字 |
<msup> | 将上标附加到基数 |
<msub> | 将下标附加到基数 |
<mfrac> | 用于显示分数 |
<mroot> | 显示带有索引的部首 |
<msqrt> | 显示平方根 |
<mtable> | 显示表格或矩阵 |
<mtr> | <mtable> 行 |
<mtd> | <mtr> 列 |
<mrow> | 组子表达式 |
<mmultiscripts> | 用于添加上标,下标,上标和下标 |