通过 <math> 元素在 HTML 中插入公式
MathML 使用与 HTML 相同的语法来表示元素和属性的树。特别是，每个数学公式都由一个 <math> 元素表示，该元素可以放置在 HTML 页面中。在下面的文档中，它位于文本段落内
<!doctype html>
<html lang="en-US">
<head>
<title>My first math page</title>
</head>
<body>
<p>
The fraction
<math>
<mfrac>
<mn>1</mn>
<mn>3</mn>
</mfrac>
</math>
is not a decimal number.
</p>
</body>
</html>
<mfrac> 元素指定一个分数，其第一个子元素是分子，第二个子元素是分母。在浏览器中渲染如下：
警告： 如果您看到的不是分数而是“1 3”，则表示您的浏览器可能不支持 MathML。有关更多详细信息，请查看 浏览器兼容性表。
display 属性
请注意，在前面的示例中，公式与段落文本在同一行。然而，通常的做法是将大型数学公式居中显示在自己的行上，如下所示。要实现这一点，您需要将 display="block" 属性附加到 <math> 元素上。
您可能还会注意到外观上的一些细微变化：分数文本和垂直间距会稍微变大。没有 display="block" 属性时，高度会最小化，以避免干扰周围文本的流动。有了 display="block" 属性后，则优先考虑数学公式的可读性。
注意： 这对应于 LaTeX 中行内公式（用美元符号 $...$ 分隔）和显示公式（用 \[...\] 分隔）的概念。
注意： 上面提到的外观变化实际上由 math-style 属性控制，对于 <math display="block">，该属性默认为 normal，否则为 compact。在某些 MathML 子树中，此属性可以自动变为 compact，但在本次入门教程中我们将忽略此细节。同样，这与 LaTeX 类似。
<mrow> 元素进行分组
<math> 元素实际上可以包含任意数量的子元素，并将它们排列成一行。例如，“1 + 2 + 3”这个简单的公式在 MathML 中将这样编码：
<math>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
<mo>+</mo>
<mn>3</mn>
</math>
<mrow> 元素是一个通用容器，它执行类似的布局，但可以放置在 MathML 子树的任何位置。它有助于将多个元素分组。例如，下面分数的分子（其第一个子元素）是“one plus two”。
<math>
<mfrac>
<mrow>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
</mrow>
<mn>3</mn>
</mfrac>
</math>
轮到你了：编写嵌套表达式
作为练习，请尝试只使用我们到目前为止看到的 MathML 元素来编写以下表达式。如果您遇到困难或想验证解决方案，请查看示例的源代码。
总结
在本文中，我们研究了如何使用 <math> 元素在 HTML 文档中插入数学公式。我们了解了使用 display="block" 和不使用 display="block" 的 <math> 元素之间的渲染差异。此外，我们还遇到了其他几个 MathML 元素：用于分数的 <mfrac>，用于分组的 <mrow>，以及一些文本元素。我们将在下一篇文章中进一步分析这些 文本容器。