From 6d61eab66f59c4d5408288151c38d991ac1638fa Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 26 Jul 2024 12:04:52 +0000 Subject: [PATCH 001/623] build(deps): bump husky from 9.1.1 to 9.1.2 (#22624) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 229d25a89752b8..7dc2015db0be03 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "cld": "^2.9.1", "fdir": "^6.2.0", "front-matter": "^4.0.2", - "husky": "9.1.1", + "husky": "9.1.2", "lint-staged": "15.2.7", "markdown-it": "^14.1.0", "markdownlint-cli2": "0.13.0", diff --git a/yarn.lock b/yarn.lock index 2375b5e3517e0a..cb3411b58af416 100644 --- a/yarn.lock +++ b/yarn.lock @@ -411,10 +411,10 @@ human-signals@^5.0.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28" integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ== -husky@9.1.1: - version "9.1.1" - resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.1.tgz#73f8f1b58329f377654293148c1a6458f54ca224" - integrity sha512-fCqlqLXcBnXa/TJXmT93/A36tJsjdJkibQ1MuIiFyCCYUlpYpIaj2mv1w+3KR6Rzu1IC3slFTje5f6DUp2A2rg== +husky@9.1.2: + version "9.1.2" + resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.2.tgz#ddaf290384c7adab4fd3143571c73d05b19f42ee" + integrity sha512-1/aDMXZdhr1VdJJTLt6e7BipM0Jd9qkpubPiIplon1WmCeOy3nnzsCMeBqS9AsL5ioonl8F8y/F2CLOmk19/Pw== ignore@^5.2.4: version "5.2.4" From 7a4e02b36a07c91692678202d020099c7345effe Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 26 Jul 2024 20:05:41 +0800 Subject: [PATCH 002/623] zh-cn: fix the typo in `Array` (#22626) --- .../web/javascript/reference/global_objects/array/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4855785cf7eda3..2cd419e55220e9 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 @@ -97,7 +97,7 @@ colors.forEach((item, index) => { // 0：红 // 1：黄 // 2：蓝 -// 5：蓝 +// 5：紫 colors.reverse(); // ['紫', 空槽 × 2, '蓝', '黄', '红'] ``` From 2d338d1e57af1fb39db4bf0b6064e20d8c77295e Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Fri, 26 Jul 2024 20:09:17 +0800 Subject: [PATCH 003/623] chore(zh-cn): convert noteblocks for `/learn` (part 3) (#22622) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-cn/learn/index.md | 5 +- .../first_steps/fractions_and_roots/index.md | 6 +- .../first_steps/getting_started/index.md | 9 ++- files/zh-cn/learn/mathml/first_steps/index.md | 3 +- .../learn/mathml/first_steps/scripts/index.md | 6 +- .../learn/mathml/first_steps/tables/index.md | 3 +- .../first_steps/text_containers/index.md | 12 ++-- files/zh-cn/learn/mathml/index.md | 3 +- .../configuring_server_mime_types/index.md | 3 +- .../server-side/django/admin_site/index.md | 21 ++++--- .../django/authentication/index.md | 45 ++++++++++----- .../server-side/django/deployment/index.md | 48 ++++++++++------ .../django/development_environment/index.md | 33 +++++++---- .../django/django_assessment_blog/index.md | 3 +- .../learn/server-side/django/forms/index.md | 30 ++++++---- .../server-side/django/generic_views/index.md | 33 +++++++---- .../server-side/django/home_page/index.md | 30 ++++++---- files/zh-cn/learn/server-side/django/index.md | 3 +- .../server-side/django/introduction/index.md | 15 +++-- .../learn/server-side/django/models/index.md | 15 +++-- .../server-side/django/sessions/index.md | 9 ++- .../django/skeleton_website/index.md | 33 +++++++---- .../learn/server-side/django/testing/index.md | 39 ++++++++----- .../django/web_application_security/index.md | 9 ++- .../express_nodejs/deployment/index.md | 39 ++++++++----- .../development_environment/index.md | 27 ++++++--- .../author_detail_page/index.md | 3 +- .../displaying_data/author_list_page/index.md | 3 +- .../displaying_data/book_detail_page/index.md | 6 +- .../displaying_data/book_list_page/index.md | 3 +- .../index.md | 3 +- .../date_formatting_using_moment/index.md | 6 +- .../genre_detail_page/index.md | 6 +- .../displaying_data/home_page/index.md | 6 +- .../displaying_data/template_primer/index.md | 6 +- .../forms/create_author_form/index.md | 9 ++- .../forms/create_book_form/index.md | 4 +- .../forms/create_bookinstance_form/index.md | 3 +- .../forms/create_genre_form/index.md | 12 ++-- .../forms/delete_author_form/index.md | 12 ++-- .../server-side/express_nodejs/forms/index.md | 13 +++-- .../forms/update_book_form/index.md | 6 +- .../learn/server-side/express_nodejs/index.md | 3 +- .../express_nodejs/introduction/index.md | 42 +++++++++----- .../express_nodejs/mongoose/index.md | 55 +++++++++++++------ .../express_nodejs/routes/index.md | 30 ++++++---- .../express_nodejs/skeleton_website/index.md | 36 ++++++++---- .../tutorial_local_library_website/index.md | 3 +- .../client-server_overview/index.md | 12 ++-- .../first_steps/introduction/index.md | 21 ++++--- .../first_steps/web_frameworks/index.md | 9 ++- .../first_steps/website_security/index.md | 18 ++++-- 52 files changed, 542 insertions(+), 270 deletions(-) diff --git a/files/zh-cn/learn/index.md b/files/zh-cn/learn/index.md index 788a0115c79ac4..aa832e159e124b 100644 --- a/files/zh-cn/learn/index.md +++ b/files/zh-cn/learn/index.md @@ -22,9 +22,10 @@ slug: Learn - 框架与工具 - : 在掌握了原生 HTML、CSS、JavaScript 的要领后，就可以继续学习[前端开发工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools)课程，并考虑开始研究 [JavaScript 前端框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)，以及[网站服务端编程](/zh-CN/docs/Learn/Server-side)了。 -> **备注：** 可在[术语表](/zh-CN/docs/Glossary)中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在[常见问题](/zh-CN/docs/Learn/Common_questions)寻找答案。 +> [!NOTE] +> 可在[术语表](/zh-CN/docs/Glossary)中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在[常见问题](/zh-CN/docs/Learn/Common_questions)寻找答案。 -> **标注：** +> [!CALLOUT] > > #### 想要成为一名前端工程师？ > diff --git a/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md b/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md index e863ad37d0b43c..c542b9fa9af496 100644 --- a/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/zh-cn/learn/mathml/first_steps/fractions_and_roots/index.md @@ -250,7 +250,8 @@ checkboxes.forEach((checkbox) => { {{EmbedLiveSample('可伸缩的根号符号', 700, 200)}} -> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现该拉伸效果，上面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 +> [!WARNING] +> 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现该拉伸效果，上面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 ## 无横线的分数 @@ -284,7 +285,8 @@ checkboxes.forEach((checkbox) => { {{EmbedLiveSample('无横线分式', 700, 200)}} -> **备注：** 虽然 `linethickness` 属性可以用于指定任意的线条粗细，但最好保持默认值，该值是根据数学字体中指定的参数计算得出的。 +> [!NOTE] +> 虽然 `linethickness` 属性可以用于指定任意的线条粗细，但最好保持默认值，该值是根据数学字体中指定的参数计算得出的。 ## 总结 diff --git a/files/zh-cn/learn/mathml/first_steps/getting_started/index.md b/files/zh-cn/learn/mathml/first_steps/getting_started/index.md index c1e813c00bb005..c83c0f7f185c2c 100644 --- a/files/zh-cn/learn/mathml/first_steps/getting_started/index.md +++ b/files/zh-cn/learn/mathml/first_steps/getting_started/index.md @@ -62,7 +62,8 @@ MathML 使用与 HTML 相同的语法来表示元素和属性的树形结构。 {{ EmbedLiveSample('Inserting_formulas_in_HTML', 700, 100, "", "") }} -> **警告：** 如果你只看到“1 3”而不是一个分数，那么你的浏览器可能不支持 MathML。请查看[浏览器兼容性表格](/zh-CN/docs/Web/MathML/Element/math#浏览器兼容性)获取进一步的详细信息。 +> [!WARNING] +> 如果你只看到“1 3”而不是一个分数，那么你的浏览器可能不支持 MathML。请查看[浏览器兼容性表格](/zh-CN/docs/Web/MathML/Element/math#浏览器兼容性)获取进一步的详细信息。 ### display 属性 @@ -93,9 +94,11 @@ MathML 使用与 HTML 相同的语法来表示元素和属性的树形结构。 你可能还会注意到一些细微的外观变化：分数的文本和垂直间距变大了一点。没有 `display="block"` 属性，高度会被最小化，以避免干扰周围文本的流畅性。使用 `display="block"` 属性时，优先考虑的是数学公式的易读性。 -> **备注：** 这对应于 LaTeX 中的*行内*公式（用美元符号 `$...$` 包围）和*展示*公式（用 `\[...\]` 包围）的概念。 +> [!NOTE] +> 这对应于 LaTeX 中的*行内*公式（用美元符号 `$...$` 包围）和*展示*公式（用 `\[...\]` 包围）的概念。 -> **备注：** 上述提到的外观变化实际上是由 [`math-style`](/zh-CN/docs/Web/CSS/math-style) 属性控制的，该属性初始值为代表 `` 的 `normal`，其他情况下为 `compact`。在某些 MathML 子树中，此属性可能会自动变为 `compact`，但在本入门教程中我们将忽略这个细微差别。这与 LaTeX 类似。 +> [!NOTE] +> 上述提到的外观变化实际上是由 [`math-style`](/zh-CN/docs/Web/CSS/math-style) 属性控制的，该属性初始值为代表 `` 的 `normal`，其他情况下为 `compact`。在某些 MathML 子树中，此属性可能会自动变为 `compact`，但在本入门教程中我们将忽略这个细微差别。这与 LaTeX 类似。 ## 使用 \ 元素进行分组 diff --git a/files/zh-cn/learn/mathml/first_steps/index.md b/files/zh-cn/learn/mathml/first_steps/index.md index e07893a4689b5a..b814d94d38339b 100644 --- a/files/zh-cn/learn/mathml/first_steps/index.md +++ b/files/zh-cn/learn/mathml/first_steps/index.md @@ -15,7 +15,8 @@ MathML 是用于在网页中编写数学公式的标记语言。本单元将为 2. 已完成基本的工作环境设置，详见[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)，并了解如何创建和管理文件，详见[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)。 3. 熟悉 HTML 的基本知识，详见 [HTML 入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 -> **备注：** 如果你在计算机/平板电脑/其他设备上工作，但这些设备上你无法创建自己的文件，那么可以尝试在在线编程平台（如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）中运行代码示例。 +> [!NOTE] +> 如果你在计算机/平板电脑/其他设备上工作，但这些设备上你无法创建自己的文件，那么可以尝试在在线编程平台（如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/)）中运行代码示例。 ## 指南 diff --git a/files/zh-cn/learn/mathml/first_steps/scripts/index.md b/files/zh-cn/learn/mathml/first_steps/scripts/index.md index d5ea5bf402e27a..8e8bab24f510ba 100644 --- a/files/zh-cn/learn/mathml/first_steps/scripts/index.md +++ b/files/zh-cn/learn/mathml/first_steps/scripts/index.md @@ -78,7 +78,8 @@ slug: Learn/MathML/First_steps/Scripts - `` 元素的第二个和第三个子元素分别作为其第一个子元素的下标和上标附加。 - 上下标内的文本会缩小显示。 -> **备注：** MathML 元素 `` 和 `` 与 HTML 元素 [``](/zh-CN/docs/Web/HTML/Element/sub) 和 [``](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为附加符号，而不仅仅是文本。 +> [!NOTE] +> MathML 元素 `` 和 `` 与 HTML 元素 [``](/zh-CN/docs/Web/HTML/Element/sub) 和 [``](/zh-CN/docs/Web/HTML/Element/sup) 不同。它们允许开发者将任意的 MathML 子树作为附加符号，而不仅仅是文本。 ## 正下标和正上标 @@ -359,7 +360,8 @@ math { 可以看出底部括号“⎵”和右箭头“→”在水平方向上会延伸以覆盖被替代值的宽度。回想一下，[一些竖直运算符可以伸展](/zh-CN/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators)，以覆盖 `` 中非伸展兄弟节点的高度。类似地，一些水平运算符可以伸展以覆盖 ``、`` 或 `` 元素中非伸展兄弟节点的宽度。 -> **备注：** 伸展适用于 ``、`` 或 `` 元素的任何子元素，不仅仅是正下标或正上标。 +> [!NOTE] +> 伸展适用于 ``、`` 或 `` 元素的任何子元素，不仅仅是正下标或正上标。 ### 大型运算符和极限 diff --git a/files/zh-cn/learn/mathml/first_steps/tables/index.md b/files/zh-cn/learn/mathml/first_steps/tables/index.md index 1696365f5602bb..cafe546bece2ca 100644 --- a/files/zh-cn/learn/mathml/first_steps/tables/index.md +++ b/files/zh-cn/learn/mathml/first_steps/tables/index.md @@ -210,7 +210,8 @@ MathML 表格元素与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables)的元素类 {{EmbedLiveSample('允许单元格横跨多行多列', 700, 200)}} -> **备注：** 出于历史原因，MathML 中用于跨列的属性被称为 `columnspan` 而不是 `colspan`。 +> [!NOTE] +> 出于历史原因，MathML 中用于跨列的属性被称为 `columnspan` 而不是 `colspan`。 ## 高级布局用法 diff --git a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md index 5717dfff6873fa..0966607e9d44a8 100644 --- a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md +++ b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md @@ -167,7 +167,8 @@ document.getElementById("clearOutput").addEventListener("click", () => { ``` -> **备注：** 对于给定的文本内容，有时很难确定要使用哪个标记元素。在实践中，选择错误的元素通常不会导致重大问题，因为所有的标记元素在浏览器实现中通常都会以相同的方式呈现（用于视觉显示和辅助技术）。然而，`` 和 `` 元素具有特殊的区别特征，需要注意。下面的小节将对它们进行解释。 +> [!NOTE] +> 对于给定的文本内容，有时很难确定要使用哪个标记元素。在实践中，选择错误的元素通常不会导致重大问题，因为所有的标记元素在浏览器实现中通常都会以相同的方式呈现（用于视觉显示和辅助技术）。然而，`` 和 `` 元素具有特殊的区别特征，需要注意。下面的小节将对它们进行解释。 ## \ 的自动斜体化 @@ -197,7 +198,8 @@ document.getElementById("clearOutput").addEventListener("click", () => { {{ EmbedLiveSample('阻止 自动斜体化', 700, 50) }} -> **备注：** 尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。 +> [!NOTE] +> 尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。 ## \ 的运算符属性 @@ -316,7 +318,8 @@ document.getElementById("showSolution").addEventListener( {{ EmbedLiveSample('主动学习：发现不同点', 700, 500) }} -> **备注：** 一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。 +> [!NOTE] +> 一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。 ### 主动学习：可伸缩运算符 @@ -455,7 +458,8 @@ document.getElementById("clearOutput").addEventListener("click", () => { ``` -> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 +> [!WARNING] +> 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 ## 总结 diff --git a/files/zh-cn/learn/mathml/index.md b/files/zh-cn/learn/mathml/index.md index 253e3c845e7ccb..e1c0559e3270c0 100644 --- a/files/zh-cn/learn/mathml/index.md +++ b/files/zh-cn/learn/mathml/index.md @@ -7,7 +7,8 @@ slug: Learn/MathML 数学标记语言（Mathematical Markup Language）或 {{glossary("MathML")}} 是用于在网页中编写数学公式的标记语言，其支持分数、上下标、根号、矩阵、积分、级数等。尽管它最初被设计为独立的 XML 语言，但 MathML 通常嵌入在 {{Glossary('HTML')}} 文档中，并可视为 HTML 的扩展。 -> **警告：** 实际上，MathML 内容是由[轻量级标记语言](https://zh.wikipedia.org/wiki/轻量级标记语言)（例如 [LaTeX](https://zh.wikipedia.org/wiki/LaTeX)）或[图形用户界面](https://zh.wikipedia.org/wiki/图形用户界面)生成的。如果你只需要在网页中集成数学公式，可以参考[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面上的提示。 +> [!WARNING] +> 实际上，MathML 内容是由[轻量级标记语言](https://zh.wikipedia.org/wiki/轻量级标记语言)（例如 [LaTeX](https://zh.wikipedia.org/wiki/LaTeX)）或[图形用户界面](https://zh.wikipedia.org/wiki/图形用户界面)生成的。如果你只需要在网页中集成数学公式，可以参考[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面上的提示。 ## 前提 diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md index 96d0c8da872b05..22baaee2317249 100644 --- a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md +++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md @@ -35,7 +35,8 @@ MIME 类型描述了邮件或者 web 服务器或者 web 应用中的媒体内 出于安全原因，使用正确的 MIME 类型的服务内容也是重要的；恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。 -> **备注：** 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，Gecko 2.0 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (`text/css`). +> [!NOTE] +> 从历史角度，只要 HTML 文档请求处理 CSS 文件，Firefox 能够正常加载 CSS 即使它设置了错误的 MIME 类型。处于安全原因，Gecko 2.0 对于从请求文档不同来源加载的样式表，将不再这样做。如果 CSS 来自于不同来源，你必须设置它的正确 MIME 类型 (`text/css`). > > Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的 CSS 构造，则存在允许加载的临时启发式算法。在 Firefox 4 中已经删除了启发式，你必须正确设置`text/css` 的 MIME 类型，才能够识别 CSS。 diff --git a/files/zh-cn/learn/server-side/django/admin_site/index.md b/files/zh-cn/learn/server-side/django/admin_site/index.md index 52d856472b9c1a..d3f6b6c8e7964f 100644 --- a/files/zh-cn/learn/server-side/django/admin_site/index.md +++ b/files/zh-cn/learn/server-side/django/admin_site/index.md @@ -58,7 +58,8 @@ admin.site.register(Genre) admin.site.register(BookInstance) ``` -> **备注：** 如果你接受创建模型以表示书籍的自然语言的挑战 ([see the models tutorial article](/zh-CN/docs/Learn/Server-side/Django/Models)), 导入并注册。 +> [!NOTE] +> 如果你接受创建模型以表示书籍的自然语言的挑战 ([see the models tutorial article](/zh-CN/docs/Learn/Server-side/Django/Models)), 导入并注册。 这是在网站上注册模型或多模型的简单方法，管理站点是高度可定制的，我们将进一步讨论注册模型的其他方式。 @@ -93,7 +94,8 @@ python3 manage.py runserver ![Admin Site - Book Add](admin_book_add.png) -> **备注：** 在这里，我们希望你花费一点时间添加一些书，作者，类型（如：幻想）到你的应用。确保每个作者和类型都包含几本不同的书籍（这会是你的列表和详细视图在文章系列中后期使用时更有趣）。 +> [!NOTE] +> 在这里，我们希望你花费一点时间添加一些书，作者，类型（如：幻想）到你的应用。确保每个作者和类型都包含几本不同的书籍（这会是你的列表和详细视图在文章系列中后期使用时更有趣）。 我们完成添加书籍，在顶部标签中，点击 **Home** 链接将回到主管理页面。然后点击 **Books** 链接显示当前书籍的列表（或其他链接之一，以查看其他型号列表）。现在你已经添加了几本书，列表可能与下面的截图类似。显示每本书的标题；这是书模型 \_\_str\_\_() 方法返回的值，在上一文章中提到。 @@ -210,7 +212,8 @@ class BookAdmin(admin.ModelAdmin): 不幸的是，我们不能直接指定 **list_display** 中的 **genre** 字段，因为它是一个**ManyToManyField** （Django 可以防止这种情况，因为在这样做时会有大量的数据库访问“成本”）。相反，我们将定义一个 `display_genre` 函数来获取信息作为一个字符串（这是我们上面调用的函数;下面我们将定义它）。 -> **备注：** 在**genre**这里获取可能不是一个好主意，因为数据库操作的“成本”。我们向你展示了如何在模型中调用函数的其他原因非常有用 - 例如在列表中的每个项目旁边添加一个“删除”链接。 +> [!NOTE] +> 在**genre**这里获取可能不是一个好主意，因为数据库操作的“成本”。我们向你展示了如何在模型中调用函数的其他原因非常有用 - 例如在列表中的每个项目旁边添加一个“删除”链接。 将以下代码添加到 Book 模型（**models.py**）中。这将从 genre 字段的前三个值（如果存在）创建一个字符串，并创建一个`short_description`可以在此方法的管理站点中使用的字符串。 @@ -229,7 +232,8 @@ class BookAdmin(admin.ModelAdmin): 该 Genre 模型（和 Language 模式，如果你定义一个）都有一个单一的领域，所以没有一点为他们创造更多的显示领域的附加模型。 -> **备注：** 值得更新 BookInstance 模型列表，至少显示状态和预期的返回日期。我们已经补充说，作为本文末尾的挑战！ +> [!NOTE] +> 值得更新 BookInstance 模型列表，至少显示状态和预期的返回日期。我们已经补充说，作为本文末尾的挑战！ ### 添加列表过滤器 @@ -248,7 +252,8 @@ class BookInstanceAdmin(admin.ModelAdmin): 默认情况下，详细视图按照其在模型中声明的顺序垂直排列所有字段。你可以更改声明的顺序，哪些字段显示（或排除），区段是否用于组织信息，字段是水平还是垂直显示，甚至是管理窗体中使用的编辑窗口小部件。 -> **备注：** LocalLibrary 模型比较简单，因此我们不需要更改布局; 不管怎样，我们会做一些改变，只是为了向你展示如何。 +> [!NOTE] +> LocalLibrary 模型比较简单，因此我们不需要更改布局; 不管怎样，我们会做一些改变，只是为了向你展示如何。 #### 控制哪些字段被显示和布局 @@ -266,7 +271,8 @@ class AuthorAdmin(admin.ModelAdmin): ![Admin Site - Improved Author Detail](admin_improved_author_detail.png) -> **备注：** 你还可以使用`exclude`属性来声明要从表单中排除的属性列表（将显示模型中的所有其他属性）。 +> [!NOTE] +> 你还可以使用`exclude`属性来声明要从表单中排除的属性列表（将显示模型中的所有其他属性）。 #### 剖切细节视图 @@ -317,7 +323,8 @@ class BookAdmin(admin.ModelAdmin): 在这种情况下，我们所做的就是声明我们的`tablular`内联类，它只是从内联模型添加所有字段。你可以为布局指定各种附加信息，包括要显示的字段，其顺序，是否只读等。（有关详细信息，请参阅 [TabularInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline) ). -> **备注：** 这个功能有一些痛苦的限制！在上面的屏幕截图中，我们有三个现有的书籍实例，其次是新的书籍实例的三个占位符（看起来非常相似！）。默认情况下没有备用书实例会更好，只需使用“添加另一个书”实例链接添加它们，或者可以`BookInstance`从这里列出作为不可读的链接。第一个选项可以通过`extra`在`BookInstanceInline`模型中将属性设置为 0 来完成，自己尝试一下。 +> [!NOTE] +> 这个功能有一些痛苦的限制！在上面的屏幕截图中，我们有三个现有的书籍实例，其次是新的书籍实例的三个占位符（看起来非常相似！）。默认情况下没有备用书实例会更好，只需使用“添加另一个书”实例链接添加它们，或者可以`BookInstance`从这里列出作为不可读的链接。第一个选项可以通过`extra`在`BookInstanceInline`模型中将属性设置为 0 来完成，自己尝试一下。 ## 挑战自己 diff --git a/files/zh-cn/learn/server-side/django/authentication/index.md b/files/zh-cn/learn/server-side/django/authentication/index.md index ecc499eead3f6b..8343025c89c0aa 100644 --- a/files/zh-cn/learn/server-side/django/authentication/index.md +++ b/files/zh-cn/learn/server-side/django/authentication/index.md @@ -29,7 +29,8 @@ slug: Learn/Server-side/Django/Authentication Django 提供了一个身份验证和授权（“权限”）系统，该系统构建在[上一个教程](/zh-CN/docs/Learn/Server-side/Django/Sessions)中讨论的会话框架之上，允许你验证用户凭据，并定义每个用户可允许执行的操作。该框架包括用户`Users`和分组`Groups`的内置模型（一次向多个用户应用权限的通用方法），用于登录用户的权限/标志，以指定用户是否可以执行任务，表单和视图，以及查看限制内容的工具。 -> **备注：** Django 身份验证系统的目标非常通用，因此不提供其他 Web 身份验证系统中，所提供的某些功能。某些常见问题的解决方案，可作为第三方软件包提供。例如，限制登录尝试，和针对第三方的身份验证（例如 OAuth）。 +> [!NOTE] +> Django 身份验证系统的目标非常通用，因此不提供其他 Web 身份验证系统中，所提供的某些功能。某些常见问题的解决方案，可作为第三方软件包提供。例如，限制登录尝试，和针对第三方的身份验证（例如 OAuth）。 在本教程中，我们将向你展示，如何在[LocalLibrary](/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website)网站中，启用用户身份验证，创建你自己的登录和注销页面，为模型添加权限，以及控制对页面的访问。我们将使用身份验证/权限，来显示用户和图书馆员借用图书的列表。 @@ -41,7 +42,8 @@ Django 提供了一个身份验证和授权（“权限”）系统，该系统 我们在[创建框架网站](/zh-CN/docs/Learn/Server-side/Django/skeleton_website)时（在教程 2 中），自动启用了身份验证，因此你此时，无需再执行任何操作。 -> **备注：** 当我们使用 `django-admin startproject` 命令，以创建应用程序时，所有必要的配置都已完成。当我们第一次调用 `python manage.py migrate` 时，创建了用户和模型权限的数据库表。 +> [!NOTE] +> 当我们使用 `django-admin startproject` 命令，以创建应用程序时，所有必要的配置都已完成。当我们第一次调用 `python manage.py migrate` 时，创建了用户和模型权限的数据库表。 配置在项目文件（**locallibrary/locallibrary/settings.py**）的`INSTALLED_APPS`和`MIDDLEWARE`部分中设置，如下所示： @@ -64,7 +66,8 @@ MIDDLEWARE = [ 在教程 4 中，当我们查看 [Django 管理站点](/zh-CN/docs/Learn/Server-side/Django/Admin_site)时，你已经创建了第一个用户（这是一个超级用户，使用命令 `python manage.py createsuperuser` 创建）。我们的超级用户已经过身份验证，并拥有所有权限，因此我们需要创建一个测试用户，来代表普通网站用户。我们将使用管理站点，来创建我们的 locallibrary 组別和网站登录，因为这是最快的方法之一。 -> **备注：** 你还可以用编程方式创建用户，如下所示。你会必须这样做，例如，如果要开发一个界面，能允许用户创建自己的登录（你不应该授予用户访问管理站点的权限）。 +> [!NOTE] +> 你还可以用编程方式创建用户，如下所示。你会必须这样做，例如，如果要开发一个界面，能允许用户创建自己的登录（你不应该授予用户访问管理站点的权限）。 > > ```python > from django.contrib.auth.models import User @@ -105,7 +108,8 @@ MIDDLEWARE = [ 就是这样！现在你有一个“普通的图书馆成员”帐户，你可以使用该帐户进行测试（一旦我们实现了页面，使他们能够登录）。 -> **备注：** 你应该尝试创建另一个图书馆用户。此外，为图书馆管理员创建一个分组，并添加一个用户！ +> [!NOTE] +> 你应该尝试创建另一个图书馆用户。此外，为图书馆管理员创建一个分组，并添加一个用户！ ## 设置身份验证视图 @@ -113,9 +117,11 @@ Django 提供了创建身份验证页面所需的几乎所有功能，让处理 在本节中，我们将展示如何将默认系统，集成到 LocalLibrary 网站并创建模板。我们将它们放在主项目的 URL 当中。 -> **备注：** 你不必一定要使用这些代码，但你可能希望这样做，因为它使事情变得更容易。如果更改用户模型（高级主题！），你几乎肯定需要更改表单处理代码。但即便如此，你仍然可以使用先前已经有的视图功能。 +> [!NOTE] +> 你不必一定要使用这些代码，但你可能希望这样做，因为它使事情变得更容易。如果更改用户模型（高级主题！），你几乎肯定需要更改表单处理代码。但即便如此，你仍然可以使用先前已经有的视图功能。 -> **备注：** 在这种情况下，我们可以合理地将认证页面（包括 URL 和模板）放在我们的目录应用程序中。但是，如果我们有多个应用程序，最好将这个共享登录行为分开，并让它在整个站点上可用，这就是我们在这里展示的内容！ +> [!NOTE] +> 在这种情况下，我们可以合理地将认证页面（包括 URL 和模板）放在我们的目录应用程序中。但是，如果我们有多个应用程序，最好将这个共享登录行为分开，并让它在整个站点上可用，这就是我们在这里展示的内容！ ### 项目网址 @@ -133,7 +139,8 @@ urlpatterns += [ 打开 URL （注意前面的斜杠！），Django 将显示一个错误，它无法找到此 URL，并列出它尝试过的所有 URL。从中你可以看到可以使用的 URL，例如： -> **备注：** 使用上面的方法，添加以下带有方括号中的名称的 URL，可用于反转 URL 映射。你不必实现任何其他内容 - 上面的 url 映射，会自动映射下面提到的 URL。 +> [!NOTE] +> 使用上面的方法，添加以下带有方括号中的名称的 URL，可用于反转 URL 映射。你不必实现任何其他内容 - 上面的 url 映射，会自动映射下面提到的 URL。 > > ```python > accounts/ login/ [name='login'] @@ -161,7 +168,8 @@ Exception Value: registration/login.html 对于此站点，我们将 HTML 页面，放在 **templates/registration/** 目录中。此目录应该位于项目的根目录中，即与 **catalog** 和 **locallibrary** 文件夹相同的目录）。请立即创建这些文件夹。 -> **备注：** 你的文件夹结构，现在应如下所示： +> [!NOTE] +> 你的文件夹结构，现在应如下所示： > locallibrary (django project folder) > |\_catalog > |\_locallibrary @@ -181,7 +189,8 @@ TEMPLATES = [ ### 登录模板 -> **警告：** 本文提供的身份验证模板，是 Django 演示登录模板的基本/略微修改版本。你可能需要自定义它们，以供自己使用！ +> [!WARNING] +> 本文提供的身份验证模板，是 Django 演示登录模板的基本/略微修改版本。你可能需要自定义它们，以供自己使用！ 创建一个名为 **/locallibrary/templates/registration/login.html** 的新 HTML 文件。为它加入以下内容： @@ -368,7 +377,8 @@ Someone asked for password reset for email \{{ email }}. Follow the link below: 你将能够从登录页面中的链接，测试密码重置功能。**请注意，Django 只会向已存储在其数据库中的地址（用户）发送重置电子邮件！** -> **备注：** 密码重置系统，要求你的网站支持电子邮件，这超出了本文的范围，因此该部分**将无法使用**。要测试此功能，请将以下一行放在 settings.py 文件的末尾。这会记录发送到命令行控制台的所有电子邮件（因此你可以从命令行控制台，复制密码重置链接）。 +> [!NOTE] +> 密码重置系统，要求你的网站支持电子邮件，这超出了本文的范围，因此该部分**将无法使用**。要测试此功能，请将以下一行放在 settings.py 文件的末尾。这会记录发送到命令行控制台的所有电子邮件（因此你可以从命令行控制台，复制密码重置链接）。 > > ```python > EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' @@ -406,7 +416,8 @@ Someone asked for password reset for email \{{ email }}. Follow the link below: 我们使用 `url`模板标记，和相应 URL 配置的名称，创建登录和登出链接 URL。另外请注意，我们如何将“`?next=\{{request.path}}`附加到 URL 的末尾。这样做，是将包含当前页面地址（URL）的 URL 参数，添加到链接 URL 的末尾。用户成功登录/登出后，视图将使用此“下一个”值，将用户重定向，回到他们首次单击登录/登出链接的页面。 -> **备注：** 试试吧！如果你在主页上，并单击侧栏中的“登录/登出”，在操作完成后，你应该返回到同一页面。 +> [!NOTE] +> 试试吧！如果你在主页上，并单击侧栏中的“登录/登出”，在操作完成后，你应该返回到同一页面。 ### 在视图中测试 @@ -422,7 +433,8 @@ def my_view(request): ... ``` -> **备注：** 你可以通过`request.user.is_authenticated`，测试手动执行类似的操作，但装饰器更方便！ +> [!NOTE] +> 你可以通过`request.user.is_authenticated`，测试手动执行类似的操作，但装饰器更方便！ 同样，在基于类别的视图中，限制对登录用户的访问的最简单方法，是从`LoginRequiredMixin`派生。你需要在主视图类之前的超类列表中，首先声明此 mixin。 @@ -477,7 +489,8 @@ def is_overdue(self): return False ``` -> **备注：** 在进行比较之前，我们首先验证`due_back`是否为空。空的`due_back`字段，会导致 Django 抛出错误，而不是显示页面：空值不具有可比性。这不是我们希望用户体验到的东西！ +> [!NOTE] +> 在进行比较之前，我们首先验证`due_back`是否为空。空的`due_back`字段，会导致 Django 抛出错误，而不是显示页面：空值不具有可比性。这不是我们希望用户体验到的东西！ 现在我们已经更新了模型，我们需要对项目进行新的迁移，然后应用这些迁移： @@ -510,7 +523,8 @@ class BookInstanceAdmin(admin.ModelAdmin): 现在可以将书本借给特定用户，然后借出一些`BookInstance`记录。将他们的借用字段`borrowed`，设置为你的测试用户，将状态`status`设置为“On loan”，并在将来和过去设置截止日期。 -> **备注：** 我们不会一步一步说明这个流程，因为你已经知道如何使用管理站点！ +> [!NOTE] +> 我们不会一步一步说明这个流程，因为你已经知道如何使用管理站点！ ### 在借书视图 @@ -668,7 +682,8 @@ class MyView(PermissionRequiredMixin, View): 你应该能够遵循与其他视图相同的模式。主要区别在于，你需要将视图限制为仅限图书馆员。你可以根据用户是否是工作人员（函数装饰器：`staff_member_required`，模板变量：`user.is_staff`）来执行此操作，但我们建议你改为使用`can_mark_returned`权限，和 `PermissionRequiredMixin`，如上一节所述。 -> **警告：** 请记住，不要使用超级用户进行基于权限的测试（即使尚未定义权限，权限检查也会对超级用户返回 true）。而是要创建一个图书管理员用户，并添加所需的功能。 +> [!WARNING] +> 请记住，不要使用超级用户进行基于权限的测试（即使尚未定义权限，权限检查也会对超级用户返回 true）。而是要创建一个图书管理员用户，并添加所需的功能。 完成后，你的页面应该类似于下面的屏幕截图。 diff --git a/files/zh-cn/learn/server-side/django/deployment/index.md b/files/zh-cn/learn/server-side/django/deployment/index.md index 421f94be22be41..5f6f19983125ae 100644 --- a/files/zh-cn/learn/server-side/django/deployment/index.md +++ b/files/zh-cn/learn/server-side/django/deployment/index.md @@ -51,19 +51,22 @@ slug: Learn/Server-side/Django/Deployment - 在 Django 网站和 Web 服务器之间，传递“动态”请求的应用程序服务器。 - 你的网站所依赖的数据库。 -> **备注：** 根据你的生产配置方式，你可能还有反向代理，负载均衡器等。 +> [!NOTE] +> 根据你的生产配置方式，你可能还有反向代理，负载均衡器等。 服务器计算机可以位于你的场所，并通过快速链接连接到 Internet，但使用托管“在云中”的计算机更为常见。这实际上意味着，你的代码在托管公司的数据中心的某台远程计算机（或可能是“虚拟”计算机）上运行。远程服务器通常会以特定价格，提供一些保证级别的计算资源（例如 CPU，RAM，存储器等）和互联网连接。 这种可远程访问的计算/网络硬件，称为基础架构即服务（IaaS）。许多 IaaS 供应商，提供预安装特定操作系统的选项，你必须在其上安装生产环境的其他组件。其他供应商允许你选择功能更全面的环境，可能包括完整的 Django，和 Web 服务器设置。 -> **备注：** 预构建环境可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，当你需要升级系统的某些部分时，你就知道从哪里开始！ +> [!NOTE] +> 预构建环境可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，当你需要升级系统的某些部分时，你就知道从哪里开始！ 其他托管服务提供商，支持 Django 作为平台即服务（PaaS）产品的一部分。在这种托管中，你不必担心大多数生产环境（Web 服务器，应用程序服务器，负载平衡器），因为主机平台会为你处理这些（以及为了扩展你的应用程序，而需要做的大部分工作）。这使得部署非常简单，因为你只需要专注于 Web 应用程序，而不是所有其他服务器的基础结构。 相对于 PaaS，一些开发人员会选择 IaaS 所提供的更高灵活性，而其他开发人员，则欣赏 PaaS 降低的维护开销，和更轻松地扩展。当你开始使用时，在 PaaS 系统上设置你的网站，要容易得多，因此我们将在本教程中这么做。 -> **备注：** 如果你选择一个 Python/Django 友好的托管服务提供商，他们应该提供有关如何使用不同配置的网络服务器，应用服务器，反向代理等设置 Django 网站的说明（如果你选择 PaaS，这就没有关系了）。例如，[Digital Ocean Django 社区文档](https://www.digitalocean.com/community/tutorials?q=django) 中的各种配置，有许多手把手指南。 +> [!NOTE] +> 如果你选择一个 Python/Django 友好的托管服务提供商，他们应该提供有关如何使用不同配置的网络服务器，应用服务器，反向代理等设置 Django 网站的说明（如果你选择 PaaS，这就没有关系了）。例如，[Digital Ocean Django 社区文档](https://www.digitalocean.com/community/tutorials?q=django) 中的各种配置，有许多手把手指南。 ## 选择托管服务提供商 @@ -85,13 +88,15 @@ slug: Learn/Server-side/Django/Deployment 许多提供商还有“基本”层，可提供更多有用的计算能力和更少的限制。[Digital Ocean](https://www.digitalocean.com/) 和 [Python Anywhere](https://www.pythonanywhere.com/) ，就是流行的托管服务提供商的例子，提供相对便宜的基本计算等级（每月 5 美元到 10 美元不等）。 -> **备注：** 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现，可扩展性是最重要的考虑因素。 +> [!NOTE] +> 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现，可扩展性是最重要的考虑因素。 ## 让你的网站准备好发布 使用 django-admin 和 manage.py 工具创建的 Django 骨架网站，是为了使开发更容易而配置的。出于安全性或性能原因，许多 Django 项目设置（在**settings.py**中指定），在生产应该是不同的。 -> **备注：** 通常有一个单独的 **settings.py** 文件用于生产环境，并从单独的文件或环境变量，导入敏感设置。即使其他源代码在公共存储库中可用，也应保护此文件。 +> [!NOTE] +> 通常有一个单独的 **settings.py** 文件用于生产环境，并从单独的文件或环境变量，导入敏感设置。即使其他源代码在公共存储库中可用，也应保护此文件。 你必须检查的关键设置是： @@ -131,7 +136,8 @@ DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) ) 默认情况下，`DEBUG`的值为`True`，但如果`DJANGO_DEBUG`环境变量的值，设置为空字符串，则为`False`，例如，`DJANGO_DEBUG=''`。 -> **备注：** 如果我们可以直接将`DJANGO_DEBUG`环境变量设置为`True`或`False`，而不是分别使用“any string”或“empty string”，那将更直观。不幸的是，环境变量值存储为 Python 字符串，计算结果为 `False` 的唯一字符串，是空字符串（例如`bool('')==False`）。 +> [!NOTE] +> 如果我们可以直接将`DJANGO_DEBUG`环境变量设置为`True`或`False`，而不是分别使用“any string”或“empty string”，那将更直观。不幸的是，环境变量值存储为 Python 字符串，计算结果为 `False` 的唯一字符串，是空字符串（例如`bool('')==False`）。 [部署清单（Django 文档）](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/)中，提供了你可能要更改的完整设置清单。你还可以使用下面的终端命令，列出其中的一些： @@ -181,7 +187,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos) 完成所有操作后，我们可以设置 Heroku 帐户，获取 Heroku 客户端，并使用它来安装我们的网站。 -> **备注：** 以下说明反映了在撰写本书时，如何使用 Heroku。如果 Heroku 显着改变了他们的操作过程，你可能希望检查他们的设置文档：[在 Heroku 上开始使用 Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction)。 +> [!NOTE] +> 以下说明反映了在撰写本书时，如何使用 Heroku。如果 Heroku 显着改变了他们的操作过程，你可能希望检查他们的设置文档：[在 Heroku 上开始使用 Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction)。 就是你一开始所需的所有概述（请参阅 [Heroku 如何工作](https://devcenter.heroku.com/articles/how-heroku-works)，以获取更全面的指南）。 @@ -189,7 +196,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos) Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/同步你对实时系统所做的任何更改。它通过添加一个名为 heroku 的新的 heroku“远程”储存库，来指向 Heroku 云上的源储存库。在开发期间，你使用 git 在“主”储存库中储存更改。如果要部署站点，请将更改同步到 Heroku 储存库。 -> **备注：** 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git，或其他一些 SCM 系统。如果你已有 git 储存库，则可以跳过此步骤。 +> [!NOTE] +> 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git，或其他一些 SCM 系统。如果你已有 git 储存库，则可以跳过此步骤。 有很多方法可以使用 git，但最简单的方法之一，是首先在 [Github](https://github.com/) 上建立一个帐户，在那里创建储存库，然后将它同步到本地： @@ -273,7 +281,8 @@ Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/ 完成此操作后，你应该可以返回创建储存库的 Github 上的页面，刷新页面，并看到你的整个应用程序已经上传。使用此添加/提交/推送循环，你可以在文件更改时，继续更新储存库。 -> **备注：** 这是备份你的“vanilla”项目的一个好时机 - 虽然我们将在以下部分中，进行的一些更改，可能对有些人在任何平台（或开发）上的部署有用，对其他人可能没有用。 +> [!NOTE] +> 这是备份你的“vanilla”项目的一个好时机 - 虽然我们将在以下部分中，进行的一些更改，可能对有些人在任何平台（或开发）上的部署有用，对其他人可能没有用。 > > 执行此操作的最佳方法，是使用 git 来管理你的修订。使用 git，你不仅可以回到特定的旧版本，而且可以在生产变更的单独“分支”中进行维护，并选择在生产和开发分支之间移动的任何更改。[学习 Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/) 非常值得，但超出了本主题的范围。 > @@ -356,7 +365,8 @@ pip3 install psycopg2 在开发过程中，我们使用 Django 和 Django 开发 Web 服务器，来提供静态文件（CSS，JavaScript 等）。在生产环境中，我们通常提供来自内容传送网络（CDN）或 Web 服务器的静态文件。 -> **备注：** 通过 Django/web 应用程序提供静态文件是低效的，因为请求必须通过不必要的附加代码（Django），而不是由 Web 服务器或完全独立的 CDN 直接处理。虽然这对于开发期间的本地使用无关紧要，但如果我们在生产环境中使用相同的方法，则会对性能产生重大影响。 +> [!NOTE] +> 通过 Django/web 应用程序提供静态文件是低效的，因为请求必须通过不必要的附加代码（Django），而不是由 Web 服务器或完全独立的 CDN 直接处理。虽然这对于开发期间的本地使用无关紧要，但如果我们在生产环境中使用相同的方法，则会对性能产生重大影响。 为了便于将静态文件与 Django Web 应用程序分开托管，Django 提供了 collectstatic 工具，来收集这些文件以进行部署（有一个设置变量，用于定义在运行 collectstatic 时，应该收集文件的位置）。Django 模板是指相对于设置变量（`STATIC_URL`）的静态文件的托管位置，因此如果将静态文件移动到另一个主机/服务器，则可以更改此位置。 @@ -389,7 +399,8 @@ STATIC_URL = '/static/' 有许多方法可以在生产环境中提供静态文件（我们在前面的部分中看到了相关的 Django 设置）。Heroku 建议在生产环境中使用 [WhiteNoise](https://warehouse.python.org/project/whitenoise/) 项目，直接从 Gunicorn 提供静态资产。 -> **备注：** Heroku 会在上传你的应用程序后，自动调用 collectstatic 并准备静态文件，以供 WhiteNoise 使用。查看 [WhiteNoise](https://warehouse.python.org/project/whitenoise/) 文档，了解其工作原理以及实现，为什么是提供这些文件的相对有效方法。 +> [!NOTE] +> Heroku 会在上传你的应用程序后，自动调用 collectstatic 并准备静态文件，以供 WhiteNoise 使用。查看 [WhiteNoise](https://warehouse.python.org/project/whitenoise/) 文档，了解其工作原理以及实现，为什么是提供这些文件的相对有效方法。 设置 WhiteNoise 以便在项目中使用的步骤如下： @@ -444,7 +455,8 @@ psycopg2==2.6.2 whitenoise==3.2.2 ``` -> **备注：** 确保存在类似上面的 **psycopg2** 的那一行！即使你没有在本地安装它，你仍然应该将它添加到**requirements.txt**。 +> [!NOTE] +> 确保存在类似上面的 **psycopg2** 的那一行！即使你没有在本地安装它，你仍然应该将它添加到**requirements.txt**。 #### Runtime @@ -454,7 +466,8 @@ whitenoise==3.2.2 python-3.6.4 ``` -> **备注：** Heroku 只支持少量的 [Python 运行库](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes)（在编写本文时，包括上面的那个）。Heroku 将使用受支持的运行库，而不管此文件中指定的值。 +> [!NOTE] +> Heroku 只支持少量的 [Python 运行库](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes)（在编写本文时，包括上面的那个）。Heroku 将使用受支持的运行库，而不管此文件中指定的值。 #### 将更改保存到 Github 并重新测试 @@ -502,7 +515,8 @@ heroku help heroku create ``` -> **备注：** 如果你愿意，可以通过在“创建”之后指定值来命名远程。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。 +> [!NOTE] +> 如果你愿意，可以通过在“创建”之后指定值来命名远程。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。 然后我们可以将应用程序，推送到 Heroku 储存库，如下所示。这将上传应用程序，将其打包到 dyno 中，运行 collectstatic，然后启动该站点。 @@ -564,7 +578,8 @@ DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-20 如果你回想起来**准备发布网站**的部分，我们必须为`DJANGO_SECRET_KEY` 和 `DJANGO_DEBUG`设置环境变量。我们现在就这样做。 -> **备注：** 密钥需要真正的保密！生成新密钥的一种方法，是创建一个新的 Django 项目（`django-admin startproject someprojectname`），然后从 **settings.py** 中，获取为你生成的密钥。 +> [!NOTE] +> 密钥需要真正的保密！生成新密钥的一种方法，是创建一个新的 Django 项目（`django-admin startproject someprojectname`），然后从 **settings.py** 中，获取为你生成的密钥。 我们使用 `config:set`命令，设置`DJANGO_SECRET_KEY`（如下所示）。记得使用自己的密钥！ @@ -600,7 +615,8 @@ git push origin master git push heroku master ``` -> **备注：** 完成 Heroku 的站点更新后，输入一个不存在的 URL（例如，**/catalog/doesnotexist/**）。以前这会显示一个详细的调试页面，但现在，你应该只看到一个简单的“未找到”页面。 +> [!NOTE] +> 完成 Heroku 的站点更新后，输入一个不存在的 URL（例如，**/catalog/doesnotexist/**）。以前这会显示一个详细的调试页面，但现在，你应该只看到一个简单的“未找到”页面。 ### 除错调试 diff --git a/files/zh-cn/learn/server-side/django/development_environment/index.md b/files/zh-cn/learn/server-side/django/development_environment/index.md index 1b9f5ce457adb6..780b102dc0628a 100644 --- a/files/zh-cn/learn/server-side/django/development_environment/index.md +++ b/files/zh-cn/learn/server-side/django/development_environment/index.md @@ -46,7 +46,8 @@ Django 在安装和配置方面非常灵活。Django 可以： 每个选项都需要略微不同的配置和设置。以下小节解释了你的一些选择。在本文的其余部分中，我们将介绍 Django 在几个操作系统上的设置，并且在本教程的剩余模块中将假设你已进行该设置。 -> **备注：** 其他可能的安装选项在官方 Django 文档中介绍。[相应文件 点击这里](#furtherreading). +> [!NOTE] +> 其他可能的安装选项在官方 Django 文档中介绍。[相应文件 点击这里](#furtherreading). #### 支持哪些操作系统？ @@ -62,7 +63,8 @@ Django web 应用程序能运行在几乎任何可以运行 Python3 的计算机 我们建议你使用最新版本的 Python 3，除非该站点依赖于仅适用于 Python 2 的第三方库。本文将介绍如何为 Python 3 安装环境（Python 2 的等效设置将非常相似）。 -> **备注：** Python 2.7 无法用于当前的 Django 发行版本（Django 1.11.x 系列是最后支持 Python 2.7 的版本）。 +> [!NOTE] +> Python 2.7 无法用于当前的 Django 发行版本（Django 1.11.x 系列是最后支持 Python 2.7 的版本）。 #### 我们在哪里下载 Django? @@ -80,13 +82,15 @@ Django 支持四个主要数据库（PostgreSQL，MySQL，Oracle 和 SQLite） 对于本文（和本模块的大部分），我们将使用将数据存储在文件中的 SQLite 数据库。SQLite 旨在用作轻量级数据库，不能支持高并发。然而，这确实是只读的应用程序的绝佳选择。 -> **备注：** 当你使用标准工具（django-admin）启动你的网站项目时，Django 将默认使用 SQLite。用来入门时，这是一个很好的选择，因为它不需要额外的配置和设置。 +> [!NOTE] +> 当你使用标准工具（django-admin）启动你的网站项目时，Django 将默认使用 SQLite。用来入门时，这是一个很好的选择，因为它不需要额外的配置和设置。 #### 安装本机系统还是 Python 虚拟环境中？ 当你安装 Python3 时，将获得一个由所有 Python3 代码共享的全局环境。虽然你可以在该环境中安装任何你喜欢的 Python 包，但是每次只能安装每个包的一个特定版本。 -> **备注：** 安装到全局环境的 Python 应用程序可能会相互冲突（例如如果它们依赖于同一包的不同版本）。 +> [!NOTE] +> 安装到全局环境的 Python 应用程序可能会相互冲突（例如如果它们依赖于同一包的不同版本）。 如果你把 Django 安装到默认/全局环境中，那么在该计算机上将只能定位到 Django 的一个版本。如果你想创建新的网站 (使用最新版本的 Django)，同时仍然维护依赖旧版本的网站，这可能是个问题。 @@ -100,7 +104,8 @@ Django 支持四个主要数据库（PostgreSQL，MySQL，Oracle 和 SQLite） 本节简要介绍了如何检查有哪些版本的 Python，并根据需要安装适用于 **Ubuntu Linux 16.04,macOS, and Windows 10**的新版本。 -> **备注：** 根据你的平台，你还可以从操作系统自己的软件包管理器或其他机制安装 Python / pip。对于大多数平台，你可以从下载所需的安装文件，并使用该平台特定的方法进行安装。 +> [!NOTE] +> 根据你的平台，你还可以从操作系统自己的软件包管理器或其他机制安装 Python / pip。对于大多数平台，你可以从下载所需的安装文件，并使用该平台特定的方法进行安装。 ### Ubuntu 18.04 @@ -173,7 +178,8 @@ Windows 安装程序默认包含 pip3 (Python 包管理器)。同样在命令提 pip3 list ``` -> **备注：** 安装包应该已把运行上述命令所需的一切设置完成。但如果你得到的消息是找不到 Python，那么你可能忘记将 Python 添加到系统路径中了。你可以通过再次运行安装包，选择"Modify"，并在下一页面中勾选 "Add Python to environment variables"来修复这个问题。 +> [!NOTE] +> 安装包应该已把运行上述命令所需的一切设置完成。但如果你得到的消息是找不到 Python，那么你可能忘记将 Python 添加到系统路径中了。你可以通过再次运行安装包，选择"Modify"，并在下一页面中勾选 "Add Python to environment variables"来修复这个问题。 ## 在 Python 虚拟环境中使用 Django @@ -258,7 +264,8 @@ source /usr/local/bin/virtualenvwrapper.sh 此处使用和 Ubuntu 相同的代码行，但是启动文件是主目录中叫做 **.bash_profile** 的隐藏文件。 -> **备注：** 如果找不到 **.bash_profile** 进行编辑，也可以使用 nano 在终端中打开它，命令看起来类似于： +> [!NOTE] +> 如果找不到 **.bash_profile** 进行编辑，也可以使用 nano 在终端中打开它，命令看起来类似于： > > ```bash > cd ~ # Navigate to my home directory @@ -303,7 +310,8 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get 现在你已进入虚拟环境，可以进行 Django 安装并开始开发。 -> **备注：** 从现在开始，在本文 (实际上是该模块) 中，请假定所有命令都在类似于我们上面设置的 Python 虚拟环境中运行。 +> [!NOTE] +> 从现在开始，在本文 (实际上是该模块) 中，请假定所有命令都在类似于我们上面设置的 Python 虚拟环境中运行。 ### 使用一个虚拟环境 @@ -334,7 +342,8 @@ py -3 -m django --version 1.10.10 ``` -> **备注：** 如果上面的 Windows 命令没有显示 django 模块，请尝试： +> [!NOTE] +> 如果上面的 Windows 命令没有显示 django 模块，请尝试： > > ```bash > python -m django --version @@ -342,7 +351,8 @@ py -3 -m django --version > > 在 Windows 中，Python 3 脚本是通过在命令前面加上`py -3`来启动的，尽管该脚本可能会因你的特定安装而有所不同。如果遇到命令问题，请尝试省略`-3`修饰符。在 Linux /macOS 中，命令是 python3。 -> **警告：** 本模块的其余部分使用 Linux 命令来调用 Python 3（`python3`）。如果你在 Windows 上工作，只需将此前缀替换为： `py -3` +> [!WARNING] +> 本模块的其余部分使用 Linux 命令来调用 Python 3（`python3`）。如果你在 Windows 上工作，只需将此前缀替换为： `py -3` ## 测试你的安装 @@ -377,7 +387,8 @@ Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C. ``` -> **备注：** 上面的命令显示了 Linux /macOS 命令。你可以忽略关于“15 unapplied migration(s)”的警告！ +> [!NOTE] +> 上面的命令显示了 Linux /macOS 命令。你可以忽略关于“15 unapplied migration(s)”的警告！ 一旦服务器运行，你可以通过本地 Web 浏览器打开`http://127.0.0.1:8000/`来查看该站点。你应该看到一个如下所示的网站： diff --git a/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md b/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md index 838d05895e57bf..d477a598c1e325 100644 --- a/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md +++ b/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md @@ -165,7 +165,8 @@ slug: Learn/Server-side/Django/django_assessment_blog - BlogListView（所有博客页面）使用预期的模板（例如默认模板） - BlogListView 以 5 个记录为 1 个分页（至少在第一页上） -> **备注：** 当然还有许多其他测试可以运行。请谨慎使用，但我们希望你至少进行上述测试。 +> [!NOTE] +> 当然还有许多其他测试可以运行。请谨慎使用，但我们希望你至少进行上述测试。 以下部分，显示了实现上述要求的站点的屏幕截图。 diff --git a/files/zh-cn/learn/server-side/django/forms/index.md b/files/zh-cn/learn/server-side/django/forms/index.md index 66f16182c5ba04..aab83b4bdd1109 100644 --- a/files/zh-cn/learn/server-side/django/forms/index.md +++ b/files/zh-cn/learn/server-side/django/forms/index.md @@ -104,7 +104,8 @@ Django 的表单处理，使用了我们在之前的教程中，学到的所有 Django 提供了许多工具和方法，来帮助你完成上述任务。最基本的是 `Form` 类，它简化了表单 HTML 和数据清理/验证的生成。在下一节中，我们将描述表单如何使用页面的实际示例，来允许图书馆员更新书本籍。 -> **备注：** 在我们讨论 Django 更“高级”的表单框架类时，了解 `Form` 的使用方式，将对你有所帮助。 +> [!NOTE] +> 在我们讨论 Django 更“高级”的表单框架类时，了解 `Form` 的使用方式，将对你有所帮助。 ## 续借表单 - 使用表单和功能视图 @@ -183,7 +184,8 @@ class RenewBookForm(forms.Form): 第二点是，如果某个值超出了我们的范围，我们会引发`ValidationError`，指定在输入无效值时，我们要在表单中显示的错误文本。上面的例子，也将这个文本包含在 [Django 的翻译函数](https://docs.djangoproject.com/zh-hans/2.0/topics/i18n/translation/)`ugettext_lazy()`中（导入为 `_()`），如果你想在稍后翻译你的网站，这是一个很好的做法。 -> **备注：** 在[表单和字段验证](https://docs.djangoproject.com/zh-hans/2.0/ref/forms/validation/)（Django docs）中验证表单还有其他很多方法和示例。例如，如果你有多个相互依赖的字段，则可以覆盖[Form.clean()](https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean) 函数并再次引发`ValidationError`。 +> [!NOTE] +> 在[表单和字段验证](https://docs.djangoproject.com/zh-hans/2.0/ref/forms/validation/)（Django docs）中验证表单还有其他很多方法和示例。例如，如果你有多个相互依赖的字段，则可以覆盖[Form.clean()](https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean) 函数并再次引发`ValidationError`。 这就是我们在这个例子中，对表单所需要了解的全部内容！ @@ -203,7 +205,8 @@ urlpatterns += [ URL 配置会将格式为 **/catalog/book/\/renew/** 的 URL，重定向到 **views.py** 中，名为`renew_book_librarian()` 的函数，并将`BookInstance` id 作为名为 `pk`的参数发送。只有 `pk`是正确格式化的 `uuid`，该模式才会匹配。 -> **备注：** 我们可以将捕获的 URL 数据，命名为“`pk`”，因为我们可以完全控制视图函数（我们不使用需要具有特定名称的参数的通用详细视图类）。然而，`pk`，“主键”primary key 的缩写，是一个合理的惯例！ +> [!NOTE] +> 我们可以将捕获的 URL 数据，命名为“`pk`”，因为我们可以完全控制视图函数（我们不使用需要具有特定名称的参数的通用详细视图类）。然而，`pk`，“主键”primary key 的缩写，是一个合理的惯例！ ### 视图 @@ -296,7 +299,8 @@ def renew_book_librarian(request, pk): 如果表单有效，那么我们可以开始使用数据，通过 `form.cleaned_data`属性访问它（例如 `data = form.cleaned_data['renewal_date']`）。这里我们只将数据保存到关联的`BookInstance` 对象的`due_back` 值中。 -> **警告：** 虽然你也可以通过请求直接访问表单数据（例如`request.POST['renewal_date']` 或 `request.GET['renewal_date']`（如果使用 GET 请求），但不建议这样做。清理后的数据是无害的、验证过的、并转换为 Python 友好类型。 +> [!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'/'处的主页。 @@ -370,7 +374,8 @@ def renew_book_librarian(request, pk): 表单代码相对简单。首先，我们声明表单标签，指定表单的提交位置（`action`）和提交数据的方法（在本例中为“HTTP POST”） - 如果你回想一下页面顶部的 HTML 表单概述，如图所示的空`action` ，意味着表单数据将被发布回页面的当前 URL（这是我们想要的！）。在标签内部，我们定义了`submit` 提交输入，用户可以按这个输入来提交数据。在表单标签内添加的`{% csrf_token %}` ，是 Django 跨站点伪造保护的一部分。 -> **备注：** 将`{% csrf_token %}` 添加到你创建的每个使用 `POST` 提交数据的 Django 模板中。这将减少恶意用户劫持表单的可能性。 +> [!NOTE] +> 将`{% csrf_token %}` 添加到你创建的每个使用 `POST` 提交数据的 Django 模板中。这将减少恶意用户劫持表单的可能性。 剩下的就是 `\{{form}}`模板变量，我们将其传递给上下文字典中的模板。也许不出所料，当如图所示使用时，它提供了所有表单字段的默认呈现，包括它们的标签、小部件、和帮助文本 - 呈现如下所示： @@ -392,7 +397,8 @@ def renew_book_librarian(request, pk): ``` -> **备注：** 它可能并不明显，因为我们只有一个字段，但默认情况下，每个字段都在其自己的表格行中定义（这就是变量在上面的`table` 表格标记内部的原因）。如果你引用模板变量`\{{ form.as_table }}`，会提供相同的渲染。 +> [!NOTE] +> 它可能并不明显，因为我们只有一个字段，但默认情况下，每个字段都在其自己的表格行中定义（这就是变量在上面的`table` 表格标记内部的原因）。如果你引用模板变量`\{{ form.as_table }}`，会提供相同的渲染。 如果你输入无效日期，你还会获得页面中呈现的错误列表（下面以**粗体**显示）。 @@ -441,7 +447,8 @@ def renew_book_librarian(request, pk): {% endif %} ``` -> **备注：** 请记住，你的测试登录需要具有“`catalog.can_mark_returned`”权限，才能访问续借书本页面（可能使用你的超级用户帐户）。 +> [!NOTE] +> 请记住，你的测试登录需要具有“`catalog.can_mark_returned`”权限，才能访问续借书本页面（可能使用你的超级用户帐户）。 你也可以手动构建这样的测试 URL - `http://127.0.0.1:8000/catalog/book//renew/` （可以通过导航到图书馆中的书本详细信息页面，获取有效的 bookinstance id，并复制`id` 字段）。 @@ -477,7 +484,8 @@ class RenewBookModelForm(ModelForm): fields = ['due_back',] ``` -> **备注：** 这可能看起来不像使用`Form` 那么简单（在这种情况下不是这样，因为我们只有一个字段）。但是，如果你有很多字段，它可以显着减少代码量！ +> [!NOTE] +> 这可能看起来不像使用`Form` 那么简单（在这种情况下不是这样，因为我们只有一个字段）。但是，如果你有很多字段，它可以显着减少代码量！ 其余信息来自模型字段的定义（例如标签、小部件、帮助文本、错误消息）。如果这些不太正确，那么我们可以在 `Meta`类中覆盖它们，指定包含要更改的字段、及其新值的字典。例如，在这种形式中，我们可能需要“更新日期”_Renewal date_ 字段的标签（而不是基于字段名称的默认值：截止日期 _Due date_），并且我们还希望我们的帮助文本，特定于此用例。下面的`Meta` 显示了如何覆盖这些字段，如果默认值不够，你可以类似地方式设置`widgets` 窗口小部件和`error_messages` 。 @@ -523,7 +531,8 @@ class RenewBookModelForm(ModelForm): 我们在上面的函数视图示例中，使用的表单处理算法，表示表单编辑视图中非常常见的模式。Django 通过创建基于模型创建、编辑和删除视图的[通用编辑视图](https://docs.djangoproject.com/zh-hans/2.0/ref/class-based-views/generic-editing/)，为你抽象出大部分“样板”。这些不仅处理“视图”行为，而且它们会自动从模型中为你创建表单类（`ModelForm`）。 -> **备注：** 除了这里描述的编辑视图之外，还有一个 [FormView](https://docs.djangoproject.com/zh-hans/2.0/ref/class-based-views/generic-editing/#formview)类，它位于我们的函数视图，和其他通用视图之间的“灵活性”与“编码工作”之间。使用 `FormView` ，你仍然需要创建表单，但不必实现所有标准表单处理模式。相反，你只需提供一个函数的实现，一旦知道提交有效，就会调用该函数。 +> [!NOTE] +> 除了这里描述的编辑视图之外，还有一个 [FormView](https://docs.djangoproject.com/zh-hans/2.0/ref/class-based-views/generic-editing/#formview)类，它位于我们的函数视图，和其他通用视图之间的“灵活性”与“编码工作”之间。使用 `FormView` ，你仍然需要创建表单，但不必实现所有标准表单处理模式。相反，你只需提供一个函数的实现，一旦知道提交有效，就会调用该函数。 在本节中，我们将使用通用编辑视图，来创建页面，以添加从我们的库中创建、编辑和删除`Author` 作者记录的功能 - 有效地提供管理站点一部分的基本重新实现（这可能很有用，如果你需要比管理站点能提供的、更加灵活的管理功能）。 @@ -611,7 +620,8 @@ urlpatterns += [ 作者的创建，更新和删除页面，现在已准备好进行测试（在这种情况下，我们不会将它们连接到站点侧栏，尽管如果你愿意，也可以这样做）。 -> **备注：** 敏锐的用户会注意到，我们没有采取任何措施，来防止未经授权的用户访问这些页面！我们将其作为练习留给你（提示：你可以使用`PermissionRequiredMixin` ，并创建新权限，或重用我们的`can_mark_returned`权限）。 +> [!NOTE] +> 敏锐的用户会注意到，我们没有采取任何措施，来防止未经授权的用户访问这些页面！我们将其作为练习留给你（提示：你可以使用`PermissionRequiredMixin` ，并创建新权限，或重用我们的`can_mark_returned`权限）。 ### 测试页面 diff --git a/files/zh-cn/learn/server-side/django/generic_views/index.md b/files/zh-cn/learn/server-side/django/generic_views/index.md index 1d1ad8160a028f..05edaea8588f20 100644 --- a/files/zh-cn/learn/server-side/django/generic_views/index.md +++ b/files/zh-cn/learn/server-side/django/generic_views/index.md @@ -70,7 +70,8 @@ class BookListView(generic.ListView): 就是这样！通用视图将查询数据库，以获取指定模型（`Book`）的所有记录，然后呈现位于 **/locallibrary/catalog/templates/catalog/book_list.html** 的模板（我们将在下面创建）。在模板中，你可以使用名为`object_list` 或 `book_list`的模板变量（即通常为“`the_model_name_list`”），以访问书本列表。 -> **备注：** 模板位置的这个尴尬路径不是印刷错误 - 通用视图在应用程序的`/application_name/templates/`目录中`（/catalog/templates/`），查找模板`/application_name/the_model_name_list.html`（在本例中为`catalog/book_list.html`）。 +> [!NOTE] +> 模板位置的这个尴尬路径不是印刷错误 - 通用视图在应用程序的`/application_name/templates/`目录中`（/catalog/templates/`），查找模板`/application_name/the_model_name_list.html`（在本例中为`catalog/book_list.html`）。 你可以添加属性，以更改上面的默认行为。例如，如果需要使用同一模型的多个视图，则可以指定另一个模板文件，或者如果`book_list`对于特定模板用例不直观，则可能需要使用不同的模板变量名称。可能最有用的变更，是更改/过滤返回的结果子集 - 因此，你可能会列出其他用户阅读的前 5 本书，而不是列出所有书本。 @@ -116,7 +117,8 @@ class BookListView(generic.ListView): - 然后添加新的上下文信息。 - 然后返回新的（更新的）上下文。 -> **备注：** 查看[内置的基于类的通用视图](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/)（Django 文档），了解更多可以执行的操作示例。 +> [!NOTE] +> 查看[内置的基于类的通用视图](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/)（Django 文档），了解更多可以执行的操作示例。 ### 创建列表视图模板 @@ -184,7 +186,8 @@ class BookListView(generic.ListView): 我们还可以在模板中，调用模型中的函数 - 在这里，我们调用`Book.get_absolute_url()`，来获取可用于显示关联详细记录的 URL。这项工作提供的函数没有任何参数（没有办法传递参数！） -> **备注：** 在模板中调用函数时，我们必须要小心“副作用”。在这里我们只需要显示一个 URL，但是一个函数几乎可以做任何事情 - 我们不想仅仅通过渲染模板，而删除了我们的数据库（例如）！ +> [!NOTE] +> 在模板中调用函数时，我们必须要小心“副作用”。在这里我们只需要显示一个 URL，但是一个函数几乎可以做任何事情 - 我们不想仅仅通过渲染模板，而删除了我们的数据库（例如）！ #### 更新基本模板 @@ -220,13 +223,16 @@ urlpatterns = [ 在这里，我们使用 `''` 来捕获 book id，它必须是一个整数，并将其作为名为 `pk` 的参数（主键的缩写）传递给视图。 -> **备注：** 如前所述，我们匹配的 URL 实际上是 `catalog/book/`（因为我们在应用程序 **catalog** 中，假定使用`/catalog/`）。 +> [!NOTE] +> 如前所述，我们匹配的 URL 实际上是 `catalog/book/`（因为我们在应用程序 **catalog** 中，假定使用`/catalog/`）。 -> **警告：** 基于类的通用详细信息视图，需要传递一个名为 **pk** 的参数。如果你正在编写自己的函数视图，则可以使用你喜欢的任何参数名称，或者，确实也可以，在未命名的参数中传递信息。 +> [!WARNING] +> 基于类的通用详细信息视图，需要传递一个名为 **pk** 的参数。如果你正在编写自己的函数视图，则可以使用你喜欢的任何参数名称，或者，确实也可以，在未命名的参数中传递信息。 #### 高级路径匹配/正则表达式入门 -> **备注：** 完成教程并不需要此部分说明！我们提供它，是因为了解此可选的部分，未来可能对你使用 Django 有帮助。 +> [!NOTE] +> 完成教程并不需要此部分说明！我们提供它，是因为了解此可选的部分，未来可能对你使用 Django 有帮助。 `path()`提供的模式匹配非常简单，对于你只想捕获任何字符串或整数的（非常常见的）情况非常有用。如果需要更精细的过滤（例如，仅过滤具有一定数量字符的字符串），则可以使用 [re_path()](https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.re_path) 方法。 @@ -367,7 +373,8 @@ re_path(r'^book/(?P\d+)$', views.BookDetailView.as_view(), name='book-detail 你可以在一个匹配中捕获多个模式，从而在 URL 中，编码许多不同的信息。 -> **备注：** 作为一项挑战，请考虑如何对网址进行编码，以列出特定年份，月份，日期的所有图书，以及可用于匹配它的规则表达式 RE。 +> [!NOTE] +> 作为一项挑战，请考虑如何对网址进行编码，以列出特定年份，月份，日期的所有图书，以及可用于匹配它的规则表达式 RE。 #### 在 URL 地图中传递其他选项 @@ -380,7 +387,8 @@ path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'), ``` -> **备注：** 额外选项和命名捕获的模式，二者都作为命名参数传递给视图。如果对捕获的模式和额外选项使用**相同的名称**，则仅将捕获的模式值发送到视图（将删除附加选项中指定的值）。 +> [!NOTE] +> 额外选项和命名捕获的模式，二者都作为命名参数传递给视图。如果对捕获的模式和额外选项使用**相同的名称**，则仅将捕获的模式值发送到视图（将删除附加选项中指定的值）。 ### 视图 (基于类别) @@ -451,7 +459,8 @@ def book_detail_view(request,pk): {% endblock %} ``` -> **备注：** 上面模板中的作者链接，有一个空 URL，因为我们尚未创建作者详细信息页面。一旦创建了，你应该像这样更新 URL： +> [!NOTE] +> 上面模板中的作者链接，有一个空 URL，因为我们尚未创建作者详细信息页面。一旦创建了，你应该像这样更新 URL： > > ```python > \{{ book.author }} @@ -474,7 +483,8 @@ def book_detail_view(request,pk): 需要此方法，是因为你仅在关系的“一”侧声明 `ForeignKey`（一对多）字段。由于你没有做任何事情，来声明其他（“多”）模型中的关系，因此它没有任何字段，来获取相关记录集。为了解决这个问题，Django 构造了一个适当命名的“反向查找”函数，你可以使用它。函数的名称，是通过对声明 `ForeignKey` 的模型名称，转化为小写来构造的，然后是`_set`（即，在 `Book`中创建的函数是 `bookinstance_set()`）。 -> **备注：** 这里我们使用`all()`来获取所有记录（默认值）。虽然你可以使用`filter()`方法获取代码中的记录子集，但你无法直接在模板中执行此操作，因为你无法指定函数的参数。 +> [!NOTE] +> 这里我们使用`all()`来获取所有记录（默认值）。虽然你可以使用`filter()`方法获取代码中的记录子集，但你无法直接在模板中执行此操作，因为你无法指定函数的参数。 > > 还要注意，如果你没有定义顺序（在基于类的视图或模型上），你还会看到开发服务器中的错误，如下所示： > @@ -519,7 +529,8 @@ def book_detail_view(request,pk): 此时，我们应该创建了显示书本列表，和书本详细信息页面所需的所有内容。运行服务器（`python3 manage.py runserver`），并打开浏览器到 。 -> **警告：** 请还不要点击任何作者、或作者详细信息链接 - 你将在挑战练习中，创建这些链接！ +> [!WARNING] +> 请还不要点击任何作者、或作者详细信息链接 - 你将在挑战练习中，创建这些链接！ 单击所有书籍链接 **All books** ，以显示书籍列表。 diff --git a/files/zh-cn/learn/server-side/django/home_page/index.md b/files/zh-cn/learn/server-side/django/home_page/index.md index d4d053602aa410..51683a6279b294 100644 --- a/files/zh-cn/learn/server-side/django/home_page/index.md +++ b/files/zh-cn/learn/server-side/django/home_page/index.md @@ -61,7 +61,8 @@ slug: Learn/Server-side/Django/Home_page 相比之下，最后两个 URL 用于显示有关特定书籍或作者的详细信息 - 这些 URL 将编码要显示在 URL 中的项目的标识（如上所示\）。URL 映射器可以提取编码信息并将其传递给视图，然后将动态地确定从数据库获取哪些信息。通过对我们的 URL 中的信息进行编码，我们只需要一个 URL 映射，视图和模板来处理每本书（或作者）。 -> **备注：** Django 允许你以任何你喜欢的方式构建你的 URL - 你可以如上所示编码 URL 正文中的信息，或使用 URL `GET`参数（例如 `/book/?id=6`）。无论你使用哪种方法，URL 都应保持清洁，逻辑和可读性 ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)). +> [!NOTE] +> Django 允许你以任何你喜欢的方式构建你的 URL - 你可以如上所示编码 URL 正文中的信息，或使用 URL `GET`参数（例如 `/book/?id=6`）。无论你使用哪种方法，URL 都应保持清洁，逻辑和可读性 ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)). > > Django 文档倾向于在 URL 的主体中推荐编码信息，这是他们觉得鼓励更好的 URL 设计的实践。 @@ -71,7 +72,8 @@ slug: Learn/Server-side/Django/Home_page 我们创建的第一个页面将会是索引页（catalog/)。这会显示一些静态 HTML，以及数据库中不同记录的一些计算的“计数“。为了使其工作，我们必须创建一个 URL 映射，视图和模版。 -> **备注：** 本节应该特别注意。一些”材料“在所有页面都通用。 +> [!NOTE] +> 本节应该特别注意。一些”材料“在所有页面都通用。 ### URL 映射 @@ -87,7 +89,8 @@ urlpatterns = [ 如果检测到 URL 模式''，(views.index——在 view\.py 中函数命名 index() ）将被调用。URL 模式是[Python 正则表达式](https://docs.python.org/3/library/re.html) (RE)。我们将在本教程中进一步介绍 RE。 -> **备注：** 在 **/locallibrary/locallibrary/urls.py** +> [!NOTE] +> 在 **/locallibrary/locallibrary/urls.py** > > ```python > urlpatterns += [ @@ -105,7 +108,8 @@ urlpatterns = [ Home. ``` -> **备注：** 我们当然可以硬编码上面的链接（如：`Home`），但是如果我们改变了主页的模式，模版将不再正确链接，使用反向网址映射会更灵活和强大。 +> [!NOTE] +> 我们当然可以硬编码上面的链接（如：`Home`），但是如果我们改变了主页的模式，模版将不再正确链接，使用反向网址映射会更灵活和强大。 ### View (基于功能) @@ -153,7 +157,8 @@ def index(request): 模版是定义一个文件（例如 HTML 页面）的结构与布局的文本文件，其中占位符用于表示实际内容。Django 将自动在应用程序“templates”目录查找模版。所以例如，在我们刚刚加的索引页，`render()` 函数会期望能够找到 **/locallibrary/catalog/templates/index.html** 这个文件，如何找不到该文件，则会引发错误。如果保存以前的更改并返回到浏览器，你可以看到访问 `127.0.0.1:8000` 现在将提供你一个相当直观的错误信息“**TemplateDoesNotExist at /catalog/**”以及其他详细信息。 -> **备注：** Django 将根据你的项目的设置文件，来查看模版的许多位置 (在已安装的应用程序中进行搜索是默认设置). 你可以查阅更多关于 Django 如何找到模版以及它支持的模版格式在[（Templates](https://docs.djangoproject.com/en/1.10/topics/templates/) ）。 +> [!NOTE] +> Django 将根据你的项目的设置文件，来查看模版的许多位置 (在已安装的应用程序中进行搜索是默认设置). 你可以查阅更多关于 Django 如何找到模版以及它支持的模版格式在[（Templates](https://docs.djangoproject.com/en/1.10/topics/templates/) ）。 #### 扩展模版 @@ -161,7 +166,8 @@ def index(request): 例如，基本模版 `base_generic.html` 可能看起来像下面的文本。正如你所见的，它包含一些“常见“HTML”和标题，侧边栏和使用命名 `block` 和 `endblock` 模版标记（粗体显示）标记的内容部分。块可以是空的，或者包含将被派生页“默认使用”的内容。 -> **备注：** 模版标签就像你可以在模版中使用的函数循环列表，基于变量的值执行条件操作等。除了模版标签，模版语法允许你引用模版变量（通过从视图进入模版），并使用模版过滤器，其中重新格式化变量（例如，将字符串设置为小写）。 +> [!NOTE] +> 模版标签就像你可以在模版中使用的函数循环列表，基于变量的值执行条件操作等。除了模版标签，模版语法允许你引用模版变量（通过从视图进入模版），并使用模版过滤器，其中重新格式化变量（例如，将字符串设置为小写）。 ```django @@ -196,7 +202,8 @@ def index(request): 下面就是我们计划的基本模版用于本地图书馆网站。正如所看到的，内容包括一些 HTML 和定义块 `title` ，`sidebar` 和 `content`。我们有默认的 `title`（当然我们可以改）和默认的所以书籍和作者的链接列表 `sidebar` （我们可能并不会怎么改，但需要时，我们通过把想法放入块`block`中，比如想法是—允许范围）。 -> **备注：** 我们再介绍两个额外的模版标签： `url` 和 `load static`。下文中我们会详细介绍。 +> [!NOTE] +> 我们再介绍两个额外的模版标签： `url` 和 `load static`。下文中我们会详细介绍。 创建一个新的文件 — **/locallibrary/catalog/templates/_base_generic.html_** — 写入如下代码 @@ -275,7 +282,8 @@ def index(request): 在动态内容部分，我们的占位符（模版变量），是给我们想要视图的信息声明。变量使用“双大括号“或者“句柄“语法进行标记。 -> **备注：** 你可以轻松地识别是否使用变量或模版标签（函数），因为变量具有双括号 (`\{{ num_books }}`) 而标记被包含在带有百分比符号 (`{% extends "base_generic.html" %}`) 的单个大括号中。 +> [!NOTE] +> 你可以轻松地识别是否使用变量或模版标签（函数），因为变量具有双括号 (`\{{ num_books }}`) 而标记被包含在带有百分比符号 (`{% extends "base_generic.html" %}`) 的单个大括号中。 这里要注意的重要事情是这些变量用我们视图函数`render`中的字典—注入 `context` （下面）；当渲染模版时，这些将替换为相关联的值。 @@ -309,7 +317,8 @@ return render( style="width:555px;height:540px;" /> ``` -> **备注：** 上面的更改指定文件所在的位置，但 Django 默认不提供它们。当我们[created the website skeleton](/zh-CN/docs/Learn/Server-side/Django/skeleton_website),我们在全局 URL 映射器 r (**/locallibrary/locallibrary/urls.py**) 中开发 Web 服务器提供服务，你仍然需要安排它们在生产中投放。我们接下来看一看 +> [!NOTE] +> 上面的更改指定文件所在的位置，但 Django 默认不提供它们。当我们[created the website skeleton](/zh-CN/docs/Learn/Server-side/Django/skeleton_website),我们在全局 URL 映射器 r (**/locallibrary/locallibrary/urls.py**) 中开发 Web 服务器提供服务，你仍然需要安排它们在生产中投放。我们接下来看一看 更多内容—[Managing static files](https://docs.djangoproject.com/en/1.10/howto/static-files/) (Django docs). @@ -329,7 +338,8 @@ return render( ![Index page for LocalLibrary website](index_page_ok.png) -> **备注：** 由于尚未定义这些网页的网址，视图和模板，因此你将无法使用“**所有图书**和**所有作者**”链接（目前我们刚刚在 `base_generic.html` 模板中插入了这些链接的占位符） +> [!NOTE] +> 由于尚未定义这些网页的网址，视图和模板，因此你将无法使用“**所有图书**和**所有作者**”链接（目前我们刚刚在 `base_generic.html` 模板中插入了这些链接的占位符） ## 挑战自己 diff --git a/files/zh-cn/learn/server-side/django/index.md b/files/zh-cn/learn/server-side/django/index.md index 7616f7620b9d8a..35dd633ffbd020 100644 --- a/files/zh-cn/learn/server-side/django/index.md +++ b/files/zh-cn/learn/server-side/django/index.md @@ -13,7 +13,8 @@ Django 是使用 Python 语言编写的一个广受欢迎且功能完整的服 最好能有基本的编程概念并了解 [Python](/zh-CN/docs/Glossary/Python) 语言，但其并不是理解本教程的核心概念的必然条件。 -> **备注：** 对于初学者来说，Python 是最容易阅读和理解的编程语言之一。也就是说，如果你想更好的理解本教程，网上有很多免费书籍及免费教程可供参考学习（建议初学者查看 Python 官网的 [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) 教程）。 +> [!NOTE] +> 对于初学者来说，Python 是最容易阅读和理解的编程语言之一。也就是说，如果你想更好的理解本教程，网上有很多免费书籍及免费教程可供参考学习（建议初学者查看 Python 官网的 [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) 教程）。 ## 指南 diff --git a/files/zh-cn/learn/server-side/django/introduction/index.md b/files/zh-cn/learn/server-side/django/introduction/index.md index e3bcbbc0ab32a5..53b94ee6eee9af 100644 --- a/files/zh-cn/learn/server-side/django/introduction/index.md +++ b/files/zh-cn/learn/server-side/django/introduction/index.md @@ -67,7 +67,8 @@ Django 最初由 2003 年到 2005 年间由负责创建和维护报纸网站的 Django 不断发展壮大—从 2008 年 9 月的第一个里程碑版本（1.0）到最近发布的（1.11）-（2017）版本。每个版本都添加了新功能和错误修复，从支持新类型的数据库，模版引擎和缓存，到添加“通用”视图函数和类（这减少了开发人员必须编写的代码量）一些编程任务。 -> **备注：** 查看 Django 网站上 [发行说明](https://docs.djangoproject.com/en/1.10/releases/)，看看最近版本发生了什么变化，以及 Django 能做多少工作。 +> [!NOTE] +> 查看 Django 网站上 [发行说明](https://docs.djangoproject.com/en/1.10/releases/)，看看最近版本发生了什么变化，以及 Django 能做多少工作。 Django 现在是一个蓬勃发展的合作开源项目，拥有数千个用户和贡献者。虽然它仍然具有反映其起源的一些功能，但 Django 已经发展成为能够开发任何类型的网站的多功能框架。 @@ -105,7 +106,8 @@ Django 网络应用程序通常将处理每个步骤的代码分组到单独的 - **Templates:** 模板 是定义文件（例如 HTML 页面）的结构或布局的文本文件，用于表示实际内容的占位符。一个视图可以使用 HTML 模板，从数据填充它动态地创建一个 HTML 页面模型。可以使用模板来定义任何类型的文件的结构; 它不一定是 HTML！ -> **备注：** Django 将此组织称为“模型视图模板（MVT）”架构。它与更加熟悉的 [Model View Controller](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 架构有许多相似之处。 +> [!NOTE] +> Django 将此组织称为“模型视图模板（MVT）”架构。它与更加熟悉的 [Model View Controller](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 架构有许多相似之处。 以下部分将为你提供 Django 应用程序的这些主要部分的想法（稍后我们将在进一步详细介绍后，我们将在开发环境中进行更详细的介绍）。 @@ -120,7 +122,8 @@ urlpatterns = [ ] ``` -> **备注：** 一点点 Python: +> [!NOTE] +> 一点点 Python: > > - 该 `urlpatterns` 对象的列表 url() 功能。在 Python 中，使用方括号定义列表。项目以逗号分隔，并可能有一个 [可选的逗号](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). 例如：`[item1, item2, item3,]`. > - 该模式的奇怪的语法称为正则表达式。我们将在后面的文章中讨论这些内容！ @@ -144,7 +147,8 @@ def index(request): return HttpResponse('Hello from Django!') ``` -> **备注：** 一点点 Python: +> [!NOTE] +> 一点点 Python: > > - [Python 模块](https://docs.python.org/3/tutorial/modules.html) 是函数的“库”，存储在单独的文件中，我们可能想在我们的代码中使用它们。在这里我们只从 django.http 模块导入了 HttpResponse 对象，使我们可以在视图中使用它：`from django.http import HttpResponse` 还有其他方法可以从模块导入一些或所有对象。 > - 如上所示，使用`def`关键字声明函数，在函数名称后面的括号中列出命名参数；整行以冒号结尾。注意下一行是否都进行了**缩进**。缩进很重要，因为它指定代码行在该特定块内 (强制缩进是 Python 的一个关键特征，也是 Python 代码很容易阅读的一个原因)。 @@ -174,7 +178,8 @@ class Team(models.Model): team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') ``` -> **备注：** Python 小知识： +> [!NOTE] +> Python 小知识： > > - Python 支持“面向对象编程”，这是一种编程风格，我们将代码组织到对象中，其中包括用于对该对象进行操作的相关数据和功能。对象也可以从其他对象继承／扩展／派生，允许相关对象之间的共同行为被共享。在 Python 中，我们使用关键字 **Class** 定义对象的“蓝图”。我们可以根据类中的模型创建类型的多个 特定 实例。 > - 例如，我们有个 **Team** 类，它来自于**Model**类。这意味着它是一个模型，并且将包含模型的所有方法，但是我们也可以给它自己的专门功能。在我们的模型中，我们定义了我们的数据库需要存储我们的数据字段，给出它们的具体名称。Django 使用这些定义（包括字段名称）来创建底层数据库。 diff --git a/files/zh-cn/learn/server-side/django/models/index.md b/files/zh-cn/learn/server-side/django/models/index.md index e8247c7ae7493e..58bfba149e68fd 100644 --- a/files/zh-cn/learn/server-side/django/models/index.md +++ b/files/zh-cn/learn/server-side/django/models/index.md @@ -46,7 +46,8 @@ Django 网络应用通过作为模型被参照的 Python 对象访问并管理 ![LocalLibrary Model UML - v3](local_library_model_uml_v0_1.png) -> **备注：** 下一部分提供了基本的关于模型如何被定义和使用的解释。边阅读，边考虑以下我们是如何根据以上的图标构建数据库内的模型的。 +> [!NOTE] +> 下一部分提供了基本的关于模型如何被定义和使用的解释。边阅读，边考虑以下我们是如何根据以上的图标构建数据库内的模型的。 ## Model primer @@ -209,7 +210,8 @@ a_record = MyModelName(my_field_name="Instance #1") a_record.save() ``` -> **备注：** 如果没有任何的栏位被宣告为`主鍵`，这笔新的纪录会被自动的赋予一个主键并将主键栏命名为`id`。上例的那笔资料被储存后，试着查询这笔纪录会看到它被自动赋予 1 的编号。 +> [!NOTE] +> 如果没有任何的栏位被宣告为`主鍵`，这笔新的纪录会被自动的赋予一个主键并将主键栏命名为`id`。上例的那笔资料被储存后，试着查询这笔纪录会看到它被自动赋予 1 的编号。 你可以透过「点 (dot) 的语法」取得或变更这笔新资料的栏位 (字段)。你需要呼叫`save()`将变更过的资料存进资料库： @@ -227,7 +229,8 @@ a_record.save() 你可以使用模型的 `objects` 属性 (由 base class 提供) 搜寻符合某个条件的纪录 -> **备注：** 要用"抽象的"模型还有栏位说明怎么搜寻纪录可能会有点令人困惑。我们会以一个 Book 模型，其包含`title`与`genre`字段，而 genre 也是一个仅有`name`一个字段的模型。 +> [!NOTE] +> 要用"抽象的"模型还有栏位说明怎么搜寻纪录可能会有点令人困惑。我们会以一个 Book 模型，其包含`title`与`genre`字段，而 genre 也是一个仅有`name`一个字段的模型。 我们可以取得一个模型的所有纪录，为一个 `QuerySet` 使用`objects.all()`。`QuerySet` 是一个可迭代的物件，表示他含有多个物件，而我们可以藉由迭代/回圈取得每个物件。 @@ -250,7 +253,8 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() books_containing_genre = Book.objects.filter(genre__name__icontains='fiction') # Will match on: Fiction, Science fiction, non-fiction etc. ``` -> **备注：** 你可以用下划线来表示不同关系 (`ForeignKey`/`ManyToManyField`) .例如，一本书有不同的类型，用“cover“关系可能会帮助起一个参数名字 `type__cover__name__exact='hard'.` +> [!NOTE] +> 你可以用下划线来表示不同关系 (`ForeignKey`/`ManyToManyField`) .例如，一本书有不同的类型，用“cover“关系可能会帮助起一个参数名字 `type__cover__name__exact='hard'.` 还有很多是你可以用索引 (queries) 来做的，包含从相关的模型做向后查询 (backwards searches)、连锁过滤器 (chaining filters)、回传「值的小集合」等。更多资讯可以到 [Making queries](https://docs.djangoproject.com/en/2.0/topics/db/queries/) (Django Docs) 查询。 @@ -374,7 +378,8 @@ We additionally declare a few new types of field: The model `__str__()` represents the `BookInstance` object using a combination of its unique id and the associated `Book`'s title. -> **备注：** A little Python: +> [!NOTE] +> A little Python: > > - The value returned by `__str__()` is a _formatted string_. Within the string we use `%s` to declare "placeholders'. After the string we specify `%` and then a tuple containing the values to be inserted in the placeholders. If you just have one placeholder then you can omit the tuple — e.g. `'My value: %s' % variable.` > diff --git a/files/zh-cn/learn/server-side/django/sessions/index.md b/files/zh-cn/learn/server-side/django/sessions/index.md index 1e642eafaa4812..cacb71505529ce 100644 --- a/files/zh-cn/learn/server-side/django/sessions/index.md +++ b/files/zh-cn/learn/server-side/django/sessions/index.md @@ -67,7 +67,8 @@ MIDDLEWARE = [ 下面的代码片段，显示了如何使用与当前会话（浏览器）关联的密钥“`my_car`”来获取，设置和删除某些数据。 -> **备注：** 关于 Django 的一个好处是，你不需要考虑在你的视图中，将会话与当前请求联系起来的机制。如果我们在视图中，使用下面的片段，我们就知道有关`my_car`的信息，仅与发送当前请求的浏览器相关联。 +> [!NOTE] +> 关于 Django 的一个好处是，你不需要考虑在你的视图中，将会话与当前请求联系起来的机制。如果我们在视图中，使用下面的片段，我们就知道有关`my_car`的信息，仅与发送当前请求的浏览器相关联。 ```python # Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present @@ -104,7 +105,8 @@ request.session['my_car']['wheels'] = 'alloy' request.session.modified = True ``` -> **备注：** 你可以通过将`SESSION_SAVE_EVERY_REQUEST = True`添加到项目设置（**locallibrary/locallibrary/settings.py**），以更改站点行为，站点将在每个请求上更新数据库/发送 cookie。 +> [!NOTE] +> 你可以通过将`SESSION_SAVE_EVERY_REQUEST = True`添加到项目设置（**locallibrary/locallibrary/settings.py**），以更改站点行为，站点将在每个请求上更新数据库/发送 cookie。 ## 简单的例子 - 获取访问次数 @@ -133,7 +135,8 @@ def index(request): 这里，我们首先得到'`num_visits`'会话密钥的值，如果之前没有设置，则将值设置为 0。每次收到请求时，我们都会递增该值，并将其存回会话中（下次用户访问该页面时）。然后将`num_visits`变量，传递给上下文变量中的模板。 -> **备注：** 我们也可能会测试浏览器中是否支持 cookie（请参阅[如何使用会话](https://docs.djangoproject.com/en/2.0/topics/http/sessions/)作为示例），或设计我们的 UI，以便无论 cookie 是否受支持都无关紧要。 +> [!NOTE] +> 我们也可能会测试浏览器中是否支持 cookie（请参阅[如何使用会话](https://docs.djangoproject.com/en/2.0/topics/http/sessions/)作为示例），或设计我们的 UI，以便无论 cookie 是否受支持都无关紧要。 将以下区块底部那一行，添加到主 HTML 模板（**/locallibrary/catalog/templates/index.html**）的“动态内容”部分底部，以显示上下文变量： diff --git a/files/zh-cn/learn/server-side/django/skeleton_website/index.md b/files/zh-cn/learn/server-side/django/skeleton_website/index.md index 2129faf583051a..0b8e617ad79191 100644 --- a/files/zh-cn/learn/server-side/django/skeleton_website/index.md +++ b/files/zh-cn/learn/server-side/django/skeleton_website/index.md @@ -37,7 +37,8 @@ slug: Learn/Server-side/Django/skeleton_website 1. 使用 django-admin 工具创建工程的文件夹，基本的文件模板和工程管理脚本（**manage.py**）。 2. 用**manage.py** 创建一个或多个应用。 - > **备注：** 一个网站可能由多个部分组成，比如，主要页面，博客，wiki，下载区域等。Django 鼓励将这些部分作为分开的应用开发。如果这样的话，在需要可以在不同的工程中复用这些应用。 + > [!NOTE] + > 一个网站可能由多个部分组成，比如，主要页面，博客，wiki，下载区域等。Django 鼓励将这些部分作为分开的应用开发。如果这样的话，在需要可以在不同的工程中复用这些应用。 3. 在工程里注册新的应用。 4. 为每个应用分配 url。 @@ -96,7 +97,8 @@ locallibrary 项目的子文件夹是整个网站的进入点： python3 manage.py startapp catalog ``` -> **备注：** Linux/Mac OS X 应用可以使用上面的命令。在 windows 平台下应该改为： `py -3 manage.py startapp catalog` +> [!NOTE] +> Linux/Mac OS X 应用可以使用上面的命令。在 windows 平台下应该改为： `py -3 manage.py startapp catalog` > > 如果你是 windows 系统，在这个部分用`py -3` 替代`python3`。 @@ -123,7 +125,8 @@ locallibrary/ - 一个*migration*文件夹，用来存储“migrations”——当你修改你的数据模型时，这个文件会自动升级你的数据库。 - **\_\_init\_\_.py** — 一个空文件，Django/Python 会将这个文件作为[Python 包](https://docs.python.org/3/tutorial/modules.html#packages)并允许你在项目的其他部分使用它。 -> **备注：** 你注意到上面的文件里有些缺失嘛？尽管有 views 和 models 文件，可是 url 映射，网站模板，静态文件在哪里呢？我们会在接下来的部分展示如何创建它们（并不是每个网站都需要，不过这个例子需要） +> [!NOTE] +> 你注意到上面的文件里有些缺失嘛？尽管有 views 和 models 文件，可是 url 映射，网站模板，静态文件在哪里呢？我们会在接下来的部分展示如何创建它们（并不是每个网站都需要，不过这个例子需要） ## 注册 catalog 应用 @@ -145,7 +148,8 @@ INSTALLED_APPS = [ 新的这行详细说明了应用配置文件在 (`CatalogConfig`) **/locallibrary/catalog/apps.py** 里，当你创建应用时就完成了这个过程。 -> **备注：** 注意到 `INSTALLED_APPS` 已经有许多其他的应用了（还有 `MIDDLEWARE`，在 settings 的下面）。这些应用为 [Django administration site](/zh-CN/docs/Learn/Server-side/Django/Admin_site) 提供了支持和许多功能（包括会话，认证系统等）。 +> [!NOTE] +> 注意到 `INSTALLED_APPS` 已经有许多其他的应用了（还有 `MIDDLEWARE`，在 settings 的下面）。这些应用为 [Django administration site](/zh-CN/docs/Learn/Server-side/Django/Admin_site) 提供了支持和许多功能（包括会话，认证系统等）。 ## 配置数据库 @@ -209,7 +213,8 @@ urlpatterns = [ URL 映射通过`urlpatterns` 变量管理，它是`path()` 函数的一个 Python 列表结构。每个`path()`函数要么将 URL 式样 (URL pattern) 关联到特定视图 (_specific view)_，将在模式匹配时显示；要么关联到某个 URL 式样列表的测试代码。 (第二种情况下，URL 式样是目标模型里的“base URL”). `urlpatterns` 列表最开始定义了一个函数，这个函数将所有带有模型 _admin/_ 的 URL 映射到模块`admin.site.urls`。这个函数包含了 Administration 应用自己的 URL 映射定义。 -> **备注：** path() 中的路由是一个字符串，用于定义要匹配的 URL 模式。该字符串可能包括一个命名变量（尖括号中） +> [!NOTE] +> path() 中的路由是一个字符串，用于定义要匹配的 URL 模式。该字符串可能包括一个命名变量（尖括号中） > > 例：`'catalog//'`。此模式将匹配如 **/catalog/_any_chars_/** 的 URL，并将 any_chars 作为具有参数名称 `id` 的字符串传递给视图。我们将在后面的主题中进一步讨论路径方法和路由模式 @@ -260,7 +265,8 @@ from django.conf.urls.static import static urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) ``` -> **备注：** 有很多方法扩展`urlpatterns` 列表 (在上面的代码里我们通过 `+=` 运算符来区分新旧代码)。我们同样可以用原先列表的定义： +> [!NOTE] +> 有很多方法扩展`urlpatterns` 列表 (在上面的代码里我们通过 `+=` 运算符来区分新旧代码)。我们同样可以用原先列表的定义： > > ```python > urlpatterns = [ @@ -300,19 +306,22 @@ python3 manage.py makemigrations python3 manage.py migrate ``` -> **警告：** 每次模型改变，都需要运行以上命令，来影响需要存储的数据结构（包括添加和删除整个模型和单个字段）。 +> [!WARNING] +> 每次模型改变，都需要运行以上命令，来影响需要存储的数据结构（包括添加和删除整个模型和单个字段）。 该 **`makemigrations`** 命令创建（但不适用）项目中安装的所有应用程序的迁移（你可以指定应用程序名称，也可以为单个项目运行迁移）。这让你有机会在应用这些迁移之前检查这些迁移代码—当你是 Django 专家时，你可以选择稍微调整它们。 这 **`migrate`** 命令 明确应用迁移你的数据库（Django 跟踪哪些已添加到当前数据库）。 -> **备注：** 看 [Migrations](https://docs.djangoproject.com/en/1.10/topics/migrations/) (Django docs) ，了解较少使用的迁移命令的其他信息。 +> [!NOTE] +> 看 [Migrations](https://docs.djangoproject.com/en/1.10/topics/migrations/) (Django docs) ，了解较少使用的迁移命令的其他信息。 ### 运行网站 在开发期间，你首先要使用开发网络服务器和浏览你本机的浏览器，来测试你的网站。 -> **备注：** 这个开发网络服务器并不够强大以及不足以用于生产使用，但是它能非常容易得使你在开发期间，获得你的 Django 网站和运行它，以此来进行快速测试。 +> [!NOTE] +> 这个开发网络服务器并不够强大以及不足以用于生产使用，但是它能非常容易得使你在开发期间，获得你的 Django 网站和运行它，以此来进行快速测试。 > 默认情况下，服务器会开通（`http://127.0.0.1:8000/`),但你也可以选择其他端口。有关更多信息，查阅（[django-admin and manage.py: runserver](https://docs.djangoproject.com/en/1.10/ref/django-admin/#runserver)）(Django docs). 通过调用 `runserver` 命令运行 Web 服务器（与**manage.py**位于同一目录下）： @@ -335,11 +344,13 @@ python3 manage.py runserver 别担心，这个错误页面是预期结果。因为我们没有在 `catalogs.urls` 模块中定义任何页面/网址。**（留意**：当我们导航网站根目录 URL 时，我们被重定向到了**／catalog 。）** -> **备注：** 上面的页面展示了一个重要的 Django 功能—自动调试日志记录。每当找不到页面，或者代码引发任何错误，就会显示错误页面，其中会提供有用的信息。在这种情况下，你可以看到我们提供的 URL 与我们任何 URL 模式都不匹配（像列出的那样）。生产环境中，日志功能将被关闭（当我们将网站存放在网络上时），这种情况下，将提供的信息量更少，但用户友好的页面。 +> [!NOTE] +> 上面的页面展示了一个重要的 Django 功能—自动调试日志记录。每当找不到页面，或者代码引发任何错误，就会显示错误页面，其中会提供有用的信息。在这种情况下，你可以看到我们提供的 URL 与我们任何 URL 模式都不匹配（像列出的那样）。生产环境中，日志功能将被关闭（当我们将网站存放在网络上时），这种情况下，将提供的信息量更少，但用户友好的页面。 这个时候，我们知道 Django 正在工作。 -> **备注：** 每当进行重大更改时，都应重新运行迁移并重新测试站点。这并不需要很长时间。 +> [!NOTE] +> 每当进行重大更改时，都应重新运行迁移并重新测试站点。这并不需要很长时间。 ## 挑战自我 diff --git a/files/zh-cn/learn/server-side/django/testing/index.md b/files/zh-cn/learn/server-side/django/testing/index.md index a8fe88dfdf8886..7782dd5ab48c52 100644 --- a/files/zh-cn/learn/server-side/django/testing/index.md +++ b/files/zh-cn/learn/server-side/django/testing/index.md @@ -41,7 +41,8 @@ LocalLibrary 目前有页面显示所有书本和作者的列表，书本和作 - 集成测试 - : 验证组件分组在一起使用时的工作方式。集成测试了解组件之间所需的交互，但不一定了解每个组件的内部操作。它们可能涵盖整个网站的简单组件分组。 -> **备注：** 其他常见类型的测试，包括黑盒，白盒，手动，自动，金丝雀，烟雾，一致性，验收，功能，系统，性能，负载和压力测试。查找它们以获取更多信息。 +> [!NOTE] +> 其他常见类型的测试，包括黑盒，白盒，手动，自动，金丝雀，烟雾，一致性，验收，功能，系统，性能，负载和压力测试。查找它们以获取更多信息。 ### Django 为测试提供了什么？ @@ -97,7 +98,8 @@ class Author(models.Model): 同样，你应该检查自定义方法 `get_absolute_url()` 和 `__str__()` 是否符合要求，因为它们是你的代码/业务逻辑。在`get_absolute_url()`的情况下，你可以相信 Django `reverse()`方法已经正确实现，因此你正在测试的是实际上已经定义了关联的视图。 -> **备注：** 精明的读者可能会注意到，我们也希望将出生和死亡的日期限制在合理的值，并检查出生后是否死亡。在 Django 中，此约束将添加到表单类中（尽管你可以为字段定义验证器，这些字段似乎仅在表单级别使用，而不是在模型级别使用）。 +> [!NOTE] +> 精明的读者可能会注意到，我们也希望将出生和死亡的日期限制在合理的值，并检查出生后是否死亡。在 Django 中，此约束将添加到表单类中（尽管你可以为字段定义验证器，这些字段似乎仅在表单级别使用，而不是在模型级别使用）。 考虑到这些，让我们开始研究如何定义和运行测试。 @@ -118,7 +120,8 @@ catalog/ 在 LocalLibrary 项目中，创建如上所示的文件结构。**\_\_init\_\_.py** 应该是一个空文件（这告诉 Python 该目录是一个套件包）。你可以通过复制和重命名框架测试文件 **/catalog/tests.py**，来创建三个测试文件。 -> **备注：** 我们构建 Django 骨架网站时，会自动创建骨架测试文件 **/catalog/tests.py**。将所有测试放入其中是完全“合法的”，但如果测试正确，你将很快得到一个非常庞大且难以管理的测试文件。 +> [!NOTE] +> 我们构建 Django 骨架网站时，会自动创建骨架测试文件 **/catalog/tests.py**。将所有测试放入其中是完全“合法的”，但如果测试正确，你将很快得到一个非常庞大且难以管理的测试文件。 > > 删除骨架文件，因为我们不需要它。 @@ -164,13 +167,15 @@ class YourTestClass(TestCase): - `setUpTestData()` 用于类级别设置，在测试运行开始的时侯，会调用一次。你可以使用它来创建在任何测试方法中，都不会修改或更改的对象。 - `setUp()` 在每个测试函数之前被调用，以设置可能被测试修改的任何对象（每个测试函数，都将获得这些对象的“新”版本）。 -> **备注：** 测试类别还有一个我们还没有使用的`tearDown()`方法。此方法对数据库测试不是特别有用，因为`TestCase`基类会为你处理数据库拆卸。 +> [!NOTE] +> 测试类别还有一个我们还没有使用的`tearDown()`方法。此方法对数据库测试不是特别有用，因为`TestCase`基类会为你处理数据库拆卸。 下面我们有一些测试方法，它们使用 `Assert` 函数来测试条件是真，假或相等（`AssertTrue`, `AssertFalse`, `AssertEqual`）。如果条件评估不如预期，则测试将失败，并将错误报告给控制台。 `AssertTrue`, `AssertFalse`, `AssertEqual` 是 **unittest** 提供的标准断言。框架中还有其他标准断言，还有 [Django 特定的断言](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#assertions)，来测试视图是否重定向（`assertRedirects`），或测试是否已使用特定模板（`assertTemplateUsed`）等。 -> **备注：** 你通常**不应**在测试中包含**print()** 函数，如上所示。我们这样做，只是为了让你可以看到在控制台中，调用设置功能的顺序（在下一节中）。 +> [!NOTE] +> 你通常**不应**在测试中包含**print()** 函数，如上所示。我们这样做，只是为了让你可以看到在控制台中，调用设置功能的顺序（在下一节中）。 ## 如何运行测试 @@ -182,7 +187,8 @@ python3 manage.py test 这将查找当前目录下，使用模式 **test\*.py** 命名的所有文件，并运行使用适当基类定义的所有测试（这里我们有许多测试文件，但只有 **/catalog/tests/test_models.py** 目前包含任何测试。）。默认情况下，测试将仅单独报告测试失败，然后是测试摘要。 -> **备注：** 如果你收到类似于以下内容的错误：`ValueError: Missing staticfiles manifest entry ...` 这可能是因为默认情况下，测试不会运行 collectstatic，而你的应用程序正在使用需要它的储存类别（有关更多信息，请参阅 [manifest_strict](https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict)）。有许多方法可以解决这个问题 - 最简单的方法，是在运行测试之前，简单地运行 collectstatic： +> [!NOTE] +> 如果你收到类似于以下内容的错误：`ValueError: Missing staticfiles manifest entry ...` 这可能是因为默认情况下，测试不会运行 collectstatic，而你的应用程序正在使用需要它的储存类别（有关更多信息，请参阅 [manifest_strict](https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict)）。有许多方法可以解决这个问题 - 最简单的方法，是在运行测试之前，简单地运行 collectstatic： > > ```bash > python3 manage.py collectstatic @@ -220,7 +226,8 @@ Destroying test database for alias 'default'... 在这里，我们看到有一个测试失败，我们可以确切地看到哪个函数失败了、为什么失败（这个失败是预期的，因为 `False`不是 `True`！）。 -> **备注：** 从上面的测试输出中，学到的最重要事情是，如果为对象和方法使用描述性/信息性名称，它会更有价值。 +> [!NOTE] +> 从上面的测试输出中，学到的最重要事情是，如果为对象和方法使用描述性/信息性名称，它会更有价值。 上面以**粗体**显示的文本，通常不会出现在测试输出中（这是由我们的测试中的`print()`函数生成的）。这显示了如何为类调用`setUpTestData()`方法，并在每个方法之前调用`setUp()`。 @@ -251,7 +258,8 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one 现在我们知道，如何运行我们的测试，以及我们需要测试哪些东西，让我们看一些实际的例子。 -> **备注：** 我们不会编写所有可能的测试，但这应该可以让你了解测试的工作原理，以及你可以做些什么。 +> [!NOTE] +> 我们不会编写所有可能的测试，但这应该可以让你了解测试的工作原理，以及你可以做些什么。 ### 模型 @@ -331,7 +339,8 @@ self.assertEquals(field_label,'first name') # Compare the value to the expected - 我们选择使用 `assertEquals(field_label,'first name')` ，而不是`assertTrue(field_label == 'first name')`。这样做的原因是，如果测试失败，前者的输出，会告诉你标签实际上是什么，这使得调试问题变得更容易一些。 -> **备注：** 已省略对`last_name` 和 `date_of_birth`标签的测试，以及 `last_name`字段长度的测试。现在按照上面显示的命名约定和方法，添加你自己的版本。 +> [!NOTE] +> 已省略对`last_name` 和 `date_of_birth`标签的测试，以及 `last_name`字段长度的测试。现在按照上面显示的命名约定和方法，添加你自己的版本。 我们还需要测试我们的自定义方法。这些基本上只是检查对象名称，是否按照我们的预期，使用“姓氏”，“名字”格式构建，并且我们为`Author`获取的 URL，是我们所期望的。 @@ -365,7 +374,8 @@ AssertionError: 'Died' != 'died' 这是一个非常小的错误，但它确实强调了，编写测试如何能够更彻底地检查，你可能做出的任何假设。 -> **备注：** 将 date_of_death 字段（/catalog/models.py）的标签更改为“death”并重新运行测试。 +> [!NOTE] +> 将 date_of_death 字段（/catalog/models.py）的标签更改为“death”并重新运行测试。 用于测试其他模型的模式，也类似于此，因此我们不会继续进一步讨论这些模式。请随意为其他模型，创建你自己的测试。 @@ -448,7 +458,8 @@ class RenewBookFormTest(TestCase): 其余函数，测试表单对于续借日期，在可接受范围内是否有效，对于范围外的值，是否无效。请注意我们如何使用`datetime.timedelta()`，在当前日期（`datetime.date.today()`）周围构建测试日期值（在这种情况下指定天数或周数）。然后我们只需创建表单，传入我们的数据，并测试它是否有效。 -> **备注：** 这里我们实际上并没有使用数据库，或测试客户端。考虑修改这些测试，以使用[SimpleTestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase)。 +> [!NOTE] +> 这里我们实际上并没有使用数据库，或测试客户端。考虑修改这些测试，以使用[SimpleTestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase)。 > > 如果表单无效，我们还需要验证是否引发了正确的错误，但这通常是作为视图处理的一部分完成的，因此我们将在下一节中处理。 @@ -549,7 +560,8 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): 将以下测试代码，添加到 **/catalog/tests/test_views.py**。这里我们首先使用`SetUp()`创建一些用户登录帐户，和`BookInstance`对象（以及它们的相关书本，和其他记录），我们稍后将在测试中使用它们。每个测试用户都借用了一半的书本，但我们最初，将所有书本的状态设置为“维护”。我们使用了`SetUp()`而不是`setUpTestData()`，因为我们稍后会修改其中的一些对象。 -> **备注：** 下面的`setUp()`代码，会创建一个具有指定语言`Language`的书本，但你的代码可能不包含语言模型`Language`，因为它是作为挑战创建的。如果是这种情况，只需注释掉创建或导入语言对象的代码部分。你还应该在随后的`RenewBookInstancesViewTest`部分中，执行此操作。 +> [!NOTE] +> 下面的`setUp()`代码，会创建一个具有指定语言`Language`的书本，但你的代码可能不包含语言模型`Language`，因为它是作为挑战创建的。如果是这种情况，只需注释掉创建或导入语言对象的代码部分。你还应该在随后的`RenewBookInstancesViewTest`部分中，执行此操作。 ```python import datetime @@ -819,7 +831,8 @@ class RenewBookInstancesViewTest(TestCase): self.assertRedirects(resp, reverse('all-borrowed') ) ``` -> **警告：** 全部借用的视图作为额外挑战，你的代码可能会改为重定向到主页'/'。如果是这样，请将测试代码的最后两行，修改为与下面的代码类似。请求中的`follow=True`，确保请求返回最终目标 URL（因此检查`/catalog/`而不是`/`）。 +> [!WARNING] +> 全部借用的视图作为额外挑战，你的代码可能会改为重定向到主页'/'。如果是这样，请将测试代码的最后两行，修改为与下面的代码类似。请求中的`follow=True`，确保请求返回最终目标 URL（因此检查`/catalog/`而不是`/`）。 > > ```python > resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},follow=True ) diff --git a/files/zh-cn/learn/server-side/django/web_application_security/index.md b/files/zh-cn/learn/server-side/django/web_application_security/index.md index 07c3a1a5f4ece1..15ad6d8dfb079e 100644 --- a/files/zh-cn/learn/server-side/django/web_application_security/index.md +++ b/files/zh-cn/learn/server-side/django/web_application_security/index.md @@ -33,7 +33,8 @@ slug: Learn/Server-side/Django/web_application_security [web 安全](/zh-CN/docs/Web/Security)主題提供一个概述，说明了网站安全对于服务器端设计的意义，以及以及一些需要应对的常见威胁。本文中包含一个关键的概念：如果网站信任任何来自浏览器的数据，几乎所有的攻击方法都会成功。 -> **警告：** 切记，对于网站安全来说最重要一点就是“**永远不要相信浏览器端提交的数据**”。这些数据包括使用 `GET` 方式请求时 URL 中的参数，`POST` 方式请求的数据，HTTP headers 和 cookies，以及用户上传的文件等等。请确保一定要检查和清洗这些提交的数据。对于网站安全来说，总是要做好最坏的打算。 +> [!WARNING] +> 切记，对于网站安全来说最重要一点就是“**永远不要相信浏览器端提交的数据**”。这些数据包括使用 `GET` 方式请求时 URL 中的参数，`POST` 方式请求的数据，HTTP headers 和 cookies，以及用户上传的文件等等。请确保一定要检查和清洗这些提交的数据。对于网站安全来说，总是要做好最坏的打算。 对 Django 用户来说，好消息是 Django 框架已经处理了大量的常见威胁。请阅读 Django 官方文档中的"[Security in Django](https://docs.djangoproject.com/en/2.0/topics/security/)"部分来了解 Django 的安全细节，以及如何确保基于 Django 的网站的安全。 @@ -54,7 +55,8 @@ Django 的模板系统可以帮你抵挡大部分的 XSS 攻击，实现的方 `` ![Author Form XSS test](author_create_form_alert_xss.png) - > **备注：** 这一段代码并没有任何杀伤力，在执行的时候只会在浏览器中弹出一个警告提示框。如果这个警告提示框出现，则表明本网站存在可被 XSS 攻击的漏洞。 + > [!NOTE] + > 这一段代码并没有任何杀伤力，在执行的时候只会在浏览器中弹出一个警告提示框。如果这个警告提示框出现，则表明本网站存在可被 XSS 攻击的漏洞。 5. 点击 **Submit** 按钮保存信息。 6. 保存后的作者信息将会显示为下图的样式。因为 XSS 防护措施的存在，注入代码中的`alert()`部分并没有执行，而只是用文本的方式直接显示了出来。![Author detail view XSS test](author_detail_alert_xss.png) @@ -76,7 +78,8 @@ XSS 攻击也可能来自于其他不可信的数据来源，例如 cookies，We CSRF(英语：Cross-site request forgery，通常简称：CSRF 或 XSRF) 攻击可以让恶意攻击者在用户不知情的情况下，使用用户的身份来进行系统操作。举个例子，现在有一名黑客想要在我们的本地图书馆中添加一些作者信息。 -> **备注：** 这个示例里面的黑客没有考虑对钱下手。而现实生活中的黑客则极有可能会产生更加危险的操作（例如，把钱转入他们自己的账户中等等）。 +> [!NOTE] +> 这个示例里面的黑客没有考虑对钱下手。而现实生活中的黑客则极有可能会产生更加危险的操作（例如，把钱转入他们自己的账户中等等）。 为了实现这个目的，黑客可以创建一个类似于下面示例的 HTML 文件，这个文件包含了一个创建作者的表单 (类似我们在之前章节中用过的)，并且一旦加载完毕就会立即进行提交。随后黑客可以将这个文件发送至所有的图书管理员，并且引诱他们打开这个文件 (文件中真的没有啥有害的信息)。如果任何一个已登录的图书管理员不慎打开了这个文件，那么文件中的表单就会利用图书管理员的身份来提交，随后就会创建出一个新的作者来。 diff --git a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md index d5f313ca929c27..2fa1bf641b8448 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md @@ -53,19 +53,22 @@ slug: Learn/Server-side/Express_Nodejs/deployment 这种可远程访问的计算/网络硬件，称为基础架构即服务（IaaS）。许多 IaaS 供应商，提供预安装特定操作系统的选项，你必须在其上，安装生产环境的其他组件。其他供应商，允许你选择功能更全面的环境，可能包括完整的 node 设置。 -> **备注：** 预构建环境，可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，并且当你需要升级系统的某些部分时，你可以知道从哪里开始！ +> [!NOTE] +> 预构建环境，可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，并且当你需要升级系统的某些部分时，你可以知道从哪里开始！ 其他托管服务提供商，支持 Express 作为平台即服务（PaaS）产品的一部分。使用此类托管时，你无需担心大多数生产环境（服务器，负载平衡器等），因为主机平台会为你处理这些问题。这使得部署非常简单，因为你只需要专注于 Web 应用程序，而不是任何其他服务器基础结构。 一些开发人员选择 IaaS，相对于 PaaS，IaaS 提供更高灵活性，而其他开发人员偏好 PaaS 的降低维护开销，和更轻松的扩展性。当你在一开始使用时，在 PaaS 系统上设置你的网站，要容易得多，因此我们将在本教程中使用 PaaS。 -> **备注：** 如果你选择 Node/Express 友好的托管服务提供商，他们应该提供，有关如何使用 Web 服务器，应用程序服务器，反向代理等不同配置，来设置 Express 网站的说明。例如，在[数字海洋 node 社区文档](https://www.digitalocean.com/community/tutorials?q=node)中，有许多各种配置的手把手指南。 +> [!NOTE] +> 如果你选择 Node/Express 友好的托管服务提供商，他们应该提供，有关如何使用 Web 服务器，应用程序服务器，反向代理等不同配置，来设置 Express 网站的说明。例如，在[数字海洋 node 社区文档](https://www.digitalocean.com/community/tutorials?q=node)中，有许多各种配置的手把手指南。 ## 选择一个主机供应商 众所周知，众多托管服务提供商，都积极支持或与 Node（和 Express）合作。这些供应商提供不同类型的环境（IaaS，PaaS），以及不同价格的不同级别的计算和网络资源。 -> **备注：** 有很多托管解决方案，他们的服务和定价，可能会随着时间而改变。虽然我们在下面介绍几个选项，但在选择托管服务提供商之前，有必要自己进行互联网搜索。 +> [!NOTE] +> 有很多托管解决方案，他们的服务和定价，可能会随着时间而改变。虽然我们在下面介绍几个选项，但在选择托管服务提供商之前，有必要自己进行互联网搜索。 选择主机时需要考虑的一些事项： @@ -83,7 +86,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment 许多提供商还拥有“基本”层，可提供更多有用的计算能力，和更少的限制。举例来说， [Digital Ocean](https://www.digitalocean.com/) 是一个流行的托管服务提供商，它提供了一个相对便宜的基本计算层（在本教程写作时，是每月 5 美元的较低范围）。 -> **备注：** 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现可扩展性是最重要的考虑因素。 +> [!NOTE] +> 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现可扩展性是最重要的考虑因素。 ## 准备好发布你的网站 @@ -91,7 +95,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment 在以下小节中，我们概述了你应该对应用进行的、最重要的更改。 -> **备注：** Express 文档中还有其他有用的提示 - 请参阅“[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)”，以及“[生产最佳实践：安全性](https://expressjs.com/en/advanced/best-practice-security.html)”。 +> [!NOTE] +> Express 文档中还有其他有用的提示 - 请参阅“[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)”，以及“[生产最佳实践：安全性](https://expressjs.com/en/advanced/best-practice-security.html)”。 ### 设置 NODE_ENV 为 'production' @@ -99,7 +104,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment 可以使用导出或环境文件，或使用 OS 初始化系统，以进行此更改。 -> **备注：** 这实际上是在环境设置，而不是应用中所做的更改，但重要的是，要注意这里！我们将在下面，展示如何为我们的托管示例设置。 +> [!NOTE] +> 这实际上是在环境设置，而不是应用中所做的更改，但重要的是，要注意这里！我们将在下面，展示如何为我们的托管示例设置。 ### Log appropriately @@ -134,7 +140,8 @@ set DEBUG=author,book export DEBUG="author,book" ``` -> **备注：** 调用`debug`可以替换你以前使用`console.log()`或`console.error()`执行的日志记录。通过调试模块[debug](https://www.npmjs.com/package/debug)进行日志记录，替换代码中的所有`console.log()`调用。通过设置 DEBUG 变量，并在其中记录对日志记录的影响，在开发环境中，打开和关闭日志记录。 +> [!NOTE] +> 调用`debug`可以替换你以前使用`console.log()`或`console.error()`执行的日志记录。通过调试模块[debug](https://www.npmjs.com/package/debug)进行日志记录，替换代码中的所有`console.log()`调用。通过设置 DEBUG 变量，并在其中记录对日志记录的影响，在开发环境中，打开和关闭日志记录。 如果你需要记录网站活动，可以使用 Winston 或 Bunyan 等日志库。有关此主题的更多信息，请参阅：[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)。 @@ -170,7 +177,8 @@ app.use('/catalog', catalogRouter); // Add catalog routes to middleware chain. ... ``` -> **备注：** 对于生产中流量较大的网站，你不会使用此中间件。相反，你会使用像 Nginx 这样的反向代理。 +> [!NOTE] +> 对于生产中流量较大的网站，你不会使用此中间件。相反，你会使用像 Nginx 这样的反向代理。 ### 使用 Helmet 避免被常见漏洞侵袭 @@ -195,7 +203,8 @@ app.use(helmet()); ... ``` -> **备注：** 上面的命令，添加了对大多数站点有意义的可用标头子集。你可以按照[npm](https://www.npmjs.com/package/helmet)上的说明，根据需要添加/禁用特定标头。 +> [!NOTE] +> 上面的命令，添加了对大多数站点有意义的可用标头子集。你可以按照[npm](https://www.npmjs.com/package/helmet)上的说明，根据需要添加/禁用特定标头。 ## 例子：在 Heroku 上安装一个本地图书馆 @@ -238,7 +247,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos) Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/同步你对实时运行系统所做的任何更改。它通过添加一个名为 heroku 的新 Heroku“远程”存储库，来指向你在 Heroku 云上的源存储库。在开发期间，你使用 git 在“主”存储库 master 中存储更改。如果要部署站点，请将更改同步到 Heroku 存储库。 -> **备注：** 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git 或其他一些 SCM 系统。如果你已有 git 存储库，则可以跳过此步骤。 +> [!NOTE] +> 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git 或其他一些 SCM 系统。如果你已有 git 存储库，则可以跳过此步骤。 有很多方法可以使用 git，但最简单的方法之一，是首先在[GitHub](https://github.com/)上建立一个帐户，在那里创建存储库，然后在本地同步它： @@ -307,7 +317,8 @@ Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/ 完成此操作后，你应该可以返回创建存储库的 Github 上的页面，刷新页面，并查看你的整个应用程序现已上传。使用此添加/提交/推送循环，你可以在文件更改时，继续更新存储库。 -> **备注：** 这是备份你的“vanilla”项目的好时机 - 虽然我们将在以下部分中进行的一些更改，可能对任何平台（或开发）上的部署有用，而一些其他的更改可能没有用。 +> [!NOTE] +> 这是备份你的“vanilla”项目的好时机 - 虽然我们将在以下部分中进行的一些更改，可能对任何平台（或开发）上的部署有用，而一些其他的更改可能没有用。 > > 执行此操作的最佳方法，是使用 git 来管理你的修订。使用 git，你不仅可以回到特定的旧版本，而且可以在生产变更的单独“分支”中进行维护，并选择在生产和开发分支之间移动的任何更改。[学习 Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/)非常值得，但超出了本主题的范围。 > @@ -412,7 +423,8 @@ heroku help heroku create ``` -> **备注：** 如果你愿意，可以在“创建”create 之后指定远程存储库的命名。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。 +> [!NOTE] +> 如果你愿意，可以在“创建”create 之后指定远程存储库的命名。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。 然后，我们可以将我们的应用程序，推送到 Heroku 存储库，如下所示。这将上传应用程序，获取所有依赖项，将其打包到 dyno 中，然后启动该站点。 @@ -426,7 +438,8 @@ git push heroku master heroku open ``` -> **备注：** 该站点将使用我们的开发数据库运行。创建一些书本和其他对象，并检查该网站是否按预期运行。在下一节中，我们将其设置为使用我们的新数据库。 +> [!NOTE] +> 该站点将使用我们的开发数据库运行。创建一些书本和其他对象，并检查该网站是否按预期运行。在下一节中，我们将其设置为使用我们的新数据库。 ### 设定配置变量 diff --git a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md index 06fa88e780e431..5305975a4a1101 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md @@ -32,7 +32,8 @@ Node 和 NPM 包管理器可以用二进制包、安装程序或系统包管理 NPM 也可以安装（全局的）**Express 应用生成器**，可用于创建遵循 [MVC 模式](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 的 Express 应用框架。它不是必备的，因为无需这个工具就可以创建 Express 应用（或相同架构布局或依赖的 Express 应用）。但我们还是会使用它，因为它更容易上手，还有助于应用结构的模块化管理。 -> **备注：** 与某些其他 Web 框架不同，开发环境不包含单独的开发 Web 服务器。在 Node / Express 中，Web 应用程序将创建并运行自己的 Web 服务器！ +> [!NOTE] +> 与某些其他 Web 框架不同，开发环境不包含单独的开发 Web 服务器。在 Node / Express 中，Web 应用程序将创建并运行自己的 Web 服务器！ 典型的开发环境中还需要一些外围工具，包括用于编写代码的 [文本编辑器](/zh-CN/docs/Learn/Common_questions/实用文本编辑器) 或 IDE，用于代码控制管理的工具（比如代码版本控制工具 [Git](https://git-scm.com/)）。这里假定你已经安装了这些工具（尤其是文本编辑器）。 @@ -58,7 +59,8 @@ Express 应选用最新版本。 先在操作系统上安装 Node.js 和 NPM 后才可使用 Express。接下来将介绍如何最简便地在 Ubuntu 18.04、macOS Mojave 以及 Windows 10 上安装 Node.js 最新的 LTS 版本。. -> **备注：** 以下内容将介绍在上述三种 OS 上安装 Node 和 NPM 的最简便方法。对于其他操作系统，以及更多的安装方法，可以参考 [通过包管理器方式安装 Node.js](https://nodejs.org/zh-cn/download/package-manager/) (nodejs.org). +> [!NOTE] +> 以下内容将介绍在上述三种 OS 上安装 Node 和 NPM 的最简便方法。对于其他操作系统，以及更多的安装方法，可以参考 [通过包管理器方式安装 Node.js](https://nodejs.org/zh-cn/download/package-manager/) (nodejs.org). ### Windows 和 macOS @@ -80,7 +82,8 @@ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs ``` -> **警告：** 直接从 Ubuntu 默认仓库中下载的 Node 是 8.x 版本的。 +> [!WARNING] +> 直接从 Ubuntu 默认仓库中下载的 Node 是 8.x 版本的。 ### 测试 Node.js 和 NPM 是否安装成功 @@ -126,7 +129,8 @@ $ npm -v 代码导入了 `"http"` 模块，并用它（`createServer()`）创建了一个服务器来监听 3000 端口的 HTTP 请求。随后在控制台打印一条信息，提示测试服务器的正确 URL。`createServer()` 函数接受一个回调函数作为参数，并在接收 HTTP 请求后进行回调。直接返回了 HTTP 状态码 200（"`OK`"），以及纯文本信息 "Hello World"。 - > **备注：** 现在看不懂这些代码请不要担心，开始使用 Express 后候会进行更加详细的解释。 + > [!NOTE] + > 现在看不懂这些代码请不要担心，开始使用 Express 后候会进行更加详细的解释。 2. 在命令行工具中进入 hellonode.js 文件所在的目录，输入“node + 文件名”并运行，服务器就启动了： @@ -141,7 +145,8 @@ $ npm -v 构建 Node 应用过程中，[NPM](https://docs.npmjs.com/) 是除了 Node 本身之外最重要的工具。可用于获取应用开发、测试以及生产所需的所有包（JavaScript 库）。也可运行开发过程中使用的测试单元和工具。 -> **备注：** 以 Node 的角度来看，Express 只是一个用 NPM 安装、供人使用的包而已。 +> [!NOTE] +> 以 Node 的角度来看，Express 只是一个用 NPM 安装、供人使用的包而已。 可以用 NPM 手动逐个安装所需包。但通常可用 [package.json](https://docs.npmjs.com/files/package.json) 文件来管理依赖。把每个依赖以一个 JavaScript“包”的形式（其中包括名称、版本、描述，初始执行文件、生产依赖，开发依赖、支持的 _Node_ 版本，等等）罗列在这个文件中。package.json 文件包含 NPM 获取和运行应用程序所需的所有内容（在编写可重用的库时，可以用它把包上传到 NPM 仓库中供其他用户使用）。 @@ -149,7 +154,8 @@ $ npm -v 下面介绍用 NPM 下载包、将包保存进工程依赖树，以及在 Node 应用中调用包的方法和步骤。 -> **备注：** 现在来讲解获取和安装 Express 包的步骤。稍后解释为什么可以直接对 Express 包（乃至其他包）使用 **Express 应用生成器**。这段对理解 NPM 的工作原理和应用生成器的工作机制有一定的帮助。 +> [!NOTE] +> 现在来讲解获取和安装 Express 包的步骤。稍后解释为什么可以直接对 Express 包（乃至其他包）使用 **Express 应用生成器**。这段对理解 NPM 的工作原理和应用生成器的工作机制有一定的帮助。 1. 首先为新应用创建一个目录，并进入它： @@ -249,7 +255,8 @@ npm install eslint --save-dev } ``` -> **备注：** "[lint](https://zh.wikipedia.org/wiki/Lint)" 是用于对软件进行静态分析的工具，可以发现并报告软件是否遵循某些最佳编程惯例。 +> [!NOTE] +> "[lint](https://zh.wikipedia.org/wiki/Lint)" 是用于对软件进行静态分析的工具，可以发现并报告软件是否遵循某些最佳编程惯例。 ### 运行任务 @@ -297,7 +304,8 @@ npm install express-generator -g express helloworld ``` -> **备注：** 也可以指定模板库来使用其他丰富的设置。可通过 help 命令来查看所有选项： +> [!NOTE] +> 也可以指定模板库来使用其他丰富的设置。可通过 help 命令来查看所有选项： > > ```bash > $ express --help @@ -305,7 +313,8 @@ express helloworld NPM 将在当前位置的子目录中创建新的 Express 应用，可以在控制台看到构建的过程。在完成时，NPM 会提示你需要安装哪些 Node 依赖，以及如何开启应用。 -> **备注：** 新应用的根目录有一个 **package.json** 文件。可以打开它看看都安装了哪些依赖，其中可以看到 Express 和 Jade 模板库： +> [!NOTE] +> 新应用的根目录有一个 **package.json** 文件。可以打开它看看都安装了哪些依赖，其中可以看到 Express 和 Jade 模板库： > > ```js > { diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md index ea83ba3741163a..d357fd54a6e3e2 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md @@ -87,7 +87,8 @@ block content ![Author Detail Page - Express Local Library site](locallibary_express_author_detail.png) -> **备注：** 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。 +> [!NOTE] +> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。 ## 下一步 diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md index d37f3a23181fac..4115aa8f725af7 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md @@ -59,7 +59,8 @@ block content ![Author List Page - Express Local Library site](locallibary_express_author_list.png) -> **备注：** 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。 +> [!NOTE] +> 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。 > > 但是，这次缺少日期，除非严格模式生效，否则将忽略对不存在的属性的引用。`moment()`返回当前时间，并且你不希望将缺少的日期格式化为就像今天一样。 > diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md index ae6d60c0fab626..e450f5592d5d5c 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md @@ -33,7 +33,8 @@ exports.book_detail = asyncHandler(async (req, res, next) => { }); ``` -> **备注：** 我们不需要用 require 导入任何额外的模块，因为我们在实现主页控制器时已经导入了依赖项。 +> [!NOTE] +> 我们不需要用 require 导入任何额外的模块，因为我们在实现主页控制器时已经导入了依赖项。 此方法与[类别详细信息页面](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)描述的方法完全相同。路由控制器函数使用 `Promise.all()` 并行查询指定的书籍（`Book`）以及它的相关副本（`BookInstance`）。如果没有找到匹配的书籍，就会返回一个带有“404: Not Found”错误的 Error 对象。如果找到了书籍，那么就会使用“book_detail”模板呈现检索到的数据库信息。由于“title”键用于给网页命名（如“layout.pug”中定义的标题），所以这次我们在渲染网页时传递了 `results.book.title`。 @@ -80,7 +81,8 @@ block content 在这个模板中，几乎所有内容都在先前的章节演示过了。 -> **备注：** 与本书相关的类别列表在模板中的实现如下。除了最后一个之外，这会在与本书相关的每个类别后面添加一个逗号。 +> [!NOTE] +> 与本书相关的类别列表在模板中的实现如下。除了最后一个之外，这会在与本书相关的每个类别后面添加一个逗号。 > > ```pug > p #[strong Genre:] diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md index 5a9f3a1b1faf80..f32e01a6e9ced2 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md @@ -52,7 +52,8 @@ block content 這个视图扩展了 **layout.pug** 基本模板，并覆盖了名为 '**content**' 的區块 `block` 。它显示我们从控制器传入的标题`title`（通过`render()`方法），然后使用`each`-`in`-`else`语法，遍历`book_list`变量。为每本图书创建一个列表项，以显示书名，并作为书的详细信息页面的链接，后面跟着作者姓名。如果`book_list`中没有书，则执行`else`子句，并显示文字“没有书” 'There are no books.'。 -> **备注：** 我们使用 `book.url` ，为每本书提供详细记录链接（我们已经实现了此路由，但尚未实现此页面）。这是 `Book` 模型的一个虚拟属性，它使用模型实例的 `_id` 字段，生成唯一的 URL 路径。 +> [!NOTE] +> 我们使用 `book.url` ，为每本书提供详细记录链接（我们已经实现了此路由，但尚未实现此页面）。这是 `Book` 模型的一个虚拟属性，它使用模型实例的 `_id` 字段，生成唯一的 URL 路径。 在这里，我們感兴趣的是，每本书被定义为两行，第二行使用管道（上面高亮显示）。这种方法是必要的，因为如果作者姓名位于上一行，那么它将成为超链接的一部分。 diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md index c6ffaff99fe938..1819fb34264377 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md @@ -76,7 +76,8 @@ block content 目前，我们网站上显示的大多数日期，都使用默认的 JavaScript 格式（例如 _Tue Dec 06 2016 15:49:58 GMT+1100_（AUS 东部夏令时间）。本文的挑战，是改善作者`Author`生命周期日期显示的外观信息（死亡/出生日期）和 BookInstance 详细信息页面，使用格式：December 6th, 2016。 -> **备注：** 你可以使用与我们用于 Book Instance List 的相同方法（将生命周期的虚拟属性，添加到`Author`模型，并使用[moment](https://www.npmjs.com/package/moment)来设置日期字符串的格式）。 +> [!NOTE] +> 你可以使用与我们用于 Book Instance List 的相同方法（将生命周期的虚拟属性，添加到`Author`模型，并使用[moment](https://www.npmjs.com/package/moment)来设置日期字符串的格式）。 这一挑战的要求： diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md index e94069f3b1f2d1..a4fa838d3ecf92 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md @@ -7,7 +7,8 @@ slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_mom 我们将使用的方法，是在我们的`BookInstance`模型中，创建一个返回格式化日期的虚拟屬性。我们将使用[moment](https://www.npmjs.com/package/moment) 来做实际的格式化，这是一个轻量级 JavaScript 日期库，用于解析，验证，操作和格式化日期。 -> **备注：** 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。 +> [!NOTE] +> 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。 ## 安装 moment @@ -34,7 +35,8 @@ BookInstanceSchema.virtual("due_back_formatted").get(function () { }); ``` -> **备注：** 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。 +> [!NOTE] +> 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。 ## 更新视图 diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md index 1b250402bf828f..4d0c460890e3d5 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md @@ -54,7 +54,8 @@ exports.genre_detail = function (req, res, next) { 所需种类记录的 ID，在 URL 的末尾编码，并根据路由定义（**/genre/:id**）自动提取。通过请求参数（`req.params.id`）在控制器内访问 ID。它在 `Genre.findById()` 中用于获取当前种类。它还用于获取符合当前种类的所有`Book`对象，就是在种类字段中具有种类 ID 的那些 `Book.find({ 'genre': req.params.id })`。 -> **备注：** 如果数据库中不存在该类型（即它可能已被删除），则`findById()`将成功返回，但没有结果。在这种情况下，我们想要显示一个“未找到”页面，因此我们创建一个`Error`对象，并将其传递给链中的下一个中间件函数`next`。 +> [!NOTE] +> 如果数据库中不存在该类型（即它可能已被删除），则`findById()`将成功返回，但没有结果。在这种情况下，我们想要显示一个“未找到”页面，因此我们创建一个`Error`对象，并将其传递给链中的下一个中间件函数`next`。 > > ```js > if (results.genre == null) { @@ -102,7 +103,8 @@ block content ![Genre Detail Page - Express Local Library site](locallibary_express_genre_detail.png) -> **备注：** 你可能会收到与此类似的错误： +> [!NOTE] +> 你可能会收到与此类似的错误： > > ```bash > Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre" diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md index 843a17ee270492..8d38fc3b85ed46 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md @@ -107,7 +107,8 @@ block content 在动态内容标题下，我们检查从`render()`函数传入的错误变量，是否已定义。如果是这样，我们列出这个错误。如果不是，我们从`data`变量中，获取并列出每个模型的副本数量。 -> **备注：** 我们没有转义计数值 (i.e. 我们使用 `!{}` 语法) ，因为计数值已经被计算过了。如果信息是由终端用户提供的，那么我们就会转义該变量，以用于显示。 +> [!NOTE] +> 我们没有转义计数值 (i.e. 我们使用 `!{}` 语法) ，因为计数值已经被计算过了。如果信息是由终端用户提供的，那么我们就会转义該变量，以用于显示。 ## 它看起来像是？ @@ -115,7 +116,8 @@ block content ![Home page - Express Local Library site](locallibary_express_home.png) -> **备注：** 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。 +> [!NOTE] +> 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。 ## 下一步 diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md index 599b4c9a230cc1..6308b7ae551e3e 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md @@ -11,7 +11,8 @@ Express 可以与许多不同的[模板渲染引擎](https://expressjs.com/en/gu 不同的模板语言使用不同的方法，来定义布局和标记数据的占位符 — 一些使用 HTML 来定义布局，而另一些则使用可以编译为 HTML 的不同标记格式。Pug 是第二种类型；它使用 HTML 的表示形式，其中任何行中的第一个单词，通常表示 HTML 元素，后续行中的缩进，用于表示嵌套在这些元素中的任何内容。结果是一个页面定义直接转换为 HTML，但可以说更简洁，更容易阅读。 -> **备注：** 使用 Pug 的缺点，是它对缩进和空格敏感（如果在错误的位置添加额外的空格，可能会得到没什么帮助的错误代码）。但是，一旦你的模板到位，它们就很容易阅读和维护。 +> [!NOTE] +> 使用 Pug 的缺点，是它对缩进和空格敏感（如果在错误的位置添加额外的空格，可能会得到没什么帮助的错误代码）。但是，一旦你的模板到位，它们就很容易阅读和维护。 ## 模板组态 @@ -98,7 +99,8 @@ p This is a line with #[em some emphasis] and #[strong strong text] markup. p This line has an un-escaped string: !{' is emphasised'}, an escaped string: #{' is not emphasised'}, and escaped variables: #{title}. ``` -> **备注：** 你几乎总是希望转义来自用户的数据（通过 **`#{}`** 语法）。可信任的数据（例如，生成的记录计数等）可以不先转义就显示。 +> [!NOTE] +> 你几乎总是希望转义来自用户的数据（通过 **`#{}`** 语法）。可信任的数据（例如，生成的记录计数等）可以不先转义就显示。 你可以在行的开头使用管道（“**|**”）字符来表示“[纯文本](https://pugjs.org/language/plain-text.html)”。例如，下面显示的附加文本，将显示在与前一个锚点相同的行上，但不会链接。 diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md index d93b8646a2813c..4820a3bf71782b 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md @@ -97,7 +97,8 @@ exports.author_create_post = [ 此代码的结构和行为，几乎与创建`Genre`对象完全相同。首先，我们验证并清理数据。如果数据无效，那么我们将重新显示表单，以及用户最初输入的数据，和错误消息列表。如果数据有效，那么我们保存新的作者记录，并将用户重定向到作者详细信息页面。 -> **备注：** 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。 +> [!NOTE] +> 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。 验证代码演示了几个新功能： @@ -149,7 +150,8 @@ block content 此视图的结构和行为与**genre_form.pug**模板完全相同，因此我们不再对其进行描述。 -> **备注：** 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。 +> [!NOTE] +> 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。 ### 自我挑战：加入死亡日期 @@ -161,7 +163,8 @@ block content ![Author Create Page - Express Local Library site](locallibary_express_author_create_empty.png) -> **备注：** 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。 +> [!NOTE] +> 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。 ## 下一步 diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md index c8163f15775364..36eb27bc6ee929 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md @@ -225,7 +225,9 @@ block content - 种类集合显示为复选框，使用我们在控制器中设置的检查值 `checked`，来确定是否应该选中该框。 - 作者集合显示为单选下拉列表。在这种情况下，我们通过比较当前作者选项的 id 与用户先前输入的值（作为 `book` 变量传入），来确定要显示的作者。这在上面突出显示！ - > **备注：** 如果提交的表单中存在错误，那么，当要重新呈现表单时，新的书本作者仅使用字符串（作者列表中选中选项的值）进行标识。相比之下，现有的书本作者的 `_id` 属性不是字符串。因此，要比较新的和现有的，我们必须将每个现有书本作者的 `_id`，强制转换为字符串，如上所示。 + > [!NOTE] + > + > 如果提交的表单中存在错误，那么，当要重新呈现表单时，新的书本作者仅使用字符串（作者列表中选中选项的值）进行标识。相比之下，现有的书本作者的 `_id` 属性不是字符串。因此，要比较新的和现有的，我们必须将每个现有书本作者的 `_id`，强制转换为字符串，如上所示。 ## 它看起來像是？ diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md index b86a351be28571..b7e2b2f669d66a 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md @@ -150,7 +150,8 @@ block content 这个视图的结构和行为，几乎等同于 **book_form.pug** 模板，因此我们就不再重覆说明一次了。 -> **备注：** 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里，而且不能 "记忆" 使用者的输入值。如果你愿意的话，考虑重新实作此列表，当表单被重新呈现时，从控制器传入选项数据，并设定选中的值。 +> [!NOTE] +> 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里，而且不能 "记忆" 使用者的输入值。如果你愿意的话，考虑重新实作此列表，当表单被重新呈现时，从控制器传入选项数据，并设定选中的值。 ## 它看起來像是？ diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md index 0160ef3fa7da7b..8d6fbfee733623 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md @@ -84,7 +84,8 @@ exports.genre_create_post = [ 首先要注意的是，控制器不是单个中间件函数（带参数（`req, res, next`）），而是指定一组中间件函数。数组传递给路由器函数，并按顺序调用每个方法。 -> **备注：** 这种方法是必需的，因为消毒/验证器是中间件功能。 +> [!NOTE] +> 这种方法是必需的，因为消毒/验证器是中间件功能。 数组中的第一个方法定义了一个验证器（`body`），来检查 name 字段是否为空（在执行验证之前调用`trim()`，以删除任何尾随/前导空格）。 @@ -98,7 +99,8 @@ body('name', 'Genre name required').isLength({ min: 1 }).trim(), sanitizeBody('name').trim().escape(), ``` -> **备注：** 验证期间运行的清洁器不会修改请求。这就是为什么我们必须在上面的两个步骤中调用`trim()`！ +> [!NOTE] +> 验证期间运行的清洁器不会修改请求。这就是为什么我们必须在上面的两个步骤中调用`trim()`！ 在指定验证器和清理器之后，我们创建了一个中间件函数，来提取任何验证错误。我们使用`isEmpty()` 来检查验证结果中，是否有任何错误。如果有，那么我们再次渲染表单，传入我们的已清理种类对象和错误消息的数组（`errors.array()`）。 @@ -196,7 +198,8 @@ block content 页面的最后一部分是错误代码。如果已定义错误变量，则只会打印错误列表（换句话说，当模板在`GET`路由上呈现时，此部分不会出现）。 -> **备注：** 这只是呈现错误的一种方法。你还可以从错误变量中，获取受影响字段的名称，并使用这些，来控制错误消息的呈现位置，以及是否应用自定义 CSS 等。 +> [!NOTE] +> 这只是呈现错误的一种方法。你还可以从错误变量中，获取受影响字段的名称，并使用这些，来控制错误消息的呈现位置，以及是否应用自定义 CSS 等。 ## 它看起來像是？ @@ -208,7 +211,8 @@ block content ![](locallibary_express_genre_create_error.png) -> **备注：** 我们的验证使用`trim()`，来确保不接受空格作为种类名称。我们还可以在表单中 的字段定义中，添加值`required='true'`，来验证客户端字段不为空： +> [!NOTE] +> 我们的验证使用`trim()`，来确保不接受空格作为种类名称。我们还可以在表单中 的字段定义中，添加值`required='true'`，来验证客户端字段不为空： > > ```js > input#name.form-control(type='text', placeholder='Fantasy, Poetry etc.' name='name' value=(undefined===genre ? '' : genre.name), required='true' ) diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md index 2cbc5490c21e33..7199e86c47cbd6 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md @@ -44,7 +44,8 @@ exports.author_delete_get = function (req, res, next) { 控制器从 URL 参数（`req.params.id`）中，获取要删除的 `Author` 实例的 id。它使用 `async.parallel()` 方法，并行获取作者记录和所有相关书本。当两个操作都完成后，它将呈现 **author_delete.pug** 视图，为 `title`、`author` 和 `author_books` 传递变量。 -> **备注：** 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。 +> [!NOTE] +> 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。 > > ```js > }, function(err, results) { @@ -100,7 +101,8 @@ exports.author_delete_post = function (req, res, next) { 首先，我们验证是否已提供 id（这是通过表单主体参数发送的，而不是使用 URL 中的版本）。然后我们以与 `GET` 路由相同的方式，获得作者及其相关书本。如果没有书本，那么我们删除作者对象，并重定向到所有作者的列表。如果还有书本，那么我们只需重新呈现表格，传递作者和要删除的书本列表。 -> **备注：** 我们可以检查对 `findById()` 的调用，是否返回任何结果，如果没有，则立即呈现所有作者的列表。为简洁起见，我们将代码保留在上面（如果找不到 id，它仍会返回作者列表，但这将在 `findByIdAndRemove()` 之后发生）。 +> [!NOTE] +> 我们可以检查对 `findById()` 的调用，是否返回任何结果，如果没有，则立即呈现所有作者的列表。为简洁起见，我们将代码保留在上面（如果找不到 id，它仍会返回作者列表，但这将在 `findByIdAndRemove()` 之后发生）。 ## 视图 @@ -146,7 +148,8 @@ block content 接下来，我们将向 Author 详细视图添加 **Delete** 控件（详细信息页面是删除记录的好地方）。 -> **备注：** 在完整实现中，控件将仅对授权用户可见。但是在这个时间点上，我们还没有一个授权系统！ +> [!NOTE] +> 在完整实现中，控件将仅对授权用户可见。但是在这个时间点上，我们还没有一个授权系统！ 打开 **author_detail.pug** 视图，并在底部添加以下行。 @@ -172,7 +175,8 @@ p ![](locallibary_express_author_delete_withbooks.png) -> **备注：** 其他删除对象的页面，可以用相同的方式实现。我们把它留下，作为挑战。 +> [!NOTE] +> 其他删除对象的页面，可以用相同的方式实现。我们把它留下，作为挑战。 ## 下一步 diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md index be9fb0d84e8862..6ab29bf1ed0b47 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md @@ -37,7 +37,8 @@ slug: Learn/Server-side/Express_Nodejs/forms 此教程将展示上述的操作，如何在 _Express_ 中实现。在此过程中，我们将扩展 LocalLibrary 网站，以允许用户创建，编辑和删除图书馆中的项目。 -> **备注：** 我们还没有考虑如何将特定路由，限制为经过身份验证或授权的用户，因此在这个时间点，任何用户都可以对数据库进行更改。 +> [!NOTE] +> 我们还没有考虑如何将特定路由，限制为经过身份验证或授权的用户，因此在这个时间点，任何用户都可以对数据库进行更改。 ### HTML 表单 @@ -114,7 +115,8 @@ npm install express-validator --save #### 使用 express-validator -> **备注：** Github 上的[express-validator](https://github.com/ctavan/express-validator#express-validator)指南，提供了 API 的良好概述。我们建议你阅读该内容，以了解其所有功能（包括创建自定义验证程序）。下面我们只介绍一个对 LocalLibrary 有用的子集。 +> [!NOTE] +> Github 上的[express-validator](https://github.com/ctavan/express-validator#express-validator)指南，提供了 API 的良好概述。我们建议你阅读该内容，以了解其所有功能（包括创建自定义验证程序）。下面我们只介绍一个对 LocalLibrary 有用的子集。 要在我们的控制器中使用验证器，我们必须从'**express-validator/check**'和'**express-validator/filter**'模块中，导入我们想要使用的函数，如下所示： @@ -141,7 +143,9 @@ const { sanitizeBody } = require("express-validator/filter"); .isAlpha().withMessage('Name must be alphabet letters.'), ``` - > **备注：** 你还可以添加内联清理器，如`trim()`，如上所示。但是，此处应用清理器，仅适用于验证步骤。如果要对最终输出进行消毒，则需要使用单独的清理器方法，如下所示。 + > [!NOTE] + > + > 你还可以添加内联清理器，如`trim()`，如上所示。但是，此处应用清理器，仅适用于验证步骤。如果要对最终输出进行消毒，则需要使用单独的清理器方法，如下所示。 - [`sanitizeBody(fields)`](https://github.com/ctavan/express-validator#sanitizebodyfields): 指定一个正文要清理的字段。然后将清理操作，以菊花链形式连接到此方法。例如，下面的`escape()`清理操作，会从名称变量中，删除可能在 JavaScript 跨站点脚本攻击中使用的 HTML 字符。 @@ -197,7 +201,8 @@ const { sanitizeBody } = require("express-validator/filter"); 哦，如果你涉及文件上传，那么你可能需要“[multer](https://blog.csdn.net/qq_43624878/article/details/103607944)”中间件，你大概听说过“formidable”，但 multer 比它更强大！ -> **备注：** 更“牢固”的实现，可能允许你在创建新对象时创建依赖对象，并随时删除任何对象（例如，通过删除依赖对象，或从数据库中，删除对已删除对象的引用） 。 +> [!NOTE] +> 更“牢固”的实现，可能允许你在创建新对象时创建依赖对象，并随时删除任何对象（例如，通过删除依赖对象，或从数据库中，删除对已删除对象的引用） 。 ### 路由 diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md index a5b556300cdf17..91c3b0ddc08313 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md @@ -187,7 +187,8 @@ exports.book_update_post = [ option(value=author._id) #{author.name} ``` -> **备注：** 此处代码的更动，是为了让书本表单 book_form，能被创建和更新书本的对象共同使用 (如果不这么做，当创建表单时，在 `GET` 路由会发生一个错误)。 +> [!NOTE] +> 此处代码的更动，是为了让书本表单 book_form，能被创建和更新书本的对象共同使用 (如果不这么做，当创建表单时，在 `GET` 路由会发生一个错误)。 ## 加入一个更新按钮 @@ -211,7 +212,8 @@ exports.book_update_post = [ ![](locallibary_express_book_update_noerrors.png) -> **备注：** 其他更新对象的页面，也可以用同样的方式处理。我们把这些更新页面的实作留下，做为自我挑战。 +> [!NOTE] +> 其他更新对象的页面，也可以用同样的方式处理。我们把这些更新页面的实作留下，做为自我挑战。 ## 下一步 diff --git a/files/zh-cn/learn/server-side/express_nodejs/index.md b/files/zh-cn/learn/server-side/express_nodejs/index.md index 2d8dba7aecfba3..b69ddb07773e19 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/index.md @@ -11,7 +11,8 @@ Express 是一款受欢迎的开源 web 框架，构建语言是 JavaScript， 在开始这个模块之前你需要知道什么是服务端网页编程和 web 框架，建议你先阅读 [服务端网页编程](/zh-CN/docs/Learn/Server-side) 模块。强烈推荐了解编程概念和 [JavaScript](/zh-CN/docs/Web/JavaScript) ，但这对理解核心概念不是必需的。 -> **备注：** 这个网站有很多有用的资源用来学习 JavaScript 做客户端开发： [JavaScript](/zh-CN/docs/Web/JavaScript), [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide), [JavaScript Basics](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/zh-CN/docs/Learn/JavaScript) (learning). 核心的 JavaScript 语言和概念用 Nodejs 服务端开发是相同的，也是相关的。Node.js 提供 [额外的 API](https://nodejs.org/dist/latest-v6.x/docs/api/) 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 JavaScript API 以使用浏览器和 DOM。 +> [!NOTE] +> 这个网站有很多有用的资源用来学习 JavaScript 做客户端开发： [JavaScript](/zh-CN/docs/Web/JavaScript), [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide), [JavaScript Basics](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/zh-CN/docs/Learn/JavaScript) (learning). 核心的 JavaScript 语言和概念用 Nodejs 服务端开发是相同的，也是相关的。Node.js 提供 [额外的 API](https://nodejs.org/dist/latest-v6.x/docs/api/) 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 JavaScript API 以使用浏览器和 DOM。 > > 这篇指南将会提供一些 Node.js 和 Express 的信息，并且有很多优秀的网络资源和书籍。一些链接 比如[How do I get started with Node.js](http://stackoverflow.com/a/5511507/894359) (StackOverflow) 和 [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Quora). diff --git a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md index 644034216a8dda..d6a031cee2615a 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md @@ -98,7 +98,8 @@ Node 本身并不支持其他常见的 web 开发任务。如果需要进行一 虽然 Express 本身是极简风格的，但是开发人员通过创建各类兼容的中间件包解决了几乎所有的 web 开发问题。这些库可以实现 cookie、会话、用户登录、URL 参数、`POST` 数据、安全头等功能。可在 [Express 中间件](https://www.expressjs.com.cn/resources/middleware.html) 网页中找到由 Express 团队维护的中间件软件包列表（还有一张流行的第三方软件包列表）。 -> **备注：** 这种灵活性是一把双刃剑。虽然有一些中间件包可以解决几乎所有问题或需求，但是挑选合适的包有时也会成为一个挑战。这里构建应用没有“不二法门”，Internet 上许多示例也不是最优的，或者只展示了开发 web 应用所需工作的冰山一角。 +> [!NOTE] +> 这种灵活性是一把双刃剑。虽然有一些中间件包可以解决几乎所有问题或需求，但是挑选合适的包有时也会成为一个挑战。这里构建应用没有“不二法门”，Internet 上许多示例也不是最优的，或者只展示了开发 web 应用所需工作的冰山一角。 ## Node 和 Express 从哪儿来？ @@ -136,7 +137,8 @@ Express 是高度包容的。几乎可以将任何兼容的中间件以任意顺 首先来看 Express 的 [Hello World](https://www.expressjs.com.cn/starter/hello-world.html) 的示例（下文将逐行讨论）。 -> **备注：** 如果你已经安装了 Node 和 Express（或者你已经按照 [下一节](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 中的说明安装好了），可以将此代码保存为 **app.js**，并通过在 bash 中这样运行它： +> [!NOTE] +> 如果你已经安装了 Node 和 Express（或者你已经按照 [下一节](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 中的说明安装好了），可以将此代码保存为 **app.js**，并通过在 bash 中这样运行它： > > ```bash > node ./app.js @@ -174,7 +176,8 @@ const app = express(); 还可以创建自定义模块，并用相同的方法导入。 -> **备注：** 你一定会有自建模块的**需求**，因为这可以让代码管理更有序。单文件应用是很难理解和维护的。使用模块还有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量。 +> [!NOTE] +> 你一定会有自建模块的**需求**，因为这可以让代码管理更有序。单文件应用是很难理解和维护的。使用模块还有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量。 为了让对象暴露于模块之外，只需把它们设置为 `exports` 对象的附加属性即可。例如，下面的 **square.js** 模块就是一个导出了 `area()` 和 `perimeter()` 方法的文件： @@ -195,7 +198,8 @@ const square = require("./square"); console.log("边长为 4 的正方形面积为 " + square.area(4)); ``` -> **备注：** 为模块指定绝对路径（或模块的名字，见最初的示例）也是可行的。 +> [!NOTE] +> 为模块指定绝对路径（或模块的名字，见最初的示例）也是可行的。 一次赋值不仅能构建一个单一的属性，还能构建一个完整的对象，可以像下面这样把对象赋值给 `module.exports`（也可以让 `exports` 对象直接作为一个构造器或另一个函数）： @@ -210,7 +214,8 @@ module.exports = { }; ``` -> **备注：** 在一个既定的模块内，可以把 `exports` 想象成 `module.exports` 的 [快捷方式](https://nodejs.cn/api/modules.html#modules_exports_shortcut)。`exports` 本质上就是在模块初始化前为 `module.exports` 的值进行初始化的一个变量。这个值是对一个对象（这里是空对象）的引用。这意味着 `exports` 与 `module.exports` 引用了同一个对象，也意味着如果为 `exports` 赋其他值不会影响到 `module.exports`。 +> [!NOTE] +> 在一个既定的模块内，可以把 `exports` 想象成 `module.exports` 的 [快捷方式](https://nodejs.cn/api/modules.html#modules_exports_shortcut)。`exports` 本质上就是在模块初始化前为 `module.exports` 的值进行初始化的一个变量。这个值是对一个对象（这里是空对象）的引用。这意味着 `exports` 与 `module.exports` 引用了同一个对象，也意味着如果为 `exports` 赋其他值不会影响到 `module.exports`。 更多信息请参阅 [模块](https://nodejs.cn/api/modules.html)（Node API 文档）。 @@ -236,9 +241,11 @@ console.log("第二"); 有多种方法可以让一个异步 API 通知当前应用它已执行完毕。最常用的是在调用异步 API 时注册一个回调函数，在 API 操作结束后将“回调”之。这也是上面的代码所使用的方法。 -> **备注：** 如果有一系列独立的异步操作必须按顺序执行，那么使用回调可能会非常“混乱”，因为这会导致多级嵌套回调。人们通常把这个问题叫做“回调地狱”。缓解这个问题有以下办法：良好的编码实践（参考 ）、使用 [async](https://www.npmjs.com/package/async) 等模块、迁移至 ES6 并使用 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 等特性。 +> [!NOTE] +> 如果有一系列独立的异步操作必须按顺序执行，那么使用回调可能会非常“混乱”，因为这会导致多级嵌套回调。人们通常把这个问题叫做“回调地狱”。缓解这个问题有以下办法：良好的编码实践（参考 ）、使用 [async](https://www.npmjs.com/package/async) 等模块、迁移至 ES6 并使用 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 等特性。 -> **备注：** Node 和 Express 有一个一般性约定，即：使用“错误优先”回调。这个约定要求回调函数的第一个参数是错误值，而后续的参数包含成功数据。以下博文很好的解释了这个方法的有效性：[以 Node.js 之名：理解错误优先回调](https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/)（fredkschott.com 英文文章） +> [!NOTE] +> Node 和 Express 有一个一般性约定，即：使用“错误优先”回调。这个约定要求回调函数的第一个参数是错误值，而后续的参数包含成功数据。以下博文很好的解释了这个方法的有效性：[以 Node.js 之名：理解错误优先回调](https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/)（fredkschott.com 英文文章） ### 创建路由处理器（Route handler） @@ -252,7 +259,8 @@ app.get("/", (req, res) => { 回调函数将请求和响应对象作为参数。该函数直接调用响应的 `send()` 以返回字符串“Hello World!”。有 [许多其他响应方法](https://www.expressjs.com.cn/guide/routing.html#response-methods) 可以结束请求/响应周期，例如，通过调用 `res.json()` 来发送 JSON 响应、调用 `res.sendFile()` 来发送文件。 -> **备注：** 虽然回调函数的参数命名没有限制，但是当调用回调时，第一个参数将始终是请求，第二个参数将始终是响应。合理的命名它们，在回调体中使用的对象将更容易识别。 +> [!NOTE] +> 虽然回调函数的参数命名没有限制，但是当调用回调时，第一个参数将始终是请求，第二个参数将始终是响应。合理的命名它们，在回调体中使用的对象将更容易识别。 **Express 应用**对象还提供了为其他所有 HTTP 动词定义路由处理器的方法，大多数处理器的使用方式完全一致： @@ -290,7 +298,8 @@ router.get("/about", (req, res) => { module.exports = router; ``` -> **备注：** 向 `Router` 对象添加路由就像向之前为 `app` 对象添加路由一样。 +> [!NOTE] +> 向 `Router` 对象添加路由就像向之前为 `app` 对象添加路由一样。 首先 `require()` 路由模块（**wiki.js**），然后在 Express 应用中调用 `use()` 把 `Router` 添加到中间件处理路径中，就可以在主应用中使用这个模块中的路由处理器了。路由路径有两条：`/wiki` 和 `/wiki/about/`。 @@ -306,7 +315,8 @@ app.use("/wiki", wiki); 中间件在 Express 应用中得到了广泛使用，从提供错误处理静态文件、到压缩 HTTP 响应等等。路由函数可以通过向 HTTP 客户端返回一些响应来结束 HTTP“请求 - 响应”周期，而中间件函数*通常是*对请求或响应执行某些操作，然后调用“栈”里的下一个函数，可能是其他中间件或路由处理器。中间件的调用顺序由应用开发者决定。 -> **备注：** 中间件可以执行任何操作，运行任何代码，更改请求和响应对象，也可以**结束“请求 - 响应”周期**。如果它没有结束循环，则必须调用 `next()` 将控制传递给下一个中间件函数（否则请求将成为悬挂请求）。 +> [!NOTE] +> 中间件可以执行任何操作，运行任何代码，更改请求和响应对象，也可以**结束“请求 - 响应”周期**。如果它没有结束循环，则必须调用 `next()` 将控制传递给下一个中间件函数（否则请求将成为悬挂请求）。 大多数应用会使用**第三方**中间件来简化常见的 web 开发任务，比如 cookie、会话、用户身份验证、访问请求 `POST` 和 JSON 数据，日志记录等。参见 [Express 团队维护的中间件包列表](https://www.expressjs.com.cn/resources/middleware.html)（包含受欢迎的第三方包）。NPM 有提供其他 Express 包。 @@ -326,7 +336,8 @@ app.use(logger('dev')); ... ``` -> **备注：** 中间件和路由函数是按声明顺序调用的。一些中间件的引入顺序很重要（例如，如果会话中间件依赖于 cookie 中间件，则必须先添加 cookie 处理器）。绝大多数情况下要先调用中间件后设置路由，否则路由处理器将无法访问中间件的功能。 +> [!NOTE] +> 中间件和路由函数是按声明顺序调用的。一些中间件的引入顺序很重要（例如，如果会话中间件依赖于 cookie 中间件，则必须先添加 cookie 处理器）。绝大多数情况下要先调用中间件后设置路由，否则路由处理器将无法访问中间件的功能。 可以自己编写中间件函数，这是基本技能（仅仅为了创建错误处理代码也需要）。中间件函数和路由处理回调之间的**唯一**区别是：中间件函数有第三个参数 `next`，在中间件不会结束请求周期时应调用这个 `next`（它包含中间件函数调用后应调用的**下一个**函数）。 @@ -356,7 +367,8 @@ app.get("/", a_middleware_function); app.listen(3000); ``` -> **备注：** 上面代码中单独声明了中间件函数，并把它设置为回调。之前是把路由处理函数在使用时声明为回调。在 JavaScript 中，两种方法都可行。 +> [!NOTE] +> 上面代码中单独声明了中间件函数，并把它设置为回调。之前是把路由处理函数在使用时声明为回调。在 JavaScript 中，两种方法都可行。 请参阅 Express 文档中关于 [使用](https://www.expressjs.com.cn/guide/using-middleware.html) 和 [开发](https://www.expressjs.com.cn/guide/writing-middleware.html) Express 中间件的内容。 @@ -415,9 +427,11 @@ app.use((err, req, res, next) => { Express 内建了错误处理机制，可以协助处理 app 中没有被处理的错误。默认的错误处理中间件函数在中间件函数栈的末尾。如果一个错误传递给 `next()` 而没有用错误处理器来处理它，内建处理机制将启动，栈跟踪的错误将回写给客户端。 -> **备注：** 生产环境中不保留栈跟踪轨迹。可将环境变量 `NODE_ENV` 设置为 `'production'` 来运行所需的生产环境。 +> [!NOTE] +> 生产环境中不保留栈跟踪轨迹。可将环境变量 `NODE_ENV` 设置为 `'production'` 来运行所需的生产环境。 -> **备注：** HTTP 404 和其他“错误”状态码不作为错误处理。可使用中间件来自行处理这些状态。更多信息请参阅 Express 文档 [FAQ](https://www.expressjs.com.cn/starter/faq.html#如何处理-404-响应)。 +> [!NOTE] +> HTTP 404 和其他“错误”状态码不作为错误处理。可使用中间件来自行处理这些状态。更多信息请参阅 Express 文档 [FAQ](https://www.expressjs.com.cn/starter/faq.html#如何处理-404-响应)。 更多信息请参阅 Express 文档 [错误处理](https://www.expressjs.com.cn/guide/error-handling.html)。 diff --git a/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md b/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md index bb7d0331ac2a30..be19277ba6bbe0 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md @@ -49,7 +49,8 @@ Express 应用可以使用 Node 支持的所有数据库（Express 本身不支 使用 ORM 的好处是：程序员可以继续用 JavaScript 对象的思维而不用转向数据库语义的思维。在（同一个或不同网站）使用不同数据库时尤为明显。使用 ORM 还可以更方便地对数据进行验证和检查。 -> **备注：** 使用 ODM / ORM 通常可以降低开发和维护成本！除非你非常熟悉本地查询语言，或者项目对性能要求很高，否则强烈推荐使用 ODM。 +> [!NOTE] +> 使用 ODM / ORM 通常可以降低开发和维护成本！除非你非常熟悉本地查询语言，或者项目对性能要求很高，否则强烈推荐使用 ODM。 ### 我应该使用哪种 ORM/ODM ? @@ -73,7 +74,8 @@ NPM 站点上有许多 ODM / ORM 解决方案（另请参阅 NPM 站点上的 [o 这种 ODM 和数据库的结合方式在 Node 社区中非常流行，一定程度上是因为文档存储和查询系统与 JSON 十分相似，因此 JavaScript 开发人员会非常熟悉。 -> **备注：** 使用 Mongoose 无需事先了解 MongoDB，但是部分 [Mongoose 文档](http://mongoosejs.com/docs/guide.html) 对于熟悉 MongoDB 的朋友会更易于使用和理解。 +> [!NOTE] +> 使用 Mongoose 无需事先了解 MongoDB，但是部分 [Mongoose 文档](http://mongoosejs.com/docs/guide.html) 对于熟悉 MongoDB 的朋友会更易于使用和理解。 下面将介绍如何为 [LocalLibrary 网站](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) 定义和访问 Mongoose 模式和模型。 @@ -91,17 +93,20 @@ NPM 站点上有许多 ODM / ORM 解决方案（另请参阅 NPM 站点上的 [o 下图还展示了模型之间的关系以及重复度（Multiplicity）。重复度就是图中两框间连线两端的数字，表示两个模型之间存在的关系的数量（最大值和最小值）。例如，`Book` 框和 `Genre` 框之间有连线说明二者之间存在关系，`Book` 模型端的数字（0..\*）表示一个种类必包括零种或多种藏书（多少都可以），而 `Genre` 端的数字表示一种藏书可以有零个或多个种类。 -> **备注：** 正如下文 [Mongoose 入门](#) 中所讲，通常应该把定义文档/模型关系的字段置于同一模型中（仍可通过在搜索相关 `_id` 来回寻模型间的关系）。以下的 Book 模式中定义了 Book/Genre 和 Book/Author 关系，BookInstance 模式中定义了 Book/BookInstance 关系。这样做是简便起见，但稍存歧义，让这些字段存在于其他模式中也是可以的。 +> [!NOTE] +> 正如下文 [Mongoose 入门](#) 中所讲，通常应该把定义文档/模型关系的字段置于同一模型中（仍可通过在搜索相关 `_id` 来回寻模型间的关系）。以下的 Book 模式中定义了 Book/Genre 和 Book/Author 关系，BookInstance 模式中定义了 Book/BookInstance 关系。这样做是简便起见，但稍存歧义，让这些字段存在于其他模式中也是可以的。 ![Mongoose Library Model with correct cardinality](library_website_-_mongoose_express.png) -> **备注：** 下面是一段入门知识，讲解如何定义和使用模型。请在阅读时想想将如何构建上图中的模型。 +> [!NOTE] +> 下面是一段入门知识，讲解如何定义和使用模型。请在阅读时想想将如何构建上图中的模型。 ## Mongoose 入门 这一段将简要介绍如何将 Mongoose 连接到 MongoDB 数据库，如何定义模式和模型，以及如何进行基本查询。 -> **备注：** 本入门受到 npm 上的 [Mongoose 快速入门](https://www.npmjs.com/package/mongoose) 和 [Mongoose 官方文档](http://mongoosejs.com/docs/guide.html) 的“深度影响”。 +> [!NOTE] +> 本入门受到 npm 上的 [Mongoose 快速入门](https://www.npmjs.com/package/mongoose) 和 [Mongoose 官方文档](http://mongoosejs.com/docs/guide.html) 的“深度影响”。 ### 安装 Mongoose 和 MongoDB @@ -113,7 +118,8 @@ npm install mongoose 安装 Mongoose 会添加所有依赖项，包括 MongoDB 数据库驱动程序，但不会安装 MongoDB 本身。要安装 MongoDB 服务器，可以 [点击下载](https://www.mongodb.com/download-center) 各操作系统的安装程序在本地安装。也可以使用云端 MongoDB 实例。 -> **备注：** 本教程选用 mLab 提供的 [沙箱级](https://mlab.com/plans/pricing/) 云端“数据库即服务”（Database as a Service，DBaaS）。它适用于开发环境，且部署过程与操作系统无关（DBaaS 也适用于生产环境）。 +> [!NOTE] +> 本教程选用 mLab 提供的 [沙箱级](https://mlab.com/plans/pricing/) 云端“数据库即服务”（Database as a Service，DBaaS）。它适用于开发环境，且部署过程与操作系统无关（DBaaS 也适用于生产环境）。 ### 连接到 MongoDB @@ -137,7 +143,8 @@ db.on("error", console.error.bind(console, "MongoDB 连接错误：")); 可以用 `mongoose.connection` 取得默认的 `Connection` 对象。一旦连接，`Connection` 实例将触发打开事件。 -> **备注：** 可以使用 `mongoose.createConnection()` 创建其他连接。该函数与 `connect()` 的参数（数据库 URI，包括主机地址、数据库名、端口、选项等）一致，并返回一个 `Connection` 对象。 +> [!NOTE] +> 可以使用 `mongoose.createConnection()` 创建其他连接。该函数与 `connect()` 的参数（数据库 URI，包括主机地址、数据库名、端口、选项等）一致，并返回一个 `Connection` 对象。 ### 定义和添加模型 @@ -145,7 +152,8 @@ db.on("error", console.error.bind(console, "MongoDB 连接错误：")); `mongoose.model()` 方法将模式“编译”为模型。模型就可以用来查找、创建、更新和删除特定类型的对象。 -> **备注：** MongoDB 数据库中，每个模型都映射至一组文档。这些文档包含 `Schema` 模型定义的字段名/模式类型。 +> [!NOTE] +> MongoDB 数据库中，每个模型都映射至一组文档。这些文档包含 `Schema` 模型定义的字段名/模式类型。 #### 定义模式 @@ -185,7 +193,8 @@ const SomeModel = mongoose.model("SomeModel", SomeModelSchema); 第一个参数是为模型所创建集合的别名（Mongoose 将为 SomeModel 模型创建数据库集合），第二个参数是创建模型时使用的模式。 -> **备注：** 定义模型类后，可以使用它们来创建、更新或删除记录，以及通过查询来获取所有记录或特定子集。我们将在以下“[使用模型](#)”部分展示，包括创建视图的情况。 +> [!NOTE] +> 定义模型类后，可以使用它们来创建、更新或删除记录，以及通过查询来获取所有记录或特定子集。我们将在以下“[使用模型](#)”部分展示，包括创建视图的情况。 #### 模式类型（字段） @@ -260,7 +269,8 @@ const breakfastSchema = new Schema({ 虚拟属性是可以获取和设置、但不会保存到 MongoDB 的文档属性。getter 可用于格式化或组合字段，而 setter 可用于将单个值分解为多个值从而便于存储。文档中的示例，从名字和姓氏字段构造（并解构）一个全名虚拟属性，这比每次在模板中使用全名更简单，更清晰。 -> **备注：** 我们将使用库中的一个虚拟属性，用路径和记录的 `_id` 来为每个模型记录定义唯一的 URL。 +> [!NOTE] +> 我们将使用库中的一个虚拟属性，用路径和记录的 `_id` 来为每个模型记录定义唯一的 URL。 更多信息请参阅 [虚拟属性](http://mongoosejs.com/docs/guide.html#virtuals)（Mongoose 英文文档）。 @@ -336,7 +346,8 @@ Athlete.find({ sport: "Tennis" }, "name age", function (err, athletes) { 若像上述代码那样指定回调，则查询将立即执行。搜索完成后将调用回调。 -> **备注：** Mongoose 中所有回调都使用 `callback(error, result)` 模式。如果查询时发生错误，则参数 `error` 将包含错误文档，`result` 为 `null`。如果查询成功，则 `error`为 `null`，查询结果将填充至 `result` 。 +> [!NOTE] +> Mongoose 中所有回调都使用 `callback(error, result)` 模式。如果查询时发生错误，则参数 `error` 将包含错误文档，`result` 为 `null`。如果查询成功，则 `error`为 `null`，查询结果将填充至 `result` 。 若未指定回调，则 API 将返回 [Query](http://mongoosejs.com/docs/api.html#query-js) 类型的变量。可以使用该查询对象来构建查询，随后使用 `exec()` 方法执行（使用回调）。 @@ -382,7 +393,8 @@ Athlete.find() - [`findOne()`](http://mongoosejs.com/docs/api.html#query_Query-findOne)：查找与指定条件匹配的第一个文档。 - [`findByIdAndRemove()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove)、[`findByIdAndUpdate()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate)、[`findOneAndRemove()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove)、 [`findOneAndUpdate()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate)：通过 `id` 或条件查找单个文档，并进行更新或删除。以上是更新和删除记录的便利函数。 -> **备注：** 还有一个 [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) 方法，可获取匹配条件的项目的个数。在只期望获得记录的个数而不想获取实际的记录时可以使用。 +> [!NOTE] +> 还有一个 [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) 方法，可获取匹配条件的项目的个数。在只期望获得记录的个数而不想获取实际的记录时可以使用。 查询还能做更多。请参阅 [查询](http://mongoosejs.com/docs/queries.html)（Mongoose 英文文档）。 @@ -448,7 +460,8 @@ Story.findOne({ title: "司马迁是历史学家" }) }); ``` -> **备注：** 目光敏锐的读者可能会注意到，新的简介添加了作者，但并没有添加到 `stories` 数组中。那么怎样才能得到指定作者的所有简介？考虑把作者添加到 `stories` 数组中，但会导致作者和简介相关信息的要在两处进行维护。 +> [!NOTE] +> 目光敏锐的读者可能会注意到，新的简介添加了作者，但并没有添加到 `stories` 数组中。那么怎样才能得到指定作者的所有简介？考虑把作者添加到 `stories` 数组中，但会导致作者和简介相关信息的要在两处进行维护。 > > 更好的方法是获取作者的 `_id`，然后使用 `find()` 在所有简介的作者字段中搜索。 > @@ -500,9 +513,11 @@ SomeModel.find(callback_function); 本教程将使用 [mLab](https://mlab.com/welcome/) 免费版“[沙盒](https://mlab.com/plans/pricing/)”云数据库。这一版不适用于生产环境，因为它没有冗余设计，但非常适合进行开发和原型设计。选用它是因为它免费且易于设置，并且 mLab 是一家流行的数据库服务供应商，也是生产环境数据库的理想选择（撰写本文时（2019 年 1 月），国内流行的云数据库解决方案有 [阿里云](https://www.aliyun.com/product/mongodb?spm=5176.10695662.778269.1.2e5b8cb3Hw9HUr)、[腾讯云](https://cloud.tencent.com/product/mongodb)、[百度云](https://cloud.baidu.com/product/mongodb.html) 等）。 -> **备注：** 也可以下载并安装 [对应系统的安装包](https://www.mongodb.com/download-center)，设置本地版 MongoDB 数据库。多数指令和使用云数据库是一样的，除了连接时数据库的 URL。 +> [!NOTE] +> 也可以下载并安装 [对应系统的安装包](https://www.mongodb.com/download-center)，设置本地版 MongoDB 数据库。多数指令和使用云数据库是一样的，除了连接时数据库的 URL。 -> **备注：** 目前 mLab 网站在国内速度很慢，若遇到无法正常注册或登录的情况可以考虑本地版 MongoDB。 +> [!NOTE] +> 目前 mLab 网站在国内速度很慢，若遇到无法正常注册或登录的情况可以考虑本地版 MongoDB。 首先 [用 mLab 创建一个账户](https://mlab.com/signup/)（这是免费的，只需要输入基本联系信息，并同意服务条款）。 @@ -620,7 +635,8 @@ module.exports = mongoose.model("Author", AuthorSchema); 我们还为 `AuthorSchema` 声明了一个 "`url`" 虚拟属性，以返回模型特定实例的绝对 URL。在模板中需要获取特定作者的链接时可使用该属性。 -> **备注：** 有必要将 URL 声明为虚拟属性，因为这样，项目的 URL 就只需在一处进行更改。 +> [!NOTE] +> 有必要将 URL 声明为虚拟属性，因为这样，项目的 URL 就只需在一处进行更改。 > 此时，使用此 URL 的链接还不能工作，因为目前还没有设置任何路由，无法处理特定模型实例的代码。这个问题下节再讲。 模块的最后对模型进行导出。 @@ -714,7 +730,9 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema); 1. 下载（或新建）文件 [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)，保存在 express-locallibrary-tutorial 目录（`package.json` 所在位置） 。 - > **备注：** 无需深究 [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)，它只是为数据库添加一些示例数据。 + > [!NOTE] + > + > 无需深究 [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)，它只是为数据库添加一些示例数据。 > > 译注：针对 node.js3.0 及以后版本，mlab 使用“mongodb+srv://”链接而非“mongodb://”，请对[populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/master/populatedb.js)源码酌情修改，否则会报错而添加数据失败。 @@ -732,7 +750,8 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema); 4. 该脚本应一路运行至完成，并在终端中记录所创建的项目。 -> **备注：** 打开 [mLab](https://mlab.com/home) 数据库主页面，现在藏书、作者、种类和藏书副本的集合应该都可以打开了，也可以查看单个文档。 +> [!NOTE] +> 打开 [mLab](https://mlab.com/home) 数据库主页面，现在藏书、作者、种类和藏书副本的集合应该都可以打开了，也可以查看单个文档。 ## 小结 diff --git a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md index e1f6f30af28938..712e4eb4b71cf1 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md @@ -82,7 +82,8 @@ router.get("/about", (req, res) => { module.exports = router; ``` -> **备注：** 上面的路由处理回调直接定义在了路由函数中。LocalLibrary 的回调将定义在单独的控制器模块中。 +> [!NOTE] +> 上面的路由处理回调直接定义在了路由函数中。LocalLibrary 的回调将定义在单独的控制器模块中。 要在主应用中使用该路由模块，首先应 `require` 它（**wiki.js**），然后对 Express 应用对象调用 `use()`（指定路径‘/wiki’），即可将其添加到中间件处理路径。 @@ -106,7 +107,8 @@ router.get("/about", (req, res) => { 该回调有三个参数（通常命名为：`req`、`res`、`next`），分别是：HTTP 请求对象、HTTP 响应、中间件链中的下一个函数。 -> **备注：** 路由函数就是 [Express 中间件](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)，这意味着它们必须（通过响应）结束请求，否则必须调用链中的 `next` 函数。上述示例使用`send()` 完成了请求，所以没有使用 `next` 参数（参数表中将其省略）。 +> [!NOTE] +> 路由函数就是 [Express 中间件](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)，这意味着它们必须（通过响应）结束请求，否则必须调用链中的 `next` 函数。上述示例使用`send()` 完成了请求，所以没有使用 `next` 参数（参数表中将其省略）。 > > 上述路由函数只需要一个回调，可以根据需要指定任意数量的回调参数，或一个回调函数数组。每个函数都将加入中间件链，并且将按添加顺序调用（若有回调完成请求则中止当前周期）。 @@ -145,7 +147,8 @@ app.get(/.*fish$/, (req, res) => { }); ``` -> **备注：** LocalLibrary 的大部分路由都只使用字符串，很少用字符串模式和正则表达式。接下来将讨论“路由参数”。 +> [!NOTE] +> LocalLibrary 的大部分路由都只使用字符串，很少用字符串模式和正则表达式。接下来将讨论“路由参数”。 ### 路由参数 @@ -163,7 +166,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => { 路由参数名必须由“单词字符”（/`[A-Za-z0-9_]`/）组成。 -> **备注：** URL `/book/create` 会匹配 `/book/:bookId` 这样的路由（将提取值为'`create`' 的 '`bookId`'）。第一个与传入 URL 相匹配的路由会被使用，因此 `/book/create` 的路由处理器必须定义在 `/book/:bookId` 路由之前，才能妥善处理。 +> [!NOTE] +> URL `/book/create` 会匹配 `/book/:bookId` 这样的路由（将提取值为'`create`' 的 '`bookId`'）。第一个与传入 URL 相匹配的路由会被使用，因此 `/book/create` 的路由处理器必须定义在 `/book/:bookId` 路由之前，才能妥善处理。 以上就是使用路由所有的预备知识。Express 文档中还能找到更多信息：[基础路由](http://expressjs.com/en/starter/basic-routing.html) 和 [路由指南](http://expressjs.com/en/guide/routing.html)。以下是 LocalLibrary 路由和控制器的设置过程。 @@ -182,7 +186,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => { 与之相反，其他 URL 是用于处理特定文档/模型实例的，它们会将项目的标识嵌入 URL（上文的 ``）。可以用路径参数来提取嵌入的信息，并传递给路由处理器（后续章节中用于动态获取数据库中的信息）。通过在 URL 中嵌入信息，使得每种类型的所有资源只需要一个路由（例如，所有藏书副本的显示操作只需要一个路由）。 -> **备注：** Express 可以通过任何方式构造 URL，可以在 URL 正文中嵌入信息（如上文），或使用 URL `GET` 参数（例如 `/book/?id=6`）。无论哪种方法，URL 都应保持整洁、合理且易读（另请参阅 [W3C 相关建议](https://www.w3.org/Provider/Style/URI)）。 +> [!NOTE] +> Express 可以通过任何方式构造 URL，可以在 URL 正文中嵌入信息（如上文），或使用 URL `GET` 参数（例如 `/book/?id=6`）。无论哪种方法，URL 都应保持整洁、合理且易读（另请参阅 [W3C 相关建议](https://www.w3.org/Provider/Style/URI)）。 下面我们为上述所有 URL 创建路由处理器回调函数和路由代码。 @@ -201,7 +206,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => { genreController.js ``` -> **备注：** 上述四个文件可到 GitHub 下载 [dummyControllers.zip](https://github.com/roy-tian/mdn-examples/blob/master/server/express-locallibrary-tutorial/controllers/dummyControllers.zip)。（链接已失效，请移步英文版查看具体代码） +> [!NOTE] +> 上述四个文件可到 GitHub 下载 [dummyControllers.zip](https://github.com/roy-tian/mdn-examples/blob/master/server/express-locallibrary-tutorial/controllers/dummyControllers.zip)。（链接已失效，请移步英文版查看具体代码） ### `Author` 控制器 @@ -283,7 +289,8 @@ exports.index = (req, res) => { res.send('未实现：站点首页'); }; catalog.js ``` -> **备注：** 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。 +> [!NOTE] +> 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。 **/routes/catalog.js** 中有以下代码： @@ -350,7 +357,8 @@ router.get("/", (req, res) => { }); ``` -> **备注：** 这是我们第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 响应方法。它会使路由重定向到指定的页面，默认发送 HTTP 状态代码“302 Found”。可以根据需要更改返回的状态代码、设置绝对或相对路径。 +> [!NOTE] +> 这是我们第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 响应方法。它会使路由重定向到指定的页面，默认发送 HTTP 状态代码“302 Found”。可以根据需要更改返回的状态代码、设置绝对或相对路径。 ### 更新 app.js @@ -372,7 +380,8 @@ app.use("/users", usersRouter); app.use("/catalog", catalogRouter); // 将 catalog 路由添加进中间件链 ``` -> **备注：** 我们将图书编目模块添加到了 `'/catalog'` 路径，该路径是 catalog 模块中所有路径的前缀。例如，访问藏书列表 的 URL 为：`/catalog/books/`。 +> [!NOTE] +> 我们将图书编目模块添加到了 `'/catalog'` 路径，该路径是 catalog 模块中所有路径的前缀。例如，访问藏书列表 的 URL 为：`/catalog/books/`。 大功告成。LocalLibrary 网站所需的所有 URL 的路由和框架函数都已准备完毕。 @@ -392,7 +401,8 @@ app.use("/catalog", catalogRouter); // 将 catalog 路由添加进中间件链 DEBUG=express-locallibrary-tutorial:* npm run devstart ``` -> **备注：** 以上命令只对 bash 有效，要在 Windows 上使用 bash，最简单的方法就是安装 Git。（详情参见[教程 2 相关译注](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#使用应用生成器)） +> [!NOTE] +> 以上命令只对 bash 有效，要在 Windows 上使用 bash，最简单的方法就是安装 Git。（详情参见[教程 2 相关译注](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#使用应用生成器)） 接下来浏览上面一些 URL，确保不会收到错误页面（HTTP 404）。可以尝试以下示例： diff --git a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md index b58be3d0cd143e..cc704f7a656f5f 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md @@ -33,17 +33,20 @@ slug: Learn/Server-side/Express_Nodejs/skeleton_website 以下内容介绍了应用生成器的用法，以及视图 / CSS 的一些不同选项。还介绍了骨架站点的组织结构。最后，我们将介绍站点的运行方法，从而对其进行验证。 -> **备注：** Express 应用生成器并非唯一的 Express 应用生成工具，而且生成项目的结构也不是组织文件和目录的唯一可行方式。但生成项目具有易于扩展和理解的模块化结构。最简单的 Express 应用请参阅 [Hello world 示例](http://expressjs.com.cn/starter/hello-world.html)（Express 镜像站）。 +> [!NOTE] +> Express 应用生成器并非唯一的 Express 应用生成工具，而且生成项目的结构也不是组织文件和目录的唯一可行方式。但生成项目具有易于扩展和理解的模块化结构。最简单的 Express 应用请参阅 [Hello world 示例](http://expressjs.com.cn/starter/hello-world.html)（Express 镜像站）。 ## 使用应用生成器 -> **备注：** 本教程中命令操作基于 Linux/macOS 的 bash 终端，Windows 的命令提示符 cmd/PowerShell 与 bash 的概念和用法略有不同，为在 Windows 上获得一致的体验，可以： +> [!NOTE] +> 本教程中命令操作基于 Linux/macOS 的 bash 终端，Windows 的命令提示符 cmd/PowerShell 与 bash 的概念和用法略有不同，为在 Windows 上获得一致的体验，可以： > > - 自己弄懂 cmd/PowerShell 与 bash 的区别。 > - 使用 [Git](https://git-scm.com/) 或 [MSYS2](http://www.msys2.org/) 为 Windows 提供的 bash。（推荐） > - 使用 Windows 的 Linux 子系统。（到 Microsoft Store 中搜索“Linux”，安装喜欢的版本（Ubuntu 18.04、openSUSE 42、Debian 等），仅限 Windows 10，使用前需要先安装 [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10)） -> **备注：** 你可能已经发现国内用 NPM 太慢了！这是由众所周知的不可抗力造成的。可用淘宝提供的 [CNPM](https://npm.taobao.org/) 代替之，功能和用法基本一致（只是不能上传自己的包）。 +> [!NOTE] +> 你可能已经发现国内用 NPM 太慢了！这是由众所周知的不可抗力造成的。可用淘宝提供的 [CNPM](https://npm.taobao.org/) 代替之，功能和用法基本一致（只是不能上传自己的包）。 你应该已经安装好了生成器，它是 [设置 Node 开发环境](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 的一部分。可以使用 NPM 来安装全局的生成器，如下所示： @@ -84,13 +87,15 @@ express 还可以使用 `--view` 选择视图（模板）引擎，并且/或者使用 `--css` 选择 CSS 生成引擎。 -> **备注：** 不推荐用 `--hogan`、`--ejs`、`--hbs` 等参数选用模板引擎。请使用 `--view`（或 `-v`）。 +> [!NOTE] +> 不推荐用 `--hogan`、`--ejs`、`--hbs` 等参数选用模板引擎。请使用 `--view`（或 `-v`）。 ### 我应该用哪个视图引擎？ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](https://www.npmjs.com/package/ejs)、[Hbs](http://github.com/donpark/hbs)、[Pug](https://pugjs.org/api/getting-started.html) (Jade)、[Twig](https://www.npmjs.com/package/twig) 和 [Vash](https://www.npmjs.com/package/vash)，缺省选项是 Jade。Express 本身也支持大量其他模板语言，[开箱即用](https://github.com/expressjs/express/wiki#template-engines)。 -> **备注：** 如果要使用生成器不支持的模板引擎，请参阅 [在 Express 中使用模板引擎](http://expressjs.com.cn/guide/using-template-engines.html)（Express 文档）和所选视图引擎的文档。 +> [!NOTE] +> 如果要使用生成器不支持的模板引擎，请参阅 [在 Express 中使用模板引擎](http://expressjs.com.cn/guide/using-template-engines.html)（Express 文档）和所选视图引擎的文档。 一般来说，你应该选择一个大而全的模板引擎，可以尽快进入生产状态。就像你选择其他组件一样！选用模板引擎需要考虑以下因素： @@ -108,7 +113,8 @@ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](h - 支持异步操作和流。 - 可以在同时在客户端和服务器上使用。如果一款模板引擎可以在客户端使用，那么就使在客户端托管数据并完成所有（或大多数）渲染成为可能。 -> **备注：** 互联网上有许多资源，可帮助你选择合适的视图/模板引擎。 +> [!NOTE] +> 互联网上有许多资源，可帮助你选择合适的视图/模板引擎。 本项目选用 [Pug](https://pugjs.org/api/getting-started.html) 模板引擎（Jade 是它不久前的曾用名），它是最流行的 Express / JavaScript 模板语言之一，且对 Express 生成器 [开箱即用](https://github.com/expressjs/express/wiki#template-engines)。 @@ -116,7 +122,8 @@ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](h Express 应用生成器支持最常见的 CSS 引擎：[LESS](http://lesscss.org/), [SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://stylus-lang.com/)。 -> **备注：** CSS 的一些限制导致某些任务完成起来非常困难。CSS 引擎提供了更强大的语法来定义 CSS，然后将定义编译为纯 CSS 供浏览器使用。 +> [!NOTE] +> CSS 的一些限制导致某些任务完成起来非常困难。CSS 引擎提供了更强大的语法来定义 CSS，然后将定义编译为纯 CSS 供浏览器使用。 与模板引擎一样，你也应该使用样式表引擎，这可以最大化团队生产力。本项目将使用原始 CSS（默认的），因为我们对 CSS 要求不复杂，没有必要使用引擎。 @@ -156,7 +163,8 @@ Express 应用生成器支持最常见的 CSS 引擎：[LESS](http://lesscss.org 一个 Express 应用就配置成功了，它托管于 localhost:3000。 -> **备注：** 指定 DEBUG 变量可启用控制台日志记录/调试。例如，当你访问上面的页面时，你会看到像这样的调试输出： ![用 npm start 启动这个应用](npm-start.png) 直接通过 `npm start` 命令启动应用也可以，但不会看到调试信息。 +> [!NOTE] +> 指定 DEBUG 变量可启用控制台日志记录/调试。例如，当你访问上面的页面时，你会看到像这样的调试输出： ![用 npm start 启动这个应用](npm-start.png) 直接通过 `npm start` 命令启动应用也可以，但不会看到调试信息。 ## 文件改动时重启服务器 @@ -199,7 +207,8 @@ DEBUG=express-locallibrary-tutorial:* npm run devstart 现在，如果编辑项目中的任何文件，服务器将自动重启（或者可以随时使用 rs 命令来重启）。查看更新后的页面需要点击浏览器的“刷新”按钮。 -> **备注：** 这里必须使用“`npm run `”命令，而不是 `npm start`，因为“start”本质上是映射到脚本的一条 NPM 命令。我们可以在 `start` 脚本中替换它，但我们只想在开发期间使用 nodemon，因此有必要创建一条新的脚本命令。 +> [!NOTE] +> 这里必须使用“`npm run `”命令，而不是 `npm start`，因为“start”本质上是映射到脚本的一条 NPM 命令。我们可以在 `start` 脚本中替换它，但我们只想在开发期间使用 nodemon，因此有必要创建一条新的脚本命令。 ## 生成的项目 @@ -327,7 +336,8 @@ var indexRouter = require("./routes/index"); var usersRouter = require("./routes/users"); ``` -> **备注：** 此时我们刚刚导入了模块；还没有真正使用过其中的路由（稍后会使用）。 +> [!NOTE] +> 此时我们刚刚导入了模块；还没有真正使用过其中的路由（稍后会使用）。 下面我们用导入的 `express` 模块来创建 `app` 对象，然后使用它来设置视图（模板）引擎。设置引擎分两步：首先设置 '`views`' 以指定模板的存储文件夹（此处设为子文件夹 **/views**）。然后设置 '`view engine`' 以指定模板库（本例中设为“pug” ）。 @@ -357,7 +367,8 @@ app.use("/", indexRouter); app.use("/users", usersRouter); ``` -> **备注：** 这些路径（`'/'` 和 '`/users'`）将作为导入路由的前缀。如果导入的模块 `users` 在 `/profile` 定义了路由，则可以在 `/users/profile` 访问该路由。我们将在后面的文章中，详细讨论路由。 +> [!NOTE] +> 这些路径（`'/'` 和 '`/users'`）将作为导入路由的前缀。如果导入的模块 `users` 在 `/profile` 定义了路由，则可以在 `/users/profile` 访问该路由。我们将在后面的文章中，详细讨论路由。 最后一个中间件为错误和 HTTP 404 响应添加处理方法。 @@ -407,7 +418,8 @@ module.exports = router; 该路由定义了一个回调，在检测到正确模式的 HTTP `GET` 请求时将调用该回调。正确模式即导入模块时指定的路由（'`/users`'）加该模块（'`/`'）中定义的任何内容。换句话说，在收到 `/users/` URL 时使用此路由。 -> **备注：** 用 node 启动该应用并访问 ，浏览器会返回一条消息：'respond with a resource'。 +> [!NOTE] +> 用 node 启动该应用并访问 ，浏览器会返回一条消息：'respond with a resource'。 值得注意的是，上述回调函数有第三个参数 '`next`'，因此它是一个中间件函数，而不是简单的路由回调。`next` 参数暂时还用不到，在 `'/'` 路径中添加多个路由处理器时才会涉及。 diff --git a/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md index 81ff58cccb2644..30bc0f681bc786 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md @@ -63,7 +63,8 @@ slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website 如果实在进行不下去，可以参考 [Github](https://github.com/mdn/express-locallibrary-tutorial) 上的完整版本。 -> **备注：** 本教程中的代码，已在特定版本（项目的 [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) 所列版本）的 node、Express 及其他模组的环境下通过测试。 +> [!NOTE] +> 本教程中的代码，已在特定版本（项目的 [package.json](https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json) 所列版本）的 node、Express 及其他模组的环境下通过测试。 ## 总结 diff --git a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md index d00f05a81fa546..45073059d99a8b 100644 --- a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md @@ -57,7 +57,8 @@ slug: Learn/Server-side/First_steps/Client-Server_overview 你可以通过点击一个链接或者在网站进行一次搜索（比如搜索引擎的首页）做出一次简单的 GET 请求。比如，当你在 MDN 上进行一次对“客户端概览”词条的搜索时，HTTP 请求就被发送出去了，你将会看到正如下面一样被展示出来的文本信息（展示出来的信息不一定是相同的，因为其中一部分信息还取决于你的浏览器）。 -> **备注：** HTTP 消息的格式是在“网络标准”（[RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！ +> [!NOTE] +> HTTP 消息的格式是在“网络标准”（[RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)）中定义的。你不需要知道这个标准的细节，但是现在你至少得知道所有这些是来自哪儿的！ #### 请求 @@ -185,13 +186,15 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD Content-Length: 0 ``` -> **备注：** 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如）或者使用浏览器扩展例如 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/)。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 [Network Monitor](/zh-CN/docs/Tools/Network_Monitor) 工具)。 +> [!NOTE] +> 上面展示的 HTTP 请求和响应式通过 Fiddler 软件来捕获的，你也可以得到相似的信息通过使用网络嗅探器（比如）或者使用浏览器扩展例如 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/)。你可以自己尝试一下。使用任何一个上面链接的工具，浏览一个站点并修改主要信息来观察不同的请求和响应。更多的现代浏览器拥有网络监控工具（例如，在 Firefox 上的 [Network Monitor](/zh-CN/docs/Tools/Network_Monitor) 工具)。 ## 静态网站 静态网站是指每当请求一个特定的资源时，会从服务器返回相同的硬编码内容。因此，例如，如果你在 `/static/myproduct1.html` 有一个关于产品的页面，则该页面将返回给每个用户。如果你添加另一个类似的产品到你的网站，你将需要添加另一个页面（例如 `myproduct2.html` ）等。这可能开始变得非常低效：当你访问数千个产品页面时会发生什么——你会在每个页面（基本的页面模板，结构等等）上重复很多代码，如果你想改变页面结构的任何东西，比如添加一个新的“相关产品”部分，必须单独更改每个页面。 -> **备注：** 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择，然而随着页面数量的增加，它们的维护成本也会很高。 +> [!NOTE] +> 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择，然而随着页面数量的增加，它们的维护成本也会很高。 让我们回顾一下在上一篇文章中看到的静态网站架构图，看看它是如何工作的。 @@ -268,7 +271,8 @@ urlpatterns = [ ] ``` -> **备注：** 在`url()`函数中的第一个参数可能看起来有点古怪 (比如`r'^junior/$`) 因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”。 +> [!NOTE] +> 在`url()`函数中的第一个参数可能看起来有点古怪 (比如`r'^junior/$`) 因为他们使用一个叫做“正则表达式”(RegEx, or RE) 的字符匹配机制。在这里，你还不需要知道正则表达式是如何工作的，除了要知道它们是如何允许我们在 URL 中匹配到字符的 (而不是像上面的硬编码) 并且知道如何在我们的视图函数中将它们用作参数。举个例子，一个真正简单的正则表达式可能会说“匹配一个大写字母，后面跟着 4 到 7 个小写字母”。 Web 框架还可以轻松地使用查看函数，从数据库获取信息。我们的数据结构是在模型中定义的，模型是定义要存储在底层数据库中的字段的 Python 类。如果我们有一个名为 Team 的模型，其中有一个“_team_type_”字段，那么我们可以使用一个简单的查询语法来取回所有具有特定类型的球队。 diff --git a/files/zh-cn/learn/server-side/first_steps/introduction/index.md b/files/zh-cn/learn/server-side/first_steps/introduction/index.md index df29a835450563..cccd418f490b0c 100644 --- a/files/zh-cn/learn/server-side/first_steps/introduction/index.md +++ b/files/zh-cn/learn/server-side/first_steps/introduction/index.md @@ -80,7 +80,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 同样的，当客户端和服务器端代码使用框架时，它们的领域是不同的，因此框架也会不同。客户端 web 框架简化布局和演示任务，然而服务器端 web 框架提供大量的普通 Web 服务功能，不然的话你可能需要自己来实现这些功能（比如支持会话、支持用户和身份验证、简单的数据访问、模板库等）。 -> **备注：** 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。 +> [!NOTE] +> 客户端框架通常被用来帮助加速客户端代码的开发，但是你也可以选择手写所有的代码；事实上，如果你只需要一个小型的、简单的网站 UI，手写自己的代码可能更快并且更高效。 > > 相反的，你应该从来没有考虑过不使用框架而直接编写 web 应用程序的服务器端组件——实现一个重要的功能比如 HTTP 服务器真的很难直接从头开始用 Python 语言构建，但是一些用 Python 语言写的 web 框架，比如 Django 提供了开箱即用的功能，同时还包含其他很多有用的工具。 @@ -104,7 +105,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 因为数据被放在数据库中，因此更加容易被分享和更新到其他商业系统（比如，当产品在网上或者实体店卖掉之后，商店可以更新它的存货清单数据库） -> **备注：** 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处： +> [!NOTE] +> 你不用很难就可以想到服务器端代码对于高效存储和传输信息的好处： > > 1. 打开[亚马逊](https://www.amazon.com)或者其他一些电子商务网站。 > 2. 搜索一系列关键词，然后注意到页面结构并没有发生改变，尽管搜索结果发生了改变。 @@ -118,7 +120,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 对用户习惯的更深层分析可以被用来预测用户的兴趣和更加深度地定制化回应和通知，比如，提供一张清单来展示曾经去过的地方，或者在地图上标识你可能想去的非常受欢迎的地点。 -> **备注：** 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。 +> [!NOTE] +> 谷歌地图会保存你的搜索，浏览的历史记录。频繁地浏览或者频繁地搜索地址将会使得它更加的醒目。 > > 谷歌搜索结果基于之前的搜索进行优化。 > @@ -139,7 +142,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 - 社交网站，比如 Facebook 允许用户完全控制他们自己的数据，但是只允许他们的朋友和家人查看和评论这些数据。用户决定谁可以看到他们的数据，并且通过扩展，决定谁的数据出现在他们的反馈里面——授权是用户体验里面的一个核心部分！ - 此时此刻你所访问的网站也控制着内容访问：文章对所有人都是可视的，但是只有已经登录的用户可以编辑内容。为了试验一下，你可以点击一下页面上方的**编辑**按钮——如果你已经登录了的话，将会展示出编辑界面；如果你还没有登录，你会被导航到注册界面。 -> **备注：** 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？ +> [!NOTE] +> 想想其他真实的限制了内容访问例子。比如，如果你直接访问你银行的网页，你可以看到什么？用你的帐号登录之后——你可以看到和修改什么额外的信息呢？有些什么信息是你只可以看到的而只有银行可以修改的？ ### 存储会话和状态信息 @@ -147,7 +151,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 这也就允许，比如说，一个网站知道一个用户曾经登录过并且展示他们邮箱的链接或者订单历史，或者可能存储一个简单游戏的状态来确保用户可以再次访问网站然后从上次留下来的地方继续。 -> **备注：** 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如[The Age](http://www.theage.com.au/)）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子 +> [!NOTE] +> 访问一个具有订阅模式的新闻网站，并且打开一系列标签（比如[The Age](http://www.theage.com.au/)）。几个小时或者几天之后再来访问这个网站。最后你将开始被重定向到一个向你解释如何订阅的页面上，并且你将无法访问文章。这个信息就是一个 session 信息被存储在 cookie 中的例子 ### 通知和通讯 @@ -159,7 +164,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 - 亚马逊定期的向你发送产品邮件并且向你推荐和你曾经买过的产品很相似的产品或者是他们觉得你可能感兴趣的产品。 - 一个网站的服务器可能向网站管理员发送警告消息来警告他们服务器内存不足或者可疑的用户行为。 -> **备注：** 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。 +> [!NOTE] +> 最普通的一种通知类型就是“注册认证”。选择任何一个你感兴趣的大型网站（谷歌、亚马逊、Instagram 等）并且用你的邮箱创建一个新的帐号。你很快会收到一封验证你的注册的邮件，或者需要你去激活帐号。 ### 数据分析 @@ -167,7 +173,8 @@ web 开发者无法控制用户可能会使用哪一种浏览器来浏览网站 比如，亚马逊和谷歌都基于过去的搜索（和购物）信息来为产品打广告。 -> **备注：** 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。 +> [!NOTE] +> 如果你使用 Facebook，去看看你的 main feed，然后看一下帖子流。注意到其中一些帖子不是按照数字进行排列的 - 拥有更多“喜欢”的帖子在列表中通常高于最近的帖子。 > > 也可以看一下你收到的广告是什么类型的——你或许会看到你在其他网站查看的商品。Facebook 为突出内容和广告的算法或许还很令人疑惑，但是很明显的，它是依据你的喜好、品味和习惯的！ diff --git a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md index f6fa534a95fd4d..499b2c2988e081 100644 --- a/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md +++ b/files/zh-cn/learn/server-side/first_steps/web_frameworks/index.md @@ -142,7 +142,8 @@ web 框架经常提供模板系统。这些允许你制定输出文档的结构 比如，Django 模板允许你通过使用“双重花括号”（如 `\{{ variable_name }}`）来指定变量，当页面被渲染出来时，这些变量会被从视图函数传递过来的值代替。模板系统也会提供表达支持（通过语法 `{% expression %}` 来实现），这样就允许模板进行一些简单的操作比如迭代传递给模板的值列表。 -> **备注：** 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。 +> [!NOTE] +> 很多其他的模板系统使用相似的语法，比如：Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 等。 下面的代码片段展示了它们如何工作的。下面的内容接着从上一个部分而来的“youngest team”实例，HTML 模板通过视图函数传进一个叫做 youngest_teams 的值列表。在 HTML 骨架中我们有一个初步检查 youngest_teams 变量是否存在的表示，然后会在 for 循环里面进行迭代。在每一次迭代中模板会以列表元素的形式展示队伍的 team_name 值。 @@ -188,7 +189,8 @@ web 框架经常提供模板系统。这些允许你制定输出文档的结构 如果你是一个完全的初学者，那么你可能会基于“易于学习”来选择你的框架。除了语言本身的“易于学习”之外，帮助新手的高质量的文档/教程和一个活跃的社区是你最有价值的资源。在后续课程中，我们选取了 Django（Python）和 Express（Node/Javascript）来编写我们的实例，主要因为它们很容易上手并且有强大的支持。 -> **备注：** 我们可以去 [Django](https://www.djangoproject.com/) (Python) 和 [Express](https://expressjs.com/) (Node/JavaScript) 的主页上去看看它们的文档和社区。 +> [!NOTE] +> 我们可以去 [Django](https://www.djangoproject.com/) (Python) 和 [Express](https://expressjs.com/) (Node/JavaScript) 的主页上去看看它们的文档和社区。 > > 1. 导航至主页 (上面已给出链接) > @@ -208,7 +210,8 @@ web 框架经常提供模板系统。这些允许你制定输出文档的结构 下面的服务器端框架体现了现在最受欢迎的几个。它们有你需要用来提升效率的一切东西——它们是开源的，一直保持发展的态势，有着富有激情的社区，社区里的人创作出文档并且在讨论板上帮助使用者，并且被使用在很多高质量的网站上。当然还有很多其他非常棒的框架，你可以使用搜索引擎探索一下。 -> **备注：** （部分）解释来自框架的官方网站！ +> [!NOTE] +> （部分）解释来自框架的官方网站！ ### Django (Python) diff --git a/files/zh-cn/learn/server-side/first_steps/website_security/index.md b/files/zh-cn/learn/server-side/first_steps/website_security/index.md index 2ac3b9a07541ff..73c399f1f8913d 100644 --- a/files/zh-cn/learn/server-side/first_steps/website_security/index.md +++ b/files/zh-cn/learn/server-side/first_steps/website_security/index.md @@ -34,7 +34,8 @@ slug: Learn/Server-side/First_steps/Website_security 文章的剩余部分列举了一些常见威胁的细节以及用来保护站点的一些简单措施。 -> **备注：** 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。 +> [!NOTE] +> 这只是一篇介绍性的主题，旨在帮你开始思考站点安全。它并不详尽。 ## 站点安全威胁 @@ -44,7 +45,8 @@ slug: Learn/Server-side/First_steps/Website_security XSS 是一个术语，用来描述一类允许攻击者通过网站将客户端脚本代码注入到其他用户的浏览器中的攻击手段。由于注入到浏览器的代码来自站点，其是可信赖的，因此可以做类似将该用户用于站点认证的 cookie 发送给攻击者的事情。一旦攻击者拿到了这个 cookie，他们就可以登陆到站点，就好像他们就是那个用户，可以做任何那个用户能做的事情。根据站点的不同，这些可能包括访问他们的信用卡信息、查看联系人、更改密码等。 -> **备注：** XSS 攻击在历史上较其他类型更为常见。 +> [!NOTE] +> XSS 攻击在历史上较其他类型更为常见。 有两种主要的方法可以让站点将注入的脚本返回到浏览器——通常被称做 反射型 和 持久型 XSS 攻击。 @@ -80,7 +82,8 @@ SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WH 避免此种攻击的方法就是确保任何传递给 SQL 查询语句的用户数据都无法更改查询的本来用意。有种方式便是将用户输入中任何在 SQL 语句中有特殊含义的字符进行转义。 -> **备注：** SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \\' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。 +> [!NOTE] +> SQL 语句把 ' 号作为一个字符串常量的开头的结尾。通过在前面放置一个斜杠，我们把单引号进行了转义 ( \\' )，然后 SQL 就会将其视为一个字符（作为字符串的一部分）。 在下面的语句中我们对 ' 字符进行了转义。SQL 会将**粗体**显示的整段字符串解释为 name(这个 name 很古怪，但至少是没有危害的！) @@ -90,7 +93,8 @@ SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo W Web 框架通常会为你进行这种转义操作。例如 Django，可以确保任何传递给查询集合 (model 查询) 的用户数据都是已经转义过的。 -> **备注：** 本章节引用了大量来自 [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection) 的内容。 +> [!NOTE] +> 本章节引用了大量来自 [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection) 的内容。 ### 跨站请求伪造 (CSRF) @@ -102,7 +106,8 @@ CSRF 攻击允许恶意用户在另一个用户不知情的情况下利用其身 最终的结果就是任何已登陆到站点的用户在点击了提交按钮后都会进行这个交易。John 发财啦！ -> **备注：** 这里的诀窍是，John 不需要访问那些用户的 cookie（或者说身份信息）——用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。 +> [!NOTE] +> 这里的诀窍是，John 不需要访问那些用户的 cookie（或者说身份信息）——用户的浏览器存储了这些信息，而且会自动将其包含在发送给对应服务器的请求中。 杜绝此类攻击的一种方式是在服务器端要求每个 POST 请求都包含一个用户特定的由站点生成的密钥 ( 这个密钥值可以由服务器在发送用来传输数据的网页表单时提供）。这种方式可以使 John 无法创建自己的表单，因为他必须知道服务器提供给那个用户的密钥值。即使他找出了那个密钥值，并为那个用户创建了表单，他也无法用同样的表单来攻击其他的所有用户。 @@ -124,7 +129,8 @@ Web 框架通常都会包含一些类似的 CSRF 防范技巧。 当 Web 应用信任来自浏览器的数据时，上述章节里提到的大多数攻击利用手段才能成功。无论你做什么其他的事情来提升你的网站的安全性能，在将信息展示在浏览器之前、在使用 SQL 语句进行查询之前、在传递给一个操作系统或者文件系统之前，你应该过滤掉所有的用户源信息。 -> **警告：** 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是**不要相信来自浏览器的数据**。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。 +> [!WARNING] +> 在你可以了解到的有关网站安全大多数 课程之中，最重要的就是**不要相信来自浏览器的数据**。包括在 URL 参数中的 GET 请求、POST 请求、HTTP 头、cookies、用户上传的文件等等。一定要每次都检查用户输入的信息。每次都预想最坏的结果。 你可以采取一些简单的步骤： From 58114acd1a6a11f2b757d8569c4989f24c874079 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 26 Jul 2024 19:36:49 +0530 Subject: [PATCH 004/623] [JA] update google short link (#22523) - porting from https://github.com/mdn/content/pull/34925 --- files/ja/learn/javascript/first_steps/variables/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/learn/javascript/first_steps/variables/index.md b/files/ja/learn/javascript/first_steps/variables/index.md index e636181f1aaa83..38f4dfc2366b1f 100644 --- a/files/ja/learn/javascript/first_steps/variables/index.md +++ b/files/ja/learn/javascript/first_steps/variables/index.md @@ -200,7 +200,7 @@ myName = "Bob"; これらの理由と複数の理由から、コードでは `var` よりも `let` を使用することをお勧めします。古いブラウザーの対応を明確に書いている場合を除き、2015 年以降、現代のすべてのブラウザーが `let` に対応しているため、`var` を使用する理由はなくなりました。 -> **メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。[Chrome のコンソールの機能](https://goo.gle/devtools-const-repl)には、`let` と `const` による変数の再宣言が許可されているものがあります。 +> **メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。[Chrome のコンソールの機能](https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9)には、`let` と `const` による変数の再宣言が許可されているものがあります。 > > ```plain > > let myName = "Chris"; From e75169b0f21c7f1516893647f6683e13797dd09f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 22 Jul 2024 10:16:37 +0900 Subject: [PATCH 005/623] =?UTF-8?q?2023/07/04=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_box_sizing/index.md | 151 +++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 files/ja/web/css/css_box_sizing/index.md diff --git a/files/ja/web/css/css_box_sizing/index.md b/files/ja/web/css/css_box_sizing/index.md new file mode 100644 index 00000000000000..c350264aa1ebd0 --- /dev/null +++ b/files/ja/web/css/css_box_sizing/index.md @@ -0,0 +1,151 @@ +--- +title: CSS ボックスサイズ指定 +slug: Web/CSS/CSS_box_sizing +l10n: + sourceCommit: 2ef2c905a7322f5a533cf7c96ec5a337fc614359 +--- + +{{CSSRef}} + +**CSS ボックスサイズ指定**モジュールは、要素のサイズをどのようにコンテンツに合わせるか、または特定のレイアウトコンテキストに合わせるかを開発者が指定できるようにします。このモジュールでは、サイズ指定、最小サイズ指定、最大サイズ指定のプロパティを定義しており、コンテンツに基づく{{glossary("intrinsic size", "内在サイズ")}}とコンテキストに基づく[外在](/ja/docs/Glossary/Intrinsic_Size#外在サイズ)サイズを表すキーワードで CSS サイズ指定のプロパティを拡張します。 + +要素は、外在的にも内在的にもサイズを設定することができます。[CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)は、要素の大きさを明示的に、つまり「外在的」に設定するためのページに相対的なプロパティ、たとえば `width`、`height`、`padding`、`margin` などのプロパティ（[CSS 背景と境界](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)モジュールで定義されている `border` プロパティも含む）を定義しています。この CSS ボックスサイズ指定モジュールは、CSS ボックスモデルモジュールを拡張し、コンテンツのサイズに基づいて要素のサイズを設定することで、要素を内在的にサイズ指定できるようにします。 + +このモジュールで導入されたサイズ指定値は、[サイズの封じ込め](/ja/docs/Web/CSS/CSS_containment/Using_CSS_containment#サイズの封じ込め)を持つ要素が、内在サイズが何も指定されていないかのようにサイズ指定されるのではなく、そのフロー内コンテンツの幅と高さが指定された明示的な内在サイズと一致するように、明示的な内在サイズを取ることができるようになります。 + +このモジュールでは、要素のボックスのアスペクト比を定義する機能も導入されました。つまり、ブラウザーは指定されたアスペクト比を維持するために、いずれかの寸法が自動的にサイズ調整される限り、要素の寸法を自動的に調整することができます。 + +[論理的プロパティと値モジュール](/ja/docs/Web/CSS/CSS_logical_properties_and_values)は、ボックスモデルとボックスサイズ指定モジュールで利用可能なプロパティを拡張し、対応する物理ボックスモデルと内在ボックスサイズ指定プロパティの書字方向に相対的である等価なものを含むように拡張しています。 + +## リファレンス + +### プロパティ + +- {{cssxref("aspect-ratio")}} +- {{cssxref("box-sizing")}} +- {{cssxref("contain-intrinsic-block-size")}} +- {{cssxref("contain-intrinsic-height")}} +- {{cssxref("contain-intrinsic-inline-size")}} +- {{cssxref("contain-intrinsic-size")}} +- {{cssxref("contain-intrinsic-width")}} +- {{cssxref("height")}} +- {{cssxref("max-height")}} +- {{cssxref("max-width")}} +- {{cssxref("min-height")}} +- {{cssxref("min-width")}} +- {{cssxref("width")}} + +> **メモ:** CSS ボックスサイズ指定モジュールでは、まだ実装されていない `min-intrinsic-sizing` プロパティを導入しています。 + +### データ型と値 + +- {{cssxref("ratio")}} データ型 +- {{cssxref("min-content")}} 値 +- {{cssxref("max-content")}} 値 +- {{cssxref("fit-content")}} 値 +- {{cssxref("fit-content_function", "fit-content()")}} 関数 + +> **メモ:** CSS ボックスサイズ指定モジュールでは、ボックスサイズ指定プロパティにまだ実装されていないサイズ指定値として、`stretch` と `contain` キーワードを導入しています。 + +### 関数 + +- [`fit-content()`](/ja/docs/Web/CSS/fit-content_function) + +### 用語集の用語 + +- {{glossary("intrinsic size", "内在サイズ")}} + +## ガイド + +- [アスペクト比を理解する](/ja/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio) + + - : `aspect-ratio` プロパティについて学び、置換要素と非置換要素のアスペクト比について議論し、一般的なアスペクト比の使用例を検討します。 + +- [CSS ボックスモデルの紹介](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + + - : CSS の基本概念のひとつであるボックスモデルについての解説です。このモデルは、CSS が要素をどのようにレイアウトするかを定義するもので、コンテンツ、パディング、境界、マージン領域などが含まれます。 + +- [マージンの相殺をマスターする](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + + - : 隣接する 2 つのマージンが 1 つに折りたたまれることがあります。この記事では、この現象がいつ、なぜ起こるのか、そしてどのように制御するのかについて説明します。 + +- [視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model) + + - : 視覚整形モデルを説明します。 + +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) + + - : 内在的なサイズ調整について、{{CSSxRef("flex-grow")}}、{{CSSxRef("flex-shrink")}}、{{CSSxRef("flex-basis")}} を使用して主軸に沿ってフレックスアイテムのサイズと柔軟性を制御する方法を理解する前段階として説明します。 + +## 関連概念 + +- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール + - {{CSSxRef("min-inline-size")}} + - {{CSSxRef("block-size")}} + - {{CSSxRef("inline-size")}} + - {{CSSxRef("max-block-size")}} + - {{CSSxRef("max-inline-size")}} + - {{CSSxRef("min-block-size")}} + - {{CSSxRef("min-inline-size")}} + - {{CSSxRef("margin-block")}} + - {{CSSxRef("margin-inline")}} + - {{CSSxRef("padding-block")}} + - {{CSSxRef("padding-inline")}} + - {{CSSxRef("border-block")}} + - {{CSSxRef("border-inline")}} + - {{CSSxRef("contain-intrinsic-block-size")}} + - {{CSSxRef("contain-intrinsic-inline-size")}} + - {{CSSxRef("overflow-block")}} + - {{CSSxRef("overflow-inline")}} + - {{CSSxRef("overscroll-behavior-block")}} + - {{CSSxRef("overscroll-behavior-inline")}} +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール + - {{cssxref("margin")}} 一括指定プロパティ + - {{cssxref("margin-bottom")}} + - {{cssxref("margin-left")}} + - {{cssxref("margin-right")}} + - {{cssxref("margin-top")}} + - {{cssxref("margin-trim")}} + - {{cssxref("padding")}} 一括指定プロパティ + - {{cssxref("padding-bottom")}} + - {{cssxref("padding-left")}} + - {{cssxref("padding-right")}} + - {{cssxref("padding-top")}} +- [CSS 背景と境界](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)モジュール + - {{cssxref("border")}} 一括指定プロパティ + - {{cssxref("border-width")}} 一括指定プロパティ + - {{cssxref("border-bottom-width")}} + - {{cssxref("border-left-width")}} + - {{cssxref("border-right-width")}} + - {{cssxref("border-top-width")}} +- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_overflow)モジュール + - {{CSSxRef("overflow")}} 一括指定プロパティ + - {{CSSxRef("overflow-block")}} + - {{CSSxRef("overflow-clip-margin")}} + - {{CSSxRef("overflow-inline")}} + - {{CSSxRef("overflow-x")}} + - {{CSSxRef("overflow-y")}} + - {{CSSxRef("text-overflow")}} +- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)モジュール + - {{CSSxRef("grid")}} + - {{CSSxRef("grid-auto-columns")}} + - {{CSSxRef("grid-auto-rows")}} + - {{CSSxRef("grid-template-columns")}} + - {{CSSxRef("grid-template-rows")}} + - {{CSSxRef("repeat")}} + - {{CSSxRef("minmax")}} 関数 +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール + - {{CSSxRef("flex-basis")}} + - {{CSSxRef("flex")}} + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- [CSS 表示](/ja/docs/Web/CSS/CSS_display)モジュール +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール +- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)モジュール +- [CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_positioned_layout)モジュール +- [CSS 断片化](/ja/docs/Web/CSS/CSS_fragmentation)モジュール From 474f64a9fdd4c91184ef3cffcbbd0c56d08ce515 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 22 Jul 2024 08:26:57 +0900 Subject: [PATCH 006/623] =?UTF-8?q?2024/06/27=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/calc-keyword/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/files/ja/web/css/calc-keyword/index.md b/files/ja/web/css/calc-keyword/index.md index 28d7115faba135..36211c82eb8bf8 100644 --- a/files/ja/web/css/calc-keyword/index.md +++ b/files/ja/web/css/calc-keyword/index.md @@ -1,18 +1,17 @@ --- -title: +title: slug: Web/CSS/calc-keyword -original_slug: Web/CSS/calc-constant l10n: - sourceCommit: fb1c7f8985e4c4142f482f809366e3cba6b96b94 + sourceCommit: 62ebcab471aceef4d843e57e310dae4ab1eda94a --- {{CSSRef}} -**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 `e` や `pi` のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。 +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 `e` や `pi` のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。 ## 構文 -`` 型は、 [CSS 数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)で使用される数値の定数を定義します。 +`` 型は、 [CSS 数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)で使用される数値の定数を定義します。 ### 値 @@ -66,7 +65,7 @@ l10n: - `line-height: e;` は無効ですが、 `line-height: calc(e);` は有効です。 - `rotate(1rad * pi);` は動作しません。 {{CSSxRef("transform-function/rotate", "rotate()")}} は数学関数ではないからです。 `rotate(calc(1rad * pi));` を使用してください。 -数学関数では、 `` 値は {{CSSxRef("number")}} 値として評価されるので、 `e` と `pi` は数値定数として動作します。 +数学関数では、 `` 値は {{CSSxRef("number")}} 値として評価されるので、 `e` と `pi` は数値定数として動作します。 `infinity` と `NaN` は少し異なり、退化した数値定数とみなされます。 技術的には数値ではありませんが、 {{CSSxRef("number")}} 値として動作するので、例えば無限大の {{CSSxRef("length")}} を取得するには `calc(infinity * 1px)` のような式が必要となります。 From 7ce846c2e18d5c8ff9c18ea82d68a1b1545c59be Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 26 Jul 2024 23:08:01 +0900 Subject: [PATCH 007/623] =?UTF-8?q?2024/07/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#22527)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/07/01 時点の英語版に基づき更新 * Update index.md --- .../building_blocks/event_bubbling/index.md | 620 ++++++++++++------ 1 file changed, 404 insertions(+), 216 deletions(-) diff --git a/files/ja/learn/javascript/building_blocks/event_bubbling/index.md b/files/ja/learn/javascript/building_blocks/event_bubbling/index.md index 12af14e369be3f..71eaba00014812 100644 --- a/files/ja/learn/javascript/building_blocks/event_bubbling/index.md +++ b/files/ja/learn/javascript/building_blocks/event_bubbling/index.md @@ -1,226 +1,414 @@ --- -title: イベントターゲットの比較 +title: イベントのバブリング slug: Learn/JavaScript/Building_blocks/Event_bubbling -original_slug: Web/API/Event/Comparison_of_Event_Targets l10n: - sourceCommit: 196cc4ff3068a59b962a3fe1cbb960eb72ef542b + sourceCommit: c20c12fab32381b983b4148d712fda227d34e2bd --- -{{ ApiRef() }} - -イベントハンドラーを書くときに、どのイベントターゲットを調べればいいのか迷うことはよくあります。この記事では、ターゲットプロパティの使い方を明確にします。 - -検討すべきターゲットは 5 つあります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
プロパティ定義場所目的
- event.target - - DOM Event Interface - - このイベントを発行した呼び出しの左側にある DOM 要素。 -
- event.currentTarget - - DOM Event Interface - - その EventListeners が現在処理されている EventTarget です。イベントキャプチャとバブリングが発生すると、この値は変化します。 -
- event.relatedTarget - - DOM MouseEvent Interface - イベントのセカンダリーターゲットを特定します。
- event.explicitOriginalTarget - - Event.webidl - - {{ Non-standard_inline() }} イベントが無名の境界通過以外の理由で再ターゲットされた場合、再ターゲットが発生する前にターゲットに設定されます。例えば、マウスイベントがテキストノードの上で発生した場合、その親ノードに再ターゲットされます（[Firefox バグ 185889](https://bugzil.la/185889)）。その場合、 .target は親ノードを表示し、.explicitOriginalTarget はテキストノードを表示します。 - .originalTarget とは異なり、.explicitOriginalTarget には無名コンテンツが含まれることはありません。 -
- event.originalTarget - - Event.webidl - - {{ Non-standard_inline() }} 再ターゲットされる前の、イベントの本来のターゲットです。詳細は Anonymous Content#Event_Flow_and_Targeting を参照してください。 -
event.composedTarget - Event.webidl - - {{ Non-standard_inline() }} Shadow DOM から合成する前の、イベントの元の非ネイティブターゲット。 -
- -### `explicitOriginalTarget` と `originalTarget` の使用 - -> **メモ:** これらのプロパティは、 Mozilla ベースのブラウザーでのみ利用可能です。 - -### 例 +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} + +ウェブページは見出し、テキストの段落、画像、ボタンなどの「要素」で構成されており、これらの要素に発生するイベントを待ち受けすることができることを見てきました。例えば、ボタンにリスナーを追加すると、ユーザーがボタンをクリックしたときに実行することができます。 + +また、これらの要素は他の要素の中に「入れ子」にすることができます。例えば、{{htmlelement("button")}} は {{htmlelement("div")}} 要素の中に置くことができます。この場合、 `
` 要素を親要素、 ` +
+

+```
+
+ここではボタンは別の要素 {{HTMLElement("div")}} の中にあります。ここでは、`
` 要素は、それを格納する要素の**親**であると言います。親要素にクリックイベントハンドラーを追加し、ボタンをクリックするとどうなるでしょうか？
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Setting a listener on a parent element', '100%', 200, "", "") }}
+
+ユーザーがボタンをクリックすると、親のクリックイベントが発生することが分かります。
+
+```plain
+DIV 要素をクリックしました
+```
+
+これで、このボタンは `
` の中にあるので、ボタンをクリックすると、その中にある要素も暗黙のうちにクリックしたことになることが分かります。
+
+### バブリングの例
+
+ボタンとその親にイベントリスナーを追加したらどうなるでしょうか？
+
+```html
+
+  

+    
+  

+  

+
+```
+
+ボタンとその親 (`
`)、そして両方を格納する {{HTMLElement("body")}} 要素にクリックイベントハンドラーを追加してみましょう。
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }}
+
+ユーザーがボタンをクリックすると、3つの要素すべてでクリックイベントが発行されることが分かります。
+
+```plain
+BUTTON 要素をクリックしました
+DIV 要素をクリックしました
+BODY 要素をクリックしました
+```
+
+この場合は次のようになります。
+
+- ボタンのクリックが最初に発行されます。
+- その親（`
`要素）のクリックが続きます。
+- `
` 要素の親（`` 要素）のクリックが続きます。
+
+このことを、クリックされた最も内側の要素からイベントが**バブルアップ**すると言います。
+
+この動作は有益なこともあれば、予期せぬ問題を発生させることもあります。この節では、この動作が引き起こす問題を見て、解決策を探ります。
+
+### 動画プレイヤーの例
+
+この例では、最初は非表示になっている動画と、「動画を表示」と表示されたボタンがページにあります。以下のように操作したいと思います。
+
+- ユーザーが「動画を表示」ボタンをクリックしたら、動画を含むボックスを表示させますが、動画の再生はまだ始めません。
+- ユーザーが動画をクリックすると、動画の再生を開始します。
+- ユーザーが動画以外のボックスのどこかをクリックしたら、ボックスを非表示にします。
+
+HTML はこのようになります。
+
+```html-nolint
+
+
+
+```
+
+以下のものがあります。
+
+- `
+
+
+```
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+## イベントのキャプチャ
+
+イベント伝播の別の形態として、「イベントキャプチャ」があります。これはイベントバブリングのようなものですが、順序が逆になります。つまり、イベントは対象となる最も内側の要素で最初に発生し、その後、入れ子の要素が浅くなっていくのではなく、イベントは最も入れ子の浅い要素で最初に発生し、その後、対象とする要素に達するまで、入れ子の要素が深くなっていきます。
+
+イベントのキャプチャは既定では無効です。有効にするには `addEventListener()` で `capture` オプションを渡す必要があります。
+
+この例は、`capture`オプションを使用していることを除けば、先ほど見た[バブリングの例](#バブリングの例)と同じです。
+
+```html
+
+  

+    
+  

+  

+
+```
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick, { capture: true });
+container.addEventListener("click", handleClick, { capture: true });
+button.addEventListener("click", handleClick);
 ```
+
+{{ EmbedLiveSample('Event capture', '100%', 200, "", "") }}
+
+この場合、メッセージの順番は逆になります。`` イベントハンドラーが最初に起動し、続いて `
` イベントハンドラーが起動し、続いて `
+  

+  

+
+```
+
+JavaScript はほとんど同じですが、`target` と `currentTarget` の両方をログ出力しています。
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  const logTarget = `Target: ${e.target.tagName}`;
+  const logCurrentTarget = `Current target: ${e.currentTarget.tagName}`;
+  output.textContent += `${logTarget}, ${logCurrentTarget}\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+ボタンをクリックしたとき、イベントハンドラーがボタン自身、`
`、`` のいずれに接続されていても、`target` は常にボタン要素であることに注意してください。しかし、`currentTarget` は現在実行しているイベントハンドラーの要素を特定します。
+
+{{embedlivesample("target and currentTarget")}}
+
+`target` プロパティは、上記の[イベント移譲](#イベント移譲)の例のように、イベント移譲でよく使用します。
+
+## スキルテスト
+
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: イベント](/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)を参照してください。
+
+## まとめ
+
+これで、この早い段階でウェブイベントについて知っておくべきことはすべてわかったはずです。
+前述したように、イベントは実のところ JavaScript のコアには属しません。ブラウザーの Web API で定義されています。
+
+また、JavaScript が使用されるさまざまなコンテキストには、異なるイベントモデルがあることを理解することが重要です。Web API から、ブラウザーの WebExtensions や Node.js (サーバーサイド JavaScript) などの他の領域までです。
+これでこれらの領域をすべて理解できるとは思っていませんが、ウェブ開発を学習していく上で、イベントの基本を理解しておくことはとても役に立ちます。
+
+> **メモ:** 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+
+## 関連情報
+
+- [domevents.dev](https://domevents.dev/) — 探究を通して DOM イベントシステムの動作について学ぶことができる、とても有益なインタラクティブな遊び場アプリです。
+- [イベントリファレンス](/ja/docs/Web/Events)
+- [Event order](https://www.quirksmode.org/js/events_order.html) （キャプチャとバブリングの議論） — Peter-Paul Koch による素晴らしい作品です。
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

From 472d20381c0bf1cba6bf87098896c95b81c890a4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 22 Jul 2024 23:55:54 +0900
Subject: [PATCH 008/623] =?UTF-8?q?orphaned/Tutorials=20=E3=82=92=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/_redirects.txt              |  1 -
 files/ja/_wikihistory.json           |  4 --
 files/ja/orphaned/tutorials/index.md | 80 ----------------------------
 3 files changed, 85 deletions(-)
 delete mode 100644 files/ja/orphaned/tutorials/index.md

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 5319fd5349ca9c..8762286dd5dab9 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -2539,7 +2539,6 @@
 /ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
 /ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
 /ja/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces	/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
-/ja/docs/Tutorials	/ja/docs/orphaned/Tutorials
 /ja/docs/Tutorials/Using_CSS_gradients	/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients
 /ja/docs/Upcoming_Firefox_features_for_developers	/ja/docs/Mozilla/Firefox/Releases/4
 /ja/docs/Updating_extensions_for_Firefox_2	/ja/docs/Mozilla/Firefox/Releases/2/Updating_extensions
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index b35a3e14481145..78710287ed8ed6 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -30420,10 +30420,6 @@
     "modified": "2019-04-13T00:54:00.142Z",
     "contributors": ["wbamberg", "Marsf", "Okome"]
   },
-  "orphaned/Tutorials": {
-    "modified": "2019-03-23T23:15:45.631Z",
-    "contributors": ["shinnn"]
-  },
   "orphaned/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": {
     "modified": "2019-03-23T22:00:20.926Z",
     "contributors": ["mfuji09", "yyss"]
diff --git a/files/ja/orphaned/tutorials/index.md b/files/ja/orphaned/tutorials/index.md
deleted file mode 100644
index 1f21c18382c293..00000000000000
--- a/files/ja/orphaned/tutorials/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: チュートリアル
-slug: orphaned/Tutorials
----
-
-SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。
-
----
-
-### はじめに
-
-- [インストール](/en-US/Add-ons/SDK/Tutorials/Installation)
-  - : Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。
-- [トラブルシューティング](/en-US/Add-ons/SDK/Tutorials/Troubleshooting)
-  - : よくある問題を解決する場合や、支援を求める場合のヒントを説明します。
-
-- [入門](/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx)
-  - : シンプルなアドオンを作成を始めるための手順の概略です。
-
-### ユーザーインターフェイスの作成
-
-- [ツールバーボタンの追加](/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar)
-  - : Firefox アドオンツールバーにボタンを追加します。
-- [Firefox へのメニュー項目の追加](/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox)
-  - : Firefox のメインメニューにアイテムを追加します。
-- [ポップアップの表示](/en-US/Add-ons/SDK/Tutorials/Display_a_Popup)
-  - : HTML および JavaScript を使用して実装したポップアップダイアログを表示します。
-- [コンテキストメニュー項目の追加](/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item)
-  - : Firefox のコンテキストメニューに項目を追加します。
-
----
-
-### ブラウザーの操作
-
-- [ウェブページを開く](/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page)
-  - : tabs モジュールを用いて、新しいタブまたはウィンドウでウェブページを開き、そのコンテンツにアクセスします。
-- [ページの読み込みを確認する](/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load)
-  - : tabs モジュールを用いて、新しいウェブページが読み込まれたときに通知を受け取り、それらのウェブページのコンテンツにアクセスします。
-
-- [開いているタブの一覧を表示する](/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs)
-  - : tabs モジュールを用いて、現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。
-
-### ウェブページの変更
-
-- [URL に基づいたウェブページの変更](/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL)
-  - : URL に基づいてウェブページを検索するフィルタを作成します。フィルタに一致する URL のウェブページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。
-- [アクティブなウェブページの変更](/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab)
-  - : 現在アクティブなウェブページに、動的にスクリプトを読み込みます。
-
----
-
-### 開発テクニック
-
-- [ログの出力](/en-US/Add-ons/SDK/Tutorials/Logging)
-  - : 診断を行うために、メッセージをコンソールにログとして出力します。
-- [再利用可能なモジュールの作成](/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules)
-  - : アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。
-- [ユニットテスト](/en-US/Add-ons/SDK/Tutorials/Unit_testing)
-  - : SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。
-- [Chrome 権限](/en-US/Add-ons/SDK/Tutorials/Chrome_authority)
-  - : この権限を使用すると、アドオンが Components オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。
-- [イベントターゲットの作成](/en-US/Add-ons/SDK/Tutorials/Creating_event_targets)
-  - : 定義したオブジェクトがイベントを発生させられるようにします。
-- [読み込みと読み込み解除の確認](/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload)
-  - : Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。
-- [サードパーティーモジュールの使用](/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox)
-  - : SDK 自体に含まれていない追加のモジュールをインストールして使用します。
-- [ローカライゼーション](/en-US/Add-ons/SDK/Tutorials/l10n)
-  - : ローカライズ可能なコードを作成します。
-- [モバイル開発](/en-US/Add-ons/SDK/Tutorials/Mobile_development)
-  - : Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。
-- [アドオン用のデバッガー](/en-US/Add-ons/SDK/Tutorials/Mobile_development)
-  - : アドオン内の JavaScript のデバッグを行います。
-
----
-
-### 応用
-
-- [アノテーターアドオン](/en-US/Add-ons/SDK/Tutorials/Annotator)
-  - : より複雑なアドオンの開発作業を順を追って説明します。

From 988bf1d1863641d01c5b68f61e65a6540bee8f23 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Fri, 26 Jul 2024 20:09:10 +0100
Subject: [PATCH 009/623] [ja] sync translated content (#22602)

* ja: sync translated content

* Update _redirects.txt

* Update _wikihistory.json

* Delete files/ja/orphaned/web/http/headers/permissions-policy/battery/index.md

---------

Co-authored-by: Masahiro FUJIMOTO 
---
 files/ja/_redirects.txt                       | 10 +++--
 files/ja/_wikihistory.json                    | 24 +++++-------
 .../api/window/{sidebar => external}/index.md |  3 +-
 .../permissions-policy/battery/index.md       | 38 -------------------
 4 files changed, 18 insertions(+), 57 deletions(-)
 rename files/ja/web/api/window/{sidebar => external}/index.md (97%)
 delete mode 100644 files/ja/web/http/headers/permissions-policy/battery/index.md

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 8762286dd5dab9..3efdfc2ae3d700 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -1019,7 +1019,7 @@
 /ja/docs/DOM/window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/DOM/window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/DOM/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
-/ja/docs/DOM/window.sidebar	/ja/docs/Web/API/Window/sidebar
+/ja/docs/DOM/window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/DOM/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
 /ja/docs/DOM/window.status	/ja/docs/Web/API/Window/status
 /ja/docs/DOM/window.status-redirect-1	/ja/docs/Web/API/Window/status
@@ -1226,7 +1226,7 @@
 /ja/docs/DOM:window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/DOM:window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/DOM:window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
-/ja/docs/DOM:window.sidebar	/ja/docs/Web/API/Window/sidebar
+/ja/docs/DOM:window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/DOM:window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
 /ja/docs/DOM:window.status	/ja/docs/Web/API/Window/status
 /ja/docs/DOM:window.statusbar	/ja/docs/Web/API/Window/statusbar
@@ -3183,6 +3183,7 @@
 /ja/docs/Web/API/Window/restore	/ja/docs/Web/API/Window/moveTo
 /ja/docs/Web/API/Window/setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/Web/API/Window/setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/Web/API/Window/sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/Web/API/Window/transitioncancel_event	/ja/docs/Web/API/Element/transitioncancel_event
 /ja/docs/Web/API/Window/transitionend_event	/ja/docs/Web/API/Element/transitionend_event
 /ja/docs/Web/API/Window/transitionrun_event	/ja/docs/Web/API/Element/transitionrun_event
@@ -3485,7 +3486,7 @@
 /ja/docs/Web/API/window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/Web/API/window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/Web/API/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
-/ja/docs/Web/API/window.sidebar	/ja/docs/Web/API/Window/sidebar
+/ja/docs/Web/API/window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/Web/API/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
 /ja/docs/Web/API/window.status	/ja/docs/Web/API/Window/status
 /ja/docs/Web/API/window.statusbar	/ja/docs/Web/API/Window/statusbar
@@ -4163,7 +4164,7 @@
 /ja/docs/Web/HTTP/Headers/Feature-Policy/accelerometer	/ja/docs/Web/HTTP/Headers/Permissions-Policy/accelerometer
 /ja/docs/Web/HTTP/Headers/Feature-Policy/ambient-light-sensor	/ja/docs/Web/HTTP/Headers/Permissions-Policy/ambient-light-sensor
 /ja/docs/Web/HTTP/Headers/Feature-Policy/autoplay	/ja/docs/Web/HTTP/Headers/Permissions-Policy/autoplay
-/ja/docs/Web/HTTP/Headers/Feature-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy/battery
+/ja/docs/Web/HTTP/Headers/Feature-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Feature-Policy/camera	/ja/docs/Web/HTTP/Headers/Permissions-Policy/camera
 /ja/docs/Web/HTTP/Headers/Feature-Policy/display-capture	/ja/docs/Web/HTTP/Headers/Permissions-Policy/display-capture
 /ja/docs/Web/HTTP/Headers/Feature-Policy/document-domain	/ja/docs/Web/HTTP/Headers/Permissions-Policy/document-domain
@@ -4179,6 +4180,7 @@
 /ja/docs/Web/HTTP/Headers/Feature-Policy/web-share	/ja/docs/Web/HTTP/Headers/Permissions-Policy/web-share
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
+/ja/docs/Web/HTTP/Headers/Permissions-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Set-Cookie2	/ja/docs/Web/HTTP/Headers/Set-Cookie
 /ja/docs/Web/HTTP/Index	/ja/docs/Web/HTTP
 /ja/docs/Web/HTTP/Link_prefetching_FAQ	/ja/docs/Glossary/Prefetch
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 78710287ed8ed6..663195890c96e1 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13984,6 +13984,16 @@
     "modified": "2020-10-15T22:00:39.694Z",
     "contributors": ["yyss", "mk-tool"]
   },
+  "Web/API/Window/external": {
+    "modified": "2019-03-23T23:50:31.021Z",
+    "contributors": [
+      "teoli",
+      "AshfaqHossain",
+      "kohei.yoshino",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Window/fetch": {
     "modified": "2020-10-15T21:41:32.875Z",
     "contributors": [
@@ -14525,16 +14535,6 @@
       "Potappo"
     ]
   },
-  "Web/API/Window/sidebar": {
-    "modified": "2019-03-23T23:50:31.021Z",
-    "contributors": [
-      "teoli",
-      "AshfaqHossain",
-      "kohei.yoshino",
-      "ethertank",
-      "Potappo"
-    ]
-  },
   "Web/API/Window/sizeToContent": {
     "modified": "2019-03-23T23:51:38.117Z",
     "contributors": ["teoli", "khalid32", "ethertank", "Potappo"]
@@ -21931,10 +21931,6 @@
     "modified": "2020-10-15T22:11:22.688Z",
     "contributors": ["mfuji09"]
   },
-  "Web/HTTP/Headers/Permissions-Policy/battery": {
-    "modified": "2020-10-15T22:34:41.072Z",
-    "contributors": ["mfuji09"]
-  },
   "Web/HTTP/Headers/Permissions-Policy/camera": {
     "modified": "2020-10-15T22:11:23.091Z",
     "contributors": ["mfuji09"]
diff --git a/files/ja/web/api/window/sidebar/index.md b/files/ja/web/api/window/external/index.md
similarity index 97%
rename from files/ja/web/api/window/sidebar/index.md
rename to files/ja/web/api/window/external/index.md
index 20e41b5adcff2c..bed5e9e252f91d 100644
--- a/files/ja/web/api/window/sidebar/index.md
+++ b/files/ja/web/api/window/external/index.md
@@ -1,6 +1,7 @@
 ---
 title: Window.sidebar
-slug: Web/API/Window/sidebar
+slug: Web/API/Window/external
+original_slug: Web/API/Window/sidebar
 ---
 
 {{APIRef}} {{Deprecated_Header}}
diff --git a/files/ja/web/http/headers/permissions-policy/battery/index.md b/files/ja/web/http/headers/permissions-policy/battery/index.md
deleted file mode 100644
index 678001b99f1fd7..00000000000000
--- a/files/ja/web/http/headers/permissions-policy/battery/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Feature-Policy: battery"
-slug: Web/HTTP/Headers/Permissions-Policy/battery
----
-
-{{HTTPSidebar}}{{SeeCompatTable}}
-
-HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダーにおける `battery` ディレクティブは、現在の文書で {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} で得られる {{DOMxRef("BatteryManager")}} インターフェイスを通じて、端末のバッテリーに関する情報の収集を許可するかどうかを制御します。
-
-## 構文
-
-```
-Feature-Policy: battery ;
-```
-
-- \
-  - : この機能を許可するオリジンのリストです。 [`Feature-Policy`](/ja/docs/Web/HTTP/Headers/Feature-Policy#%E6%A7%8B%E6%96%87) を参照してください。
-
-## 既定のポリシー
-
-`battery` の許可リストの既定値は `'self'` です。
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{HTTPHeader("Feature-Policy")}} ヘッダー
-- [機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)
-- [機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)
-- [Battery Status API](/ja/docs/Web/API/Battery_Status_API)
-- {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}}
-- {{DOMxRef("BatteryManager")}}

From a0d9ae6166918ea749ce8e85983504ba9869276f Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Sat, 27 Jul 2024 10:32:40 +0800
Subject: [PATCH 010/623] zh: convert noteblocks in `/webassembly` to GFM
 syntax (#22623)

---
 files/zh-cn/webassembly/c_to_wasm/index.md    | 18 ++++++---
 files/zh-cn/webassembly/concepts/index.md     |  6 ++-
 .../javascript_interface/global/index.md      |  3 +-
 .../instantiate_static/index.md               |  9 +++--
 .../instantiatestreaming_static/index.md      |  6 ++-
 .../javascript_interface/memory/index.md      |  3 +-
 .../javascript_interface/table/index.md       |  3 +-
 .../webassembly/loading_and_running/index.md  | 12 ++++--
 files/zh-cn/webassembly/rust_to_wasm/index.md |  3 +-
 .../webassembly/text_format_to_wasm/index.md  |  6 ++-
 .../understanding_the_text_format/index.md    | 39 ++++++++++++-------
 .../using_the_javascript_api/index.md         | 24 ++++++++----
 files/zh-tw/webassembly/c_to_wasm/index.md    |  9 +++--
 files/zh-tw/webassembly/concepts/index.md     |  6 ++-
 14 files changed, 98 insertions(+), 49 deletions(-)

diff --git a/files/zh-cn/webassembly/c_to_wasm/index.md b/files/zh-cn/webassembly/c_to_wasm/index.md
index 6fbd7ac23b969b..653d44df59609e 100644
--- a/files/zh-cn/webassembly/c_to_wasm/index.md
+++ b/files/zh-cn/webassembly/c_to_wasm/index.md
@@ -20,7 +20,8 @@ slug: WebAssembly/C_to_Wasm
 - 主系统编译器 — 在 Linux 下，[安装 GCC](http://askubuntu.com/questions/154402/install-gcc-on-ubuntu-12-04-lts)。在 macOS 下，[安装 Xcode](https://itunes.apple.com/us/app/xcode/id497799835)。在 Windows 下，安装 [Visual Studio Community 2015 with Update 3 or newer](https://www.microsoft.com/zh-CN/download/details.aspx?id=48146)。
 - Python 2.7.x — On Linux and macOS, this is most likely provided out of the box. 从 [初学者指南](https://wiki.python.org/moin/BeginnersGuide/Downloadhere) 获取帮助。在 Windows 上，从 [Python 主页](https://www.python.org/downloads/)获取安装包。
 
-> **备注：** 在 Windows 下你可能需要 [pywin32](https://sourceforge.net/projects/pywin32/files/pywin32/)，为了降低安装 pywin32 可能遇到的错误，请使用管理员权限在 cmd 内运行安装程序。
+> [!NOTE]
+> 在 Windows 下你可能需要 [pywin32](https://sourceforge.net/projects/pywin32/files/pywin32/)，为了降低安装 pywin32 可能遇到的错误，请使用管理员权限在 cmd 内运行安装程序。
 
 ### 编译 Emscripten
 
@@ -50,9 +51,11 @@ emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
 
 安装过程可以会花上一点时间，是时候去休息一下。安装程序会设置所有 Emscripten 运行所需要的环境变量。
 
-> **备注：** global 标识会让 PATH 变量在全局被设置，所以接下来所打开的终端或者命令行窗口都会被设置。如果你仅仅想让 Emscripten 在当前窗口生效，就删掉这个标识。
+> [!NOTE]
+> global 标识会让 PATH 变量在全局被设置，所以接下来所打开的终端或者命令行窗口都会被设置。如果你仅仅想让 Emscripten 在当前窗口生效，就删掉这个标识。
 
-> **备注：** 每当你想要使用 Emscripten 时，尝试从远程更新最新的 emscripten 代码是个很好的习惯（运行 git pull）。如果有更新，重新执行 install 和 activate 命令。这样就可以确保你使用的 Emscripten 一直保持最新。
+> [!NOTE]
+> 每当你想要使用 Emscripten 时，尝试从远程更新最新的 emscripten 代码是个很好的习惯（运行 git pull）。如果有更新，重新执行 install 和 activate 命令。这样就可以确保你使用的 Emscripten 一直保持最新。
 
 现在让我们进入 emsdk 文件夹，输入以下命令来让你进入接下来的流程，编译一个样例 C 程序到 asm.js 或者 wasm。
 
@@ -108,7 +111,8 @@ emsdk_env.bat
 
 现在使用一个支持 WebAssembly 的浏览器，加载生成的 `hello.html`。自从 Firefox 版本 52、Chrome 版本 57 和 Opera 版本 44 开始，已经默认启用了 WebAssembly。
 
-> **备注：** 如果你试图直接从本地硬盘打开生成的 HTML 文件（`hello.html`）（例如 `file://your_path/hello.html`），你会得到一个错误信息，大意是 _`both async and sync fetching of the wasm failed`_。你需要通过 HTTP 服务器（`http://`）运行你的 HTML 文件——参见[如何设置本地测试服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)获取更多信息。
+> [!NOTE]
+> 如果你试图直接从本地硬盘打开生成的 HTML 文件（`hello.html`）（例如 `file://your_path/hello.html`），你会得到一个错误信息，大意是 _`both async and sync fetching of the wasm failed`_。你需要通过 HTTP 服务器（`http://`）运行你的 HTML 文件——参见[如何设置本地测试服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)获取更多信息。
 
 如果一切顺利，你应该可以在页面上的 Emscripten 控制台和浏览器控制台中看到“Hello World”的输出。
 
@@ -148,7 +152,8 @@ emsdk_env.bat
 
 4. 下面让我们来运行这个例子。上面的命令已经生成了 hello2.html，内容和我们使用的模板非常相像，只不过多加了一些 js 胶水和加载 wasm 文件的代码。在浏览器中打开它，你会看到与上一个例子相同的输出。
 
-> **备注：** 通过用.js 取代.htm(l) 作为文件后缀名，你就可以得到只有 JavaScript 的输出文件，而不再是完整的 HTML 文件。例如：`emcc -o hello2.js hello2.c -O3 -s WASM=1`. 你可以完全从零开始创建你自己的 HTML 文件。尽管如此，不推荐这样做。因为 Emscripten 需要大量的 JavaScript“胶水”代码从而能够 处理内存分配、内存泄漏以及大量的其他问题。这些问题都已经在提供的模板中得到了处理。使用模板要比自己编写模板要容易得多。不过，当对模板所做的事情越来越熟悉的时候，你就能够按照自己的需要创建定制化的模板了。
+> [!NOTE]
+> 通过用.js 取代.htm(l) 作为文件后缀名，你就可以得到只有 JavaScript 的输出文件，而不再是完整的 HTML 文件。例如：`emcc -o hello2.js hello2.c -O3 -s WASM=1`. 你可以完全从零开始创建你自己的 HTML 文件。尽管如此，不推荐这样做。因为 Emscripten 需要大量的 JavaScript“胶水”代码从而能够 处理内存分配、内存泄漏以及大量的其他问题。这些问题都已经在提供的模板中得到了处理。使用模板要比自己编写模板要容易得多。不过，当对模板所做的事情越来越熟悉的时候，你就能够按照自己的需要创建定制化的模板了。
 
 ## 调用一个定义在 C 中的自定义方法
 
@@ -181,7 +186,8 @@ emsdk_env.bat
 
    默认情况下，Emscripten 生成的代码只会调用 `main()` 函数，其他的函数将被视为无用代码。在一个函数名之前添加 `EMSCRIPTEN_KEEPALIVE` 能够防止这样的事情发生。你需要导入 `emscripten.h` 库来使用 `EMSCRIPTEN_KEEPALIVE`。
 
-   > **备注：** 为了保证万一你想在 C++ 代码中引用这些代码时代码可以正常工作，我们添加了 `#ifdef` 代码块。由于 C 与 C++ 中名字修饰规则的差异，添加的代码块有可能产生问题，但目前我们设置了这一额外的代码块以保证你使用 C++ 时，这些代码会被视为外部 C 语言函数。
+   > [!NOTE]
+   > 为了保证万一你想在 C++ 代码中引用这些代码时代码可以正常工作，我们添加了 `#ifdef` 代码块。由于 C 与 C++ 中名字修饰规则的差异，添加的代码块有可能产生问题，但目前我们设置了这一额外的代码块以保证你使用 C++ 时，这些代码会被视为外部 C 语言函数。
 
 2. 为了方便起见，现在将 `html_template/shell_minimal.html` 也添加到这一目录（但在实际开发环境中你肯定需要将其放到某一特定位置）。
 3. 运行以下命令编译：(注意由于使用 ccall 函数，需要添加指定参数)
diff --git a/files/zh-cn/webassembly/concepts/index.md b/files/zh-cn/webassembly/concepts/index.md
index d9387582bafbcd..e009f9785d1516 100644
--- a/files/zh-cn/webassembly/concepts/index.md
+++ b/files/zh-cn/webassembly/concepts/index.md
@@ -26,7 +26,8 @@ WebAssembly 是一种运行在现代 web 浏览器中的新型代码，并且提
 - 保持安全——WebAssembly 被限制运行在一个安全的沙箱执行环境中。像其他网络代码一样，它遵循浏览器的同源策略和授权策略。
 - 不破坏 Web——WebAssembly 的设计原则是与其他网络技术和谐共处并保持向后兼容。
 
-> **备注：** WebAssembly 也用在网络和 JavaScript 环境之外（参考[非网络嵌入](http://webassembly.org/docs/non-web/)）。
+> [!NOTE]
+> WebAssembly 也用在网络和 JavaScript 环境之外（参考[非网络嵌入](http://webassembly.org/docs/non-web/)）。
 
 ## WebAssembly 如何适应网络平台？
 
@@ -95,7 +96,8 @@ Emscripten 工具可以将任何 C/C++ 源代码编译成 Wasm 模块，再加
 2. Emscripten 将 clang+LLVM 编译的结果转换为 Wasm 二进制文件。
 3. 目前，WebAssembly 本身无法直接访问 DOM；它只能调用 JavaScript，并且只能传入整型和浮点型的原始数据类型作为参数。这就是说，为了使用任何 Web API，WebAssembly 需要调用 JavaScript，然后由 JavaScript 进行 Web API 调用。因此，Emscripten 创建了 HTML 和 JavaScript 粘合代码以便完成这些功能。
 
-> **备注：** 计划将来[允许 WebAssembly 直接调用 Web API](https://github.com/WebAssembly/gc/blob/master/README.md)。
+> [!NOTE]
+> 计划将来[允许 WebAssembly 直接调用 Web API](https://github.com/WebAssembly/gc/blob/master/README.md)。
 
 JavaScript 粘合代码并不是像你想象的那么简单。首先，Emscripten 实现了流行的 C/C++ 库，比如，[SDL](https://zh.wikipedia.org/wiki/SDL)、[OpenGL](https://zh.wikipedia.org/wiki/OpenGL)、[OpenAL](https://zh.wikipedia.org/wiki/OpenAL) 以及部分 [POSIX](https://zh.wikipedia.org/wiki/可移植操作系统接口)。这些库以 Web API 的形式实现，并且每个库需要一个 JavaScript 粘合代码来连接 WebAssembly 和低层的 Web API。
 
diff --git a/files/zh-cn/webassembly/javascript_interface/global/index.md b/files/zh-cn/webassembly/javascript_interface/global/index.md
index b643dc139d136a..59e3babe839e84 100644
--- a/files/zh-cn/webassembly/javascript_interface/global/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/global/index.md
@@ -71,7 +71,8 @@ WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then(
 );
 ```
 
-> **备注：** 你可以查看 [GitHub 上运行的实时](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)示例；也可以查看[源代码](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)。
+> [!NOTE]
+> 你可以查看 [GitHub 上运行的实时](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)示例；也可以查看[源代码](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)。
 
 ## 规格
 
diff --git a/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md b/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md
index 82b81bc0533a01..a9d6638b214e02 100644
--- a/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/instantiate_static/index.md
@@ -10,7 +10,8 @@ slug: WebAssembly/JavaScript_interface/instantiate_static
 - 第一种主要重载方式使用 WebAssembly 二进制代码的 [typed array](/zh-CN/docs/Web/JavaScript/Typed_arrays) 或{{jsxref("ArrayBuffer")}}形，一并进行编译和实例化。返回的 `Promise` 会携带已编译的 {{jsxref("WebAssembly.Module")}} 和它的第一个实例化对象 {{jsxref("WebAssembly.Instance")}}.
 - 第二种重载使用已编译的 {{jsxref("WebAssembly.Module")}} , 返回的 `Promise` 携带一个 `Module`的实例化对象 `Instance`. 如果这个 `Module` 已经被编译了或者是从缓存中获取的 ( [retrieved from cache](/zh-CN/docs/WebAssembly/Caching_modules)), 那么这种重载方式是非常有用的。
 
-> **警告：** 此方法不是获取 (fetch) 和实例化 wasm 模块的最具效率方法。如果可能的话，你应该改用较新的{{jsxref("WebAssembly.instantiateStreaming()")}}方法，该方法直接从原始字节码中直接获取，编译和实例化模块，因此不需要转换为{{jsxref("ArrayBuffer")}}。
+> [!WARNING]
+> 此方法不是获取 (fetch) 和实例化 wasm 模块的最具效率方法。如果可能的话，你应该改用较新的{{jsxref("WebAssembly.instantiateStreaming()")}}方法，该方法直接从原始字节码中直接获取，编译和实例化模块，因此不需要转换为{{jsxref("ArrayBuffer")}}。
 
 ## 语法
 
@@ -63,7 +64,8 @@ Promise WebAssembly.instantiate(module, importObject);
 
 ## 示例
 
-> **备注：** 在大多数情况下，你可能需要使用 {{jsxref("WebAssembly.instantiateStreaming()")}}，因为它比 `instantiate()` 更具效率。
+> [!NOTE]
+> 在大多数情况下，你可能需要使用 {{jsxref("WebAssembly.instantiateStreaming()")}}，因为它比 `instantiate()` 更具效率。
 
 ### 第一种重载示例
 
@@ -89,7 +91,8 @@ fetch("simple.wasm")
   .then((result) => result.instance.exports);
 ```
 
-> **备注：** 查看 GitHub（[在线实例](https://mdn.github.io/webassembly-examples/js-api-examples/)）的 [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) 中一个相似的例子，使用了我们的 [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1) 库函数
+> [!NOTE]
+> 查看 GitHub（[在线实例](https://mdn.github.io/webassembly-examples/js-api-examples/)）的 [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) 中一个相似的例子，使用了我们的 [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1) 库函数
 
 ### 第二种重载示例
 
diff --git a/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md b/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md
index 4afe43422c976f..f89eed87d07e7d 100644
--- a/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/instantiatestreaming_static/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/JavaScript_interface/instantiateStreaming_static
 
 **`WebAssembly.instantiateStreaming()`** 函数直接从流式底层源编译并实例化 WebAssembly 模块。这是加载 Wasm 代码的最有效、最优化的方式。
 
-> **备注：** 具有严格的[内容安全策略（CSP）](/zh-CN/docs/Web/HTTP/CSP)的网页可能会阻止 WebAssembly 模块的编译和执行。请参阅 [script-src CSP](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) 以了解更多有关允许 WebAssembly 编译和执行的信息。
+> [!NOTE]
+> 具有严格的[内容安全策略（CSP）](/zh-CN/docs/Web/HTTP/CSP)的网页可能会阻止 WebAssembly 模块的编译和执行。请参阅 [script-src CSP](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) 以了解更多有关允许 WebAssembly 编译和执行的信息。
 
 ## 语法
 
@@ -49,7 +50,8 @@ WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
 
 然后访问 `ResultObject` 的实例成员，并调用包含的导出函数。
 
-> **备注：** 为了使其工作，服务器应该返回一个 `application/wasm` MIME 类型的 `.wasm` 文件。
+> [!NOTE]
+> 为了使其工作，服务器应该返回一个 `application/wasm` MIME 类型的 `.wasm` 文件。
 
 ## 规范
 
diff --git a/files/zh-cn/webassembly/javascript_interface/memory/index.md b/files/zh-cn/webassembly/javascript_interface/memory/index.md
index b6729582ddc0f0..68d02537ac9323 100644
--- a/files/zh-cn/webassembly/javascript_interface/memory/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/memory/index.md
@@ -26,7 +26,8 @@ var myMemory = new WebAssembly.Memory(memoryDescriptor);
     - _maximum {{optional_inline}}_
       - : 以 WebAssembly 页面为单位，可允许 WebAssembly 内存的 `最大值`。当存在此属性时，此参数用于提示引擎预先保留内存。但是，引擎可能会忽略或限制此预留请求。通常情况下大多数 WebAssembly 模块不需要设置 `最大值`。
 
-> **备注：** A WebAssembly 页面的大小为一个常量 65,536 字节，即 64KB。
+> [!NOTE]
+> A WebAssembly 页面的大小为一个常量 65,536 字节，即 64KB。
 
 ### 异常
 
diff --git a/files/zh-cn/webassembly/javascript_interface/table/index.md b/files/zh-cn/webassembly/javascript_interface/table/index.md
index 68aa65776c4f57..5e2eb5def30cc7 100644
--- a/files/zh-cn/webassembly/javascript_interface/table/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/table/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`WebAssembly.Table`** 是代表 WebAssembly Table 的 JavaScript 包装对象，具有类数组结构，存储了多个函数引用。在 JavaScript 或者 WebAssemble 中创建的 Table 对象可以同时被 JavaScript 或 WebAssembly 访问和更改。
 
-> **备注：** Table 对象目前只能存储函数引用，不过在将来可能会被扩展。
+> [!NOTE]
+> Table 对象目前只能存储函数引用，不过在将来可能会被扩展。
 
 ## 构造函数
 
diff --git a/files/zh-cn/webassembly/loading_and_running/index.md b/files/zh-cn/webassembly/loading_and_running/index.md
index e24158390d476b..a40d5fe7340444 100644
--- a/files/zh-cn/webassembly/loading_and_running/index.md
+++ b/files/zh-cn/webassembly/loading_and_running/index.md
@@ -55,9 +55,11 @@ fetch("module.wasm")
 }
 ```
 
-> **备注：** 通常，我们只关心实例，但是，当我们想缓存模块，使用 [`postMessage()`](/zh-CN/docs/Web/API/MessagePort/postMessage) 与另外一个 worker 或 window 共享模块或者只是创建更多的实例的时候，拥有模块对象是很有用的。
+> [!NOTE]
+> 通常，我们只关心实例，但是，当我们想缓存模块，使用 [`postMessage()`](/zh-CN/docs/Web/API/MessagePort/postMessage) 与另外一个 worker 或 window 共享模块或者只是创建更多的实例的时候，拥有模块对象是很有用的。
 
-> **备注：** 这二种重载形式接受一个 [`WebAssembly.Module`](/zh-CN/docs/WebAssembly/JavaScript_interface/Module) 对象作为参数，并且返回一个直接包含一个实例对象作为其结果的 promise。参考[第二种重载示例](/zh-CN/docs/WebAssembly/JavaScript_interface/instantiate_static#第二种重载示例)。
+> [!NOTE]
+> 这二种重载形式接受一个 [`WebAssembly.Module`](/zh-CN/docs/WebAssembly/JavaScript_interface/Module) 对象作为参数，并且返回一个直接包含一个实例对象作为其结果的 promise。参考[第二种重载示例](/zh-CN/docs/WebAssembly/JavaScript_interface/instantiate_static#第二种重载示例)。
 
 ### 运行你的 WebAssembly 代码
 
@@ -79,7 +81,8 @@ WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then(
 );
 ```
 
-> **备注：** 关于如何从 WebAssembly 模块中导出的更多信息，请阅读[使用 WebAssembly JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API) 和[理解 WebAssembly 文本格式](/zh-CN/docs/WebAssembly/Understanding_the_text_format)。
+> [!NOTE]
+> 关于如何从 WebAssembly 模块中导出的更多信息，请阅读[使用 WebAssembly JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API) 和[理解 WebAssembly 文本格式](/zh-CN/docs/WebAssembly/Understanding_the_text_format)。
 
 ## 使用 XMLHttpRequest
 
@@ -106,4 +109,5 @@ request.onload = () => {
 };
 ```
 
-> **备注：** 你可以在 [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html) 看到实际使用的示例。
+> [!NOTE]
+> 你可以在 [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html) 看到实际使用的示例。
diff --git a/files/zh-cn/webassembly/rust_to_wasm/index.md b/files/zh-cn/webassembly/rust_to_wasm/index.md
index 7bae275a58d50a..2a7feb75fdaf1d 100644
--- a/files/zh-cn/webassembly/rust_to_wasm/index.md
+++ b/files/zh-cn/webassembly/rust_to_wasm/index.md
@@ -26,7 +26,8 @@ Rust 和 WebAssembly 有两大主要用例：
 
 前往 [Install Rust](https://www.rust-lang.org/install.html) 页面并跟随指示安装 Rust。这里会安装一个名为“rustup”的工具，这个工具能让你管理多个不同版本的 Rust。默认情况下，它会安装用于惯常 Rust 开发的 stable 版本 Rust Release。Rustup 会安装 Rust 的编译器 `rustc`、Rust 的包管理工具 `cargo`、Rust 的标准库 `rust-std` 以及一些有用的文档 `rust-docs`。
 
-> **备注：** 需要注意，在安装完成后，你需要把 cargo 的 `bin` 目录添加到你系统的 `PATH` 。一般来说它会自动添加，但需要你重启终端后才会生效。
+> [!NOTE]
+> 需要注意，在安装完成后，你需要把 cargo 的 `bin` 目录添加到你系统的 `PATH`。一般来说它会自动添加，但需要你重启终端后才会生效。
 
 ### wasm-pack
 
diff --git a/files/zh-cn/webassembly/text_format_to_wasm/index.md b/files/zh-cn/webassembly/text_format_to_wasm/index.md
index 660732c6476ce7..addde149a54b28 100644
--- a/files/zh-cn/webassembly/text_format_to_wasm/index.md
+++ b/files/zh-cn/webassembly/text_format_to_wasm/index.md
@@ -7,7 +7,8 @@ slug: WebAssembly/Text_format_to_Wasm
 
 WebAssembly 有一个基于 S-表达式的文本表示形式，设计为在文本编辑器，浏览器开发人员工具等中暴露的一个中间形式。本文解释了它是如何工作的一些内容以及如何使用可用的工具把文本格式文件转换为.wasm 汇编格式文件。
 
-> **备注：** 文本格式文件通常被保存为.wat 扩展名；有时.wast 也被使用，它是说文件包含了额外的测试命令（断言等）并且它们不需要转换到.wasm 中。
+> [!NOTE]
+> 文本格式文件通常被保存为.wat 扩展名；有时.wast 也被使用，它是说文件包含了额外的测试命令（断言等）并且它们不需要转换到.wasm 中。
 
 ## 初识文本格式
 
@@ -40,7 +41,8 @@ WebAssembly 函数 exported_func 是被导出供我们的环境（比如，使
 
 该命令会把 wasm 输出到一个叫做 simple.wasm 的文件，该文件包含了.wasm 汇编代码。
 
-> **备注：** 你可以使用 wasm2wat 工具把汇编代码转换为文本表示；例如，wasm2wat simple.wasm -o text.wat。
+> [!NOTE]
+> 你可以使用 wasm2wat 工具把汇编代码转换为文本表示；例如，wasm2wat simple.wasm -o text.wat。
 
 ## 查看汇编输出
 
diff --git a/files/zh-cn/webassembly/understanding_the_text_format/index.md b/files/zh-cn/webassembly/understanding_the_text_format/index.md
index caaf627a051f1d..653016548e8468 100644
--- a/files/zh-cn/webassembly/understanding_the_text_format/index.md
+++ b/files/zh-cn/webassembly/understanding_the_text_format/index.md
@@ -8,7 +8,8 @@ slug: WebAssembly/Understanding_the_text_format
 为了能够让人类阅读和编辑 WebAssembly，wasm 二进制格式提供了相应的文本表示。这是一种用来在文本编辑器、浏览器开发者工具等工具中显示的中间形式。本文用基本语法的方式解释了这种文本表示是如何工作的，以及它是如何与它表示的底层字节码，及在 JavaScript 中表示 wasm 的封装对象关联起来的。
 本质上，这种文本形式更类似于处理器的汇编指令。
 
-> **备注：** 如果你是一个 Web 开发者并且只是想在页面中加载 wasm 模块然后在你的代码中使用它（参考[使用 WebAssembly 的 JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API)），那么，本文可能有点儿强人所难了。但是，如果你想编写 wasm 模块从而优化你的 JavaScript 的性能或者构建你自己的 WebAssembly 编译器，那么，本文是很有用的。
+> [!NOTE]
+> 如果你是一个 Web 开发者并且只是想在页面中加载 wasm 模块然后在你的代码中使用它（参考[使用 WebAssembly 的 JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API)），那么，本文可能有点儿强人所难了。但是，如果你想编写 wasm 模块从而优化你的 JavaScript 的性能或者构建你自己的 WebAssembly 编译器，那么，本文是很有用的。
 
 ## S-表达式
 
@@ -106,7 +107,8 @@ WebAssembly 模块中的所有代码都是划分到函数里面。函数具有
 
 这里，使用 `local.get $p1` 就可以代替 `local.get 0`，访问参数 i32 变量时，就可以通过 $p1 进行访问。
 
-> **备注：** 当文本转换为二进制后，二进制中只包含整数。
+> [!NOTE]
+> 当文本转换为二进制后，二进制中只包含整数。
 
 ## 栈式机器
 
@@ -191,7 +193,8 @@ function fetchAndInstantiate(url, importObject) {
 }
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)）。另外，参考 [WebAssembly.instantiate()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) 来获取关于实例化函数的更多细节以及 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来获取 fetchAndInstantiate() 的源代码。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)）。另外，参考 [WebAssembly.instantiate()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) 来获取关于实例化函数的更多细节以及 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来获取 fetchAndInstantiate() 的源代码。
 
 ## 探索基本原则
 
@@ -211,7 +214,8 @@ function fetchAndInstantiate(url, importObject) {
     i32.add))
 ```
 
-> **备注：** i32.const 只是定义一个 32 位整数并把它压入栈。你可以把 i32 替换为任何其他可用的类型，并把 const 值修改为你想要的任何值（这里，我们把这个值设置为 42）。
+> [!NOTE]
+> i32.const 只是定义一个 32 位整数并把它压入栈。你可以把 i32 替换为任何其他可用的类型，并把 const 值修改为你想要的任何值（这里，我们把这个值设置为 42）。
 
 在这个例子中，你注意到一个 (export "getAnswerPlus1") 代码段，并且它声明在第二个函数的 func 语句之后——这声明我们想导出这个函数，以及定义导出的名字的简便方法。
 
@@ -229,7 +233,8 @@ fetchAndInstantiate("call.wasm").then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [call.wasm](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html)（或[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)）。再提一次，查看 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来了解 fetchAndInstantiate() 的源代码。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [call.wasm](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html)（或[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)）。再提一次，查看 [wasm-utils.js](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 来了解 fetchAndInstantiate() 的源代码。
 
 ### 从 JavaScript 导入函数
 
@@ -267,7 +272,8 @@ fetchAndInstantiate("logger.wasm", importObject).then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html)（[实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)）。
 
 ### WebAssembly 内存
 
@@ -326,7 +332,8 @@ consoleLogString(offset, length) {
     call $log))
 ```
 
-> **备注：** 注意上面的双分号语法，它允许在 WebAssembly 文件中添加注释。
+> [!NOTE]
+> 注意上面的双分号语法，它允许在 WebAssembly 文件中添加注释。
 
 现在，我们可以从 JavaScript 中创建一个 1 页的内存（Memory）然后把它传递进去。这会在控制台输出"Hi"。
 
@@ -340,7 +347,8 @@ fetchAndInstantiate("logger2.wasm", importObject).then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到完整源代码 [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到完整源代码 [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)）。
 
 ### WebAssembly 表格
 
@@ -381,7 +389,8 @@ WebAssembly 可以增加一个 anyfunc 类型（"any"的含义是该类型能够
 - 元素段（elem section）能够将一个模块中的任意函数子集以任意顺序列入其中，并允许出现重复。列入其中的函数将会被表格引用并，且引用顺序是其出现的顺序。
 - 元素段（elem section）中的 (i32.const 0) 值是一个偏移量——它需要在元素段开始的位置声明，其作用是表明函数引用是在表格中的什么索引位置开始存储的。这里我们指定的偏移量是 0，表格大小是 2（参考上面），因此，我们可以在索引 0 和 1 的位置填入两个引用。如果想在偏移量 1 的位置开始写入引用，那么，我们必须使用 (i32.const 1) 并且表格大小必须是 3.
 
-> **备注：** 未初始化的元素会被设定一个默认的调用即抛出（throw-on-call）值。
+> [!NOTE]
+> 未初始化的元素会被设定一个默认的调用即抛出（throw-on-call）值。
 
 在 JavaScript 中，可以创建这样一个表格实例的等价的函数调用看起来如下所示：
 
@@ -460,9 +469,11 @@ fetchAndInstantiate("wasm-table.wasm").then(function (instance) {
 });
 ```
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([实时查看](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html))。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([实时查看](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html))。
 
-> **备注：** 就像内存一样，表格也能够从 JavaScript 中创建 (参考 [WebAssembly.Table()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)) 并且能够导入和导出到其他 wasm 模块。
+> [!NOTE]
+> 就像内存一样，表格也能够从 JavaScript 中创建 (参考 [WebAssembly.Table()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)) 并且能够导入和导出到其他 wasm 模块。
 
 ### 改变表格和动态链接
 
@@ -511,7 +522,8 @@ fetchAndInstantiate("wasm-table.wasm").then(function (instance) {
 4. 在这个函数的最后一部分，我们创建了常量值 0，然后调用表格中索引 0 处的函数，该函数正是我们之前在 shared0.wat 中的使用元素代码段（elem block）存储的 shared0func。
 5. shared0func 在被调用之后会加载我们在 shared1.wat 中使用 i32.store 指令存储在内存中的 42。
 
-> **备注：** 上面的表达式会隐式地把这些值出栈，但是，你可以在使用指令的时候进行显式地声明。例如：
+> [!NOTE]
+> 上面的表达式会隐式地把这些值出栈，但是，你可以在使用指令的时候进行显式地声明。例如：
 >
 > ```wasm
 > (i32.store (i32.const 0) (i32.const 42))
@@ -538,7 +550,8 @@ Promise.all([
 
 每一个将被编译的模块都可以导入相同的内存和表格对象，这也就是共享相同的线性内存和表格的“地址空间”。
 
-> **备注：** 你可以在 GitHub 上找到这个例子 [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到这个例子 [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html)（[或者实时运行](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)）。
 
 ## 总结
 
diff --git a/files/zh-cn/webassembly/using_the_javascript_api/index.md b/files/zh-cn/webassembly/using_the_javascript_api/index.md
index 7ef0e43a6ee3a9..c9a43167c70b4e 100644
--- a/files/zh-cn/webassembly/using_the_javascript_api/index.md
+++ b/files/zh-cn/webassembly/using_the_javascript_api/index.md
@@ -7,13 +7,15 @@ slug: WebAssembly/Using_the_JavaScript_API
 
 如果你已经使用 Emscripten 等工具编译了另一种语言的模块，或者自己加载并运行代码，那么下一步是了解如何使用 WebAssembly JavaScript API 的其他功能。这篇文章告诉你你需要知道什么。
 
-> **备注：** 如果你不熟悉本文中提到到基础概念并且需要更多的解释，先阅读 [WebAssembly 概念](/zh-CN/docs/WebAssembly/Concepts) 然后再回来。
+> [!NOTE]
+> 如果你不熟悉本文中提到到基础概念并且需要更多的解释，先阅读 [WebAssembly 概念](/zh-CN/docs/WebAssembly/Concepts) 然后再回来。
 
 ## 一个简单的例子
 
 让我们通过一步一步的例子来了解如何在 WebAssembly 中使用 Javascript API，和如何在网页中加载一个 wasm 模块。
 
-> **备注：** 你可以发现同样的代码在 [webassembly-examples](https://github.com/mdn/webassembly-examples) GitHub 仓库。
+> [!NOTE]
+> 你可以发现同样的代码在 [webassembly-examples](https://github.com/mdn/webassembly-examples) GitHub 仓库。
 
 ### 准备工作
 
@@ -55,11 +57,13 @@ fetch("simple.wasm")
   });
 ```
 
-> **备注：** 我们已经非常详细地解释了这种语法如何工作通过[加载和运行 WebAssembly 代码](/zh-CN/docs/WebAssembly/Loading_and_running#使用Fetch)。如果不确定，请回到那里进行复习。
+> [!NOTE]
+> 我们已经非常详细地解释了这种语法如何工作通过[加载和运行 WebAssembly 代码](/zh-CN/docs/WebAssembly/Loading_and_running#使用Fetch)。如果不确定，请回到那里进行复习。
 
 这样做的结果是执行我们导出的 WebAssembly 函数 exported_func，这样又调用了另一个我们导入的 JavaScript 函数 imported_func, 它将 WebAssembly 实例（42）中提供的值记录到控制台。如果你保存实例代码并且在支持 WebAssembly 的浏览器中运行，你将看到此操作。
 
-> **备注：** WebAssembly 在 Firefox 52+ 和 Chrome 57+/latest Opera 是默认支持的 (你也可以运行 wasm 代码 在 Firefox 47+ 通过将 _about:config_ 中的 `javascript.options.wasm` flag 设置为 enabling , 或者在 Chrome (51+) 以及 Opera (38+) 通过访问 _chrome://flags_ 并且将 _Experimental WebAssembly_ flag 设置为 enabling.)
+> [!NOTE]
+> WebAssembly 在 Firefox 52+ 和 Chrome 57+/latest Opera 是默认支持的 (你也可以运行 wasm 代码 在 Firefox 47+ 通过将 _about:config_ 中的 `javascript.options.wasm` flag 设置为 enabling , 或者在 Chrome (51+) 以及 Opera (38+) 通过访问 _chrome://flags_ 并且将 _Experimental WebAssembly_ flag 设置为 enabling.)
 
 这是一个冗长的，令人费解的例子并且实现了很少的功能，但它确实有助于说明这是可能的——在 Web 应用中与 JavaScript 一起使用 WebAssembly 代码。正如我们一直说的，WebAssembly 并不旨在替代 JavaScript; 两者可以一起工作，借鉴对方的优势。
 
@@ -125,7 +129,8 @@ Note: 由于 {{domxref("ArrayBuffer")}} 的 byteLength 是不可变的，所以
 
 1. 像前面那样在相同的目录下复制一份 memory.wasm。
 
-   > **备注：** 你可以在这里 [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat) 找到模块的文本表示形式。
+   > [!NOTE]
+   > 你可以在这里 [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat) 找到模块的文本表示形式。
 
 2. 回到你的示例文件 `memory.html`，像前面那样获取、编译和实例化你的 wasm 模块——在你的脚本代码底部加入下面的代码：
 
@@ -155,7 +160,8 @@ Note: 由于 {{domxref("ArrayBuffer")}} 的 byteLength 是不可变的，所以
 - 它们允许 JavaScript 在模块编译之前或者同时获取和创建内存的初始内容。
 - 它们允许一个单一的内存对象被多个模块实例导入，对于实现 WebAssembly 动态链接来说，这是一个关键的构建模块。
 
-> **备注：** 你可以在这里 [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html)（[或实时运行](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)）找到我们的完整例子——这个版本使用了 [fetchAndInstantiate()](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 函数。
+> [!NOTE]
+> 你可以在这里 [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html)（[或实时运行](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)）找到我们的完整例子——这个版本使用了 [fetchAndInstantiate()](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) 函数。
 
 ## 表格
 
@@ -175,7 +181,8 @@ WebAssembly 表格是一个可变大小的带类型的引用数组，其中的
 
 1. 在一个新的目录中复制一份 table.wasm。
 
-   > **备注：** 你可以在 [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) 中查看模块的文本表示。
+   > [!NOTE]
+   > 你可以在 [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) 中查看模块的文本表示。
 
 2. 创建一份 [HTML 模板](https://github.com/mdn/webassembly-examples/blob/master/template/template.html)的新副本并将其命名为`table.html`.
 3. 如前所示，获取、编译并且实例化你的 wasm 模块——将下面的代码放入到 HTML body 底部的 [\` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。
+> [!NOTE]
+> 在完成版本的源代码中， `` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。
 
 ## 存储复杂数据 — IndexedDB
 
@@ -298,7 +302,8 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在
 
    要在 IndexedDB 中处理此问题，你需要创建一个请求对象（可以随意命名 - 命名为`request`，可以表明它的用途）。然后，在请求完成或者失败时，使用事件处理程序来运行代码，你将在下面看到这些代码。
 
-   > **备注：** 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。
+   > [!NOTE]
+   > 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。
 
    1. 在之前添加的事件处理程序下方添加以下代码 - 在`window.onload`处理程序内：
 
@@ -671,7 +676,8 @@ function deleteItem(e) {
 
 Cache API 是另一种客户端存储机制，略有不同 - 它旨在保存 HTTP 响应，因此与服务工作者一起工作得非常好。
 
-> **备注：** 现在大多数现代浏览器都支持服务工作者和缓存。在撰写本文时，Safari 仍在忙着实施它，但它应该很快就会存在。
+> [!NOTE]
+> 现在大多数现代浏览器都支持服务工作者和缓存。在撰写本文时，Safari 仍在忙着实施它，但它应该很快就会存在。
 
 ### 一个 service worker 例子
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index 78c29ed629528e..0ad9d8cdf4a4c5 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -50,7 +50,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 
 由于原生的 WebGL 代码非常复杂，本文主要针对 2D 画布。然而，你也可以通过 [WebGL 介绍页面](/zh-CN/docs/Web/API/WebGL_API) 找到 WebGL 原生代码的教程，来学习如何更容易地使用 WebGL 库来创建一个 3D 场景。
 
-> **备注：** 画布的基本功能有良好的跨浏览器支持。但存在例外：IE 8 及以下不支持 2D 画布，IE 11 及以下不支持 WebGL。
+> [!NOTE]
+> 画布的基本功能有良好的跨浏览器支持。但存在例外：IE 8 及以下不支持 2D 画布，IE 11 及以下不支持 WebGL。
 
 ## 主动学习：开始使用 \
 
@@ -112,7 +113,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 
    此时滚动条就消失了。
 
-> **备注：** 如上文所讲，一般情况下图片的尺寸可以通过 HTML 属性或 DOM 属性来设定。你也可以使用 CSS，但问题是画布在渲染完毕后其尺寸就是固定的了，如果试图调整，就会与其他图象一样（其实渲染好的画布就是一副图片），所显示的内容将变得像素化或扭曲变形。
+> [!NOTE]
+> 如上文所讲，一般情况下图片的尺寸可以通过 HTML 属性或 DOM 属性来设定。你也可以使用 CSS，但问题是画布在渲染完毕后其尺寸就是固定的了，如果试图调整，就会与其他图象一样（其实渲染好的画布就是一副图片），所显示的内容将变得像素化或扭曲变形。
 
 ### 获取画布上下文（canvas context）并完成设置
 
@@ -124,7 +126,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 var ctx = canvas.getContext("2d");
 ```
 
-> **备注：** 可选上下文还包括 WebGL（`webgl`）、WebGL 2（`webgl2`）等等，但本文暂不涉及。
+> [!NOTE]
+> 可选上下文还包括 WebGL（`webgl`）、WebGL 2（`webgl2`）等等，但本文暂不涉及。
 
 好啦，现已万事具备！`ctx` 变量包含一个 {{domxref("CanvasRenderingContext2D")}} 对象，画布上所有绘画操作都会涉及到这个对象。
 
@@ -200,7 +203,8 @@ ctx.fillRect(0, 0, width, height);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}
 
-> **备注：** 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
+> [!NOTE]
+> 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
 
 ### 绘制路径
 
@@ -289,7 +293,8 @@ ctx.fill();
 
    `arc()` 函数有六个参数。前两个指定圆心的位置坐标，第三个是圆的半径，第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），第六个是绘制方向（`false` 是顺时针，`true` 是逆时针）。
 
-   > **备注：** 0° 设定为水平向右。
+   > [!NOTE]
+   > 0° 设定为水平向右。
 
 2. 我们再来画一条弧：
 
@@ -310,9 +315,11 @@ ctx.fill();
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
 
-> **备注：** 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
+> [!NOTE]
+> 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
 
 ### 文本
 
@@ -344,7 +351,8 @@ ctx.fillText("Canvas text", 50, 150);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
 
 可以自己尝试一下。访问 [绘制文本](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text) 获得关于画布文本选项的更多信息。
 
@@ -391,7 +399,8 @@ ctx.fillText("Canvas text", 50, 150);
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
 
 ## 循环和动画
 
@@ -470,7 +479,8 @@ ctx.fillText("Canvas text", 50, 150);
 - 修改 `length` 和 `moveOffset` 的值。
 - 我们引入了 `rand()` 函数但是没有使用，你可以试着用它引入一些随机数。
 
-> **备注：** 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
 
 ### 动画
 
@@ -622,7 +632,8 @@ loop();
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
 
-> **备注：** 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
 
 ### 简单的绘图应用
 
@@ -821,7 +832,8 @@ WebGL 基于 [OpenGL](/zh-CN/docs/Glossary/OpenGL) 图形编程语言实现，
 
 你可以 [到 Github 下载最终代码](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-cube)。
 
-> **备注：** 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
+> [!NOTE]
+> 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
 
 ## 小结
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
index b74390951896f1..cd4e01e36709c1 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -55,7 +55,8 @@ l10n:
 - 页面更新更加迅速，你不必等待页面刷新，这意味这网站的体验更加流畅、响应更加迅速。
 - 每次更新时下载的数据更少，这意味着浪费的带宽更少。这在使用宽带连接的台式机上可能不是什么问题，但在移动设备或没有高速互联网连接的国家/地区则是一个主要问题。
 
-> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
+> [!NOTE]
+> 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
 
 为了进一步加快速度，某些网站还会在首次请求时将资源和数据存储在用户的计算机上，这意味这在后续的访问中，会使用这些内容的本地版本，而不是在每次重新加载页面时都下载新的副本。内容仅在更新后才会从服务器重新加载。
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
index 6e2e830ceb5068..4803930b6d6cee 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
@@ -15,7 +15,8 @@ l10n:
 
 了解 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
 
-> **备注：** 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
+> [!NOTE]
+> 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
 
 ## 指南
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
index 6d4036e3959adb..5fc0208b133f48 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
@@ -42,7 +42,8 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
 
 同样，比如说，编程来显示一些 3D 图形，使用以更高级语言编写的 API（例如 JavaScript 或 Python）将会比直接编写直接控制计算机的 GPU 或其他图形功能的低级代码（比如 C 或 C++）来执行操作要容易得多。
 
-> **备注：** 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
+> [!NOTE]
+> 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
 
 ### 客户端 JavaScript 中的 API
 
@@ -100,7 +101,8 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
 
 API 使用一个或多个 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。
 
-> **备注：** 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
+> [!NOTE]
+> 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
 
 让我们回到 Web 音频 API 的例子——这是一个相当复杂的 API，它由多个对象组成。最重要的包括：
 
@@ -169,7 +171,8 @@ audioElement.addEventListener("ended", () => {
 });
 ```
 
-> **备注：** 有些人可能会注意到，用于播放和暂停音轨的 `play()` 和 `pause()` 方法并不属于 Web 音频 API；它们属于 {{domxref("HTMLMediaElement")}} API，这是一个不同但紧密相关的 API。
+> [!NOTE]
+> 有些人可能会注意到，用于播放和暂停音轨的 `play()` 和 `pause()` 方法并不属于 Web 音频 API；它们属于 {{domxref("HTMLMediaElement")}} API，这是一个不同但紧密相关的 API。
 
 接下来，我们使用 {{domxref("BaseAudioContext/createGain", "AudioContext.createGain()")}} 方法创建一个 {{domxref("GainNode")}} 对象，可以用于调整通过它的音频的音量，并创建另一个事件处理器，当滑块值改变时改变音频图的增益（音量）值：
 
@@ -221,7 +224,8 @@ Ball.prototype.draw = function () {
 };
 ```
 
-> **备注：** 你可以在我们的[弹跳球演示](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html)中看到此代码（也可以[在线运行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)）。
+> [!NOTE]
+> 你可以在我们的[弹跳球演示](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html)中看到此代码（也可以[在线运行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)）。
 
 ### 它们使用事件来处理状态的变化
 
@@ -269,7 +273,8 @@ Web API 特性受到与 JavaScript 和其他 Web 技术（例如[同源策略](/
 
 Web 音频和 {{domxref("HTMLMediaElement")}} API 受制于一种名为[自动播放策略](/zh-CN/docs/Web/API/Web_Audio_API/Best_practices#自动播放策略)的安全机制。这基本上意味着你不能在页面加载时自动播放音频：你必须允许用户通过按钮等控件启动音频播放。这样做的原因是，自动播放音频通常非常恼人，我们实在不应该让用户忍受它。
 
-> **备注：** 根据浏览器的严格程度，这种安全机制甚至可能会阻止示例在本地运行，也就是说，如果你在浏览器中加载本地示例文件，而不是从 Web 服务器上运行它的话。在撰写本文时，我们的 Web 音频 API 示例在 Google Chrome 浏览器上无法本地运行，必须上传到 GitHub 才能运行。
+> [!NOTE]
+> 根据浏览器的严格程度，这种安全机制甚至可能会阻止示例在本地运行，也就是说，如果你在浏览器中加载本地示例文件，而不是从 Web 服务器上运行它的话。在撰写本文时，我们的 Web 音频 API 示例在 Google Chrome 浏览器上无法本地运行，必须上传到 GitHub 才能运行。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 7442ff9acf4b45..ff77d6ca6298c2 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -69,7 +69,8 @@ Web 浏览器是非常复杂的软件，有许多活动部件，其中许多部
 
 ![文档对象模型的树状结构表示：顶部节点是 doctype 和 HTML 元素。HTML 的子节点包括 head 和 body。每个子元素都是一个分支。所有的文本，甚至是空白处，也都被显示出来](dom-screenshot.png)
 
-> **备注：** 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
+> [!NOTE]
+> 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
 
 树上的每个条目都被称为**节点**。你可以在上图中看到，一些节点代表元素（标识为 `HTML`、`HEAD`、`META` 等），另一些代表文本（标识为 `#text`）。还有[其他类型的节点](/zh-CN/docs/Web/API/Node/nodeType)，但这些是你会遇到的主要类型。
 
@@ -215,7 +216,8 @@ linkPara.parentNode.removeChild(linkPara);
    

    ```
 
-> **备注：** 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
+> [!NOTE]
+> 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
 
 还有一种在你的文档上动态操作样式的常见方法，我们现在就来看看。
 
@@ -248,7 +250,8 @@ linkPara.parentNode.removeChild(linkPara);
 
 在接下来的几节中我们将看看 DOM API 一些更实际的用途。
 
-> **备注：** 你可以在 GitHub 上找到我们的 [dom-example.html 的完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html)演示（[也可以看看它的在线运行版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到我们的 [dom-example.html 的完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html)演示（[也可以看看它的在线运行版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
 
 ## 动手练习：一个动态的购物单
 
@@ -276,7 +279,8 @@ linkPara.parentNode.removeChild(linkPara);
 10. 为删除按钮绑定事件处理程序。当点击按钮时，删除它所在的整个列表元素（`
  • ...
    • `）。
 11. 最后，使用 [`focus()`](/zh-CN/docs/Web/API/HTMLElement/focus) 方法聚焦输入框准备输入下一个购物项。
 
-> **备注：** 如果你卡住了，请查看[完成的购物清单](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)（[查看其在线版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)）。
+> [!NOTE]
+> 如果你卡住了，请查看[完成的购物清单](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)（[查看其在线版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)）。
 
 ## 总结
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 2662e1403b4349..ec7ecdff7c4bf2 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -37,7 +37,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
 
 让我们再来瞧一眼这个地图的例子 (see the [source code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/maps-example.html); [see it live also](https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)), 从这里可以知道第三方 API 和浏览器 API 的区别是怎么样的。
 
-> **备注：** 你可能想要一次获得所有的代码示例，在这种情况下，你可以搜索 repo 来获取每个部分中需要的示例文件。
+> [!NOTE]
+> 你可能想要一次获得所有的代码示例，在这种情况下，你可以搜索 repo 来获取每个部分中需要的示例文件。
 
 ### 它们植根于第三方服务器
 
@@ -76,7 +77,8 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 以上就是用 Google Maps API 建立一个简单地图所需要的所有信息。所有复杂的工作都全由你所连接的第三方服务器处理，包括展示正确地理位置的地图块，等等。
 
-> **备注：** 一些 api 处理对其功能的访问略有不同，相反，它们要求开发人员向特定的 URL 模式发出 HTTP 请求 (参见从服务器获取数据)，以检索特定的数据。这些被称为 RESTful api，稍后我们将在文章中展示这个示例。
+> [!NOTE]
+> 一些 api 处理对其功能的访问略有不同，相反，它们要求开发人员向特定的 URL 模式发出 HTTP 请求 (参见从服务器获取数据)，以检索特定的数据。这些被称为 RESTful api，稍后我们将在文章中展示这个示例。
 
 ### 权限的不同处理方式
 
@@ -109,7 +111,8 @@ URL 末尾提供的 URL 参数是一个开发人员密钥—应用程序的开
    6. 单击创建凭据，然后选择 API 密钥。
    7. 复制你的 API 密钥并将示例中的第一个{{htmlelement("script")}}元素中的现有密钥替换为你自己的密钥。（位于`?key=`和属性结束引号标记 (`"`) 之间的位置。)
 
-   > **备注：** 获取 Google 相关 API 密钥可能会有一点困难——Google Cloud Platform API Manager 有许多不同的屏幕，并且工作流程可能因你是否设置账户而变得细微的不同。如果你在执行此步骤时遇到了困难，我们将很乐意为你提供帮助——[联系我们](/zh-CN/docs/Learn#Contact_us)。
+   > [!NOTE]
+   > 获取 Google 相关 API 密钥可能会有一点困难——Google Cloud Platform API Manager 有许多不同的屏幕，并且工作流程可能因你是否设置账户而变得细微的不同。如果你在执行此步骤时遇到了困难，我们将很乐意为你提供帮助——[联系我们](/zh-CN/docs/Learn#Contact_us)。
 
 3. 打开你的 Google Maps 起始文件，找到`INSERT-YOUR-API-KEY-HERE`字符串，然后将其替换为你从 Google Cloud Platform API Manager dashboard 获取的实际 API 密钥。
 
@@ -148,9 +151,11 @@ URL 末尾提供的 URL 参数是一个开发人员密钥—应用程序的开
 
    这里我们用`iconBase` 加上图标的文件名，从而创建完整 URL 的方式阐明了 icon 属性。现在尝试重新加载你的例子，你会看到你的地图上显示了一个定制的标记！
 
-> **备注：** 访问 [Customizing a Google Map: Custom Markers](https://developers.google.com/maps/documentation/javascript/custom-markers) 以查看更多信息。
+> [!NOTE]
+> 访问 [Customizing a Google Map: Custom Markers](https://developers.google.com/maps/documentation/javascript/custom-markers) 以查看更多信息。
 
-> **备注：** 访问 [Map marker or Icon names](https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3) 以找出还有哪些可以的图标，并查看它们的引用名称是什么。它们的文件名应当是当你点击它们时显示出的图标名，最后带有".png"。
+> [!NOTE]
+> 访问 [Map marker or Icon names](https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3) 以找出还有哪些可以的图标，并查看它们的引用名称是什么。它们的文件名应当是当你点击它们时显示出的图标名，最后带有".png"。
 
 ### 单击标记时显示弹出窗口
 
@@ -287,9 +292,11 @@ https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=4f3c267e125943d
 &begin_date=20170301&end_date=20170312
 ```
 
-> **备注：** 更多 URL 参数的说明参考 [NYTimes developer docs](https://developer.nytimes.com/).
+> [!NOTE]
+> 更多 URL 参数的说明参考 [NYTimes developer docs](https://developer.nytimes.com/).
 
-> **备注：** 示例包含了基本的表单数据验证操作 — 表项提交之前必须有内容 (用 `required` 属性实现)，此外，日期字段有确定的 `pattern` 属性，它们的值必须由 8 个数字组成 (`pattern="[0-9]{8}"`)，否则不能提交。更多细节参考 [Form data validation](/zh-CN/docs/Learn/HTML/Forms/Form_validation)
+> [!NOTE]
+> 示例包含了基本的表单数据验证操作 — 表项提交之前必须有内容 (用 `required` 属性实现)，此外，日期字段有确定的 `pattern` 属性，它们的值必须由 8 个数字组成 (`pattern="[0-9]{8}"`)，否则不能提交。更多细节参考 [Form data validation](/zh-CN/docs/Learn/HTML/Forms/Form_validation)
 
 ### 从 api 请求数据
 
@@ -421,7 +428,8 @@ function displayResults(json) {
 
    第二个函数基本上执行相反的操作，不过有个额外的步骤是检测 `pageNumber` 在 -1 之前是否已经是 0 — 如果 fetch 请求的 `page` URL 参数是负数，会导致错误。如果 `pageNumber` 已经是 0，则直接执行 [`return`](/zh-CN/docs/Web/JavaScript/Reference/Statements/return) 退出函数，避免多余的计算。 (如果当前页面已经是首页，就不需要重新加载)。
 
-> **备注：** 完整代码参考 [finished nytimes API example code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) (实例参考 [see it running live here](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)).
+> [!NOTE]
+> 完整代码参考 [finished nytimes API example code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) (实例参考 [see it running live here](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)).
 
 ## YouTube 示例
 
diff --git a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
index f04b3c9d6ef940..9947c3b19c0f93 100644
--- a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
@@ -24,7 +24,8 @@ slug: Learn/JavaScript/First_steps/A_first_splash
 
 我们并不要求你立刻完整理解所有代码：你不需要借此学会 JavaScript，甚至不需要理解我们要求你编写的全部代码。当前只是概括地介绍一些抽象的概念，让你了解 JavaScript 的特性是如何协同工作的，以及获得编写 JavaScript 的一些感受。所有具体特性将在后续文章中详细介绍，如果你没有很快地全部理解它们，请不要担心！
 
-> **备注：** 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。
+> [!NOTE]
+> 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。
 
 ## 像程序员一样思考
 
@@ -136,7 +137,8 @@ let resetButton;
 
 - 倒数第二个变量存储一个计数器并初始化为 1（用于跟踪玩家猜测的次数），最后一个变量存储对重置按钮的引用，这个按钮尚不存在（但稍后就有了）。
 
-> **备注：** 稍后将讲解更多关于变量和常量的信息。[参见下一篇文章](/zh-CN/docs/Learn/JavaScript/First_steps/Variables)。
+> [!NOTE]
+> 稍后将讲解更多关于变量和常量的信息。[参见下一篇文章](/zh-CN/docs/Learn/JavaScript/First_steps/Variables)。
 
 ### 函数（Function）
 
diff --git a/files/zh-cn/learn/javascript/first_steps/arrays/index.md b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
index 418f457a4e7d55..c5eaa6eebbf306 100644
--- a/files/zh-cn/learn/javascript/first_steps/arrays/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
@@ -174,7 +174,8 @@ slug: Learn/JavaScript/First_steps/Arrays
    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    ```
 
-   > **备注：** 我们以前说过，但还是提醒一下——电脑从 0 开始计数！
+   > [!NOTE]
+   > 我们以前说过，但还是提醒一下——电脑从 0 开始计数！
 
 3. 请注意，数组中包含数组的话称之为多维数组。你可以通过将两组方括号链接在一起来访问数组内的另一个数组。例如，要访问数组内部的一个项目，即 `random` 数组中的第三个项目（参见上一节），我们可以这样做：
 
@@ -216,7 +217,8 @@ for (let i = 0; i < sequence.length; i++) {
 
 通常，你会看到一个包含在一个长长的字符串中的原始数据，你可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。为此，我们可以使用 {{jsxref("String.prototype.split()","split()")}} 方法。在其最简单的形式中，这需要一个参数，你要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。
 
-> **备注：** 好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。
+> [!NOTE]
+> 好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。
 
 1. 我们来玩一下这个方法，看看它是如何工作的。首先，在控制台中创建一个字符串：
 
@@ -407,7 +409,8 @@ window.addEventListener("load", updateCode);
 
 在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。这个想法是，当在搜索框中输入时，列表中会显示 5 个先前的搜索字词。当列表项目数量超过 5 时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示 5 个以前的搜索字词。
 
-> **备注：** 在真正的搜索应用中，你可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！我们现在只是保持简单的逻辑。
+> [!NOTE]
+> 在真正的搜索应用中，你可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！我们现在只是保持简单的逻辑。
 
 要完成该应用程序，我们需要你：
 
diff --git a/files/zh-cn/learn/javascript/first_steps/index.md b/files/zh-cn/learn/javascript/first_steps/index.md
index c0e366b665739a..bd90fe0e7722ee 100644
--- a/files/zh-cn/learn/javascript/first_steps/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/index.md
@@ -15,7 +15,8 @@ slug: Learn/JavaScript/First_steps
 - [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。
 - [CSS 简介](/zh-CN/docs/Learn/CSS/Introduction_to_CSS)。
 
-> **备注：** 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 和 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 和 [Glitch](https://glitch.com/)。
 
 ## 学习指南
 
diff --git a/files/zh-cn/learn/javascript/first_steps/math/index.md b/files/zh-cn/learn/javascript/first_steps/math/index.md
index 6f1e81895a4bef..db946e2f968344 100644
--- a/files/zh-cn/learn/javascript/first_steps/math/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/math/index.md
@@ -134,9 +134,11 @@ slug: Learn/JavaScript/First_steps/Math
   
 
 
-> **备注：** 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。
+> [!NOTE]
+> 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。
 
-> **备注：** 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。
+> [!NOTE]
+> 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。
 
 我们可能不需要教你如何做基础数学，但我们想测试你对所涉及的语法的理解。尝试将下面的示例输入到[开发者工具 JavaScript 控制台](/zh-CN/docs/Learn/Discover_browser_developer_tools)中。
 
@@ -190,7 +192,8 @@ num2 + num1 / 8 + 2;
 
 尝试看看。
 
-> **备注：** 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。
+> [!NOTE]
+> 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。
 
 ## 自增和自减运算符
 
@@ -200,7 +203,8 @@ num2 + num1 / 8 + 2;
 guessCount++;
 ```
 
-> **备注：** 它们最常用于[循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)中，你将在以后的课程中了解。例如，假设你想循环查看价格表，并为每个价格增加销售税。你可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成——[在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并[查看源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。
+> [!NOTE]
+> 它们最常用于[循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)中，你将在以后的课程中了解。例如，假设你想循环查看价格表，并为每个价格增加销售税。你可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成——[在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并[查看源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。
 
 我们来试试看你们的控制台。首先，请注意，你不能将这些直接应用于一个数字，这可能看起来很奇怪，但是我们为变量赋值一个新的更新值，而不是对该值进行操作。以下将返回错误：
 
@@ -229,7 +233,8 @@ num2--;
 num2;
 ```
 
-> **备注：** 你可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。
+> [!NOTE]
+> 你可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。
 
 ## 赋值运算符
 
@@ -260,7 +265,8 @@ let y = 4; // y 包含值 4
 x *= y; // x 现在包含值 12
 ```
 
-> **备注：** 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)，但是这些是你现在应该学习的基本的一类。
+> [!NOTE]
+> 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)，但是这些是你现在应该学习的基本的一类。
 
 ## 主动学习：调整画布框的大小
 
@@ -294,7 +300,8 @@ x *= y; // x 现在包含值 12
 | <=     | 小于或等于 | 测试左值是否小于或等于右值。   | `3 <= 2`      |
 | >=     | 大于或等于 | 测试左值是否大于或等于正确值。 | `5 >= 4`      |
 
-> **备注：** 你可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议你使用这些严格的版本。
+> [!NOTE]
+> 你可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议你使用这些严格的版本。
 
 如果你尝试在控制台中输入这些值，你将看到它们都返回 `true`/`false` 值 - 我们在上一篇文章中提到的那些布尔值。这些是非常有用的，因为它们允许我们在我们的代码中做出决定 - 每次我们想要选择某种类型时，都会使用这些代码，例如：
 
@@ -333,7 +340,8 @@ function updateBtn() {
 
 你可以在 updateBtn（）函数内看到正在使用的等号运算符。在这种情况下，我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。如果按钮当前为“启动机器（start machine）”，则将其标签更改为“停止机器（stop machine）”，并根据需要更新标签。如果按钮上写着“停机”时被按下，我们将显示回原来的内容。
 
-> **备注：** 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等
+> [!NOTE]
+> 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等
 
 ## 总结
 
@@ -341,6 +349,7 @@ function updateBtn() {
 
 在下一篇文章中，我们将探讨文本，以及 JavaScript 如何让我们操纵它。
 
-> **备注：** 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。
+> [!NOTE]
+> 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
index 8a71f137b8af7a..24d1fd308f3ec1 100644
--- a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
@@ -27,7 +27,8 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 
 测验开始之前需要下载并保存 [index.html](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html)、[style.css](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/style.css)、[raw-text.txt](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)。
 
-> **备注：** 你还可以用类似 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 `
+```
+
+### 控制 `contenteditable` 元素上的虚拟键盘
+
+默认情况下，使用 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes/contenteditable) 属性的元素在被轻触或点击时会触发虚拟键盘。在某些情况下，可能希望阻止这种行为，并在其他事件后手动显示虚拟键盘。
+
+将 [`virtualkeyboardpolicy`](/zh-CN/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) 属性设置为 `manual` 可以阻止浏览器默认处理虚拟键盘的行为，而是通过使用 {{domxref("VirtualKeyboard")}} 接口的 `show()` 和 `hide()` 方法自行处理。
+
+下面的代码片段展示了如何使用 `virtualkeyboardpolicy` 属性和 `navigator.virtualKeyboard.show()` 方法来在双击事件后显示虚拟键盘：
+
+```html
+
    
+
+```
+
+## 接口
+
+- {{domxref('VirtualKeyboard')}} {{experimental_inline}}
+  - : 提供用于检索键盘布局映射和切换对物理键盘的按键捕获的函数。
+
+## 对其他接口的扩展
+
+- {{domxref("Navigator.virtualKeyboard")}} {{ReadOnlyInline}} {{experimental_inline}}
+  - : 返回对 {{DOMxRef("VirtualKeyboard")}} API（用于控制屏幕虚拟键盘）的引用。
+- {{domxref("HTMLElement.virtualkeyboardpolicy")}} {{experimental_inline}}
+  - : 一个字符串，指示在元素聚焦时是否使用浏览器的默认策略显示虚拟键盘，或者手动处理虚拟键盘的显示。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用虚拟键盘 API 实现完全控制](https://developer.chrome.com/docs/web-platform/virtual-keyboard/)

From f2bea2f93c3c49d1b44ea7fd80891ac95137b4c6 Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Sun, 28 Jul 2024 12:50:51 +0800
Subject: [PATCH 074/623] zh-cn: update Markdown in MDN docs to use GFM syntax
 (#22553)

---
 .../howto/markdown_in_mdn/index.md            | 72 +++++++++----------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md b/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
index 2ed27020f6df24..ebe860835fae9c 100644
--- a/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
+++ b/files/zh-cn/mdn/writing_guidelines/howto/markdown_in_mdn/index.md
@@ -1,6 +1,8 @@
 ---
 title: 如何使用 Markdown 来撰写文档
 slug: MDN/Writing_guidelines/Howto/Markdown_in_MDN
+l10n:
+  sourceCommit: a5682b8bcf2b9761fa576004deea720f76735aaf
 ---
 
 {{MDNSidebar}}
@@ -9,7 +11,7 @@ slug: MDN/Writing_guidelines/Howto/Markdown_in_MDN
 
 ## 基础：Github 风格的 Markdown
 
-MDN Markdown 的基础是 Github 风格的 Markdown（GFM）：。这意味着，对于本文中未指定的内容，你可以参考 GFM 规范。而 GFM 又是 CommonMark（[https://spec.commonmark.org/](https://spec.commonmark.org/)）的超集。
+MDN Markdown 的基础是 Github 风格的 Markdown（GFM）：。这意味着，对于本文中未指定的内容，你可以参考 GFM 规范。而 GFM 又是 CommonMark（）的超集。
 
 ## 链接
 
@@ -173,15 +175,19 @@ const greeting = "这是一个错误示例";
 
 ## 备注、警告和标注
 
-如果你需要特别声明一些内容。那么，可以使用一个带有特殊起始段落的 GFM 块引用。一共有三种类型：备注、警告和标注。
+有时作者需要特别强调某些内容。要做到这一点，可以使用 [GFM 备注块语法](https://github.com/orgs/community/discussions/16925)，这是一种带有特殊起始行的 GFM 块引用。一共有三种类型：备注、警告和标注。
 
-- 要添加备注，请创建一个 GFM 块引用，起始段落以 `**备注：**` 开头。
-- 要添加警告，请创建一个 GFM 块引用，起始段落以 `**警告：**` 开头。
-- 要添加标注，请创建一个 GFM 块引用，起始段落以 `**标注：**` 开头。
+> [!NOTE]
+> MDN Web 文档在 GFM 添加 noteblock 语法之前就已经支持了自己的备注块语法。因此，MDN 仅支持 GFM 支持的五种备注块类型中的两种，并且支持另一种 GFM 不支持的类型。
 
-备注和警告将在输出中渲染为“**备注：**”或“**警告：**”文本，而标注不会。当你想要提供自定义标题时，标注会是一个不错的选择。
+- 要添加备注，请创建一个 GFM 块引用，起始行为 `[!NOTE]`。
+- 要添加警告，请创建一个 GFM 块引用，起始行为 `[!WARNING]`。
+- 要添加标注，请创建一个 GFM 块引用，起始行为 `[!CALLOUT]`。
 
-标记的处理是是基于生成的 AST，而不是指定的确切字符串。这意味着，使用 `备注：` 也会生成注释。但是，请以 Markdown 语法为主要风格。
+备注和警告将在输出中添加本地化的“**备注：**”或“**警告：**”，而标注不会。当你想要提供自定义标题时，标注会是一个不错的选择。
+
+> [!WARNING]
+> 在旧的 MDN 语法中，类型是本地化的，并且会以粗体文本添加到第一个段落中，例如 `**备注：** Foo bar` 而不是 `[!NOTE] ⏎ Foo bar`。出于迁移的目的，此语法仍受支持。但请避免在新文档中使用。
 
 多行块引用由空的块引用生成，就像普通的段落一样。此外，没有空格的多行内容会像常规 Markdown 行一样被处理和连接。
 
@@ -192,7 +198,8 @@ const greeting = "这是一个错误示例";
 #### 备注
 
 ```md
-> **备注：** 这就是编写备注的方式。
+> [!NOTE]
+> 这就是编写备注的方式。
 >
 > 它可以有好几行。
 ```
@@ -201,21 +208,23 @@ const greeting = "这是一个错误示例";
 
 ```html
 
    
-  
    备注： 这就是编写备注的方式。
    
+  
    备注：这就是编写备注的方式。
    
   
    它可以有好几行。
    
 
    
 ```
 
 此 HTML 将渲染为高亮显示的框，例如：
 
-> **备注：** 这就是编写备注的方式。
+> [!NOTE]
+> 这就是编写备注的方式。
 >
 > 它可以有好几行。
 
 #### 警告
 
 ```md
-> **警告：** 这就是编写警告的方式。
+> [!WARNING]
+> 这就是编写警告的方式。
 >
 > 它可以有好几段。
 ```
@@ -224,21 +233,24 @@ const greeting = "这是一个错误示例";
 
 ```html
 
    
-  
    警告： 这就是编写警告的方式。
    
+  
    警告：这就是编写警告的方式。
    
   
    它可以有好几段。
    
 
    
 ```
 
 此 HTML 将渲染为高亮显示的框，例如：
 
-> **警告：** 这就是编写警告的方式。
+> [!WARNING]
+> 这就是编写警告的方式。
 >
 > 它可以有好几段。
 
 #### 标注
 
 ```md
-> **标注：** **这就是编写标注的方式。**
+> [!CALLOUT]
+>
+> **这就是编写标注的方式。**
 >
 > 它可以有好几段。
 ```
@@ -254,38 +266,19 @@ const greeting = "这是一个错误示例";
 
 此 HTML 将渲染为高亮显示的框，例如：
 
-> **标注：**
+> [!CALLOUT]
 >
 > **这就是编写标注的方式。**
 >
 > 它可以有好几段。
 
-#### 警告的翻译
-
-因为文本“**备注：**”或“**警告：**”也会出现在渲染的输出中，因此必须考虑到翻译问题。实际上，这意味这 MDN 支持的每一种语言环境都必须提供这些字符串的翻译，平台必须识别到它们表明了这些结构需要特殊处理。
-
-这些本地化内容以 [gettext](https://www.gnu.org/software/gettext/) 格式存储在 [Yari](https://github.com/mdn/yari/tree/main/markdown/localizations) 的 JSON 文件中。请参考这些文件以确定应使用什么字符串来表示特定语言环境的“备注：”和“警告：”。如果未定义区域设置文件，将自动回退到英文版本。
-
-例如，如果我们想在德语中使用“Warnung”来表示“警告”，那么我们在德语页面应该写：
-
-```md
-> **Warnung:** So schreibt man eine Warnung.
-```
-
-这会产生：
-
-```html
-
    
-  
    Warnung: So schreibt man eine Warnung.
    
-
    
-```
-
 #### 包含代码块的备注
 
 这是一个包含代码块的例子。
 
 ````md
-> **备注：** 这是编写备注的方式。
+> [!NOTE]
+> 这是编写备注的方式。
 >
 > 它可以包含代码块。
 >
@@ -300,7 +293,7 @@ const greeting = "这是一个错误示例";
 
 ```html
 
    
-  
    备注： 这是编写备注的方式。
    
+  
    备注：这是编写备注的方式。
    
   
    它可以包含代码块。
    
   
    const s = "我在代码块中";
    
   
    就像这样。
    
@@ -309,7 +302,8 @@ const greeting = "这是一个错误示例";
 
 HTML 将渲染为包含代码块的框：
 
-> **备注：** 这是编写备注的方式。
+> [!NOTE]
+> 这是编写备注的方式。
 >
 > 它可以包含代码块。
 >
@@ -482,7 +476,7 @@ GFM 表格语法的主要限制是：
 
 #### GFM 表格最大宽度
 
-有时，即使可以使用 GFM 编写表格，也应该使用 HTML。因为 GFM 使用“ASCII art”来实现表格，当表格的一行变得过长时，将变得难以阅读。例如，考虑以下表格：
+有时，即使可以使用 GFM 编写表格，也应该使用 HTML。因为 GFM 使用“{{Glossary("ASCII")}} art”来实现表格，当表格的一行变得过长时，将变得难以阅读。例如，考虑以下表格：
 
 ```html
 

From d43dba838aaea0d80e90c838cb08824019914266 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sun, 28 Jul 2024 13:21:43 +0800
Subject: [PATCH 075/623] chore(zh-cn): convert noteblocks for `/web` (part 12)
 (#22638)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../zh-cn/web/events/event_handlers/index.md  |  6 +++--
 .../web/manifest/background_color/index.md    |  3 ++-
 files/zh-cn/web/manifest/index.md             | 12 ++++++----
 files/zh-cn/web/mathml/attribute/index.md     |  3 ++-
 files/zh-cn/web/mathml/authoring/index.md     | 24 ++++++++++++-------
 files/zh-cn/web/mathml/element/index.md       |  3 ++-
 .../zh-cn/web/mathml/element/maction/index.md |  3 ++-
 files/zh-cn/web/mathml/element/math/index.md  |  3 ++-
 .../zh-cn/web/mathml/element/mfenced/index.md |  3 ++-
 files/zh-cn/web/mathml/element/mfrac/index.md |  3 ++-
 files/zh-cn/web/mathml/element/mi/index.md    |  4 ++--
 .../web/mathml/element/mmultiscripts/index.md |  3 ++-
 files/zh-cn/web/mathml/element/mo/index.md    |  3 ++-
 .../zh-cn/web/mathml/element/mspace/index.md  |  3 ++-
 .../zh-cn/web/mathml/element/mstyle/index.md  |  3 ++-
 files/zh-cn/web/mathml/element/msub/index.md  |  3 ++-
 .../zh-cn/web/mathml/element/msubsup/index.md |  3 ++-
 files/zh-cn/web/mathml/element/msup/index.md  |  3 ++-
 .../zh-cn/web/mathml/element/mtable/index.md  |  3 ++-
 .../web/mathml/element/semantics/index.md     |  3 ++-
 files/zh-cn/web/mathml/fonts/index.md         | 12 ++++++----
 .../global_attributes/mathbackground/index.md |  3 ++-
 .../global_attributes/mathcolor/index.md      |  3 ++-
 .../global_attributes/mathsize/index.md       |  6 +++--
 files/zh-cn/web/mathml/index.md               |  3 ++-
 .../index.md                                  |  6 +++--
 .../buffering_seeking_time_ranges/index.md    |  6 +++--
 .../index.md                                  | 24 ++++++++++++-------
 .../audio_and_video_manipulation/index.md     | 21 ++++++++++------
 files/zh-cn/web/media/autoplay_guide/index.md | 12 ++++++----
 .../web/media/formats/image_types/index.md    | 21 ++++++++++------
 .../web/media/formats/video_codecs/index.md   |  3 ++-
 .../index.md                                  |  6 +++--
 .../web/performance/dns-prefetch/index.md     |  3 ++-
 .../partitioned_cookies/index.md              |  6 +++--
 .../guides/caching/index.md                   |  3 ++-
 .../offline_and_background_operation/index.md |  3 ++-
 .../cycletracker/secure_connection/index.md   |  6 +++--
 .../js13kgames/installable_pwas/index.md      |  3 ++-
 .../practical_implementation_guides/index.md  |  3 ++-
 .../web/security/same-origin_policy/index.md  |  6 +++--
 .../web/security/secure_contexts/index.md     |  3 ++-
 .../security/subresource_integrity/index.md   |  9 ++++---
 .../index.md                                  |  3 ++-
 files/zh-cn/web/svg/attribute/d/index.md      | 15 ++++++++----
 .../zh-cn/web/svg/attribute/display/index.md  |  3 ++-
 .../web/svg/attribute/fill-rule/index.md      |  3 ++-
 files/zh-cn/web/svg/attribute/id/index.md     |  3 ++-
 .../svg/attribute/image-rendering/index.md    |  3 ++-
 files/zh-cn/web/svg/attribute/in/index.md     |  3 ++-
 files/zh-cn/web/svg/attribute/index.md        |  3 ++-
 .../svg/attribute/stroke-linejoin/index.md    |  6 +++--
 files/zh-cn/web/svg/attribute/target/index.md |  3 ++-
 .../web/svg/attribute/transform/index.md      |  6 +++--
 .../web/svg/attribute/visibility/index.md     |  3 ++-
 files/zh-cn/web/svg/attribute/width/index.md  |  3 ++-
 files/zh-cn/web/svg/attribute/x/index.md      |  3 ++-
 files/zh-cn/web/svg/attribute/y/index.md      |  3 ++-
 .../web/svg/element/animatemotion/index.md    |  3 ++-
 files/zh-cn/web/svg/element/cursor/index.md   |  3 ++-
 .../web/svg/element/fedropshadow/index.md     |  3 ++-
 .../web/svg/element/foreignobject/index.md    |  3 ++-
 files/zh-cn/web/svg/element/image/index.md    |  3 ++-
 files/zh-cn/web/svg/element/index.md          |  3 ++-
 .../web/svg/element/radialgradient/index.md   |  3 ++-
 .../web/svg/svg_animation_with_smil/index.md  |  3 ++-
 .../svg/tutorial/fills_and_strokes/index.md   |  3 ++-
 .../zh-cn/web/svg/tutorial/gradients/index.md |  3 ++-
 files/zh-cn/web/svg/tutorial/index.md         |  1 -
 .../tutorial/other_content_in_svg/index.md    |  3 ++-
 .../zh-cn/web/svg/tutorial/svg_fonts/index.md |  3 ++-
 .../svg_in_html_introduction/index.md         |  3 ++-
 files/zh-cn/web/text_fragments/index.md       |  3 ++-
 files/zh-cn/web/tutorials/index.md            |  4 +++-
 .../xml/parsing_and_serializing_xml/index.md  |  3 ++-
 files/zh-cn/web/xpath/index.md                |  3 ++-
 76 files changed, 253 insertions(+), 128 deletions(-)

diff --git a/files/zh-cn/web/events/event_handlers/index.md b/files/zh-cn/web/events/event_handlers/index.md
index c717c1548f01e1..f68a07a3e209dc 100644
--- a/files/zh-cn/web/events/event_handlers/index.md
+++ b/files/zh-cn/web/events/event_handlers/index.md
@@ -17,7 +17,8 @@ slug: Web/Events/Event_handlers
 
 有两种推荐的注册处理器的方法。可以将事件处理器代码赋值给目标元素对应的 _onevent_ 属性，或使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 方法将处理器注册为元素的监听器，从而在事件触发时运行事件处理器的代码。无论哪种情况，处理器都将接收一个符合 [`Event` 接口](/zh-CN/docs/Web/API/Event)的对象。主要区别在于可以使用事件监听器方法添加（或删除）多个事件处理器。
 
-> **警告：** 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅[内联事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#内联事件处理器——不要使用)。
+> [!WARNING]
+> 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅[内联事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#内联事件处理器——不要使用)。
 
 ### 使用 onevent 属性
 
@@ -43,7 +44,8 @@ btn.onclick = greet;
 
 在元素上设置事件处理器的最灵活的方法是使用 {{domxref("EventTarget.addEventListener")}} 方法。这种方法允许为一个元素分配多个监听器，并在需要时*删除*监听器（使用 {{domxref("EventTarget.removeEventListener")}} 方法）。
 
-> **备注：** 添加和删除事件处理器的功能允许你在不同情况下执行不同的操作，例如，让同一个按钮执行不同的操作。此外，在更复杂的程序中，清理旧的或未使用的事件处理器可以提高效率。
+> [!NOTE]
+> 添加和删除事件处理器的功能允许你在不同情况下执行不同的操作，例如，让同一个按钮执行不同的操作。此外，在更复杂的程序中，清理旧的或未使用的事件处理器可以提高效率。
 
 下面我们展示了如何将一个简单的 `greet()` 函数设置为 `click` 事件的监听器/事件处理器（如果需要，你可以使用匿名函数代替具名函数）。请再次注意，事件（event）会作为第一个参数传递给事件处理器。
 
diff --git a/files/zh-cn/web/manifest/background_color/index.md b/files/zh-cn/web/manifest/background_color/index.md
index 8a402c35b7ef67..fc39202f736743 100644
--- a/files/zh-cn/web/manifest/background_color/index.md
+++ b/files/zh-cn/web/manifest/background_color/index.md
@@ -22,7 +22,8 @@ slug: Web/Manifest/background_color
 
 因此，`background_color` 应与 {{cssxref("background-color")}} 网站样式表中的 CSS 属性匹配，以在启动 Web 应用程序和加载网站内容之间进行平滑过渡。
 
-> **备注：** 该 `background_color` 成员仅用于在从网络或存储介质加载主样式表时改善用户体验。当渐进式 Web 应用程序样式表可用时，用户代理不会将 {{cssxref("background-color")}} 用作 CSS 属性。
+> [!NOTE]
+> 该 `background_color` 成员仅用于在从网络或存储介质加载主样式表时改善用户体验。当渐进式 Web 应用程序样式表可用时，用户代理不会将 {{cssxref("background-color")}} 用作 CSS 属性。
 
 ## 实例
 
diff --git a/files/zh-cn/web/manifest/index.md b/files/zh-cn/web/manifest/index.md
index 0c854a14503c6e..011b70c8335958 100644
--- a/files/zh-cn/web/manifest/index.md
+++ b/files/zh-cn/web/manifest/index.md
@@ -81,7 +81,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 "background_color": "red"
 ```
 
-> **备注：** background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。
+> [!NOTE]
+> background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。
 
 ### `description`
 
@@ -107,7 +108,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 - `rtl` (由右到左)
 - `auto` (由浏览器自动判断。
 
-> **备注：** 当省略时，默认为 auto
+> [!NOTE]
+> 当省略时，默认为 auto
 
 ### `display`
 
@@ -126,7 +128,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 | `minimal-ui` | 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。                                                                                                         | `browser`    |
 | `browser`    | 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。这是默认的设置。                                                                                               | (None)       |
 
-> **备注：** 你可以使用显示模式媒体功能，根据[显示模式](/zh-CN/docs/Web/CSS/@media/display-mode)选择性地将 CSS 应用到你的应用程序。这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。
+> [!NOTE]
+> 你可以使用显示模式媒体功能，根据[显示模式](/zh-CN/docs/Web/CSS/@media/display-mode)选择性地将 CSS 应用到你的应用程序。这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。
 
 ### `icons`
 
@@ -205,7 +208,8 @@ Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的
 "prefer_related_applications": false
 ```
 
-> **备注：** 如果省略，默认设置为 `false`.
+> [!NOTE]
+> 如果省略，默认设置为 `false`.
 
 ### `related_applications`
 
diff --git a/files/zh-cn/web/mathml/attribute/index.md b/files/zh-cn/web/mathml/attribute/index.md
index 45d1e22f5fd2fb..515e0e60ee3d92 100644
--- a/files/zh-cn/web/mathml/attribute/index.md
+++ b/files/zh-cn/web/mathml/attribute/index.md
@@ -9,7 +9,8 @@ l10n:
 
 此页面是 MathML 属性的字母表。要了解每个属性的更多详细信息，请参见 [MathML 元素页面](/zh-CN/docs/Web/MathML/Element)和[全局属性页面](/zh-CN/docs/Web/MathML/Global_attributes)。[值](/zh-CN/docs/Web/MathML/Values)页面也介绍了有关 MathML 属性常用值的一些说明。
 
-> **备注：** 就像 [MathML](/zh-CN/docs/Web/MathML) 主页所解释的那样，MDN 使用 [MathML 核心](https://w3c.github.io/mathml-core/)作为参考规范。不过，一些浏览器仍在使用的遗留特性也被记录在案。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到有关这些特性和其他特性的更多详细信息。
+> [!NOTE]
+> 就像 [MathML](/zh-CN/docs/Web/MathML) 主页所解释的那样，MDN 使用 [MathML 核心](https://w3c.github.io/mathml-core/)作为参考规范。不过，一些浏览器仍在使用的遗留特性也被记录在案。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到有关这些特性和其他特性的更多详细信息。
 
 
    
diff --git a/files/zh-cn/web/mathml/authoring/index.md b/files/zh-cn/web/mathml/authoring/index.md
index 1bdfb22038ea4a..114ec5ba896d4c 100644
--- a/files/zh-cn/web/mathml/authoring/index.md
+++ b/files/zh-cn/web/mathml/authoring/index.md
@@ -54,9 +54,11 @@ l10n:
 
 ```
 
-> **备注：** 要在 XML 文档（例如 XHTML、EPUB 或 OpenDocument）中使用 MathML，请在每个 `` 元素中放置一个 `xmlns="http://www.w3.org/1998/Math/MathML"` 属性。
+> [!NOTE]
+> 要在 XML 文档（例如 XHTML、EPUB 或 OpenDocument）中使用 MathML，请在每个 `` 元素中放置一个 `xmlns="http://www.w3.org/1998/Math/MathML"` 属性。
 
-> **备注：** 某些电子邮件或即时通讯客户端能够发送和接收 HTML 格式的消息。因此，可以在此类消息中嵌入数学公式，只要标记清理程序未将 MathML 标签过滤掉。
+> [!NOTE]
+> 某些电子邮件或即时通讯客户端能够发送和接收 HTML 格式的消息。因此，可以在此类消息中嵌入数学公式，只要标记清理程序未将 MathML 标签过滤掉。
 
 #### 对不支持 MathML 的浏览器的回退方案
 
@@ -78,7 +80,8 @@ l10n:
 
 ```
 
-> **备注：** 这些脚本会执行特性检测（探测 [mspace](/zh-CN/docs/Web/MathML/Element/mspace) 元素和 [mpadded](/zh-CN/docs/Web/MathML/Element/mpadded) 元素），这优于[浏览器嗅探](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)。此外，它们是在开源许可证下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行调整。
+> [!NOTE]
+> 这些脚本会执行特性检测（探测 [mspace](/zh-CN/docs/Web/MathML/Element/mspace) 元素和 [mpadded](/zh-CN/docs/Web/MathML/Element/mpadded) 元素），这优于[浏览器嗅探](/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent)。此外，它们是在开源许可证下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行调整。
 
 #### 数学公式字体
 
@@ -100,7 +103,8 @@ l10n:
   href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />
 ```
 
-> **备注：** MathFonts 页面中的字体和样式表是在开源许可下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行修改。
+> [!NOTE]
+> MathFonts 页面中的字体和样式表是在开源许可下分发的，因此可以自由地将它们复制到你自己的服务器上，并根据需要进行修改。
 
 ## 从简单语法转换
 
@@ -245,7 +249,8 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/msp
 latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback
 ```
 
-> **备注：** 命令行工具可以在服务端使用，例如：[MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) 使用 [Mathoid](https://github.com/wikimedia/mathoid) 以完成从 LaTeX 到 MathML 的转换。
+> [!NOTE]
+> 命令行工具可以在服务端使用，例如：[MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) 使用 [Mathoid](https://github.com/wikimedia/mathoid) 以完成从 LaTeX 到 MathML 的转换。
 
 ## 图形界面
 
@@ -257,13 +262,15 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
 
 ![Thunderbird 的 LaTeX 输入框](thunderbird.png)
 
-> **备注：** 你也可以使用 **Insert > HTML** 命令直接插入 MathML 内容。
+> [!NOTE]
+> 你也可以使用 **Insert > HTML** 命令直接插入 MathML 内容。
 
 [LibreOffice](https://www.libreoffice.org/) 的公式编辑器（文件 → 新建 → 公式）提供了增强功能：它的 _StartMath_ 语法输入框提供了额外的公式面板来插入预定义的数学公式结构。
 
 ![Libre Office 中的 StarMath 输入框](libreoffice.png)
 
-> **备注：** 要获取 libreoffice 的 MathML 代码，请将文档保存为 `mml` 格式，并在你喜欢的文本编辑器中打开它。
+> [!NOTE]
+> 要获取 libreoffice 的 MathML 代码，请将文档保存为 `mml` 格式，并在你喜欢的文本编辑器中打开它。
 
 ### 所见即所得编辑器
 
@@ -273,7 +280,8 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
 
 ![TeXmacs 的示例](texmacs.png)
 
-> **备注：** 默认情况下，Lyx 和 TeXmacs 会在它们的 HTML 输出中使用数学公式的图像。要使用 MathML，对于前者，请[参照这里的说明](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx)；对于后者，请选择 `User preference > Convert > Export mathematical formulas as MathML`。
+> [!NOTE]
+> 默认情况下，Lyx 和 TeXmacs 会在它们的 HTML 输出中使用数学公式的图像。要使用 MathML，对于前者，请[参照这里的说明](https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx)；对于后者，请选择 `User preference > Convert > Export mathematical formulas as MathML`。
 
 ### 光学字符和手写识别
 
diff --git a/files/zh-cn/web/mathml/element/index.md b/files/zh-cn/web/mathml/element/index.md
index 592873a7b4fd82..00da8f394d44db 100644
--- a/files/zh-cn/web/mathml/element/index.md
+++ b/files/zh-cn/web/mathml/element/index.md
@@ -9,7 +9,8 @@ l10n:
 
 这是一份按字母排序的 MathML 元素列表。所有这些元素都实现了 {{domxref("MathMLElement")}} 类。
 
-> **备注：** 如主 [MathML](/zh-CN/docs/Web/MathML) 页面所述，MDN 使用 [MathML Core](https://w3c.github.io/mathml-core/) 作为参考规范。但是，文档也记录了一些浏览器仍然实现的旧版特性。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到这些和其他特性的更多详细信息。
+> [!NOTE]
+> 如主 [MathML](/zh-CN/docs/Web/MathML) 页面所述，MDN 使用 [MathML Core](https://w3c.github.io/mathml-core/) 作为参考规范。但是，文档也记录了一些浏览器仍然实现的旧版特性。你可以在 [MathML 4](https://w3c.github.io/mathml/) 中找到这些和其他特性的更多详细信息。
 
 ## MathML 元素（字母排序）
 
diff --git a/files/zh-cn/web/mathml/element/maction/index.md b/files/zh-cn/web/mathml/element/maction/index.md
index 2c5afb5f4e4597..be8cc6d001216a 100644
--- a/files/zh-cn/web/mathml/element/maction/index.md
+++ b/files/zh-cn/web/mathml/element/maction/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **``** [MathML](/zh-CN/docs/Web/MathML) 元素允许将行为绑定到数学表达式上。默认情况下，只有第一个子元素会被渲染，但是一些浏览器可能会根据 `actiontype` 和 `selection` 属性来实现自定义行为。
 
-> **备注：** 从历史的角度来看，该元素提供了一种使 MathML 公式可以交互的机制。但如今，建议使用 [JavaScript](/zh-CN/docs/Web/JavaScript) 和其他 Web 技术来实现这种用例。
+> [!NOTE]
+> 从历史的角度来看，该元素提供了一种使 MathML 公式可以交互的机制。但如今，建议使用 [JavaScript](/zh-CN/docs/Web/JavaScript) 和其他 Web 技术来实现这种用例。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/math/index.md b/files/zh-cn/web/mathml/element/math/index.md
index 204d46381db7fa..800cda588244dc 100644
--- a/files/zh-cn/web/mathml/element/math/index.md
+++ b/files/zh-cn/web/mathml/element/math/index.md
@@ -7,7 +7,8 @@ slug: Web/MathML/Element/math
 
 **``** [MathML](/zh-CN/docs/Web/MathML) 元素是顶级的 MathML 元素，用于编写单个数学公式。可以将其放在允许[流式内容](/zh-CN/docs/Web/HTML/Content_categories#流式内容)的 HTML 内容中。
 
-> **备注：** 参阅[编写 MathML 页面](/zh-CN/docs/Web/MathML/Authoring#使用_mathml)以了解如何正确地在网页中集成 MathML 公式，有关更多的演示，请参阅[示例](/zh-CN/docs/Web/MathML/Examples)页面。
+> [!NOTE]
+> 参阅[编写 MathML 页面](/zh-CN/docs/Web/MathML/Authoring#使用_mathml)以了解如何正确地在网页中集成 MathML 公式，有关更多的演示，请参阅[示例](/zh-CN/docs/Web/MathML/Examples)页面。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/mfenced/index.md b/files/zh-cn/web/mathml/element/mfenced/index.md
index 9c3974880bcfcf..1d878f398e3a84 100644
--- a/files/zh-cn/web/mathml/element/mfenced/index.md
+++ b/files/zh-cn/web/mathml/element/mfenced/index.md
@@ -9,7 +9,8 @@ l10n:
 
 `` [MathML](/zh-CN/docs/Web/MathML) 元素提供了向表达式添加自定义开和闭括号（如圆括号）以及分隔符（如逗号或分号）的可能。
 
-> **备注：** 从历史上看，`` 元素被定义为编写围栏表达式的一种简写形式，相当于涉及 {{MathMLElement("mrow")}} 和 {{MathMLElement("mo")}} 元素的扩展形式。现在，建议改用等效形式。
+> [!NOTE]
+> 从历史上看，`` 元素被定义为编写围栏表达式的一种简写形式，相当于涉及 {{MathMLElement("mrow")}} 和 {{MathMLElement("mo")}} 元素的扩展形式。现在，建议改用等效形式。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/mfrac/index.md b/files/zh-cn/web/mathml/element/mfrac/index.md
index f286a11c8dcbb3..5071d8deed5eab 100644
--- a/files/zh-cn/web/mathml/element/mfrac/index.md
+++ b/files/zh-cn/web/mathml/element/mfrac/index.md
@@ -26,7 +26,8 @@ l10n:
 - `numalign` {{deprecated_inline}} {{Non-standard_Inline}}
   - : 分数上的分子对齐方式。可能的值包括：`left`、`center`（默认）和 `right`。
 
-> **备注：** 对于 `linethickness` 属性，一些浏览器可能还接受不推荐使用的值 `medium`、`thin` 和 `thick`（其确切解释留给实现者）或[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `linethickness` 属性，一些浏览器可能还接受不推荐使用的值 `medium`、`thin` 和 `thick`（其确切解释留给实现者）或[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mi/index.md b/files/zh-cn/web/mathml/element/mi/index.md
index d5f8966d02fa9e..7d51e7de0e1e90 100644
--- a/files/zh-cn/web/mathml/element/mi/index.md
+++ b/files/zh-cn/web/mathml/element/mi/index.md
@@ -13,8 +13,8 @@ l10n:
 
 要使用特定形式的字符，如粗体/斜体、衬线体、无衬线体、手写体/书法体、等宽体、双线体等，你应该使用适当的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)。
 
-> **备注：** 在之前的规范（MathML3）中，`mathvariant` 属性用于定义可以应用于数学字母数字符号的字符格式的逻辑类。
-> 相关的值现已被弃用，并预计在未来版本中从浏览器中删除。
+> [!NOTE]
+> 在之前的规范（MathML3）中，`mathvariant` 属性用于定义可以应用于数学字母数字符号的字符格式的逻辑类。相关的值现已被弃用，并预计在未来版本中从浏览器中删除。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/mmultiscripts/index.md b/files/zh-cn/web/mathml/element/mmultiscripts/index.md
index 617591949e81b2..0baab11a893623 100644
--- a/files/zh-cn/web/mathml/element/mmultiscripts/index.md
+++ b/files/zh-cn/web/mathml/element/mmultiscripts/index.md
@@ -37,7 +37,8 @@ MathML 使用以下语法，即一个基本表达式，后跟任意数量的后
 - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : 表示将上标基线向上移动的最小量的 {{cssxref("length-percentage")}}。
 
-> **备注：** 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mo/index.md b/files/zh-cn/web/mathml/element/mo/index.md
index 03b8bfdc883234..58a509d4afdd90 100644
--- a/files/zh-cn/web/mathml/element/mo/index.md
+++ b/files/zh-cn/web/mathml/element/mo/index.md
@@ -36,7 +36,8 @@ l10n:
 - `symmetric`
   - : 一个 [``](/zh-CN/docs/Web/MathML/Values#mathml_特定类型)，表示拉伸运算符是否应该与虚拟的数学轴（中心分数线）垂直对称。
 
-> **备注：** 对于 `lspace`、`maxsize`、`minsize` 和 `rspace` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `lspace`、`maxsize`、`minsize` 和 `rspace` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mspace/index.md b/files/zh-cn/web/mathml/element/mspace/index.md
index 125ac083b414bb..64c2c5c21fbf33 100644
--- a/files/zh-cn/web/mathml/element/mspace/index.md
+++ b/files/zh-cn/web/mathml/element/mspace/index.md
@@ -20,7 +20,8 @@ l10n:
 - `width`
   - : [``](/zh-CN/docs/Web/CSS/length-percentage) 值，表示空白的宽度。
 
-> **备注：** 对于 `depth`、`height`、`width` 属性，一些浏览器可能也接受[旧版 MathML 长度值](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `depth`、`height`、`width` 属性，一些浏览器可能也接受[旧版 MathML 长度值](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mstyle/index.md b/files/zh-cn/web/mathml/element/mstyle/index.md
index a35808ccce82b9..ef4d56c88456db 100644
--- a/files/zh-cn/web/mathml/element/mstyle/index.md
+++ b/files/zh-cn/web/mathml/element/mstyle/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **``** [MathML](/zh-CN/docs/Web/MathML) 元素用于更改其子元素的样式。
 
-> **备注：** 从历史上看，该元素接受几乎所有的 MathML 属性，并用于覆盖其后代的默认属性值。后来，它被限制为仅包括在现有网页中使用的一些相关的样式属性。如今，这些样式属性是[所有 MathML 元素共有的](/zh-CN/docs/Web/MathML/Global_attributes)，因此 `` 实际上等同于一个 [``](/zh-CN/docs/Web/MathML/Element/mrow) 元素。然而，`` 可能仍然关系到浏览器之外的 MathML 实现的兼容性。
+> [!NOTE]
+> 从历史上看，该元素接受几乎所有的 MathML 属性，并用于覆盖其后代的默认属性值。后来，它被限制为仅包括在现有网页中使用的一些相关的样式属性。如今，这些样式属性是[所有 MathML 元素共有的](/zh-CN/docs/Web/MathML/Global_attributes)，因此 `` 实际上等同于一个 [``](/zh-CN/docs/Web/MathML/Element/mrow) 元素。然而，`` 可能仍然关系到浏览器之外的 MathML 实现的兼容性。
 
 ## 属性
 
diff --git a/files/zh-cn/web/mathml/element/msub/index.md b/files/zh-cn/web/mathml/element/msub/index.md
index efdd305ed16cf0..c0e0736db0ea6e 100644
--- a/files/zh-cn/web/mathml/element/msub/index.md
+++ b/files/zh-cn/web/mathml/element/msub/index.md
@@ -18,7 +18,8 @@ l10n:
 - `subscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : {{cssxref("length-percentage")}} 值，表示下标基线向下移动的最小距离。
 
-> **备注：** 对于 `subscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `subscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/msubsup/index.md b/files/zh-cn/web/mathml/element/msubsup/index.md
index aee94fa9909f07..44a3d338ad37d3 100644
--- a/files/zh-cn/web/mathml/element/msubsup/index.md
+++ b/files/zh-cn/web/mathml/element/msubsup/index.md
@@ -20,7 +20,8 @@ l10n:
 - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : {{cssxref("length-percentage")}} 值，表示上标基线向上移动的最小距离。
 
-> **备注：** 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/msup/index.md b/files/zh-cn/web/mathml/element/msup/index.md
index 17f8d67ac23572..61234dfb7b7271 100644
--- a/files/zh-cn/web/mathml/element/msup/index.md
+++ b/files/zh-cn/web/mathml/element/msup/index.md
@@ -18,7 +18,8 @@ l10n:
 - `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
   - : {{cssxref("length-percentage")}} 值，表示上标基线向上移动的最小距离。
 
-> **备注：** 对于 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `superscriptshift` 属性，一些浏览器可能也会接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/mtable/index.md b/files/zh-cn/web/mathml/element/mtable/index.md
index 47a40f8785258c..4522156ad9ea3c 100644
--- a/files/zh-cn/web/mathml/element/mtable/index.md
+++ b/files/zh-cn/web/mathml/element/mtable/index.md
@@ -45,7 +45,8 @@ l10n:
 - `width` {{Non-standard_Inline}}
   - : 一个用于指定整个表格的宽度的 {{cssxref("length-percentage")}}。
 
-> **备注：** 对于 `width` 属性，某些浏览器还可能接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 对于 `width` 属性，某些浏览器还可能接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 示例
 
diff --git a/files/zh-cn/web/mathml/element/semantics/index.md b/files/zh-cn/web/mathml/element/semantics/index.md
index 953f0d72d90919..c527903c1f1309 100644
--- a/files/zh-cn/web/mathml/element/semantics/index.md
+++ b/files/zh-cn/web/mathml/element/semantics/index.md
@@ -14,7 +14,8 @@ l10n:
 
 默认情况下，`` 元素的第一个子元素会被渲染，而其他子元素的 [display](/zh-CN/docs/Web/CSS/display) 属性会被设置为 `none`。
 
-> **备注：** 旧版 MathML 规范允许渲染器根据可用的注释来决定默认呈现方式。以下规则用于确定可见子元素，且已在某些浏览器中实现。请参阅 [MathML 4](https://w3c.github.io/mathml/) 以了解表现（Presentation）MathML 和内容（Content）MathML 之间的区别。
+> [!NOTE]
+> 旧版 MathML 规范允许渲染器根据可用的注释来决定默认呈现方式。以下规则用于确定可见子元素，且已在某些浏览器中实现。请参阅 [MathML 4](https://w3c.github.io/mathml/) 以了解表现（Presentation）MathML 和内容（Content）MathML 之间的区别。
 >
 > - 如果没有其他规则适用：默认情况下只渲染第一个子元素，该元素应该是 表现 MathML。
 > - 如果第一个子元素是除了 `` 或 `` 之外的表现 MathML 元素，则渲染第一个子元素。
diff --git a/files/zh-cn/web/mathml/fonts/index.md b/files/zh-cn/web/mathml/fonts/index.md
index 8987bdd5678cf0..f6f32487648815 100644
--- a/files/zh-cn/web/mathml/fonts/index.md
+++ b/files/zh-cn/web/mathml/fonts/index.md
@@ -24,7 +24,8 @@ l10n:
 5. 打开 `static_otf.zip` ZIP 压缩文件，然后进入 `static_otf` 目录。在那里的文件中，你将找到一个 `STIXTwoMath-Regular` 文件。
 6. 打开 `STIXTwoMath-Regular` 文件，然后点击**安装**按钮。如果需要，你也可以对目录中的其他字体文件执行相同操作。
 
-> **备注：** Windows 上默认安装了 _Cambria Math_ 字体，应该可以确保相对良好的 MathML 渲染效果。
+> [!NOTE]
+> Windows 上默认安装了 _Cambria Math_ 字体，应该可以确保相对良好的 MathML 渲染效果。
 
 ### macOS
 
@@ -34,7 +35,8 @@ l10n:
 2. 解压缩 ZIP 文件，进入 `latinmodern-math-1959` 目录，然后进入 `otf` 目录。你将找到一个 `latinmodern-math` 字体文件。
 3. 双击 `latinmodern-math` 字体文件，然后点击打开的窗口中的**安装字体**按钮。
 
-> **备注：** 如果你使用的是 macOS Ventura（版本 13）或更高版本，则已经预装 _STIX Two Math_，你可以跳过以下步骤。
+> [!NOTE]
+> 如果你使用的是 macOS Ventura（版本 13）或更高版本，则已经预装 _STIX Two Math_，你可以跳过以下步骤。
 
 按照以下步骤安装 _STIX Two Math_ 字体：
 
@@ -42,7 +44,8 @@ l10n:
 2. 打开 `static_otf.zip` ZIP 压缩文件，然后进入 `static_otf` 目录。在那里的文件中，你将找到一个 `STIXTwoMath-Regular.otf` 文件。
 3. 打开 `STIXTwoMath-Regular.otf` 文件，然后点击打开的窗口中的**安装字体**按钮。如果需要，你也可以对目录中的其他字体文件执行相同操作。
 
-> **备注：** 自 OS X Lion（版本 10.7）开始，已预安装了 _STIX_ 的废弃版本。虽然一些浏览器可以使用它，但强烈建议按照上述说明进行操作以实现最佳的数学渲染效果。
+> [!NOTE]
+> 自 OS X Lion（版本 10.7）开始，已预安装了 _STIX_ 的废弃版本。虽然一些浏览器可以使用它，但强烈建议按照上述说明进行操作以实现最佳的数学渲染效果。
 
 ### Linux
 
@@ -109,7 +112,8 @@ fc-cache -sf
 
 你必须使用 [MathML 字体插件](https://addons.mozilla.org/firefox/addon/mathml-fonts/)。
 
-> **备注：** Noto Sans Math 提供了良好的 Unicode 数学符号的覆盖，并且 [Google 计划添加数学布局特性的支持](https://github.com/notofonts/math/issues/14#issuecomment-1161414446)。
+> [!NOTE]
+> Noto Sans Math 提供了良好的 Unicode 数学符号的覆盖，并且 [Google 计划添加数学布局特性的支持](https://github.com/notofonts/math/issues/14#issuecomment-1161414446)。
 
 ### 其他系统
 
diff --git a/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md b/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md
index cb25f69f9efdeb..f197639768da3b 100644
--- a/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md
+++ b/files/zh-cn/web/mathml/global_attributes/mathbackground/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mathbackground`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[背景颜色](/zh-CN/docs/Web/CSS/background-color)。
 
-> **备注：** 尽可能使用 CSS 来设置 MathML 的样式。`mathbackground` 属性应仅在不支持 CSS 并且将被 CSS `background-color` 属性值覆盖的应用程序中使用。
+> [!NOTE]
+> 尽可能使用 CSS 来设置 MathML 的样式。`mathbackground` 属性应仅在不支持 CSS 并且将被 CSS `background-color` 属性值覆盖的应用程序中使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md b/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md
index 8d5dc3eddade74..d7e0cceefa47ec 100644
--- a/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md
+++ b/files/zh-cn/web/mathml/global_attributes/mathcolor/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mathbackground`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[颜色](/zh-CN/docs/Web/CSS/color)。
 
-> **备注：** 尽可能使用 CSS 来为 MathML 设置样式。`mathcolor` 属性应仅在不支持 CSS 并且将被 CSS `color` 属性值覆盖的应用程序中使用。
+> [!NOTE]
+> 尽可能使用 CSS 来为 MathML 设置样式。`mathcolor` 属性应仅在不支持 CSS 并且将被 CSS `color` 属性值覆盖的应用程序中使用。
 
 ## 语法
 
diff --git a/files/zh-cn/web/mathml/global_attributes/mathsize/index.md b/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
index 7b1866b7351032..3df9e1e84c92a2 100644
--- a/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
+++ b/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
@@ -9,7 +9,8 @@ l10n:
 
 **`mathsize`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[字体大小](/zh-CN/docs/Web/CSS/font-size)。
 
-> **备注：** 尽可能使用 CSS 对 MathML 进行样式设置。`mathsize` 属性只应包含在不支持 CSS 的应用程序中，并且如果设置的话，其将被 CSS `font-size` 属性值覆盖。
+> [!NOTE]
+> 尽可能使用 CSS 对 MathML 进行样式设置。`mathsize` 属性只应包含在不支持 CSS 的应用程序中，并且如果设置的话，其将被 CSS `font-size` 属性值覆盖。
 
 ## 语法
 
@@ -32,7 +33,8 @@ l10n:
 
   - : 一个正的 {{cssxref("<percentage>")}} 值，相对于父元素的字体大小。
 
-> **备注：** 一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+> [!NOTE]
+> 一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/mathml/index.md b/files/zh-cn/web/mathml/index.md
index 532dd3fd199f73..a0c9127e543c54 100644
--- a/files/zh-cn/web/mathml/index.md
+++ b/files/zh-cn/web/mathml/index.md
@@ -15,7 +15,8 @@ l10n:
 
 以下是有关 MathML 文档、示例和工具的链接。MDN 将 [MathML Core](https://w3c.github.io/mathml-core/) 用作参考规范，但由于不稳定的标准化历史，旧版 MathML 特性可能仍会出现在现有的实现和 Web 内容中。
 
-> **备注：** 强烈建议开发人员和作者切换到 MathML Core，或许依赖其他 Web 技术来满足缺失的用例。Math WG 正在维护一组 [MathML polyfill](https://github.com/mathml-refresh/mathml-polyfills) 以便促进这一过渡。
+> [!NOTE]
+> 强烈建议开发人员和作者切换到 MathML Core，或许依赖其他 Web 技术来满足缺失的用例。Math WG 正在维护一组 [MathML polyfill](https://github.com/mathml-refresh/mathml-polyfills) 以便促进这一过渡。
 
 ## MathML 参考文档
 
diff --git a/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index b16155878f6e1b..3b23a9d0c0195e 100644
--- a/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/zh-cn/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -13,7 +13,8 @@ slug: Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_
 
 ![带有播放、停止、音量和字幕的开启和关闭控制按钮的播放器。正在播放的视频显示了一个男人手持长矛状武器的场景，标题为“Esta hoja tiene pasado oscuro”](video-player-with-captions.png)
 
-> **备注：** 你可以[查看 Github 源码](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)，或者[浏览在线示例](https://iandevlin.github.io/mdn/video-player-with-captions/)。
+> [!NOTE]
+> 你可以[查看 Github 源码](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)，或者[浏览在线示例](https://iandevlin.github.io/mdn/video-player-with-captions/)。
 
 ## HTML 和视频字幕
 
@@ -298,7 +299,8 @@ WebVTT 的一个不太为人所知和支持的功能是通过 [CSS 扩展](https
 }
 ```
 
-> **备注：** 一些带有 ::cue 的提示语的样式目前在 Chrome、Opera 和 Safari 上可以使用，但在 Firefox 上还不行。
+> [!NOTE]
+> 一些带有 ::cue 的提示语的样式目前在 Chrome、Opera 和 Safari 上可以使用，但在 Firefox 上还不行。
 
 ## 浏览器兼容性
 
diff --git a/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md b/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
index 927ee7ed6dbf89..5295f445987295 100644
--- a/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
+++ b/files/zh-cn/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
@@ -103,7 +103,8 @@ window.onload = () => {
 
 ![一个简单的音频播放器，带有播放按钮、搜索栏和音量控制，下面有一系列代表时间范围的红色矩形。](bufferedtimeranges.png)
 
-> **备注：** 你可以查看 [JS Bin 上实时运行的时间范围代码](https://jsbin.com/memazaro/1/edit)。
+> [!NOTE]
+> 你可以查看 [JS Bin 上实时运行的时间范围代码](https://jsbin.com/memazaro/1/edit)。
 
 ## Seekable
 
@@ -213,7 +214,8 @@ window.onload = () => {
 
 ![一个简单的音频播放器，带有播放按钮、搜索栏和音量控制，以及控件下方的进度条，其中的绿色部分显示已播放的视频，还有一个浅灰色的部分表示已缓冲的部分。](bufferedprogress.png)
 
-> **备注：** 你可以查看 [JS Bin 上实时运行的缓冲代码](https://jsbin.com/badimipi/1/edit)。
+> [!NOTE]
+> 你可以查看 [JS Bin 上实时运行的缓冲代码](https://jsbin.com/badimipi/1/edit)。
 
 ## 关于 Played 的简短说明
 
diff --git a/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
index 4d0d1e137ce2bd..97b15bb47c302b 100644
--- a/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
+++ b/files/zh-cn/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
@@ -43,7 +43,8 @@ slug: Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video
 
 ### RTSP
 
-> **备注：** 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 [Firefox OS 1.3 支持 RTSP](https://www.mozilla.org/en-US/firefox/os/notes/1.3/)。
+> [!NOTE]
+> 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 [Firefox OS 1.3 支持 RTSP](https://www.mozilla.org/en-US/firefox/os/notes/1.3/)。
 >
 > 某些厂商实现了专有的传输协议，类似 RealNetworks 以及他们的真实数据传输 (RDT)。
 
@@ -51,7 +52,8 @@ slug: Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video
 
 RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。
 
-> **警告：** 虽然 {{ htmlelement("audio") }} 与 {{ htmlelement("video") }} 标签与协议无关，但是目前没有浏览器可以在无插件的情况下支持除了 HTTP 外的协议，尽管这种局面可能会有所转变，但除了 HTTP 以外的协议可能会被防火墙或代理服务器拦截。
+> [!WARNING]
+> 虽然 {{ htmlelement("audio") }} 与 {{ htmlelement("video") }} 标签与协议无关，但是目前没有浏览器可以在无插件的情况下支持除了 HTTP 外的协议，尽管这种局面可能会有所转变，但除了 HTTP 以外的协议可能会被防火墙或代理服务器拦截。
 
 ## 使用流式协议
 
@@ -71,19 +73,22 @@ RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。
 
 比如，[在卸载 MSE 解码器后，你可以通过 JavaScript 实现 MPEG-DASH](https://web.archive.org/web/20170504035455/https://msopentech.com/blog/2014/01/03/streaming_video_player/).
 
-> **备注：** 时移是在直播流发生后使用实时流的过程。
+> [!NOTE]
+> 时移是在直播流发生后使用实时流的过程。
 
 ## 视频流文件格式
 
 一些基于 HTTP 的实时流视频格式开始得到跨浏览器支持。
 
-> **备注：** 你可以通过 [设置自适应流媒体源](/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources) 找到在 web 中使用的 HLS 和 MPEG-DASH 的编码指南。
+> [!NOTE]
+> 你可以通过 [设置自适应流媒体源](/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources) 找到在 web 中使用的 HLS 和 MPEG-DASH 的编码指南。
 
 ### MPEG-DASH
 
 DASH 意即基于 HTTP 的动态自适应流，最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE)，这些扩展被[DASH.js](https://github.com/Dash-Industry-Forum/dash.js/)之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块，并且将它“添加”到 {{ htmlelement("video") }}元素正在播放的流中。正因如此，如果我们检测到网络缓慢，我们可以从下一段开始请求低质量（较小）的数据块。这种技术也允许添加广告片段到流中。
 
-> **备注：** 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
+> [!NOTE]
+> 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
 
 ### HLS
 
@@ -129,13 +134,15 @@ Opus 是一个无版权的开放格式，针对不同类型文件使用不同的
 
 目前，Opus 被桌面端和移动端的 Firefox 以及桌面端的 Chrome 和 Opera 浏览器所支持。
 
-> **备注：** 对于浏览器端实现 WebRTC 功能来说，[Opus 是必须要用到的格式](https://datatracker.ietf.org/doc/html/draft-ietf-rtcweb-audio-05)。
+> [!NOTE]
+> 对于浏览器端实现 WebRTC 功能来说，[Opus 是必须要用到的格式](https://datatracker.ietf.org/doc/html/draft-ietf-rtcweb-audio-05)。
 
 ### MP3, AAC, Ogg Vorbis
 
 大部分通用的音频格式能够通过特殊的服务端技术进行传输。
 
-> **备注：** 相对于视频来说，音频没有键帧，可能更容易通过非流式格式来传输。
+> [!NOTE]
+> 相对于视频来说，音频没有键帧，可能更容易通过非流式格式来传输。
 
 ## 服务端流式技术
 
@@ -159,7 +166,8 @@ GStreamer 的插件如 [souphttpclientsink](https://gstreamer.freedesktop.org/da
 
 [Icecast](https://www.icecast.org/) 服务是一种针对流式媒体的开源技术。它由 [Xiph.org Foundation](https://www.xiph.org/) 进行维护，通过 SHOUTcast 协议来传输 Ogg Vorbis/Theora 以及 MP3 和 AAC 格式。
 
-> **备注：** SHOUTcast 和 Icecast 是最流行的已确立的技术之一，但也有 [更多流媒体系统可用](https://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers).
+> [!NOTE]
+> SHOUTcast 和 Icecast 是最流行的已确立的技术之一，但也有 [更多流媒体系统可用](https://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers).
 
 ### 流式服务
 
diff --git a/files/zh-cn/web/media/audio_and_video_manipulation/index.md b/files/zh-cn/web/media/audio_and_video_manipulation/index.md
index 66e098a4f9282b..00605ebf78f023 100644
--- a/files/zh-cn/web/media/audio_and_video_manipulation/index.md
+++ b/files/zh-cn/web/media/audio_and_video_manipulation/index.md
@@ -115,7 +115,8 @@ processor.doLoad();
 
 你还可通过在源 `
    
   
    
 
-> **备注：** 与 WebP 和 AVIF 等较新的格式相比，PNG、JPEG 和 GIF 等较老的格式性能较差，但却能获得更广泛的“历史”浏览器支持。较新的图像格式越来越受欢迎，因为不支持这些格式的浏览器变得越来越无关紧要（即市场份额几乎为零）。
+> [!NOTE]
+> 与 WebP 和 AVIF 等较新的格式相比，PNG、JPEG 和 GIF 等较老的格式性能较差，但却能获得更广泛的“历史”浏览器支持。较新的图像格式越来越受欢迎，因为不支持这些格式的浏览器变得越来越无关紧要（即市场份额几乎为零）。
 
 下面列出了 web 上出现的图像格式，但 web 内容应避免使用这些格式（通常是因为这些格式没有广泛的浏览器支持，或者有更好的替代格式）。
 
@@ -146,9 +147,11 @@ slug: Web/Media/Formats/Image_types
   
 
 
-> **备注：** 每种图像格式的缩写可链接到有关该格式的较长描述、其功能和详细的浏览器兼容性信息（包括哪些版本引入了支持以及后来可能引入的特定特殊功能）。
+> [!NOTE]
+> 每种图像格式的缩写可链接到有关该格式的较长描述、其功能和详细的浏览器兼容性信息（包括哪些版本引入了支持以及后来可能引入的特定特殊功能）。
 
-> **备注：** Safari 11.1 新增了使用视频格式替代 gif 动画的功能，而其他浏览器没有添加这方面的支持。详见 [Chromium bug](https://crbug.com/791658) 和 [Firefox bug](https://bugzil.la/895131) 以了解更多信息。
+> [!NOTE]
+> Safari 11.1 新增了使用视频格式替代 gif 动画的功能，而其他浏览器没有添加这方面的支持。详见 [Chromium bug](https://crbug.com/791658) 和 [Firefox bug](https://bugzil.la/895131) 以了解更多信息。
 
 ## 图像文件类型详介
 
@@ -258,7 +261,8 @@ APNG 适用于无需与其他活动或音轨同步的基本动画，如进度指
 
 AV1 图像文件格式（AVIF）是一种功能强大、开源、免版税的文件格式，它在高效图像文件格式（HEIF）容器中对 AV1 比特流进行编码。
 
-> **备注：** AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。
+> [!NOTE]
+> AVIF 有可能成为在 web 内容中共享图像的“下一件大事”。它具有最先进的特性和性能，却没有阻碍同类替代产品发展的复杂许可和专利使用费的束缚。
 
 AV1 是一种编码格式，最初设计用于在互联网上传输视频。该格式得益于近年来视频编码技术的长足进步，并有可能受益于对硬件渲染的相关支持。不过，在某些情况下它也有缺点，因为视频和图像编码有一些不同的要求。
 
@@ -351,7 +355,8 @@ Chrome、Opera、Safari 和 Firefox 支持 AVIF（Firefox 支持静态图像，
 
 **BMP**（**位图图像**）文件类型在 Windows 计算机上最为常见，一般只用于 web 应用程序和内容中的特殊情况。
 
-> **警告：** 网站内容通常应避免使用 BMP 文件。最常见的 BMP 文件格式将数据表示为未压缩的光栅图像，与 png 或 jpg 图像类型相比，文件大小较大。目前有更高效的 BMP 格式，但并未广泛使用，web 浏览器也很少支持。
+> [!WARNING]
+> 网站内容通常应避免使用 BMP 文件。最常见的 BMP 文件格式将数据表示为未压缩的光栅图像，与 png 或 jpg 图像类型相比，文件大小较大。目前有更高效的 BMP 格式，但并未广泛使用，web 浏览器也很少支持。
 
 BMP 理论上支持多种内部数据表示。最简单也是最常用的 BMP 文件形式是一种未压缩的光栅图像，每个像素占 3 个字节，分别代表其红、绿、蓝三部分，每行用 `0x00` 字节填充，宽度为 4 字节的倍数。
 
@@ -555,7 +560,8 @@ ICO（Microsoft Windows 图标）文件格式是微软为 Windows 系统的桌
 
 一个 ICO 文件可以包含多个图标，文件开头有一个目录，列出每个图标的详细信息。目录之后是图标的数据。每个图标的数据既可以是不带文件头的 [BMP](#bmp（位图文件）) 图像，也可以是完整的 [PNG](#png（便携式网络图形）) 图像（包括文件头）。如果使用 ICO 文件，则应使用 BMP 格式，因为直到 Windows Vista 才添加了对 ICO 文件内的 PNG 的支持，而且这种支持可能并不完善。
 
-> **警告：** ICO 文件*不应*用于网页内容。此外，如[为不同的使用环境提供图标](/zh-CN/docs/Web/HTML/Element/link#提供用于不同用法上下文的图标)所述，它们作为网站图标的使用已经减少，转而使用 PNG 文件和 {{HTMLElement("link")}} 元素。
+> [!WARNING]
+> ICO 文件*不应*用于网页内容。此外，如[为不同的使用环境提供图标](/zh-CN/docs/Web/HTML/Element/link#提供用于不同用法上下文的图标)所述，它们作为网站图标的使用已经减少，转而使用 PNG 文件和 {{HTMLElement("link")}} 元素。
 
 
@@ -1255,7 +1261,8 @@ WebP 目前已在主要网络浏览器的最新版本中获得广泛支持，但
   
    
   
 
    
 
-> **备注：** 在 macOS 版 Safari 上，WebP 支持取决于 Safari 和 macOS 的版本。你需要 Safari 14 或更高版本，以及 macOS Big Sur (11) 或更高版本。
+> [!NOTE]
+> 在 macOS 版 Safari 上，WebP 支持取决于 Safari 和 macOS 的版本。你需要 Safari 14 或更高版本，以及 macOS Big Sur (11) 或更高版本。
 
 ### XBM（X Window 系统位图文件）
 
diff --git a/files/zh-cn/web/media/formats/video_codecs/index.md b/files/zh-cn/web/media/formats/video_codecs/index.md
index 8f1856d7a76939..7a0311aec99e88 100644
--- a/files/zh-cn/web/media/formats/video_codecs/index.md
+++ b/files/zh-cn/web/media/formats/video_codecs/index.md
@@ -1745,7 +1745,8 @@ VP9 被浏览器广泛支持，并且编解码器的硬件实现相当普遍。V
    
    ```
 
-> **备注：** 无论 {{HTMLElement("video")}} 元素中是否有任何 {{HTMLElement("source")}} 元素，{{HTMLElement("video")}} 元素都是需要闭合的 `` 标签。
+> [!NOTE]
+> 无论 {{HTMLElement("video")}} 元素中是否有任何 {{HTMLElement("source")}} 元素，{{HTMLElement("video")}} 元素都是需要闭合的 `` 标签。
 
 ### 高质量视频演示的建议
 
diff --git a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
index 158e0877c3730e..1543c23bd55ab2 100644
--- a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
+++ b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
@@ -20,7 +20,8 @@ CSS 中的 transition 和 animation 都可以用于编写动画，它们都有
 
 {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("setTimeout()")}} 或 {{domxref("setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。
 
-> **备注：** 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。
+> [!NOTE]
+> 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。
 
 更多细节请阅读 [animating with JavaScript from setinterval to requestAnimationFrame](https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/).
 
@@ -175,7 +176,8 @@ function animate(time) {
 
 激活之后，再次运行上面的例子。可以看到 CSS 动画的帧速率现在高多了。
 
-> **备注：** 在 Nightly 和 Developer 版本，你可能看到 OMTA 是默认激活的，所以你需要反过来测试（先测试激活 OMTA 的情况，然后是没有激活的情况）。
+> [!NOTE]
+> 在 Nightly 和 Developer 版本，你可能看到 OMTA 是默认激活的，所以你需要反过来测试（先测试激活 OMTA 的情况，然后是没有激活的情况）。
 
 ## 总结
 
diff --git a/files/zh-cn/web/performance/dns-prefetch/index.md b/files/zh-cn/web/performance/dns-prefetch/index.md
index 4e36e573c680ae..a484e3e056a5c5 100644
--- a/files/zh-cn/web/performance/dns-prefetch/index.md
+++ b/files/zh-cn/web/performance/dns-prefetch/index.md
@@ -56,7 +56,8 @@ Link: ; rel=dns-prefetch
 
 ```
 
-> **备注：** 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。`preconnect` 提示最好仅用于最关键的连接。对于其他的连接，只需使用 `` 即可节省第一步——DNS 查询——的时间。
+> [!NOTE]
+> 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。`preconnect` 提示最好仅用于最关键的连接。对于其他的连接，只需使用 `` 即可节省第一步——DNS 查询——的时间。
 
 配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到 dns-prefetch 来获得更多好处。由于这是 HTML 特性，因此容错性很强。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则网站不会中断，只是不会获得它提供的好处。
 
diff --git a/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md b/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md
index bfcd13c801dc0f..54ed519aec91ba 100644
--- a/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md
+++ b/files/zh-cn/web/privacy/privacy_sandbox/partitioned_cookies/index.md
@@ -32,7 +32,8 @@ l10n:
 Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
 ```
 
-> **备注：** 分区 cookie 必须与 `Secure` 一同设置。此外，建议在设置分区 cookie 时使用 `__Host` 前缀，以将它们绑定到主机名而不是可注册的域名。
+> [!NOTE]
+> 分区 cookie 必须与 `Secure` 一同设置。此外，建议在设置分区 cookie 时使用 `__Host` 前缀，以将它们绑定到主机名而不是可注册的域名。
 
 如果设置了 `Partitioned`，cookie 将使用两个键进行存储，即主机键和一个新的**分区键**。分区键基于向设置 cookie 的 URL 端点发出请求时浏览器访问的顶级 URL 的方案（scheme）和 {{Glossary("eTLD", "eTLD +1")}}。
 
@@ -42,7 +43,8 @@ Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
 2. 存储 cookie 的键现在为 `{("https://site-a.example"), ("3rd-party.example")}`。
 3. 当用户访问 `https://site-b.example`，该站点也嵌入了 `https://3rd-party.example`，因为分区键不一致，所以新嵌入的实例不再能够访问前一页面设置的 cookie。
 
-> **备注：** CHIPS 类似于 Firefox 实现的[状态分区机制](/zh-CN/docs/Web/Privacy/State_Partitioning)。不同之处在于，状态分区将 cookie 存储和检索分区到每个顶级站点的单独的 cookie 存储空间中，而没有在需要时可以选择启用第三方 cookie 的机制。随着浏览器开始逐步淘汰第三方 cookie 的使用，当开发人员开始处理此更改时，仍然需要允许第三方 cookie 的有效和非跟踪的使用。
+> [!NOTE]
+> CHIPS 类似于 Firefox 实现的[状态分区机制](/zh-CN/docs/Web/Privacy/State_Partitioning)。不同之处在于，状态分区将 cookie 存储和检索分区到每个顶级站点的单独的 cookie 存储空间中，而没有在需要时可以选择启用第三方 cookie 的机制。随着浏览器开始逐步淘汰第三方 cookie 的使用，当开发人员开始处理此更改时，仍然需要允许第三方 cookie 的有效和非跟踪的使用。
 
 ## 有效的第三方嵌入场景
 
diff --git a/files/zh-cn/web/progressive_web_apps/guides/caching/index.md b/files/zh-cn/web/progressive_web_apps/guides/caching/index.md
index 1b8f59424d4dec..2fb2969e077ced 100644
--- a/files/zh-cn/web/progressive_web_apps/guides/caching/index.md
+++ b/files/zh-cn/web/progressive_web_apps/guides/caching/index.md
@@ -46,7 +46,8 @@ PWA 可以在任何时候缓存资源，但在实践中，大多数 PWA 选择
 
 - **在 service worker 的 `install` 事件处理程序中（预缓存）**：当 service worker 被安装时，浏览器会在 service worker 的全局作用域中触发一个名为 {{domxref("ServiceWorkerGlobalScope.install_event", "install")}} 的事件。此时，service worker 可以*预缓存*资源，从网络获取它们并将它们存储在缓存中。
 
-  > **备注：** service worker 的安装时间与 PWA 的安装时间不同。一个 service worker 的 `install` 事件会在 service worker 被下载和执行后立即触发，这通常会发生在用户首次访问你的网站时。
+  > [!NOTE]
+  > service worker 的安装时间与 PWA 的安装时间不同。一个 service worker 的 `install` 事件会在 service worker 被下载和执行后立即触发，这通常会发生在用户首次访问你的网站时。
   >
   > 即使用户从未将你的网站安装为 PWA，其 service worker 也会被安装和激活。
 
diff --git a/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md b/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md
index f7f7d3cc6e7be5..0336d8f4f67905 100644
--- a/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md
+++ b/files/zh-cn/web/progressive_web_apps/guides/offline_and_background_operation/index.md
@@ -116,7 +116,8 @@ self.addEventListener("fetch", (event) => {
 
 这意味着在许多情况下，即使网络连接不稳定，Web 应用程序也能正常运行。从主应用程序代码的角度来看，这完全是透明的：应用程序只需发出网络请求并获取响应。此外，由于 service worker 在单独的线程中运行，主应用程序代码可以保持对用户输入的响应，同时获取和缓存资源。
 
-> **备注：** 这里描述的策略只是 service worker 实现缓存的一种方式。具体来说，在缓存优先策略中，我们先从缓存中查找响应，然后再尝试从网络中获取，这意味着我们更有可能返回一个快速的响应而无需承担网络成本，但也更有可能返回一个过期的响应。
+> [!NOTE]
+> 这里描述的策略只是 service worker 实现缓存的一种方式。具体来说，在缓存优先策略中，我们先从缓存中查找响应，然后再尝试从网络中获取，这意味着我们更有可能返回一个快速的响应而无需承担网络成本，但也更有可能返回一个过期的响应。
 >
 > 另一种策略是*网络优先*策略，即首先尝试从服务器获取资源，如果设备离线，则回退到缓存。
 >
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 ee9503dc41147f..7986b33d0df97a 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
@@ -21,7 +21,8 @@ Service worker 以及 PWA，都[被限制在安全上下文中](/zh-CN/docs/Web/
 
 我们正在使用 `file://` 协议查看我们的页面。这适用于我们代码库的当前状态，并且在我们[添加 JavaScript 功能](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality)之后将继续适用。然而，就像许多其他 API 一样，清单文件和 service worker（都是 PWA 的要求）需要安全连接。PWA 需要通过基于 `https` 的 web 服务器或使用 `localhost`、`127.0.0.1`（无论是否带有端口号）的本地开发环境来提供。如果我们使用 `files://` 协议查看我们完成的应用，我们的[清单文件](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file)将被忽略，任何我们添加的 [service worker](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) 都将失败。
 
-> **备注：** 通过 `https` 提供你的应用不仅对 PWA 有益，而且对所有网站有益，因为它确保了在你的 web 服务器和用户的浏览器之间传输的信息是端到端加密的。许多 [Web API 需要安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts)。即使你没有创建可安装的 PWA，当你向任何 web 应用添加特性时，你都可能会遇到需要安全上下文的情况。
+> [!NOTE]
+> 通过 `https` 提供你的应用不仅对 PWA 有益，而且对所有网站有益，因为它确保了在你的 web 服务器和用户的浏览器之间传输的信息是端到端加密的。许多 [Web API 需要安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts)。即使你没有创建可安装的 PWA，当你向任何 web 应用添加特性时，你都可能会遇到需要安全上下文的情况。
 
 我们需要一个本地开发环境来完成教程。[使 PWA 可安装](/zh-CN/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)的一部分是安全服务器。文件需要在 web 上通过安全连接提供，以获取 PWA 提供的好处，并将我们的应用程序作为 PWA 分发。
 
@@ -63,7 +64,8 @@ ws --https
 
 在上面的命令中，你可能需要在 install 前加上 `sudo`。
 
-> **备注：** 如果你正在追求隐私，请意识到你正在自己构建此 PWA，它可以从自己的开发环境中安装在自己的机器上，而无需访问互联网。这个应用程序没有跟踪。这是一个尽可能私密的应用程序。
+> [!NOTE]
+> 如果你正在追求隐私，请意识到你正在自己构建此 PWA，它可以从自己的开发环境中安装在自己的机器上，而无需访问互联网。这个应用程序没有跟踪。这是一个尽可能私密的应用程序。
 
 ## 安全的外部服务器
 
diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
index e1f94952bc27d1..a85d5889a61ac0 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -30,7 +30,8 @@ slug: Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
 
 ```
 
-> **备注：** 这类清单文件有一些曾经常被使用的扩展名：`manifest.webapp` 在 Firefox OS 应用清单中很流行，而许多人使用 `manifest.json` 作为网页清单（因为内容是 JSON 格式的）。但是，`.webmanifest` 扩展名是在 [W3C 清单规范](https://w3c.github.io/manifest/)中显式指定的，所以这里我们使用这个扩展名。
+> [!NOTE]
+> 这类清单文件有一些曾经常被使用的扩展名：`manifest.webapp` 在 Firefox OS 应用清单中很流行，而许多人使用 `manifest.json` 作为网页清单（因为内容是 JSON 格式的）。但是，`.webmanifest` 扩展名是在 [W3C 清单规范](https://w3c.github.io/manifest/)中显式指定的，所以这里我们使用这个扩展名。
 
 文件的内容是这个样子的：
 
diff --git a/files/zh-cn/web/security/practical_implementation_guides/index.md b/files/zh-cn/web/security/practical_implementation_guides/index.md
index 05e68968c69b21..95efef637237a5 100644
--- a/files/zh-cn/web/security/practical_implementation_guides/index.md
+++ b/files/zh-cn/web/security/practical_implementation_guides/index.md
@@ -5,7 +5,8 @@ slug: Web/Security/Practical_implementation_guides
 
 你可以采取一些措施来确保你的网站安全。本文提供了各种建议，以及提供更多有用信息的其他文章的链接。
 
-> **备注：** 本篇文章仍未撰写完毕，遵循它的指引不一定能保证你的站点完全安全。
+> [!NOTE]
+> 本篇文章仍未撰写完毕，遵循它的指引不一定能保证你的站点完全安全。
 
 ## 用户信息安全
 
diff --git a/files/zh-cn/web/security/same-origin_policy/index.md b/files/zh-cn/web/security/same-origin_policy/index.md
index 1af5638b099388..2e3cba947e3c8c 100644
--- a/files/zh-cn/web/security/same-origin_policy/index.md
+++ b/files/zh-cn/web/security/same-origin_policy/index.md
@@ -39,7 +39,8 @@ slug: Web/Security/Same-origin_policy
 
 ## 源的更改
 
-> **警告：** 这里描述的方法（使用 {{domxref("document.domain")}} setter）已被弃用，因为它破坏了同源策略所提供的安全保护，并使浏览器中的源模型复杂化，导致互操作性问题和安全漏洞。
+> [!WARNING]
+> 这里描述的方法（使用 {{domxref("document.domain")}} setter）已被弃用，因为它破坏了同源策略所提供的安全保护，并使浏览器中的源模型复杂化，导致互操作性问题和安全漏洞。
 
 满足某些限制条件的情况下，页面是可以修改它的源。脚本可以将 {{domxref("document.domain")}} 的值设置为其当前域或其当前域的父域。如果将其设置为其当前域的父域，则这个较短的父域将用于后续源检查。
 
@@ -55,7 +56,8 @@ document.domain = "company.com";
 
 该机制有一些局限性。如果启用了 [`document-domain`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy/document-domain) [`Permissions-Policy`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy)，或该文档在沙箱 [`
+
    
+```
+
+```css hidden
+.resizer {
+  display: flex;
+  margin: 1rem;
+  padding: 0;
+  resize: both;
+  overflow: hidden;
+  border: 5px dotted red;
+  height: 400px;
+}
+.resizer > .resized {
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+```
+
+{{EmbedLiveSample('using_dynamic_viewport_lengths', '100%', 500)}}
+
+iframe の寸法を変更するには、右下の赤い点線の枠のサイズを変更してみてください。
 
 ## 属性
 
 - {{SVGAttr("baseProfile")}} {{deprecated_inline}}
-  - : 文書が要求する最小の SVG 言語プロファイル
-    _値の型_: **\** ; _初期値_: none; _Animatable_: **no**
-- {{SVGAttr("contentScriptType")}} {{deprecated_inline}}
-  - : SVG フラグメントで用いられる初期記述言語
-    _値の型_: **\** ; _初期値_: `application/ecmascript`; _アニメーション可否_: **no**
-- {{SVGAttr("contentStyleType")}} {{deprecated_inline}}
-  - : SVG フラグメントで用いられる初期のスタイルシート言語
-    _値の型_: **\** ; _初期値_: `text/css`; _アニメーション可否_: **no**
+  - : この文書が要求する最小の SVG 言語プロファイルです。
+    _値の型_: **\**、_既定値_: なし、_アニメーション_: **不可**
 - {{SVGAttr("height")}}
-  - : 矩形ビューポートで表示される高さ (それ自身の座標系の高さではありません)
-    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#Length)|[**\**](/ja/docs/Web/SVG/Content_type#Percentage) ; _初期値_: `auto`; _アニメーション可否_: **yes**
+  - : 矩形ビューポートで表示される高さです。（それ自身の座標系の高さではありません。）
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)、_既定値_: `auto`、_アニメーション_: **可**
 - {{SVGAttr("preserveAspectRatio")}}
-  - : 異なるアスペクト比での表示時に、`svg`フラグメントがどう変形されるか
-    _値の型_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _初期値_: `xMidYMid meet`; _アニメーション可否_: **yes**
+  - : `svg` フラグメントが、異なる{{glossary("aspect ratio", "アスペクト比")}}での表示時にどう変形されるか。
+    _値の型_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)?、_既定値_: `xMidYMid meet`、_アニメーション_: **可**
 - {{SVGAttr("version")}} {{deprecated_inline}}
-  - : 要素内の内容にどのバージョンの SVG が用いられるか
-    _値の型_: **[\](/ja/docs/Web/SVG/Content_type#Number)** ; _初期値_: none; _アニメーション可否_: **no**
+  - : 要素の内部の内容にどのバージョンの SVG が用いられるか。
+    _値の型_: **[\](/ja/docs/Web/SVG/Content_type#number)**、_既定値_: none、_アニメーション_: **不可**
 - {{SVGAttr("viewBox")}}
   - : The SVG viewport coordinates for the current SVG fragment.
-    _値の型_: **[\](/ja/docs/Web/SVG/Content_type#List-of-Ts)** ; _初期値_: none; _アニメーション可否_: **yes**
+    _値の型_: **[\](/ja/docs/Web/SVG/Content_type#list-of-ts)。**、_既定値_: none、_アニメーション_: **可**
 - {{SVGAttr("width")}}
-  - : 矩形ビューポートで表示される幅 (それ自身の座標系の幅ではありません)
-    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#Length)|[**\**](/ja/docs/Web/SVG/Content_type#Percentage) ; _初期値_: `auto`; _アニメーション可否_: **yes**
+  - : 矩形ビューポートで表示される幅。（それ自身の座標系の幅ではありません。）
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)、_既定値_: `auto`、_アニメーション_: **可**
 - {{SVGAttr("x")}}
-  - : SVG コンテナが表示される x 座標。最も外側の`SVG`要素では効果ありません。
-    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#Length)|[**\**](/ja/docs/Web/SVG/Content_type#Percentage) ; _初期値_: `0`; _アニメーション可否_: **yes**
+  - : SVG コンテナーが表示される x 座標。最も外側の `svg` 要素では効果ありません。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)、_既定値_: `0`、_アニメーション_: **可**
 - {{SVGAttr("y")}}
-  - : SVG コンテナが表示される y 座標。最も外側の`SVG`要素では効果ありません。
-    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#Length)|[**\**](/ja/docs/Web/SVG/Content_type#Percentage) ; _初期値_: `0`; _Animatable_: **yes**
+  - : SVG コンテナーが表示される y 座標。最も外側の `svg` 要素では効果ありません。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)、_既定値_: `0`; _Animatable_: **yes**
 
 > [!NOTE]
-> SVG2 で開始する場合には、`x`, `y`, `width`, `height` は、*ジオメトリプロパティ*です。これは、これらの属性が CSS プロパティとして用いられることを意味します。
-
-### グローバル属性
-
-- [コア属性](/ja/docs/Web/SVG/Attribute/Core)
-  - : 特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-- [スタイル属性](/ja/docs/Web/SVG/Attribute/Styling)
-  - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
-- [条件処理属性](/ja/docs/Web/SVG/Attribute/Conditional_Processing)
-  - : 特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-- イベント属性
-  - : [グローバルイベント属性](/ja/docs/Web/SVG/Attribute/Events#グローバルイベント属性), [グラフィックイベント属性](/ja/docs/Web/SVG/Attribute/Events#グラフィックイベント属性), [文書イベント属性](/ja/docs/Web/SVG/Attribute/Events#文書イベント属性), [文書要素イベント属性](/ja/docs/Web/SVG/Attribute/Events#文書要素イベント属性)
-- [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation)
-  - : 特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-- Aria 属性
-  - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`
+> SVG2 から、`x`, `y`, `width`, `height` は、 *幾何プロパティ*です。これは、これらの属性が CSS プロパティとして用いられることを意味します。
 
-## 使用上の注意
+## 使用コンテキスト
 
 {{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザの実装状況
+## ブラウザーの互換性
 
 {{Compat}}

From 122aae226ca32527e93da323f78041039a1e6abc Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 6 Aug 2024 15:13:29 +0900
Subject: [PATCH 488/623] =?UTF-8?q?=E7=94=A8=E8=AA=9E=E3=81=AE=E7=B5=B1?=
 =?UTF-8?q?=E4=B8=80:=20=E3=82=B8=E3=82=AA=E3=83=A1=E3=83=88=E3=83=AA?=
 =?UTF-8?q?=E2=80=95=E3=83=97=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3=E2=86=92?=
 =?UTF-8?q?=E5=B9=BE=E4=BD=95=E3=83=97=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/svg/attribute/patternunits/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/svg/attribute/patternunits/index.md b/files/ja/web/svg/attribute/patternunits/index.md
index 5b3d317fbb9d91..a5bfd6a286ea4f 100644
--- a/files/ja/web/svg/attribute/patternunits/index.md
+++ b/files/ja/web/svg/attribute/patternunits/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{SVGRef}}
 
-**`patternUnits`** 属性は、 {{ SVGElement("pattern") }} 要素のジオメトリープロパティにどの座標系を使用するかを示します。
+**`patternUnits`** 属性は、 {{ SVGElement("pattern") }} 要素の幾何プロパティにどの座標系を使用するかを示します。
 
 この属性は以下の SVG 要素で使用することができます。
 
@@ -25,7 +25,7 @@ svg {
 
 ```html
 
-  
+  
   
   
 
-  
+  
   
   
@@ -79,9 +79,9 @@ svg {
 
 
 - `userSpaceOnUse`
-  - : この値は、ジオメトリープロパティのすべての座標が、パターンが適用されたときに定義されたユーザー座標系を参照することを示します。
+  - : この値は、幾何プロパティのすべての座標が、パターンが適用されたときに定義されたユーザー座標系を参照することを示します。
 - `objectBoundingBox`
-  - : この値は、ジオメトリープロパティのすべての座標が、パターンが適用される要素のバウンディングボックスの分数またはパーセント値を表します。バウンディングボックスは {{ SVGElement("pattern") }} のコンテンツが "`0 0 1 1`" {{ SVGAttr("viewBox") }} にバインドされているのと同じと考えることができます。
+  - : この値は、幾何プロパティのすべての座標が、パターンが適用される要素のバウンディングボックスの分数またはパーセント値を表します。バウンディングボックスは {{ SVGElement("pattern") }} のコンテンツが "`0 0 1 1`" {{ SVGAttr("viewBox") }} にバインドされているのと同じと考えることができます。
 
 ## 仕様書
 

From 715ca400a422e95933f4f9c7082ec74c4c1c4423 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 6 Aug 2024 15:16:18 +0900
Subject: [PATCH 489/623] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/contain/index.md | 248 ++++++++++++++++++++----------
 1 file changed, 171 insertions(+), 77 deletions(-)

diff --git a/files/ja/web/css/contain/index.md b/files/ja/web/css/contain/index.md
index 405d987a8b6857..5eb4ba959ca8d5 100644
--- a/files/ja/web/css/contain/index.md
+++ b/files/ja/web/css/contain/index.md
@@ -1,22 +1,30 @@
 ---
 title: contain
 slug: Web/CSS/contain
+l10n:
+  sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5
 ---
 
 {{CSSRef}}
 
-**`contain`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から*独立している*ことを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。
+**`contain`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素とそのコンテンツが文書ツリーの残りの部分から可能な限り独立していることを示します。
+拘束によって DOM のサブセクションを分離することができ、レイアウト、スタイル、描画、サイズ、または任意の組み合わせの計算をページ全体ではなく DOM サブツリーに制限することによって、性能上で有利になります。拘束は、CSS カウンターや引用のスコープにも使用することができます。
 
 {{EmbedInteractiveExample("pages/css/contain.html")}}
 
-このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。
+CSS 拘束には、サイズ、レイアウト、スタイル、描画の 4 種類があり、コンテナーに設定します。
+プロパティは、5 つの標準値のサブセットか、2 つの一括指定値のうちの 1 つをスペースで区切ったリストです。
+コンテナー内の拘束プロパティへの変更は、内包された要素の外側からページの残りの部分には伝搬されません。
+拘束の主な利点は、ブラウザーが DOM やページレイアウトを頻繁に再レンダリングする必要がなくなることで、静的なページのレンダリング時にはわずかなパフォーマンス上の利点を、より動的なアプリケーションではより大きなパフォーマンス上の利点につながります。
+
+`contain` プロパティを使用することで、要素の内部が外接ボックスの外で副作用が発生することを防ぐことができるため、独立した要素をたくさん持つページで有用です。
 
 > [!NOTE]
 > (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。
 >
 > 1. 新しい[包含ブロック](/ja/docs/Web/CSS/Containing_block) ({{cssxref("position")}} プロパティが `absolute` または `fixed` である子孫を対象とする)。
 > 2. 新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。
-> 3. 新しい[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)。
+> 3. 新しい[ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)。
 
 ## 構文
 
@@ -26,6 +34,7 @@ contain: none;
 contain: strict;
 contain: content;
 contain: size;
+contain: inline-size;
 contain: layout;
 contain: style;
 contain: paint;
@@ -33,35 +42,42 @@ contain: paint;
 /* 複数のキーワード */
 contain: size paint;
 contain: size layout paint;
+contain: inline-size layout;
 
 /* グローバル値 */
 contain: inherit;
 contain: initial;
 contain: revert;
+contain: revert-layer;
 contain: unset;
 ```
 
+### 値
+
 `contain` プロパティは、以下のうちの一つで指定します。
 
-- `none`, `strict`, `content` の何れかのキーワードを単独で使用。
-- `size`, `layout`, `style`, and `paint` の各キーワードを 1 つ以上、任意の順序で使用。
+- キーワード `none` **または**
+- `size`（または `inline-size`）、`layout`、`style`、`paint` の各キーワードを 1 つ以上、任意の順序で使用。 **または**
+- `strict` または `content` の一括指定値のどちらか。
 
-### 値
+キーワードには、次のような意味があります。
 
 - `none`
-  - : その要素が通常通り描画され、封じ込めを適用しないことを示します。
+  - : その要素が通常通り描画され、拘束を適用されません。
 - `strict`
-  - : `style` を除くすべての封じ込め規則がその要素に適用されることを示します。これは `contain: size layout paint` と同等です。
+  - : すべての拘束ルールがその要素に適用されます。これは `contain: size layout paint style` と同等です。
 - `content`
-  - : `size` および `style` 以外の封じ込め規則がその要素に適用されることを示します。これは `contain: layout paint` と同等です。
+  - : `size` 以外の拘束ルールがその要素に適用されることを示します。これは `contain: layout paint style` と同等です。
 - `size`
-  - : 子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。
+  - : サイズ拘束が、インライン方向でもブロック方向でも要素に適用されます。要素のサイズは、子要素を無視して単独で計算することができます。この値は `inline-size` と組み合わせることはできません。
+- `inline-size`
+  - : インラインサイズ拘束が要素に適用されます。要素のインラインサイズは、子要素を無視して単独で計算することができます。この値は `size` と組み合わせることはできません。
 - `layout`
-  - : 要素の外側が内部のレイアウトなどに影響しないことを示します。
+  - : 要素の内部レイアウトはページの他の部分から分離されています。これは、要素の外側にあるものはその内部レイアウトに影響しないということです。
 - `style`
-  - : ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。
+  - : 複数の要素とその子孫に影響するプロパティでは、効果は格納された要素をエスケープしません。カウンターと引用符は、要素とそのコンテンツにスコープされます。
 - `paint`
-  - : その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
+  - : その要素の子孫を、境界の外に表示しません。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。そのボックスに完全に含まれていれば、やはり画面外にあるからです。子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
 
 ## 公式定義
 
@@ -73,106 +89,183 @@ contain: unset;
 
 ## 例
 
-### 単純なレイアウト
+### 描画拘束
+
+次の例は、`contain: paint` を使用して、要素の子孫がその境界の外側に描画されないようにする方法を示しています。
+
+```css
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+  margin: 10px;
+  font-size: 20px;
+}
+```
+
+```html
+
    
+  
    このテキストは、ボックスの境界で切り取られるでしょう。
    
+
    
+
    
+  
    このテキストは、ボックスの境界で切り取られないでしょう。
    
+
    
+```
+
+{{EmbedLiveSample("Paint_containment", "100%", 280)}}
+
+### レイアウト拘束
 
-以下のマークアップは多数のコンテンツを持つ記事からなるものです。
+レイアウト拘束を適用した場合としない場合の要素の動作を示す下記の例を考えてみましょう。
 
 ```html
-
    My blog
    
-
    
-  
    Heading of a nice article
    
-  
    Content here.
    
-
    
-
    
-  
    Another heading of another article
    
-  photo
-  
    More content here.
    
-
    
+
    
+  
    カード 1
    
+  
    固定ボックス 1
    
+  
    浮動ボックス 1
    
+
    
+
    
+  
    カード 2
    
+  
    固定ボックス 2
    
+  
    浮動ボックス 2
    
+
    
+
    
+  
    カード 3
    
+  
+
    
 ```
 
-それぞれの `
    ` および `` には境界があり、画像は浮動状態です。
+```css hidden
+p {
+  margin: 4px;
+  padding: 4px;
+}
+
+h2 {
+  margin-bottom: 4px;
+  padding: 10px;
+}
+
+div {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 gray;
+  padding: 6px;
+  margin: 6px;
+}
+```
 
 ```css
-img {
-  float: left;
-  border: 3px solid black;
+.card {
+  width: 70%;
+  height: 90px;
 }
 
-article {
-  border: 1px solid black;
+.fixed {
+  position: fixed;
+  right: 10px;
+  top: 10px;
+  background: coral;
+}
+
+.float {
+  float: left;
+  margin: 10px;
+  background: aquamarine;
 }
 ```
 
-{{EmbedGHLiveSample("css-examples/contain/simple-layout.html", '100%', 400)}}
+最初のカードにはレイアウト拘束が適用され、レイアウトがページの他の部分から分離されています。
+他の要素のレイアウト再計算を気にすることなく、ページの他の場所でこのカードを再利用することができます。
+浮動要素がカードの境界に重なっても、ページの残りの要素は影響を受けません。
+ブラウザーが格納する要素のサブツリーを再計算するとき、その要素だけが再計算されます。格納する要素の外側は何も再計算される必要はありません。
+さらに、固定ボックスはカードをレイアウトコンテナーそのものとして使用して位置指定します。
+
+2 枚目と 3 枚目のカードには拘束がありません。
+2 枚目のカードの固定ボックスのレイアウトコンテキストはルート要素なので、固定ボックスはページの右上に指定されます。
+浮動要素が 2 枚目のカードの境界に重なり、3 枚目のカードに予期しないレイアウトのずれが発生し、それが `
    ` 要素の位置指定に現れています。
+再計算が発生すると、コンテナーそのものに制限されません。
+これはパフォーマンスに影響し、ページレイアウトの残りの部分に干渉します。
+{{EmbedLiveSample("Layout_containment", "100%", 350)}}
+
+### スタイル拘束
 
-問題はすぐにわかるでしょう。 — 記事の最下部を超えている浮動要素を解消する対策をしていません。
+スタイルの拘束は[カウンター](/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)と[引用符](/ja/docs/Web/CSS/quotes)を拘束される要素にスコープします。
+CSS カウンターの場合、{{cssxref("counter-increment")}} と {{cssxref("counter-set")}} プロパティは、要素が文書のルートにあるかのように要素にスコープされます。
 
-
    浮動要素の干渉
    
+#### 拘束とカウンター
 
-1 つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、 2 つ目の記事のレイアウトにも支障をきたしてしまいます。
+下記の例では、スタイルの拘束が適用された場合のカウンターの動作を見ていきます。
 
 ```html
-
    My blog
    
-
    
-  
    Heading of a nice article
    
-  
    Content here.
    
-  social
-
    
-
    
-  
    Another heading of another article
    
-  photo
-  
    More content here.
    
-
    
+
      
+  
    • アイテム A
      • 
+  
    • アイテム B
      • 
+  
    • アイテム C
      • 
+  
    • アイテム D
      • 
+  
    • アイテム E
      • 
+
    
 ```
 
-```css hidden
-img {
-  float: left;
-  border: 3px solid black;
+```css
+body {
+  counter-reset: list-items;
+}
+
+li::before {
+  counter-increment: list-items;
+  content: counter(list-items) ": ";
 }
 
-article {
-  border: 1px solid black;
+.container {
+  contain: style;
 }
 ```
 
-ご覧の通り、浮動要素の動作方法が原因で、最初の画像が 2 つ目の記事の領域内に掛かってしまっています。
+拘束がなければ、カウンターはリストアイテムごとに 1 から 5 まで増加します。
+スタイル拘束を行うと、{{cssxref("counter-increment")}} プロパティが要素のサブツリーにスコープされ、カウンターは再び 1 から始まります。
 
-{{EmbedGHLiveSample("css-examples/contain/float-interference.html", '100%', 400)}}
+{{EmbedLiveSample('拘束とカウンター', '100%', 140)}}
 
-### contain による修正
+#### 拘束と引用符
 
-それぞれの `article` の `contain` プロパティを `content` の値を設定すれば、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。
+CSS の引用符も同様に、[`content`](/ja/docs/Web/CSS/content) の引用符関連の値が要素にスコープされます。
 
-```html hidden
-
    My blog
    
-
    
-  
    Heading of a nice article
    
-  
    Content here.
    
-  social
-
    
-
    
-  
    Another heading of another article
    
-  photo
-  
    More content here.
    
-
    
+```html
+
+
+  外部
+  
+     内部 
+  
+
+ 閉じ 
+
    
+
+
+  外部
+  
+     内部 
+  
+
+ 閉じ 
 ```
 
 ```css
-img {
-  float: left;
-  border: 3px solid black;
+body {
+  quotes: "[" "]" "‹" "›";
+}
+.open-quote:before {
+  content: open-quote;
 }
 
-article {
-  border: 1px solid black;
-  contain: content;
+.close-quote:after {
+  content: close-quote;
 }
 ```
 
-これは最初の画像についても、 2 つ目の記事の下に浮遊せずに、包含する要素の範囲内に留まることも意味します。
+拘束のため、最初の閉じ引用符は内側のスパンを無視し、外側のスパンの閉じ引用符を代わりに使用します。
 
-{{EmbedGHLiveSample("css-examples/contain/contain-fix.html", '100%', 500)}}
+{{EmbedLiveSample('拘束と引用符', '100%', 40)}}
 
 ## 仕様書
 
@@ -184,6 +277,7 @@ article {
 
 ## 関連情報
 
-- [CSS 封じ込め](/ja/docs/Web/CSS/CSS_Containment)
+- [CSS 拘束](/ja/docs/Web/CSS/CSS_containment)
+- [CSS コンテナークエリー](/ja/docs/Web/CSS/CSS_containment/Container_queries)
 - CSS の {{cssxref("content-visibility")}} プロパティ
 - CSS の {{cssxref("position")}} プロパティ

From 75ded3e642c574a3cc4404875eebdeb67dd08681 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 6 Aug 2024 22:44:42 +0900
Subject: [PATCH 490/623] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/svg/element/rect/index.md | 82 +++++++++++++++-----------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/files/ja/web/svg/element/rect/index.md b/files/ja/web/svg/element/rect/index.md
index 80858a004667ab..e3877e5db74490 100644
--- a/files/ja/web/svg/element/rect/index.md
+++ b/files/ja/web/svg/element/rect/index.md
@@ -1,62 +1,76 @@
 ---
-title: rect
+title: 
 slug: Web/SVG/Element/rect
+l10n:
+  sourceCommit: 2f43f506240fa6c866cc3bc2d018364ae49421d9
 ---
 
 {{SVGRef}}
 
-## 概要
-
-`rect` 要素は SVG の基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。
+**``** 要素は [SVG の基本図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)であり、位置・幅・高さで定義される長方形を描画します。長方形は角を丸めることができます。
 
 ## 例
 
-### シンプルな `rect 要素の使い方`
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-» [rect-1.svg](rect-1.svg)
+```html
+
+  
+  
 
-### `角の丸い rect` 要素
+  
+  
+
+```
 
-» [rect-2.svg](rect-2.svg)
+{{EmbedLiveSample('Example', 100, '100%')}}
 
 ## 属性
 
-### グローバル属性
-
-- [条件処理属性](/ja/Web/SVG/Attribute#ConditionalProcessing) »
-- [コア属性](/ja/Web/SVG/Attribute#Core) »
-- [グラフィックイベント属性](/ja/Web/SVG/Attribute#GraphicalEvent) »
-- [プレゼンテーション属性](/ja/Web/SVG/Attribute#Presentation) »
-- {{ SVGAttr("class") }}
-- {{ SVGAttr("style") }}
-- {{ SVGAttr("externalResourcesRequired") }}
-- {{ SVGAttr("transform") }}
-
-### 専用属性
-
-- {{ SVGAttr("x") }}
-- {{ SVGAttr("y") }}
-- {{ SVGAttr("width") }}
-- {{ SVGAttr("height") }}
-- {{ SVGAttr("rx") }}
-- {{ SVGAttr("ry") }}
-
-## DOM インターフェイス
-
-この要素は [`SVGRectElement`](/ja/DOM/SVGRectElement) インターフェイスを提供します。
+- {{SVGAttr("x")}}
+  - : 長方形の x 座標です。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: `0`; _アニメーション_: **可**
+- {{SVGAttr("y")}}
+  - : 長方形の y 座標です。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: `0`; _アニメーション_: **可**
+- {{SVGAttr("width")}}
+  - : 長方形の幅です。
+    _値の型_: `auto`|[**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: `auto`; _アニメーション_: **可**
+- {{SVGAttr("height")}}
+  - : 長方形の高さです。
+    _値の型_: `auto`|[**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: `auto`; _アニメーション_: **可**
+- {{SVGAttr("rx")}}
+  - : 長方形の角の水平方向の半径。`ry` が指定されていた場合は、それが既定値です。
+    _値の型_: `auto`|[**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: `auto`; _アニメーション_: **可**
+- {{SVGAttr("ry")}}
+  - : 長方形の角の垂直方向の半径。`rx` が指定されていた場合は、それが既定値です。
+    _値の型_: `auto`|[**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: `auto`; _アニメーション_: **可**
+- {{SVGAttr("pathLength")}}
+  - : 長方形の周囲の長さの合計をユーザー単位で指定します。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#number) ; _既定値_: _none_; _アニメーション_: **可**
+
+> [!NOTE]
+> SVG2 以降、`x`, `y`, `width`, `height`, `rx`, `ry` は幾何プロパティであり、これらの属性はその要素の CSS プロパティとしても使用することができるということを意味しています。
 
 ## 使用可能な場所
 
 {{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- {{ SVGElement("path") }}
+- [SVG プレゼンテーション属性](/ja/docs/Web/SVG/Attribute#プレゼンテーション属性)、{{SVGAttr("fill")}} や {{SVGAttr("stroke")}} など
+- その他の SVG 基本図形: {{SVGElement('circle')}}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, **{{ SVGElement('polygon') }}**, {{ SVGElement('polyline') }}

From 673f4a0f7fc4adea59d00ddeb7db8bd9946dcbf8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 6 Aug 2024 23:31:45 +0900
Subject: [PATCH 491/623] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/svg/element/text/index.md | 168 ++++++++++---------------
 1 file changed, 64 insertions(+), 104 deletions(-)

diff --git a/files/ja/web/svg/element/text/index.md b/files/ja/web/svg/element/text/index.md
index 4df9887c6714c1..18b341c7a89c52 100644
--- a/files/ja/web/svg/element/text/index.md
+++ b/files/ja/web/svg/element/text/index.md
@@ -1,136 +1,96 @@
 ---
 title: 
 slug: Web/SVG/Element/text
+l10n:
+  sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5
 ---
 
 {{SVGRef}}
 
-SVG **``** 要素は、テキストからなるグラフィクス要素を定義します。`` には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。
+SVG の **``** 要素は、テキストからなるグラフィク要素を定義します。`` には、他の SVG グラフィク要素と同じように、グラデーション、パターン、クリッピングパス、マスク、フィルターなどを適用することができます。
 
-SVG 内でテキストが `` 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、[ディスプレイプロパティ](/ja/docs/Web/SVG/Attribute/display) を変更してもテキストは表示されません。
+SVG 内でテキストが `` 要素内以外で組み込まれた場合、レンダリングされません。これは既定でで隠されるのとは違い、{{SVGAttr('display')}} を変更してもテキストは表示されません。
 
-## 使用可能な場所
+> [!NOTE]
+> 既定では `` 要素は折り返されません。これを実現するには {{CSSXRef("white-space")}} でスタイル設定する必要があります。CSS プロパティを使用する必要があります。
 
-{{svginfo}}
+## 例
 
-## 属性
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-### グローバル属性
+```html
+
+  
+
+  My
+  cat
+  is
+  Grumpy!
+
+```
 
-- [条件処理属性](/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes) »
-- [コア属性](/ja/docs/Web/SVG/Attribute#Core_attributes) »
-- [グラフィックイベント属性](/ja/docs/Web/SVG/Attribute#Graphical_event_attributes) »
-- [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute#Presentation_attributes) »
-- {{SVGAttr("class")}}
-- {{SVGAttr("style")}}
-- {{SVGAttr("externalResourcesRequired")}}
-- {{SVGAttr("transform")}}
+{{EmbedLiveSample('Example', 100, '100%')}}
 
-### 専用属性
+## 属性
 
 - {{SVGAttr("x")}}
+  - : テキストのベースラインの始点の x 座標、 または値のリストが指定されている場合は個々のグリフの x 座標。
+    _値の型_: ([**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)) のリスト ; _既定値_: `0`; _アニメーション_: **可**
 - {{SVGAttr("y")}}
+  - : テキストのベースラインの始点の y 座標、 または値のリストが指定されている場合は個々のグリフの y 座標。
+    _値の型_: ([**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)) のリスト ; _既定値_: `0`; _アニメーション_: **可**
 - {{SVGAttr("dx")}}
+  - : テキスト位置を前回のテキスト要素から水平方向にずらすか、値のリストが指定された場合は個々のグリフの位置をずらします。
+    _値の型_: ([**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)) のリスト ; _既定値_: _none_; _アニメーション_: **可**
 - {{SVGAttr("dy")}}
-- {{SVGAttr("text-anchor")}}
+  - : テキスト位置を前回のテキスト要素から垂直方向にずらすか、値のリストが指定された場合は個々のグリフの位置をずらします。
+    _値の型_: ([**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)) のリスト ; _既定値_: _none_; _アニメーション_: **可**
 - {{SVGAttr("rotate")}}
-- {{SVGAttr("textLength")}}
+  - : 個々のグリフの方向を回転します。グリフを個別に回転可能です。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#list-of-ts) ; _既定値_: none; _アニメーション_: **可**
 - {{SVGAttr("lengthAdjust")}}
+  - : `textLength` 属性で定義する幅に収まるようにテキストをどのように伸縮させるか。
+    _値の型_: `spacing`|`spacingAndGlyphs`; _既定値_: `spacing`; _アニメーション_: **可**
+- {{SVGAttr("textLength")}}
+  - : テキストを合わせるために変倍する幅。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage) ; _既定値_: _none_; _アニメーション_: **可**
 
-## DOM インターフェイス
-
-この要素は {{domxref("SVGTextElement")}} インターフェイスを実装します。
-
-## 例
-
-### 基本的なテキストの使用例
-
-#### SVG
-
-```html
-
-  
-    Hello, out there
-  
-
-```
-
-#### 結果
-
-{{EmbedLiveSample("Basic_text_usage", 500, 60)}}
-
-### 回転テキスト
-
-SVG テキストは回転することができます。
-
-#### SVG
-
-```html
-
-  
-    SVG Text Rotation example
-  
-
-```
-
-#### 結果
-
-{{EmbedLiveSample("Rotated_text", 180, 120)}}
-
-### 着色テキスト
-
-SVG テキストは着色することができます。
-
-#### SVG
-
-```html
-
-  SVG Colored Text
-
-```
-
-#### 結果
-
-{{EmbedLiveSample("Colored_text", 200, 30)}}
-
-### CSS を用いたテキストのスタイリング
-
-SVG テキストは HTML テキストのようにスタイリングできます。
-
-#### SVG
-
-```html
-
-  
-    SVG text styling
-  
-
-```
-
-#### 結果
+## 使用可能な場所
 
-{{EmbedLiveSample("Styling_text_via_CSS", 400, 60)}}
+{{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
+## 関連項目
+
+- SVG のその他のテキスト関係要素: **{{SVGElement("tspan")}}**, {{SVGElement("tref")}}
+
 ## 関連情報
 
-- {{SVGElement("tspan")}}
-- {{SVGElement("tref")}}
-- {{SVGElement("altGlyph")}}
+- {{CSSXRef("white-space", "", "#multiple_lines_in_svg_text_element")}}

From fd87cf76820123774dd6109ccb614bb5c92f8ffe Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 10 Aug 2024 20:45:05 +0900
Subject: [PATCH 492/623] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#22962)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 2024/07/26 時点の英語版に基づき更新

* Update index.md

* Update index.md

* Update index.md
---
 files/ja/web/svg/element/index.md        | 54 ++++++---------
 files/ja/web/svg/element/script/index.md | 87 +++++++++++++-----------
 files/ja/web/svg/element/set/index.md    | 68 +++++++++++-------
 3 files changed, 112 insertions(+), 97 deletions(-)

diff --git a/files/ja/web/svg/element/index.md b/files/ja/web/svg/element/index.md
index 538940a1ceccc3..05e0645111a362 100644
--- a/files/ja/web/svg/element/index.md
+++ b/files/ja/web/svg/element/index.md
@@ -1,9 +1,12 @@
 ---
 title: SVG 要素リファレンス
+short-title: 要素
 slug: Web/SVG/Element
+l10n:
+  sourceCommit: 2e5fc06de139c56873a20ec4bc3bf5600ea3cbef
 ---
 
-« [SVG](/ja/docs/SVG) / [SVG 属性リファレンス](/ja/docs/SVG/Attribute) »
+{{SVGRef}}
 
 SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。
 
@@ -20,13 +23,11 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("circle")}}
 - {{SVGElement("clipPath")}}
-- {{SVGElement("color-profile")}}
 
 ### D
 
 - {{SVGElement("defs")}}
 - {{SVGElement("desc")}}
-- {{SVGElement("discard")}}
 
 ### E
 
@@ -66,11 +67,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("g")}}
 
-### H
-
-- {{SVGElement("hatch")}}
-- {{SVGElement("hatchpath")}}
-
 ### I
 
 - {{SVGElement("image")}}
@@ -84,10 +80,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("marker")}}
 - {{SVGElement("mask")}}
-- {{SVGElement("mesh")}}
-- {{SVGElement("meshgradient")}}
-- {{SVGElement("meshpatch")}}
-- {{SVGElement("meshrow")}}
 - {{SVGElement("metadata")}}
 - {{SVGElement("mpath")}}
 
@@ -107,7 +99,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("script")}}
 - {{SVGElement("set")}}
-- {{SVGElement("solidcolor")}}
 - {{SVGElement("stop")}}
 - {{SVGElement("style")}}
 - {{SVGElement("svg")}}
@@ -123,18 +114,19 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### U
 
-- {{SVGElement("unknown")}}
 - {{SVGElement("use")}}
 
 ### V
 
 - {{SVGElement("view")}}
 
+> **メモ:** [SVG 2 仕様では](https://www.w3.org/TR/SVG2/struct.html#UnknownElement)、レンダリングのために未知の要素は {{SVGElement("g")}} として扱われることが要求されています。
+
 ## SVG 要素一覧 (カテゴリー別)
 
 ### アニメーション要素
 
-{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}
+{{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}
 
 ### 基本シェイプ
 
@@ -142,7 +134,7 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### コンテナー要素
 
-{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}
+{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}
 
 ### 説明的要素
 
@@ -150,7 +142,7 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### フィルター構成要素
 
-{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
+{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
 
 ### フォント要素
 
@@ -158,15 +150,15 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### グラデーション要素
 
-{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}
+{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}
 
 ### グラフィック要素
 
-{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}
 
 ### グラフィック参照要素
 
-{{SVGElement("mesh")}}, {{SVGElement("use")}}
+{{SVGElement("use")}}
 
 ### 光源要素
 
@@ -174,19 +166,21 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### 描画されない要素
 
-{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}
+{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}
 
 ### ペイントサーバー要素
 
-{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}
+{{SVGElement("linearGradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}
 
 ### 描画可能要素
 
-{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}
+{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("use")}}
+
+> **メモ:** [SVG 2 仕様では](https://www.w3.org/TR/SVG2/struct.html#UnknownElement)、レンダリングのために未知の要素は {{SVGElement("g")}} として扱われることが要求されています。
 
 ### 図形要素
 
-{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
 
 ### 構造的要素
 
@@ -194,25 +188,21 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### テキストコンテンツ要素
 
-{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
+{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
 
 ### テキストコンテンツの子要素
 
-{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
+{{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
 
 ### 未分類の要素
 
-{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}
+{{SVGElement("clipPath")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}
 
 ## 廃止および非推奨の要素
 
 > [!WARNING]
 > 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。**新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。**ここに掲載しているのは情報提供だけの目的です。
 
-### A
-
-{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}
-
 ### C
 
 {{SVGElement("cursor")}}
@@ -245,6 +235,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - [SVG 属性リファレンス](/ja/docs/Web/SVG/Attribute)
 - [SVG チュートリアル](/ja/docs/Web/SVG/Tutorial)
-- [SVG インターフェイスリファレンス](/ja/docs/Web/API/Document_Object_Model#SVG_interfaces)
+- [SVG インターフェイスリファレンス](/ja/docs/Web/API/Document_Object_Model#svg_dom)
 
 {{SVGRef}}
diff --git a/files/ja/web/svg/element/script/index.md b/files/ja/web/svg/element/script/index.md
index fd0ade0aa6e9be..d1d81c5b93b86b 100644
--- a/files/ja/web/svg/element/script/index.md
+++ b/files/ja/web/svg/element/script/index.md
@@ -1,78 +1,83 @@
 ---
 title: 
-
-  
 
 ```
 
-結果:
-
-{{EmbedLiveSample("Example",150,165)}}
+{{EmbedLiveSample('Example', 150, '100%')}}
 
 ## 属性
 
-### グローバル属性
-
-- [コア属性](/ja/SVG/Attribute#Core) »
-- [Xlink 属性](/ja/SVG/Attribute#XLink) »
-- {{SVGAttr("externalResourcesRequired")}}
-
-### 専用属性
-
+- [`crossorigin`](/ja/docs/Web/HTML/Element/script#crossorigin)
+  - : この属性は、[CORS 設定](/ja/docs/Web/HTML/Attributes/crossorigin) を HTML の {{HTMLElement('script')}} 要素のように定義します。
+    _値の型_: [**\**](/ja/docs/Web/CSS/string); _既定値_: `?`; _アニメーション_: **可**
+- {{SVGAttr("href")}}
+  - : 読み込むスクリプトの {{Glossary("URL")}} です。
+    _値の型_: **[\](/ja/docs/Web/SVG/Content_type#url)** ; _既定値_: _none_; _アニメーション_: **不可**
 - {{SVGAttr("type")}}
-- {{SVGAttr("xlink:href")}}
+  - : この属性は使用するスクリプト言語の型を定義します。
+    _値の型_: [**\**](/ja/docs/Web/CSS/string); _既定値_: `application/ecmascript`; _アニメーション_: **不可**
+- {{SVGAttr("xlink:href")}} {{deprecated_inline}}
+  - : 読み込むスクリプトの {{Glossary("URL")}} です。
+    _値の型_: **[\](/ja/docs/Web/SVG/Content_type#url)** ; _既定値_: _none_; _アニメーション_: **不可**
 
-## DOM インターフェイス
+## 使用可能な場所
 
-この要素は [`SVGScriptElement`](/ja/DOM/SVGScriptElement) インターフェイスを実装します。
+{{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- HTML の [`script` 要素](/ja/HTML/Element/Script)
-
-{{SVGRef}}
+- [HTML の `script` 要素](/ja/docs/Web/HTML/Element/script)
diff --git a/files/ja/web/svg/element/set/index.md b/files/ja/web/svg/element/set/index.md
index 3519b3d42f2569..5f855f20fa1e17 100644
--- a/files/ja/web/svg/element/set/index.md
+++ b/files/ja/web/svg/element/set/index.md
@@ -1,48 +1,68 @@
 ---
-title: set
+title: 
 slug: Web/SVG/Element/set
+l10n:
+  sourceCommit: 2e5fc06de139c56873a20ec4bc3bf5600ea3cbef
 ---
 
 {{SVGRef}}
 
-## 概要
+SVG の **``** 要素は、指定した時間だけ属性の値を設定するという単純な意味を提供します。
 
-`set` 要素は指定された時間の間の属性の値を設定します。この要素はすべての属性タイプをサポートしており、合理的に補間することができないものも含みます。例えば、文字列や論理型といった値です。`set` 要素は非加算的要素です。additive 属性と accumulate 属性は許可されておらず、指定されても無視されます。
+文字列や論理値など、合理的に補間できないものも含めて、すべての属性型に対応しています。合理的に補間できる属性については、通常は {{SVGElement('animate')}} を推奨します。
 
-## 使用可能な場所
-
-{{svginfo}}
+> **メモ:** `` 要素は非加算です。{{SVGAttr('additive')}} と {{SVGAttr('accumulate')}} 属性は指定することができず、指定されても無視されます。
 
 ## 例
 
-## 属性
-
-### グローバル属性
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+
+  
+
+  
+    
+  
+
+```
+
+{{EmbedLiveSample('Example', 150, '100%')}}
 
-- [条件処理属性](/ja/Web/SVG/Attribute#ConditionalProcessing) »
-- [コア属性](/ja/Web/SVG/Attribute#Core) »
-- [アニメーションイベント属性](/ja/Web/SVG/Attribute#AnimationEvent) »
-- [Xlink 属性](/ja/Web/SVG/Attribute#XLink) »
-- [Animation attribute target attributes](/ja/Web/SVG/Attribute#AnimationAttributeTarget) »
-- [アニメーションタイミング属性](/ja/Web/SVG/Attribute#AnimationTiming) »
-- {{ SVGAttr("externalResourcesRequired") }}
-
-### 専用属性
+## 属性
 
-- {{ SVGAttr("to") }}
+- {{SVGAttr("to")}}
+  - : この属性は、アニメーションの再生時間の間、対象とする属性に適用する値を定義します。値は、対象とする属性の要求と一致しなければなりません。
+    _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#anything); _既定値_: none; _アニメーション_: **不可**
 
-## DOM インターフェース
+## 使用可能な場所
 
-この要素は [`SVGSetElement`](/ja/DOM/SVGSetElement) インターフェースを提供します。
+{{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- {{ SVGElement("animate") }}
+- {{SVGAttr("attributeName")}} 属性
+- [アニメーションタイミング属性](/ja/docs/Web/SVG/Attribute#アニメーションタイミング属性): {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
+- {{SVGElement("animate")}}

From 48881d8f5a2587f9d86899f011a035ab3b12faa7 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" 
Date: Sat, 10 Aug 2024 10:34:10 -0700
Subject: [PATCH 493/623] ru: Convert noteblocks to GFM alerts (part 2)
 (#23006)

* ru: Convert noteblocks to GFM alerts (part 2)

* remove odd noteblocks

* update noteblocks

---------

Co-authored-by: Leonid Vinogradov 
---
 .../web/api/extendableevent/waituntil/index.md |  2 --
 files/ru/web/api/fetch_api/index.md            |  3 ++-
 .../ru/web/api/fetch_api/using_fetch/index.md  |  4 ----
 .../file_and_directory_entries_api/index.md    |  6 ++++--
 .../using_files_from_web_applications/index.md |  3 ++-
 files/ru/web/api/filelist/index.md             |  3 ++-
 files/ru/web/api/filereader/index.md           |  5 +++--
 .../web/api/filereader/readasdataurl/index.md  |  3 ++-
 files/ru/web/api/formdata/append/index.md      |  5 ++---
 files/ru/web/api/formdata/delete/index.md      |  2 --
 files/ru/web/api/formdata/entries/index.md     |  2 --
 files/ru/web/api/formdata/formdata/index.md    |  3 ++-
 files/ru/web/api/formdata/get/index.md         |  2 --
 files/ru/web/api/formdata/getall/index.md      |  2 --
 files/ru/web/api/formdata/has/index.md         |  2 --
 files/ru/web/api/formdata/index.md             |  6 ++++--
 files/ru/web/api/formdata/keys/index.md        |  2 --
 files/ru/web/api/formdata/set/index.md         |  5 ++---
 files/ru/web/api/formdata/values/index.md      |  2 --
 files/ru/web/api/gamepad/timestamp/index.md    |  3 ++-
 .../gamepad_api/using_the_gamepad_api/index.md |  6 ++++--
 files/ru/web/api/gamepadbutton/index.md        |  2 --
 files/ru/web/api/gamepadevent/gamepad/index.md |  3 ++-
 files/ru/web/api/geolocation/index.md          |  3 ++-
 .../using_the_geolocation_api/index.md         |  6 ++++--
 files/ru/web/api/history/index.md              |  8 --------
 .../working_with_the_history_api/index.md      |  8 --------
 .../drag_operations/index.md                   |  9 ++++++---
 .../ru/web/api/html_drag_and_drop_api/index.md |  3 ++-
 .../web/api/htmlcanvaselement/toblob/index.md  |  3 ++-
 files/ru/web/api/htmlcollection/index.md       |  3 ++-
 files/ru/web/api/htmldialogelement/index.md    |  3 ++-
 .../ru/web/api/htmldialogelement/open/index.md |  3 ++-
 .../ru/web/api/htmlelement/accesskey/index.md  |  6 ++++--
 files/ru/web/api/htmlelement/hidden/index.md   |  3 ++-
 .../web/api/htmlelement/offsetheight/index.md  |  3 ++-
 .../web/api/htmlelement/offsetwidth/index.md   |  3 ++-
 .../web/api/htmlformelement/elements/index.md  |  3 ++-
 .../ru/web/api/htmlimageelement/image/index.md |  3 ++-
 files/ru/web/api/htmllinkelement/index.md      |  3 ++-
 files/ru/web/api/htmlmediaelement/index.md     |  5 ++---
 files/ru/web/api/indexeddb_api/index.md        |  6 ++++--
 .../api/indexeddb_api/using_indexeddb/index.md |  9 ++++++---
 files/ru/web/api/keyboardevent/index.md        | 17 ++---------------
 files/ru/web/api/keyboardevent/key/index.md    |  3 ++-
 .../taking_still_photos/index.md               |  3 ++-
 .../web/api/mediadevices/getusermedia/index.md | 15 ++++++++++-----
 .../mediarecorder/dataavailable_event/index.md |  3 ++-
 files/ru/web/api/mediarecorder/index.md        |  3 ++-
 .../api/mediarecorder/mediarecorder/index.md   |  3 ++-
 files/ru/web/api/mediarecorder/start/index.md  |  3 ++-
 .../index.md                                   |  9 ++++++---
 files/ru/web/api/mediastreamtrack/index.md     |  6 ++++--
 files/ru/web/api/mouseevent/button/index.md    |  3 ++-
 files/ru/web/api/mouseevent/buttons/index.md   |  3 ++-
 files/ru/web/api/mutationobserver/index.md     |  3 ++-
 files/ru/web/api/namednodemap/index.md         |  3 ++-
 .../ru/web/api/navigator/appcodename/index.md  |  3 ++-
 files/ru/web/api/navigator/appname/index.md    |  3 ++-
 files/ru/web/api/navigator/appversion/index.md |  3 ++-
 .../web/api/navigator/cookieenabled/index.md   |  6 ++++--
 files/ru/web/api/navigator/getbattery/index.md |  3 ++-
 .../ru/web/api/navigator/getusermedia/index.md |  6 ++++--
 files/ru/web/api/navigator/platform/index.md   |  3 ++-
 files/ru/web/api/navigator/plugins/index.md    |  3 ++-
 files/ru/web/api/navigator/product/index.md    |  3 ++-
 .../navigator/registerprotocolhandler/index.md |  5 ++---
 files/ru/web/api/navigator/sendbeacon/index.md |  3 ++-
 files/ru/web/api/node/appendchild/index.md     |  4 +++-
 files/ru/web/api/node/clonenode/index.md       |  4 ----
 .../api/node/comparedocumentposition/index.md  |  3 ++-
 files/ru/web/api/node/issamenode/index.md      | 11 -----------
 files/ru/web/api/node/lastchild/index.md       |  3 ++-
 files/ru/web/api/nodelist/index.md             |  3 ++-
 files/ru/web/api/notifications_api/index.md    |  6 ++++--
 files/ru/web/api/page_visibility_api/index.md  |  9 ++-------
 files/ru/web/api/performance/index.md          |  3 ++-
 files/ru/web/api/pointer_events/index.md       |  3 ++-
 files/ru/web/api/pointer_lock_api/index.md     |  6 ++++--
 files/ru/web/api/pushmanager/index.md          |  3 ++-
 files/ru/web/api/request/index.md              |  6 ++++--
 files/ru/web/api/response/body/index.md        |  3 ++-
 files/ru/web/api/response/ok/index.md          |  3 ++-
 files/ru/web/api/response/type/index.md        |  3 ++-
 .../cantrickleicecandidates/index.md           |  3 ++-
 .../currentlocaldescription/index.md           |  6 ++++--
 .../currentremotedescription/index.md          |  3 ++-
 files/ru/web/api/rtcpeerconnection/index.md    |  3 ++-
 .../using_screen_capture/index.md              | 18 ++++++++++++------
 files/ru/web/api/sensor_apis/index.md          |  3 ++-
 .../using_server-sent_events/index.md          |  9 ++++++---
 files/ru/web/api/service_worker_api/index.md   |  9 ++++++---
 .../using_service_workers/index.md             | 13 ++-----------
 .../web/api/serviceworkerregistration/index.md |  4 +---
 .../shownotification/index.md                  |  4 +---
 .../serviceworkerregistration/update/index.md  |  4 +---
 files/ru/web/api/setinterval/index.md          | 13 ++-----------
 files/ru/web/api/settimeout/index.md           |  4 ----
 files/ru/web/api/sharedworker/index.md         |  6 ++++--
 files/ru/web/api/storage/clear/index.md        |  3 ++-
 100 files changed, 235 insertions(+), 230 deletions(-)

diff --git a/files/ru/web/api/extendableevent/waituntil/index.md b/files/ru/web/api/extendableevent/waituntil/index.md
index 0e15aece39cd2e..7dba652e8a00bf 100644
--- a/files/ru/web/api/extendableevent/waituntil/index.md
+++ b/files/ru/web/api/extendableevent/waituntil/index.md
@@ -13,8 +13,6 @@ slug: Web/API/ExtendableEvent/waitUntil
 
 Метод `waitUntil()` должен быть изначально вызван внутри колбэка события (_event callback_), но после этого он может быть вызван множество раз, до тех пор пока все промисы, переданные в него, не завершатся успешно.
 
-> **Примечание:** Поведение описанное в параграфе выше, было исправлено в Firefix 43 (смотрите [Firefox bug 1180274](https://bugzil.la/1180274)).
-
 ## Синтаксис
 
 ```
diff --git a/files/ru/web/api/fetch_api/index.md b/files/ru/web/api/fetch_api/index.md
index 17f1378d0d63e6..5bb3ab76c2fa34 100644
--- a/files/ru/web/api/fetch_api/index.md
+++ b/files/ru/web/api/fetch_api/index.md
@@ -29,7 +29,8 @@ Fetch обеспечивает обобщённое определение об
 - `fetch()` может получать межсайтовые куки-файлы; таким образом вы можете установить межсайтовую сессию используя `fetch`.
 - `fetch()` не будет посылать куки-файлы, если только не указано `credentials: 'same-origin'`.
 
-> **Примечание:** узнайте больше об использовании Fetch API на [Using Fetch](/ru/docs/Web/API/Fetch_API/Using_Fetch) и изучите концепции на [Fetch basic concepts](/ru/docs/Web/API/Fetch_API/Basic_concepts).
+> [!NOTE]
+> Узнайте больше об использовании Fetch API на [Using Fetch](/ru/docs/Web/API/Fetch_API/Using_Fetch) и изучите концепции на [Fetch basic concepts](/ru/docs/Web/API/Fetch_API/Basic_concepts).
 
 ### Прерывание выборки
 
diff --git a/files/ru/web/api/fetch_api/using_fetch/index.md b/files/ru/web/api/fetch_api/using_fetch/index.md
index 5946d4ed744098..6cfbc576ae8030 100644
--- a/files/ru/web/api/fetch_api/using_fetch/index.md
+++ b/files/ru/web/api/fetch_api/using_fetch/index.md
@@ -14,8 +14,6 @@ slug: Web/API/Fetch_API/Using_Fetch
 - Promise возвращаемый вызовом `fetch()` **не перейдёт в состояние "отклонено" из-за ответа HTTP, который считается ошибкой**, даже если ответ HTTP 404 или 500. Вместо этого, он будет выполнен нормально (с значением false в статусе `ok` ) и будет отклонён только при сбое сети или если что-то помешало запросу выполниться.
 - По умолчанию, `fetch` **не будет отправлять или получать cookie файлы** с сервера, в результате чего запросы будут осуществляться без проверки подлинности, что приведёт к неаутентифицированным запросам, если сайт полагается на проверку пользовательской сессии (для отправки cookie файлов в аргументе [init options](/ru/docs/Web/API/fetch#Parameters) должно быть задано значение свойства _credentials_ отличное от значения по умолчанию `omit`).
 
-> **Примечание:** 25 августа 2017 г. в спецификации изменилось значение по умолчанию свойства _credentials_ на `same-origin`. Firefox применяет это изменение с версии 61.0b13.
-
 Базовый запрос на получение данных действительно прост в настройке. Взгляните на следующий код:
 
 ```
@@ -32,8 +30,6 @@ fetch('http://example.com/movies.json')
 
 Конечно, это просто HTTP-ответ, а не фактический JSON. Чтобы извлечь содержимое тела JSON из ответа, мы используем {{domxref("Body.json","json()")}} метод (определён миксином {{domxref("Body")}}, который реализован в объектах {{domxref("Request")}} и {{domxref("Response")}}.)
 
-> **Примечание:** Миксин Body имеет подобные методы для извлечения других типов контента; см. раздел [Тело](#тело).
-
 Fetch-запросы контролируются посредством директивы `connect-src` ([Content Security Policy](/ru/docs/Security/CSP/CSP_policy_directives)), а не директивой извлекаемых ресурсов.
 
 ### Установка параметров запроса
diff --git a/files/ru/web/api/file_and_directory_entries_api/index.md b/files/ru/web/api/file_and_directory_entries_api/index.md
index 79b653c81961f1..0bf434878cd5fc 100644
--- a/files/ru/web/api/file_and_directory_entries_api/index.md
+++ b/files/ru/web/api/file_and_directory_entries_api/index.md
@@ -9,11 +9,13 @@ slug: Web/API/File_and_Directory_Entries_API
 
 API доступа к файлам и директориям имитирует локальную файловую систему, в которой веб-приложения могут перемещаться и получать доступ к файлам. Вы можете разрабатывать приложения, которые читают, записывают и создают файлы и/или каталоги в виртуальной изолированной файловой системе.
 
-> **Примечание:** Поскольку это нестандартный API, спецификация которого в настоящее время не входит в стандарт, важно помнить, что не все браузеры реализуют его, а те, которые поддерживают, могут реализовывать только небольшие его части. Дополнительные сведения в разделе [Browser compatibility](#browser_compatibility)
+> [!NOTE]
+> Поскольку это нестандартный API, спецификация которого в настоящее время не входит в стандарт, важно помнить, что не все браузеры реализуют его, а те, которые поддерживают, могут реализовывать только небольшие его части. Дополнительные сведения в разделе [Browser compatibility](#browser_compatibility)
 
 Существуют два очень похожих API в зависимости от того, хотите ли вы асинхронного или синхронного поведения. Синхронный API предназначен для использования внутри {{domxref("Worker")}} и будет возвращать желаемые значения. Асинхронный API не будет блокировать выполнение кода, а API не будет возвращать значения; вместо этого вам нужно будет предоставить колбэк-функцию для обработки одного или нескольких ответов.
 
-> **Предупреждение:** Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к файлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путём перетаскивания файла/папки ([drag and drop](/ru/docs/Web/API/HTML_Drag_and_Drop_API)). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. [Поддержка File System API в Firefox](/ru/docs/Web/API/File_and_Directory_Entries_API/Firefox_support))
+> [!WARNING]
+> Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к файлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путём перетаскивания файла/папки ([drag and drop](/ru/docs/Web/API/HTML_Drag_and_Drop_API)). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. [Поддержка File System API в Firefox](/ru/docs/Web/API/File_and_Directory_Entries_API/Firefox_support))
 
 ## Получение доступа к файловой системе
 
diff --git a/files/ru/web/api/file_api/using_files_from_web_applications/index.md b/files/ru/web/api/file_api/using_files_from_web_applications/index.md
index 0e4499c108b967..ffc2f5ce57629e 100644
--- a/files/ru/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/ru/web/api/file_api/using_files_from_web_applications/index.md
@@ -35,7 +35,8 @@ var selectedFile = $("#input").get(0).files[0];
 var selectedFile = $("#input")[0].files[0];
 ```
 
-> **Примечание:** Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
+> [!NOTE]
+> Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
 
 ### Доступ к выбранным файлам через событие change
 
diff --git a/files/ru/web/api/filelist/index.md b/files/ru/web/api/filelist/index.md
index 5bf4327fd59940..af082afbe3d706 100644
--- a/files/ru/web/api/filelist/index.md
+++ b/files/ru/web/api/filelist/index.md
@@ -7,7 +7,8 @@ slug: Web/API/FileList
 
 Объект этого типа возвращается свойством {{HTMLElement("input")}} элемента, что позволяет получить список выбранных файлов из ``. Также используется для получения списка файлов, брошенных в область веб-контента (**Web content**) по средствам drag and drop API. Смотрите [DataTransfer](/ru/docs/DragDrop/DataTransfer) для детального понимания как это использовать.
 
-> **Примечание:** До версии Gecko 1.9.2, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с Gecko 1.9.2, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.
+> [!NOTE]
+> До версии Gecko 1.9.2, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с Gecko 1.9.2, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.
 
 ## Использование FileList
 
diff --git a/files/ru/web/api/filereader/index.md b/files/ru/web/api/filereader/index.md
index 8395ba247f0421..6ad1841d0745de 100644
--- a/files/ru/web/api/filereader/index.md
+++ b/files/ru/web/api/filereader/index.md
@@ -11,7 +11,7 @@ slug: Web/API/FileReader
 
 Объекты `File` можно получить через объект {{domxref("FileList")}}, который возвращается как результат при выборе файлов пользователем с помощью элемента {{HTMLElement("input")}}, через drag and drop из объекта {{domxref("DataTransfer")}}, или с помощью `mozGetAsFile()`, метода доступного в API элемента {{domxref("HTMLCanvasElement")}}.
 
-> **Предупреждение:** Важное замечание: `FileReader` используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следует использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.
+> **Предупреждение:** `FileReader` используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следует использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.
 
 {{AvailableInWorkers}}
 
@@ -47,7 +47,8 @@ FileReader FileReader();
 - {{domxref("FileReader.onprogress")}}
   - : Обработчик для события {{event("progress")}}. Это событие срабатывает во время чтения данных из {{domxref("Blob")}}.
 
-> **Примечание:** Замечание: т.к. `FileReader` унаследован от {{domxref("EventTarget")}}, на все перечисленные события можно подписаться, используя метод {{domxref("EventTarget.addEventListener()","addEventListener")}}.
+> [!NOTE]
+> Т.к. `FileReader` унаследован от {{domxref("EventTarget")}}, на все перечисленные события можно подписаться, используя метод {{domxref("EventTarget.addEventListener()","addEventListener")}}.
 
 ### Константы состояния
 
diff --git a/files/ru/web/api/filereader/readasdataurl/index.md b/files/ru/web/api/filereader/readasdataurl/index.md
index bfdb1109a26b7d..a14f3ce3da8b9b 100644
--- a/files/ru/web/api/filereader/readasdataurl/index.md
+++ b/files/ru/web/api/filereader/readasdataurl/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Метод `readAsDataURL()` интерфейса {{domxref("FileReader")}} используется для чтения содержимого {{domxref("Blob")}} или {{domxref("File")}}. После завершения операции свойство {{domxref("FileReader.readyState", "readyState")}} принимает значение `DONE` и возникает событие {{domxref("FileReader/loadend_event", "loadend")}}. В то же время атрибут {{domxref("FileReader.result", "result")}} будет содержать данные файла, закодированные в `base64`-строку в виде [Data URL](/ru/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
 
-> **Note:** Атрибут {{domxref("FileReader.result","result")}} не может быть напрямую декодирован как Base64 без предварительного удаления объявления `Data URL`, которое предшествует данным в кодировке `base64`. Чтобы получить только строку в кодировке `base64`, необходимо удалить `data:*/*;base64,` из результата.
+> [!NOTE]
+> Атрибут {{domxref("FileReader.result","result")}} не может быть напрямую декодирован как Base64 без предварительного удаления объявления `Data URL`, которое предшествует данным в кодировке `base64`. Чтобы получить только строку в кодировке `base64`, необходимо удалить `data:*/*;base64,` из результата.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/formdata/append/index.md b/files/ru/web/api/formdata/append/index.md
index 096cc1cbb1b569..0d47d58aba8593 100644
--- a/files/ru/web/api/formdata/append/index.md
+++ b/files/ru/web/api/formdata/append/index.md
@@ -11,8 +11,6 @@ slug: Web/API/FormData/append
 
 Разница между {{domxref("FormData.set")}} и `append()` в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а `append()` добавит новое значение к остальным в конец.
 
-> **Примечание:** Данный метод также доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 Существует две формы использования данной функции: с двумя и тремя параметрами:
@@ -31,7 +29,8 @@ formData.append(name, value, filename);
 - `filename` {{optional_inline}}
   - : Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошёл проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".
 
-> **Примечание:** Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект `FormData`, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.
+> [!NOTE]
+> Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект `FormData`, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.
 
 ### Возвращает
 
diff --git a/files/ru/web/api/formdata/delete/index.md b/files/ru/web/api/formdata/delete/index.md
index abf8bb3be56499..82d714c3e4f35f 100644
--- a/files/ru/web/api/formdata/delete/index.md
+++ b/files/ru/web/api/formdata/delete/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/delete
 
 Метод **`delete()`** интерфейса {{domxref("FormData")}} удаляет ключ и его значение(-ия) из объекта `FormData`.
 
-> **Примечание:** Этот метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```js
diff --git a/files/ru/web/api/formdata/entries/index.md b/files/ru/web/api/formdata/entries/index.md
index a218e140257a8e..45984787e12364 100644
--- a/files/ru/web/api/formdata/entries/index.md
+++ b/files/ru/web/api/formdata/entries/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/entries
 
 Метод **`FormData.entries()`** возвращает {{jsxref("Iteration_protocols",'iterator')}}, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект {{domxref("USVString")}}, значение - это {{domxref("USVString")}} или {{domxref("Blob")}}.
 
-> **Примечание:** Метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```
diff --git a/files/ru/web/api/formdata/formdata/index.md b/files/ru/web/api/formdata/formdata/index.md
index bafcae88c5d313..13ac5685152041 100644
--- a/files/ru/web/api/formdata/formdata/index.md
+++ b/files/ru/web/api/formdata/formdata/index.md
@@ -37,7 +37,8 @@ console.log(formData.get("code"), formData === oldForm);
 
 ### Методы
 
-> **Примечание:** Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.
+> [!NOTE]
+> Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.
 
 Добавление нового текстового поля в форму:
 
diff --git a/files/ru/web/api/formdata/get/index.md b/files/ru/web/api/formdata/get/index.md
index ce99d9edcce143..54bc1a5b271615 100644
--- a/files/ru/web/api/formdata/get/index.md
+++ b/files/ru/web/api/formdata/get/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/get
 
 Метод get() из интерфейса {{domxref("FormData")}} возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().
 
-> **Примечание:** Примечание: Этот метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```
diff --git a/files/ru/web/api/formdata/getall/index.md b/files/ru/web/api/formdata/getall/index.md
index fd4a2c2df27974..d714b1a2b12d2a 100644
--- a/files/ru/web/api/formdata/getall/index.md
+++ b/files/ru/web/api/formdata/getall/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/getAll
 
 **`getAll()`** - метод объекта {{domxref("FormData")}}, который возвращает все значения, связанные с ключом в объекте FormData.
 
-> **Примечание:** Этот метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```js
diff --git a/files/ru/web/api/formdata/has/index.md b/files/ru/web/api/formdata/has/index.md
index 8ebf76d3e2e379..30c2bbe4c8528a 100644
--- a/files/ru/web/api/formdata/has/index.md
+++ b/files/ru/web/api/formdata/has/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/has
 
 Метод **`has()`** из интерфейса {{domxref("FormData")}} возвращает логическое значение, указывающее, содержит ли объект `FormData` указанный ключ.
 
-> **Примечание:** Примечание: Этот метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```js
diff --git a/files/ru/web/api/formdata/index.md b/files/ru/web/api/formdata/index.md
index 64192aff07c34a..622de936e06605 100644
--- a/files/ru/web/api/formdata/index.md
+++ b/files/ru/web/api/formdata/index.md
@@ -11,7 +11,8 @@ XMLHttpRequest 2 добавляет поддержку для нового ин
 
 FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".
 
-> **Примечание:** О деталях использования FormData можно прочитать в статье [Использование объекта FormData](/ru/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects).
+> [!NOTE]
+> О деталях использования FormData можно прочитать в статье [Использование объекта FormData](/ru/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects).
 
 ## Конструктор
 
@@ -39,7 +40,8 @@ FormData использует такой же формат на выходе, к
 - {{domxref("FormData.values()")}}
   - : Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем значениям , содержащимся в объекте `FormData`
 
-> **Примечание:** Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами.
+> [!NOTE]
+> Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами.
 
 ## Спецификации
 
diff --git a/files/ru/web/api/formdata/keys/index.md b/files/ru/web/api/formdata/keys/index.md
index 45bc5286097a2a..e001bb5c159153 100644
--- a/files/ru/web/api/formdata/keys/index.md
+++ b/files/ru/web/api/formdata/keys/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/keys
 
 **`FormData.keys()`** метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются {{domxref("USVString")}} объектами.
 
-> **Примечание:** Метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```
diff --git a/files/ru/web/api/formdata/set/index.md b/files/ru/web/api/formdata/set/index.md
index 6ee19f6e27390c..4f309886b07a35 100644
--- a/files/ru/web/api/formdata/set/index.md
+++ b/files/ru/web/api/formdata/set/index.md
@@ -11,8 +11,6 @@ slug: Web/API/FormData/set
 
 Разница между `set()` и {{domxref("FormData.append")}} в том, что если заданный ключ уже существует, `set()` заменит данные в нем на новые, а {{domxref("FormData.append")}} добавит новое значение к остальным в конец.
 
-> **Примечание:** Данный метод также доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 Существует две формы использования данной функции: с двумя и тремя параметрами:
@@ -31,7 +29,8 @@ formData.set(name, value, filename);
 - `filename`{{optional_inline}}
   - : Имя файла, которое будет отправлено серверу ([`USVString`](/ru/docs/Web/API/USVString)), когда [`Blob`](/ru/docs/Web/API/Blob) или [`File`](/ru/docs/Web/API/File) прошёл проверку как второй параметр. Стандартное имя файла для [`Blob`](/ru/docs/Web/API/Blob) объектов это "blob".
 
-> **Примечание:** Если вы укажете [`Blob`](/ru/docs/Web/API/Blob) в качестве данных для включения в объект `FormData`, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.
+> [!NOTE]
+> Если вы укажете [`Blob`](/ru/docs/Web/API/Blob) в качестве данных для включения в объект `FormData`, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.
 
 ## Пример
 
diff --git a/files/ru/web/api/formdata/values/index.md b/files/ru/web/api/formdata/values/index.md
index 1fefb3f913449e..ce1a9332ad8266 100644
--- a/files/ru/web/api/formdata/values/index.md
+++ b/files/ru/web/api/formdata/values/index.md
@@ -9,8 +9,6 @@ slug: Web/API/FormData/values
 
 The **`FormData.values()`** метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем значениям в этом объекте. Значения - это {{domxref("USVString")}} или {{domxref("Blob")}} объекты.
 
-> **Примечание:** Метод доступен в [Web Workers](/ru/docs/Web/API/Web_Workers_API).
-
 ## Синтаксис
 
 ```
diff --git a/files/ru/web/api/gamepad/timestamp/index.md b/files/ru/web/api/gamepad/timestamp/index.md
index e346897d34b85f..cf7d663be704ad 100644
--- a/files/ru/web/api/gamepad/timestamp/index.md
+++ b/files/ru/web/api/gamepad/timestamp/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Gamepad/timestamp
 
 Идея состоит в том, чтобы позволить разработчику определить, были ли изменены данные для `axes` и `button` на аппаратном обеспечении. Значение должно быть установлено относительно атрибута `navigationStart` интерфейса `{{domxref("PerformanceTiming")}}`. Значения монотонно увеличиваются, поэтому их можно сравнивать, чтобы определить порядок изменений, т.к. новые значения всегда будут больше или равны старым.
 
-> **Примечание:** В данный момент, это свойство нигде не поддерживается.
+> [!NOTE]
+> В данный момент, это свойство нигде не поддерживается.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.md
index 4bd4e4b0e8efd2..af0e1db811abd1 100644
--- a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -13,7 +13,8 @@ HTML5 представляет большое количество необхо
 
 Когда новый геймпад подключается, на странице срабатывают события {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}. Если геймпад уже был подключён к моменту загрузки страницы, события {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} сработают, когда пользователь нажмёт на любую кнопку или передвинет стики.
 
-> **Примечание:** В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключённые геймпады будут автоматически видны.
+> [!NOTE]
+> В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключённые геймпады будут автоматически видны.
 
 Вы можете использовать {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:
 
@@ -115,7 +116,8 @@ The {{ domxref("Gamepad") }} object's properties are as follows:
 - `axes`: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).
 - `timestamp`: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the `axes` and `button` data have been updated from the hardware. The value must be relative to the `navigationStart` attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.
 
-> **Примечание:** The Gamepad object is available on the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.
+> [!NOTE]
+> The Gamepad object is available on the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.
 
 ### Using button information
 
diff --git a/files/ru/web/api/gamepadbutton/index.md b/files/ru/web/api/gamepadbutton/index.md
index 69e0a4e37e0a77..5767b30e2c7fa8 100644
--- a/files/ru/web/api/gamepadbutton/index.md
+++ b/files/ru/web/api/gamepadbutton/index.md
@@ -7,8 +7,6 @@ slug: Web/API/GamepadButton
 
 Объект **`GamepadButton`** возвращается путём получения любого элемента в массиве `buttons`, который является свойством интерфейса {{domxref("Gamepad")}}.
 
-> **Примечание:** Это работает только в Firefox Gecko 28 и выше; Chrome и более ранние версии Firefox по-прежнему возвращают массив чисел с плавающей точкой
-
 ## Свойства
 
 - {{domxref("GamepadButton.value")}} {{readonlyInline}}
diff --git a/files/ru/web/api/gamepadevent/gamepad/index.md b/files/ru/web/api/gamepadevent/gamepad/index.md
index 62d75b88e76b21..0050fc7f3ceb7a 100644
--- a/files/ru/web/api/gamepadevent/gamepad/index.md
+++ b/files/ru/web/api/gamepadevent/gamepad/index.md
@@ -7,7 +7,8 @@ slug: Web/API/GamepadEvent/gamepad
 
 Свойство **`GamepadEvent.gamepad`**, интерфейса **{{domxref("GamepadEvent")}},** возвращает объект {{domxref("Gamepad")}}, предоставляющий доступ к данным геймпада для событий [`gamepadconnected`](/ru/docs/Web/Events/gamepadconnected) и [`gamepaddisconnected`](/ru/docs/Web/Events/gamepaddisconnected).
 
-> **Примечание:** Эти события не возникают Chrome, только в Firefox. В Chrome вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.
+> [!NOTE]
+> Эти события не возникают Chrome, только в Firefox. В Chrome вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/geolocation/index.md b/files/ru/web/api/geolocation/index.md
index 3915ea7b8fa5a9..1e92ddbee09f23 100644
--- a/files/ru/web/api/geolocation/index.md
+++ b/files/ru/web/api/geolocation/index.md
@@ -9,7 +9,8 @@ slug: Web/API/Geolocation
 
 Объект с этим интерфейсом получается с помощью свойства {{domxref("NavigatorGeolocation.geolocation")}} и реализуется объектом {{domxref("Navigator")}}.
 
-> **Примечание:** По некоторым причинам, связанным с безопасностью, когда веб-страница пытается получить доступ к местоположению, пользователь будет уведомлен, а также будет запрошено разрешение. Имейте в виду, что у каждого браузера есть свои политики и методы для запроса этого разрешения.
+> [!NOTE]
+> По некоторым причинам, связанным с безопасностью, когда веб-страница пытается получить доступ к местоположению, пользователь будет уведомлен, а также будет запрошено разрешение. Имейте в виду, что у каждого браузера есть свои политики и методы для запроса этого разрешения.
 
 ## Свойства
 
diff --git a/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.md b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.md
index 8f2f7928ef85f1..55e46b496ba170 100644
--- a/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.md
+++ b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.md
@@ -25,7 +25,8 @@ if ("geolocation" in navigator) {
 
 Чтобы получить текущее местоположение пользователя, вы должны вызвать метод {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Это инициирует асинхронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр - объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.
 
-> **Примечание:** По умолчанию {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.
+> [!NOTE]
+> По умолчанию {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.
 
 ```js
 navigator.geolocation.getCurrentPosition(function (position) {
@@ -39,7 +40,8 @@ navigator.geolocation.getCurrentPosition(function (position) {
 
 Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приёмов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.
 
-> **Примечание:** вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.
+> [!NOTE]
+> Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.
 
 ```js
 var watchID = navigator.geolocation.watchPosition(function (position) {
diff --git a/files/ru/web/api/history/index.md b/files/ru/web/api/history/index.md
index 569ce88b039f0c..496f896df1e8f5 100644
--- a/files/ru/web/api/history/index.md
+++ b/files/ru/web/api/history/index.md
@@ -30,28 +30,20 @@ _History интерфейс не наследует никаких родите
 
   - : Делает вызов предыдущей страницы из истории, если она существует. Эквивалент метода `history.go(-1)`.
 
-    > **Примечание:** Вызов этого метода, чтобы вернуться к первой странице в истории сессии не имеет никакого эффекта и не вызывает исключений.
-
 - {{domxref("History.forward()")}}
 
   - : Переход к следующей странице в истории сессии, то же самое действие, как и при нажатии пользователем кнопки Forward в браузере. Эквивалентно history.go(1).
 
-    > **Примечание:** Вызов этого метода, чтобы перейти к последней странице в истории сессии не имеет никакого эффекта и не вызывает исключений.
-
 - {{domxref("History.go()")}}
   - : Загружает страницу из истории сессии, определяя её положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда _integerDelta_ выходит за предел (например, -1, когда нет ранее посещённых страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, [который поддерживает строки URL в качестве аргумента]()).
 - {{domxref("History.pushState()")}}
 
   - : Помещает полученные данные в стек истории сессии с определённым заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. [управление историей браузера](/en/DOM/Manipulating_the_browser_history).
 
-    > **Примечание:** В Gecko 2.0 до Gecko 5.0, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0, объект обрабатывается по [алгоритму структурированного клонирования](/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). Он позволяет передавать более широкое разнообразие объектов.
-
 - {{domxref("History.replaceState()")}}
 
   - : Обновляет последнюю запись в стеке истории содержащий определённые данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.[управление историей браузера](/en/DOM/Manipulating_the_browser_history).
 
-    > **Примечание:** В Gecko 2.0 до Gecko 5.0, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0, объект обрабатывается по [алгоритму структурированного клонирования](/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). Он позволяет передавать более широкое разнообразие объектов.
-
 ## Спецификации
 
 {{Specifications}}
diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.md b/files/ru/web/api/history_api/working_with_the_history_api/index.md
index 2b7bb4077f40e9..b4236385d2b2fa 100644
--- a/files/ru/web/api/history_api/working_with_the_history_api/index.md
+++ b/files/ru/web/api/history_api/working_with_the_history_api/index.md
@@ -29,10 +29,6 @@ history.pushState(stateObj, "page 2", "bar.html");
 
 Если пользователь ещё раз нажимает кнопку **"Назад"**, URL изменится на `http://mozilla.org/foo.html`, а в документе снова произойдёт событие `popstate`, на этот раз с объектом состояния, имеющим значение `null`. В этом случае возврат назад также не меняет содержимое документа, как и на предыдущем шаге, хотя документ может сам обновить своё содержимое после получения события `popstate`.
 
-> **Примечание:** Вызов `history.back()` обычно ведёт себя так же, как нажатие на кнопку **"Назад"**. Но есть одно важное исключение:
->
-> _После использования_ `history.pushState()`, вызов `history.back()` _не вызывает событие_ `popstate`. Нажатие в браузере на кнопку "Назад" (всё ещё) делает это.
-
 ### Метод pushState()
 
 Метод `pushState()` принимает три параметра: _объект состояния_, _заголовок_ (в данный момент игнорируется) и (необязательно) параметр "_URL"_.
@@ -50,8 +46,6 @@ history.pushState(stateObj, "page 2", "bar.html");
 - **URL**
   - : Через этот параметр передаётся URL-адрес новой новый записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова `pushState()`, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе `pushState()` выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.
 
-> **Примечание:** Начиная с Gecko 2.0 и до Gecko 5.0, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0, объект сериализуется с помощью [алгоритма структурированного клонирования](/en/DOM/The_structured_clone_algorithm). Это позволяет безопасно передавать более широкий спектр объектов.
-
 Вызов `pushState()` в некоторой степени похож на установку `window.location = "#foo"`, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.
 
 Но у `pushState()` есть несколько преимуществ:
@@ -73,8 +67,6 @@ history.pushState(stateObj, "page 2", "bar.html");
 
 `replaceState()` особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.
 
-> **Примечание:** Начиная с Gecko 2.0 и до Gecko 5.0, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0, объект сериализуется с помощью [алгоритма структурированного клонирования](/en/DOM/The_structured_clone_algorithm). Это позволяет безопасно передавать более широкий спектр объектов.
-
 ### Пример метода replaceState()
 
 Предположим, на странице `http://mozilla.org/foo.html` выполняется следующий JavaScript-код:
diff --git a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.md
index f8dea36b47ea39..ce9422bf61915e 100644
--- a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.md
+++ b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 
 Ниже описаны шаги, которые происходят при drag and drop операции.
 
-> **Примечание:** Drag операции описываются в документе, используя {{domxref("DataTransfer")}} интерфейс. Этот документ не использует не{{domxref("DataTransferItem")}} интерфейс, не{{domxref("DataTransferItemList")}} интерфейс.
+> [!NOTE]
+> Drag операции описываются в документе, используя {{domxref("DataTransfer")}} интерфейс. Этот документ не использует не{{domxref("DataTransferItem")}} интерфейс, не{{domxref("DataTransferItemList")}} интерфейс.
 
 ## `draggable` атрибуты
 
@@ -35,7 +36,8 @@ slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 
 Атрибут `[`draggable`](/ru/docs/Web/HTML/Global_attributes#draggable)` может быть использован для любого элемента, включая изображения и ссылки. Однако, для последних двух, значение по умолчанию - `true`, т.о. вы можете только использовать атрибут `[`draggable`](/ru/docs/Web/HTML/Global_attributes#draggable)` со значением `false` для отключение перетаскивания этих элементов.
 
-> **Примечание:** Когда элемент становится перетаскиваемыми, текст или другие элементы в нем больше не могут быть выбраны обычным способом, щёлкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу Alt чтобы выбрать текст с помощью мыши или клавиатуры.
+> [!NOTE]
+> Когда элемент становится перетаскиваемыми, текст или другие элементы в нем больше не могут быть выбраны обычным способом, щёлкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу Alt чтобы выбрать текст с помощью мыши или клавиатуры.
 
 ## Начало операции перетаскивания
 
@@ -231,7 +233,8 @@ However, you can also update the user interface with an insertion point or highl
 
 In this example, the element with the class `droparea` will receive a 1 pixel black outline while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the `{{event("dragenter")}}` event.
 
-> **Примечание:** You must cancel the `{{event("dragenter")}}` event for this pseudoclass to apply, as this state is not checked for the `{{event("dragover")}}` event.
+> [!NOTE]
+> You must cancel the `{{event("dragenter")}}` event for this pseudoclass to apply, as this state is not checked for the `{{event("dragover")}}` event.
 
 For more complex visual effects, you can also perform other operations during the `{{event("dragenter")}}` event. For example, by inserting an element at the location where the drop will occur. This might be an insertion marker, or an element that represents the dragged element in its new location. To do this, you could create an [image](/ru/docs/XUL/image) or [separator](/ru/docs/XUL/separator) element and simply insert it into the document during the `{{event("dragenter")}}` event.
 
diff --git a/files/ru/web/api/html_drag_and_drop_api/index.md b/files/ru/web/api/html_drag_and_drop_api/index.md
index a8d8ae36bbb556..670e283e896091 100644
--- a/files/ru/web/api/html_drag_and_drop_api/index.md
+++ b/files/ru/web/api/html_drag_and_drop_api/index.md
@@ -30,7 +30,8 @@ HTML drag-and-drop использует {{domxref("Event","модель собы
 | {{domxref('Document/dragstart_event', 'dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | …пользователь начал перетаскивать элемент. (Подробнее в [Начало операции перетаскивания](/ru/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragstart).)                                    |
 | {{domxref('Document/drop_event', 'drop')}}           | {{domxref('GlobalEventHandlers.ondrop','ondrop')}}           | …элемент сброшен в допустимую зону сброса. (Подробнее в [Выполнение сброса](/ru/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drop).)                                                      |
 
-> **Примечание:** При перемещении файла из операционной системы в браузер ни событие `dragstart`, ни `dragend` не вызывается.
+> [!NOTE]
+> При перемещении файла из операционной системы в браузер ни событие `dragstart`, ни `dragend` не вызывается.
 
 ## Интерфейсы
 
diff --git a/files/ru/web/api/htmlcanvaselement/toblob/index.md b/files/ru/web/api/htmlcanvaselement/toblob/index.md
index fb75f8e7e9a96b..3f51ac42099359 100644
--- a/files/ru/web/api/htmlcanvaselement/toblob/index.md
+++ b/files/ru/web/api/htmlcanvaselement/toblob/index.md
@@ -92,7 +92,8 @@ canvas.toBlob(
 
 ### Сохранение toBlob на диске ОС(chrome/add-on context only)
 
-> **Примечание:** Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.
+> [!NOTE]
+> Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.
 
 ```js
 var canvas = document.getElementById("canvas");
diff --git a/files/ru/web/api/htmlcollection/index.md b/files/ru/web/api/htmlcollection/index.md
index e8cced795c65fe..554cdf1a5b33e1 100644
--- a/files/ru/web/api/htmlcollection/index.md
+++ b/files/ru/web/api/htmlcollection/index.md
@@ -7,7 +7,8 @@ slug: Web/API/HTMLCollection
 
 Интерфейс **`HTMLCollection`** является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.
 
-> **Примечание:** Интерфейс назван `HTMLCollection` по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML-элементов.
+> [!NOTE]
+> Интерфейс назван `HTMLCollection` по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML-элементов.
 
 `HTMLCollection`, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.
 
diff --git a/files/ru/web/api/htmldialogelement/index.md b/files/ru/web/api/htmldialogelement/index.md
index 6a82c22abe8bd5..6dd331a8e2390a 100644
--- a/files/ru/web/api/htmldialogelement/index.md
+++ b/files/ru/web/api/htmldialogelement/index.md
@@ -89,7 +89,8 @@ _Наследует методы своего родителя, {{domxref("HTMLE
 
 ```
 
-> **Примечание:** You can find this example on GitHub as [htmldialogelement-basic](https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html) ([see it live also](https://mdn.github.io/dom-examples/htmldialogelement-basic/)).
+> [!NOTE]
+> You can find this example on GitHub as [htmldialogelement-basic](https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html) ([see it live also](https://mdn.github.io/dom-examples/htmldialogelement-basic/)).
 
 ## Спецификации
 
diff --git a/files/ru/web/api/htmldialogelement/open/index.md b/files/ru/web/api/htmldialogelement/open/index.md
index b55212f0cb8872..c0e49d98e01188 100644
--- a/files/ru/web/api/htmldialogelement/open/index.md
+++ b/files/ru/web/api/htmldialogelement/open/index.md
@@ -82,7 +82,8 @@ var myOpenValue = dialogInstance.open;
 
 ```
 
-> **Примечание:** вы можете найти данный пример на [htmldialogelement-basic](https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html) ([see it live also](https://mdn.github.io/dom-examples/htmldialogelement-basic/)).
+> [!NOTE]
+> Вы можете найти данный пример на [htmldialogelement-basic](https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html) ([see it live also](https://mdn.github.io/dom-examples/htmldialogelement-basic/)).
 
 ## Спецификации
 
diff --git a/files/ru/web/api/htmlelement/accesskey/index.md b/files/ru/web/api/htmlelement/accesskey/index.md
index 8de4be0d41ed55..62371c9b0d0d81 100644
--- a/files/ru/web/api/htmlelement/accesskey/index.md
+++ b/files/ru/web/api/htmlelement/accesskey/index.md
@@ -9,9 +9,11 @@ slug: Web/API/HTMLElement/accessKey
 
 Свойство **accessKey** позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.
 
-> **Примечание:** По сути, **accessKey** задаёт значение для [одноимённого атрибута](/ru/docs/Web/HTML/Global_attributes/accesskey)...
+> [!NOTE]
+> По сути, **accessKey** задаёт значение для [одноимённого атрибута](/ru/docs/Web/HTML/Global_attributes/accesskey)...
 
-> **Предупреждение:** Данное свойство использовать не рекомендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.
+> [!WARNING]
+> Данное свойство использовать не рекомендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/htmlelement/hidden/index.md b/files/ru/web/api/htmlelement/hidden/index.md
index b3a2fbf8453f4a..a684e73172304a 100644
--- a/files/ru/web/api/htmlelement/hidden/index.md
+++ b/files/ru/web/api/htmlelement/hidden/index.md
@@ -17,7 +17,8 @@ HTMLElement Свойство **`hidden`** является {{jsxref("Boolean")}}
 - Скрытие панелей в диалоговом окне с вкладками
 - Скрытие содержимого в одной презентации, предполагая, что оно будет видимым в других
 
-> **Примечание:** Элементы, которые не hidden не должны ссылаться на элементы которые hidden.
+> [!NOTE]
+> Элементы, которые не hidden не должны ссылаться на элементы которые hidden.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/htmlelement/offsetheight/index.md b/files/ru/web/api/htmlelement/offsetheight/index.md
index 6178e42687d044..103dad537bbf5c 100644
--- a/files/ru/web/api/htmlelement/offsetheight/index.md
+++ b/files/ru/web/api/htmlelement/offsetheight/index.md
@@ -11,7 +11,8 @@ Typically, an element's `offsetHeight` is a measurement which includes the eleme
 
 For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.
 
-> **Примечание:** This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Syntax
 
diff --git a/files/ru/web/api/htmlelement/offsetwidth/index.md b/files/ru/web/api/htmlelement/offsetwidth/index.md
index 979eb7e2a95c44..3bd8f653015c4d 100644
--- a/files/ru/web/api/htmlelement/offsetwidth/index.md
+++ b/files/ru/web/api/htmlelement/offsetwidth/index.md
@@ -15,7 +15,8 @@ var offsetWidth = element.offsetWidth;
 
 `offsetWidth` — свойство только для чтения
 
-> **Примечание:** Это свойство возвращает целочисленное значение. Если вам требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.
+> [!NOTE]
+> Это свойство возвращает целочисленное значение. Если вам требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.
 
 ## Пример
 
diff --git a/files/ru/web/api/htmlformelement/elements/index.md b/files/ru/web/api/htmlformelement/elements/index.md
index 16387afc19ce08..ea8f63f3c8aa51 100644
--- a/files/ru/web/api/htmlformelement/elements/index.md
+++ b/files/ru/web/api/htmlformelement/elements/index.md
@@ -15,7 +15,8 @@ l10n:
 
 До HTML 5 возвращаемым объектом был {{domxref("HTMLCollection")}}, на котором основан `HTMLFormControlsCollection`.
 
-> **Примечание:** Аналогичным образом можно получить список всех форм, содержащихся в документе, используя свойство документа {{domxref("Document.forms", "forms")}}.
+> [!NOTE]
+> Аналогичным образом можно получить список всех форм, содержащихся в документе, используя свойство документа {{domxref("Document.forms", "forms")}}.
 
 ## Значение
 
diff --git a/files/ru/web/api/htmlimageelement/image/index.md b/files/ru/web/api/htmlimageelement/image/index.md
index e532320ff8ea26..22f0f3e79b9553 100644
--- a/files/ru/web/api/htmlimageelement/image/index.md
+++ b/files/ru/web/api/htmlimageelement/image/index.md
@@ -29,4 +29,5 @@ console.log(img);
 
 ```
 
-> **Примечание:** Примечание: этот конструктор существует только для истории, и возвращает экземпляр [HTMLImageElement](/ru/docs/Web/API/HTMLImageElement) точно также, как и `document.createElement('img')`.
+> [!NOTE]
+> Этот конструктор существует только для истории, и возвращает экземпляр [HTMLImageElement](/ru/docs/Web/API/HTMLImageElement) точно также, как и `document.createElement('img')`.
diff --git a/files/ru/web/api/htmllinkelement/index.md b/files/ru/web/api/htmllinkelement/index.md
index 80f76b1bff661b..c9dd46c9403182 100644
--- a/files/ru/web/api/htmllinkelement/index.md
+++ b/files/ru/web/api/htmllinkelement/index.md
@@ -48,7 +48,8 @@ _Наследует свойства от своего родителя, {{domxr
 
   - : Is a {{domxref("DOMString")}} representing the reverse relationship of the linked resource from the resource to the document.
 
-    > **Примечание:** Currently the W3C HTML 5.2 spec states that `rev` is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.
+    > [!NOTE]
+    > Currently the W3C HTML 5.2 spec states that `rev` is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.
 
 - {{domxref("HTMLLinkElement.target")}}
   - : Is a {{domxref("DOMString")}} representing the name of the target frame to which the resource applies.
diff --git a/files/ru/web/api/htmlmediaelement/index.md b/files/ru/web/api/htmlmediaelement/index.md
index 38611baafd76c2..e35758d431d3ed 100644
--- a/files/ru/web/api/htmlmediaelement/index.md
+++ b/files/ru/web/api/htmlmediaelement/index.md
@@ -19,7 +19,8 @@ _Этот интерфейс также наследует свойства от
 
   - : {{Jsxref ("Boolean")}}, который отражает атрибут HTML [`autoplay`](/ru/docs/Web/HTML/Element/video#autoplay), указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания.
 
-    > **Примечание:** Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить её (требуется, чтобы пользователь специально включил её). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.
+    > [!NOTE]
+    > Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить её (требуется, чтобы пользователь специально включил её). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.
 
 - {{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}
   - : Возвращает объект {{domxref ("TimeRanges")}}, который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству `buffered`.
@@ -97,8 +98,6 @@ _Этот интерфейс также наследует свойства от
 
   - : Возвращает список объектов {{domxref ("VideoTrack")}}, содержащихся в элементе.
 
-    > **Примечание:** Gecko поддерживает воспроизведение только одной дорожки, а разбор метаданных дорожек доступен только для носителей с форматом контейнера Ogg.
-
 - {{domxref("HTMLMediaElement.volume")}}
   - : Двойной показатель громкости звука, от 0,0 (тихий) до 1,0 (самый громкий).
 
diff --git a/files/ru/web/api/indexeddb_api/index.md b/files/ru/web/api/indexeddb_api/index.md
index 1f35435542076a..14d4459e9364f0 100644
--- a/files/ru/web/api/indexeddb_api/index.md
+++ b/files/ru/web/api/indexeddb_api/index.md
@@ -9,7 +9,8 @@ IndexedDB — низкоуровневое API для клиентского х
 
 {{AvailableInWorkers}}
 
-> **Примечание:** IndexedDB API мощные, но могут казаться слишком сложными для простых задач. Если вы предпочитаете простые API, попробуйте библиотеки, такие как [localForage](https://localforage.github.io/localForage/), [dexie.js](http://www.dexie.org/) и [ZangoDB](https://github.com/erikolson186/zangodb), делающие IndexedDB более дружественным.
+> [!NOTE]
+> IndexedDB API мощные, но могут казаться слишком сложными для простых задач. Если вы предпочитаете простые API, попробуйте библиотеки, такие как [localForage](https://localforage.github.io/localForage/), [dexie.js](http://www.dexie.org/) и [ZangoDB](https://github.com/erikolson186/zangodb), делающие IndexedDB более дружественным.
 
 ## Ключевые концепции и использование
 
@@ -19,7 +20,8 @@ IndexedDB транзакционная система базы данных, к
 - Изучите асинхронное использование IndexedDB по первоначальным принципам с руководством [Using IndexedDB](/ru/docs/Web/API/IndexedDB_API/Using_IndexedDB).
 - Найдите рекомендации по разработке, чтобы заставить ваш сайт работать вне сети, на странице [Offline Apps](/en-US/Apps/Build/Offline).
 
-> **Примечание:** Как и большинство решений web-хранения, IndexedDB следует аналогичной [same-origin policy](http://www.w3.org/Security/wiki/Same_Origin_Policy). Поэтому вы имеете доступ к хранилищу данных в пределах одного домена, но не можете получать их с любого другого.
+> [!NOTE]
+> Как и большинство решений web-хранения, IndexedDB следует аналогичной [same-origin policy](http://www.w3.org/Security/wiki/Same_Origin_Policy). Поэтому вы имеете доступ к хранилищу данных в пределах одного домена, но не можете получать их с любого другого.
 
 ### Синхронность и асинхронность
 
diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.md b/files/ru/web/api/indexeddb_api/using_indexeddb/index.md
index 559846b9b48987..25cfccba825f00 100644
--- a/files/ru/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.md
@@ -76,7 +76,8 @@ var request = window.indexedDB.open("MyTestDatabase", 3);
 
 Второй параметр метода open - это версия базы данных. Версия определяет схему базы данных - хранилище объектов и их структуру . Если база данных ещё не существует, то она создаётся операцией `open,` затем срабатывает триггер события `onupgradeneeded` и после этого ваш обработчик этого события создаёт схему базы данных. Если же база данных уже существует, а вы указываете новый номер версии, то сразу же срабатывает триггер события `onupgradeneeded,` позволяя вам обновить схему базы данных в обработчике. Подробнее об этом см. в [Обновление версии базы данных](#updating_the_version_of_the_database) ниже и на странице {{ domxref("IDBFactory.open") }} справочника
 
-> **Предупреждение:** Версия базы данных имеет внутреннее представление `unsigned long long` number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события `upgradeneeded`. Например, не используйте значение 2.4 как версию базы данных:
+> [!WARNING]
+> Версия базы данных имеет внутреннее представление `unsigned long long` number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события `upgradeneeded`. Например, не используйте значение 2.4 как версию базы данных:
 >
 > ```js
 > var request = indexedDB.open("MyTestDatabase", 2.4); // не делайте так, потому что версия будет округлена до 2
@@ -145,7 +146,8 @@ request.onupgradeneeded = function (event) {
 
 Версия числа без знака с длиной `long long, может быть очень большим.`
 
-> **Предупреждение:** Так же вы не можете использовать float, его значение будет округлено до ближайшего целого, со всеми вытекающими из этого ошибками:
+> [!WARNING]
+> Так же вы не можете использовать float, его значение будет округлено до ближайшего целого, со всеми вытекающими из этого ошибками:
 >
 > ```js
 > var request = indexedDB.open("MyTestDatabase", 2.4); // Будет округлено до 2
@@ -340,7 +342,8 @@ objectStore.openCursor().onsuccess = function (event) {
 };
 ```
 
-> **Предупреждение:** The following function is not part of the IndexedDB standard!
+> [!WARNING]
+> The following function is not part of the IndexedDB standard!
 
 Mozilla has also implemented `getAll()` to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:
 
diff --git a/files/ru/web/api/keyboardevent/index.md b/files/ru/web/api/keyboardevent/index.md
index d22bb1b6aad67d..f06358387908e8 100644
--- a/files/ru/web/api/keyboardevent/index.md
+++ b/files/ru/web/api/keyboardevent/index.md
@@ -67,16 +67,10 @@ _Этот интерфейс также наследует свойства от
 
   - : Возвращает {{domxref("DOMString")}}, представляющий символьное значение клавиши. Если клавиша соответствует печатному символу, то это значение будет непустой Unicode-строкой, содержащей этот символ. Если клавиша не имеет печатного представления, то значение будет пустой строкой.
 
-    > **Примечание:** Если клавиша использовалась как макрос, который вставляет несколько символов, то значением будет вся строка, а не только первый символ.
-
-    > **Предупреждение:** Эта функция была удалена из событий "DOM Level 3 Events". Она поддерживается только IE9+ и Microsoft Edge.
-
 - {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
 
   - : Возвращает {{jsxref("Number")}}, представляющий Unicode-номер клавиши; этот атрибут использовался только с событием `keypress`. Для клавиш, чей `char`-атрибут содержит несколько символов, то значением этого атрибута будет Unicode-значение первого символа. В Firefox 26 этот атрибут возвращал коды для печатных символов.
 
-    > **Предупреждение:** Это нерекомендуемый к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.
-
 - {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
   - : Возвращает {{domxref("DOMString")}} с кодом клавиши, представленного события.
 - {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
@@ -95,8 +89,6 @@ _Этот интерфейс также наследует свойства от
 
   - : Возвращает {{jsxref("Number")}}, представляющее системный и зависящий от конкретной реализации числовой код, идентифицирующий немодифицированное значение нажатой клавиши.
 
-    > **Предупреждение:** Это нерекомендуемый к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.
-
 - {{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
   - : Это свойство нестандартное, и его использование не рекомендуется в пользу {{domxref("KeyboardEvent.key")}}. Это часть устаревшего "DOM Level 3 Events".
 - {{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
@@ -105,8 +97,6 @@ _Этот интерфейс также наследует свойства от
 
   - : Возвращает {{domxref("DOMString")}}, представляет строку-локаль, которая показывает текущую конфигурацию локали клавиатуры. Это может быть пустая строка, если браузер или устройство не имеют понятия о локали клавиатуры.
 
-    > **Примечание:** Это не описание языка ввода текста. Пользователь может использовать одну раскладку клавиатуры для ввода на разных языках.
-
 - {{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
   - : Возвращает {{jsxref("Number")}}, представляющее расположение клавиши на клавиатуре или другом устройстве ввода.
 - {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
@@ -139,8 +129,6 @@ _Этот интерфейс также наследует свойства от
 
   - : Возвращает {{jsxref("Number")}}, представляющее зависящее от конкретной реализации значение системного кода нажатой клавиши, который представляет собой немодифицируемое значение; это обычно то же, что свойство `keyCode`.
 
-    > **Предупреждение:** Это нерекомендуемый к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.
-
 ## Примечания
 
 Особенности событий `keydown`, `keypress` и `keyup`. Для большинства клавиш Gecko обрабатывает последовательность событий так:
@@ -153,7 +141,8 @@ _Этот интерфейс также наследует свойства от
 
 Некоторые клавиши переключают подсветку индикаторов, такие как Caps Lock, Num Lock и Scroll Lock. На Windows и Linux эти клавиши создают только лишь события `keydown` и `keyup`.
 
-> **Примечание:** В Linux Firefox 12 и более ранних также обрабатывается событие `keypress`.
+> [!NOTE]
+> В Linux Firefox 12 и более ранних также обрабатывается событие `keypress`.
 
 Но в связи с ограничениями Mac OS X модель событий клавиши Caps Lock включает в себя только `keydown`. События Num Lock поддерживались на старых ноутбуках (2007 года и старше), но затем Mac OS X их перестала поддерживать, даже на внешних клавиатурах. На совсем старых MacBooks клавиша Num Lock вообще не генерирует никаких событий. Движок Gecko не поддерживает клавишу Scroll Lock, если это внешняя клавиатура с клавишей F14. В некоторых старых версиях Firefox эта клавиша генерирует событие `keypress`; это являлось нестабильным поведением и описано в [Firefox bug 602812](https://bugzil.la/602812).
 
@@ -196,8 +185,6 @@ _Этот интерфейс также наследует свойства от
 - Linux
   - : Поведение событий зависит от конкретной платформы. Они могут иметь как Windows-тип и Mac-тип, так и свои собственные модели поведения.
 
-> **Примечание:** при вызове события вручную _не_ происходит никакого действия по умолчанию, связанного с данным событием. Например, если вызвать вручную событие нажатия клавиши, то никакая буква на поле вводимого текста не появится. В случае событий пользовательского интерфейса, что важно по соображениям безопасности, это предотвращает работу скриптов в браузере, которые эмулируют работу пользователя.
-
 ## Пример
 
 ```html
diff --git a/files/ru/web/api/keyboardevent/key/index.md b/files/ru/web/api/keyboardevent/key/index.md
index a946553f91e7f4..d7c7cb7c6b8dde 100644
--- a/files/ru/web/api/keyboardevent/key/index.md
+++ b/files/ru/web/api/keyboardevent/key/index.md
@@ -151,7 +151,8 @@ btnClearConsole.addEventListener("click", (e) => {
 
 {{EmbedLiveSample('KeyboardEvent_sequence_example')}}
 
-> **Примечание:** On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{event("beforeinput")}} and {{event("input")}} events, you may get incorrect output on those lines of the log output.
+> [!NOTE]
+> On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{event("beforeinput")}} and {{event("input")}} events, you may get incorrect output on those lines of the log output.
 
 ### Case 1
 
diff --git a/files/ru/web/api/media_capture_and_streams_api/taking_still_photos/index.md b/files/ru/web/api/media_capture_and_streams_api/taking_still_photos/index.md
index 563f4d3152e6d5..df55d3d7531c9d 100644
--- a/files/ru/web/api/media_capture_and_streams_api/taking_still_photos/index.md
+++ b/files/ru/web/api/media_capture_and_streams_api/taking_still_photos/index.md
@@ -206,7 +206,8 @@ slug: Web/API/Media_Capture_and_Streams_API/Taking_still_photos
 
 Затем, если ширина и высота не равны нулю (имеется в виду, что есть, по крайней мере, потенциально допустимые данные изображения), мы устанавливаем ширину и высоту `canvas`, чтобы они соответствовали ширине захваченного кадра, затем вызываем метод {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} , что бы отрисовать текущий кадр видео в контексте `canvas`, заполнив весь холст изображением кадра.
 
-> **Примечание:** Используется факт того, что интерфейс {{domxref("HTMLVideoElement")}} похож на интерфейс {{domxref("HTMLImageElement")}} для любых API , которые принимают `HTMLImageElement` в качестве параметра, с текущим кадром видео, представленным как содержимое изображения.
+> [!NOTE]
+> Используется факт того, что интерфейс {{domxref("HTMLVideoElement")}} похож на интерфейс {{domxref("HTMLImageElement")}} для любых API , которые принимают `HTMLImageElement` в качестве параметра, с текущим кадром видео, представленным как содержимое изображения.
 
 Как только `canvas` будет содержать захваченное видео, конвертируем его в PNG формат, вызывая метод {{domxref("HTMLCanvasElement.toDataURL()")}} на нем; наконец вызываем метод {{domxref("Element.setAttribute", "photo.setAttribute()")}} отображая захваченное изображение в элементе изображения (бокса фотографии).
 
diff --git a/files/ru/web/api/mediadevices/getusermedia/index.md b/files/ru/web/api/mediadevices/getusermedia/index.md
index fe704a81a9065f..571dd01506e6c7 100644
--- a/files/ru/web/api/mediadevices/getusermedia/index.md
+++ b/files/ru/web/api/mediadevices/getusermedia/index.md
@@ -9,7 +9,8 @@ slug: Web/API/MediaDevices/getUserMedia
 
 Он возвращает {{jsxref("Promise")}} , который, в случае согласия пользователя, разрешается {{domxref("MediaStream")}} объектом. Если пользователь отказывает в разрешении, или медиа устройство не доступно, тогда промис отменяется с объектами типа `NotAllowedError` или `NotFoundError` соответственно.
 
-> **Примечание:** Возможно, что промис ни разрешиться, ни отмениться, в случае, когда пользователь не сделает выбор и запрос проигнорирует.
+> [!NOTE]
+> Возможно, что промис ни разрешиться, ни отмениться, в случае, когда пользователь не сделает выбор и запрос проигнорирует.
 
 Обычно, разработчик получает доступ к единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}} метод, возвращающий поток:
 
@@ -39,7 +40,8 @@ navigator.mediaDevices
   });
 ```
 
-> **Примечание:** Если документ загружен не безопасно, значение `navigator.mediaDevices` будет `undefined`, и нельзя будет использовать метод `getUserMedia()`. Смотри [Security](#security) для дополнительной информации о дальнейших вопросах безопасности, связанной с использованием метода `getUserMedia()`.
+> [!NOTE]
+> Если документ загружен не безопасно, значение `navigator.mediaDevices` будет `undefined`, и нельзя будет использовать метод `getUserMedia()`. Смотри [Security](#security) для дополнительной информации о дальнейших вопросах безопасности, связанной с использованием метода `getUserMedia()`.
 
 ## Синтаксис
 
@@ -165,7 +167,8 @@ var promise = navigator.mediaDevices.getUserMedia(constraints);
 
   - : Возникает если, одно или несколько запрашиваемых устройств не может быть использованы в настоящее время. Это происходит тогда, когда контекст браузера является не безопасным (страница была загружена используя протокол HTTP вместо HTTPS), а также, если пользователь не разрешил доступ текущему экземпляру браузера к устройству, пользователь отказал в доступе в текущей сессии, или пользователь отказал в доступе к медиаустройствам глобально. Для браузеров, которые поддерживают управление медиаразрешениями с помощью [Feature Policy](/ru/docs/Web/HTTP/Feature_Policy), такая ошибка возвращается если Feature Policy не сконфигурирована для разрешение доступа к медиаустройству или устройствам
 
-    > **Примечание:** Более старые версии спецификации использовали вместо этого SecurityError. `SecurityError` имеет новое значение.
+    > [!NOTE]
+    > Более старые версии спецификации использовали вместо этого SecurityError. `SecurityError` имеет новое значение.
 
 - `NotFoundError (Не найдено)`
   - : Возникает если, типы медиа треков, удовлетворяющие переданным значениям, не найдены.
@@ -175,7 +178,8 @@ var promise = navigator.mediaDevices.getUserMedia(constraints);
 
   - : Возникает если, в результате указанных ограничений не было найдено устройств, отвечающих запрошенным критериям. Ошибка является объектом типа `OverconstrainedError` и имеет свойство `constraint`, строковое значение которого является именем ограничения, которое было невозможно встретить, и свойство `message`, содержащее читаемую человеком строку, объясняющую проблему.
 
-    > **Примечание:** Ошибка может возникнуть даже, если пользователь ещё не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.
+    > [!NOTE]
+    > Ошибка может возникнуть даже, если пользователь ещё не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.
 
 - `SecurityError (ошибка безопасности)`
   - : Возникает если, медиа поддержка отключена в {{domxref("Document")}} на котором был вызван метод `getUserMedia()`. Механизм по которому медиа поддержка включается и отключается находиться в компетенции браузера пользователя.
@@ -204,7 +208,8 @@ var promise = navigator.mediaDevices.getUserMedia(constraints);
 
 Существуют несколько способов управлением безопасностью и контролем в {{Glossary("user agent")}}. Для этого можно использовать метод `getUserMedia()` , который возвращает объекты ошибок, относящиеся к безопасности.
 
-> **Примечание:** Модель безопасности для метода `getUserMedia()` находиться в процессе разработки. Первоначально спроектированный механизм безопасности находиться в процессе замещения Feature Policy, поэтому различные браузеры имеют разный уровень поддержки безопасности, используют различные механизмы. Вам необходимо осторожно тестировать свой код на различных устройствах и браузерах, чтобы удостовериться в его уверенной работоспособности.
+> [!NOTE]
+> Модель безопасности для метода `getUserMedia()` находиться в процессе разработки. Первоначально спроектированный механизм безопасности находиться в процессе замещения Feature Policy, поэтому различные браузеры имеют разный уровень поддержки безопасности, используют различные механизмы. Вам необходимо осторожно тестировать свой код на различных устройствах и браузерах, чтобы удостовериться в его уверенной работоспособности.
 
 #### Feature Policy (Функциональная политика)
 
diff --git a/files/ru/web/api/mediarecorder/dataavailable_event/index.md b/files/ru/web/api/mediarecorder/dataavailable_event/index.md
index 92eb7d23138fc4..a17f04798ef60d 100644
--- a/files/ru/web/api/mediarecorder/dataavailable_event/index.md
+++ b/files/ru/web/api/mediarecorder/dataavailable_event/index.md
@@ -14,7 +14,8 @@ slug: Web/API/MediaRecorder/dataavailable_event
 - При вызове метода {{domxref("MediaRecorder.requestData()")}} порция медиаданных, объем которых был захвачен с момента начала записи, или после последнего вызова события `dataavailable` помещаются в вновь созданный объект типа `Blob` , и захват порций медиаданных продолжается уже в этот новый объект `blob`.
 - Если свойство `timeslice` передаётся в метод {{domxref("MediaRecorder.start()")}}, который запускает захват порций медиаданных, событие `dataavailable` запускается каждые `timeslice` миллисекунд. Это значит, что каждый объект типа `blob` будет иметь специфический размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так : `recorder.start(1000);` то событие `dataavailable` будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типа `blob` , который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойство `timeslice` вместе с {{domxref("MediaRecorder.stop()")}} и {{domxref("MediaRecorder.requestData()")}} для создания нескольких объектов типа `blob` одинакового объёма данных , плюс последние короткие объекты типа `blob.`
 
-> **Примечание:** Медиаданные, содержащиеся в объекте типа {{domxref("Blob")}} доступны в свойстве `data` , возвращаемого в параметре объекта события {{event("dataavailable")}}.
+> [!NOTE]
+> Медиаданные, содержащиеся в объекте типа {{domxref("Blob")}} доступны в свойстве `data` , возвращаемого в параметре объекта события {{event("dataavailable")}}.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/mediarecorder/index.md b/files/ru/web/api/mediarecorder/index.md
index 6578b2fe3a9313..a8295acd3ae07a 100644
--- a/files/ru/web/api/mediarecorder/index.md
+++ b/files/ru/web/api/mediarecorder/index.md
@@ -142,7 +142,8 @@ if (navigator.getUserMedia) {
 }
 ```
 
-> **Примечание:** Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите [здесь](https://github.com/mdn/web-dictaphone/)
+> [!NOTE]
+> Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите [здесь](https://github.com/mdn/web-dictaphone/)
 
 ## Спецификации
 
diff --git a/files/ru/web/api/mediarecorder/mediarecorder/index.md b/files/ru/web/api/mediarecorder/mediarecorder/index.md
index f1fd7f20463aa1..44a3e05835bb86 100644
--- a/files/ru/web/api/mediarecorder/mediarecorder/index.md
+++ b/files/ru/web/api/mediarecorder/mediarecorder/index.md
@@ -26,7 +26,8 @@ var mediaRecorder = new MediaRecorder(stream[, options]);
     - `videoBitsPerSecond`: Скорость записи медиа данных видео.
     - `bitsPerSecond`: Скорость записи медиаданных аудио и видео. Может определяться вместо верхних двух. Если определяется вместе с одним из свойств выше, имеет меньший приоритет, и используется вместо отсутствующей настройки выше..
 
-    > **Примечание:** Если значения битов в секунду не указаны для видео и / или аудио, для видео по умолчанию принимается значение 2,5 Мбит / с, а для аудио по умолчанию используется адаптивный режим, в зависимости от частоты дискретизации и количества каналов.
+    > [!NOTE]
+    > Если значения битов в секунду не указаны для видео и / или аудио, для видео по умолчанию принимается значение 2,5 Мбит / с, а для аудио по умолчанию используется адаптивный режим, в зависимости от частоты дискретизации и количества каналов.
 
 ### Исключения
 
diff --git a/files/ru/web/api/mediarecorder/start/index.md b/files/ru/web/api/mediarecorder/start/index.md
index 94ec0687df5d06..2d27f4c20e7a56 100644
--- a/files/ru/web/api/mediarecorder/start/index.md
+++ b/files/ru/web/api/mediarecorder/start/index.md
@@ -17,7 +17,8 @@ When the `start()` method is invoked, the UA queues a task that runs the followi
 6. Raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of data.
 7. Raise a {{domxref("MediaRecorder.stop")}} event.
 
-> **Примечание:** If the browser is unable to start recording or continue recording, it _will_ raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.
+> [!NOTE]
+> If the browser is unable to start recording or continue recording, it _will_ raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
index 3723e7d69429dc..3fa19f38fff651 100644
--- a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
+++ b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.md
@@ -47,7 +47,8 @@ header {
 }
 ```
 
-> **Примечание:** Функция `calc()` имеет хорошую поддержку среди современных браузеров, даже в устаревшем Internet Explorer 9.
+> [!NOTE]
+> Функция `calc()` имеет хорошую поддержку среди современных браузеров, даже в устаревшем Internet Explorer 9.
 
 ### Хак чекбокса для отображение/скрытия
 
@@ -144,7 +145,8 @@ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 - **Функция успешного вызова**: Запускается при успешном получении потока функцией `getUserMedia` .
 - **Функция обработки ошибок**: Если функция `getUserMedia` по какой либо причине завершиться с ошибкой.
 
-> **Примечание:** Весь код ниже помещается внутрь функции успешного вызова `getUserMedia.`
+> [!NOTE]
+> Весь код ниже помещается внутрь функции успешного вызова `getUserMedia.`
 
 ## Захват медиа потока
 
@@ -178,7 +180,8 @@ mediaRecorder.ondataavailable = function (e) {
 };
 ```
 
-> **Примечание:** Браузер будет запускать события `dataavailable` по необходимости (когда внутренний буфер объекта будет переполняться), но если разработчику нужно вмешаться, в вызов метода `start()` можно включить параметр `timeslice`, определяющий диапазон захвата в миллисекундах — к примеру, `start(10000)`, или вызывать функцию запроса данных {{domxref("MediaRecorder.requestData()")}}, запуская событие по необходимости.
+> [!NOTE]
+> Браузер будет запускать события `dataavailable` по необходимости (когда внутренний буфер объекта будет переполняться), но если разработчику нужно вмешаться, в вызов метода `start()` можно включить параметр `timeslice`, определяющий диапазон захвата в миллисекундах — к примеру, `start(10000)`, или вызывать функцию запроса данных {{domxref("MediaRecorder.requestData()")}}, запуская событие по необходимости.
 
 Наконец используем метод {{domxref("MediaRecorder.stop()")}} при нажатии кнопки остановки записи и завершения упаковки объекта {{domxref("Blob")}} для его использования в приложении.
 
diff --git a/files/ru/web/api/mediastreamtrack/index.md b/files/ru/web/api/mediastreamtrack/index.md
index 7535c3b531069a..76444c504148df 100644
--- a/files/ru/web/api/mediastreamtrack/index.md
+++ b/files/ru/web/api/mediastreamtrack/index.md
@@ -17,7 +17,8 @@ slug: Web/API/MediaStreamTrack
 
   - : Имеет значение `true`, если трек включён, то есть может может отображать поток медиа; или `false`, если он выключен, то есть отображает не поток данных, а чёрное изображение без звука. Если трек отключён, это свойство можно менять, но это не будет давать никакого эффекта.
 
-    > **Примечание:** Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство `enabled` в значение `false`. Свойство `muted` используется, когда данные отсутствуют из-за технической проблемы.
+    > [!NOTE]
+    > Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство `enabled` в значение `false`. Свойство `muted` используется, когда данные отсутствуют из-за технической проблемы.
 
 - {{domxref("MediaStreamTrack.id")}} {{readonlyInline}}
   - : Возвращает объект {{domxref("DOMString")}}, содержащий уникальный идентификатор (GUID) трека; генерируется браузером.
@@ -31,7 +32,8 @@ slug: Web/API/MediaStreamTrack
 
   - : Возвращает `true`, если трек не может предоставить данные по техническим причинам.
 
-    > **Примечание:** Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство `enabled` в значение `false`, и возвращать звук, снова устанавливая его в значение `true`.
+    > [!NOTE]
+    > Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство `enabled` в значение `false`, и возвращать звук, снова устанавливая его в значение `true`.
 
 - {{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}
   - : Возвращает `true`, если трек предназначен только для чтения (например, если его источник - видео файл или камера, настройки которой не могут быть изменены), иначе `false`.
diff --git a/files/ru/web/api/mouseevent/button/index.md b/files/ru/web/api/mouseevent/button/index.md
index 9472fa8f883cfa..328d0897eb97d3 100644
--- a/files/ru/web/api/mouseevent/button/index.md
+++ b/files/ru/web/api/mouseevent/button/index.md
@@ -11,7 +11,8 @@ slug: Web/API/MouseEvent/button
 
 Пользователь может изменять конфигурацию кнопок своей мыши таким образом, что значение ноль будет получено при нажатии кнопки, не являющейся физически крайней левой кнопкой мыши, тем не менее, событие будет вести себя так, как будто левая кнопка была нажата в стандартной раскладкой кнопок.
 
-> **Примечание:** Не путайте это свойство со свойством {{domxref ( "MouseEvent.buttons")}}, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.
+> [!NOTE]
+> Не путайте это свойство со свойством {{domxref ( "MouseEvent.buttons")}}, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/mouseevent/buttons/index.md b/files/ru/web/api/mouseevent/buttons/index.md
index a2b4d29a725951..4fd65527a7cfb4 100644
--- a/files/ru/web/api/mouseevent/buttons/index.md
+++ b/files/ru/web/api/mouseevent/buttons/index.md
@@ -7,7 +7,8 @@ slug: Web/API/MouseEvent/buttons
 
 Свойство **`MouseEvent.buttons`** доступно только для чтения. Оно показывает, какие клавиши мыши (или другого устройства ввода) были нажаты при срабатывании события.Для каждой нажатой кнопки есть своё уникальное битовое значение (см. ниже раздел "[Возвращаемые значения](#Return)"). Если нажаты несколько кнопок одновременно, значения суммируются, создавая новое значение. Например, если нажата вторая кнопка (2 или 000010 в двоичном коде) вместе со средней (4 или 000100 в двоичном коде), значение будет равно 6 (2 + 4) или 000110 в двоичном коде.
 
-> **Примечание:** Не путайте это свойство со свойством {{domxref("MouseEvent.button")}}. Текущее свойство {{domxref("MouseEvent.buttons")}} показывает состояние нажатых кнопок при любом событии мыши, а свойство {{domxref("MouseEvent.button")}} указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.
+> [!NOTE]
+> Не путайте это свойство со свойством {{domxref("MouseEvent.button")}}. Текущее свойство {{domxref("MouseEvent.buttons")}} показывает состояние нажатых кнопок при любом событии мыши, а свойство {{domxref("MouseEvent.button")}} указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.
 
 ## Синтаксис
 
diff --git a/files/ru/web/api/mutationobserver/index.md b/files/ru/web/api/mutationobserver/index.md
index 0031c65c279f7d..f68d90c255464a 100644
--- a/files/ru/web/api/mutationobserver/index.md
+++ b/files/ru/web/api/mutationobserver/index.md
@@ -30,7 +30,8 @@ slug: Web/API/MutationObserver
 
 `MutationObserverInit` — объект, который может содержать следующие свойства:
 
-> **Примечание:** Так или иначе необходимо установить `true` для одного из следующих свойств: `childList`, `attributes`, `characterData`. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"
+> [!NOTE]
+> Так или иначе необходимо установить `true` для одного из следующих свойств: `childList`, `attributes`, `characterData`. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"
 
 | Property                | Description                                                                                                                             |
 | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/ru/web/api/namednodemap/index.md b/files/ru/web/api/namednodemap/index.md
index c49c1b47389af9..a8be9136c94a72 100644
--- a/files/ru/web/api/namednodemap/index.md
+++ b/files/ru/web/api/namednodemap/index.md
@@ -9,7 +9,8 @@ slug: Web/API/NamedNodeMap
 
 Объект NamedNodeMap является "живым" и, таким образом, будет автоматически обновляться, если изменения будут внесены в его содержимое внутри или в другом месте.
 
-> **Примечание:** Хотя данный интерфейс и называется `NamedNodeMap` , он не имеет ничего общего с объектом {{domxref("Node")}}, но до сих пор связан с объектом {{domxref(" Attr ")}}, который изначально был специализированным классом {{domxref("Node")}}.
+> [!NOTE]
+> Хотя данный интерфейс и называется `NamedNodeMap` , он не имеет ничего общего с объектом {{domxref("Node")}}, но до сих пор связан с объектом {{domxref(" Attr ")}}, который изначально был специализированным классом {{domxref("Node")}}.
 
 ## Свойства
 
diff --git a/files/ru/web/api/navigator/appcodename/index.md b/files/ru/web/api/navigator/appcodename/index.md
index 1b02f95ebfec6d..5465c0d97b5af6 100644
--- a/files/ru/web/api/navigator/appcodename/index.md
+++ b/files/ru/web/api/navigator/appcodename/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Значение свойства `Navigator.appCodeName` всегда равно «`Mozilla`», в любом браузере. Это свойство существует только в целях совместимости.
 
-> **Примечание:** Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращают одинаковую строку «`Mozilla`» в качестве значения этого свойства.
+> [!NOTE]
+> Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращают одинаковую строку «`Mozilla`» в качестве значения этого свойства.
 
 ## Значение
 
diff --git a/files/ru/web/api/navigator/appname/index.md b/files/ru/web/api/navigator/appname/index.md
index bc64fa32627961..b1c7dad5ff0f01 100644
--- a/files/ru/web/api/navigator/appname/index.md
+++ b/files/ru/web/api/navigator/appname/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Значение свойства `Navigator.appName` всегда равно «`Netscape`», в любом браузере. Это свойство существует только в целях совместимости.
 
-> **Примечание:** Не полагайтесь на это свойство для получения настоящего имени браузера. Все браузеры возвращают одинаковую строку «`Netscape`» в качестве значения этого свойства.
+> [!NOTE]
+> Не полагайтесь на это свойство для получения настоящего имени браузера. Все браузеры возвращают одинаковую строку «`Netscape`» в качестве значения этого свойства.
 
 ## Значение
 
diff --git a/files/ru/web/api/navigator/appversion/index.md b/files/ru/web/api/navigator/appversion/index.md
index f6b7906688464d..8b96b18047da88 100644
--- a/files/ru/web/api/navigator/appversion/index.md
+++ b/files/ru/web/api/navigator/appversion/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Возвращает «`4.0`» или строку, представляющую информацию о версии браузера.
 
-> **Примечание:** Не полагайтесь на это свойство для получения правильной версии браузера.
+> [!NOTE]
+> Не полагайтесь на это свойство для получения правильной версии браузера.
 
 ## Значение
 
diff --git a/files/ru/web/api/navigator/cookieenabled/index.md b/files/ru/web/api/navigator/cookieenabled/index.md
index 830b38e33d6e93..6d2dfc5c0cbd61 100644
--- a/files/ru/web/api/navigator/cookieenabled/index.md
+++ b/files/ru/web/api/navigator/cookieenabled/index.md
@@ -13,9 +13,11 @@ l10n:
 
 Логическое значение.
 
-> **Примечание:** Когда в браузере включена блокировка [сторонних файлов cookie](/ru/docs/Web/Privacy/Third-party_cookies) и `navigator.cookieEnabled` вызывается внутри стороннего `
+
 ```
-
+
+Se você olhar para o console do seu navegador, verá uma mensagem de erro parecida com a seguinte:
+
+```plain
+Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X-Frame-Options' to 'deny'.
 ```
 
+A seção [Preocupações com segurança](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#preocupa%C3%A7%C3%B5es_com_seguran%C3%A7a) abaixo entra em mais detalhes sobre o motivo pelo qual você vê esse erro, mas primeiro, vamos dar uma olhada no que nosso código está fazendo.
+
 Este exemplo inclui os fundamentos básicos necessários para usar um ``tags de abertura e fechamento que aparecerão se o navegador não suportar `