開始使用 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" 屬性。

<!doctype html>
<html lang="en-US">
  <head>
    <title>My first math page</title>
  </head>
  <body>
    <p>
      The fraction
      <math display="block">
        <mfrac>
          <mn>1</mn>
          <mn>3</mn>
        </mfrac>
      </math>
      is not a decimal number.
    </p>
  </body>
</html>

您可能還會注意到外觀的一些細微變化：分數的文字和垂直間距變得更大。如果沒有 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 元素來編寫以下表達式。如果您卡住了或想驗證解決方案，請檢視示例的原始碼。

<ol>
  <li>
    "one half" plus "two third":
    <!-- It's correct but unnecessary to group the children of the math element with an mrow element. -->
    <math>
      <mfrac>
        <mn>1</mn>
        <mn>2</mn>
      </mfrac>
      <mo>+</mo>
      <mfrac>
        <mn>2</mn>
        <mn>3</mn>
      </mfrac>
    </math>
  </li>
  <li>
    "one plus two plus three" over "four plus five":
    <math>
      <mfrac>
        <mrow>
          <mn>1</mn>
          <mo>+</mo>
          <mn>2</mn>
          <mo>+</mo>
          <mn>3</mn>
        </mrow>
        <mrow>
          <mn>4</mn>
          <mo>+</mo>
          <mn>5</mn>
        </mrow>
      </mfrac>
    </math>
  </li>
  <li>
    "one quarter" over "two plus three":
    <math>
      <mfrac>
        <mfrac>
          <mn>1</mn>
          <mn>4</mn>
        </mfrac>
        <mrow>
          <mn>2</mn>
          <mo>+</mo>
          <mn>3</mn>
        </mrow>
      </mfrac>
    </math>
  </li>
</ol>

在本文中，我們介紹瞭如何在 HTML 文件中使用 <math> 元素插入數學公式。我們學習了使用 display="block" 或不使用 display="block" 的 <math> 元素之間的渲染差異。此外，我們還遇到了一些其他的 MathML 元素：用於分數的 <mfrac>、用於分組的 <mrow> 以及一些文字元素。我們將在下一篇文章中進一步分析這些文字容器。

開始使用 MathML

透過 <math> 元素在 HTML 中插入公式

display 屬性

使用 <mrow> 元素進行分組

主動學習：巢狀表示式

總結

另請參閱