diff --git a/files/zh-tw/web/api/mutationobserver/index.md b/files/zh-tw/web/api/mutationobserver/index.md index 9ccd2ba68ff58e..30a3196d8ce7a4 100644 --- a/files/zh-tw/web/api/mutationobserver/index.md +++ b/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 | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- | diff --git a/files/zh-tw/web/api/navigator/geolocation/index.md b/files/zh-tw/web/api/navigator/geolocation/index.md index 2170f55fcbefeb..3bbb6f9969c19d 100644 --- a/files/zh-tw/web/api/navigator/geolocation/index.md +++ b/files/zh-tw/web/api/navigator/geolocation/index.md @@ -7,7 +7,8 @@ slug: Web/API/Navigator/geolocation **`Navigator.geolocation`** 回傳一個唯讀的 {{domxref("Geolocation")}} 物件，透過這個物件可以存取設備的位置訊息。同時也允許網站或應用程式根據使用者的位置提供客製化的結果。 -> **備註：** 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。 +> [!NOTE] +> 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。 ## 語法 diff --git a/files/zh-tw/web/api/notifications_api/index.md b/files/zh-tw/web/api/notifications_api/index.md index 05c73080e4b1c3..43ffea391f50fd 100644 --- a/files/zh-tw/web/api/notifications_api/index.md +++ b/files/zh-tw/web/api/notifications_api/index.md @@ -24,7 +24,8 @@ 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)，並且可以選擇性的傳遞選擇物件指定諸如文字方向、正文、圖標、撥放通知的聲音等等。 @@ -32,7 +33,8 @@ btn.addEventListener("click", function () { 另外，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 介面 diff --git a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md index 6bf32196f0b288..3ca14b324c2c7e 100644 --- a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md +++ b/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!"); diff --git a/files/zh-tw/web/api/payment_request_api/index.md b/files/zh-tw/web/api/payment_request_api/index.md index babfd796cde9ce..6ad7bb142b7005 100644 --- a/files/zh-tw/web/api/payment_request_api/index.md +++ b/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")}} 元素。 ## 介面 diff --git a/files/zh-tw/web/api/permissions_api/index.md b/files/zh-tw/web/api/permissions_api/index.md index 15e873a6fdc81d..f448dd1ab0a340 100644 --- a/files/zh-tw/web/api/permissions_api/index.md +++ b/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 diff --git a/files/zh-tw/web/api/pointer_lock_api/index.md b/files/zh-tw/web/api/pointer_lock_api/index.md index cd9a97368f6248..6b0e2e9fec7781 100644 --- a/files/zh-tw/web/api/pointer_lock_api/index.md +++ b/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`。 diff --git a/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md b/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md index 91618fd45fb356..3f0e3801fb70e8 100644 --- a/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md +++ b/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] +> 如果某列的內容沒有包含冒號，則該列的內容都會被視為欄位名稱及空字串的欄位值。 ### 範例 diff --git a/files/zh-tw/web/api/setinterval/index.md b/files/zh-tw/web/api/setinterval/index.md index 81133bbffea2a7..b21dae98fa1199 100644 --- a/files/zh-tw/web/api/setinterval/index.md +++ b/files/zh-tw/web/api/setinterval/index.md @@ -25,7 +25,8 @@ 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 @@ -33,7 +34,8 @@ The returned `intervalID` is a numeric, non-zero value which identifies the time 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 diff --git a/files/zh-tw/web/api/storage/index.md b/files/zh-tw/web/api/storage/index.md index 95396cd3b45b16..87a5c3883bbf47 100644 --- a/files/zh-tw/web/api/storage/index.md +++ b/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/). ## 規範 diff --git a/files/zh-tw/web/api/touch_events/index.md b/files/zh-tw/web/api/touch_events/index.md index dd995d7c37e44d..c6c1217e0656d5 100644 --- a/files/zh-tw/web/api/touch_events/index.md +++ b/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 diff --git a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md index 67fa76bd16e246..299fd4e9cc616b 100644 --- a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md +++ b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md @@ -13,7 +13,8 @@ Web Worker 提供簡單的方法讓網頁在背景執行緒（Thread）中執行 Dedicated worker (專有 worker) 是一般 worker，只能被產生它的檔案存取，{{domxref("DedicatedWorkerGlobalScope")}} 物件代表其執行環境；而 Shared worker (共享 worker) 則能夠被不同檔案存取，{{domxref("SharedWorkerGlobalScope")}}) 物件代表其執行環境。 -> **備註：** worker 其他文件說明請見 [The Web Workers API landing page](/zh-TW/docs/Web/API/Web_Workers_API) 。 +> [!NOTE] +> worker 其他文件說明請見 [The Web Workers API landing page](/zh-TW/docs/Web/API/Web_Workers_API) 。 基本上 worker 能夠執行任何事情，比如說 [WebSockets](/zh-TW/docs/Web/API/WebSockets_API)、[IndexedDB](/zh-TW/docs/Web/API/IndexedDB_API)、和 Firefox OS 特有的 [Data Store API](/zh-TW/docs/Web/API/Data_Store_API) ，然而直接存取 DOM 或是 {{domxref("window")}} 物件的一些方法和屬性則不被允許，更多細節請見 [worker 可存取知函數和類別](/zh-TW/docs/Web/API/Worker/Functions_and_classes_available_to_workers)。 @@ -89,9 +90,11 @@ myWorker.onmessage = function (e) { > **備註：** `建構 Worker` 的 URI 必須遵從[same-origin policy](/zh-TW/docs/Web/Security/Same-origin_policy)。目前各家瀏覽器在這方面存有歧異，Gecko 10.0 以後允許 data URI 而 Internet Explorer 10 不允許 Blob URI。 -> **備註：** 在主執行緒中存取 `onmessage` `與 postMessage` 需要主動掛在 worker 物件上，在 worker 執行緒則不用，這是因為 worker 執行緒的全域物件便是 worker 物件。 +> [!NOTE] +> 在主執行緒中存取 `onmessage` `與 postMessage` 需要主動掛在 worker 物件上，在 worker 執行緒則不用，這是因為 worker 執行緒的全域物件便是 worker 物件。 -> **備註：** 和 worker 傳送的資料並非共享而是複製一份後傳送，詳細請參照 [和 workers 傳遞資料：更多細節](#和_workers_傳遞資料：更多細節)。 +> [!NOTE] +> 和 worker 傳送的資料並非共享而是複製一份後傳送，詳細請參照 [和 workers 傳遞資料：更多細節](#和_workers_傳遞資料：更多細節)。 ### 結束 worker @@ -138,7 +141,8 @@ importScripts("foo.js", "bar.js"); /* imports two scripts */ 瀏覽器會載入並執行每個程式碼腳本，然後 worker 能夠存取程式碼腳本內定義的全域變數，若是腳本無法載入，會產生一個 NETWORK_ERROR，後續的程式碼不會被執行，但是先前執行過的程式碼或用 [window.setTimeout()](/zh-TW/docs/Web/API/window.setTimeout) 延遲執行的程式碼依然有效，而 importScripts() 之後宣告的函數也一樣存在，因為這些程式碼總是在其他程式碼之前就解析過了。 -> **備註：** 雖然程式碼腳本的下載順序不一定，但執行順序會遵照傳入 importScripts()的順序，這是同步完成的，importScripts()不會回傳直到所有的程式碼都下載並執行完。 +> [!NOTE] +> 雖然程式碼腳本的下載順序不一定，但執行順序會遵照傳入 importScripts()的順序，這是同步完成的，importScripts()不會回傳直到所有的程式碼都下載並執行完。 ## Shared workers @@ -146,9 +150,11 @@ shared worker 能夠被多個程式腳本存取，縱使跨越不同 window、if 請注意 dedicated worker 與 shared worker 間的差異處，範例裡會有兩份 HTML 頁面，各自都利用同一個 worker 處理運算。 -> **備註：** 所有的瀏覽環境都必需共享相同的來源（相同 protocol, host 和 port），shared worker 才能讓不同瀏覽環境存取。 +> [!NOTE] +> 所有的瀏覽環境都必需共享相同的來源（相同 protocol, host 和 port），shared worker 才能讓不同瀏覽環境存取。 -> **備註：** 在 Firefox，shared worker 無法在一般和隱私模式間共享（[Firefox bug 1177621](https://bugzil.la/1177621)）。 +> [!NOTE] +> 在 Firefox，shared worker 無法在一般和隱私模式間共享（[Firefox bug 1177621](https://bugzil.la/1177621)）。 ### 產生 shared worker @@ -544,7 +550,8 @@ for (var i = 0; i < uInt8Array.length; ++i) { worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); ``` -> **備註：** 關於更多可移轉物件的資訊, 效能和功能偵測，請參考 HTML5 Rocks 上 [Transferable Objects: Lightning Fast!](http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast) 一文。 +> [!NOTE] +> 關於更多可移轉物件的資訊, 效能和功能偵測，請參考 HTML5 Rocks 上 [Transferable Objects: Lightning Fast!](http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast) 一文。 ## Embedded workers @@ -724,7 +731,8 @@ onmessage 事件處理器會接收 worker 回傳的運算結果，然後顯示 worker 無法操作主頁面的物件與 DOM，如有相關需求，必須要間接透過 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 通知主頁面，讓主頁面執行需求。 -> **備註：** 所有 worker 可存取功能一覽表，請見 [Functions and interfaces available to workers](/zh-TW/docs/Web/Reference/Functions_and_classes_available_to_workers). +> [!NOTE] +> 所有 worker 可存取功能一覽表，請見 [Functions and interfaces available to workers](/zh-TW/docs/Web/Reference/Functions_and_classes_available_to_workers). ## 標準規範 diff --git a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 4c727ec7f17e76..2b5f05c1d8f29a 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -23,7 +23,8 @@ slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL ### 準備 WebGL 背景資料 -> **備註：** 背景資料為 Context 翻譯而來 +> [!NOTE] +> 背景資料為 Context 翻譯而來 在下面的 JavaScript 程式碼，當指令完成讀取後會執行 `main()` 函式。目的是為了設定 WebGL 背景資料並且開始渲染內容。 diff --git a/files/zh-tw/web/api/websocket/index.md b/files/zh-tw/web/api/websocket/index.md index 9f471d61641882..e70499e5e049e8 100644 --- a/files/zh-tw/web/api/websocket/index.md +++ b/files/zh-tw/web/api/websocket/index.md @@ -100,7 +100,8 @@ void send( #### 註釋 -> **備註：** Gecko `send()` 方法的實作與 Gecko 6.0 的規範有差別。Gecko 回傳一個 `boolean` 以表示連線是否仍處於開啟狀態（且資料成功隊列／傳輸）。另外，此時此刻，Gecko 不支援 [`ArrayBuffer`](/zh_tw/JavaScript_typed_arrays/ArrayBuffer) 或 {{ domxref("Blob") }} 作為資料形態。 +> [!NOTE] +> Gecko `send()` 方法的實作與 Gecko 6.0 的規範有差別。Gecko 回傳一個 `boolean` 以表示連線是否仍處於開啟狀態（且資料成功隊列／傳輸）。另外，此時此刻，Gecko 不支援 [`ArrayBuffer`](/zh_tw/JavaScript_typed_arrays/ArrayBuffer) 或 {{ domxref("Blob") }} 作為資料形態。 ## 參見 diff --git a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md index 08f9a3836587b9..af19b5d5c29f5d 100644 --- a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -7,19 +7,22 @@ slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。使用這項技術的 Webapp 可以直接進行即時通訊而不需要不斷對資料更改進行輪詢（polling）。 -> **備註：** 當我們的系統架構可以寄存 WebSocket 範例之後，我們會提供聊天／伺服器系統實例的幾個範例。 +> [!NOTE] +> 當我們的系統架構可以寄存 WebSocket 範例之後，我們會提供聊天／伺服器系統實例的幾個範例。 ## 哪裡有 WebSocket 若 JavaScript 代碼的範疇是 {{ domxref("Window") }} 物件或是實作 {{ domxref("WorkerUtils") }} 的物件，則可使用 WebSocket API。也就是可以從 Web Workers 使用 WebSocket。 -> **備註：** WebSockets API（與底層協定）的開發還在進展中，且目前不同瀏覽器（甚至瀏覽器的不同版本）有很多兼容問題。 +> [!NOTE] +> WebSockets API（與底層協定）的開發還在進展中，且目前不同瀏覽器（甚至瀏覽器的不同版本）有很多兼容問題。 ## 建立一個 WebSocket 物件 你必須建立一個 [`WebSocket`](/zh_tw/WebSockets/WebSockets_reference/WebSocket) 物件才能讓瀏覽器／伺服器得以以 WebSocket 協定進行通訊，此物件在被建立之後會自動與伺服器連線。 -> **備註：** 別忘記在 Firefox 6.0 中 `WebSocket` 物件仍有前輟，所以在這裡須改成 `MozWebSocket`。 +> [!NOTE] +> 別忘記在 Firefox 6.0 中 `WebSocket` 物件仍有前輟，所以在這裡須改成 `MozWebSocket`。 WebSocket 的建構方法有一個必要參數與一個選擇參數： @@ -77,7 +80,8 @@ mySocket.send("這是伺服器正迫切需要的文字！"); 可以被傳送的內容包括字串、[`Blob`](/zh-TW/DOM/Blob) 或是 [`ArrayBuffer`](/zh_tw/JavaScript_typed_arrays/ArrayBuffer)。 -> **備註：** Firefox 目前只支援字串傳送。 +> [!NOTE] +> Firefox 目前只支援字串傳送。 ### 用 JSON 傳輸物件 diff --git a/files/zh-tw/web/api/wheelevent/index.md b/files/zh-tw/web/api/wheelevent/index.md index 79a3430f6b4710..431e9501d9260d 100644 --- a/files/zh-tw/web/api/wheelevent/index.md +++ b/files/zh-tw/web/api/wheelevent/index.md @@ -7,9 +7,11 @@ slug: Web/API/WheelEvent WheelEvent DOM 事件會在用戶滚动滑鼠滚轮或操作其它類似滑鼠的設備時觸發。 -> **警告：** 該事件爲標準規定的事件介面。早期的瀏覽器實現過 {{domxref("MouseWheelEvent")}} 和 {{domxref("MouseScrollEvent")}} 兩種滾輪事件介面，但這兩種介面皆非標準，加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。 +> [!WARNING] +> 該事件爲標準規定的事件介面。早期的瀏覽器實現過 {{domxref("MouseWheelEvent")}} 和 {{domxref("MouseScrollEvent")}} 兩種滾輪事件介面，但這兩種介面皆非標準，加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。 -> **備註：** 請勿想當然依據滾輪方向（即該事件的各 delta 屬性值）來推斷文檔內容的滾動方向，因標準未定義滾輪事件具體會引發什麼樣的行爲，引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲，也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向，可在文檔內容滾動事件（{{domxref("Element/scroll_event", "scroll")}}）中監視 {{domxref("Element.scrollLeft", "scrollLeft")}} 和 {{domxref("Element.scrollTop", "scrollTop")}} 二值變化情況，即可推斷出滾動方向了。 +> [!NOTE] +> 請勿想當然依據滾輪方向（即該事件的各 delta 屬性值）來推斷文檔內容的滾動方向，因標準未定義滾輪事件具體會引發什麼樣的行爲，引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲，也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向，可在文檔內容滾動事件（{{domxref("Element/scroll_event", "scroll")}}）中監視 {{domxref("Element.scrollLeft", "scrollLeft")}} 和 {{domxref("Element.scrollTop", "scrollTop")}} 二值變化情況，即可推斷出滾動方向了。 {{InheritanceDiagram}} diff --git a/files/zh-tw/web/api/window/localstorage/index.md b/files/zh-tw/web/api/window/localstorage/index.md index 4e062a370df56c..61e040013607a0 100644 --- a/files/zh-tw/web/api/window/localstorage/index.md +++ b/files/zh-tw/web/api/window/localstorage/index.md @@ -53,7 +53,8 @@ localStorage.removeItem("myCat"); localStorage.clear(); ``` -> **備註：** Please refer to the [Using the Web Storage API](/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) article for a full example. +> [!NOTE] +> Please refer to the [Using the Web Storage API](/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) article for a full example. ## Specifications diff --git a/files/zh-tw/web/api/window/requestanimationframe/index.md b/files/zh-tw/web/api/window/requestanimationframe/index.md index ede4c1e0f5bfb6..36526627dd663c 100644 --- a/files/zh-tw/web/api/window/requestanimationframe/index.md +++ b/files/zh-tw/web/api/window/requestanimationframe/index.md @@ -7,7 +7,8 @@ slug: Web/API/Window/requestAnimationFrame **`window.requestAnimationFrame()`**方法通知瀏覽器我們想要產生動畫，並且要求瀏覽器在下次重繪畫面前呼叫特定函數更新動畫。這個方法接受一個引數作為下次重繪前調用的回呼函數。 -> **備註：** 若是想要在下次重繪時產生另一個動畫，這個回呼函數內必須自行呼叫 requestAnimationFrame()。 +> [!NOTE] +> 若是想要在下次重繪時產生另一個動畫，這個回呼函數內必須自行呼叫 requestAnimationFrame()。 當準備好更新頁面上的動畫時應當呼叫這個方法。這表示向瀏覽器請求在下次重繪前呼叫這個動畫函數。回呼的次數通常落在每秒 60 次，但通常會根據 W3C 的建議符合多數瀏覽器重新整理的頻率。當頁面處於背景或隱藏狀態時 {{ HTMLElement("iframe") }} ，多數的瀏覽器會暫停 `requestAnimationFrame()` 的呼叫，從而改善效能表現及電池壽命。 diff --git a/files/zh-tw/web/api/window/sessionstorage/index.md b/files/zh-tw/web/api/window/sessionstorage/index.md index 4e50e85c5471d7..18a1a4619ef099 100644 --- a/files/zh-tw/web/api/window/sessionstorage/index.md +++ b/files/zh-tw/web/api/window/sessionstorage/index.md @@ -57,7 +57,8 @@ field.addEventListener("change", function () { }); ``` -> **備註：** 完整的範例可參考這篇文章: [Using the Web Storage API](/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)。 +> [!NOTE] +> 完整的範例可參考這篇文章: [Using the Web Storage API](/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)。 ## 規格 diff --git a/files/zh-tw/web/api/xmlhttprequest/index.md b/files/zh-tw/web/api/xmlhttprequest/index.md index 0ad8ff55dd02d6..500b04ed3f0fa4 100644 --- a/files/zh-tw/web/api/xmlhttprequest/index.md +++ b/files/zh-tw/web/api/xmlhttprequest/index.md @@ -41,7 +41,8 @@ _此介面也繼承了 {{domxref("XMLHttpRequestEventTarget")}} 及 {{domxref("E - {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}} - : 回傳一個 {{domxref("DOMString")}} 表示 HTTP 伺服器回應之字串。和 {{domxref("XMLHTTPRequest.status")}} 不同的是，`XMLHttpRequest.statusText` 包含了回應的整個文字訊息（如 "`200 OK`"）。 -> **備註：** The HTTP/2 specification ([8.1.2.4](https://http2.github.io/http2-spec/#rfc.section.8.1.2.4) [Response Pseudo-Header Fields](https://http2.github.io/http2-spec/#HttpResponse)), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line. +> [!NOTE] +> The HTTP/2 specification ([8.1.2.4](https://http2.github.io/http2-spec/#rfc.section.8.1.2.4) [Response Pseudo-Header Fields](https://http2.github.io/http2-spec/#HttpResponse)), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line. - {{domxref("XMLHttpRequest.timeout")}} - : 為一無符號長整數（`unsigned long`），代表一個請求在逾時而被自動中止前的可等待時間（毫秒）。 @@ -98,7 +99,8 @@ _此介面也繼承了 {{domxref("XMLHttpRequestEventTarget")}} 及 {{domxref("E - : 使用 C++ 程式時，用來初始化這個物件。 - > **警告：** 請勿在 JavaScript 中呼叫這個方法。 + > [!WARNING] + > 請勿在 JavaScript 中呼叫這個方法。 - {{domxref("XMLHttpRequest.openRequest()")}} - : 初始化請求。這方法是用於原生程式，若想在 JavaScript 中初始化一個請求，請使用 [`open()`]() 這個方法來代替。請參照 `open()` 的相關文件。 diff --git a/files/zh-tw/web/api/xmlhttprequest/open/index.md b/files/zh-tw/web/api/xmlhttprequest/open/index.md index 85fbdeaa058b8b..3151b0463f1b7f 100644 --- a/files/zh-tw/web/api/xmlhttprequest/open/index.md +++ b/files/zh-tw/web/api/xmlhttprequest/open/index.md @@ -7,7 +7,8 @@ slug: Web/API/XMLHttpRequest/open {{domxref("XMLHttpRequest")}} 的 **`open()`** 方法用來初始化新建立的請求，或重新初始化現有請求。 -> **備註：** 為已啟動（已經呼叫 `open()`）的請求呼叫此方法，相當於呼叫 {{domxref("XMLHttpRequest.abort", "abort()")}}。 +> [!NOTE] +> 為已啟動（已經呼叫 `open()`）的請求呼叫此方法，相當於呼叫 {{domxref("XMLHttpRequest.abort", "abort()")}}。 ## 語法 @@ -28,7 +29,8 @@ open(method, url, async, user, password) - : 選擇性布林參數，表示是否非同步執行操作，預設為 `true`。如果該值為 `false`，則 `send()` 方法在收到回應之前不會傳回。如果為 `true`，則使用事件監聽器提供交易完成的通知。如果 `multipart` 屬性為 `true`，則該值必須為 `true`，否則將引發例外。 - > **備註：** 主執行緒上的同步請求很容易破壞使用者體驗，應該避免；事實上，許多瀏覽器已經完全棄用了主執行緒上的同步 XHR 支援。 {{domxref("Worker")}} 中允許同步請求。 + > [!NOTE] + > 主執行緒上的同步請求很容易破壞使用者體驗，應該避免；事實上，許多瀏覽器已經完全棄用了主執行緒上的同步 XHR 支援。 {{domxref("Worker")}} 中允許同步請求。 - `user` {{optional_inline}} - : 選擇性參數，用於身份驗證的用戶名；預設值為 `null`。 diff --git a/files/zh-tw/web/api/xmlhttprequest/readystate/index.md b/files/zh-tw/web/api/xmlhttprequest/readystate/index.md index dd802a9d402999..f2f810f00b6df3 100644 --- a/files/zh-tw/web/api/xmlhttprequest/readystate/index.md +++ b/files/zh-tw/web/api/xmlhttprequest/readystate/index.md @@ -26,7 +26,8 @@ slug: Web/API/XMLHttpRequest/readyState - DONE - : 請求操作已完成。這意味著資料傳輸可能已成功完成或是已失敗。 -> **備註：** 這些狀態名稱在 Internet Explorer 中略有不同。其中 `UNSENT`, `OPENED`, `HEADERS_RECEIVED`, `LOADING` 和 `DONE` 變成了 `READYSTATE_UNINITIALIZED` (0), `READYSTATE_LOADING` (1), `READYSTATE_LOADED` (2), `READYSTATE_INTERACTIVE` (3) 和`READYSTATE_COMPLETE` (4)。 +> [!NOTE] +> 這些狀態名稱在 Internet Explorer 中略有不同。其中 `UNSENT`, `OPENED`, `HEADERS_RECEIVED`, `LOADING` 和 `DONE` 變成了 `READYSTATE_UNINITIALIZED` (0), `READYSTATE_LOADING` (1), `READYSTATE_LOADED` (2), `READYSTATE_INTERACTIVE` (3) 和`READYSTATE_COMPLETE` (4)。 ## 範例 diff --git a/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md b/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md index 445965395e376f..ea44e0b43f49b3 100644 --- a/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md @@ -17,7 +17,8 @@ l10n: 此外，可以在請求中添加 [`Authorization`](/zh-TW/docs/Web/HTTP/Headers/Authorization) HTTP 標頭，但如果請求被跨域重定向，這個標頭將會被移除。 -> **備註：** 對於你的自訂字段，跨域發送請求時可能會遇到「**not allowed by Access-Control-Allow-Headers in preflight response**」的例外狀況。在這種情況下，你需要在伺服器端的回應標頭中設定 {{HTTPHeader("Access-Control-Allow-Headers")}}。 +> [!NOTE] +> 對於你的自訂字段，跨域發送請求時可能會遇到「**not allowed by Access-Control-Allow-Headers in preflight response**」的例外狀況。在這種情況下，你需要在伺服器端的回應標頭中設定 {{HTTPHeader("Access-Control-Allow-Headers")}}。 ## 語法 diff --git a/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.md b/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.md index e009556ead5496..5be8bb26548264 100644 --- a/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.md +++ b/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.md @@ -9,7 +9,8 @@ slug: Web/API/XMLHttpRequest/withCredentials In addition, this flag is also used to indicate when cookies are to be ignored in the response. The default is `false`. `XMLHttpRequest` from a different domain cannot set cookie values for their own domain unless `withCredentials` is set to `true` before making the request. The third-party cookies obtained by setting `withCredentials` to true will still honor same-origin policy and hence can not be accessed by the requesting script through [document.cookie](/zh-TW/docs/Web/API/Document/cookie) or from response headers. -> **備註：** 永遠不會影響到同源請求。 +> [!NOTE] +> 永遠不會影響到同源請求。 > **備註：** `XMLHttpRequest` responses from a different domain _cannot_ set cookie values for their own domain unless `withCredentials` is set to `true` before making the request, regardless of `Access-Control-` header values. diff --git a/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md index 1c9d563e6dc0c3..771cf959d54f98 100644 --- a/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md +++ b/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md @@ -22,7 +22,8 @@ oReq.send(); 透過 `XMLHttpRequest` 建立的請求，其取得資料的方式可以為非同步（asynchronously）或同步（synchronously）兩種之一。請求的種類是由 {{domxref("XMLHttpRequest.open()")}} 方法的選擇性參數 `async`（第三個參數）決定。若 `async` 參數為 `true` 或是未指定，`XMLHttpRequest` 會被設定為非同步，相反的若為 `false` 則會被設定為同步。這兩種請求類型的細節討論與示範可以在[同步與非同步請求](/docs/DOM/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests)頁面中找到。一般來說，很少會使用到同步請求。 -> **備註：** 自 Gecko 30.0 開始，在主執行緒上的同步請求因其差勁的使用者體驗已被棄用。 +> [!NOTE] +> 自 Gecko 30.0 開始，在主執行緒上的同步請求因其差勁的使用者體驗已被棄用。 ## 處理回應 @@ -39,7 +40,8 @@ oReq.send(); ### 分析及操作含有 HTML 文件的 `responseText` 屬性 -> **備註：** W3C 的[XMLHttpRequest](https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) 規範允許透過 `XMLHttpRequest.responseXML` 屬性（{{Glossary("property/JavaScript", "property")}}）來解析 HTML。相關細節請參考 [HTML in XMLHttpRequest](/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest) 一文。 +> [!NOTE] +> W3C 的[XMLHttpRequest](https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) 規範允許透過 `XMLHttpRequest.responseXML` 屬性（{{Glossary("property/JavaScript", "property")}}）來解析 HTML。相關細節請參考 [HTML in XMLHttpRequest](/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest) 一文。 若透過 `XMLHttpRequest` 來取得一個遠端的 HTML 網頁內容，則 `responseText` 屬性（{{Glossary("property/JavaScript", "property")}}）會是「一串（soup）」包含所有 HTML 標籤的字串。這可能使得在分析和操作上造成困難，以下有三種主要分析此一大串 HTML 字串的方式： @@ -118,7 +120,8 @@ function transferCanceled(evt) { 第 3-6 行加入了事件監聽器來處理使用 `XMLHttpRequest` 執行資料收發過程中的各類事件。 -> **備註：** 必須在呼叫 `open()` 方法開啟請求連線之前就註冊好事件監聽器，否則 `progress` 事件將不會被觸發。 +> [!NOTE] +> 必須在呼叫 `open()` 方法開啟請求連線之前就註冊好事件監聽器，否則 `progress` 事件將不會被觸發。 在這個例子中，指定了 `updateProgress()` 函式作為 `progress` 事件處理器，`progress` 事件處理器會於 `progress` 事件物件的 `total` 及 `loaded` 屬性分別接收到要傳輸的總位元數及已送出的位元數。然而，假如 `lengthComputable` 屬性值為假，則代表要傳輸的總位元數是未知且 `total` 屬性值將會為零。 @@ -137,9 +140,11 @@ oReq.open(); > **備註：** `progress` 事件無法用於 `file:` 通訊協定。 -> **備註：** 自 Gecko 9.0 開始，接收到每一個資料的區塊（chunk）時，`progress` 事件都會被觸發。包括在 `progress` 事件被觸發前，就已經接收到含有最後一個資料區塊的最後一個封包並且關閉連線的狀況下，在載入此封包時仍會自動觸發 `progress` 事件。這代表我們可以僅關注 `progress` 事件即能夠可靠的監視進度。 +> [!NOTE] +> 自 Gecko 9.0 開始，接收到每一個資料的區塊（chunk）時，`progress` 事件都會被觸發。包括在 `progress` 事件被觸發前，就已經接收到含有最後一個資料區塊的最後一個封包並且關閉連線的狀況下，在載入此封包時仍會自動觸發 `progress` 事件。這代表我們可以僅關注 `progress` 事件即能夠可靠的監視進度。 -> **備註：** 在 Gecko 12.0 中，如果 `XMLHttpRequest` 的 `responseType` 屬性為「moz-blob」，那麼 `progress` 事件觸發時的 `XMLHttpRequest.response` 值會是一個目前包含了所接收資料的 {{domxref("Blob")}}。 +> [!NOTE] +> 在 Gecko 12.0 中，如果 `XMLHttpRequest` 的 `responseType` 屬性為「moz-blob」，那麼 `progress` 事件觸發時的 `XMLHttpRequest.response` 值會是一個目前包含了所接收資料的 {{domxref("Blob")}}。 我們也可以透過 `loadend` 事件來偵測到所有之三種下載結束狀況（`abort`、`load` 或 `error`）： @@ -593,11 +598,14 @@ print_r($_FILES); AJAXSubmit(myForm); ``` -> **備註：** 此框架使用了 {{domxref("FileReader")}} API 來發送檔案上傳。這是個較新的 API，且 IE9 或其先前版本並未實作。因為這個理由，AJAX-only 上傳被認為是**一項實驗性技術**。若沒有需要上傳二進位檔案，此框架可於大部分瀏覽器中運作良好。 +> [!NOTE] +> 此框架使用了 {{domxref("FileReader")}} API 來發送檔案上傳。這是個較新的 API，且 IE9 或其先前版本並未實作。因為這個理由，AJAX-only 上傳被認為是**一項實驗性技術**。若沒有需要上傳二進位檔案，此框架可於大部分瀏覽器中運作良好。 -> **備註：** 傳送二進位檔案的最佳方式是藉由 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 結合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法來送出，如果可以也能搭配 `FileReader` API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法先進行讀取。但因為這段程式指令碼（script）的目的是要處理[可字串化的](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)原始資料，所以使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法結合 `FileReader` API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。就其本身來看，以上的指令碼只有在處理小型檔案時才有意義。假如不打算上傳二進位內容，請考慮使用 `FormData` API。 +> [!NOTE] +> 傳送二進位檔案的最佳方式是藉由 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 結合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法來送出，如果可以也能搭配 `FileReader` API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法先進行讀取。但因為這段程式指令碼（script）的目的是要處理[可字串化的](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)原始資料，所以使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法結合 `FileReader` API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。就其本身來看，以上的指令碼只有在處理小型檔案時才有意義。假如不打算上傳二進位內容，請考慮使用 `FormData` API。 -> **備註：** 非標準的 `sendAsBinary` 方法在 Gecko 31 已被認為是棄用的（deprecated），並且即將被移除。而標準的 `send(Blob data)` 方法可以作為替代。 +> [!NOTE] +> 非標準的 `sendAsBinary` 方法在 Gecko 31 已被認為是棄用的（deprecated），並且即將被移除。而標準的 `send(Blob data)` 方法可以作為替代。 ### 使用 FormData 物件 @@ -769,7 +777,8 @@ AJAXSubmit(myForm); ``` -> **備註：** 如同之前所說，**{{domxref("FormData")}} 物件是不能被[字串化](/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)的物件**。若想要字串化一個被提交的資料，請使用[先前的*純* AJAX 範例](#小型原生框架)。還要注意的是，雖然在這個例子中有一些 `file` {{ HTMLElement("input") }} 欄位，**當你透過 `FormData` API 來提交表單便也不需要使用 {{domxref("FileReader")}} API**：檔案會自動地載入並上傳。 +> [!NOTE] +> 如同之前所說，**{{domxref("FormData")}} 物件是不能被[字串化](/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)的物件**。若想要字串化一個被提交的資料，請使用[先前的*純* AJAX 範例](#小型原生框架)。還要注意的是，雖然在這個例子中有一些 `file` {{ HTMLElement("input") }} 欄位，**當你透過 `FormData` API 來提交表單便也不需要使用 {{domxref("FileReader")}} API**：檔案會自動地載入並上傳。 ## 取得最後修改日期 diff --git a/files/zh-tw/web/css/@font-face/index.md b/files/zh-tw/web/css/@font-face/index.md index b1a97cfd006594..ea6619d1b4eb2a 100644 --- a/files/zh-tw/web/css/@font-face/index.md +++ b/files/zh-tw/web/css/@font-face/index.md @@ -88,7 +88,8 @@ You can specify a font on the user's local computer by name using the `local()` - In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless [HTTP access controls](/zh-TW/docs/HTTP_access_control) are used to relax this restriction. - > **備註：** Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered. + > [!NOTE] + > Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered. - When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading. As each web font finishes downloading, Gecko updates the text that uses that font. This allows the user to read the text on the page more quickly. diff --git a/files/zh-tw/web/css/@namespace/index.md b/files/zh-tw/web/css/@namespace/index.md index 3fbb4ddc74d46d..568f0e5ab19581 100644 --- a/files/zh-tw/web/css/@namespace/index.md +++ b/files/zh-tw/web/css/@namespace/index.md @@ -30,7 +30,8 @@ slug: Web/CSS/@namespace 在 [HTML5](/zh-TW/docs/Glossary/HTML5)，已知的[外部元素](https://html.spec.whatwg.org/#foreign-elements)會自動為其分配命名空間。舉例來說，即使沒有設置 `xmlns` 屬性，所有的 HTML 元素都會自動視為 XHTML 命名空間（`http://www.w3.org/1999/xhtml`）；[\](/zh-TW/docs/Web/SVG/Element/svg) 和 [\](/zh-TW/docs/Web/MathML/Element/math) 則會自動分配屬於他們的命名空間（`http://www.w3.org/2000/svg` 和 `http://www.w3.org/1998/Math/MathML`）。 -> **備註：** 在 XML，屬性若沒有前綴（例如 `xlink:href`），該屬性就不會繼承元素的命名空間（亦即 `link`的命名空間可能是 `http://www.w3.org/1999/xhtml` 而不是 `http://www.w3.org/2000/svg`）。因此，CSS 的「默認的命名空間」並不適用於屬性 +> [!NOTE] +> 在 XML，屬性若沒有前綴（例如 `xlink:href`），該屬性就不會繼承元素的命名空間（亦即 `link`的命名空間可能是 `http://www.w3.org/1999/xhtml` 而不是 `http://www.w3.org/2000/svg`）。因此，CSS 的「默認的命名空間」並不適用於屬性 ## 形式語法 diff --git a/files/zh-tw/web/css/_colon_first-of-type/index.md b/files/zh-tw/web/css/_colon_first-of-type/index.md index 7db945a2c9bd89..bed3a580b63a40 100644 --- a/files/zh-tw/web/css/_colon_first-of-type/index.md +++ b/files/zh-tw/web/css/_colon_first-of-type/index.md @@ -14,7 +14,8 @@ p:first-of-type { } ``` -> **備註：** 在初始定義中，被選取的節點必須擁有父節點。從選取器層級 4（Selectors Level 4）開始已經不再有這個限制了。 +> [!NOTE] +> 在初始定義中，被選取的節點必須擁有父節點。從選取器層級 4（Selectors Level 4）開始已經不再有這個限制了。 ## 語法 diff --git a/files/zh-tw/web/css/_colon_lang/index.md b/files/zh-tw/web/css/_colon_lang/index.md index 99230ecbdda3b7..b9e7e64ffa9c59 100644 --- a/files/zh-tw/web/css/_colon_lang/index.md +++ b/files/zh-tw/web/css/_colon_lang/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/:lang **`:lang()`** 是一種 [CSS](/zh-TW/docs/Web/CSS) [偽類（pseudo-class）](/zh-TW/docs/Web/CSS/Pseudo-classes)。它會根據括號中指定的語系，來選擇使用的元素。 -> **備註：** 在 HTML 中，語言是通過 [`lang`](/zh-TW/docs/Web/HTML/Global_attributes#lang) 屬性和 {{HTMLElement("meta")}} 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。 +> [!NOTE] +> 在 HTML 中，語言是通過 [`lang`](/zh-TW/docs/Web/HTML/Global_attributes#lang) 屬性和 {{HTMLElement("meta")}} 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。 ## 語法 diff --git a/files/zh-tw/web/css/_colon_target/index.md b/files/zh-tw/web/css/_colon_target/index.md index 23ae443ce1e58e..fb625c86a0741a 100644 --- a/files/zh-tw/web/css/_colon_target/index.md +++ b/files/zh-tw/web/css/_colon_target/index.md @@ -11,7 +11,8 @@ URIs with fragment identifiers link to a certain element within the document, kn `http://example.com/folder/document.html#section2` The _anchor_ can be any element with an`id`attribute, e.g. `

