mdn · yin1999 · Dec 21, 2024 · Dec 21, 2024 · Dec 21, 2024 · Dec 21, 2024
@@ -11,7 +11,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
 
 过程中的每一步都会有例子可供体验，让你更清晰的了解他的制作过程。你将学习到如何使用 canvas 标签的基本语法去实现简单游戏的渲染、动画、碰撞、控制胜负。
 
-为了更快速高效的学习本系列教程，你需要掌握 [JavaScript](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics) 的一些基础知识。学习完本教程之后你就可以创建自己的网页小游戏了。
+为了更快速高效的学习本系列教程，你需要掌握 [JavaScript](/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 的一些基础知识。学习完本教程之后你就可以创建自己的网页小游戏了。
 
 ![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](mdn-breakout-gameplay.png)
 

@@ -16,7 +16,7 @@ _无障碍_（Accessibility，缩写：**A11Y**）意味着让尽可能多的人
 ## 参见
 
 - [无障碍](/zh-CN/docs/Web/Accessibility)
-- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility)
 - [无障碍富互联网应用（ARIA）](/zh-CN/docs/Web/Accessibility/ARIA)
 - 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
 - W3C 上的 [Web 无障碍倡议（WAI）](https://www.w3.org/WAI/)

@@ -29,7 +29,7 @@ l10n:
 ## 参见
 
 - [无障碍](/zh-CN/docs/Web/Accessibility)
-- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility)
 - 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
 - [Web Accessibility In Mind](https://webaim.org/)
 - [无障碍富互联网应用（ARIA）](/zh-CN/docs/Web/Accessibility/ARIA)

@@ -41,7 +41,7 @@ l10n:
 
 - [无障碍名称与描述计算 1.2（accname）](https://w3c.github.io/accname/#mapping_additional_nd_description)
 - [无障碍](/zh-CN/docs/Web/Accessibility)
-- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility)
 - 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
 - [Web Accessibility In Mind](https://webaim.org/)
 - [ARIA](/zh-CN/docs/Web/Accessibility/ARIA)

@@ -31,7 +31,7 @@ l10n:
 - [ARIA 属性](/zh-CN/docs/Web/Accessibility/ARIA/Attributes)
 - [无障碍名称与描述计算 1.2（accname）](https://w3c.github.io/accname/#mapping_additional_nd_description)
 - [无障碍](/zh-CN/docs/Web/Accessibility)
-- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility)
 - 维基百科的 [Web 无障碍](https://zh.wikipedia.org/wiki/网站无障碍)
 - [Web Accessibility In Mind](https://webaim.org/)
 - [ARIA](/zh-CN/docs/Learn/Accessibility/ARIA)

@@ -14,5 +14,5 @@ l10n:
 ## 参见
 
 - {{cssxref("&lt;length&gt;")}}
-- [学习：CSS 取值和单位](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [学习：CSS 取值和单位](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
 - [TextMetrics API](/zh-CN/docs/Web/API/TextMetrics)
@@ -17,7 +17,7 @@ AJAX 可以用于创建{{Glossary("SPA", "单页应用")}}——那些使用 AJA
 
 ## 参见
 
-- [从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- [从服务器获取数据](/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests)
 - [Fetch API](/zh-CN/docs/Web/API/Fetch_API)
 - 相关术语：
   - {{Glossary("SPA", "单页应用")}}

@@ -18,7 +18,7 @@ l10n:
 ## 参见
 
 - [CSS 颜色](/zh-CN/docs/Web/CSS/CSS_colors)
-- [CSS 的值与单位](/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [CSS 的值与单位](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
 - [图像文件类型与格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)
 - 维基百科上的 [Alpha 合成](https://zh.wikipedia.org/wiki/Alpha合成)
 - 维基百科上的 [RGBA](https://zh.wikipedia.org/wiki/RGBA)

@@ -18,7 +18,7 @@ l10n:
 - [无障碍富互联网应用（WAI-ARIA）](https://w3c.github.io/aria/)
 - [ARIA 创作实践指南（APG）](https://www.w3.org/WAI/ARIA/apg/)
 - [无障碍](/zh-CN/docs/Web/Accessibility)
-- [学习无障碍](/zh-CN/docs/Learn/Accessibility)
+- [学习无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility)
 - 相关术语：
   - {{Glossary("Accessibility", "无障碍")}}
   - {{Glossary("WAI")}}
@@ -17,16 +17,16 @@ l10n:
 
 对人类来说，电子邮件就是一种异步通信方式；发送者发送了一封邮件，接着接收者会在方便时读取和回复该邮件，而不是马上这样做。双方可以继续随时发送和接收信息，而无需双方安排何时进行操作。
 
-在异步软件中，发出请求（例如向服务器），并在等待响应时不会阻塞其他进程。该软件可以继续执行其他任务。例如，在[基于 Promise 的 API](/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API) 中，会为长时间的操作创建 {{JSxRef("Promise")}} 对象。在操作完成后，Promise 会被处理。有了 Promise，软件不必等待操作的完成。
+在异步软件中，发出请求（例如向服务器），并在等待响应时不会阻塞其他进程。该软件可以继续执行其他任务。例如，在[基于 Promise 的 API](/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API) 中，会为长时间的操作创建 {{JSxRef("Promise")}} 对象。在操作完成后，Promise 会被处理。有了 Promise，软件不必等待操作的完成。
 
 ## 软件设计
 
 异步软件设计通过构建代码扩展了异步的概念，按照这种设计编写的代码使得程序能够要求一个任务与先前的一个（或多个）任务一起执行，而无需为了等待它们完成而停止执行。当后来的任务完成时，程序将使用约定好的机制通知先前的任务，以便让它知道任务已经完成，以及如果有结果存在的话，这个结果是可用的。
 
-还有许多用来实现异步软件的编程技术。查看文章[异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous) 来了解它们吧。
+还有许多用来实现异步软件的编程技术。查看文章[异步 JavaScript](/zh-CN/docs/Learn_web_development/Extensions/Async_JS) 来了解它们吧。
 
 ## 参见
 
-- [从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)（学习区）
+- [从服务器获取数据](/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests)（学习区）
 - 相关术语：
   - {{glossary("Synchronous", "同步")}}
@@ -41,7 +41,7 @@ l10n:
 
 ## 参见
 
-- [跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)
+- [跨浏览器测试](/zh-CN/docs/Learn_web_development/Extensions/Testing)
 - [web-platform-dx/web-features 仓库](https://github.com/web-platform-dx/web-features)
 - [W3C WebDX 社区小组](https://www.w3.org/community/webdx/)
 - [mdn/browser-compat-data 仓库](https://github.com/mdn/browser-compat-data)

@@ -11,7 +11,7 @@ l10n:
 
 ## 参见
 
-- [JavaScript 中的类](/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+- [JavaScript 中的类](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript)
 - [继承与原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
 - 维基百科上的[基于类编程](https://zh.wikipedia.org/wiki/基于类编程)
 - 维基百科上的[面向对象程序设计](https://zh.wikipedia.org/wiki/面向对象程序设计)
@@ -14,6 +14,6 @@ l10n:
 ## 参见
 
 - {{glossary("Control_flow", "控制流")}}
-- [在你的代码中决策——条件](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [在你的代码中决策——条件](/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals)
 - [JavaScript 中的控制流与错误捕获](/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
 - 维基百科上的[条件](<https://zh.wikipedia.org/wiki/條件_(編程)>)
@@ -31,5 +31,5 @@ var defaultReference = new Default();
 ## 参见
 
 - 维基百科上的[构造函数](https://zh.wikipedia.org/wiki/构造器)
-- MDN 上的 [JavaScript 面向对象编程中的构造函数](/zh-CN/docs/Learn/JavaScript/Objects)
+- MDN 上的 [JavaScript 面向对象编程中的构造函数](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects)
 - MDN 上的 [JavaScript 的 New 操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/new)
@@ -30,7 +30,7 @@ CSS 中的第一个“C”（Cascading）表示“层叠”，意为多个选择
 
 ## 参见
 
-- [学习 CSS](/zh-CN/docs/Learn/CSS)
+- [学习 CSS](/zh-CN/docs/Learn_web_development/Core/Styling_basics)
 - [CSS 文档](/zh-CN/docs/Web/CSS)
 - 维基百科上的 [CSS](https://zh.wikipedia.org/wiki/CSS)
 - [CSS 工作组的当前工作](https://www.w3.org/Style/CSS/current-work)
@@ -57,7 +57,7 @@ div.warning {
 
 ## 参见
 
-- 在 CSS 介绍中[学习更多 CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)
+- 在 CSS 介绍中[学习更多 CSS 选择器](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)
 - 基础选择器
 
   - [标签选择器](/zh-CN/docs/Web/CSS/Type_selectors) `elementname`

@@ -13,5 +13,5 @@ DNS 最突出的功能是将易于记忆的域名（例如 mozilla.org）翻译
 
 ## 参见
 
-- [理解域名](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
+- [理解域名](/zh-CN/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
 - 维基百科上的[域名系统](https://zh.wikipedia.org/wiki/域名系统)
@@ -12,4 +12,4 @@ l10n:
 ## 参见
 
 - 维基百科上的[域名](https://zh.wikipedia.org/wiki/域名)
-- [了解“域名”](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
+- [了解“域名”](/zh-CN/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
@@ -15,6 +15,6 @@ l10n:
 
 ## 参见
 
-- [开始学习 HTML](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+- [开始学习 HTML](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax)
 - [自定义元素](/zh-CN/docs/Web/API/Web_components/Using_custom_elements)
 - {{domxref("Element")}} 接口，在 DOM 中表示一个元素
@@ -13,5 +13,5 @@ l10n:
 
 ## 参见
 
-- [通过 FTP 上传文件的初学者教程](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)
+- [通过 FTP 上传文件的初学者教程](/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)
 - 维基百科上的[文件传输协议](https://zh.wikipedia.org/wiki/文件传输协议)
@@ -9,15 +9,15 @@ l10n:
 
 **优雅降级**（Graceful degradation）是一种设计理念，其核心是尝试构建可在最新浏览器中运行的现代网站/应用程序，而作为降级体验，在低版本浏览器中仍然提供必要的内容和功能。
 
-{{Glossary("Polyfill")}} 可用于使用 JavaScript 构建缺少的功能，但应尽可能提供样式和布局等功能的可接受替代方案，例如使用 CSS 层叠或 HTML 回退行为。在[处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)中可以找到一些很好的例子。
+{{Glossary("Polyfill")}} 可用于使用 JavaScript 构建缺少的功能，但应尽可能提供样式和布局等功能的可接受替代方案，例如使用 CSS 层叠或 HTML 回退行为。在[处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS)中可以找到一些很好的例子。
 
 这个技术很有用，因为它让 Web 开发者，在专注开发最强大的网站同时，和某些未知的用户代理，在访问网站时发生的问题间达到权衡。{{Glossary("Progressive enhancement", "渐进增强")}}与之相关而不同——通常被看做优雅降级的相反行为。实际上，这两种方法都是有效的，并且通常可以相互补充。
 
 ## 参见
 
 - 维基百科的[优雅降级](https://zh.wikipedia.org/wiki/优雅降级)
-- [处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
-- [实现特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+- [处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS)
+- [实现特性检测](/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection)
 - [术语](/zh-CN/docs/Glossary)
 
   - {{Glossary("Polyfill")}}

@@ -12,4 +12,4 @@ l10n:
 ## 参见
 
 - MDN 里的 {{htmlelement("head")}} 元素参考
-- MDN 学习区域里的 [HTML \<head>](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML)
+- MDN 学习区域里的 [HTML \<head>](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata)
@@ -28,7 +28,7 @@ HTML 文件通常会以 `.htm` 或 `.html` 为扩展名。用户可以从 {{Glos
 ## 参见
 
 - 维基百科上的 [HTML](https://zh.wikipedia.org/wiki/HTML)
-- [HTML 教程](/zh-CN/docs/Learn/HTML)
+- [HTML 教程](/zh-CN/docs/Learn_web_development/Core/Structuring_content)
 - [codecademy.com 上的在线教程](https://www.codecademy.com/en/tracks/web)
 - [MDN HTML 文档](/zh-CN/docs/Web/HTML)
 - [HTML 规范](https://www.w3.org/TR/html5/)
@@ -19,5 +19,5 @@ l10n:
 ## 参见
 
 - [HTML 文档](/zh-CN/docs/Web/HTML)
-- [HTML 新手学习教程](/zh-CN/docs/Learn/HTML)
+- [HTML 新手学习教程](/zh-CN/docs/Learn_web_development/Core/Structuring_content)
 - [Web API](/zh-CN/docs/Web/API)
@@ -12,7 +12,7 @@ l10n:
 ## 参见
 
 - 维基百科上的[超链接](https://zh.wikipedia.org/wiki/超連結)
-- MDN 上的[超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)教程
+- MDN 上的[超链接](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links)教程
 - [HTML 文档中的链接——W3C](https://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html)
 - [HTML a——超链接——W3C](https://w3c.github.io/html-reference/a.html)
 - [MDN 上的 `<a>`](/zh-CN/docs/Web/HTML/Element/a)

@@ -11,7 +11,7 @@ l10n:
 
 墨水溢出包括诸如 [box-shadow](/zh-CN/docs/Web/CSS/box-shadow)、[边框图片](/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders)、[文本装饰](/zh-CN/docs/Web/CSS/CSS_text_decoration)、[轮廓](/zh-CN/docs/Web/CSS/outline)等绘制效果的溢出，这些效果不会影响布局或扩展可滚动溢出区域。墨水溢出还包括字形的悬挂部分，例如超出 em 盒的升部和降部。
 
-由于[替换元素](/zh-CN/docs/Web/CSS/Replaced_element)始终建立一个独立的[格式化上下文](/zh-CN/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)，任何替换内容的溢出始终是墨水溢出（而非[可滚动溢出](/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content)）。
+由于[替换元素](/zh-CN/docs/Web/CSS/Replaced_element)始终建立一个独立的[格式化上下文](/zh-CN/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)，任何替换内容的溢出始终是墨水溢出（而非[可滚动溢出](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow)）。
 
 ## 参见
 

@@ -11,4 +11,4 @@ l10n:
 
 ## 参见
 
-- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)（给初学者的介绍）
+- [互联网是如何工作的](/zh-CN/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work)（给初学者的介绍）
@@ -7,7 +7,7 @@ l10n:
 
 {{GlossarySidebar}}
 
-在 CSS 中，元素的*固有尺寸*是指基于其内容的尺寸，不考虑它所在的上下文影响。例如，CSS [盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)属性应用的尺寸。元素的固有尺寸由其 {{cssxref("min-content")}} 和 {{cssxref("max-content")}} 尺寸表示。
+在 CSS 中，元素的*固有尺寸*是指基于其内容的尺寸，不考虑它所在的上下文影响。例如，CSS [盒模型](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model)属性应用的尺寸。元素的固有尺寸由其 {{cssxref("min-content")}} 和 {{cssxref("max-content")}} 尺寸表示。
 
 行级元素的尺寸是固有的：[尺寸](/zh-CN/docs/Web/CSS/CSS_box_sizing)和[盒](/zh-CN/docs/Web/CSS/CSS_box_model)属性，包括 {{cssxref("height")}}、{{cssxref("width")}}、{{cssxref("block-size")}}、{{cssxref("inline-size")}}、{{cssxref("padding-block")}} 和 {{cssxref("margin-block")}} 都对其没有影响（尽管 {{cssxref("margin-inline")}} 和 {{cssxref("padding-inline")}} 有影响）。
 

@@ -11,5 +11,5 @@ l10n:
 
 ## 参见
 
-- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)（给初学者的说明）
+- [互联网是如何工作的](/zh-CN/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work)（给初学者的说明）
 - 维基百科上的[互联网服务提供者](https://zh.wikipedia.org/wiki/互联网服务供应商)
@@ -13,7 +13,7 @@ l10n:
 
 ## 参见
 
-- [异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous)
+- [异步 JavaScript](/zh-CN/docs/Learn_web_development/Extensions/Async_JS)
 - [Web Worker API](/zh-CN/docs/Web/API/Web_Workers_API)
 - [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API)
 - [术语](/zh-CN/docs/Glossary)

@@ -17,5 +17,5 @@ l10n:
 
 - 维基百科上的[多媒体](https://zh.wikipedia.org/wiki/多媒体)
 - [网络媒体技术](/zh-CN/docs/Web/Media)：介绍了媒体在网络内容中的所有使用方式
-- MDN 学习区中的[多媒体和嵌入](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding)
+- MDN 学习区中的[多媒体和嵌入](/zh-CN/docs/Learn_web_development/Core/Structuring_content)
 - {{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素，用于在 {{Glossary("HTML")}} 文档中呈现媒体
@@ -15,7 +15,7 @@ l10n:
 
 - 维基百科上的[互联网媒体类型](https://zh.wikipedia.org/wiki/互联网媒体类型)
 - [MIME 类型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)
-- [正确配置服务器 MIME 类型](/zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types)
+- [正确配置服务器 MIME 类型](/zh-CN/docs/Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types)
 - 有关在 Web 环境中使用 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的详细信息。
 - [MIME 类型的不完整列表](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)
 - [MediaRecorder.mimeType](/zh-CN/docs/Web/API/MediaRecorder/mimeType)
@@ -14,5 +14,5 @@ l10n:
 ## 参见
 
 - 维基百科上的[面向对象程序设计](https://zh.wikipedia.org/wiki/面向对象程序设计)
-- [JavaScript 对象入门](/zh-CN/docs/Learn/JavaScript/Objects)
+- [JavaScript 对象入门](/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects)
 - [继承与原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,4 +11,4 @@ l10n:

		## 参见

		- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)（给初学者的介绍）
		- [互联网是如何工作的](/zh-CN/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work)（给初学者的介绍）