MathML 文本容器 - MathML | MDN

数学 Unicode 字符

数学公式包含许多特殊字符，例如希腊字母（例如 Δ）、花体字母（例如 𝔄）、双线字母（例如 ℂ）、二元运算符（例如 ≠）、箭头（例如 ⇒）、积分符号（例如 ∮）、求和符号（例如 ∑）、逻辑符号（例如 ∀）、界定符（例如 ⌊）等等。维基百科文章 Unicode 中的数学运算符和符号提供了这些字符的良好概述。

由于这些字符大多数不属于基本拉丁 Unicode 块，因此建议指定您的文档的字符编码并使用适当的网页字体来提供它。以下是使用 UTF-8 编码和 Latin Modern Math 字体的基本模板。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with math characters</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <p>∀A∊𝔰𝔩(n,𝔽),TrA=0</p>
  </body>
</html>

css

p {
  font-family: "Latin Modern Math", math;
}

一点语义学

我们在 MathML 入门文章中注意到，MathML 公式中的文本被包装在特定的容器元素中，例如 <mn> 或 <mo>。更一般地说，MathML 公式中的所有文本都必须包含在这样的容器元素中，称为令牌元素。此外，MathML 提供了多个令牌元素，以区分文本内容的各种含义。

<mi> 元素，代表“标识符”，可以是符号名称或任意文本。示例：<mi>x</mi>（变量）、<mi>cos</mi>（函数名）和 <mi>π</mi>（符号常量）。
<mn> 元素代表“数字文字”或其他应渲染为数字文字的数据。示例：<mn>2</mn>（整数）、<mn>0.123</mn>（十进制数）或 <mn>0xFFEF</mn>（十六进制值）。
<mo> 元素代表运算符或任何应渲染为运算符的内容。例如 <mo>+</mo>（二元运算）、<mo>≤</mo>（二元关系）、<mo>∑</mo>（求和符号）或 <mo>[</mo>（界定符）。
<mtext> 元素用于表示任意文本。例如公式中的短语，如 <mtext>if</mtext> 或 <mtext>maps to</mtext>。

轮到您了：识别令牌元素

下面是一个更复杂的示例，它表示实数的绝对值等于该数字本身，当且仅当它非负。我们希望您尝试识别不同的令牌元素以及它们的作用。每次单击相应的文本时，都会突出显示它并显示确认消息。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with math characters</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mrow>
        <mrow>
          <mo>|</mo>
          <mi>x</mi>
          <mo>|</mo>
        </mrow>
        <mo>=</mo>
        <mi>x</mi>
      </mrow>
      <mtext>&nbsp;iff&nbsp;</mtext>
      <mrow>
        <mi>x</mi>
        <mo>≥</mo>
        <mn>0</mn>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

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

const tokenElements = Array.from(
  document.querySelectorAll("mi, mo, mn, mtext"),
);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  tokenElements.forEach((token) => {
    token.classList.remove("highlight");
  });
}
tokenElements.forEach((token) => {
  token.addEventListener("click", () => {
    clearHighlight();
    token.classList.add("highlight");
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>You clicked an <code>&lt;${token.tagName}&gt;</code> element.</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

最后，阅读 MathML 源代码以验证它是否符合您的预期。

xml

<math display="block">
  <mrow>
    <mrow>
      <mo>|</mo>
      <mi>x</mi>
      <mo>|</mo>
    </mrow>
    <mo>=</mo>
    <mi>x</mi>
  </mrow>
  <mtext>&nbsp;iff&nbsp;</mtext>
  <mrow>
    <mi>x</mi>
    <mo>≥</mo>
    <mn>0</mn>
  </mrow>
</math>

注意：有时很难为给定的文本内容选择要使用的令牌元素。实际上，选择错误的元素不应该导致主要问题，因为所有令牌元素通常在浏览器实现中都以相同的方式渲染（用于视觉显示和辅助技术）。然而，<mi> 和 <mo> 元素具有一些特殊的区分特征，您应该了解它们。它们将在以下各节中进行解释。

`<mi>` 的自动斜体化

数学中的一个排版约定是使用斜体字母表示变量。为了帮助实现这一点，包含单个字符的 <mi> 元素可能会自动渲染为斜体。拉丁字母和希腊字母都是如此。比较下面公式中两个 <mi> 元素的渲染效果。

html

<math>
  <mi>sin</mi>
  <mi>x</mi>
</math>

注意： MathML Core 的此表提供了受斜体化影响的字符的完整列表，以及相应的斜体字符。

撤销 `<mi>` 的自动斜体化

为了撤销此默认的斜体转换，您可以在 <mi> 元素上附加一个 mathvariant="normal" 属性。比较下面公式中大写伽马字母的渲染效果。

html

<math>
  <mi>Γ</mi>
  <mi mathvariant="normal">Γ</mi>
</math>

注意：虽然您可以执行此转换，但通常您只需使用所需的数学字母数字符号。

`<mo>` 的运算符属性

MathML 包含一个运算符字典，该字典根据 <mo> 元素的内容以及它们在其容器中的位置（前缀、中缀或后缀）来定义其默认属性。让我们看一个具体示例。

html

<table>
  <tr>
    <td>Prefix plus</td>
    <td>
      <math>
        <mo>+</mo>
        <mi>i</mi>
      </math>
    </td>
  </tr>
  <tr>
    <td>Infix plus</td>
    <td>
      <math>
        <mi>j</mi>
        <mo>+</mo>
        <mi>i</mi>
      </math>
    </td>
  </tr>
  <tr>
    <td>Prefix sum</td>
    <td>
      <math>
        <mo>∑</mo>
        <mi>i</mi>
      </math>
    </td>
  </tr>
</table>

此示例应与下面的屏幕截图类似。观察 <mi>i</mi> 元素与其前面的 <mo> 之间的间距：前缀加号没有间距，中缀加号有一些间距，前缀求和符号则有一些更小的间距。

$Screenshot of the MathML formula with different operator spacing$

运算符还有许多其他属性，我们将在稍后更详细地介绍。现在，请记住为运算符字典中的字符使用 <mo> 容器，并使用 <mrow> 元素正确地组合子表达式，以帮助 MathML 渲染器。

找出区别

现在您对 <mi> 和 <mo> 的特殊功能有所了解，我们希望您能用实际的 MathML 重写页面顶部的示例中的 <p> 元素。比较您的浏览器中的视觉渲染，并解释与纯文本版本之间的差异。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with math characters</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <p class="text">∀A∊𝔰𝔩(n,𝔽),TrA=0</p>
    <p>
      <math>
        <mo>∀</mo>
        <mrow>
          <mi>A</mi>
          <mo>∊</mo>
          <mrow>
            <mi>𝔰𝔩</mi>
            <mrow>
              <mo>(</mo>
              <mi>n</mi>
              <mo>,</mo>
              <mi>𝔽</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
        </mrow>
        <mo>,</mo>
        <mrow>
          <mrow>
            <mi>Tr</mi>
            <mi>A</mi>
          </mrow>
          <mo>=</mo>
          <mn>0</mn>
        </mrow>
      </math>
    </p>
    <input id="showSolution" type="button" value="Show solution" />
    <div id="solution"></div>
  </body>
</html>

div {
  padding: 0.5em;
}

.text {
  font-family: "Latin Modern Math", math;
}

document.getElementById("showSolution").addEventListener(
  "click",
  () => {
    document.getElementById("solution").insertAdjacentHTML(
      "beforeEnd",
      `<ul>
      <li><strong>The <code>&lt;mi&gt;</code> elements containing the "A" and "n" variables are rendered in italic</strong>. However, the <code>&lt;mi&gt;</code> elements with multiple characters "𝔰𝔩" or whose character is "𝔽" are still rendered upright.</li>
      <li><strong>Spacing is automatically added around the <code>&lt;mo&gt;</code> elements whose text is "∀", "∊", "=" or a comma</strong>. However, some of them have no spacing added before while the parentheses still have no spacing around them.</li>
    </ul>`,
    );
  },
  { once: true },
);

注意：一个显而易见的区别是，使用 MathML 后源代码变得更加冗长。请记住，本教程是关于学习语言的，但在实践中，MathML 内容通常不是手动编写的。有关更多信息，请参阅编写 MathML 页面。

识别可拉伸运算符

运算符字典为某些运算符定义了默认的可拉伸属性以及相应的拉伸轴。例如，运算符可以垂直拉伸以覆盖其 <mrow> 容器内非可拉伸兄弟元素的最大高度。通过调整前面的练习，可以使运算符垂直拉伸。你能找到它们吗？

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with stretchy operators</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mrow>
        <mrow>
          <mo>|</mo>
          <mfrac>
            <mn>1</mn>
            <mi>x</mi>
          </mfrac>
          <mo>|</mo>
        </mrow>
        <mo>=</mo>
        <mfrac>
          <mn>1</mn>
          <mrow>
            <mo>|</mo>
            <mi>x</mi>
            <mo>|</mo>
          </mrow>
        </mfrac>
        <mo>=</mo>
        <mfrac>
          <mn>1</mn>
          <mi>x</mi>
        </mfrac>
      </mrow>
      <mtext>&nbsp;iff&nbsp;</mtext>
      <mrow>
        <mi>x</mi>
        <mo>≥</mo>
        <mn>0</mn>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

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

const tokenElements = Array.from(
  document.querySelectorAll("mi, mo, mn, mtext"),
);
const stretchyMoElements = Array.from(
  document.getElementsByTagName("mo"),
).slice(0, 2);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  tokenElements.forEach((token) => {
    token.classList.remove("highlight");
  });
}
tokenElements.forEach((token) => {
  token.addEventListener("click", () => {
    clearHighlight();
    token.classList.add("highlight");
    let message = "";
    let tagName = `<code>&lt;${token.tagName}&gt;</code>`;
    if (token.tagName !== "mo") message = `No, this is an ${tagName} element!`;
    else if (!stretchyMoElements.includes(token))
      message = `No, this is an ${tagName} element, but it's not vertically stretched.`;
    else
      message = `Correct, this ${tagName} element is indeed stretched to the height of its <code>&lt;mfrac&gt;</code> sibling.`;
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>${message}</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

一如既往，您可以在完成后阅读源代码。

xml

<math display="block">
  <mrow>
    <mrow>
      <mo>|</mo>
      <mfrac>
        <mn>1</mn>
        <mi>x</mi>
      </mfrac>
      <mo>|</mo>
    </mrow>
    <mo>=</mo>
    <mfrac>
      <mn>1</mn>
      <mrow>
        <mo>|</mo>
        <mi>x</mi>
        <mo>|</mo>
      </mrow>
    </mfrac>
    <mo>=</mo>
    <mfrac>
      <mn>1</mn>
      <mi>x</mi>
    </mfrac>
  </mrow>
  <mtext>&nbsp;iff&nbsp;</mtext>
  <mrow>
    <mi>x</mi>
    <mo>≥</mo>
    <mn>0</mn>
  </mrow>
</math>

警告：要实现这种拉伸，通常需要特殊数学字体，前面的示例依赖于网页字体。

总结

在本文中，我们了解了几个用作文本容器的令牌元素及其不同的语义，即 <mi>（标识符）、<mn>（数字）、<mo>（运算符）、<mtext>（通用文本）。我们看到了数学公式中常见的特殊 Unicode 字符，并概述了 <mi> 和 <mo> 元素的一些可观察行为。在下一篇文章中，我们将学习如何利用令牌元素构建更复杂的表达式，例如分数和根号。

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月22日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题