透過 <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>，以及一些文字元素。我們將在下一篇文章中進一步分析這些 文字容器。