<math>

Baseline 已广泛支持

此功能已成熟,并且在众多设备和浏览器版本上都能正常工作。自 2023 年 1 月以来,它已在各浏览器中可用。

<math> MathML 元素是顶级的 MathML 元素,用于编写单个数学公式。它可以在允许 流内容 的 HTML 内容中放置。

注意: 请参阅 编写 MathML 页面 以获取有关将 MathML 公式正确集成到网页中的技巧,以及 指南 页面以获取更多演示。

属性

此元素的属性包括 全局 MathML 属性 以及以下属性

display

枚举 属性指定如何渲染包含的 MathML 标记。它可以具有以下值之一:

  • block,表示该元素将在其自己的块中显示,位于当前文本跨度之外,并且 math-style 设置为 normal
  • inline,表示该元素将在当前文本跨度内显示,并且 math-style 设置为 compact

如果不存在,则默认值为 inline

无障碍

<math> 元素具有隐式的 math ARIA 角色。辅助技术可以使用此角色将内容识别为数学表达式并将其传达给用户。

例如,屏幕阅读器将以下二次公式表示为类似于:

x 等于 分数开始,负 b 加或减平方根 b 的平方减 4 ac,根结束,除以 2 a,分数结束,数学

二次公式的标记
html
<math display="block">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mrow>
          <mo>−</mo>
          <mi>b</mi>
        </mrow>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>−</mo>
            <mrow>
              <mn>4</mn>
              <mo>⁢</mo>
              <mi>a</mi>
              <mo>⁢</mo>
              <mi>c</mi>
            </mrow>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>⁢</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

示例

此示例包含两个 MathML 公式。第一个以居中块的形式渲染,占用所需空间。第二个在文本段落内渲染,尺寸和间距减小,以最大限度地减小其高度。

html
<p>
  The infinite sum
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  is equal to the real number
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac>
  </math>
  .
</p>

技术摘要

隐式 ARIA 角色 math

规范

规范
MathML Core
# the-top-level-math-element

浏览器兼容性

另见

  • HTML 顶级元素: <html>
  • SVG 顶级元素: <svg>