From 8a87ab42646dec3e3679ae81c1a2a8d4cf92aa96 Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Thu, 9 Nov 2023 21:37:30 +0800 Subject: [PATCH 1/7] zh-cn: init the translation of mathml scripts --- .../learn/mathml/first_steps/scripts/index.md | 487 ++++++++++++++++++ 1 file changed, 487 insertions(+) create mode 100644 files/zh-cn/learn/mathml/first_steps/scripts/index.md diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md new file mode 100644 index 00000000000000..2878d83c6034b6 --- /dev/null +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -0,0 +1,487 @@ +--- +title: MathML 标记 +slug: Learn/MathML/First_steps/Scripts +page-type: learn-module-chapter +--- + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} + +我们继续回顾基本数学符号，并重点介绍如何使用标记构建 MathML 元素。 + + + + + + + + + + + + +
前提： + 基本的计算机操作能力，安装基本软件，处理文件的基本知识，以及 HTML 基础知识（可以学习HTML 入门。） +
目标： + 熟悉基本的 MathML 上下标元素。 +
+ +## 下标和上标 + +类似于我们在[上一篇文章](/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots)中所学习的，``、`` 和 `` 具有特殊的结构，它们恰好有两个元素（``、``）或三个元素（``）： + +```html +

+ msub: + + + child1 + child2 + + +

+ +

+ msup: + + + child1 + child2 + + +

+

+ msubsup: + + + child1 + child2 + child3 + + +

+``` + +以下是在你的浏览器中呈现上述示例的结果。 + +{{ EmbedLiveSample('msub_msup_msubsup 的子树', 700, 200, "", "") }} + +可以看出： + +- `` 元素的第二个子元素作为其第一个子元素的下标附加。 +- `` 元素的第二个子元素作为其第一个子元素的上标附加。 +- `` 元素的第二个和第三个子元素分别作为其第一个子元素的下标和上标附加。 +- 上下标内的文本会缩小显示。 + +> **备注：** MathML 元素 `` 和 `` 与 HTML 元素 [``](/zh-CN/docs/Web/HTML/Element/sub) 和 [``](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为上下标，而不仅仅是文本。 + +## 底标和顶标 + +``、`` 和 `` 元素与之前介绍的元素非常相似，只是它们用于附加底标（underscript）和顶标（overscirpt）。我们不会提供详细信息，而是让你自己通过以下练习来了解它们的定义。 + +### 主动学习：识别底标和顶标 + +在下面的示例中，试着猜测神秘元素的名称（用问号表示），然后点击按钮来显示答案： + +```html hidden +

+ <????????> + 元素正好具有两个子元素（child1、child2）： + + + child1 + child2 + + +

+

+ <????????> + 元素正好具有三个子元素（child1、child2 以及 child3）： + + + child1 + child2 + child3 + + +

+

+ <????????> + 元素正好具有两个子元素（child1、child2）： + + + child1 + child2 + + +

+ +

+``` + +```css hidden +p { + padding: 0.5em; +} +``` + +```js hidden +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; + }); +}); +``` + +{{ EmbedLiveSample('munder_mover_munderover 的子树', 700, 400, "", "") }} + +### 主动学习：识别标记元素 + +以下的 MathML 公式包含了更复杂的表达式，嵌套了分数、根号和标记元素。尝试猜测使用了 ``、``、``、``、``、`` 的元素。每次当你点击这样的元素时，它会被突出显示，并显示确认信息。最后，阅读 MathML 源代码以验证是否与你的预期相符。 + +```html hidden + + + + + 带有标记元素的页面 + + + + + + + + β + ⎵ + + + 3 + + + + + | + + α + → + + | + + + s + 3 + + + − + + + ∑ + + i + = + 1 + + n + + + + + a + i + + − + + K + 0 + i + + + + + + +
+ + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +```js hidden +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", + `

你点击了 <${scripted.tagName}> 元素。

