MathML 脚本元素 - MathML | MDN

下标和上标

与我们在上一篇文章中看到的类似，<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 上查看此页面 • 报告此内容的问题