diff --git a/files/zh-cn/glossary/media/css/index.md b/files/zh-cn/glossary/media/css/index.md
index c1ae565b6d33a2..cc996c41d230a0 100644
--- a/files/zh-cn/glossary/media/css/index.md
+++ b/files/zh-cn/glossary/media/css/index.md
@@ -17,5 +17,5 @@ CSS 提供了几个特性，允许你根据查看设备的媒体**类型**（例
 
 - [使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 - [媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)
-- {{cssxref("@media")}} [at-规则](/zh-CN/docs/Web/CSS/At-rule)：根据媒体查询的结果，有条件地应用[样式表](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works#应用_css_到_dom)的一部分。
+- {{cssxref("@media")}} [at-规则](/zh-CN/docs/Web/CSS/At-rule)：根据媒体查询的结果，有条件地应用[样式表](/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#应用_css_到_dom)的一部分。
 - {{domxref("Window.matchMedia()")}}：测试查看设备是否符合媒体查询条件。
diff --git a/files/zh-cn/glossary/metadata/index.md b/files/zh-cn/glossary/metadata/index.md
index e8a204af0695e6..74732828773893 100644
--- a/files/zh-cn/glossary/metadata/index.md
+++ b/files/zh-cn/glossary/metadata/index.md
@@ -11,6 +11,6 @@ l10n:
 
 ## 参见
 
-- [学习：元数据](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#元数据：meta_元素)
+- [学习：元数据](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#元数据：meta_元素)
 - 维基百科上的[元数据](https://zh.wikipedia.org/wiki/元数据)
 - MDN 上的 {{htmlelement("meta")}} 元素
diff --git a/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md b/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md
index 243cc9aa6db14e..9bea448ebfbbfa 100644
--- a/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md
+++ b/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md
@@ -101,7 +101,7 @@ em {
 }
 ```
 
-但是，你很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别，更改样式可能会导致混淆。有关强调的更多信息，参见[重点强调](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#重点强调)。
+但是，你很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别，更改样式可能会导致混淆。有关强调的更多信息，参见[重点强调](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#重点强调)。
 
 #### 缩写
 
@@ -122,7 +122,7 @@ abbr {
 }
 ```
 
-缩写的公认样式约定是虚线下划线，偏离这一原则明显是不明智的。有关缩写的更多，参见[缩略语](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#缩略语)。
+缩写的公认样式约定是虚线下划线，偏离这一原则明显是不明智的。有关缩写的更多，参见[缩略语](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#缩略语)。
 
 #### 链接
 
@@ -228,9 +228,9 @@ JavaScript 还可能会中断无障碍，具体取决于其使用方式。
 简单的内容和功能可以说是很容易使访问——例如文本，图像，表格，窗体和按钮，激活功能。正如我们在 [HTML：辅助功能的良好基础](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML)一文中提到的，主要注意事项包括：
 
 - 良好的语义：为正确的工作使用正确的元素。例如，确保你使用标题和段落，以及 {{htmlelement("button")}} 和 {{htmlelement("a")}} 元素
-- 确保内容以文本形式提供，要么直接作为文本内容、表单元素的良好文本标签，也可以确保[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)（例如图像的 alt 文本）。
+- 确保内容以文本形式提供，要么直接作为文本内容、表单元素的良好文本标签，也可以确保[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)（例如图像的 alt 文本）。
 
-我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 参见[重新建立键盘的无障碍](/zh-CN/docs/Learn/Accessibility/HTML#重新建立键盘的无障碍)。这不是理想的——实际上，你应该只使用正确的元素为正确的作业——但它表明在情况下它是可能的，由于某种原因，你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的无障碍的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。
+我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 参见[重新建立键盘的无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#重新建立键盘的无障碍)。这不是理想的——实际上，你应该只使用正确的元素为正确的作业——但它表明在情况下它是可能的，由于某种原因，你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的无障碍的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。
 
 复杂的功能，如 3D 游戏是不容易提高无障碍的 ––使用 [WebGL](/zh-CN/docs/Web/API/WebGL_API) 创建的复杂 3D 游戏将在 {{htmlelement("canvas")}} 元素上呈现，该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说，这样的游戏并没有真正有这群人作为它的主要目标观众的一部分，这将是不合理的，期望你使它 100% 访问盲人，但你可以实现键盘控制，所以它可以使用非鼠标用户，并使配色方案的对比度足以让有颜色缺陷的人使用。
 
@@ -358,7 +358,7 @@ imgThumb.onblur = hideImg;
 
 当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图——为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时 (聚焦停止) 运行函数。这可以在图像加 tab 键实现，因为我们为图像的属性设置 `tabindex="0"`。
 
-[Click](/zh-CN/docs/Web/API/Element/click_event) 事件很有趣——听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理程序。但是，当你允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用，在这种情况下，你需要在按下确切键时进行专门检测（参见[重新建立键盘的无障碍](/zh-CN/docs/Learn/Accessibility/HTML#重新建立键盘的无障碍)）。
+[Click](/zh-CN/docs/Web/API/Element/click_event) 事件很有趣——听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理程序。但是，当你允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用，在这种情况下，你需要在按下确切键时进行专门检测（参见[重新建立键盘的无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#重新建立键盘的无障碍)）。
 
 ## 总结
 
diff --git a/files/zh-cn/learn_web_development/core/accessibility/html/index.md b/files/zh-cn/learn_web_development/core/accessibility/html/index.md
index 9b5ac17168d81e..828f86ca46fcf2 100644
--- a/files/zh-cn/learn_web_development/core/accessibility/html/index.md
+++ b/files/zh-cn/learn_web_development/core/accessibility/html/index.md
@@ -54,7 +54,7 @@ original_slug: Learn/Accessibility/HTML
 让我们来继续学习 HTML 语义化实现细则。
 
 > [!NOTE]
-> 在本地计算机上设置屏幕阅读器是一个不错的主意，因此你可以对下面显示的示例进行一些测试。更多内容请查阅 [Screenreaders guide](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screenreaders)。
+> 在本地计算机上设置屏幕阅读器是一个不错的主意，因此你可以对下面显示的示例进行一些测试。更多内容请查阅 [Screenreaders guide](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#screenreaders)。
 
 ## 良好的语义
 
@@ -252,7 +252,7 @@ the last one.
 > [!NOTE]
 > 除了你的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 你可以随时将它放在你想要使用 CSS 的位置，但是你应该先从源代码开始，如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。
 
-### UI 控制
+### UI 控件
 
 通过 UI 控件，我们指的是与用户交互的 Web 文档的主要部分 - 通常是按钮，链接和表单控件。在本节中，我们将介绍创建此类控件时要注意的基本无障碍问题。稍后关于 WAI-ARIA 和多媒体的文章将着眼于 UI 无障碍的其他方面。
 
@@ -263,7 +263,7 @@ UI 控件无障碍的一个关键方面是，默认情况下，浏览器允许
 接着你可以按 Enter / Return 来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用 JavaScript 使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件，例如 {{htmlelement("select")}} 元素拥有自己的显示选项，可以使用向上和向下箭头键进行循环）。
 
 > [!NOTE]
-> 不同的浏览器可能有不同的键盘控制选项。请参阅[使用本机键盘辅助功能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#使用键盘)获取更多详细信息。
+> 不同的浏览器可能有不同的键盘控制选项。请参阅[使用本机键盘辅助功能](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#使用键盘)获取更多详细信息。
 
 实际上，你只需使用适当的元素即可免费获得此功能，例如，
 
diff --git a/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md b/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md
index 8eec05442fd9d9..dba9f41ad8134b 100644
--- a/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md
+++ b/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md
@@ -184,7 +184,7 @@ iOS 操作系统内置了移动版旁白（VoiceOver）。
 
 ## 控制机制
 
-在我们的 CSS 和 JavaScript 无障碍文章中，我们研究了特定于某种控制机制的事件的概念（请参阅[特定于鼠标的事件](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#鼠标特定事件)）。回顾一下，因为其他控制机制不能激活相关的功能，将会导致辅助功能的问题。
+在我们的 CSS 和 JavaScript 无障碍文章中，我们研究了特定于某种控制机制的事件的概念（请参阅[特定于鼠标的事件](/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#鼠标特定事件)）。回顾一下，因为其他控制机制不能激活相关的功能，将会导致辅助功能的问题。
 
 举例来说，[点击](/zh-CN/docs/Web/API/Element/click_event)事件在无障碍方面是良好的——通过点击处理器设置的元素，选中它并按下回车或返回，或者在触摸屏设备上点击它，可以调用关联的事件处理程序。试试我们的 [simple-button-example.html](https://github.com/mdn/learning-area/blob/main/accessibility/mobile/simple-button-example.html) 示例（[查看实时示例](https://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)）以理解我们的意思。
 
diff --git a/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md b/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md
index 9d3977418225d2..12d517a4c8a8d3 100644
--- a/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md
+++ b/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md
@@ -49,7 +49,7 @@ l10n:
 
 在某种程度上，本模块都是关于无障碍的——跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇[无障碍是什么？](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)更全面透彻地定义了什么是无障碍。
 
-也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域，例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#性能问题)。
+也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域，例如[响应式设计问题](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#性能问题)。
 
 > [!NOTE]
 > 如同 Web 开发的许多方面一样，无障碍并非可以用 100% 的成功或失败来定义；实际上，对于所有内容来说，要达到完全的无障碍几乎是不可能的，特别是当网站变得越来越复杂。我们所做的，更多是采取防御性编程，并遵守最佳实践，以确保尽可能多的人能够访问到尽可能多的内容。
@@ -59,7 +59,7 @@ l10n:
 在本节中，我们将围绕 Web 无障碍，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。
 
 > [!NOTE]
-> 无障碍在道德上是正确的事情，对企业也有好处（残疾用户，移动用户等构成了重要的细分市场），并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。
+> 无障碍在道德上是正确的事情，对企业也有好处（残疾用户，移动用户等构成了重要的细分市场），并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。
 
 ### HTML
 
@@ -176,7 +176,7 @@ select:focus {
 替代文本对无障碍性至关重要——对于视觉或听觉障碍者来说，如果无法看到或听到某些内容，这将是一个障碍。最简单且常用的文本替代方法是使用 `alt` 属性，我们应在所有包含关键内容的图像上使用该属性。它应包含能够在页面上成功传达图像意义和内容的描述，并能被屏幕阅读器读取，从而朗读给用户听。
 
 > [!NOTE]
-> 更多信息请阅读[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)。
+> 更多信息请阅读[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)。
 
 可以通过多种方法来测试缺少的替代文本，例如，使用无障碍[审计工具](#审计工具)。
 
@@ -191,14 +191,14 @@ select:focus {
 接下来是表单中的 {{htmlelement("label")}} 元素，这是确保表单无障碍的关键特性之一。表单的挑战在于，你需要标签来指明每个表单输入应该输入的数据。每个标签都应该包含在 {{htmlelement("label")}} 中，并且与其对应的表单输入明确关联（每个 `<label>` 的 `for` 属性值需要与表单元素的 `id` 值相匹配），即使源代码的顺序并不完全合理（尽管它应该是合理的）。
 
 > [!NOTE]
-> 有关链接文本和表单标签的更多信息，请参阅[有意义的文本标签](/zh-CN/docs/Learn/Accessibility/HTML#有意义的文本标签)。
+> 有关链接文本和表单标签的更多信息，请参阅[有意义的文本标签](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#有意义的文本标签)。
 
 最后，让我们简要讨论一下数据表格。使用非常简单的标记，你可以编写基本的数据表格（参见 `bad-table.html` 的[在线演示](https://mdn.github.io/learning-area/accessibility/html/bad-table.html)和[源代码](https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html)），但这样做会有问题——屏幕阅读器用户无法将行或列作为数据分组——为此，你需要标明哪些是标题行，以及它们是用于标题行还是标题列等。这样的表格只能通过视觉方式来识别。
 
 相反，如果你查看我们的 `punk-bands-complete.html` 示例（[在线演示](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)，[源代码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html)），你会发现这里使用了一些辅助功能，如表头（{{htmlelement("th")}} 和 `scope` 属性）、{{htmlelement("caption")}} 元素等。
 
 > [!NOTE]
-> 有关无障碍数据表格的更多信息，请参阅[无障碍数据表格](/zh-CN/docs/Learn/Accessibility/HTML#无障碍数据表格)。
+> 有关无障碍数据表格的更多信息，请参阅[无障碍数据表格](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#无障碍数据表格)。
 
 ### CSS
 
@@ -569,13 +569,13 @@ NVDA 拥有众多键盘命令，这里不会全部列举。以下表格中列出
 
 ### 用户测试
 
-如上所述，你不能仅依靠自动化工具来确定网站上的无障碍问题。建议在制定测试计划时，包含一些用户测试无障碍的计划 (有关更多内容，请参阅前面的[用户测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#用户测试)部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。
+如上所述，你不能仅依靠自动化工具来确定网站上的无障碍问题。建议在制定测试计划时，包含一些用户测试无障碍的计划 (有关更多内容，请参阅前面的[用户测试](/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies#用户测试)部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。
 
 ## 无障碍测试清单
 
 以下列表提供了一个供你参考的无障碍测试清单，以确保你的项目已经执行了推荐的无障碍测试：
 
-1. 确保你的 HTML 尽可能语义化正确。[验证它](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#验证)是一个不错的开始，使用[审计工具](#审计工具)也是如此。
+1. 确保你的 HTML 尽可能语义化正确。[验证它](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#验证)是一个不错的开始，使用[审计工具](#审计工具)也是如此。
 2. 检查在 CSS 关闭的情况下，你的内容是否仍然有意义。
 3. 确保你的功能[可通过键盘访问](#使用键盘原生无障碍性)。使用 Tab、Return/Enter 等键进行测试。
 4. 确保你的非文本内容都有[文本替代](#替代文本)。[审计工具](#审计工具)可帮助你发现此类问题。
@@ -589,7 +589,7 @@ NVDA 拥有众多键盘命令，这里不会全部列举。以下表格中列出
 
 ## 寻找帮助
 
-无障碍还会遇到许多其他问题。你要学会如何在线查找答案。请查阅 HTML 和 CSS 文章的“[寻找帮助](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#寻找帮助)”部分，以获取一些指导。
+无障碍还会遇到许多其他问题。你要学会如何在线查找答案。请查阅 HTML 和 CSS 文章的“[寻找帮助](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#寻找帮助)”部分，以获取一些指导。
 
 ## 总结
 
diff --git a/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md
index 7bbc63a85fa884..bbc1c5a33bcb9d 100644
--- a/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md
+++ b/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md
@@ -64,7 +64,7 @@ original_slug: Learn/Accessibility/WAI-ARIA_basics
 - [角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)
   - : 这定义了元素是干什么的。许多「标志性的角色」，其实重复了 HTML5 的结构元素的语义价值。例如 `role="navigation"` ({{htmlelement("nav")}}) 或者 `role="complementary"` ({{htmlelement("aside")}})，这也有一些描述其他页面结构的（角色），例如 `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"` 等等。我们通常能从 UI 层面找到它们。
 - 属性
-  - : 定义元素的属性，使元素具备额外的含义或语义。例如，`aria-required="true"` 指定表单输入元素需要被填写才能有效，而 `aria-labelledby="label"` 允许你在元素上设置一个 ID，用于在页面中的其他地方（包括多个元素）引用其作为标签，`<label for="input">` 不可能做到这一点。举个例子：你可以用 `aria-labelledby` 指定在 {{htmlelement("div")}} 中包含的关键描述是多个表格单元的标签，或者将它指定为图像的替代文本——为图像替代文本指定额外信息，而无需在每一个 `alt` 属性中重复。你可以在[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)中查看示例。
+  - : 定义元素的属性，使元素具备额外的含义或语义。例如，`aria-required="true"` 指定表单输入元素需要被填写才能有效，而 `aria-labelledby="label"` 允许你在元素上设置一个 ID，用于在页面中的其他地方（包括多个元素）引用其作为标签，`<label for="input">` 不可能做到这一点。举个例子：你可以用 `aria-labelledby` 指定在 {{htmlelement("div")}} 中包含的关键描述是多个表格单元的标签，或者将它指定为图像的替代文本——为图像替代文本指定额外信息，而无需在每一个 `alt` 属性中重复。你可以在[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)中查看示例。
 - 状态
   - : 用于表达元素当前的条件的特殊属性，例如 `aria-disabled="true"`，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如 JavaScript。
 
@@ -98,7 +98,7 @@ original_slug: Learn/Accessibility/WAI-ARIA_basics
 
 我们过去讨论了一些促使 WAI-ARIA 诞生的问题。但基本上是以下四个主要领域：
 
-1. **路标/地标**（**Signposts/Landmarks**）**：** ARIA 的 `角色` 属性值可以作为地标来复制 HTML5 元素的语义化（例如 nav tag）。或者超越 HTML5 的语义，给不同的功能块提供「路标」，例如 `search`, `tabgroup`, `tab`, `listbox` 等等。
+1. **路标/地标**（**Signposts/Landmarks**）：ARIA 的 `角色` 属性值可以作为地标来复制 HTML5 元素的语义化（例如 nav tag）。或者超越 HTML5 的语义，给不同的功能块提供「路标」，例如 `search`, `tabgroup`, `tab`, `listbox` 等等。
 2. **动态的内容更新：** 屏幕阅读器往往难以报告一直变化的内容，用无障碍特性我们能使用 `aria-live` 来通知屏幕阅读器某一部分的内容更新了。例如[XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest) 或者 [DOM APIs](/zh-CN/docs/Web/API/Document_Object_Model)。
 3. **优化键盘的无障碍操作**: 默认的 HTML 元素是具有自带的键盘辅助功能的。当其他元素与 JavaScript 一起进行交互时，键盘的辅助功能和屏幕阅读器的报告会因此收到影响（例如你将会难以用 tab 到达理想的位置）。这是无法避免的，WAI-ARIA 提供了提供了一种允许其他元素获得焦点的方法（使用 `tabindex`）。
 4. **非语义控件的无障碍**：当一系列嵌套的 `<div>` 与 CSS / JavaScript 一起用于创建复杂的 UI 功能，或者通过 JavaScript 大大地增强或者更改原生的控件，无障碍将会变得极其困难——屏幕阅读器将会难以找到语义内容线索。在这种情况下，AIRA 可以帮助提供缺少了的功能，例如 `button`, `listbox`，或者 `tabgroup`，另外和 aria-required 或 aria-posinset 这样的属性可以提供有关功能的更多线索。
@@ -114,9 +114,9 @@ original_slug: Learn/Accessibility/WAI-ARIA_basics
 
 在下一节中，我们将更详细地研究这四个方，并提供一些实例。继续之前你最好安装一个屏幕阅读器，以便你测试接下来的用例。（接下来的屏幕阅读器默认为 Mac 的 VoiceOver，Windows 用户可以尝试 JAWS 或者 Window Eyes）
 
-查看我们的 [testing screenreaders](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screenreaders) 得到更多关于屏幕阅读器的信息。
+查看我们的 [testing screenreaders](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#屏幕阅读器) 得到更多关于屏幕阅读器的信息。
 
-### 路牌/地标（**Signposts/Landmarks**）
+### 路牌/地标
 
 WAI-ARIA 给浏览器增加了 [`role`](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) 属性，这允许我们给站点中的元素增加我们想要的语义属性。第一个主要区域便是用于为屏幕阅读器提供信息，以便用户可以找到常见的页面元素。我们来举个例子，一个[没有角色的站点](https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-no-roles)的例子（[在线演示](https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)）的页面结构：
 
@@ -268,7 +268,7 @@ const intervalID = setInterval(showQuote, 10000);
 - `tabindex="-1"` — 这允许通常不可列表的元素以编程方式来接收 focus。例如用：JavaScript，或者作为链接的目标。
 
 我们更详细地讨论了这一点，并在 HTML 辅助功能文章中显示了一个典型的实现
-——请看 [Building keyboard accessibility back in](/zh-CN/docs/Learn/Accessibility/HTML#building_keyboard_accessibility_back_in).
+——请看[重新建立键盘的无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#重新建立键盘的无障碍)。
 
 ### 非语义控件的无障碍
 
@@ -276,7 +276,7 @@ const intervalID = setInterval(showQuote, 10000);
 
 #### 表单验证和错误显示
 
-首先，让我们在此访问之前的文章（重读 [Keeping it unobtrusive](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#keeping_it_unobtrusive)）。在本节的最后，我们展示了当你尝试提交表单时，如果存在验证错误，我们在错误消息框中包含了一些 ARIA 属性：
+首先，让我们在此访问之前的文章（重读[保持别抢眼](/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#保持别抢眼)）。在本节的最后，我们展示了当你尝试提交表单时，如果存在验证错误，我们在错误消息框中包含了一些 ARIA 属性：
 
 ```html
 <div class="errors" role="alert" aria-relevant="all">
@@ -320,7 +320,7 @@ const intervalID = setInterval(showQuote, 10000);
 > [!NOTE]
 > 你可以在这里看这个在线完成的例子 [form-validation-updated.html](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
 
-除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。我们已经讨论过使用 [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 [路牌/地标（Signposts/Landmarks）](#路牌地标_（signpostslandmarks）) 部分）。还有一些其他标签技术使用其他属性，例如 [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) ，如果你想将非\<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby)，如果你想关联 带有表单输入的其他信息，并将其读出。请查阅文章获得更多细节： [WebAIM's Advanced Form Labeling article](https://webaim.org/techniques/forms/advanced)
+除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。我们已经讨论过使用 [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的[路牌/地标](#路牌地标)部分）。还有一些其他标签技术使用其他属性，例如 [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) ，如果你想将非 \<label> 元素指定为标签或标签多个表单输入具有相同的标签，并且 [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby)，如果你想关联 带有表单输入的其他信息，并将其读出。请查阅文章获得更多细节： [WebAIM's Advanced Form Labeling article](https://webaim.org/techniques/forms/advanced)
 
 还有许多其他有用的属性和状态，用于指示表单元素的状态。例如：`aria-disabled="true"` 可用于表示该表单字段已禁用。许多浏览器只会跳过禁用的表单字段，它们甚至不会被屏幕阅读器读出，但在某些情况下它们会被识别出来，所以最好包含这个属性让屏幕阅读器知道禁用的输入事实上已经被禁用。
 
@@ -353,7 +353,7 @@ function toggleMusician(bool) {
 
 #### 描述非语义的 button 是个 button
 
-在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅 HTML 辅助功能文章中的[UI 控件](/zh-CN/docs/Learn/Accessibility/HTML#ui_controls) ，以及[优化键盘的无障碍操作](#优化键盘的无障碍操作)，上面）。基本上，利用 tabindex 和一些 JavaScript 的话，大部分情况下添加键盘辅助功能不会有多少麻烦。
+在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅 HTML 辅助功能文章中的[UI 控件](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#ui_控件)，以及[优化键盘的无障碍操作](#优化键盘的无障碍操作)，上面）。基本上，利用 tabindex 和一些 JavaScript 的话，大部分情况下添加键盘辅助功能不会有多少麻烦。
 
 但是屏幕阅读器呢？他们还是看着这个元素并不是一个 button，如果你用屏幕阅读器测试我们的 [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 例子，你会听到一段短语描述这个按钮，内容大概是 "Click me!, group"，显然这会让人疑惑。
 
@@ -374,7 +374,7 @@ function toggleMusician(bool) {
 
 还有许多其他 [roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) 可以将非语义元素结构识别为常见的 UI 功能，这些功能超出了标准 HTML 中可用的功能，例如 [`combobox`](https://www.w3.org/TR/wai-aria-1.1/#combobox), [`slider`](https://www.w3.org/TR/wai-aria-1.1/#slider), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel), [`tree`](https://www.w3.org/TR/wai-aria-1.1/#tree).。你可以在 [Deque university code library](https://dequeuniversity.com/library/) 中看到许多有用的示例，以便了解如何使这些控件做到无障碍的。
 
-让我们来看看我们自己的一个例子。我们将返回到我们简单的绝对定位选项卡界面（请参阅我们的 CSS 和 JavaScript 无障碍的文章的 [Hiding things](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#hiding_things) 段落），你可以在 [Tabbed info box example](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)中找到它（[源码地址](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)）。
+让我们来看看我们自己的一个例子。我们将返回到我们简单的绝对定位选项卡界面（请参阅我们的 CSS 和 JavaScript 无障碍的文章的[隐藏的东西](/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#隐藏的东西)部分），你可以在 [Tabbed info box example](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)中找到它（[源码地址](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)）。
 
 这个例子在键盘无障碍方面运行良好——你可以愉快地在不同选项卡之间进行 tab 并选择它们然后显示选项卡内容。它也是相当容易访问的——你可以滚动浏览内容并使用标题进行导航，即使你无法看到屏幕上发生的事情。然而，内容并不明显——屏幕阅读器目前将内容报告为链接列表，以及一些内容包含三个标题。它不会让你知道内容之间的关系。为用户提供有关内容结构的更多线索总是好的。
 
diff --git a/files/zh-cn/learn_web_development/core/accessibility/what_is_accessibility/index.md b/files/zh-cn/learn_web_development/core/accessibility/what_is_accessibility/index.md
index bb767a5c6bf214..3dfb9e6f7e6b67 100644
--- a/files/zh-cn/learn_web_development/core/accessibility/what_is_accessibility/index.md
+++ b/files/zh-cn/learn_web_development/core/accessibility/what_is_accessibility/index.md
@@ -71,7 +71,7 @@ original_slug: Learn/Accessibility/What_is_accessibility
 
 这种残疾也可能是由于年老体衰导致，而不是任何特定的创伤或状况造成，也可能是由于硬件限制所致——有些用户可能没有鼠标。
 
-这些残疾通常影响 Web 开发工作的方式是要求通过键盘就可以访问控件——我们将在本模块的后续文章中讨论键盘无障碍，但最好是仅通过使用键盘来尝试访问一些网站，看看你能够做些什么。例如，你可以使用 Tab 键在 Web 表单的不同控件之间移动吗？你可以在我们的“[跨浏览器测试使用本机键盘的无障碍](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#using_native_keyboard_accessibility)”章节中找到有关键盘控制的更多详细信息。
+这些残疾通常影响 Web 开发工作的方式是要求通过键盘就可以访问控件——我们将在本模块的后续文章中讨论键盘无障碍，但最好是仅通过使用键盘来尝试访问一些网站，看看你能够做些什么。例如，你可以使用 Tab 键在 Web 表单的不同控件之间移动吗？你可以在我们的“[使用键盘原生无障碍性](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#使用键盘原生无障碍性)”章节中找到有关键盘控制的更多详细信息。
 
 据统计，有相当多的人患有行动障碍症。美国疾病控制与防御中心的“[残疾与机能（18 岁及以上的非住院成年人）](https://www.cdc.gov/nchs/fastats/disability.htm)”报道称美国有 15.1% 的成年人都患有身体功能疾病。
 
@@ -109,7 +109,7 @@ original_slug: Learn/Accessibility/What_is_accessibility
 
 然而如果你能在项目的开始阶段就考虑到无障碍的话，使大多数内容无障碍化的代价就会相当微小。
 
-在规划项目时，将无障碍测试纳入测试体系，就像对其他任何重要目标受众群体（例如台式机或移动浏览器的目标用户）进行测试一样。尽早和经常进行测试，理想情况下运行自动化测试找出程序化方式可检测到的缺失功能（例如，缺少图像[替代文本](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#text_alternatives)或不良链接文字——请参阅[元素关系与上下文](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#element_relationships_and_context)），并对残疾人士的用户群进行一些测试，以查看更复杂的网站功能是否对他们可用。例如：
+在规划项目时，将无障碍测试纳入测试体系，就像对其他任何重要目标受众群体（例如台式机或移动浏览器的目标用户）进行测试一样。尽早和经常进行测试，理想情况下运行自动化测试找出程序化方式可检测到的缺失功能（例如，缺少图像[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#替代文本)或不良链接文字——请参阅[元素关系与上下文](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#元素关系和上下文)），并对残疾人士的用户群进行一些测试，以查看更复杂的网站功能是否对他们可用。例如：
 
 - 我的日期选择器小部件是否可供使用屏幕阅读器的人使用？
 - 如果内容动态更新，视力受损的人知道吗？
diff --git a/files/zh-cn/learn_web_development/core/css_layout/introduction/index.md b/files/zh-cn/learn_web_development/core/css_layout/introduction/index.md
index df3a020686bc4b..11ecf037fb9c1f 100644
--- a/files/zh-cn/learn_web_development/core/css_layout/introduction/index.md
+++ b/files/zh-cn/learn_web_development/core/css_layout/introduction/index.md
@@ -76,7 +76,7 @@ CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们
 
 下列布局技术会覆盖默认的布局行为：
 
-- **{{cssxref("display")}}** 属性 — 标准的 value，比如`block`, `inline` 或者 `inline-block` 元素在正常布局流中的表现形式 (见 [Types of CSS boxes](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes)). 接着是全新的布局方式，通过设置`display`的值，比如 [CSS Grid](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids) 和 [Flexbox](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox).
+- **{{cssxref("display")}}** 属性 — 标准的 value，比如`block`, `inline` 或者 `inline-block` 元素在正常布局流中的表现形式 (见 [Types of CSS boxes](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model#types_of_css_boxes)). 接着是全新的布局方式，通过设置`display`的值，比如 [CSS Grid](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids) 和 [Flexbox](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox).
 - **浮动**——应用 **{{cssxref("float")}}** 值，诸如 `left` 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。
 - **{{cssxref("position")}}** 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 `static` ，使用其他值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。
 - **表格布局**— 表格的布局方式可以用在非表格内容上，可以使用`display: table`和相关属性在非表元素上使用。
diff --git a/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md b/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md
index e88641974be0d2..aa8f2300cac656 100644
--- a/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md
+++ b/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md
@@ -168,7 +168,7 @@ div:nth-of-type(2) {
 
 ![](simple-grid-finished.png)
 
-在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为 20 像素，总的宽度变为 980 像素。这样给我们留出 960 像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了`border-box` （可以查看[完全改变盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#changing_the_box_model_completely)，获得更多解释）。
+在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为 20 像素，总的宽度变为 980 像素。这样给我们留出 960 像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了`border-box` （可以查看[完全改变盒模型](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model#changing_the_box_model_completely)，获得更多解释）。
 
 ```css
 * {
diff --git a/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md b/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md
index 85d53b69726c9c..30f2319e53d888 100644
--- a/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md
+++ b/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md
@@ -155,7 +155,7 @@ target / context = result
 
 在伸缩盒中，初始的行为是，弹性的物件将参照容器里面的空间的大小，缩小和分布物件之间的空间。通过更改`flex-grow`和 `flex-shrink`的值，你可以指示在物件遇到周围有更多或者更少的空间的情况下，你所期望的物件表现。
 
-在下面的示例中，和布局专题的[Flexbox: Flexible sizing of flex items](/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox#flexible_sizing_of_flex_items)中所描述的那样，使用了`flex: 1`的简写，可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。
+在下面的示例中，和布局专题的[弹性盒子：弹性元素的动态尺寸](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox#flex_项的动态尺寸)中所描述的那样，使用了`flex: 1`的简写，可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。
 
 ```css
 .container {
@@ -172,7 +172,7 @@ target / context = result
 
 ### CSS 网格
 
-在 CSS 网格布局中，`fr`单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着 3 个大小为`1fr`的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。你可以在[Flexible grids with the fr unit](/zh-CN/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit)下的学习布局网格专题了解更多和这一方式相关的信息。
+在 CSS 网格布局中，`fr`单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着 3 个大小为`1fr`的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。你可以在[使用 fr 单位的灵活网格](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids#使用_fr_单位的灵活网格)下的学习布局网格专题了解更多和这一方式相关的信息。
 
 ```css
 .container {
diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md
index 279865dff79570..9e88a90400a0b4 100644
--- a/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md
+++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md
@@ -31,7 +31,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_fe
 
 基于 Angular 框架的应用程序会大量地使用 **TypeScript**。TypeScript 不关心用户界面的编写，但它仍然是一种领域特定语言（DSL），而且与原生 JavaScript 有着很大的不同。
 
-DSL 不能直接由浏览器解析；它们首先要被转换成 JavaScript 或 HTML。虽然[转换在开发流程中是一个额外的步骤](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#转换)，但是框架通常会包含处理此步骤所需的工具，或者与该步骤相适应。虽然你可以不使用这些领域特定语言构建框架应用程序，但使用它们会简化你的开发过程，还能更容易地从这些框架的周边社区中找到帮助。
+DSL 不能直接由浏览器解析；它们首先要被转换成 JavaScript 或 HTML。虽然[转换在开发流程中是一个额外的步骤](/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview#转换)，但是框架通常会包含处理此步骤所需的工具，或者与该步骤相适应。虽然你可以不使用这些领域特定语言构建框架应用程序，但使用它们会简化你的开发过程，还能更容易地从这些框架的周边社区中找到帮助。
 
 ### JSX
 
@@ -281,7 +281,7 @@ Angular 把这个过程称为[依赖注入](https://angular.io/guide/dependency-
 
 ## 路由
 
-正如[前一章中提到的，路由](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#路由)是网络体验的一个重要部分。为了避免在具有大量视图的足够复杂的应用程序中出现破碎的体验，本模块中涉及的每个框架都提供了一个库（或多个库），帮助开发人员在其应用程序中实现客户端路由。
+正如[前一章中提到的，路由](/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction#路由)是网络体验的一个重要部分。为了避免在具有大量视图的足够复杂的应用程序中出现破碎的体验，本模块中涉及的每个框架都提供了一个库（或多个库），帮助开发人员在其应用程序中实现客户端路由。
 
 ## 测试
 
diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md
index 5a13e4a4534494..54a7f310365673 100644
--- a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md
+++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md
@@ -383,7 +383,7 @@ export default FilterButton;
 ```
 
 > [!NOTE]
-> 你可能会注意到，我们在这里犯了和第一次在 `<Todo />` 组件中同样的错误，即每个按钮将是相同的。没关系！我们将在以后修复这个组件，具体在 [Back to the filter buttons](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)。
+> 你可能会注意到，我们在这里犯了和第一次在 `<Todo />` 组件中同样的错误，即每个按钮将是相同的。没关系！我们将在以后修复这个组件，具体在 [Back to the filter buttons](/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)。
 
 ## 导入所有组件
 
diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md
index 27bd5d5826ee78..701d952ef7144f 100644
--- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md
+++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md
@@ -64,7 +64,7 @@ Vue 是一个现代 JavaScript 框架提供了有用的设施渐进增强——
 2. [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 或 [yarn](https://yarnpkg.com/)。
 
 > [!NOTE]
-> 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法[在这里](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#添加工具)。
+> 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法[在这里](/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line#添加工具)。
 
 安装 CLI，终端中运行以下命令：
 
diff --git a/files/zh-cn/learn_web_development/core/scripting/arrays/index.md b/files/zh-cn/learn_web_development/core/scripting/arrays/index.md
index 1b4212dabf599a..cec5f20ddfcae4 100644
--- a/files/zh-cn/learn_web_development/core/scripting/arrays/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/arrays/index.md
@@ -158,7 +158,7 @@ original_slug: Learn/JavaScript/First_steps/Arrays
 
 ### 访问和修改数组元素
 
-然后，你可以使用括号表示法访问数组中的元素，与 [检索特定字符串字符](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#检索特定字符串字符) 的方法相同。
+然后，你可以使用括号表示法访问数组中的元素，与 [检索特定字符串字符](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#检索特定字符串字符) 的方法相同。
 
 1. 在你的控制台中输入以下内容：
 
@@ -327,9 +327,9 @@ let myArray = [
 我们回到前面描述的例子——打印出发票上的产品名称和价格，然后计算总价格并将其印在底部。在下面的可编辑示例中，包含数字的注释——每个注释标记都是你必须向代码添加内容的地方。它们如下：
 
 1. 在 `// number 1` 注释下面是一些字符串，每个字符串包含一个产品名称和一个冒号分隔的价格。我们希望你将其转换为一个数组，并将其存储在名为 `products` 的数组中。
-2. 与 `// number 2` 注释同一行的是 for 循环的开头。在这行中，我们目前有 `i <= 0`，这是一个条件测试，导致 [for 循环](/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash#循环（loop）) 立即停止，因为它说“当 `i` 不再小于或等于 0”时停止，而 `i` 从 0 开始。我们希望你使用条件测试来替换它，当 `i` 不再小于 `products` 数组的长度时，该条件测试会停止循环。
+2. 与 `// number 2` 注释同一行的是 for 循环的开头。在这行中，我们目前有 `i <= 0`，这是一个条件测试，导致 [for 循环](/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash#循环（loop）) 立即停止，因为它说“当 `i` 不再小于或等于 0”时停止，而 `i` 从 0 开始。我们希望你使用条件测试来替换它，当 `i` 不再小于 `products` 数组的长度时，该条件测试会停止循环。
 3. 就在 `// number 3` 注释的下方，我们希望你编写一行代码，将当前数组项目（名称：价格）分成两个独立的项目，一个只包含该名称，一个只包含该价格。如果你不确定如何执行此操作，请参阅[有用的字符串方法](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods)文章以获得一些帮助，甚至更好的看看本文中的[字符串和数组之间的转换](#字符串和数组之间的转换)部分。
-4. 作为上述代码行的一部分，你还需要将价格从字符串转换为数字。如果你不记得如何做，请查看[第一个字符串](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#创建一个字符串)文章。
+4. 作为上述代码行的一部分，你还需要将价格从字符串转换为数字。如果你不记得如何做，请查看[第一个字符串](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#创建一个字符串)文章。
 5. 有一个名为 `total` 的变量被创建，并在代码的顶部赋值为 0。在循环内（在 `// number 4` 注释下面），我们希望你添加一行，将当前项目价格添加到循环中的迭代变量，以便在代码结尾处将正确的总数打印到发票上。你可能需要一个赋值运算符来执行此操作。
 6. 我们希望你改变 `// number 5` 注释的行，以便使 `itemText` 变量等于“当前项目名称 - $ 当前项目价格”，例如“Shoes - $ 23.99”，以此将每个项目的正确信息都印在发票上。这只是简单的字符串连接，你应该对此很熟悉。
 
diff --git a/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md b/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md
index f3ba2ea5a88d7e..8f3cc40d109963 100644
--- a/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md
@@ -48,7 +48,7 @@ alert("This is a message");
 首先，让我们来组织一个基本的函数。
 
 > [!NOTE]
-> 对于函数命名约定，应遵循与[变量命名约定](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules)相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
+> 对于函数命名约定，应遵循与[变量命名约定](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#关于变量命名的规则)相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
 
 1. 我们希望你首先访问[function-start.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-start.html)文件并创建一个本地拷贝。你将会看到这个 HTML 很简单 — 我们的 body 块仅包含一个按钮。我们还提供了一些基本的 CSS 来装饰自定义消息框，以及一个用于放置 JavaScript 代码的{{htmlelement("script")}}元素。
 2. 接下来，将下面的代码添加至 `<script>` 元素中：
diff --git a/files/zh-cn/learn_web_development/core/scripting/conditionals/index.md b/files/zh-cn/learn_web_development/core/scripting/conditionals/index.md
index 1e9e00796a4261..0860173c40ec5c 100644
--- a/files/zh-cn/learn_web_development/core/scripting/conditionals/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/conditionals/index.md
@@ -53,7 +53,7 @@ if (condition) {
 在这里我们有：
 
 1. 关键字 `if`，并且后面跟随括号。
-2. 要测试的条件，放到括号里（通常是“这个值大于另一个值吗”或者“这个值存在吗”）。这个条件会利用[比较运算符](/zh-CN/docs/Learn/JavaScript/First_steps/Math#比较运算符)（我们会在最后的模块中讨论）进行比较，并且返回 `true` 或者 `false`。
+2. 要测试的条件，放到括号里（通常是“这个值大于另一个值吗”或者“这个值存在吗”）。这个条件会利用[比较运算符](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#比较运算符)（我们会在最后的模块中讨论）进行比较，并且返回 `true` 或者 `false`。
 3. 一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且只会在条件语句返回 `true` 的时候运行。
 4. 关键字 `else`。
 5. 另一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且当条件语句返回值不是 `true`（换句话说，这个返回值为 `false`）的话，它才会运行。
@@ -157,7 +157,7 @@ function setWeather() {
 
 ### 关于比较运算符
 
-比较运算符是用来判断条件语句中的条件的。我们先回过头来看看 [JavaScript 中的基本算术——数字与运算符](/zh-CN/docs/Learn/JavaScript/First_steps/Math#比较运算符)文章中的比较运算符。我们有如下选择：
+比较运算符是用来判断条件语句中的条件的。我们先回过头来看看 [JavaScript 中的基本算术——数字与运算符](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#比较运算符)文章中的比较运算符。我们有如下选择：
 
 - `===` 和 `!==`——判断一个值是否严格等于，或不等于另一个。
 - `<` 和 `>`——判断一个值是否小于，或大于另一个。
@@ -846,7 +846,7 @@ textarea.onkeyup = function () {
 
 ## 参见
 
-- [比较运算符](/zh-CN/docs/Learn/JavaScript/First_steps/Math#比较运算符)
+- [比较运算符](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#比较运算符)
 - [条件声明详细](/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#条件语句)
 - [if...else 参考](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else)
 - [条件（三元）运算符参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operator)
diff --git a/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md b/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md
index 01a6cc1c890c43..a23aae9cc51403 100644
--- a/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md
@@ -58,11 +58,11 @@ if (window.XMLHttpRequest) {
 
 ## 修复一般的 JavaScript 问题
 
-正如我们在关于 HTML/CSS 的[前一篇文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#首先：解决一般问题)中所说，你应该先确保你的代码能够正常工作，然后再去集中解决跨浏览器问题。如果你还不熟悉[如何查找 JavaScript 代码的错误](/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong)的基本内容，你应该在继续学习之前学习这篇文章。你要注意一些常见的 JavaScript 问题，比如说：
+正如我们在关于 HTML/CSS 的[前一篇文章](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#首先：解决一般问题)中所说，你应该先确保你的代码能够正常工作，然后再去集中解决跨浏览器问题。如果你还不熟悉[如何查找 JavaScript 代码的错误](/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong)的基本内容，你应该在继续学习之前学习这篇文章。你要注意一些常见的 JavaScript 问题，比如说：
 
 - 基本的语法和逻辑问题（再次重申，请参阅[如何查找 JavaScript 代码的错误](/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong)）。
-- 确保变量等定义在正确的作用域中，并且你不会遇到在不同地方声明的内容之间的冲突（见[函数作用域和冲突](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数作用域和冲突)）。
-- 对 [this](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的困惑，表现在它适用于什么作用域，它的值是否是你所期望的。你可以阅读[“this”的含义](/zh-CN/docs/Learn/JavaScript/Objects/Basics#“this”的含义)，它做了一点浅显的介绍；你还应该研究像[这样](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143)的例子，它显示了一个典型的模式，即把 `this` 作用域保存到一个单独的变量中，然后在嵌套函数中使用这个变量，这样你就可以确定能够把功能应用到正确的 `this` 作用域。
+- 确保变量等定义在正确的作用域中，并且你不会遇到在不同地方声明的内容之间的冲突（见[函数作用域和冲突](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#函数作用域和冲突)）。
+- 对 [this](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的困惑，表现在它适用于什么作用域，它的值是否是你所期望的。你可以阅读[“this”的含义](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#“this”的含义)，它做了一点浅显的介绍；你还应该研究像[这样](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143)的例子，它显示了一个典型的模式，即把 `this` 作用域保存到一个单独的变量中，然后在嵌套函数中使用这个变量，这样你就可以确定能够把功能应用到正确的 `this` 作用域。
 - 在使用全局变量进行迭代的循环中不正确地使用函数（更普遍的是“弄错作用域”）。
 
 > [!CALLOUT]
@@ -76,7 +76,7 @@ if (window.XMLHttpRequest) {
 
 ### Linter
 
-就像 [HTML 和 CSS](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#linter) 所说的一样，使用 linter 可以确保编写出质量更高，错误更少的 JavaScript 代码，它可以指出错误，也可以标记出关于不良做法的警告等，并且可以自定义为更严格或更宽松的错误/警告报告。我们推荐的 JavaScript/ECMAScript linter 包括 [JSHint](https://jshint.com/) 和 [ESLint](https://eslint.org/)；它们能以多种方式使用，其中一些我们将在下面详细介绍。
+就像 [HTML 和 CSS](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#linter) 所说的一样，使用 linter 可以确保编写出质量更高，错误更少的 JavaScript 代码，它可以指出错误，也可以标记出关于不良做法的警告等，并且可以自定义为更严格或更宽松的错误/警告报告。我们推荐的 JavaScript/ECMAScript linter 包括 [JSHint](https://jshint.com/) 和 [ESLint](https://eslint.org/)；它们能以多种方式使用，其中一些我们将在下面详细介绍。
 
 #### 在线检查器
 
@@ -102,7 +102,7 @@ npm install -g jshint
 
 ![命令行输入了 jshint filename.js。响应是一个有行号的列表和对发现的错误的描述。](js-hint-commandline.png)
 
-你也可以将这些工具与任务运行器/构建工具（如 [Gulp](https://gulpjs.com/) 或 [Webpack](https://webpack.github.io/)）一起使用，以便在开发过程中自动对你的 JavaScript 进行 lint。（见后面文章中的[使用任务运行器来自动测试工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#使用任务运行器作为自动化测试工具)。）关于 ESLint 选项，请参见 [ESLint 集成](https://eslint.org/docs/user-guide/integrations)；Grunt 开箱即支持 JSHint，并且还有其他可用的集成，例如 [Webpack 的 JSHint 加载器](https://github.com/webpack-contrib/jshint-loader)。
+你也可以将这些工具与任务运行器/构建工具（如 [Gulp](https://gulpjs.com/) 或 [Webpack](https://webpack.github.io/)）一起使用，以便在开发过程中自动对你的 JavaScript 进行 lint。（见后面文章中的[使用任务运行器来自动测试工具](/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing#使用任务运行器作为自动化测试工具)。）关于 ESLint 选项，请参见 [ESLint 集成](https://eslint.org/docs/user-guide/integrations)；Grunt 开箱即支持 JSHint，并且还有其他可用的集成，例如 [Webpack 的 JSHint 加载器](https://github.com/webpack-contrib/jshint-loader)。
 
 > [!NOTE]
 > 尽管 ESLint 的安装和配置过程比起 JSHint 更繁琐，但是它也更强大。
@@ -235,7 +235,7 @@ fetch(requestURL).then((response) => {
 
 ### 使用了现代 JavaScript/API 特性
 
-在[之前的文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#浏览器不支持新特性)中，我们描述了由于 HTML 和 CSS 的语言性质，处理 HTML 和 CSS 错误和不被识别特性的一些方法。然而，JavaScript 不像 HTML 和 CSS 那么宽容，如果 JavaScript 引擎遇到错误或不被识别的语法（例如在使用新的不受支持的 特性时），它通常会抛出错误。
+在[之前的文章](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#浏览器不支持新特性)中，我们描述了由于 HTML 和 CSS 的语言性质，处理 HTML 和 CSS 错误和不被识别特性的一些方法。然而，JavaScript 不像 HTML 和 CSS 那么宽容，如果 JavaScript 引擎遇到错误或不被识别的语法（例如在使用新的不受支持的 特性时），它通常会抛出错误。
 
 有几种处理新特性支持的策略可以探索，让我们来探讨一下最常见的几种。
 
@@ -391,7 +391,7 @@ Aaron Andersen 撰写的[浏览器用户代理字符串的历史](https://webaim
 
 ### 处理 JavaScript 前缀
 
-在上一篇文章中，我们详细讨论了[处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)的内容。新的 JavaScript 实现有时也会使用前缀，但与 CSS 使用{{Glossary("kebab_case", "连字符")}}不同，JavaScript 采用{{Glossary("camel_case", "驼峰命名")}}。例如，如果一个新的 jshint API 对象名为 `Object`，不同的浏览器厂商会使用以下前缀：
+在上一篇文章中，我们详细讨论了[处理 CSS 前缀](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#处理_css_前缀)的内容。新的 JavaScript 实现有时也会使用前缀，但与 CSS 使用{{Glossary("kebab_case", "连字符")}}不同，JavaScript 采用{{Glossary("camel_case", "驼峰命名")}}。例如，如果一个新的 jshint API 对象名为 `Object`，不同的浏览器厂商会使用以下前缀：
 
 - Mozilla 会使用 `mozObject`
 - Chrome、Opera、Safari 会使用 `webkitObject`
@@ -422,7 +422,7 @@ window.AudioContext;
 
 ## 寻求帮助
 
-在使用 JavaScript 的过程中，你还会遇到很多其他问题；最重要的是知道如何在网上找到答案。请参考 HTML 和 CSS 文章的[寻找帮助部分](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#寻找帮助)，了解我们的最佳建议。
+在使用 JavaScript 的过程中，你还会遇到很多其他问题；最重要的是知道如何在网上找到答案。请参考 HTML 和 CSS 文章的[寻找帮助部分](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#寻找帮助)，了解我们的最佳建议。
 
 ## 总结
 
diff --git a/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md b/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md
index 33c2a2a9ba3044..a91d14240b4fe3 100644
--- a/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md
@@ -33,7 +33,7 @@ Web 浏览器是非常复杂的软件，有许多活动部件，其中许多部
 
 ![Web 浏览器的重要部分；文档就是网页。窗口包括整个文档，也包括标签。导航器是浏览器，它包括窗口（包括文档）和所有其他窗口](document-window-navigator.png)
 
-- 窗口（window）是载入网页的浏览器标签；在 JavaScript 中，它由 {{domxref("Window")}} 对象表示。使用这个对象上的方法，你可以做一些事情，比如返回窗口的大小（见 {{domxref("Window.innerWidth")}} 和 {{domxref("Window.innerHeight")}}），操作加载到窗口的文档，在客户端存储该文档的特定数据（例如使用本地数据库或其他存储机制），为当前窗口附加一个[事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#一系列事件)等。
+- 窗口（window）是载入网页的浏览器标签；在 JavaScript 中，它由 {{domxref("Window")}} 对象表示。使用这个对象上的方法，你可以做一些事情，比如返回窗口的大小（见 {{domxref("Window.innerWidth")}} 和 {{domxref("Window.innerHeight")}}），操作加载到窗口的文档，在客户端存储该文档的特定数据（例如使用本地数据库或其他存储机制），为当前窗口附加一个[事件处理器](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#一系列事件)等。
 - 导航器（navigator）在网络上出现时，代表浏览器的状态和身份（即用户代理）。在 JavaScript 中，它由 {{domxref("Navigator")}} 对象表示。你可以用这个对象来检索用户的首选语言、用户网络摄像头的媒体流等信息。
 - 文档（document，在浏览器中用 DOM 表示）是加载到窗口的实际页面，在 JavaScript 中，它由 {{domxref("Document")}} 对象表示。你可以使用这个对象来返回和操作构成文档的 HTML 和 CSS 的信息，例如，在 DOM 中获得一个元素的引用，改变其文本内容，对其应用新的样式，创建新的元素并将其作为子元素添加到当前元素中，甚至完全删除它。
 
diff --git a/files/zh-cn/learn_web_development/core/scripting/functions/index.md b/files/zh-cn/learn_web_development/core/scripting/functions/index.md
index ceaec52508d137..60ac1ffff45ae5 100644
--- a/files/zh-cn/learn_web_development/core/scripting/functions/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/functions/index.md
@@ -30,7 +30,7 @@ l10n:
 
 在 JavaScript 中，你将发现函数无处不在。事实上，到目前为止，我们一直在使用函数；我们只是还没正式地讨论它们。然而现在是时候了，让我们开始聊聊函数，并探索它们的语法。
 
-几乎任何时候，只要你使用一个带有一对圆括号（`()`）的 JavaScript 结构，并且你**没有**使用比如 [for 循环](/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code#循环的标准)、[while 或 do...while 循环](/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code#while_语句和_do_..._while_语句)，或者 [if...else 语句](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#if...else_语句)这样的常见的内置语言结构时，那么你就正在使用函数。
+几乎任何时候，只要你使用一个带有一对圆括号（`()`）的 JavaScript 结构，并且你**没有**使用比如 [for 循环](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops#循环的标准)、[while 或 do...while 循环](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops#while_语句和_do_..._while_语句)，或者 [if...else 语句](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#if...else_语句)这样的常见的内置语言结构时，那么你就正在使用函数。
 
 ## 浏览器内置函数
 
@@ -71,7 +71,7 @@ const myNumber = Math.random();
 
 JavaScript 语言中有许多内置的函数，它们可以让你无需自己编写所有的代码，就能做很多有用的事情。事实上，许多你**调用**（专业词语，意指“运行”或“执行”）浏览器内置函数时调用的代码并不能用 JavaScript 来编写——大多数调用浏览器后台的函数的代码，是使用像 C++ 这样更低级的系统语言编写的，而不是像 JavaScript 这样的 web 编程语言。
 
-请记住，这些内置浏览器函数不是核心 JavaScript 语言的一部分——其中部分函数被定义为浏览器 API 的一部分，它建立在默认语言之上，以提供更多的功能（请参阅[本课程的早期部分](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript#它到底可以做什么？)以获得更多的描述）。我们将在以后的模块中更详细地介绍如何使用浏览器 API。
+请记住，这些内置浏览器函数不是核心 JavaScript 语言的一部分——其中部分函数被定义为浏览器 API 的一部分，它建立在默认语言之上，以提供更多的功能（请参阅[本课程的早期部分](/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#它到底可以做什么？)以获得更多的描述）。我们将在以后的模块中更详细地介绍如何使用浏览器 API。
 
 ## 函数与方法
 
diff --git a/files/zh-cn/learn_web_development/core/scripting/object_basics/index.md b/files/zh-cn/learn_web_development/core/scripting/object_basics/index.md
index 6d77165f88e656..7253de4c8fb656 100644
--- a/files/zh-cn/learn_web_development/core/scripting/object_basics/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/object_basics/index.md
@@ -41,7 +41,7 @@ original_slug: Learn/JavaScript/Objects/Basics
 const person = {};
 ```
 
-打开你的浏览器的 [JavaScript 控制台](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools#javascript_控制台)输入 `person`，然后按下 <kbd>Enter</kbd>/<kbd>Return</kbd>，你可能会得到以下结果中的一种：
+打开你的浏览器的 [JavaScript 控制台](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#javascript_控制台)输入 `person`，然后按下 <kbd>Enter</kbd>/<kbd>Return</kbd>，你可能会得到以下结果中的一种：
 
 ```plain
 [object Object]
diff --git a/files/zh-cn/learn_web_development/core/scripting/what_is_javascript/index.md b/files/zh-cn/learn_web_development/core/scripting/what_is_javascript/index.md
index 194cb9c1cf956e..bbb6119fcdab4c 100644
--- a/files/zh-cn/learn_web_development/core/scripting/what_is_javascript/index.md
+++ b/files/zh-cn/learn_web_development/core/scripting/what_is_javascript/index.md
@@ -118,7 +118,7 @@ API 通常分为两类。
 
 现在我们实实在在的学习一些代码，与此同时，探索 JavaScript 运行时背后发生的事情。
 
-让我们简单回顾一下，浏览器在读取一个网页时都发生什么（[CSS 如何工作](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works#css_究竟是怎么工作的？)一文中首次谈及）。浏览器在读取一个网页时，代码（HTML、CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页）。
+让我们简单回顾一下，浏览器在读取一个网页时都发生什么（[CSS 如何工作](/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#css_究竟是怎么工作的？)一文中首次谈及）。浏览器在读取一个网页时，代码（HTML、CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页）。
 
 ![当页面加载时，HTML、CSS 和 JavaScript 代码共同创建浏览器标签页中的内容](execution.png)
 
@@ -297,7 +297,7 @@ for (let i = 0; i < buttons.length; i++) {
 
 ### 脚本加载策略
 
-页面上的所有 HTML 代码都按其出现的顺序加载。如果使用 JavaScript 去操作页面上的元素（更准确的说，是[文档对象模型](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#文档对象模型)），那么如果 JavaScript 在 HTML 之前就被加载和解析了，代码将无法运行。
+页面上的所有 HTML 代码都按其出现的顺序加载。如果使用 JavaScript 去操作页面上的元素（更准确的说，是[文档对象模型](/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting#文档对象模型)），那么如果 JavaScript 在 HTML 之前就被加载和解析了，代码将无法运行。
 
 有几种不同的策略来确保 JavaScript 只在 HTML 解析之后运行：
 
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md b/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md
index eadf79f169f37e..7da7ced120f448 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md
@@ -33,7 +33,7 @@ HTML 中有许多其他元素可以用于格式化文本，我们没有在 [HTML
 
 ## 描述列表
 
-在 HTML 文本处理基础中，我们讨论了如何在 HTML 中[标记基本的列表](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#列表)，并且提到了你偶尔会遇到的第三种列表类型——**描述列表**（description list）。这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。让我们看一组术语和定义的示例：
+在 HTML 文本处理基础中，我们讨论了如何在 HTML 中[标记基本的列表](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#列表)，并且提到了你偶尔会遇到的第三种列表类型——**描述列表**（description list）。这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。让我们看一组术语和定义的示例：
 
 ```plain
 内心独白
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/basic_html_syntax/index.md b/files/zh-cn/learn_web_development/core/structuring_content/basic_html_syntax/index.md
index bca7af260e6eef..4c75f4ac6b9123 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/basic_html_syntax/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/basic_html_syntax/index.md
@@ -226,13 +226,13 @@ textarea.onkeyup = () => {
 
 {{htmlelement("em")}} 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而 {{htmlelement("p")}} 是一个块级元素，所以第二行代码中的每个 _p_ 元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着展示 {{htmlelement("p")}} 元素的默认 [CSS 样式](/zh-CN/docs/Learn_web_development/Core/Styling_basics)）。
 
-{{ EmbedLiveSample('块级元素和内联元素', 700, 200, "", "") }}
+{{ EmbedLiveSample('块级元素和内联元素', 700, 200) }}
 
 > [!NOTE]
 > HTML5 重新定义了元素的类别：见[元素内容分类](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。
 
 > [!NOTE]
-> 在这篇文章中提到的“块”和“内联”，不应该与 [CSS 盒子的类型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#块级盒子（block_box）_和_内联盒子（inline_box）)中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。
+> 在这篇文章中提到的“块”和“内联”，不应该与 [CSS 盒子的类型](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model#块级盒子（block_box）_和_内联盒子（inline_box）)中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。
 
 > [!NOTE]
 > 你可以查阅包含了块级元素和内联元素列表的参考页面。参见[块级元素](/zh-CN/docs/Glossary/Block-level_content)和[内联元素](/zh-CN/docs/Glossary/Inline-level_content)页面。
@@ -732,7 +732,7 @@ textarea.onkeyup = () => {
 {{ EmbedLiveSample('实体引用：在 HTML 中包含特殊字符', 700, 200) }}
 
 > [!NOTE]
-> 不需要为任何其他符号使用实体引用，因为只要你的 HTML 的[字符编码设置为 UTF-8](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding)，现代浏览器就能很好地处理实际符号。
+> 不需要为任何其他符号使用实体引用，因为只要你的 HTML 的[字符编码设置为 UTF-8](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#指定文档中的字符编码)，现代浏览器就能很好地处理实际符号。
 
 ## HTML 注释
 
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md b/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md
index eac4889895a601..1af9ab07dffab7 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md
@@ -316,7 +316,7 @@ URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件
 ```
 
 > [!NOTE]
-> 每个字段的值必须使用 URL 编码，即使用{{Glossary("Percent-encoding", "百分号转义")}}的非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（`?`）来分隔主 URL 与参数值，以及使用 & 符来分隔 `mailto:` URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 [GET 方法](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data#get_方法)以了解哪种 URL 查询标记方法是更常用的。
+> 每个字段的值必须使用 URL 编码，即使用{{Glossary("Percent-encoding", "百分号转义")}}的非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（`?`）来分隔主 URL 与参数值，以及使用 & 符来分隔 `mailto:` URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 [GET 方法](/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data#get_方法)以了解哪种 URL 查询标记方法是更常用的。
 
 这里有一些其他的示例 `mailto` 链接：
 
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/html_images/index.md b/files/zh-cn/learn_web_development/core/structuring_content/html_images/index.md
index 91dd869997157e..89e8c04a30177b 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/html_images/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/html_images/index.md
@@ -45,7 +45,7 @@ l10n:
 ['alt' 属性的描述如下](#备选文本)。
 
 > [!NOTE]
-> 为了更容易理解下面的内容，建议你阅读 [URL 和路径简明入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#统一资源定位符（url）与路径（path）快速入门)来复习一下相对和绝对 URL 的概念。
+> 为了更容易理解下面的内容，建议你阅读 [URL 和路径简明入门](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links#统一资源定位符（url）与路径（path）快速入门)来复习一下相对和绝对 URL 的概念。
 
 例如，如果你的图像叫做 `dinosaur.jpg`，并且它位于与 HTML 页面相同的目录中，你可以这样嵌入图像：
 
@@ -113,13 +113,13 @@ l10n:
 
 - **装饰**：如果图片仅用于装饰，你应该使用 [CSS 背景图片](#css_背景图片)，但如果必须使用 HTML，请添加空的 `alt=""`。如果图片不是内容的一部分，那么屏幕阅读器不应该浪费时间读取它。
 - **内容**：如果你的图片提供了重要的信息，就要在 `alt` 文本中*简要*的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写 `alt=""` 就好。
-- **链接**：如果你把图片嵌套在 {{htmlelement("a")}} 标签里，来把图片变成链接，那你还必须提供[无障碍的链接文本](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#使用清晰的链接措辞)。在这种情况下，你可以写在同一个 `<a>` 元素里，或者写在图片的 `alt` 属性里，随你喜欢。
+- **链接**：如果你把图片嵌套在 {{htmlelement("a")}} 标签里，来把图片变成链接，那你还必须提供[无障碍的链接文本](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links#使用清晰的链接措辞)。在这种情况下，你可以写在同一个 `<a>` 元素里，或者写在图片的 `alt` 属性里，随你喜欢。
 - **文本**：你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以[用 CSS](/zh-CN/docs/Web/CSS/text-shadow) 来达到这个目的，而不是把文本放到图片里。如果*真的必须这么做*，那就把文本也放到 `alt` 里。
 
 本质上，关键在于即使图片无法被看见，也能提供可用的体验，这确保了所有人都不会错失某部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了，你会很快意识到在图片无法显示时备选文本能帮上多大忙。
 
 > [!NOTE]
-> 如需了解更多信息，请参阅我们的[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)指南。
+> 如需了解更多信息，请参阅我们的[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)指南。
 
 ### 宽度和高度
 
@@ -187,7 +187,7 @@ l10n:
 
 ### 图像标题
 
-类似于[超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#使用_title_属性添加支持信息)，你可以通过给图片增加 `title` 属性来提供更多的信息。在我们的例子中，可以这样做：
+类似于[超链接](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links#使用_title_属性添加支持信息)，你可以通过给图片增加 `title` 属性来提供更多的信息。在我们的例子中，可以这样做：
 
 ```html
 <img
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/html_table_basics/index.md b/files/zh-cn/learn_web_development/core/structuring_content/html_table_basics/index.md
index cb6ad9be996393..c8c27dffece0ca 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/html_table_basics/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/html_table_basics/index.md
@@ -217,11 +217,11 @@ td {
 
 ### 什么时候你不应该使用 HTML 表格？
 
-HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途。不幸的是，许多人习惯用 HTML 表格来实现网页布局，例如：一行包含头部，一行包含几列内容，一行包含尾部。你可以在我们的[无障碍学习模块](/zh-CN/docs/Learn_web_development/Core/Accessibility)中的[页面布局](/zh-CN/docs/Learn/Accessibility/HTML#页面布局)章节获得更多细节内容和一个示例。这种做法以前是很常见的，因为以前 CSS 在不同浏览器上的兼容性比较糟糕；表格布局现在不太普遍，但你可能仍然会在网络的某些角落看到它们。
+HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途。不幸的是，许多人习惯用 HTML 表格来实现网页布局，例如：一行包含头部，一行包含几列内容，一行包含尾部。你可以在我们的[无障碍学习模块](/zh-CN/docs/Learn_web_development/Core/Accessibility)中的[页面布局](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#页面布局)章节获得更多细节内容和一个示例。这种做法以前是很常见的，因为以前 CSS 在不同浏览器上的兼容性比较糟糕；表格布局现在不太普遍，但你可能仍然会在网络的某些角落看到它们。
 
 简单来说，使用表格布局而不使用 [CSS 布局技巧](/zh-CN/docs/Learn_web_development/Core/CSS_layout)是很糟糕的。主要的理由有以下几个：
 
-1. **表格布局减少了视觉受损的用户的无障碍**: 盲人所使用的[屏幕阅读器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#屏幕阅读器)会解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具，使用的标记比使用 CSS 布局技术更复杂，所以屏幕阅读器的输出会让他们的用户感到困惑。
+1. **表格布局减少了视觉受损的用户的无障碍**: 盲人所使用的[屏幕阅读器](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#屏幕阅读器)会解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具，使用的标记比使用 CSS 布局技术更复杂，所以屏幕阅读器的输出会让他们的用户感到困惑。
 2. **表格会产生很多标签**: 正如刚才提到的，表格布局通常会比正确的布局技术涉及更复杂的标签结构，这会导致代码变得更难于编写、维护、调试。
 3. **表格不能自动响应**: 当你使用正确的布局容器（比如 {{htmlelement("header")}}、{{htmlelement("section")}}、{{htmlelement("article")}} 或是 {{htmlelement("div")}}）时，它们的默认宽度是父元素的 100%；而表格的默认大小是根据其内容而定的。因此，需要采取额外的措施来获取表格布局样式，以便有效地在各种设备上工作。
 
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/structuring_documents/index.md b/files/zh-cn/learn_web_development/core/structuring_content/structuring_documents/index.md
index 08dfb80a5988a0..a6d57ab5f6e1d2 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/structuring_documents/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/structuring_documents/index.md
@@ -60,7 +60,7 @@ original_slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 
 > **备注：** [全球色盲患者比例为 4%](http://www.color-blindness.com/2006/04/28/colorblind-population/)，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（[约 70 亿](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)）的 13％（2015 年 [全球约有 9.4 亿人口存在视力问题](https://en.wikipedia.org/wiki/Visual_impairment)）。
 
-HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航“或”找到主内容“等任务。参见前文所讲的 [页面中元素结构和语义不佳所带来的后果](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#%e4%b8%ba%e4%bb%80%e4%b9%88%e6%88%91%e4%bb%ac%e9%9c%80%e8%a6%81%e7%bb%93%e6%9e%84%e5%8c%96)。
+HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航“或”找到主内容“等任务。参见前文所讲的[页面中元素结构和语义不佳所带来的后果](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#为什么我们需要结构化？)。
 
 为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
 
@@ -143,7 +143,7 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
 - {{HTMLElement('article')}} 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
 - {{HTMLElement('section')}} 与 `<article>` 类似，但 `<section>` 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 [标题](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 作为开头；也可以把一篇 `<article>` 分成若干部分并分别置于不同的 `<section>` 中，也可以把一个区段 `<section>` 分成若干部分并分别置于不同的 `<article>` 中，取决于上下文。
 - {{HTMLElement('aside')}} 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
-- {{HTMLElement('header')}} 是简介形式的内容。如果它是 {{HTMLElement('body')}} 的子元素，那么就是网站的全局页眉。如果它是 {{HTMLElement('article')}} 或{{HTMLElement('section')}} 的子元素，那么它是这些部分特有的页眉（此 `<header>` 非彼 [标题](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#%e5%a2%9e%e5%8a%a0%e4%b8%80%e4%b8%aa%e6%a0%87%e9%a2%98)）。
+- {{HTMLElement('header')}} 是简介形式的内容。如果它是 {{HTMLElement('body')}} 的子元素，那么就是网站的全局页眉。如果它是 {{HTMLElement('article')}} 或{{HTMLElement('section')}} 的子元素，那么它是这些部分特有的页眉（此 `<header>` 非彼[标题](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#添加标题)）。
 - {{HTMLElement('nav')}} 包含页面主导航功能。其中不应包含二级链接等内容。
 - {{HTMLElement('footer')}} 包含了页面的页脚部分。
 
@@ -205,7 +205,7 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
 </p>
 ```
 
-没有 `<br>` 元素，这段会直接显示在长长的一行中（如前文所讲，[HTML 会忽略大部分空格](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started#html%e4%b8%ad%e7%9a%84%e7%a9%ba%e7%99%bd)）；使用 `<br>` 元素，才使得诗看上去像诗：
+没有 `<br>` 元素，这段会直接显示在长长的一行中（如前文所讲，[HTML 会忽略大部分空格](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#html_中的空白)）；使用 `<br>` 元素，才使得诗看上去像诗：
 
 {{EmbedLiveSample('br_换行元素', '100%', 150)}}
 
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/table_accessibility/index.md b/files/zh-cn/learn_web_development/core/structuring_content/table_accessibility/index.md
index 22c9012dfd11bf..8ae1d8a93b2413 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/table_accessibility/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/table_accessibility/index.md
@@ -49,7 +49,7 @@ original_slug: Learn/HTML/Tables/Advanced
 
 我们来试试看吧，回顾一下我们在之前的文章中第一次遇到的例子。.
 
-1. 打开你的语言老师的学校时间表，就是 [HTML 表格基础](/zh-CN/docs/Learn/HTML/Tables/Basics#动手练习：colgroup_和_col) 结尾中的例子，或者把 [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) 文件复制到本地。
+1. 打开你的语言老师的学校时间表，就是 [HTML 表格基础](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics#动手练习：colgroup_和_col) 结尾中的例子，或者把 [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) 文件复制到本地。
 2. 为表格添加一个合适的标题。
 3. 保存你的代码，然后用浏览器打开，看看你的表格是什么样的。
 
@@ -229,7 +229,7 @@ th {
 
 屏幕阅读设备会识别所有的标题，然后在它们和它们所关联的单元格之间产生程序关联。列和行标题的组合将标识和解释每个单元格中的数据，以便屏幕阅读器用户可以类似于视力正常的用户的操作来理解表格。
 
-我们之前的文章就提到过这一点，可见[使用 \<th> 元素添加标题](/zh-CN/docs/Learn/HTML/Tables/Basics#使用_th_元素添加标题)。
+我们之前的文章就提到过这一点，可见[使用 \<th> 元素添加标题](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics#使用_th_元素添加标题)。
 
 ### scope 属性
 
diff --git a/files/zh-cn/learn_web_development/core/structuring_content/webpage_metadata/index.md b/files/zh-cn/learn_web_development/core/structuring_content/webpage_metadata/index.md
index 97ad82d56532ff..1e7220c7013d79 100644
--- a/files/zh-cn/learn_web_development/core/structuring_content/webpage_metadata/index.md
+++ b/files/zh-cn/learn_web_development/core/structuring_content/webpage_metadata/index.md
@@ -23,7 +23,7 @@ original_slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 
 ## 什么是 HTML 头部
 
-让我们简单回顾一下[上一章节的 HTML 文档](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started#剖析html文档)：
+让我们简单回顾一下[上一章节的 HTML 文档](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#剖析html文档)：
 
 ```html
 <!doctype html>
@@ -252,7 +252,7 @@ Twitter 还拥有自己的类型的专有元数据协议（称为 [Twitter Cards
   <link rel="stylesheet" href="my-css-file.css" />
   ```
 
-- {{htmlelement("script")}} 元素也应当放在文档的头部，并包含 `src` 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 `defer` 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。实际上有很多方法来处理在你的页面上加载 JavaScript，但对于现代浏览器来说，这是最可靠的方法（对于其他方法，请阅读[脚本加载策略](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript#脚本调用策略)）。
+- {{htmlelement("script")}} 元素也应当放在文档的头部，并包含 `src` 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 `defer` 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。实际上有很多方法来处理在你的页面上加载 JavaScript，但对于现代浏览器来说，这是最可靠的方法（对于其他方法，请阅读[脚本加载策略](/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#脚本调用策略)）。
 
   ```html
   <script src="my-js-file.js" defer></script>
diff --git a/files/zh-cn/learn_web_development/core/styling_basics/cascade_layers/index.md b/files/zh-cn/learn_web_development/core/styling_basics/cascade_layers/index.md
index 730112d6f59d10..d721d35218868c 100644
--- a/files/zh-cn/learn_web_development/core/styling_basics/cascade_layers/index.md
+++ b/files/zh-cn/learn_web_development/core/styling_basics/cascade_layers/index.md
@@ -411,7 +411,7 @@ body {
 
 ## 技能测试！
 
-你已经阅读完本文，但是你还记得最重要的信息吗？在继续学习之前，你可以找到一些进一步的测试来验证你已经掌握了这些信息——请参阅[技能测试：层叠—任务 2](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_tasks#任务_2)。
+你已经阅读完本文，但是你还记得最重要的信息吗？在继续学习之前，你可以找到一些进一步的测试来验证你已经掌握了这些信息——请参阅[技能测试：层叠—任务 2](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cascade_tasks#任务_2)。
 
 ## 总结
 
diff --git a/files/zh-cn/learn_web_development/core/styling_basics/sizing/index.md b/files/zh-cn/learn_web_development/core/styling_basics/sizing/index.md
index d6d55321420245..359ec6ed3b4263 100644
--- a/files/zh-cn/learn_web_development/core/styling_basics/sizing/index.md
+++ b/files/zh-cn/learn_web_development/core/styling_basics/sizing/index.md
@@ -56,17 +56,17 @@ original_slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 
 由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。
 
-### 使用百分数
+### 使用百分比
 
-许多时候，百分数是长度单位，正如我们在 [Value and units 这节课中讨论的那样](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#percentages)，它们常常可与长度互换。当使用百分数时，你需要清楚，它是**什么**东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。
+许多时候，百分比是长度单位，正如我们在[值和单位这节课中讨论的那样](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#百分比)，它们常常可与长度互换。当使用百分比时，你需要清楚，它是**什么**东西的百分比。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分比作为宽度，那么它指的是父容器宽度的百分比。
 
 {{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}
 
-这是因为百分数是以包含盒子的块为根据解析的。如果我们的 `<div>` 没有被指定百分数的值，那么它会占据 100% 的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。
+这是因为百分比是以包含盒子的块为根据解析的。如果我们的 `<div>` 没有被指定百分比的值，那么它会占据 100% 的可用空间，因为它是块级别的元素。如果我们给了它一个百分比作为宽度，那么这就是它原来情况下可以占据空间的百分比。
 
-### 把百分数作为内外边距
+### 把百分比作为内外边距
 
-如果你把 `margins` 和 `padding` 设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子 10% 的 {{cssxref("margin")}} 以及 10% 的 {{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。
+如果你把 `margins` 和 `padding` 设置为百分比的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子 10% 的 {{cssxref("margin")}} 以及 10% 的 {{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。
 
 {{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}
 
diff --git a/files/zh-cn/learn_web_development/core/styling_basics/values_and_units/index.md b/files/zh-cn/learn_web_development/core/styling_basics/values_and_units/index.md
index 6a98976cfb6693..3571227a97019e 100644
--- a/files/zh-cn/learn_web_development/core/styling_basics/values_and_units/index.md
+++ b/files/zh-cn/learn_web_development/core/styling_basics/values_and_units/index.md
@@ -676,7 +676,7 @@ li {
 
 在上面的示例中，我们看到关键字被用作值的地方（例如 `<color>` 关键字，如 `red`、`black`、`rebeccapurple` 和 `goldenrod`）。这些关键字被更准确地描述为标识符，一个 CSS 可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
 
-在某些地方可以使用 CSS 中的字符串，例如[在指定生成的内容时](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#生成带有before_和after_的内容)。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。
+在某些地方可以使用 CSS 中的字符串，例如[在指定生成的内容时](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements#生成带有before_和after_的内容)。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。
 
 ```html live-sample___strings-idents
 <div class="box"></div>
diff --git a/files/zh-cn/learn_web_development/core/styling_basics/what_is_css/index.md b/files/zh-cn/learn_web_development/core/styling_basics/what_is_css/index.md
index 1c5544a14bfc10..a3ef6b83069719 100644
--- a/files/zh-cn/learn_web_development/core/styling_basics/what_is_css/index.md
+++ b/files/zh-cn/learn_web_development/core/styling_basics/what_is_css/index.md
@@ -115,7 +115,7 @@ span {
 
 ## 当浏览器遇到无法解析的 CSS 代码会发生什么
 
-在[之前的文章中](/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS#浏览器支持)我们提到了浏览器并不会同时实现所有的新 CSS，此外很多人也不会使用最新版本的浏览器。鉴于 CSS 一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的 CSS 选择器或声明的时候会发生什么呢？
+在[之前的文章中](/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#浏览器支持)我们提到了浏览器并不会同时实现所有的新 CSS，此外很多人也不会使用最新版本的浏览器。鉴于 CSS 一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的 CSS 选择器或声明的时候会发生什么呢？
 
 答案就是浏览器什么也不会做，继续解析下一个 CSS 样式！
 
diff --git a/files/zh-cn/learn_web_development/core/text_styling/fundamentals/index.md b/files/zh-cn/learn_web_development/core/text_styling/fundamentals/index.md
index 4e02cd7c784736..6a0a171cc84a5b 100644
--- a/files/zh-cn/learn_web_development/core/text_styling/fundamentals/index.md
+++ b/files/zh-cn/learn_web_development/core/text_styling/fundamentals/index.md
@@ -68,7 +68,7 @@ original_slug: Learn/CSS/Styling_text/Fundamentals
 
 {{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。
 
-`color` 也可以接受任何合法的 [CSS 颜色单位](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#colors), 比如：
+`color` 也可以接受任何合法的 [CSS 颜色单位](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#颜色)，比如：
 
 ```css
 p {
@@ -313,7 +313,7 @@ p {
 
 ### 字体大小
 
-在我们之前的模块中的[CSS values and units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units) 文章，我们回顾了[length and size units](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size). 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 [percentages](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#percentages))，然而你在调整字体大小时，最常用的单位是：
+在我们之前的模块中的[CSS values and units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units) 文章，我们回顾了[length and size units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#length_and_size)。字体大小（通过 {{cssxref("font-size")}} 属性设置）可以取大多数这些单位的值 (以及其他，比如[百分比](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#百分比))，然而你在调整字体大小时，最常用的单位是：
 
 - `px` (像素): 将像素的值赋予给你的文本。这是一个绝对单位，它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。
 - `em`: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手，但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢？当你习惯这样做时，那么就会变得很自然，你可以使用`em`调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。
@@ -453,10 +453,10 @@ text-shadow: 4px 4px 5px red;
 
 4 个属性如下：
 
-1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 [length and size units](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size), 但是 px 是比较合适的。这个值必须指定。
+1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 [length and size units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#length_and_size), 但是 px 是比较合适的。这个值必须指定。
 2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
-3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 单位 [length and size units](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size).
-4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 [CSS color unit](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#colors). 如果没有指定，默认为 `black`.
+3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 单位 [length and size units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#length_and_size).
+4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 [CSS color unit](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#colors). 如果没有指定，默认为 `black`.
 
 > [!NOTE]
 > 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 `-1px -1px`.
@@ -580,7 +580,7 @@ p {
 
 ### 行高
 
-{{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 [length and size units](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size)，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 `line-height`。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的 1.5 倍，你可以使用这个：
+{{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 [length and size units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#length_and_size)，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 `line-height`。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的 1.5 倍，你可以使用这个：
 
 ```css
 line-height: 1.5;
@@ -634,7 +634,7 @@ p {
 
 ### 字母和单词间距
 
-{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 [length and size units](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size).
+{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 [length and size units](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#length_and_size).
 
 所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：
 
diff --git a/files/zh-cn/learn_web_development/core/text_styling/styling_links/index.md b/files/zh-cn/learn_web_development/core/text_styling/styling_links/index.md
index 4b67c3e708a776..e8d90f5c348863 100644
--- a/files/zh-cn/learn_web_development/core/text_styling/styling_links/index.md
+++ b/files/zh-cn/learn_web_development/core/text_styling/styling_links/index.md
@@ -42,7 +42,7 @@ l10n:
 
 ### 链接状态
 
-第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的[伪类](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类)来应用样式：
+第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的[伪类](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#伪类)来应用样式：
 
 - **Link**：有目的地的链接（即不只是一个具名锚点），使用 {{cssxref(":link")}} 伪类来应用样式。
 - **Visited**：已访问过（存在于浏览器历史记录中）的链接，使用 {{cssxref(":visited")}} 伪类来应用样式。
@@ -383,13 +383,13 @@ a[href^="http"] {
 
 {{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}
 
-那么这里发生了什么？我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇[自定义列表项目符号](/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists#使用自定义的项目符号图片)文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 `no-repeat` ，这样我们只插入了一次图片，然后指定位置为 100%，使其出现在内容的右边，距离上方是 0 像素。
+那么这里发生了什么？我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇[自定义列表项目符号](/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists#使用自定义的项目符号图片)文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 `no-repeat` ，这样我们只插入了一次图片，然后指定位置为 100%，使其出现在内容的右边，距离上方是 0 像素。
 
 我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于 IE 9 及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。
 
 最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。
 
-最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的 [HTML 链接](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links)，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个[属性选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#标签属性选择器)——`a[href^="http"]`——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 [`href`](/zh-CN/docs/Web/HTML/Element/a#href) 属性，且属性的值以“http”开头的 {{htmlelement("a")}} 元素。
+最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的 [HTML 链接](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links)，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个[属性选择器](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#标签属性选择器)——`a[href^="http"]`——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 [`href`](/zh-CN/docs/Web/HTML/Element/a#href) 属性，且属性的值以“http”开头的 {{htmlelement("a")}} 元素。
 
 就是这样。重温上文的动手练习部分，试试这种新技巧吧！
 
diff --git a/files/zh-cn/learn_web_development/core/text_styling/styling_lists/index.md b/files/zh-cn/learn_web_development/core/text_styling/styling_lists/index.md
index dcc07ca0527129..a253b9ef5a9b6e 100644
--- a/files/zh-cn/learn_web_development/core/text_styling/styling_lists/index.md
+++ b/files/zh-cn/learn_web_development/core/text_styling/styling_lists/index.md
@@ -6,7 +6,7 @@ original_slug: Learn/CSS/Styling_text/Styling_lists
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core/Text_styling/Styling_links", "Learn_web_development/Core/Text_styling")}}
 
-[列表](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#列表)大体上和其他文本一样，但是仍有一些你需要知道的特殊 CSS 属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。
+[列表](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#列表)大体上和其他文本一样，但是仍有一些你需要知道的特殊 CSS 属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。
 
 <table>
   <tbody>
diff --git a/files/zh-cn/learn_web_development/core/text_styling/web_fonts/index.md b/files/zh-cn/learn_web_development/core/text_styling/web_fonts/index.md
index 1dc83fd8e2d51f..78689638cd47e7 100644
--- a/files/zh-cn/learn_web_development/core/text_styling/web_fonts/index.md
+++ b/files/zh-cn/learn_web_development/core/text_styling/web_fonts/index.md
@@ -43,7 +43,7 @@ p {
 }
 ```
 
-这个系统运行良好，但是对于传统的 web 开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 [Web-safe 字体](/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts)。你可以使用字体堆栈来指定可选择的字体，后面是 Web-safe 的替代选项，然后是默认的系统字体，但是为了确保你的设计在每种字体中都显示正常，这样增加了测试的开销。
+这个系统运行良好，但是对于传统的 web 开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 [Web 安全字体](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals#网页安全字体)。你可以使用字体堆栈来指定可选择的字体，后面是 Web 安全的替代选项，然后是默认的系统字体，但是为了确保你的设计在每种字体中都显示正常，这样增加了测试的开销。
 
 ## Web 字体
 
diff --git a/files/zh-cn/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md b/files/zh-cn/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md
index 8983eca4e191d9..11f37f9b6b1a74 100644
--- a/files/zh-cn/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md
+++ b/files/zh-cn/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md
@@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Objects/Classes_in_JavaScript
 
 在[上一篇文章](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming)中，我们介绍了面向对象编程（OOP）的基本概念，并介绍了一个使用 OOP 原则对学校的教授和学生进行建模的示例。
 
-我们还讨论了如何使用[原型](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes)和[构造函数](/zh-CN/docs/Learn/JavaScript/Objects/Basics#introducing_constructors)来实现这样的模型，而 JavaScript 还提供了更接近经典 OOP 概念的特性。
+我们还讨论了如何使用[原型](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes)和[构造函数](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#构造函数介绍)来实现这样的模型，而 JavaScript 还提供了更接近经典 OOP 概念的特性。
 
 在本文中，我们将介绍这些特性。注意，这里描述的特性并不是一种继承对象的新方式：在引擎的底层，这一特性使用的仍是原型。这只是一种更容易的创建原型链的方法。
 
diff --git a/files/zh-cn/learn_web_development/extensions/async_js/sequencing_animations/index.md b/files/zh-cn/learn_web_development/extensions/async_js/sequencing_animations/index.md
index 74fd03fbc9d1ad..c1baf42be69df3 100644
--- a/files/zh-cn/learn_web_development/extensions/async_js/sequencing_animations/index.md
+++ b/files/zh-cn/learn_web_development/extensions/async_js/sequencing_animations/index.md
@@ -85,11 +85,11 @@ alice1.animate(aliceTumbling, aliceTiming);
 
 我们希望你尝试一些不同的方式来实现这个功能，以便于加强对使用 Promise 的不同方式的理解。
 
-1. 首先，实现一个能够工作的代码，但它存在“回调地狱”问题（我们在[关于回调的讨论](/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing#回调)中提到过）的 Promise 版本。
+1. 首先，实现一个能够工作的代码，但它存在“回调地狱”问题（我们在[关于回调的讨论](/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing#回调)中提到过）的 Promise 版本。
 
-2. 接下来，使用 [Promise 链](/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises#链式使用_promise)来实现它。注意：可以用[箭头函数](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#箭头函数)的不同形式来编写这个函数。尝试这些不同的形式。哪个最简洁？哪个可读性最好？
+2. 接下来，使用 [Promise 链](/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises#链式使用_promise)来实现它。注意：可以用[箭头函数](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#箭头函数)的不同形式来编写这个函数。尝试这些不同的形式。哪个最简洁？哪个可读性最好？
 
-3. 使用 [`async` 和 `await`](/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises#async_和_await) 来实现它。
+3. 使用 [`async` 和 `await`](/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises#async_和_await) 来实现它。
 
 别忘了，`element.animate()` 并不返回一个 `Promise`：它返回一个 `Animation` 对象，该对象具有一个 `finished` 属性，这个属性才是 `Promise`。
 
diff --git a/files/zh-cn/learn_web_development/extensions/client-side_apis/client-side_storage/index.md b/files/zh-cn/learn_web_development/extensions/client-side_apis/client-side_storage/index.md
index 0ddabbbdee13f2..b2daae05dae202 100644
--- a/files/zh-cn/learn_web_development/extensions/client-side_apis/client-side_storage/index.md
+++ b/files/zh-cn/learn_web_development/extensions/client-side_apis/client-side_storage/index.md
@@ -34,7 +34,7 @@ l10n:
 
 ## 客户端存储？
 
-在其他的 MDN 学习中我们已经讨论过[静态网站](/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview#静态网站)和[动态网站](/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview#动态网站)的区别。大多数现代的网站是动态的——它们在服务端使用各种类型的数据库（服务端存储）来存储数据，之后通过运行[服务端](/zh-CN/docs/Learn_web_development/Extensions/Server-side)代码来查询需要的数据，把其数据插入到静态页面的模板中，并将生成的 HTML 提供给客户端，以在用户的浏览器中显示。
+在其他的 MDN 学习中我们已经讨论过[静态网站](/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#静态网站)和[动态网站](/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#动态网站)的区别。大多数现代的网站是动态的——它们在服务端使用各种类型的数据库（服务端存储）来存储数据，之后通过运行[服务端](/zh-CN/docs/Learn_web_development/Extensions/Server-side)代码来查询需要的数据，把其数据插入到静态页面的模板中，并将生成的 HTML 提供给客户端，以在用户的浏览器中显示。
 
 客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript API 组成的因此允许你在客户端存储数据（比如在用户的机器上），而且可以在需要的时候查询相关的数据。这有很多明显的用处，比如：
 
diff --git a/files/zh-cn/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md b/files/zh-cn/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
index 43e477f3a055fb..ee0a1f71ff627c 100644
--- a/files/zh-cn/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
+++ b/files/zh-cn/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
@@ -131,7 +131,7 @@ ctx.fillStyle = "rgb(0, 0, 0)";
 ctx.fillRect(0, 0, width, height);
 ```
 
-这里我们使用画布的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性（和 CSS 属性[色值](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#颜色)一致）设置填充色，然后使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} 方法绘制一个覆盖整个区域的矩形（前两个参数是矩形左上顶点的坐标，后两个参数是矩形的长宽，现在你知道 `width` 和 `height` 的作用了吧）。
+这里我们使用画布的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性（和 CSS 属性[色值](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#颜色)一致）设置填充色，然后使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} 方法绘制一个覆盖整个区域的矩形（前两个参数是矩形左上顶点的坐标，后两个参数是矩形的长宽，现在你知道 `width` 和 `height` 的作用了吧）。
 
 好的，模板已经就位，我们要开始了。
 
diff --git a/files/zh-cn/learn_web_development/extensions/client-side_apis/third_party_apis/index.md b/files/zh-cn/learn_web_development/extensions/client-side_apis/third_party_apis/index.md
index 0ba190d02b592f..e3662722da38f7 100644
--- a/files/zh-cn/learn_web_development/extensions/client-side_apis/third_party_apis/index.md
+++ b/files/zh-cn/learn_web_development/extensions/client-side_apis/third_party_apis/index.md
@@ -44,7 +44,7 @@ l10n:
 
 ### 它们植根于第三方服务器
 
-浏览器 API 在浏览器构建之初就存在：用 JavaScript 就可以立即访问它们。例如，[在简介](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#api_如何工作？)中所使用的 Web Audio API 就是通过原生的 {{domxref("AudioContext")}} 对象来访问的。
+浏览器 API 在浏览器构建之初就存在：用 JavaScript 就可以立即访问它们。例如，[在简介](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#api_如何工作？)中所使用的 Web Audio API 就是通过原生的 {{domxref("AudioContext")}} 对象来访问的。
 
 ```js
 const audioCtx = new AudioContext();
@@ -85,7 +85,7 @@ const map = L.mapquest.map("map", {
 
 ### 它们通常需要 API 密钥
 
-浏览器 API 的安全通常通过权限提示处理，正如[我们前文所说](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#它们在适当的地方有额外的安全机制)。这样做的目的是让用户知道他们访问的网站上发生了什么，从而减少因有人恶意使用 API 而受害的可能性。
+浏览器 API 的安全通常通过权限提示处理，正如[我们前文所说](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#它们在适当的地方有额外的安全机制)。这样做的目的是让用户知道他们访问的网站上发生了什么，从而减少因有人恶意使用 API 而受害的可能性。
 
 第三方 API 有一个稍微不同的权限系统——它们倾向于使用开发者密钥来允许开发人员访问 API 功能。这更多是为了保护 API 的提供者而非用户。
 
diff --git a/files/zh-cn/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md b/files/zh-cn/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md
index 2fcc53b3be91e1..9daa8968ed13c5 100644
--- a/files/zh-cn/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md
+++ b/files/zh-cn/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md
@@ -105,7 +105,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Introduci
 
 ### 软件包安装工具
 
-我们将使用 npm 安装我们的工具，我们已经在第二章中介绍了它。你应该已经安装了 Node.js 和 npm，但如果没有，请[参考该部分](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#添加工具)。
+我们将使用 npm 安装我们的工具，我们已经在第二章中介绍了它。你应该已经安装了 Node.js 和 npm，但如果没有，请[参考该部分](/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line#添加工具)。
 
 > [!NOTE]
 > 虽然不清楚具体的安装过程，但安装 npm 时还会安装一个名为 npx 的补充工具。我们稍后将使用 npx 来帮助运行作为项目本地依赖项安装的工具。
@@ -132,7 +132,7 @@ Git 可以通过 git-scm 网站[下载和安装](https://git-scm.com/downloads)
 
 ### 代码格式化工具
 
-我们将在本项目中使用 Prettier——我们在第二章中介绍了它——来格式化我们的代码。如果你按照[安装 Prettier](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#下载pprettier) 部分中的说明进行操作，那么你可能已经安装了 Prettier。如果没有，我们将让你立即使用终端将 Prettier 安装为全局程序。
+我们将在本项目中使用 Prettier——我们在第二章中介绍了它——来格式化我们的代码。如果你按照[安装 Prettier](/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line#下载_prettier) 部分中的说明进行操作，那么你可能已经安装了 Prettier。如果没有，我们将让你立即使用终端将 Prettier 安装为全局程序。
 
 你可以使用以下命令检查是否已在全局安装它：
 
@@ -366,7 +366,7 @@ npm install --save-dev eslint prettier babel-eslint
 
 转换工具有很多选择，尽管 WebPack 是一个特别流行的选择，但本项目将使用 Parcel——因为它只需要很少的配置。
 
-Parcel 的工作原理是它会尝试根据你的开发需求进行动态配置。Parcel 会监视代码并在开发过程中运行实时重新加载的 Web 服务器。这也意味着 Parcel 会自动安装我们的软件依赖项，因为它们在源代码中被引用，就像我们在[第三章](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management#使用软件包生态系统)中所看到的那样。
+Parcel 的工作原理是它会尝试根据你的开发需求进行动态配置。Parcel 会监视代码并在开发过程中运行实时重新加载的 Web 服务器。这也意味着 Parcel 会自动安装我们的软件依赖项，因为它们在源代码中被引用，就像我们在[第三章](/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management#使用软件包生态系统)中所看到的那样。
 
 Parcel 将处理安装任何所需的转换工具和配置，而我们不需要干预（在大多数情况下）。
 
diff --git a/files/zh-cn/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md b/files/zh-cn/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
index 506a00ec0bcf1d..d3f5d62f0a085e 100644
--- a/files/zh-cn/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
+++ b/files/zh-cn/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
@@ -723,7 +723,7 @@ window.addEventListener("load", function () {
 
 #### 不使用 JS
 
-查看[完整源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2#不使用_js)。
+查看[完整源代码](/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#不使用_js)。
 
 ```html hidden
 <form class="no-widget">
@@ -762,7 +762,7 @@ window.addEventListener("load", function () {
 
 #### 使用 JS
 
-查看[完整源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2#使用_js)。
+查看[完整源代码](/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#使用_js)。
 
 ```html hidden
 <form class="no-widget">
diff --git a/files/zh-cn/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md b/files/zh-cn/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
index 2f0dd270a73563..e92621dc0831a2 100644
--- a/files/zh-cn/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-cn/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
@@ -78,7 +78,7 @@ l10n:
 
 本例中的用例是最重要的。每当使用一组单选按钮时，都应该将它们嵌套在 {{HTMLElement("fieldset")}} 元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}} 元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的 fieldset 里，可以提高可用性。
 
-因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建无障碍表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，请尝试[听一听屏幕阅读器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#屏幕阅读器)如何解释它。如果听起来很奇怪，请尝试改进表单结构。
+因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建无障碍表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，请尝试[听一听屏幕阅读器](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#屏幕阅读器)如何解释它。如果听起来很奇怪，请尝试改进表单结构。
 
 ## \<label> 元素
 
diff --git a/files/zh-cn/learn_web_development/extensions/forms/sending_and_retrieving_form_data/index.md b/files/zh-cn/learn_web_development/extensions/forms/sending_and_retrieving_form_data/index.md
index 3edacd93f660c5..ed922341f8151b 100644
--- a/files/zh-cn/learn_web_development/extensions/forms/sending_and_retrieving_form_data/index.md
+++ b/files/zh-cn/learn_web_development/extensions/forms/sending_and_retrieving_form_data/index.md
@@ -241,11 +241,11 @@ if __name__ == "__main__":
   这是通过前面所见的`hello()`函数完成的，该函数在`/hello`URL 被导向时运行。
 
 > [!NOTE]
-> 同样，如果你只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python 的工作方式与 PHP 略有不同——要在本地运行此代码，你需要[安装 Python/pip](/zh-CN/docs/Learn/Server-side/Django/development_environment#installing_python_3)，然后使用`pip3 install flask`安装 Flask。此时，你应该能够使用`python3 python-example.py`来运行这个示例，然后在浏览器中导航到`localhost:5000`。
+> 同样，如果你只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python 的工作方式与 PHP 略有不同——要在本地运行此代码，你需要[安装 Python/pip](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment#安装_python_3)，然后使用`pip3 install flask`安装 Flask。此时，你应该能够使用`python3 python-example.py`来运行这个示例，然后在浏览器中导航到`localhost:5000`。
 
 #### 其他语言和框架
 
-还有许多其他的服务器端技术可以用于表单处理，包括[Perl](/zh-CN/docs/Web)、[Java](/zh-CN/docs/Web)、 [.Net](https://www.microsoft.com/net)、[Ruby](/zh-CN/docs/Web)等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：
+还有许多其他的服务器端技术可以用于表单处理，包括 [Perl](/zh-CN/docs/Web)、[Java](/zh-CN/docs/Web)、[.Net](https://www.microsoft.com/net)、[Ruby](/zh-CN/docs/Web) 等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：
 
 - [Django](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django) for Python（比[Flask](http://flask.pocoo.org/)要重量级一些，但是有更多的工具和选项。）
 - [Express](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs) for Node.js
@@ -270,7 +270,7 @@ if __name__ == "__main__":
 
 - 将[`method`](/zh-CN/docs/Web/HTML/Element/form#method)属性设置为`POST`，因为文件内容不能放入 URL 参数中。
 - 将[`enctype`](/zh-CN/docs/Web/HTML/Element/form#enctype)的值设置为`multipart/form-data`，因为数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据（如果文本也输入到表单中）占用一个部分。
-- 包含一个或多个[File picker](/zh-CN/docs/Learn/Forms/Basic_native_form_controls#file_picker)小部件，允许用户选择将要上传的文件。
+- 包含一个或多个[文件选择器](/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#文件选择器)微件，允许用户选择将要上传的文件。
 
 例如：
 
diff --git a/files/zh-cn/learn_web_development/extensions/forms/ui_pseudo-classes/index.md b/files/zh-cn/learn_web_development/extensions/forms/ui_pseudo-classes/index.md
index 36e6730015a65c..6ceb172d2a273b 100644
--- a/files/zh-cn/learn_web_development/extensions/forms/ui_pseudo-classes/index.md
+++ b/files/zh-cn/learn_web_development/extensions/forms/ui_pseudo-classes/index.md
@@ -317,7 +317,7 @@ input:out-of-range + span::after {
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/out-of-range.html", '100%', 430)}}
 
-数字输入有可能同时是必需的和超出范围的，那么会发生什么呢？因为 `:out-of-range` 规则在源代码中出现的时间比 `:required` 规则晚，[层叠规则](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#理解层叠)开始发挥作用，并且显示“超出范围”信息。
+数字输入有可能同时是必需的和超出范围的，那么会发生什么呢？因为 `:out-of-range` 规则在源代码中出现的时间比 `:required` 规则晚，[层叠规则](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#理解层叠)开始发挥作用，并且显示“超出范围”信息。
 
 这一点做得很好——当页面第一次加载时，会显示“required”，还有一个红叉和边界。当你输入了一个有效的年龄（即在 12-120 的范围内），输入就会变成有效。然而，如果你将年龄输入改为超出范围，则会弹出“Outside allowable value range”的信息，取代了原先的“required”。
 
@@ -488,7 +488,7 @@ Firefox 在版本 78 之前只支持带前缀的伪类，从这个版本以后
 
 当单选钮或复选框被选中时，它们将被 {{cssxref(":checked")}} 伪类所匹配。
 
-最常见的用途是在复选框或单选按钮被选中时添加不同的样式，在这种情况下，已经使用 `appearance: none;` 删除了系统默认的样式，想自己重新建立样式。我们在上一篇文章中看到了这样的示例，当时我们谈到了[在单选钮/复选框上使用 `appearance: none`](/zh-CN/docs/Learn/Forms/Advanced_form_styling#using_appearance_none_on_radioscheckboxes)。
+最常见的用途是在复选框或单选按钮被选中时添加不同的样式，在这种情况下，已经使用 `appearance: none;` 删除了系统默认的样式，想自己重新建立样式。我们在上一篇文章中看到了这样的示例，当时我们谈到了[在单选钮/复选框上使用 `appearance: none`](/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#在单选框复选框上使用_appearance_none)。
 
 回顾一下，我们的[有样式的单选钮](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html)示例中的 `:checked` 代码看起来像这样：
 
diff --git a/files/zh-cn/learn_web_development/extensions/performance/css/index.md b/files/zh-cn/learn_web_development/extensions/performance/css/index.md
index 5693dd2c06aa45..95ae024a300a91 100644
--- a/files/zh-cn/learn_web_development/extensions/performance/css/index.md
+++ b/files/zh-cn/learn_web_development/extensions/performance/css/index.md
@@ -35,7 +35,7 @@ original_slug: Learn/Performance/CSS
 
 在开始优化 CSS 之前，你应该回答一个问题：“我需要优化什么？”下面讨论的一些技巧和技术是适用于几乎任何 Web 项目的良好实践，然而另一些只在特定情况下需要。试图在所有地方应用这些技术可能是不必要的，而且可能会浪费你的时间。你应该确定每个项目实际上需要哪些性能优化。
 
-为了做到这一点，你需要[测量网站性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance)。正如上面的链接所示，有几种不同的测量性能的方法，其中一些涉及复杂的[性能 API](/zh-CN/docs/Web/API/Performance_API)。然而，入门的最佳方法是学习如何使用内置的浏览器[网络](/zh-CN/docs/Learn/Performance/Measuring_performance#网络工具)和[性能](/zh-CN/docs/Learn/Performance/Measuring_performance#通用性能报告工具)工具，以查看页面加载中哪些部分花费了很长时间，并且需要进行优化。
+为了做到这一点，你需要[测量网站性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance)。正如上面的链接所示，有几种不同的测量性能的方法，其中一些涉及复杂的[性能 API](/zh-CN/docs/Web/API/Performance_API)。然而，入门的最佳方法是学习如何使用内置的浏览器[网络](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance#网络工具)和[性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance#通用性能报告工具)工具，以查看页面加载中哪些部分花费了很长时间，并且需要进行优化。
 
 ## 优化渲染
 
@@ -81,7 +81,7 @@ original_slug: Learn/Performance/CSS
   }
   ```
 
-  将选择器简化和降低优先级对于维护也是有好处的。简单选择器的作用很容易理解，如果选择器不具有那么高的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级_2)，以后需要时就很容易覆盖样式。
+  将选择器简化和降低优先级对于维护也是有好处的。简单选择器的作用很容易理解，如果选择器不具有那么高的[优先级](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#优先级_2)，以后需要时就很容易覆盖样式。
 
 - **不要将样式应用于不需要的元素**：常见的错误是使用[通用选择器](/zh-CN/docs/Web/CSS/Universal_selectors)将样式应用于所有元素，或者至少应用于比实际需要的元素更多的元素。这种类型的样式会对性能产生负面影响，特别是在较大的站点上。
 
@@ -192,7 +192,7 @@ CSS 可以使用媒体查询将样式限定在特定条件下。媒体查询对
 
 本节包含一些有用的技巧，可以用于改善 Web 字体的性能。
 
-总体而言，请仔细考虑在你的网站上使用的字体。某些字体文件可能非常大（几兆字节）。虽然使用大量字体以获得视觉上的吸引力可能很诱人，但这可能会显著降低页面加载速度，并使你的网站看起来凌乱不堪。你可能只需要使用两到三种字体，如果选择使用 [Web 安全字体](/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#网页安全字体)，则可以使用更少的字体。
+总体而言，请仔细考虑在你的网站上使用的字体。某些字体文件可能非常大（几兆字节）。虽然使用大量字体以获得视觉上的吸引力可能很诱人，但这可能会显著降低页面加载速度，并使你的网站看起来凌乱不堪。你可能只需要使用两到三种字体，如果选择使用 [Web 安全字体](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals#网页安全字体)，则可以使用更少的字体。
 
 ### 字体加载
 
diff --git a/files/zh-cn/learn_web_development/extensions/performance/html/index.md b/files/zh-cn/learn_web_development/extensions/performance/html/index.md
index 89b537cd8de662..20d64910049b00 100644
--- a/files/zh-cn/learn_web_development/extensions/performance/html/index.md
+++ b/files/zh-cn/learn_web_development/extensions/performance/html/index.md
@@ -36,7 +36,7 @@ HTML 默认情况下快速且易于访问。作为开发者，我们的工作是
 
 在开始优化 HTML 之前，你应该首先回答的问题是“我需要优化什么？”。下面讨论的一些技巧和技术是适用于几乎任何 Web 项目的良好实践，而其他一些技巧只在特定情况下才需要使用。试图在任何地方应用这些技术可能是不必要的，而且可能是浪费时间的。你应该确定在每个项目中实际需要哪些性能优化。
 
-为此，你需要[测量性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance)。正如此链接所示，有几种不同的方式可以测量性能，其中一些涉及复杂的[性能 API](/zh-CN/docs/Web/API/Performance_API)。然而，最好的入门方法是学习如何使用内置浏览器的[网络](/zh-CN/docs/Learn/Performance/Measuring_performance#网络监控工具)和[性能](/zh-CN/docs/Learn/Performance/Measuring_performance#性能监控工具)工具，以检查加载时间较长且需要优化的页面部分。
+为此，你需要[测量性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance)。正如此链接所示，有几种不同的方式可以测量性能，其中一些涉及复杂的[性能 API](/zh-CN/docs/Web/API/Performance_API)。然而，最好的入门方法是学习如何使用内置浏览器的[网络](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance#网络监控工具)和[性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance#性能监控工具)工具，以检查加载时间较长且需要优化的页面部分。
 
 ## HTML 性能关键问题
 
diff --git a/files/zh-cn/learn_web_development/extensions/performance/javascript/index.md b/files/zh-cn/learn_web_development/extensions/performance/javascript/index.md
index 89d04a8dea1796..fac9f8137d53b9 100644
--- a/files/zh-cn/learn_web_development/extensions/performance/javascript/index.md
+++ b/files/zh-cn/learn_web_development/extensions/performance/javascript/index.md
@@ -36,7 +36,7 @@ original_slug: Learn/Performance/JavaScript
 
 在开始优化代码之前，你应该先回答一个问题：“我需要优化什么？”下面讨论的一些技巧和方法是适用于任何 Web 项目的良好实践，而其他一些只在特定情况下才需要。试图在所有地方应用这些技术可能是不必要的，也可能是浪费时间。你应该确定每个项目实际上需要哪些性能优化。
 
-为此，你需要[测量性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance)。正如前面的链接所示，有多种不同的方法来测量性能，其中一些方法涉及复杂的[性能 API](/zh-CN/docs/Web/API/Performance_API)。然而，最好的入门方式是学习如何使用内置的浏览器[网络](/zh-CN/docs/Learn/Performance/Measuring_performance#网络工具)和[性能](/zh-CN/docs/Learn/Performance/Measuring_performance#通用性能报告工具)工具，查看页面加载的哪些部分花费了很长时间，并需要进行优化。
+为此，你需要[测量性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance)。正如前面的链接所示，有多种不同的方法来测量性能，其中一些方法涉及复杂的[性能 API](/zh-CN/docs/Web/API/Performance_API)。然而，最好的入门方式是学习如何使用内置的浏览器[网络](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance#网络工具)和[性能](/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance#通用性能报告工具)工具，查看页面加载的哪些部分花费了很长时间，并需要进行优化。
 
 ## 优化 JavaScript 的下载
 
@@ -46,7 +46,7 @@ original_slug: Learn/Performance/JavaScript
 - **考虑更简单的解决方案**：你可能有一个华丽、有趣的解决方案要实现，但请考虑用户是否会喜欢它。他们是否更喜欢简单的东西？
 - **删除未使用的代码**：这听起来很明显，但令人惊讶的是很多开发者忘记清除在开发过程中添加的不会被用到的功能。你需要谨慎并有意识地添加和删除代码。所有脚本都会被解析，无论它是否被使用；因此，加快下载速度的一个快速方法是摆脱任何不会被使用的功能。此外，要考虑通常只会使用框架中的一小部分功能。是否有可能创建一个仅包含你所需部分的框架的自定义构建版本？
 - **考虑使用浏览器内置特性**：也许你可以使用浏览器已经具备的特性，而不是通过 JavaScript 自己创建。例如：
-  - 使用[内置的客户端表单验证](/zh-CN/docs/Learn/Forms/Form_validation#使用内置表单数据校验)。
+  - 使用[内置的客户端表单验证](/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation#使用内置表单数据校验)。
   - 使用浏览器自带的 {{htmlelement("video")}} 播放器。
   - 使用 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)而不是 JavaScript 动画库（参见[处理动画](#处理_javascript_动画)）。
 
@@ -238,7 +238,7 @@ async function main() {
 
 最显然的动画建议是使用更少的动画——去除任何非必要的动画，或考虑为用户提供一个偏好设置，让他们可以关闭动画，例如当他们使用低功率设备或电池电量有限的移动设备时。
 
-对于关键的 DOM 动画，建议尽可能使用 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)，而不是 JavaScript 动画（[Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API) 提供了一种通过 JavaScript 直接连接到 CSS 动画的方式）。直接使用浏览器执行 DOM 动画而不是使用 JavaScript 操纵内联样式表的效率更高。另请参阅 [CSS 性能优化 > 处理动画](/zh-CN/docs/Learn/Performance/CSS#处理动画)。
+对于关键的 DOM 动画，建议尽可能使用 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)，而不是 JavaScript 动画（[Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API) 提供了一种通过 JavaScript 直接连接到 CSS 动画的方式）。直接使用浏览器执行 DOM 动画而不是使用 JavaScript 操纵内联样式表的效率更高。另请参阅 [CSS 性能优化 > 处理动画](/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS#处理动画)。
 
 对于无法在 JavaScript 中处理的动画，例如在 HTML {{htmlelement("canvas")}} 上创建动画，建议使用 {{domxref("Window.requestAnimationFrame()")}} 而不是旧的选项，例如 {{domxref("Window.setInterval()")}}。`requestAnimationFrame()` 方法专门设计用于高效、一致地处理动画帧，以获得流畅的用户体验。基本模式如下所示：
 
@@ -264,7 +264,7 @@ function loop() {
 loop();
 ```
 
-你可以在[绘制图形 > 动画](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#动画)中找到有关 canvas 动画的简介，以及在[对象构建实践](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice) 中找到更详细的示例。你还可以在 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中找到一整套 canvas 教程。
+你可以在[绘制图形 > 动画](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#动画)中找到有关 canvas 动画的简介，以及在[对象构建实践](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice) 中找到更详细的示例。你还可以在 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中找到一整套 canvas 教程。
 
 ## 优化事件性能
 
@@ -288,7 +288,7 @@ elem.removeEventListener("mousemove", handleMouseMove);
 
 另一个要点是尽可能使用事件委托。当你有一些代码需要在用户与大量子元素中的任何一个进行交互时，可以在它们的父元素上设置事件监听器。在任何子元素上触发的事件都会冒泡到它们的父元素，这样你无需单独为每个子元素设置事件监听器。减少要跟踪的事件监听器数量可以提高性能。
 
-请参阅[事件委托](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#事件委托)以了解更多详细信息和一个有用的示例。
+请参阅[事件委托](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#事件委托)以了解更多详细信息和一个有用的示例。
 
 ## 编写更高效代码的技巧
 
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/django/django_assessment_blog/index.md b/files/zh-cn/learn_web_development/extensions/server-side/django/django_assessment_blog/index.md
index ff1b4a6f8e0a89..9b9336cb3211e9 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/django/django_assessment_blog/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/django/django_assessment_blog/index.md
@@ -265,7 +265,7 @@ original_slug: Learn/Server-side/Django/django_assessment_blog
 
    - 在表单验证后，你需要提供成功的 URL，以进行重新定向；这应该是原来的博客。为此，你需要覆盖 `get_success_url()`，并为原来的博客“反转”URL。你可以使用`self.kwargs`属性，获取所需的博客 ID，如上面的 `form_valid()` 方法所示。
 
-我们简要地讨论了在[Django 教程 6：通用列表和详细信息视图](/zh-CN/docs/Learn/Server-side/Django/Generic_views#overriding_methods_in_class-based_views)主题中，在基于类的视图中，将上下文传递给模板。要执行此操作，你需要覆盖`get_context_data()`（首先，获取现有上下文，使用要传递给模板的任何其他变量，更新它，然后返回更新的上下文）。例如，下面的代码片段，显示了如何根据`BlogAuthor` id，将 blogger 对象添加到上下文中。
+我们简要地讨论了在[Django 教程 6：通用列表和详细信息视图](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views#覆盖基于类别的视图中的方法)主题中，在基于类的视图中，将上下文传递给模板。要执行此操作，你需要覆盖`get_context_data()`（首先，获取现有上下文，使用要传递给模板的任何其他变量，更新它，然后返回更新的上下文）。例如，下面的代码片段，显示了如何根据`BlogAuthor` id，将 blogger 对象添加到上下文中。
 
 ```python
 class SomeView(generic.ListView):
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/django/forms/index.md b/files/zh-cn/learn_web_development/extensions/server-side/django/forms/index.md
index b3567bf21875a4..b185289fdc14de 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/django/forms/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/django/forms/index.md
@@ -303,7 +303,7 @@ def renew_book_librarian(request, pk):
 > [!WARNING]
 > 虽然你也可以通过请求直接访问表单数据（例如`request.POST['renewal_date']` 或 `request.GET['renewal_date']`（如果使用 GET 请求），但不建议这样做。清理后的数据是无害的、验证过的、并转换为 Python 友好类型。
 
-视图的表单处理部分的最后一步，是重定向到另一个页面，通常是“成功”页面。在这种情况下，我们使用 `HttpResponseRedirect` 和 `reverse()` ，重定向到名为'`all-borrowed`'的视图（这是在 [Django 教程第 8 部分中创建的“挑战”：用户身份验证和权限](/zh-CN/docs/Learn/Server-side/Django/Authentication#challenge_yourself)）。如果你没有创建该页面，请考虑重定向到 URL'/'处的主页。
+视图的表单处理部分的最后一步，是重定向到另一个页面，通常是“成功”页面。在这种情况下，我们使用 `HttpResponseRedirect` 和 `reverse()` ，重定向到名为'`all-borrowed`'的视图（这是在 [Django 教程第 8 部分中创建的“挑战”：用户身份验证和权限](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication#挑战自己)）。如果你没有创建该页面，请考虑重定向到 URL'/'处的主页。
 
 这就是表单处理本身所需的一切，但我们仍然需要将视图，限制为图书馆员可以访问。我们应该在 `BookInstance` （“`can_renew`”）中创建一个新的权限，但为了简单起见，我们只需使用`@permission_required`函数装饰器，和我们现有的 `can_mark_returned` 权限。
 
@@ -440,7 +440,7 @@ def renew_book_librarian(request, pk):
 
 ### 测试页面
 
-如果你接受了[Django 教程第 8 部分中的“挑战”：用户身份验证和权限](/zh-CN/docs/Learn/Server-side/Django/Authentication#challenge_yourself)，你将获得图书馆中借出的所有书本的列表，这只有图书馆工作人员才能看到。我们可以使用下面的模板代码，为每个项目旁边的续借页面，添加链接。
+如果你接受了[Django 教程第 8 部分中的“挑战”：用户身份验证和权限](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication#challenge_yourself)，你将获得图书馆中借出的所有书本的列表，这只有图书馆工作人员才能看到。我们可以使用下面的模板代码，为每个项目旁边的续借页面，添加链接。
 
 ```django
 {% if perms.catalog.can_mark_returned %}-
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/django/home_page/index.md b/files/zh-cn/learn_web_development/extensions/server-side/django/home_page/index.md
index ea828617b60076..2e605e8bcdb15b 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/django/home_page/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/django/home_page/index.md
@@ -148,7 +148,7 @@ def index(request):
     )
 ```
 
-视图函数的第一部分使用`objects.all()`模型类的属性来获取记录计数。它还会获取一个`BookInstance`状态字段值为“a”（可用）的对象列表。你可以在前面的教程 ([Django Tutorial Part 3: Using models > Searching for records](/zh-CN/docs/Learn/Server-side/Django/Models#searching_for_records)) 中找到更多关于如何访问模型的信息。
+视图函数的第一部分使用`objects.all()`模型类的属性来获取记录计数。它还会获取一个`BookInstance`状态字段值为“a”（可用）的对象列表。你可以在前面的教程（[Django 教程 3：使用模型 > 搜寻纪录](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models#搜寻纪录)）中找到更多关于如何访问模型的信息。
 
 在函数结束时，我们将该函数称为`render()`创建和返回 HTML 页面作为响应（此快捷方式函数包含许多其他函数，简化了这种非常常见的用例）。它将原始`request`对象（an HttpRequest）作为参数，具有数据占位符的 HTML 模板以及`context`变量（包含要插入到这些占位符中的数据的 Python 字典）。
 
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md
index 5caa1b6005ca1b..8343fe0753c815 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md
@@ -382,7 +382,7 @@ var mongoDB =
 npm install
 ```
 
-现在运行该站点（请参阅[测试路由](/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes#testing_the_routes)的相关命令），并检查该站点，是否仍按预期运行。
+现在运行该站点（请参阅[测试路由](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#测试路由)的相关命令），并检查该站点，是否仍按预期运行。
 
 #### 将更改保存到 Github
 
@@ -452,7 +452,7 @@ Setting NODE_ENV and restarting limitless-tor-18923... done, v13
 NODE_ENV: production
 ```
 
-我们还应该使用单独的数据库进行生产，在**MONGODB_URI**环境变量中，设置其 URI。你可以完全按照[我们原来的方式](/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose#setting_up_the_mongodb_database)，设置新数据库和数据库用户，并获取其 URI。你可以如下图所示设置 URI（显然，要使用你自己的 URI！）
+我们还应该使用单独的数据库进行生产，在**MONGODB_URI**环境变量中，设置其 URI。你可以完全按照[我们原来的方式](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#setting_up_the_mongodb_database)，设置新数据库和数据库用户，并获取其 URI。你可以如下图所示设置 URI（显然，要使用你自己的 URI！）
 
 ```bash
 >heroku config:set MONGODB_URI='mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production'
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/author_list_page/index.md
index 4c96830b153b8d..b62a04cb75c35c 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/author_list_page/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/author_list_page/index.md
@@ -61,7 +61,7 @@ block content
 ![Author List Page - Express Local Library site](locallibary_express_author_list.png)
 
 > [!NOTE]
-> 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。
+> 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。
 >
 > 但是，这次缺少日期，除非严格模式生效，否则将忽略对不存在的属性的引用。`moment()`返回当前时间，并且你不希望将缺少的日期格式化为就像今天一样。
 >
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/book_list_page/index.md
index 1485021142564f..2b1432b077c542 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/book_list_page/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/book_list_page/index.md
@@ -59,7 +59,7 @@ block content
 
 ## 它看起來像是？
 
-运行本应用（参见[测试路由](/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes#测试路由)以了解相关命令，并打开你的浏览器，访问 `http://localhost:3000/`。然后选择 _All books_ 链接。如果每样东西都设定正确了，你的网站看起来应该像底下的截图。
+运行本应用（参见[测试路由](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#测试路由)以了解相关命令，并打开你的浏览器，访问 `http://localhost:3000/`。然后选择 _All books_ 链接。如果每样东西都设定正确了，你的网站看起来应该像底下的截图。
 
 ![书本列表页面 - Express 教程：本地图书馆网站](new_book_list.png)
 
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/genre_detail_page/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
index 1fe748bbe1a21d..d4febab3fc4390 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
@@ -67,7 +67,7 @@ exports.genre_detail = function (req, res, next) {
 > }
 > ```
 >
-> 然后，此消息将传播给我们的错误处理代码（这是在我们[生成应用程序框架](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling)时设置的 - 有关更多信息，请参阅[处理错误](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#handling_errors)）。
+> 然后，此消息将传播给我们的错误处理代码（这是在我们[生成应用程序框架](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#error_handling)时设置的——有关更多信息，请参阅[错误处理](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction#错误处理)）。
 
 渲染的视图是 **genre_detail**，它传递了该类型的标题`title`，种类`genre`和书本列表的变量（`genre_books`）。
 
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md
index be0ada61ada0e6..45bf1d7d7bd835 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md
@@ -9,7 +9,7 @@ original_slug: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
 我们已经为主页创建了一个路由。为了完成页面，我们需要更新控制器函数，以从数据库中提取记录的“计数”，并创建一个可用于呈现页面的视图（模板）。
 
 > [!NOTE]
-> 我们将会使用 Mongoose 来获取数据库的信息。在继续学习之前，你可能希望重新阅读 [Mongoose 入门](/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose#mongoose_入门)中有关[搜索记录](/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose#搜索记录)的部分。
+> 我们将会使用 Mongoose 来获取数据库的信息。在继续学习之前，你可能希望重新阅读 [Mongoose 入门](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#mongoose_入门)中有关[搜索记录](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#搜索记录)的部分。
 
 ## 路由
 
@@ -45,7 +45,7 @@ exports.index = asyncHandler(async (req, res, next) => {
 });
 ```
 
-用以下代码片段替换上面的所有代码。这要做的第一件事，是导入（`require()`）所有模型。我们需要这样做，因为我们将使用它们来获取记录的计数。这部分代码也同样需要“express-async-handler”，它可以[捕获路由处理器函数抛出的异常](/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes#处理路由函数中的异常)。
+用以下代码片段替换上面的所有代码。这要做的第一件事，是导入（`require()`）所有模型。我们需要这样做，因为我们将使用它们来获取记录的计数。这部分代码也同样需要“express-async-handler”，它可以[捕获路由处理器函数抛出的异常](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#处理路由函数中的异常)。
 
 ```js
 const Book = require("../models/book");
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
index 5dbfd0de660dc4..e269777871f193 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
@@ -52,7 +52,7 @@ html(lang='en')
 
 此模板使用（并包含）来自 [Bootstrap](http://getbootstrap.com/) 的 JavaScript 和 CSS，以改进 HTML 页面的布局和呈现方式。使用 Bootstrap 或其他客户端网页框架，是一种快速的方式，可以创建吸引人的网页，能够良好地适应不同的浏览器尺寸，并且允许我们处理页面的呈现，而不需要纠缠于任何不同尺寸的细节—此处我们只想专注于伺服端代码！
 
-布局的安排应该相当明白，假如你已经阅读了之前的 [模板入门](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#template_primer)。注意，使用 `block content` 当做定位符号，放到页面内容将要放置的地方。
+布局的安排应该相当明白，假如你已经阅读了之前的[模板入门](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data#template_primer)。注意，使用 `block content` 当做定位符号，放到页面内容将要放置的地方。
 
 基础模板也参考了一个本地 css 档 (**style.css**) ，此档提供了一些额外的样式。打开 **/public/stylesheets/style.css** ，并用底下的 CSS 代码，取代它的内容：
 
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form/index.md
index 7530b2ff819159..b8e8afd5d85b45 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form/index.md
@@ -6,7 +6,7 @@ original_slug: Learn/Server-side/Express_Nodejs/forms/Delete_author_form
 
 此子文档显示，如何定义页面以删除 `Author` 对象。
 
-正如[表单设计](/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms#表单设计)部分所讨论的那样，我们的策略是，只允许删除“未被其他对象引用”的对象（在这种情况下，这意味着如果作者 `Author` 被一本书 `Book` 引用，我们将不允许删除作者）。在实现方面，这意味着，表单需要在删除作者之前，先确认没有关联的书籍。如果存在关联的书籍，则应显示它们，并说明在删除 `Author` 对象之前，必须删除它们。
+正如[表单设计](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms#表单设计)部分所讨论的那样，我们的策略是，只允许删除“未被其他对象引用”的对象（在这种情况下，这意味着如果作者 `Author` 被一本书 `Book` 引用，我们将不允许删除作者）。在实现方面，这意味着，表单需要在删除作者之前，先确认没有关联的书籍。如果存在关联的书籍，则应显示它们，并说明在删除 `Author` 对象之前，必须删除它们。
 
 ## 控制器—get 路由
 
diff --git a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/routes/index.md b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/routes/index.md
index a4c2b9f0500557..5b4d75feae50ac 100644
--- a/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/routes/index.md
+++ b/files/zh-cn/learn_web_development/extensions/server-side/express_nodejs/routes/index.md
@@ -56,7 +56,7 @@ l10n:
 创建路由有多种方法。在本教程中，我们将使用 [`express.Router`](https://expressjs.com/en/guide/routing.html#express-router) 中间件，因为它允许我们将网站特定部分的路由处理器分组在一起并使用共同的路由前缀访问它们。我们将把所有与图书馆相关的路由保存在“catalog”（目录）模块中，如果我们添加了用于处理用户账户或其他功能的路由，可以将它们单独分组。
 
 > [!NOTE]
-> 我们在 [Express 简介 > 创建路由处理程序](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#创建路由处理器（route_handler）)中简要讨论了 Express 应用的路由机制。使用 _Router_ 可以保证更好的模块化（下文所述），且用法与直接在 *Express 应用对象*上定义路由非常类似。
+> 我们在 [Express 简介 > 创建路由处理器](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction#创建路由处理器（route_handler）)中简要讨论了 Express 应用的路由机制。使用 _Router_ 可以保证更好的模块化（下文所述），且用法与直接在 *Express 应用对象*上定义路由非常类似。
 
 本小节的剩余部分内容将介绍使用 `Router` 定义路由的方法。
 
@@ -111,7 +111,7 @@ router.get("/about", (req, res) => {
 该回调有三个参数（通常命名为：`req`、`res`、`next`），分别是：HTTP 请求对象、HTTP 响应、中间件链中的下一个函数。
 
 > [!NOTE]
-> 路由函数就是 [Express 中间件](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#使用中间件（middleware）)，这意味着它们要么（通过响应）结束请求，要么调用链中的 `next` 函数。在上述示例中，我们使用 `send()` 完成了请求，因而没有用上 `next` 参数（参数表中将其省略）。
+> 路由函数就是 [Express 中间件](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction#使用中间件（middleware）)，这意味着它们要么（通过响应）结束请求，要么调用链中的 `next` 函数。在上述示例中，我们使用 `send()` 完成了请求，因而没有用上 `next` 参数（参数表中将其省略）。
 >
 > 上述路由函数只需要一个回调。我们可以根据需要指定任意数量的回调参数或一个回调函数数组。每个函数都将加入中间件链，并且将按添加顺序调用（若有回调完成请求则中止当前周期）。
 
diff --git a/files/zh-cn/learn_web_development/extensions/testing/feature_detection/index.md b/files/zh-cn/learn_web_development/extensions/testing/feature_detection/index.md
index 656a896d066427..f0162185d066f1 100644
--- a/files/zh-cn/learn_web_development/extensions/testing/feature_detection/index.md
+++ b/files/zh-cn/learn_web_development/extensions/testing/feature_detection/index.md
@@ -38,7 +38,7 @@ l10n:
 
 特性检测的理念在于，通过执行一个测试来确认当前浏览器是否支持某项特性。然后，根据测试结果有条件地执行代码，确保在*支持*该特性的浏览器和*不支持*的浏览器中都能提供一个可接受的用户体验。如果不采取这种做法，那么在那些不支持你代码中所用特性的浏览器上，你的网站将无法正确显示，从而导致糟糕的用户体验。
 
-让我们回顾一下我们在[处理常见 JavaScript 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#特性检测)一文中提及的例子——[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API)（它能够访问运行网页浏览器的设备的位置数据），其主要使用入口点是全局 [Navigator](/zh-CN/docs/Web/API/Navigator) 对象上的 `geolocation` 属性。因此，你可以使用类似以下的方法来检测浏览器是否支持地理位置特性：
+让我们回顾一下我们在[处理常见 JavaScript 问题](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#特性检测)一文中提及的例子——[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API)（它能够访问运行网页浏览器的设备的位置数据），其主要使用入口点是全局 [Navigator](/zh-CN/docs/Web/API/Navigator) 对象上的 `geolocation` 属性。因此，你可以使用类似以下的方法来检测浏览器是否支持地理位置特性：
 
 ```js
 if ("geolocation" in navigator) {
@@ -50,7 +50,7 @@ if ("geolocation" in navigator) {
 }
 ```
 
-在我们继续之前，先说一件事——不要把特性检测和**浏览器嗅探**（检测什么浏览器在访问网站）混淆起来——后者是一种糟糕的做法，应该不惜一切代价加以阻止。参见[不要嗅探浏览器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#不要嗅探浏览器)以了解更多细节。
+在我们继续之前，先说一件事——不要把特性检测和**浏览器嗅探**（检测什么浏览器在访问网站）混淆起来——后者是一种糟糕的做法，应该不惜一切代价加以阻止。参见[不要嗅探浏览器](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#不要嗅探浏览器)以了解更多细节。
 
 ## 撰写自己的特性检测代码
 
diff --git a/files/zh-cn/learn_web_development/extensions/testing/html_and_css/index.md b/files/zh-cn/learn_web_development/extensions/testing/html_and_css/index.md
index c3c36f717f09ad..6bd28f6b66243c 100644
--- a/files/zh-cn/learn_web_development/extensions/testing/html_and_css/index.md
+++ b/files/zh-cn/learn_web_development/extensions/testing/html_and_css/index.md
@@ -46,7 +46,7 @@ HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常
 
 ## 首先：解决一般问题
 
-在本系列的[第一篇文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#testingdiscovery)中，我们提到了一个有效的策略：首先在几种现代桌面和移动浏览器上测试你的代码以确保其正常运行，然后再解决跨浏览器的兼容性问题。
+在本系列的[第一篇文章](/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction#测试查错)中，我们提到了一个有效的策略：首先在几种现代桌面和移动浏览器上测试你的代码以确保其正常运行，然后再解决跨浏览器的兼容性问题。
 
 在我们的[调试 HTML](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML) 和[调试 CSS](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS) 文章中，我们也提供了一些基础的 HTML 和 CSS 调试指南——如果你对这些基础知识还不太熟悉，建议你在继续之前先阅读这些内容。
 
@@ -263,7 +263,7 @@ form > #date
 
 响应式设计是创建可根据不同设备尺寸（例如不同的屏幕宽度、方向（纵向或横向）或分辨率）而变化的网页布局的做法。例如，桌面布局在移动设备上会看起来很糟糕，所以你需要使用[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)提供合适的移动布局，并确保正确应用[视口](/zh-CN/docs/Web/HTML/Viewport_meta_tag)。你可以在[我们关于响应式设计的指南](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)中找到这些实践的详细描述。
 
-分辨率也是个大问题——例如，移动设备不太可能需要大的图像，但更有可能有较慢的互联网连接，甚至可能有昂贵的数据流量计划，这会使浪费带宽成为一个问题。此外，不同的设备可能有各种不同的分辨率，这意味着较小的图像可能会出现像素化。有一些技术可以解决这些问题，从[媒体查询](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design#媒体查询)到更复杂的[响应式图像技术](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#分辨率切换：不同的尺寸)，包括 {{HTMLElement('picture')}} 元素和 {{HTMLElement('img')}} 元素的 [`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 和 [`sizes`](/zh-CN/docs/Web/HTML/Element/img#sizes)属性。
+分辨率也是个大问题——例如，移动设备不太可能需要大的图像，但更有可能有较慢的互联网连接，甚至可能有昂贵的数据流量计划，这会使浪费带宽成为一个问题。此外，不同的设备可能有各种不同的分辨率，这意味着较小的图像可能会出现像素化。有一些技术可以解决这些问题，从[媒体查询](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design#媒体查询)到更复杂的[响应式图像技术](/zh-CN/docs/Web/HTML/Responsive_images#分辨率切换：不同的尺寸)，包括 {{HTMLElement('picture')}} 元素和 {{HTMLElement('img')}} 元素的 [`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 和 [`sizes`](/zh-CN/docs/Web/HTML/Element/img#sizes)属性。
 
 ## 寻找帮助
 
diff --git a/files/zh-cn/learn_web_development/extensions/testing/introduction/index.md b/files/zh-cn/learn_web_development/extensions/testing/introduction/index.md
index 2c97273f1027b4..74a7d4d475218f 100644
--- a/files/zh-cn/learn_web_development/extensions/testing/introduction/index.md
+++ b/files/zh-cn/learn_web_development/extensions/testing/introduction/index.md
@@ -108,7 +108,7 @@ l10n:
 
 此时，你要修复一切发现的问题。
 
-接下来，你应该将测试拓展到所有浏览器，并集中精力排除跨浏览器问题（关于[确定你的目标浏览器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#是否需要测试？)，请查阅下一篇文章获取更多信息）。例如：
+接下来，你应该将测试拓展到所有浏览器，并集中精力排除跨浏览器问题（关于[确定你的目标浏览器](/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies#是否需要测试？)，请查阅下一篇文章获取更多信息）。例如：
 
 - 尽量在所有现代桌面浏览器上测试最新的修改——包括桌面版的 Firefox、Chrome、Opera、Edge 和 Safari（最好 Mac、Windows 和 Linux 版本都试一遍）。
 - 在常用的手机和平板浏览器中测试（例如 iPhone/iPad 上的 iOS Safari、iPhone/iPad/Android 的 Chrome 和 Firefox）。
diff --git a/files/zh-cn/learn_web_development/extensions/testing/testing_strategies/index.md b/files/zh-cn/learn_web_development/extensions/testing/testing_strategies/index.md
index 3bba07720b729b..11957ebef4a0c5 100644
--- a/files/zh-cn/learn_web_development/extensions/testing/testing_strategies/index.md
+++ b/files/zh-cn/learn_web_development/extensions/testing/testing_strategies/index.md
@@ -146,7 +146,7 @@ A 级：
 
 - 它们在执行测试时为你提供了一组步骤。
 - 它们可以很容易地转化为用户组在进行测试时需要遵循的指示（例如，“尝试使用鼠标和键盘激活按钮…”）——请参见下面的[用户测试](#用户测试)部分。
-- 它们还可以为编写自动化测试提供基础。如果你知道要测试什么以及成功条件是什么，编写此类测试就会更容易（请参见本系列中的 [Selenium](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#selenium) 部分）。
+- 它们还可以为编写自动化测试提供基础。如果你知道要测试什么以及成功条件是什么，编写此类测试就会更容易（请参见本系列中的 [Selenium](/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#selenium) 部分）。
 
 ## 建立测试实验环境
 
diff --git a/files/zh-cn/learn_web_development/extensions/testing/your_own_automation_environment/index.md b/files/zh-cn/learn_web_development/extensions/testing/your_own_automation_environment/index.md
index 88bfb7160cb2ab..7484f987987ade 100644
--- a/files/zh-cn/learn_web_development/extensions/testing/your_own_automation_environment/index.md
+++ b/files/zh-cn/learn_web_development/extensions/testing/your_own_automation_environment/index.md
@@ -48,7 +48,7 @@ l10n:
 
 ### 在 Node 下搭建 Selenium 环境
 
-1. 参考上一个章节[配置 Node 和 npm 环境](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#配置_node_和_npm_环境)，创建一个新的 npm 工程，并取一个不同的名字，如 `selenium-test`。
+1. 参考上一个章节[配置 Node 和 npm 环境](/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing#配置_node_和_npm_环境)，创建一个新的 npm 工程，并取一个不同的名字，如 `selenium-test`。
 2. 接下来，我们需要安装一个框架从而能够在 Node 中运行 Selenium。我们选择 Selenium 官方提供的 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)，它的文档更新及时，维护良好。如果你想要其他选择，[webdriver.io](https://webdriver.io/) 和 [nightwatch.js](https://nightwatchjs.org/) 也都是不错的选择。要安装 selenium-webdriver，在你的工程目录下运行以下命令：
 
    ```bash
diff --git a/files/zh-cn/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md b/files/zh-cn/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
index bc7c419523efb2..8909eda0028f66 100644
--- a/files/zh-cn/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
+++ b/files/zh-cn/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
@@ -59,7 +59,7 @@ JavaScript 是最流行的现代 Web 技术之一。随着 JavaScript 技能的
 > [!NOTE]
 > 上面将 {{htmlelement("script")}} 元素放在 HTML 文件的底部附近的原因是**浏览器会按照代码在文件中的顺序进行读取**。
 >
-> 如果 JavaScript 先加载，并期望操纵还未加载的 HTML，可能会出现问题。将 JavaScript 放在 HTML 页面的底部附近是一种解决方案。想要了解更多的替代方案，参见[脚本加载策略](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript#脚本加载策略)。
+> 如果 JavaScript 先加载，并期望操纵还未加载的 HTML，可能会出现问题。将 JavaScript 放在 HTML 页面的底部附近是一种解决方案。想要了解更多的替代方案，参见[脚本加载策略](/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#脚本加载策略)。
 
 ### 发生了什么？
 
diff --git a/files/zh-cn/learn_web_development/getting_started/your_first_website/creating_the_content/index.md b/files/zh-cn/learn_web_development/getting_started/your_first_website/creating_the_content/index.md
index f05748dbfdbbcf..0652fb1673e4da 100644
--- a/files/zh-cn/learn_web_development/getting_started/your_first_website/creating_the_content/index.md
+++ b/files/zh-cn/learn_web_development/getting_started/your_first_website/creating_the_content/index.md
@@ -154,7 +154,7 @@ alt 文本的关键字即“描述文本”。alt 文本应向用户完整地传
 可以尝试在 {{htmlelement("img")}} 元素上面添加一个合适的标题。
 
 > [!NOTE]
-> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗文本，因为标题对于[无障碍](/zh-CN/docs/Learn/Accessibility/HTML#文本内容)和[搜索引擎优化](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#%e4%b8%ba%e4%bb%80%e4%b9%88%e6%88%91%e4%bb%ac%e9%9c%80%e8%a6%81%e7%bb%93%e6%9e%84%e5%8c%96%ef%bc%9f)非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
+> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗文本，因为标题对于[无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#文本内容)和[搜索引擎优化](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#为什么我们需要结构化？)非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
 
 ### 段落（Paragraph）
 
diff --git a/files/zh-cn/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md b/files/zh-cn/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
index a284665006d49b..068f1b9be30f58 100644
--- a/files/zh-cn/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
+++ b/files/zh-cn/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
@@ -23,7 +23,7 @@ l10n:
 
 许多专业的网站通过这种方法接入互联网。
 
-此外，你需要一个{{Glossary("FTP", "文件传输协议")}}程序（更多详情请参见[在互联网上做一件事要花费多少？：软件](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#软件)）将网站文件上传到服务器。不同的 FTP 程序使用方式不一样，但通常情况下，你需要使用托管服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器。然后程序会在两个窗口里分别显示本地文件和服务器文件，这样你就可以来回传输文件：
+此外，你需要一个{{Glossary("FTP", "文件传输协议")}}程序（更多详情请参见[在互联网上做一件事要花费多少？：软件](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#软件)）将网站文件上传到服务器。不同的 FTP 程序使用方式不一样，但通常情况下，你需要使用托管服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器。然后程序会在两个窗口里分别显示本地文件和服务器文件，这样你就可以来回传输文件：
 
 ![显示网站全部的文件和文件夹并上传至服务器的 FTP 客户端](ftp.jpg)
 
diff --git a/files/zh-cn/learn_web_development/getting_started/your_first_website/styling_the_content/index.md b/files/zh-cn/learn_web_development/getting_started/your_first_website/styling_the_content/index.md
index 1ba43ca89d77b6..6e99708f9f5353 100644
--- a/files/zh-cn/learn_web_development/getting_started/your_first_website/styling_the_content/index.md
+++ b/files/zh-cn/learn_web_development/getting_started/your_first_website/styling_the_content/index.md
@@ -149,7 +149,7 @@ h1 {
 
 在探索了一些 CSS 基础后，让我们在 `style.css` 中添加更多的规则和信息，从而让示例更美观。
 
-1. 第一步，找到之前在[你的网站会是什么样子？](/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like)中保存的 [Google Fonts 输出的地址](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#字体)。在 `index.html` 文档头部（{{HTMLElement("head")}} 和 `</head>` 之间的任意位置）添加 {{htmlelement("link")}} 元素。代码如下：
+1. 第一步，找到之前在[你的网站会是什么样子？](/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like)中保存的 [Google Fonts 输出的地址](/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like#字体)。在 `index.html` 文档头部（{{HTMLElement("head")}} 和 `</head>` 之间的任意位置）添加 {{htmlelement("link")}} 元素。代码如下：
 
    ```html
    <link
@@ -160,7 +160,7 @@ h1 {
    这段代码将你的页面链接到一个样式表，该样式表将 Open Sans 字体家族与你的网页一起加载。
 
 2. 接下来，删除 `style.css` 文件中已有的规则。虽然测试是成功的，但是红字看起来并不太舒服。
-3. 添加下列几行代码（如下文所示），用你在[你的网站会是什么样子？](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#字体)中选择的 `font-family` 替换 `font-family`。`font-family` 属性是指为文本设置的字体。这个规则为整个页面定义了全局的基础字体和基础字号。由于 {{HTMLElement("html")}} 是整个页面的父元素，它里面的所有元素都继承相同的 `font-size` 和 `font-family`。
+3. 添加下列几行代码（如下文所示），用你在[你的网站会是什么样子？](/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like#字体)中选择的 `font-family` 替换 `font-family`。`font-family` 属性是指为文本设置的字体。这个规则为整个页面定义了全局的基础字体和基础字号。由于 {{HTMLElement("html")}} 是整个页面的父元素，它里面的所有元素都继承相同的 `font-size` 和 `font-family`。
 
    ```css
    html {
@@ -226,7 +226,7 @@ html {
 }
 ```
 
-这条规则为整个页面设置了背景颜色。将颜色代码修改为[在“我的网站将会是什么样子？”中所选择的颜色](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#主题颜色)。
+这条规则为整个页面设置了背景颜色。将颜色代码修改为[在“我的网站将会是什么样子？”中所选择的颜色](/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like#主题颜色)。
 
 ### 文档体样式
 
diff --git a/files/zh-cn/learn_web_development/howto/solve_css_problems/css_faq/index.md b/files/zh-cn/learn_web_development/howto/solve_css_problems/css_faq/index.md
index 01b62d309a3ad2..b9c0d2e04644d9 100644
--- a/files/zh-cn/learn_web_development/howto/solve_css_problems/css_faq/index.md
+++ b/files/zh-cn/learn_web_development/howto/solve_css_problems/css_faq/index.md
@@ -61,7 +61,7 @@ HTML 元素可以拥有一个 `id` 和（或）`class` 属性。`id` 属性为
 
 - 使用类名可以让样式具有可扩展性——即使目前只有一个元素使用这个规则集来定义样式，未来可能会添加更多。
 - 类名可以让你同时为多个元素赋予样式，减少样式表的大小，避免了为每一个 id 选择器撰写同样的样式信息。越小的样式表带来的性能体验也就越好。
-- 类名选择器比 id 选择器的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)更低，所以可以很方便地覆盖它们。
+- 类名选择器比 id 选择器的[优先级](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#优先级)更低，所以可以很方便地覆盖它们。
 
 > [!NOTE]
 > 参见 [CSS 选择器](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)，以了解详情。
@@ -230,7 +230,7 @@ body * {
 
 ### CSS 中的优先级
 
-当某个元素应用了多个规则时，规则的选择依赖于样式的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。{{htmlelement("div")}} 的文本颜色将是红色的。
+当某个元素应用了多个规则时，规则的选择依赖于样式的[优先级](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#优先级)。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。{{htmlelement("div")}} 的文本颜色将是红色的。
 
 ```css
 div {
@@ -266,7 +266,7 @@ text-stroke: 4px navy;
 ```
 
 > [!NOTE]
-> 为更深层次了解处理前缀属性，请参阅[跨浏览器测试](/zh-CN/docs/Learn_web_development/Extensions/Testing)模块的[处理常见的 HTML 和 CSS 问题——处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)。
+> 为更深层次了解处理前缀属性，请参阅[跨浏览器测试](/zh-CN/docs/Learn_web_development/Extensions/Testing)模块的[处理常见的 HTML 和 CSS 问题——处理 CSS 前缀](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#处理_css_前缀)。
 
 > [!NOTE]
 > 请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)和 [WebKit CSS 扩展](/zh-CN/docs/Web/CSS/WebKit_Extensions)，以了解浏览器前缀 CSS 属性的列表。
@@ -278,4 +278,4 @@ z-index 属性指定了元素的栈序。
 具有较高 z-index/栈序的元素总是渲染于具有较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。
 
 > [!NOTE]
-> 请参阅[定位](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning)文章，特别是[介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。
+> 请参阅[定位](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning)文章，特别是[介绍 z-index](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。
diff --git a/files/zh-cn/learn_web_development/howto/solve_css_problems/index.md b/files/zh-cn/learn_web_development/howto/solve_css_problems/index.md
index 79ae79fddb8beb..1d4f29761e3a37 100644
--- a/files/zh-cn/learn_web_development/howto/solve_css_problems/index.md
+++ b/files/zh-cn/learn_web_development/howto/solve_css_problems/index.md
@@ -11,23 +11,23 @@ original_slug: Learn/CSS/Howto
 
 ### 基础
 
-- [如何应用 CSS 到 DOM 中？](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works#应用css到dom)
-- [CSS 如何留白？](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#空白)
-- [CSS 如何添加注释？](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#注释)
-- [CSS 如何通过元素名、类名以及 ID 筛选元素？](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#类型、类和id选择器)
-- [CSS 如何通过属性名和属性内容筛选元素？](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#标签属性选择器)
-- [如何使用伪类？](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类与伪元素)
-- [如何使用伪元素？](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类与伪元素)
-- [如何将多个选择器应用于同一个规则？](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#选择器列表)
-- [如何在 CSS 中指定颜色？](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#颜色)
-- [如何在浏览器中调试 CSS？](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS#审查_css)
+- [如何应用 CSS 到 DOM 中？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#应用css到dom)
+- [CSS 如何留白？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started#空白)
+- [CSS 如何添加注释？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started#注释)
+- [CSS 如何通过元素名、类名以及 ID 筛选元素？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#类型、类和id选择器)
+- [CSS 如何通过属性名和属性内容筛选元素？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#标签属性选择器)
+- [如何使用伪类？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#伪类与伪元素)
+- [如何使用伪元素？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#伪类与伪元素)
+- [如何将多个选择器应用于同一个规则？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#选择器列表)
+- [如何在 CSS 中指定颜色？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#颜色)
+- [如何在浏览器中调试 CSS？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#审查_css)
 
 ### 样式和内容
 
 - [如何给文字添加样式？](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals)
 - [如何定制元素列表？](/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists)
 - [如何给链接添加样式？](/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links)
-- [如何给文本添加阴影？](/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#文字阴影)
+- [如何给文本添加阴影？](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals#文字阴影)
 
 ### 盒子和布局
 
@@ -37,11 +37,11 @@ original_slug: Learn/CSS/Howto
 - [如何理解 inline、block 以及 inline-block？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model)
 - [How to create fancy boxes](/zh-CN/docs/Learn/CSS/Howto/create_fancy_boxes) (请一并查看 [Styling boxes](/zh-CN/docs/Learn_web_development/Core/Styling_basics) 模块)
 - [如何使用 background-clip 控制背景图覆盖？](/zh-CN/docs/Web/CSS/background-clip)
-- [如何使用 box-sizing 完全改变盒模型？](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#替代（ie）盒模型)
-- [如何改变背景色？](/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#背景颜色)
-- [如何修改边框？](/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#玩转背景和边框)
+- [如何使用 box-sizing 完全改变盒模型？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model#替代（ie）盒模型)
+- [如何改变背景色？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#背景颜色)
+- [如何修改边框？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#玩转背景和边框)
 - [如何给 HTML 表格添样式？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables)
-- [如何添加盒子阴影？](/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#盒子阴影)
+- [如何添加盒子阴影？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#盒子阴影)
 
 ## 罕见问题与进阶技巧
 
@@ -49,13 +49,13 @@ CSS 允许一些高级的设计技巧。这些文章可以帮助你解决一些
 
 ### 通用
 
-- [如何计算 CSS 选择器的优先级？](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)
-- [如何控制 CSS 中的继承？](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#控制继承)
+- [如何计算 CSS 选择器的优先级？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#优先级)
+- [如何控制 CSS 中的继承？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#控制继承)
 
 ### 进阶效果
 
-- [如何使用 CSS 滤镜？](/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#Filters%EF%BC%88%E6%BB%A4%E9%95%9C%EF%BC%89)
-- [如何在 CSS 中使用混合模式？](/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#blend_modes（混合模式）)
+- [如何使用 CSS 滤镜？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#Filters%EF%BC%88%E6%BB%A4%E9%95%9C%EF%BC%89)
+- [如何在 CSS 中使用混合模式？](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#blend_modes（混合模式）)
 
 ### 布局
 
diff --git a/files/zh-cn/learn_web_development/howto/solve_html_problems/add_a_hit_map_on_top_of_an_image/index.md b/files/zh-cn/learn_web_development/howto/solve_html_problems/add_a_hit_map_on_top_of_an_image/index.md
index 9f4962e0423168..1197a5d8f3043b 100644
--- a/files/zh-cn/learn_web_development/howto/solve_html_problems/add_a_hit_map_on_top_of_an_image/index.md
+++ b/files/zh-cn/learn_web_development/howto/solve_html_problems/add_a_hit_map_on_top_of_an_image/index.md
@@ -85,7 +85,7 @@ original_slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
 - [`href`](/zh-CN/docs/Web/HTML/Element/area#href)
   - : 你需要链接的资源地址。如果你不希望当前区域链接到任何地方 (比方说，如果你正在创建一个空心圆)，你可以将这个属性保留为空。
 - [`alt`](/zh-CN/docs/Web/HTML/Element/area#alt)
-  - : 一个必选属性，告诉用户链接的指向或功能说明。`alt` 文本仅在图像不可用时显示。请参阅我们的[guidelines for writing accessible link text](/zh-CN/docs/Learn/HTML/Howto/Create_a_hyperlink#writing_accessible_link_text)。如果 `href` 属性为空并且整个图像已经具备了 `alt` 属性，则可以设置 `alt=""`。
+  - : 一个必选属性，告诉用户链接的指向或功能说明。`alt` 文本仅在图像不可用时显示。请参阅我们的[guidelines for writing accessible link text](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links#writing_accessible_link_text)。如果 `href` 属性为空并且整个图像已经具备了 `alt` 属性，则可以设置 `alt=""`。
 
 ```html
 <map name="example-map-1">
diff --git a/files/zh-cn/learn_web_development/howto/solve_html_problems/index.md b/files/zh-cn/learn_web_development/howto/solve_html_problems/index.md
index f98db38d27ab0c..33f0a6a0c8d9be 100644
--- a/files/zh-cn/learn_web_development/howto/solve_html_problems/index.md
+++ b/files/zh-cn/learn_web_development/howto/solve_html_problems/index.md
@@ -12,21 +12,21 @@ original_slug: Learn/HTML/Howto
 
 HTML 应用最基础的是文档结构。如果你是 HTML 新手那么你应该和我们一起从这里开始学习。
 
-- [如何创建 HTML 文档](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started#主动学习：创建第一个_html_元素)
+- [如何创建 HTML 文档](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#主动学习：创建第一个_html_元素)
 - [如何将网页分成有逻辑的部分](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents)
-- [如何设置一个适当的标题和段落结构](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#基础：标题和段落)
+- [如何设置一个适当的标题和段落结构](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#基础：标题和段落)
 
 ### 基本文本语义
 
 HTML 专门为文档提供语义信息，因此，HTML 能够解答关于如何在文档中最好地传递消息的许多问题。
 
-- [如何用 HTML 创建列表项](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#列表)
-- [如何强调或凸显内容](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#重点强调)
-- [如何表明文本是重要的](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#重点强调)
-- [如何用 HTML 展示计算机代码](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#展示计算机代码)
-- [如何注释图片和图标](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#通过为图片搭配说明文字的方式来解说图片)
-- [如何注解缩略语并使其可理解](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#缩略语)
-- [如何为网页添加引述和引用](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#引用)
+- [如何用 HTML 创建列表项](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#列表)
+- [如何强调或凸显内容](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#重点强调)
+- [如何表明文本是重要的](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#重点强调)
+- [如何用 HTML 展示计算机代码](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#展示计算机代码)
+- [如何注释图片和图标](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images#通过为图片搭配说明文字的方式来解说图片)
+- [如何注解缩略语并使其可理解](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#缩略语)
+- [如何为网页添加引述和引用](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#引用)
 - [如何用 HTML 定义术语](/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems/Define_terms_with_HTML)
 
 ### 超链接
@@ -34,18 +34,18 @@ HTML 专门为文档提供语义信息，因此，HTML 能够解答关于如何
 使用 HTML 的主要原因之一，就是可以使用{{Glossary("hyperlink", "超链接")}}来轻松导航，实现方式有以下几种：
 
 - [如何创建超链接](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links)
-- [如何创建导航菜单](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#主动学习：创建一个导航菜单)
+- [如何创建导航菜单](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links#主动学习：创建一个导航菜单)
 
 ### 图像 & 多媒体
 
-- [如何在页面中添加图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#怎样将一幅图片放到网页上？)
+- [如何在页面中添加图片](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images#怎样将一幅图片放到网页上？)
 - [如何在页面中添加视频](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)
 
 ### 脚本 & 样式
 
 HTML 仅仅建立了文档结构。为解决演示问题，可使用 {{glossary("CSS")}} 或脚本使页面具有交互功能。
 
-- [如何在网页中使用 CSS](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works#应用_css_到_dom)
+- [如何在网页中使用 CSS](/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#应用_css_到_dom)
 - [如何在网页中使用 JavaScript](/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_JavaScript_within_a_webpage)
 
 ### 嵌入内容
@@ -72,7 +72,7 @@ HTML 仅仅建立了文档结构。为解决演示问题，可使用 {{glossary(
 
 ### 数据表示
 
-- 如何用 HTML 表示数值和代码，参见[上标和下标](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#上标和下标)以及[展示计算机代码](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#展示计算机代码)
+- 如何用 HTML 表示数值和代码，参见[上标和下标](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#上标和下标)以及[展示计算机代码](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#展示计算机代码)
 - [如何使用 data 属性](/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes)
 
 ### 高级文本语义
@@ -90,8 +90,8 @@ HTML 仅仅建立了文档结构。为解决演示问题，可使用 {{glossary(
 
 HTML 支持多语言，其提供了用于解决常见的国际化问题的工具。
 
-- [如何为单一网页添加多语言支持](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#为文档设定主语言)
-- [如何用 HTML 展现时间和日期](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#标记时间和日期)
+- [如何为单一网页添加多语言支持](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#为文档设定主语言)
+- [如何用 HTML 展现时间和日期](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#标记时间和日期)
 
 ### 性能
 
diff --git a/files/zh-cn/learn_web_development/howto/solve_javascript_problems/index.md b/files/zh-cn/learn_web_development/howto/solve_javascript_problems/index.md
index 6cee385d7a2781..2deee01b1b1ef8 100644
--- a/files/zh-cn/learn_web_development/howto/solve_javascript_problems/index.md
+++ b/files/zh-cn/learn_web_development/howto/solve_javascript_problems/index.md
@@ -51,7 +51,7 @@ myFunction();
 
 #### 函数作用域
 
-记住，[函数拥有自己的作用域](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数作用域和冲突)——你不能从函数外部访问一个函数内的变量值，除非你在全局声明了该变量（即不在任何函数内），或者从函数外部获得它的[返回值](/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values)。
+记住，[函数拥有自己的作用域](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#函数作用域和冲突)——你不能从函数外部访问一个函数内的变量值，除非你在全局声明了该变量（即不在任何函数内），或者从函数外部获得它的[返回值](/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values)。
 
 #### 在 return 语句之后运行代码
 
@@ -78,136 +78,136 @@ const myObject = {
 
 ## 基本定义
 
-- [JavaScript 是什么？](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript#广义的定义)
-- [变量是什么？](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#变量是什么？)
+- [JavaScript 是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#广义的定义)
+- [变量是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#变量是什么？)
 - [字符串是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings)
-- [数组是什么？](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#数组是什么？)
+- [数组是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#数组是什么？)
 - [循环是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops)
 - [函数是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions)
 - [事件是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events)
-- [对象是什么？](/zh-CN/docs/Learn/JavaScript/Objects/Basics#对象基础)
-- [JSON 是什么？](/zh-CN/docs/Learn/JavaScript/Objects/JSON#什么是_json)
-- [web API 是什么？](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#什么是_api)
-- [DOM 是什么？](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#文档对象模型)
+- [对象是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#对象基础)
+- [JSON 是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/JSON#什么是_json)
+- [web API 是什么？](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#什么是_api)
+- [DOM 是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting#文档对象模型)
 
 ## 基本用例
 
 ### 常见
 
-- [怎么在页面中添加 JavaScript?](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript#怎样向页面添加_javascript)
-- [怎么在 JavaScript 中添加注释？](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript#注释)
+- [怎么在页面中添加 JavaScript?](/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#怎样向页面添加_javascript)
+- [怎么在 JavaScript 中添加注释？](/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#注释)
 
 ### 变量
 
-- [如何声明变量？](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#声明变量)
-- [如何初始化变量的值？](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#初始化变量)
-- [如何更新变量的值？](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#更新变量)（参见 [赋值运算符](/zh-CN/docs/Learn/JavaScript/First_steps/Math#赋值运算符)）
-- [JavaScript 中有哪些数据类型？](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#变量类型)
-- ['弱类型'是什么意思？](/zh-CN/docs/Learn/JavaScript/First_steps/Variables#loose_typing)
+- [如何声明变量？](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#声明变量)
+- [如何初始化变量的值？](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#初始化变量)
+- [如何更新变量的值？](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#更新变量)（参见 [赋值运算符](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#赋值运算符)）
+- [JavaScript 中有哪些数据类型？](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#变量类型)
+- ['弱类型'是什么意思？](/zh-CN/docs/Learn_web_development/Core/Scripting/Variables#loose_typing)
 
 ### 数学
 
-- [在 web 开发中需要处理什么样的数字值？](/zh-CN/docs/Learn/JavaScript/First_steps/Math#数字类型)
-- [JavaScript 如何处理基本的数学运算？](/zh-CN/docs/Learn/JavaScript/First_steps/Math#算术运算符)
-- [什么是运算符的优先级，如何在 JavaScript 中处理优先级问题？](/zh-CN/docs/Learn/JavaScript/First_steps/Math#运算符优先级)
-- [如何在 JavaScript 中增加或减少值？](/zh-CN/docs/Learn/JavaScript/First_steps/Math#自增和自减运算符)
-- [如何在 JavaScript 中比较值的大小？](/zh-CN/docs/Learn/JavaScript/First_steps/Math#比较运算符)（例如，查看哪个值更大，或检查一个值是否与另外一个值相等）
+- [在 web 开发中需要处理什么样的数字值？](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#数字类型)
+- [JavaScript 如何处理基本的数学运算？](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#算术运算符)
+- [什么是运算符的优先级，如何在 JavaScript 中处理优先级问题？](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#运算符优先级)
+- [如何在 JavaScript 中增加或减少值？](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#自增和自减运算符)
+- [如何在 JavaScript 中比较值的大小？](/zh-CN/docs/Learn_web_development/Core/Scripting/Math#比较运算符)（例如，查看哪个值更大，或检查一个值是否与另外一个值相等）
 
 ### 字符串
 
-- [如何在 JavaScript 中创建字符串？](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#创建一个字符串)
-- [我需要使用单引号，还是双引号？](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#单引号和双引号)
-- [我如何转义字符串中的字符？](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#转义字符串中的字符)
-- [我如何将字符串拼接在一起？](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#连接字符串)
-- [可以将字符串和数字拼接在一起吗？](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#数字与字符串)
-- [如何得到字符串的长度？](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#获得字符串的长度)
-- [如何得到字符串某个特定位置的字符？](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#检索特定字符串字符)
-- [如何从给定字符串中找到并提取特定子字符串？](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#在字符串中查找子字符串并提取它)
-- [如何改变字符串的大小写？](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#转换大小写)
-- [如何将特定子字符串替换为另外一个？](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods#替换字符串的某部分)
+- [如何在 JavaScript 中创建字符串？](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#创建一个字符串)
+- [我需要使用单引号，还是双引号？](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#单引号和双引号)
+- [我如何转义字符串中的字符？](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#转义字符串中的字符)
+- [我如何将字符串拼接在一起？](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#连接字符串)
+- [可以将字符串和数字拼接在一起吗？](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#数字与字符串)
+- [如何得到字符串的长度？](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#获得字符串的长度)
+- [如何得到字符串某个特定位置的字符？](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#检索特定字符串字符)
+- [如何从给定字符串中找到并提取特定子字符串？](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#在字符串中查找子字符串并提取它)
+- [如何改变字符串的大小写？](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#转换大小写)
+- [如何将特定子字符串替换为另外一个？](/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#替换字符串的某部分)
 
 ### 数组
 
-- [怎么创建数组？](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#创建数组)
-- [如何访问和修改数组中的元素？](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#访问和修改数组元素)（包括多维数组）
-- [怎么获取数组的长度？](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#获取数组长度)
-- [怎么添加和移除数组中的元素？](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#添加和删除数组项)
-- [如何将一个字符串拆分为数组，或将数组拼接成一个字符串？](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#字符串和数组之间的转换)
+- [怎么创建数组？](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#创建数组)
+- [如何访问和修改数组中的元素？](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#访问和修改数组元素)（包括多维数组）
+- [怎么获取数组的长度？](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#获取数组长度)
+- [怎么添加和移除数组中的元素？](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#添加和删除数组项)
+- [如何将一个字符串拆分为数组，或将数组拼接成一个字符串？](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#字符串和数组之间的转换)
 
 ### JavaScript 调试
 
-- [什么是错误的基本类型？](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong#错误类型)
+- [什么是错误的基本类型？](/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong#错误类型)
 - [什么是浏览器开发工具，如何使用它？](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)
-- [怎么在 JavaScript 控制台打印值？](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#console_相关_api)
-- [怎么使用断点和其他 JavaScript 调试工具？](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#using_the_javascript_debugger)
+- [怎么在 JavaScript 控制台打印值？](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#console_相关_api)
+- [怎么使用断点和其他 JavaScript 调试工具？](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#using_the_javascript_debugger)
 
-有关 JavaScript 调试的更多内容，请查阅[处理 JavaScript 常见问题](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript)页面，也可以查看[其他常见错误](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong#其他常见错误)的描述。
+有关 JavaScript 调试的更多内容，请查阅[处理 JavaScript 常见问题](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript)页面，也可以查看[其他常见错误](/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong#其他常见错误)的描述。
 
 ### 在代码中作出判断
 
 - [如何根据变量的值或其他条件执行不同代码块？](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals)
-- [如何使用 if ...else 语句？](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_语句)
-- [如何将决策的代码块嵌套在其他代码块之中？](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#嵌套_if_..._else)
-- [如何在 JavaScript 中使用与、或、非运算符？](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#逻辑运算符：_和_!)
-- [如何方便地处理单一条件产生的多重选择？](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#switch_语句)
-- [如何使用三元运算符快速作出基于真假的二重选择？](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#三元运算符)
+- [如何使用 if ...else 语句？](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#if_..._else_语句)
+- [如何将决策的代码块嵌套在其他代码块之中？](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#嵌套_if_..._else)
+- [如何在 JavaScript 中使用与、或、非运算符？](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#逻辑运算符：_和_!)
+- [如何方便地处理单一条件产生的多重选择？](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#switch_语句)
+- [如何使用三元运算符快速作出基于真假的二重选择？](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#三元运算符)
 
 ### 循环/迭代
 
 - [如何重复运行相同的代码？](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops)
-- [如何在满足某些条件下退出循环？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code#使用_break_退出循环)
-- [如何在满足某些条件下跳转至下一次循环迭代？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code#使用_continue_跳过迭代)
-- [如何使用 while 和 do ... while 循环？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code#while_语句和_do_..._while_语句)
+- [如何在满足某些条件下退出循环？](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops#使用_break_退出循环)
+- [如何在满足某些条件下跳转至下一次循环迭代？](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops#使用_continue_跳过迭代)
+- [如何使用 while 和 do ... while 循环？](/zh-CN/docs/Learn_web_development/Core/Scripting/Loops#while_语句和_do_..._while_语句)
 
 ## 中级用例
 
 ### 函数
 
-- [如何找到浏览器中的内置函数？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#浏览器内置函数)
-- [函数和方法有什么不同？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数与方法)
+- [如何找到浏览器中的内置函数？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#浏览器内置函数)
+- [函数和方法有什么不同？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#函数与方法)
 - [如何创建自己的函数？](/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function)
-- [如何运行（或调用）函数？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#调用函数)
-- [什么是匿名函数？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#匿名函数)
-- [如何在调用函数时指定参数？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数参数)
-- [什么是函数作用域？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数作用域和冲突)
+- [如何运行（或调用）函数？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#调用函数)
+- [什么是匿名函数？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#匿名函数)
+- [如何在调用函数时指定参数？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#函数参数)
+- [什么是函数作用域？](/zh-CN/docs/Learn_web_development/Core/Scripting/Functions#函数作用域和冲突)
 - [什么是函数返回值，如何使用它们？](/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values)
 
 ### 对象
 
-- [如何创建对象？](/zh-CN/docs/Learn/JavaScript/Objects/Basics#对象基础)
-- [什么是点表示法？](/zh-CN/docs/Learn/JavaScript/Objects/Basics#点表示法)
-- [什么是括号表示法？](/zh-CN/docs/Learn/JavaScript/Objects/Basics#括号表示法)
-- [如何获取和设置对象的方法和属性？](/zh-CN/docs/Learn/JavaScript/Objects/Basics#设置对象成员)
-- [对象中的 `this` 是什么？](/zh-CN/docs/Learn/JavaScript/Objects/Basics#this的含义)
+- [如何创建对象？](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#对象基础)
+- [什么是点表示法？](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#点表示法)
+- [什么是括号表示法？](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#括号表示法)
+- [如何获取和设置对象的方法和属性？](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#设置对象成员)
+- [对象中的 `this` 是什么？](/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics#this的含义)
 - [什么是面向对象编程？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript)
-- [什么是构造器和实例，如何创建它们？](/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#类和构造函数)
-- [在 JavaScript 中创建对象的方法都有哪些？](/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#other_ways_to_create_object_instances)
+- [什么是构造器和实例，如何创建它们？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#类和构造函数)
+- [在 JavaScript 中创建对象的方法都有哪些？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#other_ways_to_create_object_instances)
 
 ### JSON
 
-- [如何构建 JSON 数据，并使用 JavaScript 读取它？](/zh-CN/docs/Learn/JavaScript/Objects/JSON#json_结构)
-- [如何将 JSON 文件加载至页面上？](/zh-CN/docs/Learn/JavaScript/Objects/JSON#加载我们的_json)
-- [如何将 JSON 对象转换为字符串，或者再转换回来？](/zh-CN/docs/Learn/JavaScript/Objects/JSON#对象和文本间的转换)
+- [如何构建 JSON 数据，并使用 JavaScript 读取它？](/zh-CN/docs/Learn_web_development/Core/Scripting/JSON#json_结构)
+- [如何将 JSON 文件加载至页面上？](/zh-CN/docs/Learn_web_development/Core/Scripting/JSON#加载我们的_json)
+- [如何将 JSON 对象转换为字符串，或者再转换回来？](/zh-CN/docs/Learn_web_development/Core/Scripting/JSON#对象和文本间的转换)
 
 ### 事件
 
-- [什么是事件处理器，怎样使用它们？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#事件处理器属性)
-- [什么是内联事件处理器？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#内联事件处理器——请勿使用)
-- [`addEventListener()` 函数的作用，如何使用它？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#使用_addeventlistener)
-- [我该使用什么样的机制将事件代码添加到我的网页上？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#我该使用哪种机制？)
-- [什么是事件对象，如何使用它？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#事件对象)
-- [如何防止默认事件行为？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#阻止默认行为)
+- [什么是事件处理器，怎样使用它们？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#事件处理器属性)
+- [什么是内联事件处理器？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#内联事件处理器——请勿使用)
+- [`addEventListener()` 函数的作用，如何使用它？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#使用_addeventlistener)
+- [我该使用什么样的机制将事件代码添加到我的网页上？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#我该使用哪种机制？)
+- [什么是事件对象，如何使用它？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#事件对象)
+- [如何防止默认事件行为？](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#阻止默认行为)
 - [事件如何在嵌套元素中触发？（事件传递及其相关内容——事件冒泡及捕获）](/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling)
-- [什么是事件委托，它如何工作？](/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling#事件委托)
+- [什么是事件委托，它如何工作？](/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling#事件委托)
 
 ### 面向对象的 JavaScript
 
 - [什么是对象原型？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes)
-- [什么是构造器属性，如何使用它？](/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes#constructor_属性)
-- [如何向构造器中添加方法？](/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes#修改原型)
+- [什么是构造器属性，如何使用它？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#constructor_属性)
+- [如何向构造器中添加方法？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#修改原型)
 - [如何创建一个新的构造函数，从父构造函数中继承其成员？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript)
-- [什么时候应当在 JavaScript 中使用继承？](/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#继承)
+- [什么时候应当在 JavaScript 中使用继承？](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#继承)
 
 ### Web API
 
-- [如何使用 JavaScript 操作 DOM 模型（如添加或删除元素）？](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#主动学习：基本的_dom_操作)
+- [如何使用 JavaScript 操作 DOM 模型（如添加或删除元素）？](/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting#主动学习：基本的_dom_操作)
diff --git a/files/zh-cn/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md b/files/zh-cn/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md
index 33166bb387ba6d..27eed2936f4c17 100644
--- a/files/zh-cn/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/zh-cn/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -43,7 +43,7 @@ original_slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_serv
 有多种 SFTP 客户端。我们的示例使用的是 [FileZilla](https://filezilla-project.org/)，因为它免费，且可在 Windows、macOS 以及 Linux 上使用。要安装 FileZilla，请转到 [FileZilla 下载页面](https://filezilla-project.org/download.php?type=client)，点击下载按钮，然后以常规的方式通过安装文件安装它。
 
 > [!NOTE]
-> 当然还有很多其他的选择。有关详细的信息，请参阅[发布工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#发布工具)。
+> 当然还有很多其他的选择。有关详细的信息，请参阅[发布工具](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#发布工具)。
 
 打开 FileZilla 应用程序，你应该看到这样的界面：
 
diff --git a/files/zh-cn/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md b/files/zh-cn/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md
index f915ab101e63f4..bea67e408f565d 100644
--- a/files/zh-cn/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/zh-cn/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md
@@ -234,7 +234,7 @@ _现在还没有动手练习的内容。[请考虑投稿](/zh-CN/docs/MDN/Commun
 
 如果你正以特定的群体（比如说技术平台或者国家）为目标，你或许需要用额外的浏览器，像是 [Opera](https://www.opera.com/)、[Konqueror](https://apps.kde.org/konqueror/) 来测试它。
 
-但是因为某些浏览器只会在特定的操作系统上运行，测试会变得复杂。特别是，Apple Safari 在 iOS、iPadOS 和 macOS 上运行。最好利用像 [Browsershots](https://browsershots.org/) 或 [Browserstack](https://www.browserstack.com/) 这样的服务。Browsershots 提供你的网站在各种浏览器中显示的截图。Browserstack 则提供对虚拟机的完全远程访问，因此你可以在最常见的环境和不同操作系统上测试你的网站。或者，你也可以自行设置虚拟机，但这需要一定的专业知识。有关更多信息，请参阅[执行测试的策略：建立测试实验室](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#建立测试实验室)。
+但是因为某些浏览器只会在特定的操作系统上运行，测试会变得复杂。特别是，Apple Safari 在 iOS、iPadOS 和 macOS 上运行。最好利用像 [Browsershots](https://browsershots.org/) 或 [Browserstack](https://www.browserstack.com/) 这样的服务。Browsershots 提供你的网站在各种浏览器中显示的截图。Browserstack 则提供对虚拟机的完全远程访问，因此你可以在最常见的环境和不同操作系统上测试你的网站。或者，你也可以自行设置虚拟机，但这需要一定的专业知识。有关更多信息，请参阅[执行测试的策略：建立测试实验室](/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies#建立测试实验室)。
 
 无论如何，一定要在真实设备上进行一些测试，尤其是在真实的移动设备上。移动设备模拟是一项新的、不断发展的技术，比桌面模拟不太可靠。移动设备当然需要花费金钱，所以我们建议你看看[开放设备实验室倡议](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/#odls-have-opened-doors-for-idls)。如果你想在多个平台上进行测试而不花费太多，你也可以共享设备。
 
diff --git a/files/zh-cn/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md b/files/zh-cn/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
index 3006cbe041abdc..fa828f57317bfd 100644
--- a/files/zh-cn/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
+++ b/files/zh-cn/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
@@ -63,7 +63,7 @@ l10n:
 - 专用 web 服务器可以一直拥有一样的 IP 地址，这也称为*专有 IP 地址*（不是所有的 {{Glossary("ISP")}} 都会为家庭线提供一个固定的 IP 地址）
 - 专用 web 服务器往往由第三方提供者维护
 
-因为所有的这些原因，寻找一个优秀的托管提供者是建立你的网站的一个重要部分。比较不同公司提供的服务并选择一个适合你的需求和预算的服务（服务的价格从免费到每月上万美金不等）。你可以在[这篇文章](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#专业网站机构和托管)中找到更多的细节。
+因为所有的这些原因，寻找一个优秀的托管提供者是建立你的网站的一个重要部分。比较不同公司提供的服务并选择一个适合你的需求和预算的服务（服务的价格从免费到每月上万美金不等）。你可以在[这篇文章](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#专业网站机构和托管)中找到更多的细节。
 
 一旦你设置好一个网络托管解决方案，你必须[上传你的文件到你的 web 服务器](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)。
 
diff --git a/files/zh-cn/learn_web_development/index.md b/files/zh-cn/learn_web_development/index.md
index 31fd135db15ef0..85f652ff1921df 100644
--- a/files/zh-cn/learn_web_development/index.md
+++ b/files/zh-cn/learn_web_development/index.md
@@ -63,7 +63,7 @@ l10n:
 
 在 MDN 的学习 Web 开发部分，有许多独立的任务和评估，等待你完成。有两种主要类型：
 
-- “技能测试”任务，例如，在[代码中做决定——条件语句](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#技能测试！)。
+- “技能测试”任务，例如，在[代码中做决定——条件语句](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#技能测试！)。
 - 在某些模块的结尾处，包含更深入的**评估**，例如，[图片库](/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery)。
 
 每个类型都有相应的评分指南和推荐解决方案，可用于帮助你评估你的工作。某些模式能让你更容易地找到这些资源，例如：
diff --git a/files/zh-cn/mdn/community/learn_forum/index.md b/files/zh-cn/mdn/community/learn_forum/index.md
index ef5b762e54f2b6..d8d78feb37e2ec 100644
--- a/files/zh-cn/mdn/community/learn_forum/index.md
+++ b/files/zh-cn/mdn/community/learn_forum/index.md
@@ -68,8 +68,8 @@ slug: MDN/Community/Learn_forum
 1. 大致通读一遍页面的结构。
 2. 特别是查看一下现有的评估类型：
 
-   - 众多“技能测试”文章中（如 [/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#技能测试！](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#技能测试！)）
-   - 在一些模块结束时更深入的评估部分（如 [/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery#评估或进一步帮助](/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery#评估或进一步帮助))
+   - 众多“技能测试”文章中（如 [/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#技能测试！](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals#技能测试！)）
+   - 在一些模块结束时更深入的评估部分（如 [/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery#评估或进一步帮助](/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery#评估或进一步帮助))
 
 3. 看一眼与学习区相关的 GitHub 仓库（大部分文件都在 <https://github.com/mdn/learning-area/> 中，还有一些文件在 <https://github.com/mdn/css-examples/tree/main/learn> 中）。初学者需要帮助的大部分例子都包含在这里。
 4. 每项评估或测试都有相关的打分指南或推荐解法，可以帮助你评估他们的工作。
diff --git a/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md b/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md
index c8a9448c770c7b..56f6f4f3a3e460 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/images_media/index.md
@@ -45,7 +45,7 @@ l10n:
    > [!NOTE]
    > 对于本地化文档中的图像文件，请在 `mdn/content` 的本地仓库中运行该命令，并将 `files/en-us/web/css/my-cool-image.png` 替换为到本地化文档中包含的图像文件的相对路径或绝对路径。
 
-4. 在 `files/en-us/web/css/index.md` 文档中使用 Markdown 图像语法并在方括号间提供（用于描述图像的）[`alt` 属性的描述文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)，或包含一个 {{htmlelement("img")}} 元素和 `alt` 属性来引用图像：
+4. 在 `files/en-us/web/css/index.md` 文档中使用 Markdown 图像语法并在方括号间提供（用于描述图像的）[`alt` 属性的描述文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)，或包含一个 {{htmlelement("img")}} 元素和 `alt` 属性来引用图像：
 
    ```md
    <img src="my-cool-image.png" alt="炫酷的图像" />
diff --git a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md
index 051ff6b02398b7..814fec44b7ca8a 100644
--- a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md
@@ -25,7 +25,7 @@ Prettier 格式化所有代码并保持风格一致。尽管如此，你仍需
 
 ### 使用弹性/相对单位
 
-为了在尽可能广泛的设备上获得最大的灵活性，建议使用 em 和 rem 或百分比和视口单位等相对单位来设置容器、填充等的大小，如果你希望它们随视口宽度变化。你可以在我们的 [CSS 值与单位指南](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#相对长度单位)中阅读更多相关内容。
+为了在尽可能广泛的设备上获得最大的灵活性，建议使用 em 和 rem 或百分比和视口单位等相对单位来设置容器、填充等的大小，如果你希望它们随视口宽度变化。你可以在我们的 [CSS 值与单位指南](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#相对长度单位)中阅读更多相关内容。
 
 ### 不要使用预处理器
 
diff --git a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md
index 35cc060cc96903..f46f7764c47b35 100644
--- a/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/writing_style_guide/index.md
@@ -82,7 +82,7 @@ slug: MDN/Writing_guidelines/Writing_style_guide
   > The {{domxref("CanvasRenderingContext2D")}} method **`strokeText()`**, part of the [Canvas 2D API](/zh-CN/docs/Web/API/Canvas_API), strokes (draws the outlines of) the characters of a specified string, anchored at the position indicated by the given X and Y coordinates.
   > The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.
   >
-  > For more details and examples, see the [Text](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#text) section on the Drawing graphics page as well as our main article on the subject, [Drawing text](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text).
+  > For more details and examples, see the [Text](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#文本) section on the Drawing graphics page as well as our main article on the subject, [Drawing text](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text).
 
 ### 使用包容性语言
 
diff --git a/files/zh-cn/mozilla/firefox/releases/120/index.md b/files/zh-cn/mozilla/firefox/releases/120/index.md
index 98214180de7ca8..91ebd5dfa57f3d 100644
--- a/files/zh-cn/mozilla/firefox/releases/120/index.md
+++ b/files/zh-cn/mozilla/firefox/releases/120/index.md
@@ -18,7 +18,7 @@ l10n:
 ### CSS
 
 - 现已支持 {{CSSXref("color_value/light-dark", "light-dark()")}} CSS 颜色值函数。这允许在不需要 `prefers-color-scheme` 媒体特性的情况下设置浅色和深色的颜色（[Firefox bug 1856999](https://bugzil.la/1856999)）。
-- 现已支持 [`lh` 和 `rlh`](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#行距单位)行距单位。这允许设置相对于元素的行距属性，例如，将背景装饰与多行文本精确对齐（[Firefox bug 1310170](https://bugzil.la/1310170)）。
+- 现已支持 [`lh` 和 `rlh`](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#行距单位)行距单位。这允许设置相对于元素的行距属性，例如，将背景装饰与多行文本精确对齐（[Firefox bug 1310170](https://bugzil.la/1310170)）。
 
 #### 移除
 
diff --git a/files/zh-cn/mozilla/firefox/releases/125/index.md b/files/zh-cn/mozilla/firefox/releases/125/index.md
index 7e9fbf440cc932..394f5bba66e544 100644
--- a/files/zh-cn/mozilla/firefox/releases/125/index.md
+++ b/files/zh-cn/mozilla/firefox/releases/125/index.md
@@ -18,7 +18,7 @@ l10n:
 ### CSS
 
 - 已更新 {{cssxref("align-content")}} 属性，使其适用于 `display: block;` 布局。这将 `flex` 和 `grid` 中所有的布局定位带到 `block`，使开发人员能够对齐块级元素，而无需将其容器转换为 `flex` 或 `grid` 容器。（[Firefox bug 1882853](https://bugzil.la/1882853)）。
-- CSS 属性 [`transform-box`](/zh-CN/docs/Web/CSS/transform-box) 现已支持 `content-box` 和 `stroke-box` 值。对于参照的盒子，`content-box` 值使用[内容盒子](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#盒模型的各个部分)，而 `stroke-box` 值使用包含 SVG 形状的描边边界框（stroke bounding box）（[Firefox bug 1868374](https://bugzil.la/1868374)）。
+- CSS 属性 [`transform-box`](/zh-CN/docs/Web/CSS/transform-box) 现已支持 `content-box` 和 `stroke-box` 值。对于参照的盒子，`content-box` 值使用[内容盒子](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model#盒模型的各个部分)，而 `stroke-box` 值使用包含 SVG 形状的描边边界框（stroke bounding box）（[Firefox bug 1868374](https://bugzil.la/1868374)）。
 - [`content-visibility`](/zh-CN/docs/Web/CSS/content-visibility) CSS 属性值 `auto` 现已默认启用。其允许在内容不[与用户相关](/zh-CN/docs/Web/CSS/CSS_containment#与用户相关)的情况下跳过对其的渲染。（[Firefox bug 1874874](https://bugzil.la/1874874)）。
 
 ### JavaScript
diff --git a/files/zh-cn/mozilla/firefox/releases/127/index.md b/files/zh-cn/mozilla/firefox/releases/127/index.md
index f9195727518ef8..a04959a83bd68e 100644
--- a/files/zh-cn/mozilla/firefox/releases/127/index.md
+++ b/files/zh-cn/mozilla/firefox/releases/127/index.md
@@ -33,7 +33,7 @@ l10n:
 
 ### SVG
 
-- [`lh` 和 `rlh`](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#line_height_units) 行高单位首先在 CSS 中得到支持（[在 Firefox 120 中](/zh-CN/docs/Mozilla/Firefox/Releases/120#css)），现在也在 SVG 中得到了支持。它们可以在 CSS 属性值（`stroke-width: 0.5lh`）和 SVG 属性值（`stroke-width="0.5lh"`）中使用。（[Firefox bug 1892089](https://bugzil.la/1892089)）。
+- [`lh` 和 `rlh`](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#line_height_units) 行高单位首先在 CSS 中得到支持（[在 Firefox 120 中](/zh-CN/docs/Mozilla/Firefox/Releases/120#css)），现在也在 SVG 中得到了支持。它们可以在 CSS 属性值（`stroke-width: 0.5lh`）和 SVG 属性值（`stroke-width="0.5lh"`）中使用。（[Firefox bug 1892089](https://bugzil.la/1892089)）。
 
 ### 安全
 
diff --git a/files/zh-cn/web/accessibility/understanding_wcag/index.md b/files/zh-cn/web/accessibility/understanding_wcag/index.md
index 9ee5b3bcd63226..0903f0d2c3bad7 100644
--- a/files/zh-cn/web/accessibility/understanding_wcag/index.md
+++ b/files/zh-cn/web/accessibility/understanding_wcag/index.md
@@ -49,4 +49,4 @@ WCAG 2.1 包括：
 
 该指南旨在提供实用信息，以帮助你构建更好、更易于访问的网站。然而，我们不是律师，这些内容不构成法律建议。如果你担心 Web 无障碍的法律影响，我们建议你查看你所在国家或地区的 Web/公共资源无障碍法规，并寻求执业律师的建议。
 
-[什么是无障碍？](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)特别是[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)部分提供了更多相关信息。
+[什么是无障碍？](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)特别是[无障碍指南和法律](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍指南和法律)部分提供了更多相关信息。
diff --git a/files/zh-cn/web/api/eventtarget/addeventlistener/index.md b/files/zh-cn/web/api/eventtarget/addeventlistener/index.md
index dc4bb2dd0f1b0f..2af1eff1fb0467 100644
--- a/files/zh-cn/web/api/eventtarget/addeventlistener/index.md
+++ b/files/zh-cn/web/api/eventtarget/addeventlistener/index.md
@@ -604,7 +604,7 @@ myObject.register();
 
 ### 在使用监听器时进行数据交换
 
-事件监听器看起来就像一个“孤岛”，要向它传入数据非常困难，更别说是要在它被调用后获取任何数据了。事件监听器仅仅接受[事件对象](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#事件对象)这一个自动传入的参数，并且它的返回值还会被忽略。那怎样才能与事件监听器交换数据呢？其实有很多种方法可以做到。
+事件监听器看起来就像一个“孤岛”，要向它传入数据非常困难，更别说是要在它被调用后获取任何数据了。事件监听器仅仅接受[事件对象](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#事件对象)这一个自动传入的参数，并且它的返回值还会被忽略。那怎样才能与事件监听器交换数据呢？其实有很多种方法可以做到。
 
 #### 使用 `this` 传入数据
 
diff --git a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.md b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.md
index 7c2de33d1b55b5..38f60afacdb851 100644
--- a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.md
+++ b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.md
@@ -28,7 +28,7 @@ slug: Web/API/HTMLInputElement/invalid_event
   </tbody>
 </table>
 
-这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 `invalid` 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 `<form>` 或元素自己的 [`checkValidity()`](/zh-CN/docs/Learn/Forms#constraint_validation_api) 方法之后。
+这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 `invalid` 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 `<form>` 或元素自己的 [`checkValidity()`](/zh-CN/docs/Learn_web_development/Extensions/Forms#constraint_validation_api) 方法之后。
 
 这个事件不会在 [`blur`](/zh-CN/docs/Web/API/Element/blur_event) 事件中触发。
 
diff --git a/files/zh-cn/web/api/htmlmediaelement/load/index.md b/files/zh-cn/web/api/htmlmediaelement/load/index.md
index fa7dac73e80939..953f137c55f38b 100644
--- a/files/zh-cn/web/api/htmlmediaelement/load/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/load/index.md
@@ -25,7 +25,7 @@ None.
 
 ## 使用说明
 
-调用 `load()` 会使媒体上所有正在进行的操作中止，然后根据 `audio` 或者 `video` 元素的 `src` 或者 `source` 属性里寻找合适的播放源并重新加载媒体内容。更多查看 [Supporting multiple formats](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#supporting_multiple_formats) 和 [Video and audio content](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio) 。
+调用 `load()` 会使媒体上所有正在进行的操作中止，然后根据 `audio` 或者 `video` 元素的 `src` 或者 `source` 属性里寻找合适的播放源并重新加载媒体内容。更多查看 [Supporting multiple formats](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio#supporting_multiple_formats) 和 [Video and audio content](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio) 。
 
 The process of aborting any ongoing activities will cause any outstanding {{jsxref("Promise")}}s returned by {{domxref("HTMLMediaElement.play", "play()")}} being resolved or rejected as appropriate based on their status before the loading of new media can begin. Pending play promises are aborted with an `"AbortError"` {{domxref("DOMException")}}.
 
diff --git a/files/zh-cn/web/api/htmlmetaelement/content/index.md b/files/zh-cn/web/api/htmlmetaelement/content/index.md
index b624afc382a7d9..6f185d00490b5c 100644
--- a/files/zh-cn/web/api/htmlmetaelement/content/index.md
+++ b/files/zh-cn/web/api/htmlmetaelement/content/index.md
@@ -51,4 +51,4 @@ document.head.appendChild(meta);
 - {{HTMLElement("meta")}}
 - {{domxref("HTMLMetaElement.name")}}
 - {{domxref("HTMLMetaElement.httpEquiv")}}
-- [学习：HTML 中的元数据](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#元数据：meta_元素)
+- [学习：HTML 中的元数据](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#元数据：meta_元素)
diff --git a/files/zh-cn/web/api/webxr_device_api/index.md b/files/zh-cn/web/api/webxr_device_api/index.md
index 661699a41abe06..576bc0f5dd2ba3 100644
--- a/files/zh-cn/web/api/webxr_device_api/index.md
+++ b/files/zh-cn/web/api/webxr_device_api/index.md
@@ -234,7 +234,7 @@ The following guides and tutorials are a great resource to learn how to comprehe
 
 ## 参见
 
-- [Web 上的图形](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#web_上的其他图形)
+- [Web 上的图形](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images#web_上的其他图形)
 - [绘制图形](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics)
 - [WebGL API](/zh-CN/docs/Web/API/WebGL_API)：加速 Web 上的 2D 和 3D 图形
 - [Canvas API](/zh-CN/docs/Web/API/Canvas_API)：Web 2D 绘图
diff --git a/files/zh-cn/web/css/@media/index.md b/files/zh-cn/web/css/@media/index.md
index f0482b0dbae8fa..5783971bd4aa6a 100644
--- a/files/zh-cn/web/css/@media/index.md
+++ b/files/zh-cn/web/css/@media/index.md
@@ -141,9 +141,9 @@ _逻辑运算符_（logical operator）`not`、`and`、`only` 和 `or` 可用于
 
 ## 无障碍考虑
 
-为了最好地适应调整了网站文本大小的用户，当你需要在[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)中使用 {{cssxref("&lt;length&gt;")}} 时，请使用 [`em`](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#长度) 单位。
+为了最好地适应调整了网站文本大小的用户，当你需要在[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)中使用 {{cssxref("&lt;length&gt;")}} 时，请使用 [`em`](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#长度) 单位。
 
-[`em`](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#长度) 和 [`px`](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#长度) 都是有效单位，但如果用户更改浏览器文本大小，[`em`](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#长度) 的效果会更好。
+[`em`](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#长度) 和 [`px`](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#长度) 都是有效单位，但如果用户更改浏览器文本大小，[`em`](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units#长度) 的效果会更好。
 
 考虑使用媒体查询第 4 版来改善用户体验。例如，使用 `prefers-reduced-motion` 以[检测用户是否已请求系统最小化其使用的动画](/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion)或动作。
 
diff --git a/files/zh-cn/web/css/_colon_empty/index.md b/files/zh-cn/web/css/_colon_empty/index.md
index 00177442e8eb27..2042a3405b5e94 100644
--- a/files/zh-cn/web/css/_colon_empty/index.md
+++ b/files/zh-cn/web/css/_colon_empty/index.md
@@ -64,7 +64,7 @@ body {
 
 ## 无障碍考虑
 
-辅助技术（如屏幕阅读器）无法解析交互内容为空的情况。所有交互内容必须具有无障碍名称，这是通过为交互控件的父元素（如[锚点](/zh-CN/docs/Web/HTML/Element/a)、[按钮](/zh-CN/docs/Web/HTML/Element/button)等）提供文本值来创建的。无障碍名称将交互控件暴露给[无障碍树](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍_api)，这是一个传达对辅助技术有用的信息的 API。
+辅助技术（如屏幕阅读器）无法解析交互内容为空的情况。所有交互内容必须具有无障碍名称，这是通过为交互控件的父元素（如[锚点](/zh-CN/docs/Web/HTML/Element/a)、[按钮](/zh-CN/docs/Web/HTML/Element/button)等）提供文本值来创建的。无障碍名称将交互控件暴露给[无障碍树](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍_api)，这是一个传达对辅助技术有用的信息的 API。
 
 提供交互控件的无障碍名称的文本可以使用[一些属性的组合](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link)进行隐藏，这些属性可以将其在视觉上从屏幕上移除，但可以被辅助技术解析。这通常用于仅依靠图标来传达目的的按钮。
 
diff --git a/files/zh-cn/web/css/aspect-ratio/index.md b/files/zh-cn/web/css/aspect-ratio/index.md
index c3bd3d9e840dd5..e5f4620300c053 100644
--- a/files/zh-cn/web/css/aspect-ratio/index.md
+++ b/files/zh-cn/web/css/aspect-ratio/index.md
@@ -56,6 +56,6 @@ aspect-ratio: 0.5;
 
 ## 参见
 
-- [图像的 aspect-ratio：防止卡顿](/zh-CN/docs/Learn/Performance/Multimedia#rendering_strategy_preventing_jank_when_loading_images)
+- [图像的 aspect-ratio：防止卡顿](/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia#渲染策略：在加载图像时避免卡顿)
 - [为 CSS 设计纵横比单位](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/)
 - [设置图像的高度和宽度再次变得重要起来](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)
diff --git a/files/zh-cn/web/css/css_colors/applying_color/index.md b/files/zh-cn/web/css/css_colors/applying_color/index.md
index 76b5c5bc6aeff9..ae469435d707aa 100644
--- a/files/zh-cn/web/css/css_colors/applying_color/index.md
+++ b/files/zh-cn/web/css/css_colors/applying_color/index.md
@@ -26,11 +26,11 @@ l10n:
 无论何时渲染元素，这些属性都将用于确定文本的颜色、背景以及文本上的任何装饰。
 
 - {{cssxref("color")}}
-  - : 绘制文本和任何[文本装饰](/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#字体样式、字体粗细、文本转换和文本装饰)（如添加下划线或上划线、删除线等）时使用的颜色。
+  - : 绘制文本和任何[文本装饰](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals#字体样式、字体粗细、文本转换和文本装饰)（如添加下划线或上划线、删除线等）时使用的颜色。
 - {{cssxref("background-color")}}
   - : 文本的背景色。
 - {{cssxref("text-shadow")}}
-  - : 配置应用于文字的阴影效果。阴影选项包括阴影的基色（然后根据其他参数将基色模糊并与背景混合）。请参阅[文字阴影](/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#文字阴影)以了解更多信息。
+  - : 配置应用于文字的阴影效果。阴影选项包括阴影的基色（然后根据其他参数将基色模糊并与背景混合）。请参阅[文字阴影](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals#文字阴影)以了解更多信息。
 - {{cssxref("text-decoration-color")}}
   - : 默认情况下，文本装饰（如下划线、删除线等）使用 `color` 属性作为其颜色。不过，你可以使用 `text-decoration-color` 属性覆盖该行为，并为它们使用不同的颜色。
 - {{cssxref("text-emphasis-color")}}
@@ -669,5 +669,5 @@ colorPicker.addEventListener(
 ## 参见
 
 - [绘制图形](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics)
-- [Web 上的图形](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#web_上的其他图形)
+- [Web 上的图形](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images#web_上的其他图形)
 - [CSS 颜色模块](/zh-CN/docs/Web/CSS/CSS_colors)
diff --git a/files/zh-cn/web/css/css_colors/color_picker_tool/index.md b/files/zh-cn/web/css/css_colors/color_picker_tool/index.md
index 6a8655b1fc0eeb..8e48bc7a4859ff 100644
--- a/files/zh-cn/web/css/css_colors/color_picker_tool/index.md
+++ b/files/zh-cn/web/css/css_colors/color_picker_tool/index.md
@@ -23,4 +23,4 @@ slug: Web/CSS/CSS_colors/Color_picker_tool
 - [基础文本和字体样式](/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals)
 - [通过 CSS 编辑边框样式](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders)
 - [通过 CSS 改变背景样式](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders)
-- [颜色及颜色对比](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#颜色和颜色对比度)
+- [颜色及颜色对比](/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#颜色和颜色对比度)
diff --git a/files/zh-cn/web/css/display-box/index.md b/files/zh-cn/web/css/display-box/index.md
index d925559f1f76c9..bba3f6900a7970 100644
--- a/files/zh-cn/web/css/display-box/index.md
+++ b/files/zh-cn/web/css/display-box/index.md
@@ -15,7 +15,7 @@ slug: Web/CSS/display-box
 
   - : 这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意 CSS 层次 3 显示规格定义的 `contents` 值应该怎样影响"非常见元素" - 即不由 CSS 渲染的元素（诸如被取代元素）。参考 [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) 以获取细节。
 
-    由于浏览器中有个 bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 [Accessibility concerns](#accessibility_concerns) 章节以获取细节。
+    由于浏览器中有个 bug，它会从无障碍树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方[无障碍考虑](#无障碍考虑)部分以获取细节。
 
 - `none`
 
@@ -78,9 +78,9 @@ p.secret {
 
 {{EmbedLiveSample("display: contents", 300, 60)}}
 
-## Accessibility concerns
+## 无障碍考虑
 
-目前在大多数浏览器中的实现，是会从删除 [accessibility tree](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) 删除 `display` 属性值为 `contents` 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 [CSSWG specification](https://drafts.csswg.org/css-display/#the-display-properties)的行为要求。
+目前在大多数浏览器中的实现，是会从[无障碍树](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍_api)中删除 `display` 属性值为 `contents` 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 [CSSWG 规范](https://drafts.csswg.org/css-display/#the-display-properties)的行为要求。
 
 - [More accessible markup with display: contents | Hidde de Vries](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
 - [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
diff --git a/files/zh-cn/web/css/display/index.md b/files/zh-cn/web/css/display/index.md
index 755d967a790c9b..0d2432889bf517 100644
--- a/files/zh-cn/web/css/display/index.md
+++ b/files/zh-cn/web/css/display/index.md
@@ -292,20 +292,20 @@ display: unset;
 
 ### display: none
 
-在一个元素中使用 `display` 的值为 `none` 将会从[无障碍树中](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍_api)移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。
+在一个元素中使用 `display` 的值为 `none` 将会从[无障碍树中](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍_api)移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。
 
 如果你想要从视觉上隐藏元素，一个更好的替代方案是使用[属性的组合](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link)将其直观地从屏幕删除，但是通过屏幕阅读器等辅助技术依然可以解析。
 
 ### display: contents
 
-当前在大多数浏览器的实现是将任意 `display` 值为 `contents` 的元素从[无障碍树中](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍_api)移除（但是保留后代元素）。这将导致该元素自身不再通过屏幕阅读器技术展示。根据 [CSS 规范](https://drafts.csswg.org/css-display/#valdef-display-contents)，这是错误的行为。
+当前在大多数浏览器的实现是将任意 `display` 值为 `contents` 的元素从[无障碍树](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍_api)中移除（但是保留后代元素）。这将导致该元素自身不再通过屏幕阅读器技术展示。根据 [CSS 规范](https://drafts.csswg.org/css-display/#valdef-display-contents)，这是错误的行为。
 
 - [更多带有 display: contents 的无障碍标记 | Hidde de Vries](https://hidde.blog/more-accessible-markup-with-display-contents/)
 - [Display: 内容不是 CSS 重置 | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
 
 ### 表格
 
-有些浏览器，将 {{HTMLElement("table")}} 元素的 `display` 值改为 `block`、`grid` 或 `flex`，这将改变它在[无障碍树](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍_api)中的显示。这将导致表格不再通过屏幕阅读技术展示。
+有些浏览器，将 {{HTMLElement("table")}} 元素的 `display` 值改为 `block`、`grid` 或 `flex`，这将改变它在[无障碍树](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍_api)中的显示。这将导致表格不再通过屏幕阅读技术展示。
 
 - [关于 CSS display 属性对表格语义的影响的简短说明——The Paciello Group](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/)
 - [隐藏内容以获得更好的无障碍 | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
diff --git a/files/zh-cn/web/css/specificity/index.md b/files/zh-cn/web/css/specificity/index.md
index 3b59d6f4153edc..4ba064b7584551 100644
--- a/files/zh-cn/web/css/specificity/index.md
+++ b/files/zh-cn/web/css/specificity/index.md
@@ -28,7 +28,7 @@ slug: Web/CSS/Specificity
 
 **通配选择器**（universal selector）（{{CSSxRef("Universal_selectors", "*")}}）**关系选择器**（combinator）（{{CSSxRef("Next-sibling_combinator", "+")}}、{{CSSxRef("Child_combinator", "&gt;")}}、{{CSSxRef("Subsequent-sibling_combinator", "~")}}、[" "](/zh-CN/docs/Web/CSS/Descendant_combinator)、{{CSSxRef("Column_combinator", "||")}}）和 **否定伪类**（negation pseudo-class）（{{CSSxRef(":not", ":not()")}}）对优先级没有影响。（但是，在 `:not()` 内部声明的选择器会影响优先级）。
 
-你可以访问[层叠与继承中的“优先级”](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级_2)或者 [https://specifishity.com](https://specifishity.com/) 来了解更多关于优先级的详细信息。
+你可以访问[层叠与继承中的“优先级”](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#优先级_2)或者 [https://specifishity.com](https://specifishity.com/) 来了解更多关于优先级的详细信息。
 
 给元素添加的**内联样式**（例如，`style="font-weight:bold"`）总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。
 
diff --git a/files/zh-cn/web/css/visibility/index.md b/files/zh-cn/web/css/visibility/index.md
index 3b68c342722ed3..db4f2660aa10e3 100644
--- a/files/zh-cn/web/css/visibility/index.md
+++ b/files/zh-cn/web/css/visibility/index.md
@@ -45,7 +45,7 @@ visibility: unset;
 
 ## 无障碍考虑
 
-将元素的 `visibility` 的值设置为 `hidden` 会将其从[可访问性树](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#accessibility_api)中移除。这将导致元素及其所有子元素不再被屏幕阅读器所读取。
+将元素的 `visibility` 的值设置为 `hidden` 会将其从[可访问性树](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍_api)中移除。这将导致元素及其所有子元素不再被屏幕阅读器所读取。
 
 ## 插值
 
diff --git a/files/zh-cn/web/events/event_handlers/index.md b/files/zh-cn/web/events/event_handlers/index.md
index 918afe3182f232..7056b7af9eee87 100644
--- a/files/zh-cn/web/events/event_handlers/index.md
+++ b/files/zh-cn/web/events/event_handlers/index.md
@@ -18,7 +18,7 @@ slug: Web/Events/Event_handlers
 有两种推荐的注册处理器的方法。可以将事件处理器代码赋值给目标元素对应的 _onevent_ 属性，或使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 方法将处理器注册为元素的监听器，从而在事件触发时运行事件处理器的代码。无论哪种情况，处理器都将接收一个符合 [`Event` 接口](/zh-CN/docs/Web/API/Event)的对象。主要区别在于可以使用事件监听器方法添加（或删除）多个事件处理器。
 
 > [!WARNING]
-> 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅[内联事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#内联事件处理器——不要使用)。
+> 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅[内联事件处理器](/zh-CN/docs/Learn_web_development/Core/Scripting/Events#内联事件处理器——不要使用)。
 
 ### 使用 onevent 属性
 
diff --git a/files/zh-cn/web/html/attributes/multiple/index.md b/files/zh-cn/web/html/attributes/multiple/index.md
index e218a799a87438..78d399c3230a94 100644
--- a/files/zh-cn/web/html/attributes/multiple/index.md
+++ b/files/zh-cn/web/html/attributes/multiple/index.md
@@ -120,7 +120,7 @@ input:invalid {
 
 请注意设置了 `multiple` 的示例与未设置 `file` 的其他输入在外观上的区别。
 
-提交表单时，如果我们使用 [`method="get"`](/zh-CN/docs/Web/HTML/Element/form)，每个选定文件的名称都会以 `?uploads=img1.jpg&uploads=img2.svg` 的形式添加到 URL 参数中。但是，由于我们提交的是多部分表单数据，因此必须使用 post。更多信息请参阅 {{htmlelement('form')}} 元素和[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data#method_属性)。
+提交表单时，如果我们使用 [`method="get"`](/zh-CN/docs/Web/HTML/Element/form)，每个选定文件的名称都会以 `?uploads=img1.jpg&uploads=img2.svg` 的形式添加到 URL 参数中。但是，由于我们提交的是多部分表单数据，因此必须使用 post。更多信息请参阅 {{htmlelement('form')}} 元素和[发送表单数据](/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data#method_属性)。
 
 ### select 元素
 
diff --git a/files/zh-cn/web/html/attributes/pattern/index.md b/files/zh-cn/web/html/attributes/pattern/index.md
index aae1d825992f80..89d2ca166972dc 100644
--- a/files/zh-cn/web/html/attributes/pattern/index.md
+++ b/files/zh-cn/web/html/attributes/pattern/index.md
@@ -84,7 +84,7 @@ input:invalid {
 
 ### 指定一种模式
 
-你可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性来指定一个正则表达式，输入的值必须与之匹配，才能被视为有效（参见[根据正则表达式进行验证](/zh-CN/docs/Learn/Forms/Form_validation#使用正则表达式校验)了解关于使用正则表达式来验证输入的简单速成课程）。
+你可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性来指定一个正则表达式，输入的值必须与之匹配，才能被视为有效（参见[根据正则表达式进行验证](/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation#使用正则表达式校验)了解关于使用正则表达式来验证输入的简单速成课程）。
 
 下面的例子将值限制为 4-8 个字符，并要求它只包含小写字母。
 
diff --git a/files/zh-cn/web/html/element/a/index.md b/files/zh-cn/web/html/element/a/index.md
index c525a34216f454..39f83b05e6928e 100644
--- a/files/zh-cn/web/html/element/a/index.md
+++ b/files/zh-cn/web/html/element/a/index.md
@@ -171,7 +171,7 @@ a {
 
 {{EmbedLiveSample('链接到 email 地址')}}
 
-有关 `mailto:` URL 协议的更多细节，比如如何包含主题、正文，或其他预定内容，参考 [Email 链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#email_链接)或 {{RFC(6068)}}。
+有关 `mailto:` URL 协议的更多细节，比如如何包含主题、正文，或其他预定内容，参考 [Email 链接](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links#email_链接)或 {{RFC(6068)}}。
 
 ### 链接到电话号码
 
diff --git a/files/zh-cn/web/html/element/abbr/index.md b/files/zh-cn/web/html/element/abbr/index.md
index f578f2e3961920..beab84a9659f86 100644
--- a/files/zh-cn/web/html/element/abbr/index.md
+++ b/files/zh-cn/web/html/element/abbr/index.md
@@ -202,4 +202,4 @@ abbr {
 
 ## 参见
 
-- [使用 `<abbr>` 元素](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#缩略语)
+- [使用 `<abbr>` 元素](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#缩略语)
diff --git a/files/zh-cn/web/html/element/footer/index.md b/files/zh-cn/web/html/element/footer/index.md
index 5a753c7437c132..cc1f29f82ccbbd 100644
--- a/files/zh-cn/web/html/element/footer/index.md
+++ b/files/zh-cn/web/html/element/footer/index.md
@@ -51,7 +51,7 @@ footer {
 
 ## 无障碍考虑
 
-在 Safari 13 发布之前，`contentinfo` [地标角色](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks)无法通过 [VoiceOver](https://help.apple.com/voiceover/info/guide/) 正确显示。如果需要支持传统的 Safari 浏览器，请在 `footer` 元素中添加 `role="contentinfo"` 以确保正确显示地标。
+在 Safari 13 发布之前，`contentinfo` [地标角色](/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics#路牌地标)无法通过 [VoiceOver](https://help.apple.com/voiceover/info/guide/) 正确显示。如果需要支持传统的 Safari 浏览器，请在 `footer` 元素中添加 `role="contentinfo"` 以确保正确显示地标。
 
 - 相关：[WebKit Bugzilla: 146930 - AX：HTML 原生元素（页眉、页脚、主页、旁页、导航）应与 ARIA 地标一样工作，但有时却不一样](https://webkit.org/b/146930)
 
diff --git a/files/zh-cn/web/html/element/input/date/index.md b/files/zh-cn/web/html/element/input/date/index.md
index 64be4b0fa0b65e..fb81038b702bc2 100644
--- a/files/zh-cn/web/html/element/input/date/index.md
+++ b/files/zh-cn/web/html/element/input/date/index.md
@@ -467,6 +467,6 @@ daySelect.onchange = () => {
 ## 参见
 
 - 通用的 {{HTMLElement("input")}} 元素和用于操作该元素的接口 {{domxref("HTMLInputElement")}}
-- [日期时间选择器教程](/zh-CN/docs/Learn/Forms/HTML5_input_types#日期和时间选择器)
+- [日期时间选择器教程](/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types#日期和时间选择器)
 - [HTML 中使用的日期和时间格式](/zh-CN/docs/Web/HTML/Date_and_time_formats)
 - [表单控件 CSS 兼容性列表](/zh-CN/docs/Learn_web_development/Extensions/Forms)
diff --git a/files/zh-cn/web/html/element/input/datetime-local/index.md b/files/zh-cn/web/html/element/input/datetime-local/index.md
index 84703d42b0ba24..1147de0286e6b3 100644
--- a/files/zh-cn/web/html/element/input/datetime-local/index.md
+++ b/files/zh-cn/web/html/element/input/datetime-local/index.md
@@ -616,4 +616,4 @@ daySelect.onchange = () => {
 
 - 通用 {{HTMLElement("input")}} 元素以及操作它的接口 {{domxref("HTMLInputElement")}}
 - [`<input type="date">`](/zh-CN/docs/Web/HTML/Element/input/date) 和 [`<input type="time">`](/zh-CN/docs/Web/HTML/Element/input/time)
-- [日期和时间选择器教程](/zh-CN/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker)
+- [日期和时间选择器教程](/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#date_and_time_picker)
diff --git a/files/zh-cn/web/html/element/input/hidden/index.md b/files/zh-cn/web/html/element/input/hidden/index.md
index 6359674c916858..d0212d9a0b6115 100644
--- a/files/zh-cn/web/html/element/input/hidden/index.md
+++ b/files/zh-cn/web/html/element/input/hidden/index.md
@@ -73,7 +73,7 @@ slug: Web/HTML/Element/input/hidden
 
 隐藏输入表单还用于存储和提交安全令牌或机密信息，以提高网站的安全性。基本思路是，如果用户正在填写敏感的表单，例如在银行网站上将某笔款项转入另一个账户的表格，所提供的机密信息将证明他们的身份是真实的，并且使用了正确的表单来提交转账请求。
 
-这将阻止恶意用户创建伪造的表单，伪装成银行，然后通过电子邮件将表单发送给毫无戒备心的用户，以诱骗他们将钱转入错误的位置。这种攻击称为[跨站点请求伪造（CSRF）](/zh-CN/docs/Learn/Server-side/First_steps/Website_security#跨站请求伪造_csrf)；几乎任何知名的服务器端框架都使用隐藏机密来防止此类攻击。
+这将阻止恶意用户创建伪造的表单，伪装成银行，然后通过电子邮件将表单发送给毫无戒备心的用户，以诱骗他们将钱转入错误的位置。这种攻击称为[跨站点请求伪造（CSRF）](/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#跨站请求伪造_csrf)；几乎任何知名的服务器端框架都使用隐藏机密来防止此类攻击。
 
 > [!NOTE]
 > 如前所述，将密钥放置在隐藏的输入中并不能使其固有安全性。密钥的组成和编码已经可以做到这一点。隐藏输入的值是保持它与数据关联性，并在将表单发送到服务器时自动将其包含在内。你需要使用精心设计的密钥来真正保护你的网站。
diff --git a/files/zh-cn/web/html/element/input/index.md b/files/zh-cn/web/html/element/input/index.md
index 03d30365e24f23..026f0839830905 100644
--- a/files/zh-cn/web/html/element/input/index.md
+++ b/files/zh-cn/web/html/element/input/index.md
@@ -1035,7 +1035,7 @@ function validate(input) {
 
 #### 自定义验证错误示例
 
-如果你想在一个字段验证失败时显示一个自定义的错误信息，你需要使用[约束验证 API](/zh-CN/docs/Learn/Forms/Form_validation#使用_javascript_校验表单)，在 `<input>`（及相关）元素上可用。以下面的表格为例：
+如果你想在一个字段验证失败时显示一个自定义的错误信息，你需要使用[约束验证 API](/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation#使用_javascript_校验表单)，在 `<input>`（及相关）元素上可用。以下面的表格为例：
 
 ```html
 <form>
diff --git a/files/zh-cn/web/html/element/input/month/index.md b/files/zh-cn/web/html/element/input/month/index.md
index af92151c5481df..5f975e6178b6d6 100644
--- a/files/zh-cn/web/html/element/input/month/index.md
+++ b/files/zh-cn/web/html/element/input/month/index.md
@@ -456,6 +456,6 @@ function populateYears() {
 
 - 通用 {{HTMLElement("input")}} 元素和用于操作该元素的接口 {{domxref("HTMLInputElement")}}
 - [HTML 中使用的日期和时间格式](/zh-CN/docs/Web/HTML/Date_and_time_formats)
-- [日期时间选择器教程](/zh-CN/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker)
+- [日期时间选择器教程](/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#date_and_time_picker)
 - [`<input type="datetime-local">`](/zh-CN/docs/Web/HTML/Element/input/datetime-local)、[`<input type="date">`](/zh-CN/docs/Web/HTML/Element/input/date)、[`<input type="time">`](/zh-CN/docs/Web/HTML/Element/input/time) 和 [`<input type="week">`](/zh-CN/docs/Web/HTML/Element/input/week)
 - [表单控件 CSS 兼容性列表](/zh-CN/docs/Learn_web_development/Extensions/Forms)
diff --git a/files/zh-cn/web/html/element/input/reset/index.md b/files/zh-cn/web/html/element/input/reset/index.md
index 13f6cfcd67b8b1..9183ee8f410444 100644
--- a/files/zh-cn/web/html/element/input/reset/index.md
+++ b/files/zh-cn/web/html/element/input/reset/index.md
@@ -143,7 +143,7 @@ slug: Web/HTML/Element/input/reset
 ## 参见
 
 - {{HTMLElement("input")}} 和 {{domxref("HTMLInputElement")}} 实现接口
-- [表单和按钮](/zh-CN/docs/Learn/Forms/Basic_native_form_controls#按钮)
+- [表单和按钮](/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#按钮)
 - [HTML 表单](/zh-CN/docs/Learn_web_development/Extensions/Forms)
 - {{HTMLElement("button")}} 元素
 - [表单控件 CSS 兼容性列表](/zh-CN/docs/Learn_web_development/Extensions/Forms)
diff --git a/files/zh-cn/web/html/element/input/search/index.md b/files/zh-cn/web/html/element/input/search/index.md
index 9ea17693feab76..21f41a04708b3e 100644
--- a/files/zh-cn/web/html/element/input/search/index.md
+++ b/files/zh-cn/web/html/element/input/search/index.md
@@ -232,7 +232,7 @@ Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 <k
 与上一个示例没有视觉上的区别，但是屏幕阅读器用户可以获得更多可用信息。
 
 > [!NOTE]
-> 有关此类辅助功能的更多信息，请参见 [Signposts/Landmarks](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) 。
+> 有关此类辅助功能的更多信息，请参见[路牌/地标](/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics#路牌地标) 。
 
 ### 输入框元素物理大小
 
@@ -381,7 +381,7 @@ input:valid ~ span::after {
 
 ### 指定模式
 
-你可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性指定一个正则表达式，输入值必须遵循该正则表达式才能被视为有效（请参照[使用正则表达式进行验证](/zh-CN/docs/Learn/Forms/Form_validation#使用正则表达式校验)）。
+你可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性指定一个正则表达式，输入值必须遵循该正则表达式才能被视为有效（请参照[使用正则表达式进行验证](/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation#使用正则表达式校验)）。
 
 让我们看一个例子。假设我们想提供一个产品 ID 搜索表格，这些 ID 都是由两个字母和四个数字组成的代码。以下示例对此进行了介绍：
 
diff --git a/files/zh-cn/web/html/element/input/submit/index.md b/files/zh-cn/web/html/element/input/submit/index.md
index 6ffd14b5c2a8cb..f6824e59d3bbd6 100644
--- a/files/zh-cn/web/html/element/input/submit/index.md
+++ b/files/zh-cn/web/html/element/input/submit/index.md
@@ -207,7 +207,7 @@ slug: Web/HTML/Element/input/submit
 ## 参见
 
 - {{HTMLElement("input")}} 元素和实现它的 {{domxref("HTMLInputElement")}} 接口。
-- [表单与按钮](/zh-CN/docs/Learn/Forms/Basic_native_form_controls#actual_buttons)
+- [表单与按钮](/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#按钮)
 - [HTML 表单](/zh-CN/docs/Learn_web_development/Extensions/Forms)
 - {{HTMLElement("button")}} 元素
 - [CSS 属性兼容性列表](/zh-CN/docs/Learn_web_development/Extensions/Forms)
diff --git a/files/zh-cn/web/html/element/input/text/index.md b/files/zh-cn/web/html/element/input/text/index.md
index 58882b6769fa5a..80739408fa1915 100644
--- a/files/zh-cn/web/html/element/input/text/index.md
+++ b/files/zh-cn/web/html/element/input/text/index.md
@@ -341,7 +341,7 @@ input:valid + span::after {
 
 ### 指定模式
 
-可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性指定输入值必须匹配才能被认为是有效的正则表达式（请参照[以正则表达式验证](/zh-CN/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression)）。
+可以使用 [`pattern`](/zh-CN/docs/Web/HTML/Element/input#pattern) 属性指定输入值必须匹配才能被认为是有效的正则表达式（请参照[使用正则表达式校验](/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation#使用正则表达式校验)）。
 
 下面的示例将值限制为 4-8 个字符，并要求该值仅包含小写字母。
 
diff --git a/files/zh-cn/web/html/element/input/time/index.md b/files/zh-cn/web/html/element/input/time/index.md
index 64f3bf6b767c85..0bcc59b2e20985 100644
--- a/files/zh-cn/web/html/element/input/time/index.md
+++ b/files/zh-cn/web/html/element/input/time/index.md
@@ -546,6 +546,6 @@ minuteSelect.onchange = setMinutesToZero;
 
 - 通用 {{HTMLElement("input")}} 元素和用于操作该元素的接口 {{domxref("HTMLInputElement")}}
 - [HTML 中使用的日期和时间格式](/zh-CN/docs/Web/HTML/Date_and_time_formats)
-- [日期时间选择器教程](/zh-CN/docs/Learn/Forms/HTML5_input_types#日期和时间选择器)
+- [日期时间选择器教程](/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types#日期和时间选择器)
 - [`<input type="datetime-local">`](/zh-CN/docs/Web/HTML/Element/input/datetime-local)、[`<input type="date">`](/zh-CN/docs/Web/HTML/Element/input/date)、[`<input type="week">`](/zh-CN/docs/Web/HTML/Element/input/week) 和 [`<input type="month">`](/zh-CN/docs/Web/HTML/Element/input/month)
 - [表单控件 CSS 兼容性列表](/zh-CN/docs/Learn_web_development/Extensions/Forms)
diff --git a/files/zh-cn/web/html/element/meta/index.md b/files/zh-cn/web/html/element/meta/index.md
index 95006af631bf9b..77a0821cf15064 100644
--- a/files/zh-cn/web/html/element/meta/index.md
+++ b/files/zh-cn/web/html/element/meta/index.md
@@ -155,5 +155,5 @@ slug: Web/HTML/Element/meta
 ## 参见
 
 - [标准元数据名称](/zh-CN/docs/Web/HTML/Element/meta/name)
-- [学习：`<meta>`](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_the_meta_element)
+- [学习：`<meta>`](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#元数据：meta_元素)
 - [viewport 元标签](/zh-CN/docs/Web/HTML/Viewport_meta_tag)
diff --git a/files/zh-cn/web/html/element/table/index.md b/files/zh-cn/web/html/element/table/index.md
index c98046b25a4f58..d5aa41e640ed36 100644
--- a/files/zh-cn/web/html/element/table/index.md
+++ b/files/zh-cn/web/html/element/table/index.md
@@ -608,7 +608,7 @@ tr:last-child td {
 
 这有助于借助辅助技术（如屏幕阅读器）进行导航的人、经历低视力状况的人和有认知问题的人。
 
-- [MDN：使用 \<caption> 元素为表格添加标题](/zh-CN/docs/Learn/HTML/Tables/Advanced#使用_caption_为你的表格增加一个标题)
+- [MDN：使用 \<caption> 元素为表格添加标题](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#使用_caption_为你的表格增加一个标题)
 - [标题和总结 • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/caption-summary/)
 
 ### 确定行和列的范围
@@ -647,7 +647,7 @@ tr:last-child td {
 
 在 {{HTMLElement("th")}} 元素上提供声明 `scope="col"`，将有助于描述该单元格处于一列的顶部。在 {{HTMLElement("th")}} 元素上提供声明 `scope="row"`，将有助于描述该单元格是某一行的第一个。
 
-- [MDN：对于视力受损用户的表格](/zh-CN/docs/Learn/HTML/Tables/Advanced#对于视力受损的用户的表格)
+- [MDN：对于视力受损用户的表格](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#对于视力受损的用户的表格)
 - [有两个头部的表格 • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/two-headers/)
 - [有不标准头部的表格 • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/irregular/)
 - [H63: 使用范围属性来关联数据表中的标题单元和数据单元 | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H63.html)
@@ -660,7 +660,7 @@ tr:last-child td {
 
 如果表格不能被拆开，使用 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id) 和 [`headers`](/zh-CN/docs/Web/HTML/Element/td#headers) 属性的组合，以编程方式将每个表格单元与该单元所关联的标题相关联。
 
-- [MDN：对于视力受损用户的表格](/zh-CN/docs/Learn/HTML/Tables/Advanced#对于视力受损的用户的表格)
+- [MDN：对于视力受损用户的表格](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#对于视力受损的用户的表格)
 - [有多级头部的表格 • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/multi-level/)
 - [H43: 使用 id 和 headers 属性将数据单元与数据表中的标题单元联系起来 | Techniques for W3C WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H43.html)
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
index 723f264a1fd24e..f1b04f4db4ec38 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
@@ -378,7 +378,7 @@ f("a", "b"); // 'a+b'
 本节提供一些 JavaScript 中常见的数组操作示例。
 
 > [!NOTE]
-> 如果你还不熟悉数组的基础知识，可以考虑先读一下 [JavaScript 第一步：数组](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays)，它解释了[数组是什么](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays#数组是什么？)，还包括其他常见的数组操作示例。
+> 如果你还不熟悉数组的基础知识，可以考虑先读一下 [JavaScript 第一步：数组](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays)，它解释了[数组是什么](/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays#数组是什么？)，还包括其他常见的数组操作示例。
 
 ### 创建数组
 
diff --git a/files/zh-cn/web/javascript/reference/statements/while/index.md b/files/zh-cn/web/javascript/reference/statements/while/index.md
index bc391b9567569c..d2d7345d59ced4 100644
--- a/files/zh-cn/web/javascript/reference/statements/while/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/while/index.md
@@ -84,7 +84,7 @@ while (currentNode = iterator.nextNode()) {
 
 这行代码的问题在于：条件通常使用[比较运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#比较运算符)，比如 `===`，但是这行代码中的 `=` 不是比较运算符，而是一个[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#赋值运算符)。所以，这个 `=` *看起来像*是 `===` 的拼写错误，尽管实际上它并*不是*拼写错误。
 
-因此，在这种情况下，一些[代码检查工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain#代码检查工具)（如 ESLint 的 `no-cond-assign` 规则）会报告警告，以帮助你捕捉可能的拼写错误，以便你可以进行修正。警告可能会类似于以下内容：
+因此，在这种情况下，一些[代码检查工具](/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain#代码检查工具)（如 ESLint 的 `no-cond-assign` 规则）会报告警告，以帮助你捕捉可能的拼写错误，以便你可以进行修正。警告可能会类似于以下内容：
 
 > Expected a conditional expression and instead saw an assignment.
 
diff --git a/files/zh-cn/web/javascript/reference/template_literals/index.md b/files/zh-cn/web/javascript/reference/template_literals/index.md
index 1e210fcd61b205..08b13feaf14e25 100644
--- a/files/zh-cn/web/javascript/reference/template_literals/index.md
+++ b/files/zh-cn/web/javascript/reference/template_literals/index.md
@@ -73,7 +73,7 @@ string text line 2`);
 
 ### 字符串插值
 
-如果没有模板字面量，当你想组合表达式的输出与字符串时，可以使用[加法运算符 `+`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Addition) [连接它们](/zh-CN/docs/Learn/JavaScript/First_steps/Strings#连接字符串)：
+如果没有模板字面量，当你想组合表达式的输出与字符串时，可以使用[加法运算符 `+`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Addition) [连接它们](/zh-CN/docs/Learn_web_development/Core/Scripting/Strings#连接字符串)：
 
 ```js
 const a = 5;
diff --git a/files/zh-cn/web/mathml/guides/fractions_and_roots/index.md b/files/zh-cn/web/mathml/guides/fractions_and_roots/index.md
index 9b1296662ee5d8..7d9c45a0095524 100644
--- a/files/zh-cn/web/mathml/guides/fractions_and_roots/index.md
+++ b/files/zh-cn/web/mathml/guides/fractions_and_roots/index.md
@@ -70,7 +70,7 @@ original_slug: Learn/MathML/First_steps/Fractions_and_roots
 ![mfrac、msqrt 和 mroot 的屏幕截图](mfrac-msqrt-mroot.png)
 
 - 我们知道 `<mfrac>` 元素被渲染为一个分数：第一个子元素（分子）被绘制于第二个子元素（分母）的上方，并由一条水平线分隔。
-- `<msqrt>` 被渲染为一个平方根：其子元素呈现为一个 [`<mrow>`](/zh-CN/docs/Learn/MathML/First_steps/Getting_started#使用_mrow_元素进行分组)，前缀为根号√，并完全被一条横线覆盖。
+- `<msqrt>` 被渲染为一个平方根：其子元素呈现为一个 [`<mrow>`](/zh-CN/docs/Web/MathML/Guides/Getting_started#使用_mrow_元素进行分组)，前缀为根号√，并完全被一条横线覆盖。
 - 最后，`<mroot>` 元素被渲染为一个 n 次方根：第一个元素被根号符号覆盖，而第二个元素被用作根的次数，并作为前缀上标呈现。
 
 ### 主动练习：内嵌不同元素
diff --git a/files/zh-cn/web/mathml/guides/scripts/index.md b/files/zh-cn/web/mathml/guides/scripts/index.md
index 68fb96ad32aaed..9c82c22f32213f 100644
--- a/files/zh-cn/web/mathml/guides/scripts/index.md
+++ b/files/zh-cn/web/mathml/guides/scripts/index.md
@@ -257,7 +257,7 @@ document.getElementById("clearOutput").addEventListener("click", () => {
 
 ## 其他运算符属性
 
-我们之前已经了解了 `<mo>` 元素的一些[属性](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了附加符号元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习：识别附加符号元素)来实现这一点。
+我们之前已经了解了 `<mo>` 元素的一些[属性](/zh-CN/docs/Web/MathML/Guides/Text_containers#mo_的运算符属性)，包括在垂直方向上的拉伸和间距。现在有了附加符号元素，我们可以扩展该列表。我们将通过修改我们的[上一个示例](#主动学习：识别附加符号元素)来实现这一点。
 
 ### 在水平方向上的拉伸
 
@@ -361,14 +361,14 @@ math {
 
 {{EmbedLiveSample('在水平方向上的拉伸', 700, 200)}}
 
-可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators)，以覆盖 `<mrow>` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 `<munder>`、`<mover>` 或 `<munderover>` 元素中非伸展兄弟节点的宽度。
+可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Web/MathML/Guides/Text_containers#主动学习：可伸缩运算符)，以覆盖 `<mrow>` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 `<munder>`、`<mover>` 或 `<munderover>` 元素中非伸展兄弟节点的宽度。
 
 > [!NOTE]
 > 伸展适用于 `<munder>`、`<mover>` 或 `<munderover>` 元素的任何子元素，不仅仅是正下标或正上标。
 
 ### 大型运算符和极限
 
-到目前为止，我们的示例实际上是使用 [`display="block"`](/zh-CN/docs/Learn/MathML/First_steps/Getting_started#display_属性) 属性呈现的。让我们看一下同一个示例，在没有该属性的情况下渲染的效果：
+到目前为止，我们的示例实际上是使用 [`display="block"`](/zh-CN/docs/Web/MathML/Guides/Getting_started#display_属性) 属性呈现的。让我们看一下同一个示例，在没有该属性的情况下渲染的效果：
 
 ```html hidden
 <!doctype html>
diff --git a/files/zh-cn/web/mathml/guides/tables/index.md b/files/zh-cn/web/mathml/guides/tables/index.md
index c40347dbf2d5a7..cf90f32c281745 100644
--- a/files/zh-cn/web/mathml/guides/tables/index.md
+++ b/files/zh-cn/web/mathml/guides/tables/index.md
@@ -126,7 +126,7 @@ MathML 表格元素与 [HTML 表格](/zh-CN/docs/Learn_web_development/Core/Stru
 
 ## 允许单元格跨多行多列
 
-与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns)类似，`<mtd>` 元素具有 `columnspan` 和 `rowspan` 属性，以指示单元格跨多行和多列。下面的内部矩阵跨越外部矩阵的两列：
+与 [HTML 表格](/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics#允许单元格跨越多行和列)类似，`<mtd>` 元素具有 `columnspan` 和 `rowspan` 属性，以指示单元格跨多行和多列。下面的内部矩阵跨越外部矩阵的两列：
 
 ```html hidden
 <!doctype html>
diff --git a/files/zh-cn/web/mathml/guides/text_containers/index.md b/files/zh-cn/web/mathml/guides/text_containers/index.md
index 4fa147beb8390c..e8168cb54113be 100644
--- a/files/zh-cn/web/mathml/guides/text_containers/index.md
+++ b/files/zh-cn/web/mathml/guides/text_containers/index.md
@@ -44,7 +44,7 @@ original_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#指定文档中的字符编码)，并使用适当的 [Web 字体](/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts)。以下是一个使用 UTF-8 编码和 [Latin Modern Math](/zh-CN/docs/Web/MathML/Fonts#带有数学表的字体) 字体的基本模板：
+由于这些字符大多不属于基本拉丁 Unicode 块，因此建议指定你的[文档字符编码](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#指定文档中的字符编码)，并使用适当的 [Web 字体](/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts)。以下是一个使用 UTF-8 编码和 [Latin Modern Math](/zh-CN/docs/Web/MathML/Fonts#带有数学表的字体) 字体的基本模板：
 
 ```html
 <!doctype html>
diff --git a/files/zh-cn/web/media/formats/image_types/index.md b/files/zh-cn/web/media/formats/image_types/index.md
index db5f4ab50e6d17..99a2eef382adb6 100644
--- a/files/zh-cn/web/media/formats/image_types/index.md
+++ b/files/zh-cn/web/media/formats/image_types/index.md
@@ -556,7 +556,7 @@ GIF 是简单图像和动画的不错选择，不过将全彩图像转换为 GIF
 
 ### ICO（Microsoft Windows 图标）
 
-ICO（Microsoft Windows 图标）文件格式是微软为 Windows 系统的桌面图标而设计的。不过，早期版本的 Internet Explorer 允许网站在其根目录中提供名为 `favicon.ico` 的 ICO 文件，以指定一个 **[favicon](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#在你的站点增加自定义图标)**——一个显示在收藏夹菜单和其他对网站图标有用的地方的图标。
+ICO（Microsoft Windows 图标）文件格式是微软为 Windows 系统的桌面图标而设计的。不过，早期版本的 Internet Explorer 允许网站在其根目录中提供名为 `favicon.ico` 的 ICO 文件，以指定一个 **[favicon](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#在你的站点增加自定义图标)**——一个显示在收藏夹菜单和其他对网站图标有用的地方的图标。
 
 一个 ICO 文件可以包含多个图标，文件开头有一个目录，列出每个图标的详细信息。目录之后是图标的数据。每个图标的数据既可以是不带文件头的 [BMP](#bmp（位图文件）) 图像，也可以是完整的 [PNG](#png（便携式网络图形）) 图像（包括文件头）。如果使用 ICO 文件，则应使用 BMP 格式，因为直到 Windows Vista 才添加了对 ICO 文件内的 PNG 的支持，而且这种支持可能并不完善。
 
diff --git a/files/zh-cn/web/media/images/index.md b/files/zh-cn/web/media/images/index.md
index aa5bb0645d2e2e..4bfdb2f3dd472e 100644
--- a/files/zh-cn/web/media/images/index.md
+++ b/files/zh-cn/web/media/images/index.md
@@ -35,7 +35,7 @@ l10n:
 
 - [图片文件类型和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)
   - : 本指南介绍 web 浏览器通常支持的各种图像文件类型，包括它们各自的使用情况、功能和兼容性因素的详细信息。此外，本文还提供了针对特定情况选择最佳图像文件类型的指导。
-- [包含 `width` 和 `height` 属性以防止卡顿](/zh-CN/docs/Learn/Performance/Multimedia#渲染策略：在加载图像时避免卡顿)
+- [包含 `width` 和 `height` 属性以防止卡顿](/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia#渲染策略：在加载图像时避免卡顿)
   - : 这就改变了浏览器加载图像的方式，使浏览器可以在加载图像前就计算出图像的宽高比，然后再利用宽高比预留图像的显示尺寸。
 
 ## 其他主题
diff --git a/files/zh-cn/web/progressive_web_apps/guides/installing/index.md b/files/zh-cn/web/progressive_web_apps/guides/installing/index.md
index 0a41e48d375201..9e6c22dc964648 100644
--- a/files/zh-cn/web/progressive_web_apps/guides/installing/index.md
+++ b/files/zh-cn/web/progressive_web_apps/guides/installing/index.md
@@ -25,7 +25,7 @@ slug: Web/Progressive_web_apps/Guides/Installing
 
 ### 添加到主屏幕
 
-2007 年的 iPhone 开始，智能手机增加了“保存到主屏幕”的功能。对于普通（非 PWA）网站，此功能类似于书签，但它不是将页面的 favicon 和标题添加到书签菜单（这是浏览器功能），而是通过这种方式[添加图标](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_custom_icons_to_your_site)到操作系统的主屏幕。
+2007 年的 iPhone 开始，智能手机增加了“保存到主屏幕”的功能。对于普通（非 PWA）网站，此功能类似于书签，但它不是将页面的 favicon 和标题添加到书签菜单（这是浏览器功能），而是通过这种方式[添加图标](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#在你的站点增加自定义图标)到操作系统的主屏幕。
 
 将非 PWA 网站添加到主屏幕不会在设备上安装该网站。相反，它会将开发者定义的图标添加到主屏幕，当点击图标时，会在默认浏览器中打开该书签链接。
 
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md
index 259be683851206..e47a31da9eb92d 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md
@@ -320,7 +320,7 @@ li:nth-of-type(even) {
 
 ### 完成我们 PWA 的静态 HTML 和 CSS
 
-在继续之前，[注释](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started#html_comments)或者删除假的过去月经周期数据和标题：
+在继续之前，[注释](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#html_注释)或者删除假的过去月经周期数据和标题：
 
 ```html
 <section id="past-periods">
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md
index 58687f7d798767..3736ac4007dd9a 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md
@@ -115,7 +115,7 @@ function checkDatesInvalid(startDate, endDate) {
 
 我们使用 [Web 存储 API](/zh-CN/docs/Web/API/Web_Storage_API)，具体来说是 [window.localStorage](/zh-CN/docs/Web/API/Window/localStorage)，以字符串化的 JSON 对象形式存储开始日期和结束日期对。
 
-[LocalStorage](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage#存储简单数据_—_web_storage) 有一些局限性，但对我们的应用需求足够了。我们使用 localStorage 是为了让它简单且仅存储在客户端上。这意味着数据将只存储在单个设备上的单个浏览器上。清除浏览器数据也会失去所有存储在 local storage 的经期。对许多应用程序来说这可能看起来是一个局限，但对于这个应用程序来说，月经经期数据是个人的，并且使用此类应用程序的用户可能非常关心隐私。
+[LocalStorage](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#存储简单数据_—_web_storage) 有一些局限性，但对我们的应用需求足够了。我们使用 localStorage 是为了让它简单且仅存储在客户端上。这意味着数据将只存储在单个设备上的单个浏览器上。清除浏览器数据也会失去所有存储在 local storage 的经期。对许多应用程序来说这可能看起来是一个局限，但对于这个应用程序来说，月经经期数据是个人的，并且使用此类应用程序的用户可能非常关心隐私。
 
 对于更健壮的应用程序，其他[客户端存储](/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage)选项比如 [IndexDB](/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB)（IDB）和后面讨论的 service worker 具有更好的性能。
 
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
index 9b4573659b0ec4..f15d2c3dfbfc56 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
@@ -132,7 +132,7 @@ PWA 图标帮助用户识别你的应用程序，使其更具视觉吸引力，
 
 所有图标都应该有相同的外观和感觉，以确保用户可以识别你的 PWA。但图标越大，它可以包含的细节就越丰富。尽管所有图标文件都是正方形的，但有些操作系统会以不同的形状渲染图标，裁剪部分区域或“遮挡”图标以适应 UI，或者如果图标不可遮挡则会缩小并居中放置在背景上。[安全区域](/zh-CN/docs/Web/Progressive_web_apps/How_to/Define_app_icons#支持遮挡)，即图标被遮挡为圆形时也会正常渲染的内部 80% 区域。通过将 `purpose` 成员设置为 `maskable`，可以将图标定义为[自适应图标](https://web.developers.google.cn/articles/maskable-icon)。
 
-在 Safari 以及 iOS 和 iPadOS 中，如果通过 {{HTMLElement("link")}} 在 HTML 文档的 {{HTMLElement("head")}} 中包含[非标准的 `apple-touch-icon`](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#在你的站点增加自定义图标)，它们会优先于清单中声明的图标。
+在 Safari 以及 iOS 和 iPadOS 中，如果通过 {{HTMLElement("link")}} 在 HTML 文档的 {{HTMLElement("head")}} 中包含[非标准的 `apple-touch-icon`](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#在你的站点增加自定义图标)，它们会优先于清单中声明的图标。
 
 ### 任务
 
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
index 7986b33d0df97a..4912c47ae2807c 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
@@ -38,13 +38,13 @@ Service worker 以及 PWA，都[被限制在安全上下文中](/zh-CN/docs/Web/
 
 有几个 {{glossary("IDE")}} 扩展和特定编程语言的包可以通过单击或终端命令启动开发环境。你甚至可以启动多个本地服务器，每个使用不同的端口号。
 
-你可以使用 [VSCode 插件](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#使用文本编辑器的拓展)运行本地 HTTP 服务器，它可以在单个或不同端口上运行本地服务器。[VSCode](https://code.visualstudio.com/download) IDE 的 [Preview on Web Server 扩展](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server)在编辑器当前打开的目录的根目录下创建一个服务器，默认端口为 `8080`。VS Code 扩展是可配置的。`previewServer.port` 设置项是 web 服务器的端口号。可以编辑和更改扩展的默认设置 `8080`。默认情况下，在浏览器的 URL 栏中输入 `localhost:8080` 将加载该页面。
+你可以使用 [VSCode 插件](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server#使用文本编辑器的拓展)运行本地 HTTP 服务器，它可以在单个或不同端口上运行本地服务器。[VSCode](https://code.visualstudio.com/download) IDE 的 [Preview on Web Server 扩展](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server)在编辑器当前打开的目录的根目录下创建一个服务器，默认端口为 `8080`。VS Code 扩展是可配置的。`previewServer.port` 设置项是 web 服务器的端口号。可以编辑和更改扩展的默认设置 `8080`。默认情况下，在浏览器的 URL 栏中输入 `localhost:8080` 将加载该页面。
 
 请注意，Preview on Web Server 扩展使用 browserSync。当你的开发环境由此扩展启动时，`localhost:3001` 提供当前服务器环境的概述。
 
 你还可以[使用 IntelliJ IDE 创建本地服务器](https://www.jetbrains.com/help/idea/creating-local-server-configuration.html)，它搭载了一个[可配置的内置 PHP Web 服务器](https://www.jetbrains.com/help/idea/php-built-in-web-server.html#configuring-built-in-web-server)。
 
-了解如何使用 [Python](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#使用_python) 或本地服务器端语言（如 PHP）来[设置本地测试服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#在本地运行服务器端语言)。
+了解如何使用 [Python](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server#使用_python) 或本地服务器端语言（如 PHP）来[设置本地测试服务器](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server#在本地运行服务器端语言)。
 
 ## 使用 npx 的 localhost
 
@@ -73,7 +73,7 @@ ws --https
 
 为了获得 PWA 的额外特性，包括单击安装、独立 UI 和应用商店许可，它需要成为一个 PWA，这意味着它需要一个 service worker（这意味这我们需要安全连接）。为了分发你的应用程序，使别人能够查看、使用和安装你的 PWA，你最好在安全的*远程*服务器上托管你的内容并使其可访问。
 
-正式发布 PWA 时，你可能希望投资[域名和 Web 托管](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#托管)。对于开源项目，开发人员可以从代码库中学习，甚至为项目做出贡献，你可以在 [GitHub Pages](https://pages.github.com/) 上托管你的进度。
+正式发布 PWA 时，你可能希望投资[域名和 Web 托管](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#托管)。对于开源项目，开发人员可以从代码库中学习，甚至为项目做出贡献，你可以在 [GitHub Pages](https://pages.github.com/) 上托管你的进度。
 
 ## GitHub pages
 
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md
index f4ccf202c72cf1..6b4e8e084c7a79 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md
@@ -306,7 +306,7 @@ self.addEventListener("fetch", (event) => {
 
 现在我们的 service worker 脚本已经完成了，我们需要注册 service worker。
 
-我们先从使用检查全局 [`navigator`](/zh-CN/docs/Web/API/Navigator) 对象上是否存在 [`serviceWorker`](/zh-CN/docs/Web/API/ServiceWorker) 属性的[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#特性检测的概念)手段来检查浏览器是否支持 [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 开始：
+我们先从使用检查全局 [`navigator`](/zh-CN/docs/Web/API/Navigator) 对象上是否存在 [`serviceWorker`](/zh-CN/docs/Web/API/ServiceWorker) 属性的[特性检测](/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection#特性检测的概念)手段来检查浏览器是否支持 [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 开始：
 
 ```html
 <script>