MathML 指令碼元素 - MathML

下標和上標

與我們在上一篇文章中看到的類似，<msub>、<msup> 和 <msubsup> 具有特殊的結構，分別需要兩個（對於 <msub>、<msup>）或三個（對於 <msubsup>）元素。

html

<p>
  msub:
  <math>
    <msub>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </msub>
  </math>
</p>

<p>
  msup:
  <math>
    <msup>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </msup>
  </math>
</p>
<p>
  msubsup:
  <math>
    <msubsup>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
      <mtext>child3</mtext>
    </msubsup>
  </math>
</p>

下面是上面示例在您的瀏覽器中的渲染效果。

您應該注意到：

<msub> 元素的第二個子元素作為其第一個子元素的下標附加。
<msup> 元素的第二個子元素作為其第一個子元素Таким образом, мы приходим к выводу, что в результате применения такого подхода, мы должны получать весьма хорошие результаты.
<msubsup> 元素的第二個和第三個子元素分別作為其第一個子元素的下標和上標附加。
指令碼中的文字被縮小了。

注意： MathML 元素 <msub> 和 <msup> 與 HTML 元素 <sub> 和 <sup> 不同。它們允許作者將任意的 MathML 子樹作為指令碼提供，而不僅僅是文字。

下指令碼和上指令碼

<munder>、<mover> 和 <munderover> 元素非常相似，只是它們用於附加下指令碼和上指令碼。我們不會詳細介紹，而是讓您透過以下練習自行找出它們的定義。

識別下/上指令碼

在下面的示例中，請嘗試猜測神秘元素（用問號表示）的名稱，然後單擊按鈕以顯示答案。

<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly two children
  (child1, child2):
  <math>
    <mover>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </mover>
  </math>
</p>
<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly three children
  (child1, child2 and child3):
  <math>
    <munderover>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
      <mtext>child3</mtext>
    </munderover>
  </math>
</p>
<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly two children
  (child1, child2):
  <math>
    <munder>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </munder>
  </math>
</p>

<p><input type="button" id="showSolution" value="Show solution" /></p>

p {
  padding: 0.5em;
}

document.getElementById("showSolution").addEventListener("click", () => {
  const maths = Array.from(document.getElementsByTagName("math"));
  Array.from(document.getElementsByTagName("span")).forEach((span, index) => {
    span.textContent = maths[index].firstElementChild.tagName;
  });
});

識別指令碼元素

以下 MathML 公式包含一個更復雜的表示式，嵌套了分數、根號和指令碼。請嘗試猜測用指令碼元素 <msub>、<msup>、<msubsup>、<munder>、<mover>、<munderover> 排列的元素。每次單擊此類元素時，它都會被高亮顯示並顯示確認訊息。最後，閱讀 MathML 源以驗證其是否符合您的預期。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with scripted elements</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mroot>
        <mrow>
          <munder>
            <mi>β</mi>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mi>α</mi>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

const scriptedElements = Array.from(
  document.querySelectorAll("msub, msup, msubsup, munder, mover, munderover"),
);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  scriptedElements.forEach((scripted) => {
    scripted.classList.remove("highlight");
  });
}
scriptedElements.forEach((scripted) => {
  scripted.addEventListener("click", () => {
    clearHighlight();
    scripted.classList.add("highlight");
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>You clicked an <code>&lt;${scripted.tagName}&gt;</code> element.</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

更多運算子屬性

我們之前已經看到過 <mo> 元素的一些屬性，即垂直方向的拉伸和間距。現在指令碼元素可用了，我們可以擴充套件該列表。我們將透過調整我們之前的示例來做到這一點。

水平方向的拉伸

首先，我們執行替換。 $\beta := z*{1} + z*{2}$ and $\alpha := v*{1} + v*{2}$ :

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with horizontal stretchy operators</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mroot>
        <mrow>
          <munder>
            <mrow>
              <msub>
                <mi>z</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>z</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mrow>
              <msub>
                <mi>v</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>v</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

現在我們發現底部的括號“⎵”和右箭頭“→”會水平拉伸以覆蓋被替換值的寬度。回想一下，一些垂直運算子可以拉伸以覆蓋 <mrow> 中非拉伸同級項的高度。類似地，一些水平運算子可以拉伸以覆蓋 <munder>、<mover> 或 <munderover> 元素中非拉伸同級項的寬度。

注意： 拉伸可以發生在 <munder>、<mover> 或 <munderover> 元素的任何子元素上，而不僅僅是下指令碼或上指令碼。

大運算子和極限

到目前為止，我們的示例實際上是使用 <math> 標籤的 display="block" 屬性渲染的。讓我們看看不帶該屬性渲染的相同示例。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with moved limits and small largeop</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math>
      <mroot>
        <mrow>
          <munder>
            <mrow>
              <msub>
                <mi>z</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>z</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mrow>
              <msub>
                <mi>v</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>v</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

正如預期的那樣，公式不再居中，渲染效果也已修改以最小化高度。聚焦於求和符號，我們可以注意到 sigma 被繪製得更小，並且 <munderover> 元素的指令碼現在被附加為下標和上標！這是由於“∑”運算子的兩個屬性：

largeop：如果 <math> 標籤具有 display="block" 屬性，則運算子會以更大的字形繪製。
movablelimits：如果 <math> 標籤不具有 display="block" 屬性，則附加到運算子的下指令碼和上指令碼分別被渲染為下標和上標。

注意： largeop 屬性實際上與指令碼無關，儘管具有此屬性的運算子通常是帶指令碼的。movablelimits 屬性也適用於 <munder> 和 <mover> 元素。

總結

在本文中，我們完成了基本佈局的複習，介紹了用於下標、上標、下指令碼和上指令碼的元素 <msub>、<msup>、<msubsup>、<munder>、<mover>、<munderover>。使用這些元素，我們能夠簡要介紹 <mo> 元素的新屬性。在下一篇文章中，我們將繼續關注表格佈局。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年10月16日，作者為 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題