chore(zh-cn): replace old note card style with GFM alerts syntax (#27809)

Author: yin1999

files/zh-cn/.markdownlint.jsonc

@@ -105,7 +105,7 @@
       {
         "name": "gfm-alert",
         "message": "Use the GFM syntax: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#备注、警告和标注",
-        "searchPattern": "/^ *> \\*\\*(备注|警告|标注)：\\*\\*(?! ?[[{`_*])/gm",
+        "searchPattern": "/^ *> \\*\\*(备注|警告|标注)：\\*\\*/gm",
         "searchScope": "text",
       },
       {

files/zh-cn/games/tools/asm.js/index.md

@@ -7,7 +7,8 @@ l10n:
 
 {{GamesSidebar}}
 
-> **警告：** [asm.js](http://asmjs.org/) 规范已被视为**弃用**。开发者可以考虑使用 [WebAssembly](/zh-CN/docs/WebAssembly) 作为在浏览器中运行高性能代码的 asm.js 替代方案。
+> [!WARNING]
+> [asm.js](http://asmjs.org/) 规范已被视为**弃用**。开发者可以考虑使用 [WebAssembly](/zh-CN/docs/WebAssembly) 作为在浏览器中运行高性能代码的 asm.js 替代方案。
 
 [Asm.js](http://asmjs.org/) 是一个定义了 JavaScript 子集的高度可优化的规范。本文将介绍 asm.js 子集允许的内容、带来的性能提升、使用场景及更多资源和示例。
 

files/zh-cn/glossary/cors-safelisted_response_header/index.md

@@ -21,7 +21,8 @@ l10n:
 
 可以使用 {{HTTPHeader("Access-Control-Expose-Headers")}} 标头将其他标头添加到白名单中。
 
-> **备注：** {{HTTPHeader("Content-Length")}} 不属于最初列入白名单的响应标头：\[[参考](https://github.com/whatwg/fetch/pull/626)]
+> [!NOTE]
+> {{HTTPHeader("Content-Length")}} 不属于最初列入白名单的响应标头：\[[参考](https://github.com/whatwg/fetch/pull/626)]
 
 ## 示例
 

files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md

@@ -205,7 +205,8 @@ a:active {
 
 另一方面，不应使用 {{cssxref("visibility")}}`:hidden` 或 {{cssxref("display")}}`:none`，因为它们会隐藏屏幕阅读器中的内容。当然，除非你希望从屏幕阅读器中隐藏此内容，这是有充分理由的。
 
-> **备注：** [专为屏幕阅读器用户设计的不可见内容](https://webaim.org/techniques/css/invisiblecontent/)有围绕本主题的更多有用详细信息。
+> [!NOTE]
+> [专为屏幕阅读器用户设计的不可见内容](https://webaim.org/techniques/css/invisiblecontent/)有围绕本主题的更多有用详细信息。
 
 ### 接受用户覆盖样式
 

files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md

@@ -253,7 +253,8 @@ const intervalID = setInterval(showQuote, 10000);
 > [!NOTE]
 > 你可在此完成此例子 [aria-live.html](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([在线 demo](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
 
-> **备注：** [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) 属性对于控制更新实时区域时读取的内容也非常有用。例如，你读取内容添加或删除。
+> [!NOTE]
+> [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) 属性对于控制更新实时区域时读取的内容也非常有用。例如，你读取内容添加或删除。
 
 ### 优化键盘的无障碍操作
 

files/zh-cn/learn_web_development/core/css_layout/grids/index.md

@@ -174,7 +174,8 @@ body {
 
 {{ EmbedLiveSample('使用 fr 单位的灵活网格', '100%', 400) }}
 
-> **备注：** `fr`单位分配的是*可用*空间而非*所有*空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。
+> [!NOTE]
+> `fr`单位分配的是*可用*空间而非*所有*空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。
 
 ### 网格间隙
 
@@ -229,7 +230,8 @@ body {
 
 {{ EmbedLiveSample('网格间隙', '100%', 400) }}
 
-> **备注：** `gap`属性曾经有一个`grid-`前缀，不过后来的标准进行了修改，目的是让他们能够在不同的布局方法中都能起作用。尽管现在这个前缀不会影响语义，但为了代码的健壮性，你可以把两个属性都写上。
+> [!NOTE]
+> `gap`属性曾经有一个`grid-`前缀，不过后来的标准进行了修改，目的是让他们能够在不同的布局方法中都能起作用。尽管现在这个前缀不会影响语义，但为了代码的健壮性，你可以把两个属性都写上。
 
 ```css
 .container {

files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md

@@ -568,7 +568,8 @@ body {
 
 Skeleton 不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的 CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。
 
-> **备注：** [Normalize](https://necolas.github.io/normalize.css/) 是由 Nicolas Gallagher 编写的一个很有用的小 CSS 库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。
+> [!NOTE]
+> [Normalize](https://necolas.github.io/normalize.css/) 是由 Nicolas Gallagher 编写的一个很有用的小 CSS 库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。
 
 我们将会使用和在前面的示例中相似的 HTML。将下面的内容加到你的 HTML body 中：
 

files/zh-cn/learn_web_development/core/css_layout/supporting_older_browsers/index.md

@@ -88,7 +88,8 @@ CSS 规范包含了在一个物件上同时应用两种布局的时候，解释
 
 {{ EmbedLiveSample('在 CSS 中构建回滚', '100%', '200') }}
 
-> **备注：**{{cssxref("clear")}}属性也在被清除的物件变为网格物件的时候失效，所以你应该在一个会变成网格布局的布局上，加上被清除的尾部。
+> [!NOTE]
+> {{cssxref("clear")}}属性也在被清除的物件变为网格物件的时候失效，所以你应该在一个会变成网格布局的布局上，加上被清除的尾部。
 
 ### 回滚方式
 

files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md

@@ -241,7 +241,8 @@ ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"));
 
 这个数组现在可以在 App 组件中以 `props.tasks` 使用。你可以使用 `console.log()` 去检查它。
 
-> **备注：** `ALL_CAPS` 这个常量名称在 JavaScript 中没有特殊意义；它们是一种惯例，告诉其他开发者“这个数据在这里定义后将永远不会改变”。
+> [!NOTE]
+> `ALL_CAPS` 这个常量名称在 JavaScript 中没有特殊意义；它们是一种惯例，告诉其他开发者“这个数据在这里定义后将永远不会改变”。
 
 ## 使用迭代进行渲染
 

files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md

@@ -346,7 +346,8 @@ const checkAllTodos = (completed) => {
 
    `addTodo()` 现在直接接收新待办事项的名称，因此我们不再需要 `newTodoName` 变量来提供值。这部分由我们的 `NewTodo` 组件处理。
 
-   > **备注：** `{ name }` 的语法只是 `{ name: name }` 的简写形式。它来自 JavaScript 本身，与 Svelte 无关，只是为 Svelte 的缩写语法提供了一些灵感。
+   > [!NOTE]
+   > `{ name }` 的语法只是 `{ name: name }` 的简写形式。它来自 JavaScript 本身，与 Svelte 无关，只是为 Svelte 的缩写语法提供了一些灵感。
 
 5. 最后，在此部分中，将 NewTodo 表单标记替换为对 `NewTodo` 组件的调用，如下所示：