mdn · PassionPenguin · Jul 28, 2024
@@ -31,7 +31,8 @@ MDN 是一個 wiki，**每個人**都可以添加、編撰內容。你不必得
 
 別擔心你無法做到完美，會有 MDN 成員來幫忙修復問題與錯誤。有任何疑問，都歡迎到[社群網頁](/docs/MDN/Community)上查詢郵件群組、聊天頻道等資訊，協助你找尋答案。
 
-> **備註：** 如果你想要在編輯 MDN 之前做些實際的試驗，那麽我們有提供一個沙盒(**[Sandbox](/zh-TW/docs/Sandbox)**)給你體驗。請將你的試驗限制在這個頁面。請不要為了看看會發生什麽而在内容頁做不必要的變動，這會弄得一團糟讓其他人搞不清楚，更糟糕的是，會讓一些衹是想學點或看點什麽的讀者混亂。
+> [!NOTE]
+> 如果你想要在編輯 MDN 之前做些實際的試驗，那麽我們有提供一個沙盒(**[Sandbox](/zh-TW/docs/Sandbox)**)給你體驗。請將你的試驗限制在這個頁面。請不要為了看看會發生什麽而在内容頁做不必要的變動，這會弄得一團糟讓其他人搞不清楚，更糟糕的是，會讓一些衹是想學點或看點什麽的讀者混亂。
 
 完成這項工作以後，歡迎再挑另一件事情做，或者看看[其他可以在 MDN 上做的事](#其他可以在_mdn_上做的事)。
 
@@ -48,7 +49,8 @@ MDN 是一個 wiki，**每個人**都可以添加、編撰內容。你不必得
 - [在詞彙表中加上新的詞彙](/zh-TW/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary)（15 分鐘-1 小時）
 - [撰寫幫助大眾了解 Web 的文章](/zh-TW/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web)（1 小時-3 小時）
 
-> **備註：** 如果你要審查或撰寫新文章，建議先看一下[文件體例](/zh-TW/docs/MDN/Contribute/Guidelines/Style_guide)。這樣能確保文章的一貫性。
+> [!NOTE]
+> 如果你要審查或撰寫新文章，建議先看一下[文件體例](/zh-TW/docs/MDN/Contribute/Guidelines/Style_guide)。這樣能確保文章的一貫性。
 
 ### 選項 2: 給熱愛程式碼的人
 

@@ -39,7 +39,8 @@ MDN 的使命非常簡單：提供開發者在[開放網站](/zh-TW/docs/Web)上
 
 請注意在以上範例中，「Mozilla Contributors」連結到該頁面的編輯歷史。參閱 [Best practices for attribution](http://wiki.creativecommons.org/Marking/Users) 獲得更多資訊。
 
-> **備註：** 參閱 [MDN content on WebPlatform.org](/zh-TW/docs/MDN_content_on_WebPlatform.org) 了解更多有關如何在網站上使用和標註 MDN 內容的資訊。
+> [!NOTE]
+> 參閱 [MDN content on WebPlatform.org](/zh-TW/docs/MDN_content_on_WebPlatform.org) 了解更多有關如何在網站上使用和標註 MDN 內容的資訊。
 
 在 2010 年 8 月 20 日以前新增到這個 wiki 的範例程式碼，是採用 [MIT 授權條款](http://www.opensource.org/licenses/mit-license.php)釋出。你應該在 MIT 模板中增加這些作者資訊：「© <最新的 wiki 更新日期> <寫下這段程式碼的人>」
 
@@ -49,7 +50,8 @@ MDN 的使命非常簡單：提供開發者在[開放網站](/zh-TW/docs/Web)上
 
 有些比較舊的內容可能會採用和上述不同的授權條款。這些授權條款都會在每個頁面最下方透過 [Alternate License Block](/Archive/Meta_docs/Examples/Alternate_License_Block) 列明。
 
-> **警告：** 新建立的頁面不得使用替代的授權條款。
+> [!WARNING]
+> 新建立的頁面不得使用替代的授權條款。
 
 除非作者另有聲明，否則所有貢獻素材的版權皆歸屬其作者所有。
 

@@ -169,15 +169,18 @@ slug: MDN/Writing_guidelines/Writing_style_guide
 
 使用「**格式化樣式**」的下拉清單來對選取內容套用預定義的樣式。
 
-> **備註：** 「**備註區塊**」樣式是用於標示重要的備註，就好比這樣。
+> [!NOTE]
+> 「**備註區塊**」樣式是用於標示重要的備註，就好比這樣。
 
-> **警告：** 類似地，「**警告區塊**」樣式用於建立警告區塊，就好比這樣。
+> [!WARNING]
+> 類似地，「**警告區塊**」樣式用於建立警告區塊，就好比這樣。
 
 除非有特別地指示，否則*不要*使用 HTML `style` 屬性來手動套用樣式。如果碰到無法使用預定義地 class ，請在 [MDN 討論論壇](https://discourse.mozilla.org/c/mdn)尋求協助。
 
 ### 程式碼範例的樣式與格式
 
-> **備註：** 此章節說明透過樣式／格式來影響程式碼如何在 MDN 文章中顯示。如果你需要撰寫程式碼例子的實際指導方針，請參閱[程式碼範例指導方針](/zh-TW/docs/MDN/Guidelines/Code_guidelines)
+> [!NOTE]
+> 此章節說明透過樣式／格式來影響程式碼如何在 MDN 文章中顯示。如果你需要撰寫程式碼例子的實際指導方針，請參閱[程式碼範例指導方針](/zh-TW/docs/MDN/Guidelines/Code_guidelines)
 
 #### Tabs 以及換行
 
@@ -259,7 +262,8 @@ HTML 元素在撰寫時有它們特殊的規則。這些規則可以對元素及
 | N.B.   | _nota bene_      | note well               | 注意、留心（用於提醒讀者留意重要資訊） |
 | P.S.   | _post scriptum_  | postscript              | 附言、補充說明                         |
 
-> **備註：** 總是想清楚使用拉丁文縮寫是否真的有效益。某些縮寫甚少使用，讀者根本不明白其意義，而某些甚至會跟其他縮寫產生混淆。
+> [!NOTE]
+> 總是想清楚使用拉丁文縮寫是否真的有效益。某些縮寫甚少使用，讀者根本不明白其意義，而某些甚至會跟其他縮寫產生混淆。
 >
 > 若你選擇使用這些縮寫，請確保*你*能夠正確地使用它們。例如，常見的錯誤是把「 e.g. 」和「 i.e. 」搞混。
 
@@ -300,7 +304,8 @@ HTML 元素在撰寫時有它們特殊的規則。這些規則可以對元素及
 
 在主體文字中使用標準的英文大寫規則以及大寫化「 World Wide Web 」。用小寫的「 web 」（單獨使用或作為修飾）以及「 internet 」是可以接受的。
 
-> **備註：** 這項指導方針跟之前的版本有所不同，所以你可能會發現在 MDN 中有多處出現「 Web ］跟「 Internet 」。
+> [!NOTE]
+> 這項指導方針跟之前的版本有所不同，所以你可能會發現在 MDN 中有多處出現「 Web ］跟「 Internet 」。
 >
 > 當你在編輯其他變更的時候你可以順手把它也改了，但不需要特別為了改變這些大寫而編輯文章。
 
@@ -344,7 +349,8 @@ _A confirmation dialog appears, asking the user if she allows the Web page to ma
 
 _A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam._
 
-> **備註：** MDN 允許使用這種非常常見的語法（在使用正當性上存在爭議）來彌補英文中缺乏性別中性的詞彙。
+> [!NOTE]
+> MDN 允許使用這種非常常見的語法（在使用正當性上存在爭議）來彌補英文中缺乏性別中性的詞彙。
 >
 > 使用複數第三人稱做為性別中立的代名詞是被接受的慣例，常被當作「[單數的『他們』](https://en.wikipedia.org/wiki/Singular_they)」。
 

@@ -39,7 +39,8 @@ getting.then(logStores);
 
 {{WebExtExamples}}
 
-> **備註：** 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+> [!NOTE]
+> 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
 >
 > Microsoft Edge 的相容資訊來自微軟公司，原文以創用 CC 姓名標示 3.0 美國版條款授權大眾使用。
 

@@ -79,7 +79,8 @@ Edge 不支援 promises，請使用回呼（callback）函式處理。
 
 {{WebExtExamples("h2")}}
 
-> **備註：** 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+> [!NOTE]
+> 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
 >
 > Microsoft Edge 的相容資訊來自微軟公司，原文以創用 CC 姓名標示 3.0 美國版條款授權大眾使用。
 

@@ -74,7 +74,8 @@ browser.cookies.onChanged.addListener(function (changeInfo) {
 
 {{WebExtExamples}}
 
-> **備註：** 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+> [!NOTE]
+> 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
 >
 > Microsoft Edge 的相容資訊來自微軟公司，原文以創用 CC 姓名標示 3.0 美國版條款授權大眾使用。
 

@@ -46,7 +46,8 @@ browser.cookies.onChanged.addListener(function (changeInfo) {
 
 {{WebExtExamples}}
 
-> **備註：** 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+> [!NOTE]
+> 此 API 基於 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API 而來，文件改作自 Chromium 程式碼裡的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
 >
 > Microsoft Edge 的相容資訊來自微軟公司，原文以創用 CC 姓名標示 3.0 美國版條款授權大眾使用。
 

@@ -20,7 +20,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage
 
 雖然這個 API 與{{domxref("Window.localStorage")}}很相似，建議你不要在套件裡使用 `Window.localStorage` 儲存套件相關資料。Firefox 在用戶由於隱私問題清除歷史記錄與資料時會清除 localStorage API 儲存的資料，而 [`storage.local`](/zh-TW/docs/Mozilla/Add-ons/WebExtensions/API/storage/local) API 儲存的則會留著。
 
-> **備註：** 儲存空間不會被加密，所以你不應該把它們用來儲存用戶的機密資料。
+> [!NOTE]
+> 儲存空間不會被加密，所以你不應該把它們用來儲存用戶的機密資料。
 
 ## 型別
 
@@ -51,7 +52,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage
 
 {{WebExtExamples("h2")}}
 
-> **備註：** This API is based on Chromium's [`chrome.storage`](https://developer.chrome.com/extensions/storage) API. This documentation is derived from [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) in the Chromium code.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.storage`](https://developer.chrome.com/extensions/storage) API. This documentation is derived from [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) in the Chromium code.
 >
 > Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 

@@ -39,7 +39,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage/local
 
 {{WebExtExamples}}
 
-> **備註：** This API is based on Chromium's [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-local) API. This documentation is derived from [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) in the Chromium code.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-local) API. This documentation is derived from [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) in the Chromium code.
 >
 > Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 

@@ -11,9 +11,11 @@ slug: Mozilla/Add-ons/WebExtensions/Content_scripts
 
 Content scripts 只能使用 can only access [一小部分的擴充套件 APIs](/zh-TW/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs)，但它們可以透過一個訊息系統[來與後端腳本溝通](/zh-TW/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts)，從而間接地使用擴充套件 APIs。
 
-> **備註：** 留意到 content scripts 目前會在 addons.mozilla.org 和 testpilot.firefox.com 中被阻擋。如果你嘗試在這些網域下的頁面注入一段 content script 會失敗並且在日誌裡記下一個 [CSP](/zh-TW/docs/Web/HTTP/CSP) 錯誤。
+> [!NOTE]
+> 留意到 content scripts 目前會在 addons.mozilla.org 和 testpilot.firefox.com 中被阻擋。如果你嘗試在這些網域下的頁面注入一段 content script 會失敗並且在日誌裡記下一個 [CSP](/zh-TW/docs/Web/HTTP/CSP) 錯誤。
 
-> **備註：** 由於錯誤 [1408996](https://bugzilla.mozilla.org/show_bug.cgi?id=1408996)，透過 `var foo` or `window.foo = "bar"` 加入 content script 的 global 作用域的值可能會消失。
+> [!NOTE]
+> 由於錯誤 [1408996](https://bugzilla.mozilla.org/show_bug.cgi?id=1408996)，透過 `var foo` or `window.foo = "bar"` 加入 content script 的 global 作用域的值可能會消失。
 
 ## 讀入內容腳本
 
@@ -362,7 +364,8 @@ window.addEventListener("message", function (event) {
 
 完全版的範例請[查看 GitHub 上的示範頁面](https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html)並按照教學做。
 
-> **警告：** 注意到當你透過這個方式跟不被信任的內容腳本互動時要非常小心。套件有很強的權限，惡意網頁可以輕易地騙出這些權限。
+> [!WARNING]
+> 注意到當你透過這個方式跟不被信任的內容腳本互動時要非常小心。套件有很強的權限，惡意網頁可以輕易地騙出這些權限。
 >
 > 舉個簡單的例子，假設一接收訊息的內容腳本長這樣：
 >

@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
 
 {{AddonSidebar}}
 
-> **備註：** Firefox 54 以後可以使用這個功能。
+> [!NOTE]
+> Firefox 54 以後可以使用這個功能。
 
 當套件提供開發者使用的工具時，可以以一個瀏覽器開發工具的新面板的形式在開發者工具裡添加一個 UI。
 

@@ -7,7 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/user_interface
 
 套件 APIs 提供了幾種介面來完成對用戶的功能。下方是那些介面的概述，每種用戶介面都有更詳細的資訊可以查閱。
 
-> **備註：** 爲了使用這些 UI 元件在套件裡提供優秀的用戶體驗，建議閱讀[用戶體驗最佳實踐](/zh-TW/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices)文章。
+> [!NOTE]
+> 爲了使用這些 UI 元件在套件裡提供優秀的用戶體驗，建議閱讀[用戶體驗最佳實踐](/zh-TW/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices)文章。
 
 <table class="standard-table">
   <thead>

@@ -121,7 +121,8 @@ borderify/
 
 ![Border displayed on mozilla.org](border_on_mozilla_org.png)
 
-> **備註：** 不過，別把這招用在 addons.mozilla.org 上，該網域目前會阻擋 content scripts。
+> [!NOTE]
+> 不過，別把這招用在 addons.mozilla.org 上，該網域目前會阻擋 content scripts。
 
 再做點小實驗吧。改一下腳本讓外框顏色改變，或是做其他更動。接著存檔，並按下 about:debugging 的 Reload 鍵重啟附加元件。現在你能看到更動了：
 

@@ -16,7 +16,8 @@ slug: Web/Accessibility/Mobile_accessibility_checklist
 
 - 透過顏色傳遞資訊 **必須** 能藉由其他方式獲得資訊 (底線文字表示連結等)
 
-> **備註：** Jon Snook 已撰寫實用的 [Colour Contrast Checker](http://snook.ca/technical/colour_contrast/colour.html) 能用於檢查背景與前景顏色的對比。同樣地，[Tanaguru Contrast-Finder](http://contrast-finder.tanaguru.com/) 也提供類似功能，而且建議相似且更好的對比顏色提供你考量使用。
+> [!NOTE]
+> Jon Snook 已撰寫實用的 [Colour Contrast Checker](http://snook.ca/technical/colour_contrast/colour.html) 能用於檢查背景與前景顏色的對比。同樣地，[Tanaguru Contrast-Finder](http://contrast-finder.tanaguru.com/) 也提供類似功能，而且建議相似且更好的對比顏色提供你考量使用。
 
 ## 可視性
 

@@ -56,7 +56,8 @@ function fetchVideo() {
 }
 ```
 
-> **備註：** 當 `abort()` 被呼叫的時候，`fetch()` 回傳的 Promise 會被以 `AbortError` 拒絕。
+> [!NOTE]
+> 當 `abort()` 被呼叫的時候，`fetch()` 回傳的 Promise 會被以 `AbortError` 拒絕。
 
 在 GitHub 有個完整的範例可供參考 — 請參見 [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api)（[或是也可以實際體驗看看](https://mdn.github.io/dom-examples/abort-api/)）。
 

@@ -11,9 +11,11 @@ slug: Web/API/Blob
 
 接受 Blob 物件的 API 可以在 {{domxref("File")}} 上找到。
 
-> **備註：** 早期 `slice()` 方法擁有第二個參數 `length` 以指定在建立新 `Blob` 物件時要複製的位元組（byte）數量。假如指定的 `start + length` 超出了來源 `Blob` 的大小，則回傳的 `Blob` 會包含自索引 `start` 至結尾的完整來源內容。
+> [!NOTE]
+> 早期 `slice()` 方法擁有第二個參數 `length` 以指定在建立新 `Blob` 物件時要複製的位元組（byte）數量。假如指定的 `start + length` 超出了來源 `Blob` 的大小，則回傳的 `Blob` 會包含自索引 `start` 至結尾的完整來源內容。
 
-> **備註：** 需注意在部分瀏覽器版本中，`slice()` 方法帶有前綴：Firefox 12 與之前的版本為 `blob.mozSlice()`，Safari 中是 `blob.webkitSlice()`。舊的、無前綴字版本的 `slice()` 方法則有不同的語意（semantics），但這是已淘汰的方法。瀏覽器對 `blob.mozSlice()` 的支援已在 Firefox 30 時中止。
+> [!NOTE]
+> 需注意在部分瀏覽器版本中，`slice()` 方法帶有前綴：Firefox 12 與之前的版本為 `blob.mozSlice()`，Safari 中是 `blob.webkitSlice()`。舊的、無前綴字版本的 `slice()` 方法則有不同的語意（semantics），但這是已淘汰的方法。瀏覽器對 `blob.mozSlice()` 的支援已在 Firefox 30 時中止。
 
 ## 建構式
 
@@ -45,7 +47,8 @@ var blob = new Blob([JSON.stringify(debug, null, 2)], {
 });
 ```
 
-> **警告：** 在 Blob 建構式出現之前，可以透過 {{domxref("BlobBuilder")}} 來建立 blob 物件（目前已不建議使用）：
+> [!WARNING]
+> 在 Blob 建構式出現之前，可以透過 {{domxref("BlobBuilder")}} 來建立 blob 物件（目前已不建議使用）：
 >
 > ```js
 > var builder = new BlobBuilder();