HTML - 数学标记语言

HTML MathML（数学标记语言）用于将 数学方程式 和 化学反应方程式 嵌入到HTML文档中。

数学标记语言（MathML）

数学标记语言是 2015 年推出的一种基于 XML 的标记语言。
它有助于以人类可读的格式表示复杂的数学公式。
这种表示还有助于软件理解方程的上下文。
要在网页中嵌入 MathML 元素，我们可以使用 HTML <math> 标签。

HTML MathML 无素

下表包含 HTML 中使用的 MathML 元素列表：

元素	描述
<math>	定义所有 MathML 元素的顶级标签（根）。
<mrow>	定义给定表或矩阵的行。
<msqrt>	定义在表达式中显示平方根符号。
<msub>	定义表达式中添加下标。
<msup>	定义表达式中添加上标。
<mo>	定义等于、逗号等运算符。
<mi>	定义变量或常量等标识符。
<mtable>	定义创建表格或矩阵。
<mtr>	定义表行或矩阵行。
<mtd>	定义在表或矩阵的单元格中输入数据。

HTML MathML的目的

MathML 有助于在技术和数学网页中显示公式。这确保了电子学习材料、科学论文和复杂算法中的清晰数学内容。

MathML 仅在 Google Chrome 和 Mozilla Firefox 浏览器中受支持。在测试之前，请确保您的浏览器支持 MathML。

示例 MathML in HTML

以下是一些示例，说明如何在 HTML 中使用 MathML 元素。

使用MathML的勾股定理

在此示例中，我们将使用 HTML 代码制作毕达哥拉斯方程。


<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8">
	 <title>七科普教程示例</title>
</head>
<body>
	 <math>
			<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 的二次方程

在此示例中，我们将使用 HTML 代码制作一个二次方程。


<!DOCTYPE html>
<html>
<head>
	 <title>MathML 七科普教程示例</title>
</head>
<body>
	 <math>
			<mrow>
				 <msup>
						<mi>x</mi>
						<mn>2</mn>
				 </msup>
				 
				 <mo>+</mo>
				 
				 <mn>4</mn>
				 <!-- Invisible times operator -->
				 <mo>⁢</mo> 
				 <mi>x</mi>
				 
				 <mo>+</mo>
				 
				 <mn>4</mn>
				 
				 <mo>=</mo>
				 <mn>0</mn>
			</mrow>
	 </math>
</body>
</html>

在 MathML 中制作矩阵

考虑以下示例，该示例将用于表示简单的 2x2 矩阵：


<!DOCTYPE html>
<html>
<head>
	 <title>MathML 七科普教程示例</title>
</head>
<body>
	 <math>
			<mrow>
				 <mi>A</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>

MathML中的氧化还原方程

下面是使用 MathML 的氧化还原化学方程式示例。


<!DOCTYPE html>
<html>
<head>
	 <title>MathML 七科普教程示例</title>
</head>

<body>
			<math>
			<mrow>
				 <msub>
						<mtext>Zn</mtext>
				 </msub>
				 <mo>+</mo>
				 <msub>
						<mrow>
						<mtext>CuSO</mtext>
						<mn>4</mn>
						</mrow>
				 </msub>
				 
				 <!-- Arrow Symbol -->
				 <mo>→</mo>
				 
				 <msub>
						<mrow>
						<mtext>ZnSO</mtext>
						<mn>4</mn>
						</mrow>
				 </msub>
				 
				 <mo>+</mo>
				 
				 <msub>
						<mtext>Cu</mtext>
				 </msub>
			</mrow>
			</math>

</body>
</html>

打印本页