开始使用 MathML

在本文中，我们将以一个简单的 HTML 文档为例，看看如何在其中添加 MathML 公式，并介绍一些元素。

先决条件 已安装基本软件，了解 文件操作 的基本知识，以及 HTML 基础知识（学习 HTML 简介。）
目标 了解 MathML 的基本语法以及如何在 HTML 页面中集成它。

通过 <math> 元素在 HTML 中插入公式

MathML 使用与 HTML 相同的语法来表示元素和属性树。特别是，每个数学公式都由一个 <math> 元素表示，可以将其放置在 HTML 页面中。在以下文档中，它位于一段文本中

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 属性

请注意，在前面的示例中，公式位于与段落文本相同的行上。但是，通常将较大的数学公式居中显示在单独的行上，如下所示。为此，您需要在 <math> 元素上附加一个 display="block" 属性。

您可能还会注意到外观的一些细微变化：分数的文本和垂直间距变得更大。如果没有 display="block" 属性，高度将最小化以避免干扰周围文本的流动。有了 display="block" 属性，优先考虑的是数学公式的可读性。

注意：这对应于 LaTeX 的内联公式（由美元符号 $...$ 标记）和显示公式（由 \[...\] 标记）的概念。

注意：上面提到的外观变化实际上由 math-style 属性控制，该属性对于 <math display="block"> 初始值为 normal，否则为 compact。在某些 MathML 子树中，此属性可能会自动变为 compact，但对于本入门教程，我们将忽略这个细微差别。同样，这与 LaTeX 类似。

使用 <mrow> 元素进行分组

<math> 元素实际上可以包含任意数量的子元素，并且基本上会按行呈现它们。例如，简单的公式“1 + 2 + 3”将在 MathML 中这样编码

html
<math>
  <mn>1</mn>
  <mo>+</mo>
  <mn>2</mn>
  <mo>+</mo>
  <mn>3</mn>
</math>

<mrow> 元素是一个通用容器，它执行类似的布局，但可以放置在 MathML 子树中的任何位置。它有助于将几个元素组合在一起。例如，以下分数（它的第一个子元素）的分子是“one plus two”。

html
<math>
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
    <mn>3</mn>
  </mfrac>
</math>

主动学习：嵌套表达式

作为一个练习，请找出如何使用我们迄今为止看到的 MathML 元素来编写以下表达式。如果您卡住了或想验证解决方案，请查看示例的源代码。

总结

在本文中，我们介绍了如何在 HTML 文档中使用 <math> 元素插入数学公式。我们学习了使用 display="block" 或不使用 display="block" 的 <math> 元素之间的渲染差异。此外，我们还遇到了一些其他的 MathML 元素：用于分数的 <mfrac>、用于分组的 <mrow> 以及一些文本元素。我们将在下一篇文章中进一步分析这些 文本容器。

另请参阅