` in our example. The _target element_ `h1` can be represented by the `:target` pseudo-class. -> **備註：** The`id`attribute was new in HTML 4 (December 1997). In old-style HTML `` is a target element. The`:target`pseudo-class applies to those targets as well. +> [!NOTE] +> The`id`attribute was new in HTML 4 (December 1997). In old-style HTML `` is a target element. The`:target`pseudo-class applies to those targets as well. ## 範例 diff --git a/files/zh-tw/web/css/_doublecolon_first-letter/index.md b/files/zh-tw/web/css/_doublecolon_first-letter/index.md index 3858380272ba31..61912e3dbd8ac9 100644 --- a/files/zh-tw/web/css/_doublecolon_first-letter/index.md +++ b/files/zh-tw/web/css/_doublecolon_first-letter/index.md @@ -29,7 +29,8 @@ Only a small subset of all CSS properties can be used inside a declaration block As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof. -> **備註：** In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.If legacy browsers must be supported, `:first-letter` is the only viable choice; if not, `::first-letter` is preferred. +> [!NOTE] +> In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.If legacy browsers must be supported, `:first-letter` is the only viable choice; if not, `::first-letter` is preferred. ## Example diff --git a/files/zh-tw/web/css/animation-fill-mode/index.md b/files/zh-tw/web/css/animation-fill-mode/index.md index 90d77a4b3a81fe..774c975d10ecce 100644 --- a/files/zh-tw/web/css/animation-fill-mode/index.md +++ b/files/zh-tw/web/css/animation-fill-mode/index.md @@ -63,7 +63,8 @@ animation-fill-mode: both, forwards, none; 与上面两个值的差别是，如果元素使用 **`forwards`**、**`backwards`** 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。 -> **備註：** 当你在一个 `animation-*` 属性上指定多个逗号分隔的值时，它们将被分配给 `"animationname"` 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见[设置多个动画属性值](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。 +> [!NOTE] +> 当你在一个 `animation-*` 属性上指定多个逗号分隔的值时，它们将被分配给 `"animationname"` 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见[设置多个动画属性值](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。 ## Example diff --git a/files/zh-tw/web/css/border-image/index.md b/files/zh-tw/web/css/border-image/index.md index a56b5026ccb127..869cae9003a366 100644 --- a/files/zh-tw/web/css/border-image/index.md +++ b/files/zh-tw/web/css/border-image/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/border-image CSS 屬性 `border-image` 可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多，它可以省最多九個元素。 -> **警告：** 官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 `border-width` 參數，它覆蓋既有 `border-width` 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。 +> [!WARNING] +> 官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 `border-width` 參數，它覆蓋既有 `border-width` 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。 瀏覽器會顯示 `border-image` 指定的圖片而不是 {{ cssxref("border-style") }} 給的邊框樣式，但是若它的取值是 `none` 或是因某些理由無法顯示該圖片，瀏覽器就會顯示邊框樣式。`border-image` 會畫一個額外的背景圖片在原來 {{ cssxref("background-image") }} 指定的背景圖片之上。 diff --git a/files/zh-tw/web/css/clip/index.md b/files/zh-tw/web/css/clip/index.md index 63b660b87aa8cc..07dc95f4eacd25 100644 --- a/files/zh-tw/web/css/clip/index.md +++ b/files/zh-tw/web/css/clip/index.md @@ -9,7 +9,8 @@ slug: Web/CSS/clip **`這個 clip`** [CSS](/zh-TW/docs/Web/CSS) 屬性用來定義元素的哪一個部分是可見的. `clip` 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的 CSS 屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}. -> **警告：** 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} . +> [!WARNING] +> 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} . {{cssinfo}} diff --git a/files/zh-tw/web/css/css_animations/using_css_animations/index.md b/files/zh-tw/web/css/css_animations/using_css_animations/index.md index d641e920e8b4c4..eb804b661a6c23 100644 --- a/files/zh-tw/web/css/css_animations/using_css_animations/index.md +++ b/files/zh-tw/web/css/css_animations/using_css_animations/index.md @@ -46,7 +46,8 @@ CSS animations 使 CSS style configuration 的轉變變得可行。在這種動 ## 範例 -> **備註：** 為了簡潔起見，以下的範例中我們只列出前綴為 `-moz-` 的部份。當你查看 Live Sample 的原始碼時，可以看到前綴為 `-webkit-` 的部份。 +> [!NOTE] +> 為了簡潔起見，以下的範例中我們只列出前綴為 `-moz-` 的部份。當你查看 Live Sample 的原始碼時，可以看到前綴為 `-webkit-` 的部份。 ### 使文字滑過畫面 diff --git a/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index e449d36556e4ca..18cca55d3feaab 100644 --- a/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -11,7 +11,8 @@ CSS3 **彈性盒子**，又稱**flexbox**，是為了適應不同螢幕尺寸和 一些時髦的佈局，也能因而透過更簡潔的程式碼完成。這種有意的獨立性只影響視覺渲染，基於 HTML 原始碼的語意順序及瀏覽不會受到影響。 -> **備註：** 儘管 [CSS 彈性盒子佈局規範](http://www.w3.org/TR/css3-flexbox/)還處於最終徵求意見稿（Last Call Working Draft）階段（參見[最新編輯草案](http://dev.w3.org/csswg/css-flexbox/)）、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了，現在主流的瀏覽器，都對 flexbox 有著良好的支持。請參見[相容性表格](/zh-TW/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility)的具體屬性，以獲取最新的相容狀態。 +> [!NOTE] +> 儘管 [CSS 彈性盒子佈局規範](http://www.w3.org/TR/css3-flexbox/)還處於最終徵求意見稿（Last Call Working Draft）階段（參見[最新編輯草案](http://dev.w3.org/csswg/css-flexbox/)）、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了，現在主流的瀏覽器，都對 flexbox 有著良好的支持。請參見[相容性表格](/zh-TW/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility)的具體屬性，以獲取最新的相容狀態。 ## 彈性盒子的概念 @@ -59,7 +60,8 @@ display: inline-flex; 這樣一來，元素就會變成彈性容器，而它的子元素們就會變成彈性項目。`flex` 值會讓彈性容器變成塊級元素（block-level element）、`inline-flex` 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。 -> **備註：** 如果需要支援較舊的瀏覽器，請把廠商前輟標記（vendor prefix tag）寫在 `display` 屬性（property），而不是屬性值（attribute）。例如：`display: -webkit-flex`。 +> [!NOTE] +> 如果需要支援較舊的瀏覽器，請把廠商前輟標記（vendor prefix tag）寫在 `display` 屬性（property），而不是屬性值（attribute）。例如：`display: -webkit-flex`。 ## 彈性項目需要留心 diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 923e5d7815f825..2ebec45d006274 100644 --- a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -544,7 +544,8 @@ In this case the nested grid has no relationship to the parent. As you can see i In the level 1 grid specification there is a feature called _subgrid_ which would let us create nested grids that use the track definition of the parent grid. -> **備註：** Subgrids are not yet implemented in any browsers, and the specification is subject to change. +> [!NOTE] +> Subgrids are not yet implemented in any browsers, and the specification is subject to change. In the current specification, we would edit the above nested grid example to use `display: subgrid` rather than `display: grid`, then remove the track definition. The nested grid will use the parent grid tracks to lay out items. diff --git a/files/zh-tw/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/zh-tw/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md index ebd761b000425e..07eef5a8c799ee 100644 --- a/files/zh-tw/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md +++ b/files/zh-tw/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md @@ -32,7 +32,8 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp - DIV＃2（Z-指數 1） - DIV＃4（Z-指數 2） -> **備註：** DIV＃1 和＃DIV 3 不適透亮。重要的是要記住，分配的不透明度小於 1 到定位的元素隱式創建一個疊加的背景下，就像一個加入的 z-index 值是非常重要的。這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。 +> [!NOTE] +> DIV＃1 和＃DIV 3 不適透亮。重要的是要記住，分配的不透明度小於 1 到定位的元素隱式創建一個疊加的背景下，就像一個加入的 z-index 值是非常重要的。這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。 ## 範例 diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md index ef0eedffcdf4eb..1ac9df5566c336 100644 --- a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md +++ b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md @@ -11,13 +11,15 @@ slug: Web/CSS/CSS_transitions/Using_CSS_transitions CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。 -> **備註：** CSS transitions specification 目前仍舊以草案形式存在，所以當你要在 Gecko 的系統中使用時，記得加上 "-moz-" 的前綴。此外，為了更好的相容，你還得加上 "-webkit-" 前綴 (給基於 Webkit 技術的瀏覽器)以及 "-o-" (Opera 使用)。舉例來說，你可能會寫出包含有 `-moz-transition`, `-webkit-transition 及` `-o-transition 的程式。` +> [!NOTE] +> CSS transitions specification 目前仍舊以草案形式存在，所以當你要在 Gecko 的系統中使用時，記得加上 "-moz-" 的前綴。此外，為了更好的相容，你還得加上 "-webkit-" 前綴 (給基於 Webkit 技術的瀏覽器)以及 "-o-" (Opera 使用)。舉例來說，你可能會寫出包含有 `-moz-transition`, `-webkit-transition 及` `-o-transition 的程式。` ## 可供調整的 CSS property 清單 CSS transitions 和 CSS animations 中可以用來修改的屬性在 [CSS animatable properties](http://oli.jp/2010/css-animatable-properties/) 可以看到。這裡頭同時包含了 SVG properties。 -> **備註：** 這些列出 properties 可能都還會改變，所以請使用已經被支援的那些，以免造成無法預期的結果。 +> [!NOTE] +> 這些列出 properties 可能都還會改變，所以請使用已經被支援的那些，以免造成無法預期的結果。 ## CSS transition properties @@ -127,7 +129,8 @@ transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8); el.addEventListener("transitionend", updateTransition, true); ``` -> **備註：** "transitionend" event 若 transition 在執行中被中斷(意指 transition 沒有真正完成)則不會觸發。 +> [!NOTE] +> "transitionend" event 若 transition 在執行中被中斷(意指 transition 沒有真正完成)則不會觸發。 ## 當 property value list 之間並不等長時 ... ? @@ -352,7 +355,8 @@ p { 在定義了左右兩端點的狀態後，現在我們可以準備來描述 animation 了。這可以簡單的透過 JavaScript 達成。 -> **備註：** 在這裡，倘若 [CSS animations](/zh_tw/CSS_動畫) 被使用者的瀏覽器支援，那就未必要使用 JavaScript 了。 +> [!NOTE] +> 在這裡，倘若 [CSS animations](/zh_tw/CSS_動畫) 被使用者的瀏覽器支援，那就未必要使用 JavaScript 了。 首先定義 `runDemo()` function，他將在文件被讀取後立刻執行： diff --git a/files/zh-tw/web/css/syntax/index.md b/files/zh-tw/web/css/syntax/index.md index edbd02962909cd..5ff7d37cc080be 100644 --- a/files/zh-tw/web/css/syntax/index.md +++ b/files/zh-tw/web/css/syntax/index.md @@ -30,7 +30,8 @@ Such blocks are naturally called **declaration blocks** and declarations inside ![css syntax - declarations block.png](declaration-block.png) -> **備註：** The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML [`style`](/zh-TW/docs/Web/HTML/Global_attributes#style) attribute. +> [!NOTE] +> The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML [`style`](/zh-TW/docs/Web/HTML/Global_attributes#style) attribute. ## CSS rulesets @@ -42,7 +43,8 @@ CSS allows this by associating conditions with declarations blocks. Each (valid) As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the [cascade](/zh-TW/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) algorithm. -> **備註：** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself. +> [!NOTE] +> It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself. > > This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole _selector_ is invalid and therefore the entire rule is ignored (as invalid too). diff --git a/files/zh-tw/web/css/transform/index.md b/files/zh-tw/web/css/transform/index.md index 27d92a0e47d551..b1804d9ac65d46 100644 --- a/files/zh-tw/web/css/transform/index.md +++ b/files/zh-tw/web/css/transform/index.md @@ -11,7 +11,8 @@ slug: Web/CSS/transform 如果這個屬性的值不是 `none`，將會建立一個 [stacking context](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。在這個情況下，此元素將被其所包含的 `position: fixed` 元素當成一個 containing block。 -> **警告：** 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了[視覺格式化模型](/zh-TW/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [table-column box](/zh-TW/docs/Web/HTML/Element/col) 和 [table-colunm-group box](/zh-TW/docs/Web/HTML/Element/colgroup)。 +> [!WARNING] +> 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了[視覺格式化模型](/zh-TW/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [table-column box](/zh-TW/docs/Web/HTML/Element/col) 和 [table-colunm-group box](/zh-TW/docs/Web/HTML/Element/colgroup)。 ## 語法 diff --git a/files/zh-tw/web/css/white-space/index.md b/files/zh-tw/web/css/white-space/index.md index e3148adc70f501..3faddb83010c86 100644 --- a/files/zh-tw/web/css/white-space/index.md +++ b/files/zh-tw/web/css/white-space/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/white-space 此 CSS **`white-space`** 屬性決定如何處理元素內的空白字元。 -> **備註：** 如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。 +> [!NOTE] +> 如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。 ```css /* Keyword values */ diff --git a/files/zh-tw/web/guide/index.md b/files/zh-tw/web/guide/index.md index 6f3bd215d2c264..f847170df84641 100644 --- a/files/zh-tw/web/guide/index.md +++ b/files/zh-tw/web/guide/index.md @@ -5,7 +5,8 @@ slug: Web/Guide 這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。 -> **備註：** 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。 +> [!NOTE] +> 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。 {{LandingPageListSubpages}} diff --git a/files/zh-tw/web/html/content_categories/index.md b/files/zh-tw/web/html/content_categories/index.md index e6d4bcd69ddb36..2d03636f35c845 100644 --- a/files/zh-tw/web/html/content_categories/index.md +++ b/files/zh-tw/web/html/content_categories/index.md @@ -127,7 +127,8 @@ slug: Web/HTML/Content_categories 屬於這個類型的元素有 {{HTMLElement("Heading_Elements", "<h1>-<h6>")}} 和 {{HTMLElement("hgroup")}}。 -> **備註：** 儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。 +> [!NOTE] +> 儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。 ### 段落型內容 diff --git a/files/zh-tw/web/html/element/a/index.md b/files/zh-tw/web/html/element/a/index.md index 74003b2f9d7327..8ca4fee2ab5aca 100644 --- a/files/zh-tw/web/html/element/a/index.md +++ b/files/zh-tw/web/html/element/a/index.md @@ -77,7 +77,8 @@ slug: Web/HTML/Element/a - `_top`：最上層的瀏覽上下文。具體來說，這意味著當前上下文的祖先中的「最高」上下文。如果沒有祖先，則與 `_self` 行為相同。 - `_unfencedTop`：允許嵌入的[有圍欄框架](/zh-TW/docs/Web/API/Fenced_frame_API)導航到最頂層框架（即超出有圍欄框架根的遍歷，與其他保留目標不同）。請注意，如果在有圍欄框架上下文之外使用此選項，則導航仍將成功，但它不會像保留關鍵字那樣運作。 - > **備註：** 將 `target="_blank"` 設置在 `` 元素上，隱含提供了與設置 [`rel="noopener"`](/zh-TW/docs/Web/HTML/Attributes/rel/noopener) 相同的 `rel` 行為，它不設置 `window.opener`。 + > [!NOTE] + > 將 `target="_blank"` 設置在 `` 元素上，隱含提供了與設置 [`rel="noopener"`](/zh-TW/docs/Web/HTML/Attributes/rel/noopener) 相同的 `rel` 行為，它不設置 `window.opener`。 - `type` - : 提示連結 URL 的格式，使用 {{Glossary("MIME type", "MIME 類型")}}。沒有內建功能。 @@ -88,7 +89,8 @@ slug: Web/HTML/Element/a - : 指示連結 URL 的 {{Glossary("character encoding")}}。 - > **備註：** 這個屬性已棄用，**不應該被作者使用**。請在連結的 URL 上使用 HTTP {{HTTPHeader("Content-Type")}} 標頭。 + > [!NOTE] + > 這個屬性已棄用，**不應該被作者使用**。請在連結的 URL 上使用 HTTP {{HTTPHeader("Content-Type")}} 標頭。 - `coords` {{Deprecated_Inline}} - : 與 [`shape` 屬性](#shape)一起使用。逗號分隔的座標列表。 @@ -96,7 +98,8 @@ slug: Web/HTML/Element/a - : 用於在頁面中定義可能的目標位置。在 HTML 4.01 中，`id` 和 `name` 都可以在 `` 上使用，只要它們具有相同的值。 - > **備註：** 請改用全域屬性 [`id`](/zh-TW/docs/Web/HTML/Global_attributes#id)。 + > [!NOTE] + > 請改用全域屬性 [`id`](/zh-TW/docs/Web/HTML/Global_attributes#id)。 - `rev` {{Deprecated_Inline}} - : 指定反向連結；與[形狀屬性](#rel)相反。由於非常混亂而被棄用。 @@ -104,7 +107,8 @@ slug: Web/HTML/Element/a - : 圖像地圖中超連結區域的形狀。 - > **備註：** 請改用 {{HTMLElement("area")}} 元素代替圖像地圖。 + > [!NOTE] + > 請改用 {{HTMLElement("area")}} 元素代替圖像地圖。 ## 範例 @@ -155,7 +159,8 @@ a { {{EmbedLiveSample('鏈接到同一頁面上的元素')}} -> **備註：** 你可以使用 `href="#top"` 或空片段（`href="#"`）來鏈接到當前頁面的頂部，[如 HTML 規範中所定義](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier)。 +> [!NOTE] +> 你可以使用 `href="#top"` 或空片段（`href="#"`）來鏈接到當前頁面的頂部，[如 HTML 規範中所定義](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier)。 ### 鏈接到電子郵件地址 diff --git a/files/zh-tw/web/html/element/acronym/index.md b/files/zh-tw/web/html/element/acronym/index.md index 2410ce987bffea..370a495f1e40c9 100644 --- a/files/zh-tw/web/html/element/acronym/index.md +++ b/files/zh-tw/web/html/element/acronym/index.md @@ -7,7 +7,8 @@ slug: Web/HTML/Element/acronym **``** [HTML](/zh-TW/docs/Web/HTML) 元素允許作者清楚地指示一系列字元，這些字元構成一個詞的縮寫或簡稱。 -> **警告：** 請勿使用此元素。請改用 {{HTMLElement("abbr")}} 元素。 +> [!WARNING] +> 請勿使用此元素。請改用 {{HTMLElement("abbr")}} 元素。 ## 屬性 diff --git a/files/zh-tw/web/html/element/area/index.md b/files/zh-tw/web/html/element/area/index.md index 283fc94efdc692..f2d8cd14c74e1f 100644 --- a/files/zh-tw/web/html/element/area/index.md +++ b/files/zh-tw/web/html/element/area/index.md @@ -61,7 +61,8 @@ slug: Web/HTML/Element/area 只有在 [`href`](#href) 屬性存在時才使用此屬性。 - > **備註：** 在 `` 元素上設置 `target="_blank"` 將隱式提供與設置 [`rel="noopener"`](/zh-TW/docs/Web/HTML/Attributes/rel/noopener) 相同的 `rel` 行為，該行為不設置 `window.opener`。有關支援狀態，請參見[瀏覽器相容性](#瀏覽器相容性)。 + > [!NOTE] + > 在 `` 元素上設置 `target="_blank"` 將隱式提供與設置 [`rel="noopener"`](/zh-TW/docs/Web/HTML/Attributes/rel/noopener) 相同的 `rel` 行為，該行為不設置 `window.opener`。有關支援狀態，請參見[瀏覽器相容性](#瀏覽器相容性)。 ## 範例 diff --git a/files/zh-tw/web/html/element/audio/index.md b/files/zh-tw/web/html/element/audio/index.md index 7808c487a237bf..0dd91d04a436d1 100644 --- a/files/zh-tw/web/html/element/audio/index.md +++ b/files/zh-tw/web/html/element/audio/index.md @@ -21,7 +21,8 @@ slug: Web/HTML/Element/audio - : 一個布林屬性：如果指定，音訊將會在能夠開始播放時自動開始播放，而不需要等待整個音訊文件下載完成。 - > **備註：** 自動播放音訊（或帶有音訊軌道的影片）的網站對用戶來說可能是一種不愉快的體驗，因此應盡可能避免。如果必須提供自動播放功能，你應該使其成為選擇加入的（需要用戶明確啟用）。然而，在創建源將在稍後由用戶控制的媒體元素時，這可能很有用。有關如何正確使用自動播放的其他信息，請參見我們的[自動播放指南](/zh-TW/docs/Web/Media/Autoplay_guide)。 + > [!NOTE] + > 自動播放音訊（或帶有音訊軌道的影片）的網站對用戶來說可能是一種不愉快的體驗，因此應盡可能避免。如果必須提供自動播放功能，你應該使其成為選擇加入的（需要用戶明確啟用）。然而，在創建源將在稍後由用戶控制的媒體元素時，這可能很有用。有關如何正確使用自動播放的其他信息，請參見我們的[自動播放指南](/zh-TW/docs/Web/Media/Autoplay_guide)。 - `controls` @@ -271,7 +272,8 @@ slug: Web/HTML/Element/audio - {{domxref("HTMLMediaElement.textTracks")}} - : 對此 {{domxref("TextTrackList")}} 添加 `addtrack` 事件監聽器，以在向元素添加新文本軌時收到通知。 -> **備註：** 即使它是一個 `