chores: convert noteblocks

files/zh-tw/web/api/mutationobserver/index.md

@@ -51,7 +51,8 @@ void observe(
 - `options`
   - : A [`MutationObserverInit`](#MutationObserverInit) object, specifies which DOM mutations should be reported.
 
-> **備註：** Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it.
+> [!NOTE]
+> Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it.
 
 ### `disconnect()`
 
@@ -77,7 +78,8 @@ Returns an Array of [`MutationRecord`s](#MutationRecord).
 
 `MutationObserverInit` is an object which can specify the following properties:
 
-> **備註：** At the very least, `childList`, `attributes`, or `characterData` must be set to `true`. Otherwise, "An invalid or illegal string was specified" error is thrown.
+> [!NOTE]
+> At the very least, `childList`, `attributes`, or `characterData` must be set to `true`. Otherwise, "An invalid or illegal string was specified" error is thrown.
 
 | Property                | Description                                                                                                            |
 | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |

files/zh-tw/web/api/navigator/geolocation/index.md

@@ -7,7 +7,8 @@ slug: Web/API/Navigator/geolocation
 
 **`Navigator.geolocation`** 回傳一個唯讀的 {{domxref("Geolocation")}} 物件，透過這個物件可以存取設備的位置訊息。同時也允許網站或應用程式根據使用者的位置提供客製化的結果。
 
-> **備註：** 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。
+> [!NOTE]
+> 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。
 
 ## 語法
 

files/zh-tw/web/api/notifications_api/index.md

@@ -24,15 +24,17 @@ btn.addEventListener("click", function () {
 
 用戶可以從此處選擇允許、屏蔽來自此來源的通知，也可以不做選擇。 一旦選定，該設置通常將在當前會話中保持不變。
 
-> **備註：** 從 Firefox 44 開始，Notifications 和 [Push](/zh-TW/docs/Web/API/Push_API) 的權限已合併。如果授予通知權限則推送也將被啟用。
+> [!NOTE]
+> 從 Firefox 44 開始，Notifications 和 [Push](/zh-TW/docs/Web/API/Push_API) 的權限已合併。如果授予通知權限則推送也將被啟用。
 
 下一步，使用 {{domxref("Notification.Notification","Notification()")}} 構造函數創建一個新通知。 這必須要傳遞一個標題參數(title)，並且可以選擇性的傳遞選擇物件指定諸如文字方向、正文、圖標、撥放通知的聲音等等。
 
 {{AvailableInWorkers}}
 
 另外，Notifications API 規範指定了 [ServiceWorker API](/zh-TW/docs/Web/API/ServiceWorker_API) 的許多附加功能，以允許服務人員觸發通知。
 
-> **備註：** 要了解有關在自己的應用程序中使用通知的更多信息，請閱讀 [Using the Notifications API](/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API)。
+> [!NOTE]
+> 要了解有關在自己的應用程序中使用通知的更多信息，請閱讀 [Using the Notifications API](/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API)。
 
 ## Notifications 介面
 

files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md

@@ -21,7 +21,8 @@ Web Notifications API 可將通知傳送至頁面以外的系統層級並顯示
 - `granted`：使用者允許接收到 Apps 的通知
 - `denied`：使用者拒絕接收 Apps 的通知
 
-> **備註：** Chrome 與 Safari 尚未建構 `permission` 屬性。
+> [!NOTE]
+> Chrome 與 Safari 尚未建構 `permission` 屬性。
 
 若使用者尚未給予權限，則 Apps 必須透過 [`Notification.requestPermission()`](/zh-TW/docs/Web/API/Notification.requestPermission) 函式讓使用者選擇，接著由此函式接收 1 組回呼 (Callback) 函式作為參數；而該回呼函式則提供使用者是否授權的資訊。
 
@@ -38,7 +39,8 @@ window.addEventListener("load", function () {
 });
 ```
 
-> **備註：** Chrome 不允許於載入事件中呼叫 [`Notification.requestPermission()`](/zh-TW/docs/Web/API/Notification.requestPermission) (參閱 [issue 274284](https://code.google.com/p/chromium/issues/detail?id=274284))。
+> [!NOTE]
+> Chrome 不允許於載入事件中呼叫 [`Notification.requestPermission()`](/zh-TW/docs/Web/API/Notification.requestPermission) (參閱 [issue 274284](https://code.google.com/p/chromium/issues/detail?id=274284))。
 
 ### 已安裝的 Apps
 
@@ -65,7 +67,8 @@ permissions: {
 
 而透過 [`onshow`](/zh-TW/docs/Web/API/Notification.onshow)、[`onclick`](/zh-TW/docs/Web/API/Notification.onclick)、[`onclose`](/zh-TW/docs/Web/API/Notification.onclose)，或 [`onerror`](/zh-TW/docs/Web/API/Notification.onerror) 等事件處理器 (Event handler)，即可追蹤這些事件。由於 [`Notification`](/zh-TW/docs/Web/API/Notification) 是繼承 [`EventTarget`](/zh-TW/docs/Web/API/EventTarget) 而來，因此亦可使用 [`addEventListener()`](/zh-TW/docs/Web/API/EventTarget.addEventListener) 函式。
 
-> **備註：** Firefox 與 Safari 並未遵守 close 事件的規格。此規格雖然規定「僅限使用者能關閉通知」，但 Firefox 與 Safari 卻可於數分鐘後自動關閉通知。因此不一定是由使用者關閉通知。此規格並明確規定「應透過 [`Notification.close()`](/zh-TW/docs/Web/API/Notification.close) 函式，於應用程式層級完成自動關閉通知」。範例程式碼如下：
+> [!NOTE]
+> Firefox 與 Safari 並未遵守 close 事件的規格。此規格雖然規定「僅限使用者能關閉通知」，但 Firefox 與 Safari 卻可於數分鐘後自動關閉通知。因此不一定是由使用者關閉通知。此規格並明確規定「應透過 [`Notification.close()`](/zh-TW/docs/Web/API/Notification.close) 函式，於應用程式層級完成自動關閉通知」。範例程式碼如下：
 >
 > ```js
 > var n = new Notification("Hi!");

files/zh-tw/web/api/payment_request_api/index.md

@@ -23,7 +23,8 @@ Payment Request API 提供商家與用戶雙方一致的用戶體驗。它並不
 
 你可以在 [使用 Payment Request API](/zh-TW/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API) 文章看到完整教學。
 
-> **備註：** 此 API 只有在設定 [`allowpaymentrequest`](/zh-TW/docs/Web/HTML/Element/iframe#allowpaymentrequest) 屬性下，才可支援跨域 {{htmlelement("iframe")}} 元素。
+> [!NOTE]
+> 此 API 只有在設定 [`allowpaymentrequest`](/zh-TW/docs/Web/HTML/Element/iframe#allowpaymentrequest) 屬性下，才可支援跨域 {{htmlelement("iframe")}} 元素。
 
 ## 介面
 

files/zh-tw/web/api/permissions_api/index.md

@@ -63,7 +63,8 @@ apps.onsuccess = function () {
 
 只要使用 [`PermissionSettings.set()`](/zh-TW/docs/DOM/PermissionSettings.set) 函式即可設定權限。可能的數值均與 [`get`](/zh-TW/docs/DOM/PermissionSettings.get) 函式所存取的相同。
 
-> **備註：** 根據 Apps 權限的不同，某些可能為隱性 (Implicit) 權限。若因為某種理由，Apps 嘗試將權限變更為隱性權限，就會產生錯誤。為了避免這種錯誤，可透過 [`PermissionSettings.isExplicit()`](/zh-TW/docs/DOM/PermissionSettings.isExplicit) 函式而檢查是否為顯性權限。
+> [!NOTE]
+> 根據 Apps 權限的不同，某些可能為隱性 (Implicit) 權限。若因為某種理由，Apps 嘗試將權限變更為隱性權限，就會產生錯誤。為了避免這種錯誤，可透過 [`PermissionSettings.isExplicit()`](/zh-TW/docs/DOM/PermissionSettings.isExplicit) 函式而檢查是否為顯性權限。
 
 ```js
 // Let's check all installed apps

files/zh-tw/web/api/pointer_lock_api/index.md

@@ -168,13 +168,15 @@ document.exitPointerLock();
 
 若 Pointer lock 狀態改變，如呼叫 [requestPointerLock](/zh-TW/docs/Web/API/Element.requestPointerLock)、[exitPointerLock](/zh-TW/docs/Web/API/Document.exitPointerLock)，或使用者按下 ESC 鍵等。則 [pointerlockchange](/zh-TW/docs/Web/API/GlobalEventHandlers.pointerlockchange) 事件隨即傳送至 `document`。此簡單事件不包含額外資料。
 
-> **備註：** 此事件目前在 Firefox 中的前綴為 `mozpointerlockchange`；在 Chrome 中的前綴為 `webkitpointerlockchange`。
+> [!NOTE]
+> 此事件目前在 Firefox 中的前綴為 `mozpointerlockchange`；在 Chrome 中的前綴為 `webkitpointerlockchange`。
 
 ## pointerlockerror 事件
 
 當呼叫 [requestPointerLock](/zh-TW/docs/Web/API/Element.requestPointerLock) 或 [exitPointerLock](/zh-TW/docs/Web/API/Document.exitPointerLock) 而發生錯誤時，隨即傳送 [pointerlockerror](/zh-TW/docs/Web/API/GlobalEventHandlers.pointerlockerror) 事件至 `document`。此簡單事件不包含額外資料。
 
-> **備註：** 此事件在 Firefox 中的前綴為 `mozpointerlockerror`；在 Chrome 中的前綴為 `webkitpointerlockerror`。
+> [!NOTE]
+> 此事件在 Firefox 中的前綴為 `mozpointerlockerror`；在 Chrome 中的前綴為 `webkitpointerlockerror`。
 
 ## 擴充至滑鼠事件
 
@@ -187,7 +189,8 @@ partial interface MouseEvent {
 };
 ```
 
-> **備註：** 位移屬性目前在 Firefox 中的前綴為 `.mozMovementX` 與 `.mozMovementY`；在 Chrome 中的前綴為`.webkitMovementX` 與 `.webkitMovementY`。
+> [!NOTE]
+> 位移屬性目前在 Firefox 中的前綴為 `.mozMovementX` 與 `.mozMovementY`；在 Chrome 中的前綴為`.webkitMovementX` 與 `.webkitMovementY`。
 
 滑鼠事件的二個新參數 (即 [movementX](/zh-TW/docs/Web/API/MouseEvent.movementX) 與 [movementY](/zh-TW/docs/Web/API/MouseEvent.movementY)) 將提供滑鼠位置的變化情形。此二項參數的值，等於 [MouseEvent](/zh-TW/docs/Web/API/MouseEvent) 屬性值 (即 [screenX](/zh-TW/docs/Web/API/MouseEvent.screenX) 與 [screenY](/zh-TW/docs/Web/API/MouseEvent.screenY)) 之間的變化；而 [MouseEvent](/zh-TW/docs/Web/API/MouseEvent) 屬性另儲存於二項連續的 [mousemove](/zh-TW/docs/Web/API/GlobalEventHandlers.mousemove) 事件 (即 eNow 與 ePrevious) 之內。換句話說，Pointer lock 參數 `movementX = eNow.screenX - ePrevious.screenX`。
 

files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md

@@ -50,7 +50,8 @@ evtSource.addEventListener("ping", function (event) {
 
 上述的程式碼大同小異，不同之處在於若伺服器傳送了 `event` 欄位值為「ping」的訊息時它就會把 `data` 欄位的值解析為 JSON 並輸出到畫面上。
 
-> **警告：** 當連線不是透過 **HTTP/2** 時，SSE 會受到最大連線數限制所苦，尤其當開啟多個分頁。每個瀏覽器有自己的限制數而且被限制在很低的數量（6）。這個問題已經被 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) 和 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896) 標註為「Won't fix」（不修復）。限制是基於每個瀏覽器 + 網域，也就是說你可以針對 www\.example1.com 網域在所有的分頁中開啟六個 SSE 連線，另一個網域 www\.example2.com 也可以開啟六個（根據 [Stackoverflow](https://stackoverflow.com/a/5326159/1905229)）。當使用 HTTP/2 時最大同時 _HTTP streams_ 連線數是由伺服器和客戶端之間協調（預設 100）。
+> [!WARNING]
+> 當連線不是透過 **HTTP/2** 時，SSE 會受到最大連線數限制所苦，尤其當開啟多個分頁。每個瀏覽器有自己的限制數而且被限制在很低的數量（6）。這個問題已經被 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) 和 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896) 標註為「Won't fix」（不修復）。限制是基於每個瀏覽器 + 網域，也就是說你可以針對 www\.example1.com 網域在所有的分頁中開啟六個 SSE 連線，另一個網域 www\.example2.com 也可以開啟六個（根據 [Stackoverflow](https://stackoverflow.com/a/5326159/1905229)）。當使用 HTTP/2 時最大同時 _HTTP streams_ 連線數是由伺服器和客戶端之間協調（預設 100）。
 
 ## 從伺服器發送事件
 
@@ -95,7 +96,8 @@ while (true) {
 上述的程式碼會在每秒產生一個類型為「ping」的事件。每一個事件的資料是一個 JSON 物件，內容為事件產生時的 ISO 8601 時間戳。同時會隨機發送一個簡易訊息（沒有事件類型）。
 迴圈的執行會獨立於連線的狀態，，所以在迴圈裡必須檢查連線的狀態，若斷線了要關閉連線（譬如，客戶端關閉了網頁）。
 
-> **備註：** 你可以從下列的 Github 文章中找到包含本文所使用程式碼的完整範例 —— 參考 [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+> [!NOTE]
+> 你可以從下列的 Github 文章中找到包含本文所使用程式碼的完整範例 —— 參考 [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
 ## 錯誤處理
 
@@ -119,7 +121,8 @@ evtSource.close();
 
 事件串流是個簡易的文字資料串流，內容必須以 UTF-8 格式編碼。在事件串流中，不同的訊息以一對換行符號做區隔。若要撰寫註解，則要在該行的開頭加上冒號（:）。
 
-> **備註：** 註解將有助於防止連線逾時；伺服器端可以定時發送註解以維持連線活著。
+> [!NOTE]
+> 註解將有助於防止連線逾時；伺服器端可以定時發送註解以維持連線活著。
 
 每一個訊息是由一到多列的欄位所組成的文字。每個欄位依序由欄位的名稱、冒號、該欄位的文字內容所組合而成。
 
@@ -138,7 +141,8 @@ evtSource.close();
 
 除上述的幾個欄位，其他欄位均會被忽略。
 
-> **備註：** 如果某列的內容沒有包含冒號，則該列的內容都會被視為欄位名稱及空字串的欄位值。
+> [!NOTE]
+> 如果某列的內容沒有包含冒號，則該列的內容都會被視為欄位名稱及空字串的欄位值。
 
 ### 範例
 

files/zh-tw/web/api/setinterval/index.md

@@ -25,15 +25,17 @@ var intervalID = scope.setInterval(code, [delay]);
 - `arg1, ..., argN` {{optional_inline}}
   - : Additional arguments which are passed through to the function specified by _func_ once the timer expires.
 
-> **備註：** Passing additional arguments to `setInterval()` in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the [Callback arguments](#Callback_arguments) section).
+> [!NOTE]
+> Passing additional arguments to `setInterval()` in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the [Callback arguments](#Callback_arguments) section).
 
 ### Return value
 
 The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("clearInterval()")}} to cancel the timeout.
 
 It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.
 
-> **備註：** The `delay` argument is converted to a signed 32-bit integer. This effectively limits `delay` to 2147483647 ms, since it's specified as a signed integer in the IDL.
+> [!NOTE]
+> The `delay` argument is converted to a signed 32-bit integer. This effectively limits `delay` to 2147483647 ms, since it's specified as a signed integer in the IDL.
 
 ## Examples
 
@@ -247,7 +249,8 @@ window.setInterval = function (
 };
 ```
 
-> **備註：** These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as _non-standard-compliant_ polyfills also. See the [callback arguments paragraph](#Callback_arguments) for a _standard-compliant_ polyfill.
+> [!NOTE]
+> These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as _non-standard-compliant_ polyfills also. See the [callback arguments paragraph](#Callback_arguments) for a _standard-compliant_ polyfill.
 
 New feature test:
 
@@ -265,7 +268,8 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 s
 
 Another, more complex, solution for **the [`this`](/zh-TW/docs/Web/JavaScript/Reference/Operators/this) problem** is [the following framework](#MiniDaemon_-_A_framework_for_managing_timers).
 
-> **備註：** JavaScript 1.8.5 introduces the [`Function.prototype.bind()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) method, which lets you specify the value that should be used as `this` for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports [arrow functions](/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions), with lexical this allowing us to write setInterval( () => this.myMethod) if we're inside myArray method.
+> [!NOTE]
+> JavaScript 1.8.5 introduces the [`Function.prototype.bind()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) method, which lets you specify the value that should be used as `this` for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports [arrow functions](/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions), with lexical this allowing us to write setInterval( () => this.myMethod) if we're inside myArray method.
 
 ## Usage notes
 

files/zh-tw/web/api/storage/index.md

@@ -62,7 +62,8 @@ function setStyles() {
 }
 ```
 
-> **備註：** 想要看這個範例完整運行，可以參考我們的 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
+> [!NOTE]
+> 想要看這個範例完整運行，可以參考我們的 [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
 
 ## 規範
 

files/zh-tw/web/api/touch_events/index.md

@@ -31,7 +31,8 @@ slug: Web/API/Touch_events
 
 This example tracks multiple touch points at a time, allowing the user to draw in a {{HTMLElement("canvas")}} with more than one finger at a time. It will only work on a browser that supports touch events.
 
-> **備註：** The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.
+> [!NOTE]
+> The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.
 
 ### Create a canvas