在 MathML 入门文章中，我们已经接触了 <mfrac> 元素来描述分数。让我们看一个基本示例，其中添加了根元素（<msqrt> 和 <mroot>）。
<math>
<mfrac>
<mtext>child1</mtext>
<mtext>child2</mtext>
</mfrac>
</math>
<br />
<math>
<msqrt>
<mtext>child1</mtext>
<mtext>child2</mtext>
<mtext>...</mtext>
<mtext>childN</mtext>
</msqrt>
</math>
<br />
<math>
<mroot>
<mtext>child1</mtext>
<mtext>child2</mtext>
</mroot>
</math>
下面是浏览器渲染此内容的截图。
- 我们已经知道
<mfrac> 元素被渲染成分数：第一个子元素（分子）绘制在第二个子元素（分母）上方，中间用一条水平线分隔。
<msqrt> 被渲染为平方根：其子元素像 <mrow> 一样布局，前面加上根号符号 √，并被一条横线完全覆盖。- 最后，
<mroot> 元素被渲染为 n 次方根：第一个元素被根号符号覆盖，而第二个元素用作根的次数，并作为前缀的上标渲染。
这里有一个练习，用于验证您是否理解了 MathML 子树与其视觉渲染之间的关系。文档包含一个 MathML 公式，您必须检查其中对应于该 MathML 公式子树的所有子树。完成后，您可以检查 MathML 公式源，并验证它是否符合您的预期。
<!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>
<math>
<mfrac id="mfrac1">
<msqrt id="msqrt1">
<mn>2</mn>
</msqrt>
<mroot id="mroot1">
<mn>4</mn>
<mn>3</mn>
</mroot>
</mfrac>
<mo>+</mo>
<mroot id="mroot2">
<mn>5</mn>
<mfrac id="mfrac2">
<mn>6</mn>
<mn>7</mn>
</mfrac>
</mroot>
<mo>+</mo>
<msqrt id="msqrt2">
<mn>8</mn>
<mo>−</mo>
<mn>9</mn>
</msqrt>
</math>
</p>
<ol id="options">
<li>
<input
type="checkbox"
data-comment="Verify the order of children in an mfrac!" />
An mfrac with an mroot as its first child and an msqrt as its second
child.
</li>
<li>
<input
type="checkbox"
data-highlight="mroot2"
data-comment="The '6 over 7'-th root of five." />
An mroot with an mn as its first child and mfrac as its second child.
</li>
<li>
<input
type="checkbox"
data-comment="This formula does not contain any fraction inside a square root!" />
An msqrt containing an mfrac element.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of two."
data-highlight="msqrt1" />
An msqrt with one mn child.
</li>
<li>
<input
type="checkbox"
data-comment="Verify the order of children in an mroot!" />
An mroot with an mfrac as its first child and mn as its second child.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of 'eight minus nine'."
data-highlight="msqrt2" />
An msqrt with the following list of children: mn, mo, mn.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of two over the cubic root of four."
data-highlight="mfrac1" />
An mfrac with an msqrt as its first child and an mroot as its second
child.
</li>
<li>
<input
type="checkbox"
data-comment="mfrac must have exactly two children!" />
An mfrac with the following list of children: msqrt, mn, msqrt.
</li>
<li>
<input
type="checkbox"
data-comment="mroot must have exactly two children!" />
An mroot with one mn child.
</li>
<li>
<input
type="checkbox"
data-comment="The fraction six over seven."
data-highlight="mfrac2" />
An mfrac with two mn children.
</li>
<li>
<input
type="checkbox"
data-comment="This formula does not contain any square root with more than two numbers!" />
An msqrt with five mn children.
</li>
<li>
<input
type="checkbox"
data-highlight="mroot1"
data-comment="The cubic root of four." />
An mroot with two mn children.
</li>
</ol>
<p>
<strong id="comment"></strong>
</p>
<p>
<strong id="status"></strong>
</p>
</body>
</html>
math {
font-family: "Latin Modern Math", "STIX Two Math", math;
font-size: 200%;
}
math .highlight {
background: pink;
}
math [id] .highlight {
background: lightblue;
}
p {
padding: 0.5em;
}
const options = document.getElementById("options");
const comment = document.getElementById("comment");
const checkboxes = Array.from(options.getElementsByTagName("input"));
const status = document.getElementById("status");
function verifyOption(checkbox) {
const mathml = checkbox.dataset.highlight
? document.getElementById(checkbox.dataset.highlight)
: null;
if (checkbox.checked) {
comment.textContent = checkbox.dataset.comment;
if (mathml) {
mathml.classList.add("highlight");
} else {
checkbox.checked = false;
}
} else {
comment.textContent = "";
if (mathml) {
mathml.classList.remove("highlight");
}
}
const finished = checkboxes.every(
(checkbox) => !!checkbox.checked === !!checkbox.dataset.highlight,
);
status.textContent = finished
? "Congratulations, you checked all the correct answers!"
: "";
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
verifyOption(checkbox);
});
});
如前所述，<msqrt> 和 <mroot> 元素的横线会水平拉伸以覆盖其内容。但实际上，根号符号 √ 也会拉伸以与其内容一样高。
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
<math display="block">
<mroot>
<msqrt>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</msqrt>
<mn>3</mn>
</mroot>
</math>
某些数学概念有时会使用类似分数的表示法，例如 二项式系数或 勒让德符号。使用 <mfrac> 元素来标记此类表示法是合适的。对于不绘制横线的类似分数表示法，请将 linethickness="0" 属性添加到 <mfrac> 元素。
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
<math display="block">
<mrow>
<mo>(</mo>
<mfrac linethickness="0">
<mn>3</mn>
<mn>2</mn>
</mfrac>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>3</mn>
<mo>≠</mo>
<mfrac>
<mn>3</mn>
<mn>2</mn>
</mfrac>
</math>
注意：虽然 linethickness 属性可以用来指定任意粗细，但最好保留默认值，该值是从数学字体中指定的参数计算得出的。
在本课中，我们学习了如何使用 <mfrac>、<msqrt> 和 <mroot> 元素构建分数和根。我们注意到这些元素的某些特殊功能，即分数和根号符号。我们看到了如何使用 linethickness 属性来绘制无横线的“分数”。在下一篇文章中，我们将继续介绍基础数学符号，并讨论 脚本。