` 的特殊特性有了一些了解，让我们使用一些实际中用到的 MathML 来重写[页面顶部的示例](#数学符号的_unicode_字符)中的 `` 元素。比较新版本与纯文本版本在你的浏览器中的视觉呈现，并解释两者的区别。
+
+```html
+
+
+
+
+ 带数学字符的页面
+
+
+
+ ∀A∊𝔰𝔩(n,𝔽),TrA=0
+
+
+
+
+
+
+
+```
+
+```css hidden
+div {
+ padding: 0.5em;
+}
+```
+
+```js hidden
+document.getElementById("showSolution").addEventListener(
+ "click",
+ () => {
+ document.getElementById("solution").insertAdjacentHTML(
+ "beforeEnd",
+ `
+ - 包裹“A”和“n”变量的
<mi>元素以斜体渲染。但是，具有包含多个字符的“𝔰𝔩”或字符为“𝔽”的<mi>元素仍然以直立的方式渲染。
+ - 在文本为“∀”，“∊”，“=”或逗号的
<mo>元素周围自动添加间距。但是，其中一些元素之前没有添加间距，而括号周围也没有间距。
+
`,
+ );
+ },
+ { once: true },
+);
+```
+
+{{ EmbedLiveSample('active_learning_spot_the_difference', 700, 500, "", "") }}
+
+> **备注：**一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[创作 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。
+
+### 主动学习：可伸缩运算符
+
+操作符词典定义了一些操作符的默认*可伸缩*属性以及相应的*伸缩轴*。例如，操作符可以默认垂直伸展，以覆盖其 `` 容器中非可伸缩兄弟节点的最大高度。通过稍微调整[之前的练习](#主动学习_识别标记元素)，你可以使操作符在垂直方向上伸展。你能找到它们吗？
+
+```html hidden
+
+
+
+
+ 具有垂直操作符的页面
+
+
+
+
+
+
+
+
+```
+
+```css hidden
+.highlight {
+ color: red;
+}
+math {
+ font-size: 200%;
+}
+```
+
+```js hidden
+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 = `<${token.tagName}>`;
+ if (token.tagName !== "mo") message = `不，这是 ${tagName} 元素！`;
+ else if (!stretchyMoElements.includes(token))
+ message = `不，这是 ${tagName} 元素，但它不是垂直伸展元素。`;
+ else
+ message = `正确，此 ${tagName} 元素伸展至它的 <mfrac> 兄弟元素的高度。`;
+ outputDiv.insertAdjacentHTML(
+ "beforeend",
+ `${message}
`,
+ );
+ });
+});
+document.getElementById("clearOutput").addEventListener("click", () => {
+ clearHighlight();
+ outputDiv.innerHTML = "";
+});
+```
+
+{{ EmbedLiveSample('Active_learning_stretchy_fences', 700, 400, "", "") }}
+
+一如往常，请你在完成后阅读源码：
+
+```xml
+
+```
+
+> **警告：**通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于[网络字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
+
+## 总结
+
+在本文中，我们学习了一些用作文本容器的 _token_ 元素及其不同的语义，即 ``（标识符）、``（数字）、``（运算符）、``（通用文本）。我们介绍了在数学公式中常见的特殊 Unicode 字符，并概述了 `` 和 `` 元素的一些可观察表现。在下一篇文章中，我们将学习如何借助 _token_ 元素构建更复杂的表达式，例如[分数和根号](/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots)。
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}}
+
+## 参见
+
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mi)
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mn)
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mo)
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtext)
From 4ccd90a37d5f1c3e3645863b1a0b69d8ffcfd063 Mon Sep 17 00:00:00 2001
From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com>
Date: Sun, 29 Oct 2023 19:25:31 +0800
Subject: [PATCH 2/4] fix typesetting
---
files/zh-cn/learn/mathml/first_steps/text_containers/index.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
index 2ae3be8e4f0bde..d4988935b24c96 100644
--- a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
@@ -314,7 +314,7 @@ document.getElementById("showSolution").addEventListener(
{{ EmbedLiveSample('active_learning_spot_the_difference', 700, 500, "", "") }}
-> **备注：**一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[创作 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。
+> **备注：** 一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[创作 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。
### 主动学习：可伸缩运算符
@@ -453,7 +453,7 @@ document.getElementById("clearOutput").addEventListener("click", () => {
```
-> **警告：**通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于[网络字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
+> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于[网络字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。
## 总结
From d354dff60d52ba41044cfae2dc200dd409f50d37 Mon Sep 17 00:00:00 2001
From: A1lo
Date: Mon, 30 Oct 2023 15:17:49 +0800
Subject: [PATCH 3/4] Update index.md
---
files/zh-cn/learn/mathml/first_steps/text_containers/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
index d4988935b24c96..a4647f2fa1ef69 100644
--- a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
@@ -195,7 +195,7 @@ document.getElementById("clearOutput").addEventListener("click", () => {
{{ EmbedLiveSample('阻止 自动斜体化', 700, 50) }}
-> **备注：**尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。
+> **备注：** 尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。
## \ 的运算符属性
From 7cf5635d199cbbe11428bc1f33f07651fc485d3d Mon Sep 17 00:00:00 2001
From: hanyujie2002
Date: Tue, 31 Oct 2023 16:48:00 +0800
Subject: [PATCH 4/4] Apply suggestions from code review
Co-authored-by: A1lo
---
.../first_steps/text_containers/index.md | 46 ++++++++++---------
1 file changed, 24 insertions(+), 22 deletions(-)
diff --git a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
index a4647f2fa1ef69..5717dfff6873fa 100644
--- a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
+++ b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md
@@ -22,8 +22,10 @@ slug: Learn/MathML/First_steps/Text_containers
href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
>HTML 入门），并对文本样式方面的 CSS 有一定的了解（阅读文本和字体样式基础和网络字体）。
+ href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals"
+ >文本和字体样式基础和
+ Web 字体）。
@@ -39,7 +41,7 @@ slug: Learn/MathML/First_steps/Text_containers
数学公式涉及许多特殊字符，例如希腊字母（例如 Δ）、弗拉克图尔字母（例如 𝔄）、双线字母（例如 ℂ）、二元运算符（例如 ≠）、箭头（例如 ⇒）、积分符号（例如 ∮）、求和符号（例如 ∑）、逻辑符号（例如 ∀）以及括号（例如 ⌊）等等。维基百科的文章[数学运算符和符号的 Unicode](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) 提供了这些字符的概述。
-由于这些字符大多不属于基本拉丁 Unicode 块，因此建议指定你的[文档字符编码](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#指定文档中的字符编码)，并使用适当的[网络字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。以下是一个使用 UTF-8 编码和 [Latin Modern Math](/zh-CN/docs/Web/MathML/Fonts#带有数学表的字体) 字体的基本模板：
+由于这些字符大多不属于基本拉丁 Unicode 块，因此建议指定你的[文档字符编码](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#指定文档中的字符编码)，并使用适当的 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。以下是一个使用 UTF-8 编码和 [Latin Modern Math](/zh-CN/docs/Web/MathML/Fonts#带有数学表的字体) 字体的基本模板：
```html
@@ -59,13 +61,13 @@ slug: Learn/MathML/First_steps/Text_containers
{{ EmbedLiveSample('数学 Unicode 字符', 700, 100, "", "") }}
-## 一些语义化
+## 一些语义
-我们在 [MathML 使用入门](/zh-CN/docs/Learn/MathML/First_steps/Getting_started)文章中提到，MathML 公式中的文本被包裹在特定的容器元素中，例如 `` 或 ``。一般而言，MathML 公式中的所有文字都必须包含在这类容器元素中，这类元素被称为 _token_ 元素。此外，MathML 提供了多种 token 元素，以区分文字内容的不同含义。
+我们在 [MathML 使用入门](/zh-CN/docs/Learn/MathML/First_steps/Getting_started)文章中提到，MathML 公式中的文本被包裹在特定的容器元素中，例如 `` 或 ``。一般而言，MathML 公式中的所有文字都必须包含在这类容器元素中，这类元素被称为*标记*（token）元素。此外，MathML 提供了多种标记元素，以区分文字内容的不同含义。
-- `` 元素表示“标识符”，其可以是符号名称或任意文本。例如：`x`（变量），`cos`（函数名）和 `π`（符号常量）。
-- `` 元素表示“数值文字”或其他应呈现为数值文字的数据。例如：`2`（整数），`0.123`（小数）或 `0xFFEF`（十六进制值）。
-- `` 元素表示运算符或任何应呈现为运算符的内容。例如：`+`（二元运算符），`≤`（二元关系符），`∑`（求和符号）或 `[`（括号）。
+- `` 元素表示“标识符”，其可以是符号名称或任意文本。例如：`x`（变量）、`cos`（函数名）和 `π`（符号常量）。
+- `` 元素表示“数值文字”或其他应呈现为数值文字的数据。例如：`2`（整数）、`0.123`（小数）或 `0xFFEF`（十六进制值）。
+- `` 元素表示运算符或任何应呈现为运算符的内容。例如：`+`（二元运算符）、`≤`（二元关系符），`∑`（求和符号）或 `[`（括号）。
- `` 元素用于表示任意文本。例如公式中的短词，如 `if` 或 `映射到`。
### 主动学习：识别标记元素
@@ -100,7 +102,7 @@ slug: Learn/MathML/First_steps/Text_containers
0
-
+