`, + ); + }); +}); +document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; +}); +``` + +{{ EmbedLiveSample('主动学习：识别标记元素', 700, 400, "", "") }} + +## 其他运算符属性 + +我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了脚本元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习_识别标记元素)来实现这一点。 + +### 在水平方向上的拉伸 + +首先，让我们进行以下替换： β ≔ z 1 + z 2 和 α ≔ v 1 + v 2 ： + +```html hidden + + + + + 带有水平拉伸操作符的页面 + + + + + + + + + + z + 1 + + + + + z + 2 + + + ⎵ + + + 3 + + + + + | + + + + v + 1 + + + + + v + 2 + + + → + + | + + + s + 3 + + + − + + + ∑ + + i + = + 1 + + n + + + + + a + i + + − + + K + 0 + i + + + + + + + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +{{ EmbedLiveSample('水平方向拉伸', 700, 200, "", "") }} + +可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators)，以覆盖 `` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 ``、`` 或 `` 元素中非伸展兄弟节点的宽度。 + +> **备注：** 伸展适用于 ``、`` 或 `` 元素的任何子元素，不仅仅是底标或顶标。 + +### 大型运算符和极限 + +到目前为止，我们的示例实际上是使用 [`display="block"`](/zh-CN/docs/Learn/MathML/First_steps/Getting_started#display_属性) 属性呈现的。让我们看一下同一个示例，在没有该属性的情况下渲染的效果： + +```html hidden + + + + + 极限符号被挪动并且大型运算符变小的页面 + + + + + + + + + + z + 1 + + + + + z + 2 + + + ⎵ + + + 3 + + + + + | + + + + v + 1 + + + + + v + 2 + + + → + + | + + + s + 3 + + + − + + + ∑ + + i + = + 1 + + n + + + + + a + i + + − + + K + 0 + i + + + + + + + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +{{ EmbedLiveSample('大型运算符和极限', 700, 200, "", "") }} + +不出所料，公式不再居中，渲染方式发生变动，导致高度最小化。注意求和符号，可以看到求和符号变小了，并且 `` 元素的标记现在以下标和上标的方式附加在其上！这是由于“∑”运算符的两个属性： + +- _largeop_：如果 `` 标签具有 `display="block"` 属性，则使用更大的字形绘制运算符。 +- _movablelimits_：如果 `` 标签没有 `display="block"` 属性，则将附加在运算符上的底标和顶标分别渲染为下标和上标。 + +> **备注：** _largeop_ 属性实际上与标记无关，尽管具有此属性的运算符通常会有标记。_movablelimits_ 属性也适用于 `` 和 `` 元素。 + +## 总结 + +在本文中，我们完成了对引入下标、上标、底标和顶标的基本布局元素 ``、``、``、``、`` 以及 `` 的介绍。在介绍这些元素的过程中，我们顺便介绍了 `` 元素的新属性。在下一篇文章中，我们将继续关注[表格布局](/zh-CN/docs/Learn/MathML/First_steps/Tables)。 + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} + +## 参见 + +- [ 元素](/zh-CN/docs/Web/MathML/Element/msub) +- [ 元素](/zh-CN/docs/Web/MathML/Element/msup) +- [ 元素](/zh-CN/docs/Web/MathML/Element/msubsup) +- [ 元素](/zh-CN/docs/Web/MathML/Element/munder) +- [ 元素](/zh-CN/docs/Web/MathML/Element/mover) +- [ 元素](/zh-CN/docs/Web/MathML/Element/munderover) From 48a9740ca582cf3dee9791b12f4543dcfba286ac Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Thu, 9 Nov 2023 21:42:28 +0800 Subject: [PATCH 2/7] fix --- files/zh-cn/learn/mathml/first_steps/scripts/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md index 2878d83c6034b6..30d094f3f6964c 100644 --- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -1,7 +1,6 @@ --- title: MathML 标记 slug: Learn/MathML/First_steps/Scripts -page-type: learn-module-chapter --- {{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} From e25cfe5dc9ec98388b21823bcb3e9abbe6c3ef14 Mon Sep 17 00:00:00 2001 From: hanyujie2002 Date: Tue, 14 Nov 2023 20:31:40 +0800 Subject: [PATCH 3/7] Apply suggestions from code review Co-authored-by: A1lo --- files/zh-cn/learn/mathml/first_steps/scripts/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md index 30d094f3f6964c..58a3d93e193b6d 100644 --- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -15,9 +15,9 @@ slug: Learn/MathML/First_steps/Scripts 基本的计算机操作能力，安装基本软件，处理文件的基本知识，以及 HTML 基础知识（可以学习，处理文件的基本知识，以及 + HTML 基础知识（可以学习 HTML 入门。） @@ -69,7 +69,7 @@ slug: Learn/MathML/First_steps/Scripts 以下是在你的浏览器中呈现上述示例的结果。 -{{ EmbedLiveSample('msub_msup_msubsup 的子树', 700, 200, "", "") }} +{{EmbedLiveSample('msub_msup_msubsup 的子树', 700, 200)}} 可以看出： From 2764a54e0c8ce0c083dd9a52aea4dd67b15082d6 Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Tue, 14 Nov 2023 20:33:49 +0800 Subject: [PATCH 4/7] fix --- files/zh-cn/learn/mathml/first_steps/scripts/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md index 30d094f3f6964c..df8a29da633974 100644 --- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -253,7 +253,7 @@ document.getElementById("clearOutput").addEventListener("click", () => { ## 其他运算符属性 -我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了脚本元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习_识别标记元素)来实现这一点。 +我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了标记元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习_识别标记元素)来实现这一点。 ### 在水平方向上的拉伸 From 6a12d0775a056591651f1a860a0c9c6a9b143811 Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Wed, 15 Nov 2023 17:38:40 +0800 Subject: [PATCH 5/7] apply the recommendation of code reviewer --- .../learn/mathml/first_steps/scripts/index.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md index cafe2cf47913df..4a1df8da5b3ea6 100644 --- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -1,11 +1,11 @@ --- -title: MathML 标记 +title: MathML 附加符号 slug: Learn/MathML/First_steps/Scripts --- {{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} -我们继续回顾基本数学符号，并重点介绍如何使用标记构建 MathML 元素。 +我们继续回顾基本数学符号，并重点介绍如何使用附加符号构建 MathML 元素。 @@ -80,11 +80,11 @@ slug: Learn/MathML/First_steps/Scripts > **备注：** MathML 元素 `` 和 `` 与 HTML 元素 [``](/zh-CN/docs/Web/HTML/Element/sub) 和 [``](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为上下标，而不仅仅是文本。 -## 底标和顶标 +## 正下标和正上标 -``、`` 和 `` 元素与之前介绍的元素非常相似，只是它们用于附加底标（underscript）和顶标（overscirpt）。我们不会提供详细信息，而是让你自己通过以下练习来了解它们的定义。 +``、`` 和 `` 元素与之前介绍的元素非常相似，只是它们用于附加正下标（underscript）和正上标（overscirpt）。我们不会提供详细信息，而是让你自己通过以下练习来了解它们的定义。 -### 主动学习：识别底标和顶标 +### 主动学习：识别正下标和正上标 在下面的示例中，试着猜测神秘元素的名称（用问号表示），然后点击按钮来显示答案： @@ -141,16 +141,16 @@ document.getElementById("showSolution").addEventListener("click", () => { {{ EmbedLiveSample('munder_mover_munderover 的子树', 700, 400, "", "") }} -### 主动学习：识别标记元素 +### 主动学习：识别附加符号元素 -以下的 MathML 公式包含了更复杂的表达式，嵌套了分数、根号和标记元素。尝试猜测使用了 ``、``、``、``、``、`` 的元素。每次当你点击这样的元素时，它会被突出显示，并显示确认信息。最后，阅读 MathML 源代码以验证是否与你的预期相符。 +以下的 MathML 公式包含了更复杂的表达式，嵌套了分数、根号和附加符号元素。尝试猜测使用了 ``、``、``、``、``、`` 的元素。每次当你点击这样的元素时，它会被突出显示，并显示确认信息。最后，阅读 MathML 源代码以验证是否与你的预期相符。 ```html hidden - 带有标记元素的页面 + 带有附加符号元素的页面 @@ -249,11 +249,11 @@ document.getElementById("clearOutput").addEventListener("click", () => { }); ``` -{{ EmbedLiveSample('主动学习：识别标记元素', 700, 400, "", "") }} +{{ EmbedLiveSample('主动学习：识别附加符号元素', 700, 400, "", "") }} ## 其他运算符属性 -我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了标记元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习_识别标记元素)来实现这一点。 +我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了附加符号元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习_识别附加符号元素)来实现这一点。 ### 在水平方向上的拉伸 @@ -359,7 +359,7 @@ math { 可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators)，以覆盖 `` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 ``、`` 或 `` 元素中非伸展兄弟节点的宽度。 -> **备注：** 伸展适用于 ``、`` 或 `` 元素的任何子元素，不仅仅是底标或顶标。 +> **备注：** 伸展适用于 ``、`` 或 `` 元素的任何子元素，不仅仅是正下标或正上标。 ### 大型运算符和极限 @@ -463,16 +463,16 @@ math { {{ EmbedLiveSample('大型运算符和极限', 700, 200, "", "") }} -不出所料，公式不再居中，渲染方式发生变动，导致高度最小化。注意求和符号，可以看到求和符号变小了，并且 `` 元素的标记现在以下标和上标的方式附加在其上！这是由于“∑”运算符的两个属性： +不出所料，公式不再居中，渲染方式发生变动，导致高度最小化。注意求和符号，可以看到求和符号变小了，并且 `` 元素的附加符号现在以下标和上标的方式附加在其上！这是由于“∑”运算符的两个属性： - _largeop_：如果 `` 标签具有 `display="block"` 属性，则使用更大的字形绘制运算符。 -- _movablelimits_：如果 `` 标签没有 `display="block"` 属性，则将附加在运算符上的底标和顶标分别渲染为下标和上标。 +- _movablelimits_：如果 `` 标签没有 `display="block"` 属性，则将附加在运算符上的正下标和正上标分别渲染为下标和上标。 -> **备注：** _largeop_ 属性实际上与标记无关，尽管具有此属性的运算符通常会有标记。_movablelimits_ 属性也适用于 `` 和 `` 元素。 +> **备注：** _largeop_ 属性实际上与附加符号无关，尽管具有此属性的运算符通常会有附加符号。_movablelimits_ 属性也适用于 `` 和 `` 元素。 ## 总结 -在本文中，我们完成了对引入下标、上标、底标和顶标的基本布局元素 ``、``、``、``、`` 以及 `` 的介绍。在介绍这些元素的过程中，我们顺便介绍了 `` 元素的新属性。在下一篇文章中，我们将继续关注[表格布局](/zh-CN/docs/Learn/MathML/First_steps/Tables)。 +在本文中，我们完成了对引入下标、上标、正下标和正上标的基本布局元素 ``、``、``、``、`` 以及 `` 的介绍。在介绍这些元素的过程中，我们顺便介绍了 `` 元素的新属性。在下一篇文章中，我们将继续关注[表格布局](/zh-CN/docs/Learn/MathML/First_steps/Tables)。 {{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} From 0c3a300d747ee4aef9f1c2c814b767a007313e3a Mon Sep 17 00:00:00 2001 From: A1lo Date: Thu, 16 Nov 2023 17:12:09 +0800 Subject: [PATCH 6/7] minor fixes --- .../learn/mathml/first_steps/scripts/index.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md index 4a1df8da5b3ea6..d5ea5bf402e27a 100644 --- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -12,10 +12,10 @@ slug: Learn/MathML/First_steps/Scripts
前提： - 基本的计算机操作能力，安装基本软件，、处理文件的基本知识，以及 HTML 基础知识（可以学习 HTML 入门 ``` -以下是在你的浏览器中呈现上述示例的结果。 +以下是在你的浏览器中的上述示例的渲染结果。 -{{EmbedLiveSample('msub_msup_msubsup 的子树', 700, 200)}} +{{EmbedLiveSample('下标和上标', 700, 200)}} 可以看出： @@ -78,7 +78,7 @@ slug: Learn/MathML/First_steps/Scripts - `` 元素的第二个和第三个子元素分别作为其第一个子元素的下标和上标附加。 - 上下标内的文本会缩小显示。 -> **备注：** MathML 元素 `` 和 `` 与 HTML 元素 [``](/zh-CN/docs/Web/HTML/Element/sub) 和 [``](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为上下标，而不仅仅是文本。 +> **备注：** MathML 元素 `` 和 `` 与 HTML 元素 [``](/zh-CN/docs/Web/HTML/Element/sub) 和 [``](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为附加符号，而不仅仅是文本。 ## 正下标和正上标 @@ -139,7 +139,7 @@ document.getElementById("showSolution").addEventListener("click", () => { }); ``` -{{ EmbedLiveSample('munder_mover_munderover 的子树', 700, 400, "", "") }} +{{EmbedLiveSample('主动学习：识别正下标和正上标', 700, 400)}} ### 主动学习：识别附加符号元素 @@ -249,15 +249,15 @@ document.getElementById("clearOutput").addEventListener("click", () => { }); ``` -{{ EmbedLiveSample('主动学习：识别附加符号元素', 700, 400, "", "") }} +{{EmbedLiveSample('主动学习：识别附加符号元素', 700, 400)}} ## 其他运算符属性 -我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了附加符号元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习_识别附加符号元素)来实现这一点。 +我们之前已经了解了 `` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了附加符号元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习：识别附加符号元素)来实现这一点。 ### 在水平方向上的拉伸 -首先，让我们进行以下替换： β ≔ z 1 + z 2 和 α ≔ v 1 + v 2 ： +首先，让我们进行以下替换： β ≔ z 1 + z 2 和 α ≔ v 1 + v 2 ： ```html hidden @@ -355,7 +355,7 @@ math { } ``` -{{ EmbedLiveSample('水平方向拉伸', 700, 200, "", "") }} +{{EmbedLiveSample('在水平方向上的拉伸', 700, 200)}} 可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators)，以覆盖 `` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 ``、`` 或 `` 元素中非伸展兄弟节点的宽度。 @@ -461,7 +461,7 @@ math { } ``` -{{ EmbedLiveSample('大型运算符和极限', 700, 200, "", "") }} +{{EmbedLiveSample('大型运算符和极限', 700, 200)}} 不出所料，公式不再居中，渲染方式发生变动，导致高度最小化。注意求和符号，可以看到求和符号变小了，并且 `` 元素的附加符号现在以下标和上标的方式附加在其上！这是由于“∑”运算符的两个属性： From c5191a1430df960350139fbd674c892ed98e92ae Mon Sep 17 00:00:00 2001 From: Allo Date: Thu, 16 Nov 2023 18:20:45 +0800 Subject: [PATCH 7/7] fix translation --- .../learn/mathml/first_steps/fractions_and_roots/index.md | 8 ++++---- files/zh-cn/learn/mathml/first_steps/index.md | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md b/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md index 8bbe93a654f5ec..e863ad37d0b43c 100644 --- a/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md @@ -222,7 +222,7 @@ checkboxes.forEach((checkbox) => { }); ``` -{{ EmbedLiveSample('主动练习：内嵌不同元素', 700, 600, "", "") }} +{{EmbedLiveSample('主动练习：内嵌不同元素', 700, 600)}} ## 可伸缩的根号符号 @@ -248,9 +248,9 @@ checkboxes.forEach((checkbox) => { ``` -{{ EmbedLiveSample('可伸缩的根号符号', 700, 200, "", "") }} +{{EmbedLiveSample('可伸缩的根号符号', 700, 200)}} -> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现该拉伸效果，上面的示例依赖于[网络字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 +> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现该拉伸效果，上面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 ## 无横线的分数 @@ -282,7 +282,7 @@ checkboxes.forEach((checkbox) => { ``` -{{ EmbedLiveSample('无横线分式', 700, 200, "", "") }} +{{EmbedLiveSample('无横线分式', 700, 200)}} > **备注：** 虽然 `linethickness` 属性可以用于指定任意的线条粗细，但最好保持默认值，该值是根据数学字体中指定的参数计算得出的。 diff --git a/files/zh-cn/learn/mathml/first_steps/index.md b/files/zh-cn/learn/mathml/first_steps/index.md index 692b004c64cc8a..0b6e39579e8322 100644 --- a/files/zh-cn/learn/mathml/first_steps/index.md +++ b/files/zh-cn/learn/mathml/first_steps/index.md @@ -19,7 +19,7 @@ MathML 是用于在网页中编写数学公式的标记语言。本单元将为 在开始本单元之前，你应具备以下知识： -1. 对使用计算机和被动使用网络（即查看内容）有基本熟悉。 +1. 对使用计算机和被动使用 Web（即查看内容）有基本熟悉。 2. 已完成基本的工作环境设置，详见[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)，并了解如何创建和管理文件，详见[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)。 3. 熟悉 HTML 的基本知识，详见 [HTML 入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 @@ -35,8 +35,8 @@ MathML 是用于在网页中编写数学公式的标记语言。本单元将为 - : 现在你对 MathML 有了更好的了解，我们将介绍文本容器（变量、数字、运算符等），它们是 MathML 公式的构建模块。 - [分数和根号](/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots) - : 在文本容器的基础上，本文介绍了如何通过嵌套分数和根号来构建更复杂的 MathML 表达式。 -- [脚本](/zh-CN/docs/Learn/MathML/First_steps/Scripts) - - : 我们继续回顾基本数学符号，并重点介绍如何使用脚本构建 MathML 元素。 +- [附加符号](/zh-CN/docs/Learn/MathML/First_steps/Scripts) + - : 我们继续回顾基本数学符号，并重点介绍如何使用附加符号构建 MathML 元素。 - [表格](/zh-CN/docs/Learn/MathML/First_steps/Tables) - : 在掌握所有基本数学符号后，我们需要考虑表格布局，它可用于矩阵式表达式和其他高级数学布局。