mdn · yin1999 · Aug 7, 2024 · Jul 30, 2024 · Jul 30, 2024
@@ -32,7 +32,8 @@ selectAudioOutput(options)
 
         该选项适用于希望存储设备 ID 以便将来会话中默认使用同一设备的应用程序。注意，方法可能会返回同一设备的新 ID，并且持久化的 ID 必须在 {{domxref("HTMLMediaElement.setSinkId","setSinkId()")}} 成功地通过 `selectAudioOutput()` 传递后才能使用。
 
-        > **备注：** 如果在先前会话中通过 `selectAudioOutput()` 向用户显示了指定的非空 ID，则用户代理可能会选择跳过提示用户的步骤。
+        > [!NOTE]
+        > 如果在先前会话中通过 `selectAudioOutput()` 向用户显示了指定的非空 ID，则用户代理可能会选择跳过提示用户的步骤。
         > 在这种情况下，用户代理可能会简单地解析为此设备 ID，或者如果设备 ID 已更改，则解析为同一设备的新 ID。
         > 如果先前授予了指定设备的权限，但此后被撤销，用户代理可能会显示所有允许的设备，并突出显示具有指定 ID 的设备。
 

@@ -17,7 +17,8 @@ l10n:
 
 - {{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}}
   - : 构造一个新的表示 ICE 候选者的 `RTCIceCandidate` 对象。根据配置对象进行可选配置。
-    > **备注：** 为了向后兼容，构造函数也接受一个包含 {{domxref("RTCIceCandidate.candidate", "candidate")}} 属性值字符串参数，以此替代配置对象。
+    > [!NOTE]
+    > 为了向后兼容，构造函数也接受一个包含 {{domxref("RTCIceCandidate.candidate", "candidate")}} 属性值字符串参数，以此替代配置对象。
 
 ## 实例属性
 

@@ -106,7 +106,7 @@ src: url(fonts.svg#WhichFont);
 | `woff`              | WOFF 1.0            | .woff       |
 | `woff2`             | WOFF 2.0            | .woff2      |
 
-> **备注：**
+> [!NOTE]
 >
 > - `format(svg)` 表示 [SVG 字体](/zh-CN/docs/Web/SVG/Tutorial/SVG_fonts)，而 `tech(color-SVG)` 表示[带有 SVG 表的 OpenType 字体](https://learn.microsoft.com/en-us/typography/opentype/spec/svg)（也称为 OpenType-SVG 彩色字体），两者完全不同。
 > - 无论字体文件使用的是三次菱形曲线（在 CFF/CFF2 表中）还是二次菱形曲线（在字形表中），`opentype` 和 `truetype` 值都是相同的。

@@ -62,7 +62,7 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
 
 请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。
 
-> **备注：**
+> [!NOTE]
 >
 > - DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。
 > - 由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5 (z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。

@@ -15,7 +15,7 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-ind
 
 在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。
 
-> **备注：**
+> [!NOTE]
 >
 > - 在一组由不含有任何 z-index 属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在 HTML 结构中出现的顺序堆叠，而不管它们的定位属性如何。
 > - 普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在 HTML 结构中出现的位置晚于定位元素也是如此。

@@ -25,7 +25,7 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index
 - ...
 - _顶部：最接近观察者_
 
-> **备注：**
+> [!NOTE]
 >
 > - 当没有指定 z-index 的时候，所有元素都在会被渲染在默认层 (0 层)
 > - 当多个元素的 z-index 属性相同的时候 (在同一个层里面)，那么将按照 [Stacking without z-index](/zh-CN/CSS/Understanding_z-index/Stacking_without_z-index) 中描述的规则进行布局。

@@ -58,16 +58,13 @@ grid-template-columns: unset;
 - `min-content`
   - : 是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
 - {{cssxref("minmax", "minmax(min, max)")}}
-
   - : 是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值`<flex>` ，但最小值则不行。
-
-    Note: 该规范在将来可能会允许设置最小值为 `flex`，也会调整[网格轨道算法](https://www.w3.org/TR/css-grid-1/#track-sizing-algorithm)计算出正确的大小。
-
 - `auto`
 
   - : 如果该网格轨道为最大时，该属性等同于 `<max-content>`，为最小时，则等同于 `<min-content>`。
 
-    **备注：** 网格轨道大小为 `auto`（且只有为 `auto`）时，才可以被属性 {{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 拉伸。
+    > [!NOTE]
+    > 网格轨道大小为 `auto`（且只有为 `auto`）时，才可以被属性 {{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 拉伸。
 
 - {{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : 相当于公式 `min(max-content, max(auto, argument))`，类似于 `auto` 的计算（即 `minmax(auto, max-content)`），除了网格轨道大小值是确定下来的，否则该值都大于 `auto` 的最小值。

@@ -7,7 +7,7 @@ slug: Web/CSS/image-orientation
 
 CSS 属性 **`image-orientation`** 用来修正某些图片的预设方向。
 
-> **备注：**
+> [!NOTE]
 >
 > - 该属性不是用来对图片进行任意角度旋转的，它是用来修正那些带有不正确的预设方向的图片的。因此该属性值会被四舍五入到 90 度的整数倍。
 > - Similarly this property is not intented to handle the layout -> portrait changing. As `image-orientation` affects only images, it won't work: the changes must happen at the layout-level

@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/breadcrumb-navigation--download.html)
 

@@ -21,7 +21,7 @@ slug: Web/CSS/Layout_cookbook/Card
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这个示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/card--download.html)
 

@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Center_an_element
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html)
 

@@ -31,7 +31,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-multicol--download.html)
 
@@ -49,15 +49,15 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-flexbox--download.html)
 
 要创建一个布局，其中的弹性项可以换行，请将容器上的 {{cssxref("flex-wrap")}} 属性设置为 `wrap`。请注意，每个弹性行只为该行分配空间。一行中的项目不一定会与其他行中的项目对齐，正如你在下面的示例中看到的那样。这就是为什么弹性盒布局被描述为一维布局法的原因。它设计用于控制一行或一列的布局，但不能同时控制这两种布局。
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-flexbox-wrapping--download.html)
 
@@ -73,7 +73,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-grid--download.html)
 

@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Split_Navigation
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/split-navigation--download.html)
 

@@ -20,7 +20,7 @@ slug: Web/CSS/Layout_cookbook/Sticky_footers
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}
 
-> **标注：**
+> [!CALLOUT]
 >
 > [下载此示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/sticky-footer--download.html)
 

@@ -97,7 +97,7 @@ div.menu-bar li:hover > ul {
 - [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements) `::`
   - : 代表不包含在 HTML 中的实体。
 
-> **标注：**
+> [!CALLOUT]
 >
 > 参见[标准 4 定义的选择器列表](https://www.w3.org/TR/selectors/#overview)。
 

@@ -252,7 +252,7 @@ slug: Web/HTML/Constraint_validation
 
 调用 `checkValidity()` 也被称为约束的*静态*验证，调用 `reportValidity()` 也被称为约束的*交互*认证。
 
-> **备注：**
+> [!NOTE]
 >
 > - 如果 {{ HTMLElement("form") }} 元素上设置了 [`novalidate`](/zh-CN/docs/Web/HTML/Element/form#novalidate) 属性，则不发生约束验证交互。
 > - 在 [`HTMLFormElement`](/zh-CN/docs/Web/API/HTMLFormElement) 接口上调用 `submit()` 方法并不触发约束条件验证。换句话说，即使表单数据不满足约束条件，该方法也会将其发送到服务器。在提交按钮上调用 `click()` 方法来代替。

@@ -27,7 +27,7 @@ slug: Web/HTML/Element/a
 
     - `filename`：决定文件名的值。`/` 和 `\` 被转化为下划线（`_`）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。
 
-    > **备注：**
+    > [!NOTE]
     >
     > - `download` 只在[同源 URL](/zh-CN/docs/Web/Security/Same-origin_policy) 或 `blob:`、`data:` 协议起作用。
     > - 浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前，可能会提示用户，或者自动保存文件，或者自动打开。自动打开要么在外部应用程序中，要么在浏览器本身中。

@@ -83,7 +83,8 @@ slug: Web/HTML/Element/input/checkbox
 - `checked`
 
   - : 一个布尔属性，表示该复选框是否被默认选中（当页面加载时）。它不表示这个复选框当前是否被选中：如果复选框的状态被改变，这个内容属性不反映这个变化。此时，只有 {{domxref("HTMLInputElement")}} 的 IDL 属性 `checked` 会更新。
-    > **备注：** 与其他输入控件不同，复选框的值只有在复选框当前状态为 `checked` 时才会被包含在提交的数据中。如果它被选中，那么复选框的 `value` 属性的值就会被报告为输入的值。不像其他浏览器那样，Firefox 默认情况下在不同页面之间会[保持 `<input>` 动态选中的状态](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。请使用 [`autocomplete`](/zh-CN/docs/Web/HTML/Element/input#autocomplete) 属性来控制这个特性。
+    > [!NOTE]
+    > 与其他输入控件不同，复选框的值只有在复选框当前状态为 `checked` 时才会被包含在提交的数据中。如果它被选中，那么复选框的 `value` 属性的值就会被报告为输入的值。不像其他浏览器那样，Firefox 默认情况下在不同页面之间会[保持 `<input>` 动态选中的状态](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。请使用 [`autocomplete`](/zh-CN/docs/Web/HTML/Element/input#autocomplete) 属性来控制这个特性。
 
 - `value`
 

@@ -1077,7 +1077,9 @@ nameInput.addEventListener("invalid", () => {
 
 > [!NOTE]
 > 始终在客户端和服务器端验证输入约束。约束验证并不能消除在*服务器端*进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。
-> **备注：** Firefox 在许多版本中支持一个专有的错误属性——`x-moz-errormessage`，它允许你以类似的方式设置自定义错误信息。从第 66 版开始，这个属性已被移除（见[Firefox bug 1513890](https://bugzil.la/1513890)）。
+
+> [!NOTE]
+> Firefox 在许多版本中支持一个专有的错误属性——`x-moz-errormessage`，它允许你以类似的方式设置自定义错误信息。从第 66 版开始，这个属性已被移除（见[Firefox bug 1513890](https://bugzil.la/1513890)）。
 
 ### 本地化
 

@@ -121,7 +121,7 @@ slug: Web/HTML/Element/meta
       - 页面重新加载的秒数——仅当 [`content`](#content) 属性包含非负整数时。
       - 页面重定向到指定链接的秒数——仅当 content 属性包含非负整数后跟字符串“`;url=`”和有效的 URL 时。
 
-      > **警告：**
+      > [!WARNING]
       >
       > 设置了 `refresh` 值的页面存在时间间隔过短的风险。借助屏幕阅读器等辅助技术进行导航的用户可能无法在自动重定向之前通读和理解页面内容。突然的、未通知的页面内容更新也可能会让视力低下的人迷失方向。
       >

@@ -106,7 +106,8 @@ slug: Web/HTML/Element/script
     - `strict-origin`：只在协议安全等级相同时（如 HTTPS→HTTPS）发送文档的源作为 referrer，目标安全性降低（如 HTTPS→HTTP）时不发送。
     - `strict-origin-when-cross-origin`：在执行同源请求时，发送完整的 URL，但只在协议安全级别保持不变（如 HTTPS→HTTPS）时发送源，而在目标安全性降低（如 HTTPS→HTTP）时不发送标头。
     - `unsafe-url`：referrer 将包含源*和*路径（但不包含[片段](/zh-CN/docs/Web/API/HTMLAnchorElement/hash)、[密码](/zh-CN/docs/Web/API/HTMLAnchorElement/password)和[用户名](/zh-CN/docs/Web/API/HTMLAnchorElement/username)）。**这个值是不安全的**，因为它将 TLS 保护的资源的源和路径泄露给不安全的源。
-      > **备注：** 空字符串（`""`）既是默认值，也是在不支持 `referrerpolicy` 的情况下的一个回退值。如果没有在 `<script>` 元素上明确指定 `referrerpolicy`，它将采用更高级别的 referrer 策略，即对整个文档或域设置的策略。如果没有更高级别的策略，空字符串将被视为等同于 `no-referrer-when-downgrade`。
+      > [!NOTE]
+      > 空字符串（`""`）既是默认值，也是在不支持 `referrerpolicy` 的情况下的一个回退值。如果没有在 `<script>` 元素上明确指定 `referrerpolicy`，它将采用更高级别的 referrer 策略，即对整个文档或域设置的策略。如果没有更高级别的策略，空字符串将被视为等同于 `no-referrer-when-downgrade`。
 
 - `src`
   - : 这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。

@@ -81,7 +81,7 @@ l10n:
 
     每个浏览器的默认值都不相同，即使规范建议设置为 `metadata`。
 
-    > **备注：**
+    > [!NOTE]
     >
     > - `autoplay` 属性的优先级比 `preload` 高。如果指定了 `autoplay` 属性，浏览器显然需要开始下载视频以便回放。
     > - 规范中没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

@@ -25,7 +25,8 @@ Access-Control-Allow-Methods: GET,HEAD,POST
 
 请确保当访问服务时你的代码只使用了允许的 HTTP 方法。
 
-**备注：** 如果服务器的 `Access-Control-Allow-methods` 标头中包含任何未识别的或未定义的方法名称，会出现不同的错误：原因：[`Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'`](/zh-CN/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod)。
+> [!NOTE]
+> 如果服务器的 `Access-Control-Allow-methods` 标头中包含任何未识别的或未定义的方法名称，会出现不同的错误：原因：[`Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'`](/zh-CN/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod)。
 
 ## 参见
 

@@ -16,7 +16,7 @@ l10n:
 
 只要 `identity;q=0` 或 `*;q=0` 指令不明确禁止表示无编码的 `identity` 值，服务器就绝对不应返回 {{HTTPStatus("406")}} `Not Acceptable` 错误。
 
-> **备注：**
+> [!NOTE]
 >
 > - IANA 维护了[一个完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)。
 > - 另外两种内容编码 `bzip` 和 `bzip2` 有时也会被使用。这两种非标准编码实现了这两个 UNIX 程序所使用的算法。请注意，由于专利许可问题，`bzip` 已被弃用。

@@ -24,7 +24,7 @@ l10n:
   </tbody>
 </table>
 
-> **备注：**
+> [!NOTE]
 >
 > - 客户端提示仅在安全来源（通过 TLS）上可用。
 > - 服务器必须通过发送 {{HTTPHeader("Accept-CH")}} 响应标头，才能接收来自客户端的 `Device-Memory` 标头。

@@ -30,7 +30,7 @@ l10n:
 
 如果 `DPR` 标头出现在消息中多次，则使用最后一次出现的值。
 
-> **备注：**
+> [!NOTE]
 >
 > - 客户端提示仅在安全来源（通过 TLS）上可用。
 > - 服务器必须通过发送包含 `DPR` 的 {{HTTPHeader("Accept-CH")}} 响应标头，才能接收来自客户端的 `DPR` 标头。

@@ -99,7 +99,7 @@ if (条件) {
 
 不建议在条件表达式中使用赋值语句，因为在快速查阅代码时容易把它看成等值比较。例如，不要使用下面的代码：
 
-> **警告：**
+> [!WARNING]
 >
 > ```js-nolint
 > if (x = y) {

@@ -68,7 +68,7 @@ function foo() {
 }
 ```
 
-> **备注：**
+> [!NOTE]
 >
 > 即使异步函数的返回值看起来像是被包装在了一个 `Promise.resolve` 中，但它们不是等价的。
 >

@@ -42,7 +42,7 @@ l10n:
 - `ltr`，表示*从左到右*，用于将数学表达式从左到右渲染（例如，英语或摩洛哥风格）；
 - `rtl`，表示*从右到左*，用于将数学表达式从右到左渲染（例如，摩洛哥或马什里克风格）；
 
-> **备注：**
+> [!NOTE]
 >
 > - 如果存在 CSS 页面并且元素支持这些属性，则此属性可以被 CSS 属性 {{ cssxref("direction") }} 覆盖。
 > - 数学的方向性与其内容的语义相关，而不是与其表现形式相关，因此建议 Web 开发者尽可能使用这一属性，而不是相关的 CSS 属性。这样，即使在不支持 CSS 或已停用 CSS 的浏览器上，公式也能正确显示。

@@ -51,7 +51,7 @@ cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A
 shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64
 ```
 
-> **备注：**
+> [!NOTE]
 >
 > - 通过管道连接的 `xxd` 步骤从 `shasum` 中获取十六进制的输出，并将其转换为二进制。
 > - 通过管道连接的 `awk` 的步骤是必要的，因为 `shasum` 会将其输出中的散列文件名传递给 `xxd`。如果文件名中恰好有有效的十六进制字符，这将产生灾难性的后果——因为 `xxd` 也会对其进行解码并传递给 `base64`。
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,7 +68,7 @@ function foo() { @@
     }
     ```
-    > **备注：**
+    > [!NOTE]
     >
     > 即使异步函数的返回值看起来像是被包装在了一个 `Promise.resolve` 中，但它们不是等价的。
     >
@@ Expand Down @@