diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
| commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
| tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/zh-cn | |
| parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
| parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
| download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip | |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/zh-cn')
111 files changed, 2739 insertions, 1441 deletions
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 83915af3b0..ff820f35f0 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -412,7 +412,7 @@ /zh-CN/docs/DOM/event.defaultPrevented /zh-CN/docs/Web/API/Event/defaultPrevented /zh-CN/docs/DOM/event.isChar /zh-CN/docs/Web/API/UIEvent/isChar /zh-CN/docs/DOM/event.isTrusted /zh-CN/docs/Web/API/Event/isTrusted -/zh-CN/docs/DOM/event.pageY /zh-CN/docs/Web/API/UIEvent/pageY +/zh-CN/docs/DOM/event.pageY /zh-CN/docs/conflicting/Web/API/MouseEvent/pageY /zh-CN/docs/DOM/event.preventDefault /zh-CN/docs/Web/API/Event/preventDefault /zh-CN/docs/DOM/event.stopImmediatePropagation /zh-CN/docs/Web/API/Event/stopImmediatePropagation /zh-CN/docs/DOM/event.stopPropagation /zh-CN/docs/Web/API/Event/stopPropagation @@ -432,11 +432,11 @@ /zh-CN/docs/DOM/window.URL.revokeObjectURL /zh-CN/docs/Web/API/URL/revokeObjectURL /zh-CN/docs/DOM/window.alert /zh-CN/docs/Web/API/Window/alert /zh-CN/docs/DOM/window.applicationCache /zh-CN/docs/Web/API/Window/applicationCache -/zh-CN/docs/DOM/window.atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob -/zh-CN/docs/DOM/window.btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa +/zh-CN/docs/DOM/window.atob /zh-CN/docs/Web/API/atob +/zh-CN/docs/DOM/window.btoa /zh-CN/docs/Web/API/btoa /zh-CN/docs/DOM/window.cancelAnimationFrame /zh-CN/docs/Web/API/Window/cancelAnimationFrame /zh-CN/docs/DOM/window.clearImmediate /zh-CN/docs/Web/API/Window/clearImmediate -/zh-CN/docs/DOM/window.clearInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval +/zh-CN/docs/DOM/window.clearInterval /zh-CN/docs/Web/API/clearInterval /zh-CN/docs/DOM/window.close /zh-CN/docs/Web/API/Window/close /zh-CN/docs/DOM/window.content /zh-CN/docs/Web/API/Window/content /zh-CN/docs/DOM/window.document /zh-CN/docs/Web/API/Window/document @@ -475,9 +475,9 @@ /zh-CN/docs/DOM/window.requestAnimationFrame /zh-CN/docs/Web/API/Window/requestAnimationFrame /zh-CN/docs/DOM/window.scrollByPages /zh-CN/docs/Web/API/Window/scrollByPages /zh-CN/docs/DOM/window.setImmediate /zh-CN/docs/Web/API/Window/setImmediate -/zh-CN/docs/DOM/window.setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval -/zh-CN/docs/DOM/window.setTimeout /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout -/zh-CN/docs/DOM/window.setTimeout12 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/zh-CN/docs/DOM/window.setInterval /zh-CN/docs/Web/API/setInterval +/zh-CN/docs/DOM/window.setTimeout /zh-CN/docs/Web/API/setTimeout +/zh-CN/docs/DOM/window.setTimeout12 /zh-CN/docs/Web/API/setTimeout /zh-CN/docs/DOM/文件系统API的基本概念 /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction /zh-CN/docs/DOM:HTMLDocument /zh-CN/docs/Web/API/HTMLDocument /zh-CN/docs/DOM:XMLDocument /zh-CN/docs/Web/API/XMLDocument @@ -1309,7 +1309,7 @@ /zh-CN/docs/Web/API/Element/removeAttributre /zh-CN/docs/Web/API/Element/removeAttribute /zh-CN/docs/Web/API/Event/CustomEvent /zh-CN/docs/Web/API/CustomEvent /zh-CN/docs/Web/API/Event/isChar /zh-CN/docs/Web/API/UIEvent/isChar -/zh-CN/docs/Web/API/Event/pageY /zh-CN/docs/Web/API/UIEvent/pageY +/zh-CN/docs/Web/API/Event/pageY /zh-CN/docs/conflicting/Web/API/MouseEvent/pageY /zh-CN/docs/Web/API/Event/禁用时间冒泡 /zh-CN/docs/Web/API/Event/cancelBubble /zh-CN/docs/Web/API/EventTarget.dispatchEvent /zh-CN/docs/Web/API/EventTarget/dispatchEvent /zh-CN/docs/Web/API/EventTarget.removeEventListener /zh-CN/docs/Web/API/EventTarget/removeEventListener @@ -1349,7 +1349,7 @@ /zh-CN/docs/Web/API/GlobalEventHandlers/动画效果 /zh-CN/docs/Web/API/GlobalEventHandlers/onanimationend /zh-CN/docs/Web/API/GlobalEventHandlers/时长改变 /zh-CN/docs/Web/API/GlobalEventHandlers/ondurationchange /zh-CN/docs/Web/API/GlobalFetch /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope -/zh-CN/docs/Web/API/GlobalFetch/fetch /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch +/zh-CN/docs/Web/API/GlobalFetch/fetch /zh-CN/docs/Web/API/fetch /zh-CN/docs/Web/API/HTMLAnchorElement/referrer /zh-CN/docs/Web/API/HTMLAnchorElement/referrerPolicy /zh-CN/docs/Web/API/HTMLCanvasElement/捕获流 /zh-CN/docs/Web/API/HTMLCanvasElement/captureStream /zh-CN/docs/Web/API/HTMLElement.click /zh-CN/docs/Web/API/HTMLElement/click @@ -1374,9 +1374,11 @@ /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/toString /zh-CN/docs/Web/API/HTMLAnchorElement/toString /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/username /zh-CN/docs/Web/API/HTMLAnchorElement/username /zh-CN/docs/Web/API/HTMLTableElement.deleteTHead /zh-CN/docs/Web/API/HTMLTableElement/deleteTHead +/zh-CN/docs/Web/API/Headers/getAll /zh-CN/docs/conflicting/Web/API/Headers/get /zh-CN/docs/Web/API/IDBCursor.direction /zh-CN/docs/Web/API/IDBCursor/direction /zh-CN/docs/Web/API/IDBFactory.open /zh-CN/docs/Web/API/IDBFactory/open /zh-CN/docs/Web/API/IDBObjectStore.openCursor /zh-CN/docs/Web/API/IDBObjectStore/openCursor +/zh-CN/docs/Web/API/Index /zh-CN/docs/conflicting/Web/API /zh-CN/docs/Web/API/IndexedDB_API/IDBObjectStore /zh-CN/docs/Web/API/IDBObjectStore /zh-CN/docs/Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 /zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility /zh-CN/docs/Web/API/Location.replace /zh-CN/docs/Web/API/Location/replace @@ -1474,6 +1476,8 @@ /zh-CN/docs/Web/API/Touch.screenX /zh-CN/docs/Web/API/Touch/screenX /zh-CN/docs/Web/API/Touch.screenY /zh-CN/docs/Web/API/Touch/screenY /zh-CN/docs/Web/API/TouchEvent.changedTouches /zh-CN/docs/Web/API/TouchEvent/changedTouches +/zh-CN/docs/Web/API/UIEvent/pageX /zh-CN/docs/conflicting/Web/API/MouseEvent/pageX +/zh-CN/docs/Web/API/UIEvent/pageY /zh-CN/docs/conflicting/Web/API/MouseEvent/pageY /zh-CN/docs/Web/API/UIEvent/视图 /zh-CN/docs/Web/API/UIEvent/view /zh-CN/docs/Web/API/URL.URL /zh-CN/docs/Web/API/URL/URL /zh-CN/docs/Web/API/URL.createObjectURL /zh-CN/docs/Web/API/URL/createObjectURL @@ -1496,11 +1500,11 @@ /zh-CN/docs/Web/API/Web_Audio_API/最佳实践 /zh-CN/docs/Web/API/Web_Audio_API/Best_practices /zh-CN/docs/Web/API/Window.alert /zh-CN/docs/Web/API/Window/alert /zh-CN/docs/Web/API/Window.applicationCache /zh-CN/docs/Web/API/Window/applicationCache -/zh-CN/docs/Web/API/Window.atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob -/zh-CN/docs/Web/API/Window.btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa +/zh-CN/docs/Web/API/Window.atob /zh-CN/docs/Web/API/atob +/zh-CN/docs/Web/API/Window.btoa /zh-CN/docs/Web/API/btoa /zh-CN/docs/Web/API/Window.cancelAnimationFrame /zh-CN/docs/Web/API/Window/cancelAnimationFrame /zh-CN/docs/Web/API/Window.clearImmediate /zh-CN/docs/Web/API/Window/clearImmediate -/zh-CN/docs/Web/API/Window.clearInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval +/zh-CN/docs/Web/API/Window.clearInterval /zh-CN/docs/Web/API/clearInterval /zh-CN/docs/Web/API/Window.close /zh-CN/docs/Web/API/Window/close /zh-CN/docs/Web/API/Window.document /zh-CN/docs/Web/API/Window/document /zh-CN/docs/Web/API/Window.find /zh-CN/docs/Web/API/Window/find @@ -1541,27 +1545,41 @@ /zh-CN/docs/Web/API/Window.scrollY /zh-CN/docs/Web/API/Window/scrollY /zh-CN/docs/Web/API/Window.self /zh-CN/docs/Web/API/Window/self /zh-CN/docs/Web/API/Window.setImmediate /zh-CN/docs/Web/API/Window/setImmediate -/zh-CN/docs/Web/API/Window.setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval +/zh-CN/docs/Web/API/Window.setInterval /zh-CN/docs/Web/API/setInterval /zh-CN/docs/Web/API/Window.showModalDialog /zh-CN/docs/Web/API/Window/showModalDialog /zh-CN/docs/Web/API/Window.top /zh-CN/docs/Web/API/Window/top /zh-CN/docs/Web/API/Window/Window.blur() /zh-CN/docs/Web/API/Window/blur -/zh-CN/docs/Web/API/Window/atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob -/zh-CN/docs/Web/API/Window/btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa -/zh-CN/docs/Web/API/Window/caches /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches -/zh-CN/docs/Web/API/Window/clearInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval +/zh-CN/docs/Web/API/Window/atob /zh-CN/docs/Web/API/atob +/zh-CN/docs/Web/API/Window/btoa /zh-CN/docs/Web/API/btoa +/zh-CN/docs/Web/API/Window/caches /zh-CN/docs/Web/API/caches +/zh-CN/docs/Web/API/Window/clearInterval /zh-CN/docs/Web/API/clearInterval /zh-CN/docs/Web/API/Window/onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/Web/API/Window/onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange /zh-CN/docs/Web/API/Window/onpopstate /zh-CN/docs/Web/API/WindowEventHandlers/onpopstate /zh-CN/docs/Web/API/Window/onresize /zh-CN/docs/Web/API/GlobalEventHandlers/onresize /zh-CN/docs/Web/API/Window/onunload /zh-CN/docs/Web/API/WindowEventHandlers/onunload -/zh-CN/docs/Web/API/Window/setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval -/zh-CN/docs/Web/API/Window/setTimeout /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/zh-CN/docs/Web/API/Window/setInterval /zh-CN/docs/Web/API/setInterval +/zh-CN/docs/Web/API/Window/setTimeout /zh-CN/docs/Web/API/setTimeout /zh-CN/docs/Web/API/WindowBase64 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope#方法 /zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /zh-CN/docs/Glossary/Base64 -/zh-CN/docs/Web/API/WindowBase64/atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob -/zh-CN/docs/Web/API/WindowBase64/btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa +/zh-CN/docs/Web/API/WindowBase64/atob /zh-CN/docs/Web/API/atob +/zh-CN/docs/Web/API/WindowBase64/btoa /zh-CN/docs/Web/API/btoa +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob /zh-CN/docs/Web/API/atob +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/Web/API/btoa +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches /zh-CN/docs/Web/API/caches +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /zh-CN/docs/Web/API/clearInterval +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /zh-CN/docs/Web/API/clearTimeout +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /zh-CN/docs/Web/API/createImageBitmap +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated /zh-CN/docs/Web/API/crossOriginIsolated +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch /zh-CN/docs/Web/API/fetch +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /zh-CN/docs/Web/API/indexedDB +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /zh-CN/docs/Web/API/isSecureContext +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/origin /zh-CN/docs/Web/API/origin +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /zh-CN/docs/Web/API/queueMicrotask +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /zh-CN/docs/Web/API/setInterval +/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /zh-CN/docs/Web/API/setTimeout /zh-CN/docs/Web/API/WindowTimers /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope -/zh-CN/docs/Web/API/WindowTimers/clearTimeout /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout +/zh-CN/docs/Web/API/WindowTimers/clearTimeout /zh-CN/docs/Web/API/clearTimeout /zh-CN/docs/Web/API/XMLDocument.load /zh-CN/docs/Web/API/XMLDocument/load /zh-CN/docs/Web/API/XMLHttpRequest/FormData /zh-CN/docs/Web/API/FormData /zh-CN/docs/Web/API/console.dir /zh-CN/docs/Web/API/Console/dir @@ -1627,7 +1645,7 @@ /zh-CN/docs/Web/API/event.defaultPrevented /zh-CN/docs/Web/API/Event/defaultPrevented /zh-CN/docs/Web/API/event.isChar /zh-CN/docs/Web/API/UIEvent/isChar /zh-CN/docs/Web/API/event.isTrusted /zh-CN/docs/Web/API/Event/isTrusted -/zh-CN/docs/Web/API/event.pageY /zh-CN/docs/Web/API/UIEvent/pageY +/zh-CN/docs/Web/API/event.pageY /zh-CN/docs/conflicting/Web/API/MouseEvent/pageY /zh-CN/docs/Web/API/event.preventDefault /zh-CN/docs/Web/API/Event/preventDefault /zh-CN/docs/Web/API/event.stopImmediatePropagation /zh-CN/docs/Web/API/Event/stopImmediatePropagation /zh-CN/docs/Web/API/event.stopPropagation /zh-CN/docs/Web/API/Event/stopPropagation @@ -1641,7 +1659,7 @@ /zh-CN/docs/Web/API/window.requestAnimationFrame /zh-CN/docs/Web/API/Window/requestAnimationFrame /zh-CN/docs/Web/API/剪贴板_API /zh-CN/docs/Web/API/Clipboard_API /zh-CN/docs/Web/API/开发式平台 /zh-CN/docs/Web/API/Push_API -/zh-CN/docs/Web/API/指数 /zh-CN/docs/Web/API/Index +/zh-CN/docs/Web/API/指数 /zh-CN/docs/conflicting/Web/API /zh-CN/docs/Web/API/支付_请求_接口 /zh-CN/docs/Web/API/Payment_Request_API /zh-CN/docs/Web/API/支付_请求_接口/Concepts /zh-CN/docs/Web/API/Payment_Request_API/Concepts /zh-CN/docs/Web/API/消息事件 /zh-CN/docs/Web/API/MessageEvent @@ -1669,9 +1687,12 @@ /zh-CN/docs/Web/CSS/Block_formatting_context /zh-CN/docs/Web/Guide/CSS/Block_formatting_context /zh-CN/docs/Web/CSS/CSS3中的关键帧 /zh-CN/docs/Web/CSS/@keyframes /zh-CN/docs/Web/CSS/CSSOM_View/坐标系 /zh-CN/docs/Web/CSS/CSSOM_View/Coordinate_systems -/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器 /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器 /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods @@ -1693,6 +1714,7 @@ /zh-CN/docs/Web/CSS/Reference/Webkit_Extensions /zh-CN/docs/Web/CSS/WebKit_Extensions /zh-CN/docs/Web/CSS/Reference/background-blend-mode /zh-CN/docs/Web/CSS/background-blend-mode /zh-CN/docs/Web/CSS/Reference/mix-blend-mode /zh-CN/docs/Web/CSS/mix-blend-mode +/zh-CN/docs/Web/CSS/Tools /zh-CN/docs/conflicting/Web/CSS /zh-CN/docs/Web/CSS/Tutorials/Using_CSS_transforms /zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /zh-CN/docs/Web/CSS/Understanding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index /zh-CN/docs/Web/CSS/Understanding_z-index/Adding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index @@ -1754,6 +1776,7 @@ /zh-CN/docs/Web/CSS/文本装饰线厚度(粗细) /zh-CN/docs/Web/CSS/text-decoration-thickness /zh-CN/docs/Web/CSS/混合模式 /zh-CN/docs/Web/CSS/blend-mode /zh-CN/docs/Web/CSS/网格-模板-列 /zh-CN/docs/Web/CSS/grid-template-rows +/zh-CN/docs/Web/Demos_of_open_web_technologies /zh-CN/docs/Web/Demos /zh-CN/docs/Web/Events/Activate /zh-CN/docs/Web/API/Element/DOMActivate_event /zh-CN/docs/Web/Events/DOMContentLoaded /zh-CN/docs/Web/API/Window/DOMContentLoaded_event /zh-CN/docs/Web/Events/DOMContentLoaded_(event) /zh-CN/docs/Web/API/Window/DOMContentLoaded_event @@ -1967,6 +1990,7 @@ /zh-CN/docs/Web/HTTP/策略特征/Using_Feature_Policy /zh-CN/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy /zh-CN/docs/Web/HTTP/缓存_FAQ /zh-CN/docs/Web/HTTP/Caching /zh-CN/docs/Web/HTTP/重定向 /zh-CN/docs/Web/HTTP/Redirections +/zh-CN/docs/Web/Houdini /zh-CN/docs/Web/Guide/Houdini /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness /zh-CN/docs/Web/JavaScript/Guide/Closures /zh-CN/docs/Web/JavaScript/Closures /zh-CN/docs/Web/JavaScript/Guide/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness @@ -2164,7 +2188,7 @@ /zh-CN/docs/Web/媒体 /zh-CN/docs/Web/Media /zh-CN/docs/Web/媒体/Autoplay_guide /zh-CN/docs/Web/Media/Autoplay_guide /zh-CN/docs/Web/性能 /zh-CN/docs/Web/Performance -/zh-CN/docs/Web/演示说明 /zh-CN/docs/Web/Demos_of_open_web_technologies +/zh-CN/docs/Web/演示说明 /zh-CN/docs/Web/Demos /zh-CN/docs/WebAPI/Using_geolocation /zh-CN/docs/Web/API/Geolocation_API /zh-CN/docs/WebAssembly/概念 /zh-CN/docs/WebAssembly/Concepts /zh-CN/docs/WebGL /zh-CN/docs/Web/API/WebGL_API diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 091b99d93b..ea8dba13d9 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -15885,12 +15885,6 @@ "Taoja" ] }, - "Web/API/Headers/getAll": { - "modified": "2019-03-23T22:15:47.321Z", - "contributors": [ - "Taoja" - ] - }, "Web/API/Headers/has": { "modified": "2019-03-18T21:43:54.084Z", "contributors": [ @@ -16296,13 +16290,6 @@ "ice-i-snow" ] }, - "Web/API/Index": { - "modified": "2020-09-07T03:42:22.980Z", - "contributors": [ - "SphinxKnight", - "hl7514576" - ] - }, "Web/API/IndexedDB_API": { "modified": "2020-08-17T03:58:13.141Z", "contributors": [ @@ -20828,20 +20815,6 @@ "jsx" ] }, - "Web/API/UIEvent/pageX": { - "modified": "2019-03-23T22:51:51.935Z", - "contributors": [ - "Tienyz" - ] - }, - "Web/API/UIEvent/pageY": { - "modified": "2019-03-24T00:16:10.292Z", - "contributors": [ - "ziyunfei", - "teoli", - "khalid32" - ] - }, "Web/API/UIEvent/view": { "modified": "2020-10-15T22:25:09.871Z", "contributors": [ @@ -24014,174 +23987,6 @@ "chrisdavidmills" ] }, - "Web/API/WindowOrWorkerGlobalScope/atob": { - "modified": "2020-10-15T21:07:00.713Z", - "contributors": [ - "RainSlide", - "zhangchen", - "nkliyc", - "dingyanhe", - "xgqfrms-GitHub", - "ziyunfei", - "happyWang", - "teoli", - "khalid32" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/btoa": { - "modified": "2020-10-15T21:06:58.236Z", - "contributors": [ - "RainSlide", - "zhangchen", - "RoXoM", - "Carrotzpc", - "dingyanhe", - "xgqfrms-GitHub", - "ziyunfei", - "teoli", - "khalid32", - "cuixiping" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/caches": { - "modified": "2019-09-21T03:33:16.440Z", - "contributors": [ - "JarvanMo" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/clearInterval": { - "modified": "2020-10-15T21:21:33.193Z", - "contributors": [ - "RainCruise", - "RainSlide", - "luojia", - "teoli", - "khalid32", - "ziyunfei" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/clearTimeout": { - "modified": "2020-06-09T04:49:33.480Z", - "contributors": [ - "Humilitas", - "zhangchen", - "luojia", - "paddingme" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": { - "modified": "2019-03-18T20:44:01.174Z", - "contributors": [ - "fanerge", - "varcat" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated": { - "modified": "2020-10-15T22:26:03.129Z", - "contributors": [ - "Fulgrim" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/fetch": { - "modified": "2020-10-15T21:38:47.827Z", - "contributors": [ - "hughfenghen", - "jingkaimori", - "c1er", - "ldc-37", - "Rhys_211", - "zhangchen", - "fscholz", - "TiaossuP", - "Yanzengyong", - "wxs77577", - "Ende93", - "xuzhijun", - "ziyunfei", - "camsong", - "fuchao2012" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/indexedDB": { - "modified": "2019-09-21T03:34:03.050Z", - "contributors": [ - "FEhaoxinjie" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/isSecureContext": { - "modified": "2019-09-21T03:37:23.951Z", - "contributors": [ - "Awe" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/origin": { - "modified": "2019-03-23T22:03:28.077Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/queueMicrotask": { - "modified": "2020-10-15T22:23:11.878Z", - "contributors": [ - "RainSlide" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/setInterval": { - "modified": "2020-11-25T18:16:55.949Z", - "contributors": [ - "RayTang-hub", - "cellinlab", - "Jiangmenghao", - "TXYjing", - "Soul", - "fengbin", - "RainSlide", - "brandonhyc", - "xgqfrms-GitHub", - "shery", - "xgqfrms", - "teoli", - "khalid32", - "ziyunfei", - "sonicview" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/setTimeout": { - "modified": "2020-10-15T21:19:52.746Z", - "contributors": [ - "SnowGojira", - "iyow", - "johnao", - "chrisdavidmills", - "csga31971", - "baijingfeng", - "Reci-z", - "horrylala", - "Adashuai5", - "LilyWakana", - "Mars687", - "pinpinye", - "Lby876176278", - "Chancefeng", - "fscholz", - "xiazhe", - "Frorice", - "yhtml5", - "righttoe", - "Toxni", - "piemonSong", - "xgqfrms-GitHub", - "heke2929", - "SnowOnion", - "Chimen", - "hbkdsm", - "paddingme", - "teoli", - "khalid32", - "Meteormatt", - "ziyunfei" - ] - }, "Web/API/Worker": { "modified": "2020-10-15T21:22:11.206Z", "contributors": [ @@ -24713,6 +24518,74 @@ "Sebastianz" ] }, + "Web/API/atob": { + "modified": "2020-10-15T21:07:00.713Z", + "contributors": [ + "RainSlide", + "zhangchen", + "nkliyc", + "dingyanhe", + "xgqfrms-GitHub", + "ziyunfei", + "happyWang", + "teoli", + "khalid32" + ] + }, + "Web/API/btoa": { + "modified": "2020-10-15T21:06:58.236Z", + "contributors": [ + "RainSlide", + "zhangchen", + "RoXoM", + "Carrotzpc", + "dingyanhe", + "xgqfrms-GitHub", + "ziyunfei", + "teoli", + "khalid32", + "cuixiping" + ] + }, + "Web/API/caches": { + "modified": "2019-09-21T03:33:16.440Z", + "contributors": [ + "JarvanMo" + ] + }, + "Web/API/clearInterval": { + "modified": "2020-10-15T21:21:33.193Z", + "contributors": [ + "RainCruise", + "RainSlide", + "luojia", + "teoli", + "khalid32", + "ziyunfei" + ] + }, + "Web/API/clearTimeout": { + "modified": "2020-06-09T04:49:33.480Z", + "contributors": [ + "Humilitas", + "zhangchen", + "luojia", + "paddingme" + ] + }, + "Web/API/createImageBitmap": { + "modified": "2019-03-18T20:44:01.174Z", + "contributors": [ + "fanerge", + "varcat" + ] + }, + "Web/API/crossOriginIsolated": { + "modified": "2020-10-15T22:26:03.129Z", + "contributors": [ + "Fulgrim" + ] + }, "Web/API/element/scrollWidth": { "modified": "2019-12-11T06:18:59.921Z", "contributors": [ @@ -24727,6 +24600,38 @@ "kuugua" ] }, + "Web/API/fetch": { + "modified": "2020-10-15T21:38:47.827Z", + "contributors": [ + "hughfenghen", + "jingkaimori", + "c1er", + "ldc-37", + "Rhys_211", + "zhangchen", + "fscholz", + "TiaossuP", + "Yanzengyong", + "wxs77577", + "Ende93", + "xuzhijun", + "ziyunfei", + "camsong", + "fuchao2012" + ] + }, + "Web/API/indexedDB": { + "modified": "2019-09-21T03:34:03.050Z", + "contributors": [ + "FEhaoxinjie" + ] + }, + "Web/API/isSecureContext": { + "modified": "2019-09-21T03:37:23.951Z", + "contributors": [ + "Awe" + ] + }, "Web/API/notification": { "modified": "2020-09-28T00:03:47.900Z", "contributors": [ @@ -24850,6 +24755,74 @@ "BSPR0002" ] }, + "Web/API/origin": { + "modified": "2019-03-23T22:03:28.077Z", + "contributors": [ + "xgqfrms-GitHub" + ] + }, + "Web/API/queueMicrotask": { + "modified": "2020-10-15T22:23:11.878Z", + "contributors": [ + "RainSlide" + ] + }, + "Web/API/setInterval": { + "modified": "2020-11-25T18:16:55.949Z", + "contributors": [ + "RayTang-hub", + "cellinlab", + "Jiangmenghao", + "TXYjing", + "Soul", + "fengbin", + "RainSlide", + "brandonhyc", + "xgqfrms-GitHub", + "shery", + "xgqfrms", + "teoli", + "khalid32", + "ziyunfei", + "sonicview" + ] + }, + "Web/API/setTimeout": { + "modified": "2020-10-15T21:19:52.746Z", + "contributors": [ + "SnowGojira", + "iyow", + "johnao", + "chrisdavidmills", + "csga31971", + "baijingfeng", + "Reci-z", + "horrylala", + "Adashuai5", + "LilyWakana", + "Mars687", + "pinpinye", + "Lby876176278", + "Chancefeng", + "fscholz", + "xiazhe", + "Frorice", + "yhtml5", + "righttoe", + "Toxni", + "piemonSong", + "xgqfrms-GitHub", + "heke2929", + "SnowOnion", + "Chimen", + "hbkdsm", + "paddingme", + "teoli", + "khalid32", + "Meteormatt", + "ziyunfei" + ] + }, "Web/Accessibility": { "modified": "2020-08-04T10:11:09.882Z", "contributors": [ @@ -26111,14 +26084,22 @@ "hutuxu" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-18T21:45:20.317Z", + "contributors": [ + "PythonVsJava", + "RainSlide", + "Sheppy" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-18T21:15:13.389Z", "contributors": [ "Ende93", "yellowstar1992" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T22:42:48.406Z", "contributors": [ "FrontENG", @@ -26126,7 +26107,7 @@ "regiondavid" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-18T20:43:42.671Z", "contributors": [ "BychekRU", @@ -26134,14 +26115,6 @@ "charlie" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-18T21:45:20.317Z", - "contributors": [ - "PythonVsJava", - "RainSlide", - "Sheppy" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-03-18T21:38:07.175Z", "contributors": [ @@ -27289,16 +27262,6 @@ "yan" ] }, - "Web/CSS/Tools": { - "modified": "2019-03-23T22:29:45.280Z", - "contributors": [ - "runyul", - "pluwen", - "edwards1101", - "lucia007", - "lunix01" - ] - }, "Web/CSS/Tutorials": { "modified": "2019-03-23T23:32:32.218Z", "contributors": [ @@ -30831,7 +30794,7 @@ "TimZhao" ] }, - "Web/Demos_of_open_web_technologies": { + "Web/Demos": { "modified": "2019-09-04T03:32:34.828Z", "contributors": [ "RainSlide", @@ -31077,6 +31040,16 @@ "Teago" ] }, + "Web/Guide/Houdini": { + "modified": "2020-11-21T05:08:58.458Z", + "contributors": [ + "xusy", + "bingoYB", + "cutefcc", + "sunfeel", + "xgqfrms" + ] + }, "Web/Guide/Introduction_to_Web_development": { "modified": "2019-03-24T00:00:33.366Z", "contributors": [ @@ -35163,16 +35136,6 @@ "WayneCui" ] }, - "Web/Houdini": { - "modified": "2020-11-21T05:08:58.458Z", - "contributors": [ - "xusy", - "bingoYB", - "cutefcc", - "sunfeel", - "xgqfrms" - ] - }, "Web/JavaScript": { "modified": "2020-09-21T00:46:20.876Z", "contributors": [ @@ -47010,11 +46973,10 @@ ] }, "conflicting/Web/API": { - "modified": "2019-03-23T23:09:29.332Z", + "modified": "2020-09-07T03:42:22.980Z", "contributors": [ - "mySoul", - "teoli", - "AlexChao" + "SphinxKnight", + "hl7514576" ] }, "conflicting/Web/API/Beacon_API": { @@ -47253,6 +47215,12 @@ "m2mbob" ] }, + "conflicting/Web/API/Headers/get": { + "modified": "2019-03-23T22:15:47.321Z", + "contributors": [ + "Taoja" + ] + }, "conflicting/Web/API/MouseEvent/altKey": { "modified": "2019-03-24T00:16:10.184Z", "contributors": [ @@ -47269,6 +47237,20 @@ "AshfaqHossain" ] }, + "conflicting/Web/API/MouseEvent/pageX": { + "modified": "2019-03-23T22:51:51.935Z", + "contributors": [ + "Tienyz" + ] + }, + "conflicting/Web/API/MouseEvent/pageY": { + "modified": "2019-03-24T00:16:10.292Z", + "contributors": [ + "ziyunfei", + "teoli", + "khalid32" + ] + }, "conflicting/Web/API/MouseEvent/relatedTarget": { "modified": "2019-03-23T23:09:12.340Z", "contributors": [ @@ -47402,6 +47384,16 @@ "qianzhangcheng" ] }, + "conflicting/Web/CSS": { + "modified": "2019-03-23T22:29:45.280Z", + "contributors": [ + "runyul", + "pluwen", + "edwards1101", + "lucia007", + "lunix01" + ] + }, "conflicting/Web/CSS/::placeholder": { "modified": "2019-03-23T23:21:18.757Z", "contributors": [ diff --git a/files/zh-cn/web/api/headers/getall/index.html b/files/zh-cn/conflicting/web/api/headers/get/index.html index a9a2d22e59..c4b5464f68 100644 --- a/files/zh-cn/web/api/headers/getall/index.html +++ b/files/zh-cn/conflicting/web/api/headers/get/index.html @@ -1,7 +1,8 @@ --- title: Headers.getAll() -slug: Web/API/Headers/getAll +slug: conflicting/Web/API/Headers/get translation_of: Web/API/Headers/getAll +original_slug: Web/API/Headers/getAll --- <p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p> diff --git a/files/zh-cn/web/api/index/index.html b/files/zh-cn/conflicting/web/api/index.html index e910b907d2..70b70e7ec2 100644 --- a/files/zh-cn/web/api/index/index.html +++ b/files/zh-cn/conflicting/web/api/index.html @@ -1,7 +1,7 @@ --- title: 指数 -slug: Web/API/Index +slug: conflicting/Web/API translation_of: Web/API/Index -original_slug: Web/API/指数 +original_slug: Web/API/Index --- <p>{{Index("/zh-CN/docs/Web/API")}}</p> diff --git a/files/zh-cn/web/api/uievent/pagex/index.html b/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html index b4a7f812f7..7089c102a8 100644 --- a/files/zh-cn/web/api/uievent/pagex/index.html +++ b/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html @@ -1,7 +1,8 @@ --- title: UIEvent.pageX -slug: Web/API/UIEvent/pageX +slug: conflicting/Web/API/MouseEvent/pageX translation_of: Web/API/UIEvent/pageX +original_slug: Web/API/UIEvent/pageX --- <p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p> diff --git a/files/zh-cn/web/api/uievent/pagey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html index 6c504d3f52..f4c92daa4e 100644 --- a/files/zh-cn/web/api/uievent/pagey/index.html +++ b/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html @@ -1,7 +1,8 @@ --- title: event.pageY -slug: Web/API/UIEvent/pageY +slug: conflicting/Web/API/MouseEvent/pageY translation_of: Web/API/UIEvent/pageY +original_slug: Web/API/UIEvent/pageY --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">概述</h3> diff --git a/files/zh-cn/web/css/tools/index.html b/files/zh-cn/conflicting/web/css/index.html index a4c348fb36..007a716edb 100644 --- a/files/zh-cn/web/css/tools/index.html +++ b/files/zh-cn/conflicting/web/css/index.html @@ -1,9 +1,10 @@ --- title: 工具 -slug: Web/CSS/Tools +slug: conflicting/Web/CSS tags: - CSS translation_of: Web/CSS/Tools +original_slug: Web/CSS/Tools --- <div>CSS提供了许多强大的功能，但这些功能要么可能很难使用，要么有许多参数，因此在使用它们时，能够可视化它们是有帮助的。此页面提供了一些有用的工具的链接，这些工具将帮助您使用这些功能构建 CSS 来设计您的内容。</div> diff --git a/files/zh-cn/glossary/character_set/index.html b/files/zh-cn/glossary/character_set/index.html index 9dc43c66b5..450d517a72 100644 --- a/files/zh-cn/glossary/character_set/index.html +++ b/files/zh-cn/glossary/character_set/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/character_set <p>如果一个字符集使用不正确(例如，对于以 Big5 编码的文章使用 Unicode)，你可能会看到全是乱码，这被称为 {{Interwiki("wikipedia", "Mojibake")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 文章 <ol> diff --git a/files/zh-cn/glossary/crawler/index.html b/files/zh-cn/glossary/crawler/index.html index 27d5a0f735..048962ae9b 100644 --- a/files/zh-cn/glossary/crawler/index.html +++ b/files/zh-cn/glossary/crawler/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Crawler <li>维基百科上关于{{Interwiki("wikipedia", "Web crawler")}}的内容</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/">MDN网络文档术语表</a> diff --git a/files/zh-cn/glossary/cross_axis/index.html b/files/zh-cn/glossary/cross_axis/index.html index 63d0665cce..1c67022dc9 100644 --- a/files/zh-cn/glossary/cross_axis/index.html +++ b/files/zh-cn/glossary/cross_axis/index.html @@ -37,7 +37,7 @@ original_slug: Glossary/交叉轴 <li>CSS 弹性容器指南：<em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/css_selector/index.html b/files/zh-cn/glossary/css_selector/index.html index 88170cdb72..d5967dc2f9 100644 --- a/files/zh-cn/glossary/css_selector/index.html +++ b/files/zh-cn/glossary/css_selector/index.html @@ -53,7 +53,7 @@ div.warning { <p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>查看我们的关于选择器的介绍 <a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></li> <li>基础选择器 diff --git a/files/zh-cn/glossary/database/index.html b/files/zh-cn/glossary/database/index.html index 5b0c1a3082..3e8a5ebb4b 100644 --- a/files/zh-cn/glossary/database/index.html +++ b/files/zh-cn/glossary/database/index.html @@ -14,7 +14,7 @@ original_slug: Glossary/数据库 <p>浏览器也有他们特有的数据库系统，被称作 {{glossary("IndexedDB")}}。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>维基百科上的词条 {{Interwiki("wikipedia", "Database")}} <ol> diff --git a/files/zh-cn/glossary/flexbox/index.html b/files/zh-cn/glossary/flexbox/index.html index c03d2df467..617ab9d377 100644 --- a/files/zh-cn/glossary/flexbox/index.html +++ b/files/zh-cn/glossary/flexbox/index.html @@ -43,7 +43,7 @@ translation_of: Glossary/Flexbox <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/fork/index.html b/files/zh-cn/glossary/fork/index.html index 6778a8ff6c..66c421a698 100644 --- a/files/zh-cn/glossary/fork/index.html +++ b/files/zh-cn/glossary/fork/index.html @@ -22,7 +22,7 @@ translation_of: Glossary/Fork <li><a href="https://www.libreoffice.org/about-us/who-are-we/">LibreOffice, a fork of OpenOffice</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>基本知识 <ol> diff --git a/files/zh-cn/glossary/global_object/index.html b/files/zh-cn/glossary/global_object/index.html index 5635c4661d..81732082ce 100644 --- a/files/zh-cn/glossary/global_object/index.html +++ b/files/zh-cn/glossary/global_object/index.html @@ -50,7 +50,7 @@ window.greeting(); // It is the same as the normal invoking: greeting(); console.log("Hi!"); }</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/graceful_degradation/index.html b/files/zh-cn/glossary/graceful_degradation/index.html index 2982cc0074..721c5cc632 100644 --- a/files/zh-cn/glossary/graceful_degradation/index.html +++ b/files/zh-cn/glossary/graceful_degradation/index.html @@ -22,7 +22,7 @@ original_slug: Glossary/优雅降级 <li>维基百科的{{Interwiki("wikipedia", "优雅降级")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web 文档词汇表</a> diff --git a/files/zh-cn/glossary/gzip_compression/index.html b/files/zh-cn/glossary/gzip_compression/index.html index 8c7e9e0f4a..800d8c12a6 100644 --- a/files/zh-cn/glossary/gzip_compression/index.html +++ b/files/zh-cn/glossary/gzip_compression/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression <li>中文维基百科上的 <a href="https://zh.wikipedia.org/wiki/Gzip">Gzip</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary><a href="/zh-CN/docs/Glossary">MDN 术语表</a></summary> {{ListSubpages("/zh-CN/docs/Glossary")}}</details> diff --git a/files/zh-cn/glossary/http_2/index.html b/files/zh-cn/glossary/http_2/index.html index 0572bafbf0..c3af127d0d 100644 --- a/files/zh-cn/glossary/http_2/index.html +++ b/files/zh-cn/glossary/http_2/index.html @@ -10,7 +10,7 @@ translation_of: Glossary/HTTP_2 <p>HTTP/2 不会修改 HTTP 协议的语义。 HTTP 1.1中的所有核心概念（例如 HTTP 方法，状态码，URI 和 headers）都得以保留。 而是修改了 HTTP/2 数据在客户端和服务器之间的格式（帧）和传输方式，这两者都管理整个过程，并在新的框架层内隐藏了应用程序的复杂性。 所以，所有现有的应用程序都可以不经修改地交付。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>常识 <ol> diff --git a/files/zh-cn/glossary/http_3/index.html b/files/zh-cn/glossary/http_3/index.html index abd624776b..96350153cb 100644 --- a/files/zh-cn/glossary/http_3/index.html +++ b/files/zh-cn/glossary/http_3/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/HTTP_3 --- <p><strong><font><font>HTTP/3</font></font></strong><font><font>是</font></font><font><font>继</font></font>{{glossary("HTTP 2", "HTTP/2")}}<font><font>即将到来的</font><a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP"><font>HTTP网络协议的</font></a><font>主要修订版。</font></font><font><font>HTTP/3的要点是它使用名为QUIC</font><font>的新</font></font>{{glossary("UDP")}}<font><font>协议代替</font></font>{{glossary("TCP")}}<font><font>。</font></font></p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>基础知识 <ol> diff --git a/files/zh-cn/glossary/http_header/index.html b/files/zh-cn/glossary/http_header/index.html index e176995fc8..abb83200b4 100644 --- a/files/zh-cn/glossary/http_header/index.html +++ b/files/zh-cn/glossary/http_header/index.html @@ -48,7 +48,7 @@ X-Cache: Hit from cloudfront X-Cache-Info: cached </pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>规范 <ol> diff --git a/files/zh-cn/glossary/index.html b/files/zh-cn/glossary/index.html index 2d27a1dfde..43354124dd 100644 --- a/files/zh-cn/glossary/index.html +++ b/files/zh-cn/glossary/index.html @@ -29,7 +29,7 @@ translation_of: Glossary <p>如果你想要了解更多关于如何对该术语表做贡献的相关信息，请访问<a href="/zh-CN/docs/MDN/Doc_status/Glossary">术语表文档状态页面</a>。</p> <div class="hidden"> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="/zh-CN/docs/Glossary">MDN Web 文档术语</a></strong>{{ListSubpagesForSidebar("/zh-CN/docs/Glossary", 0)}}</li> </ol> diff --git a/files/zh-cn/glossary/input_method_editor/index.html b/files/zh-cn/glossary/input_method_editor/index.html index 381c2ac71b..d4d1a6b9e0 100644 --- a/files/zh-cn/glossary/input_method_editor/index.html +++ b/files/zh-cn/glossary/input_method_editor/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/Input_method_editor <li>使用手写识别在触摸屏上输入文本</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>维基百科文章 <ol> diff --git a/files/zh-cn/glossary/latency/index.html b/files/zh-cn/glossary/latency/index.html index 8159d00ea3..bc6eb38d21 100644 --- a/files/zh-cn/glossary/latency/index.html +++ b/files/zh-cn/glossary/latency/index.html @@ -16,4 +16,4 @@ translation_of: Glossary/Latency <li>理解延迟</li> </ul> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/zh-cn/glossary/ligature/index.html b/files/zh-cn/glossary/ligature/index.html index 4e22b4d696..e919f9d405 100644 --- a/files/zh-cn/glossary/ligature/index.html +++ b/files/zh-cn/glossary/ligature/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/Ligature <p>你可以在网页中使用 {{cssxref("font-variant-ligatures")}} 来实现连字</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{interwiki("wikipedia", "Typographic ligature", "Ligature")}} on Wikipedia</li> </ol> diff --git a/files/zh-cn/glossary/main_thread/index.html b/files/zh-cn/glossary/main_thread/index.html index ceb985bb00..2ce47d1a6f 100644 --- a/files/zh-cn/glossary/main_thread/index.html +++ b/files/zh-cn/glossary/main_thread/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/Main_thread <p>除非故意使用 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">web worker</a>，比如 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">service worker</a>，不然 JavaScript 只在线程中运行，所以脚本的运行时，很容易导致事件处理流程或绘制的延迟。主线程中运行的工作越少，就有越多的余地来处理用户事件，页面绘制和对用户保持响应。 </p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>另可参考 <ol> diff --git a/files/zh-cn/glossary/method/index.html b/files/zh-cn/glossary/method/index.html index 0d4e53b15d..54706f64d1 100644 --- a/files/zh-cn/glossary/method/index.html +++ b/files/zh-cn/glossary/method/index.html @@ -24,7 +24,7 @@ translation_of: Glossary/Method <li><a href="/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/nullish/index.html b/files/zh-cn/glossary/nullish/index.html index bcde8071c5..dff466ef8f 100644 --- a/files/zh-cn/glossary/nullish/index.html +++ b/files/zh-cn/glossary/nullish/index.html @@ -11,9 +11,3 @@ translation_of: Glossary/Nullish <p>{{Draft}}</p> <p>一个 nullish 值要么是 {{JSxRef("null")}} 要么是 {{JSxRef("undefined")}}。nullish 值总是 <a href="/zh-CN/docs/Glossary/Falsy">falsy</a>.。</p> - -<section id="Quick_Links"> -<ul> - <li class="hidden">{{Page("/en-US/docs/Glossary/Primitive", "Quick_Links")}}</li> -</ul> -</section> diff --git a/files/zh-cn/glossary/smtp/index.html b/files/zh-cn/glossary/smtp/index.html index 1bc6829af1..19c5cc7ad8 100644 --- a/files/zh-cn/glossary/smtp/index.html +++ b/files/zh-cn/glossary/smtp/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/SMTP <p>该协议相对简单。最复杂的部分在于添加支持不同的验证机制（<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>， <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>，<a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>，MSN，AUTH LOGIN，AUTH PLAIN等），处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 </p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Glossary">术语表</a> diff --git a/files/zh-cn/glossary/type_conversion/index.html b/files/zh-cn/glossary/type_conversion/index.html index 863855caad..300aba36e3 100644 --- a/files/zh-cn/glossary/type_conversion/index.html +++ b/files/zh-cn/glossary/type_conversion/index.html @@ -10,7 +10,7 @@ original_slug: Glossary/类型转换 --- <p class="syntaxbox">类型转换（或类型变换；英文：Type conversion, typecasting）是指将数据由一种类型变换为另一种类型。在编译器自动赋值时,会发生<em>隐式转换</em>，但在代码中，也可以用一些写法强制要求进行<em>显式转换</em>。例如：在表达式 <code>5 + 2.0</code> 中，整数 <code>5</code> 被隐式转换为浮点数，但 <code>Number("0x11")</code> 和 "0x11" 则被显式转换为数字 17。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Glossary">术语</a> diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html index d8a315fba4..a4c358224a 100644 --- a/files/zh-cn/learn/css/first_steps/getting_started/index.html +++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html @@ -17,7 +17,7 @@ original_slug: Learn/CSS/First_steps/开始 <p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> </div> -<p class="summary">在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。</p> +<p class="summary">在这篇文章中，我们将会拿一个简单的 HTML 文档做例子，并且在里面使用 CSS 样式，期待你能在此过程中学会更多有关 CSS 的实战性知识。</p> <h4 id="前置知识">前置知识</h4> @@ -26,19 +26,19 @@ original_slug: Learn/CSS/First_steps/开始 <ul> <li><font><font>基本熟悉计算机操作。</font></font></li> <li><font><font>基本工作环境的设置（详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>）</font></font><font><font>，基本的文件操作，详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></font></font><font><font>。</font></font></li> - <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 章节中提到的基本HTML知识.</li> + <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 概述</a> 章节中提到的基本 HTML 知识.</li> </ul> <h4 id="目标">目标</h4> <ul> - <li>理解 HTML文档链接CSS文档的几个基本套路，</li> - <li>并能运用所学的CSS，做些文字上的格式化操作。</li> + <li>理解 HTML 文档链接 CSS 文档的几个基本套路，</li> + <li>并能运用所学的 CSS，做些文字上的格式化操作。</li> </ul> -<h2 id="先从HTML开始吧">先从HTML开始吧</h2> +<h2 id="先从HTML开始吧">先从 HTML 开始吧</h2> -<p>我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： <code>index.html</code> 的形式保存下来。</p> +<p>我们先以 HTML 文档展开叙述。如果想在自己电脑试一试，可以复制下面的代码。在你的电脑上，将代码以文件名： <code>index.html</code> 的形式保存下来。</p> <pre class="brush: html"><!doctype html> <html lang="en"> @@ -71,25 +71,25 @@ original_slug: Learn/CSS/First_steps/开始 <p><strong>温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。</strong></p> </div> -<h2 id="添加CSS试试看？">添加CSS试试看？</h2> +<h2 id="添加CSS试试看？">添加 CSS 试试看？</h2> -<p>我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。</p> +<p>我们最想做的就是让 HTML 文档能够遵守我们给它的 CSS 规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。</p> -<p>在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 <code>styles.css</code> 。（看后缀知道此文件就是CSS文件）</p> +<p>在与之前所说的 HTML 文档的相同目录创建一个文件，保存并命名为 <code>styles.css</code> 。（看后缀知道此文件就是 CSS 文件）</p> -<p>为了把 <code>styles.css</code> 和 <code>index.html</code> 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：</p> +<p>为了把 <code>styles.css</code> 和 <code>index.html</code> 连接起来，可以在 HTML 文档中，{{htmlelement("head")}} 语句模块里面加上下面的代码：</p> <pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> -<p> {{htmlelement("link")}} 语句块里面，我们用属性<code>rel</code>，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 <code>href</code> 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 <code>styles.css</code> 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。</p> +<p> {{htmlelement("link")}} 语句块里面，我们用属性 <code>rel</code>，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 <code>href</code> 指定，寻找 CSS 文件的位置。 你可以做测试来验证CSS是否有效：在 <code>styles.css</code> 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。</p> <pre class="brush: css">h1 { color: red; }</pre> -<p>保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）</p> +<p>保存 HTML 和 CSS 文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，恭喜你：你已经成功将某些 CSS 样式运用到 HTML 上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）</p> -<p>你可以一直在本地编辑器练习 <code>styles.css</code> ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。</p> +<p>你可以一直在本地编辑器练习 <code>styles.css</code> ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的 CSS 代码连接到旁边的 HTML 文档，就好像我们上面得两个文档一样互相连接。</p> <h2 id="样式化_HTML_元素">样式化 HTML 元素</h2> @@ -177,7 +177,7 @@ span.special { <p>该选择器将选择<code><li></code>内部的任何<code><em></code>元素（<code><li></code>的后代）。因此在示例文档中，您应该发现第三个列表项内的<code><em></code>现在是紫色，但是在段落内的那个没发生变化。</p> -<p>另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 <code>+</code> 号 (成为 <strong>相邻选择符</strong>) </p> +<p>另一些可能想尝试的事情是在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 <code>+</code> 号 (成为 <strong>相邻选择符</strong>) </p> <p>也将这个规则添加到样式表中：</p> @@ -185,7 +185,7 @@ span.special { font-size: 200%; }</pre> -<p>下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。</p> +<p>下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的 span 变为红色。如果没问题，您将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色。</p> <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> @@ -211,23 +211,23 @@ a:visited { text-decoration: none; }</pre> -<p>在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?</p> +<p>在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。——换一个更好的颜色吧。你能将链接变为黑体吗?</p> <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> -<p>我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。</p> +<p>我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留 link 状态下的下划线。— 这是下划线的本来作用。不管你用 CSS 来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。</p> <div class="blockIndicator note"> -<p><strong>注</strong>: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。</p> +<p><strong>注</strong>: 在本教程以及整个 MDN 站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当让每一个访客都能够理解、使用。</p> <p>你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。</p> -<p>一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。</p> +<p>一个朴素的 HTML 文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。</p> </div> -<h2 id="将选择子和关系选择器组合起来">将选择子和关系选择器组合起来</h2> +<h2 id="同时使用选择器和选择符">同时使用选择器和选择符</h2> -<p>你可以将多个选择子和关系选择器组合起来。来看一些例子：</p> +<p>你可以同时使用选择器和选择符。来看一些例子：</p> <pre class="brush: css">/* selects any <span> that is inside a <p>, which is inside an <article> */ article p span { ... } @@ -243,15 +243,15 @@ h1 + ul + p { ... }</pre> padding: 5px; }</pre> -<p>上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为special。</p> +<p>上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为 special。</p> -<p>在我们提供的原始HTML文档中，与之符合的元素只有<code><span class="special"></code>.</p> +<p>在我们提供的原始 HTML 文档中，与之符合的元素只有<code><span class="special"></code>.</p> -<p>如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。</p> +<p>如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的 CSS 代码，你很快就能找到窍门。</p> <h2 id="总结">总结</h2> -<p>在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。</p> +<p>在本教程中，我们学习了使用 CSS 为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在 MDN 文档中查找属性和值。</p> <p>在下一节中，我们将看到样式表的结构是什么样的。</p> @@ -260,9 +260,9 @@ h1 + ul + p { ... }</pre> <h2 id="在此模块">在此模块</h2> <ol> - <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS?</a></li> - <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始学习CSS</a></li> - <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS代码是如何组织的</a></li> - <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始学习 CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 代码是如何组织的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS 是如何工作的</a></li> <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">开始使用你的新知识</a></li> </ol> diff --git a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html index aec4a3a61d..6f09222cf6 100644 --- a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html @@ -215,7 +215,7 @@ p { color: blue; }</pre> -<p>但是，在我们使用类选择器和元素选择器的早期块中，类将获胜，使得段落变红--即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。</p> +<p>但是，在我们同时使用了类选择器和元素选择器的前一个例子中，类将获胜，使得段落变红--即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。</p> <p><strong>自己试试上面的实验--将HTML添加到您的实验中，然后将两个p{.}规则添加到样式表中。接下来，将第一个p选择器更改为.Special，以查看它如何更改样式。</strong></p> diff --git a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html index 378913f393..eacd31f1b0 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html @@ -367,7 +367,7 @@ myImage.onclick = function() { <pre class="brush: js notranslate">let myButton = document.querySelector('button'); let myHeading = document.querySelector('h1');</pre> </li> - <li>然后添加以下函数来设置个性化欢迎信息。（函数暂时不起作用，稍后修复） + <li>然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式） <pre class="brush: html notranslate">function setUserName() { let myName = prompt('请输入你的名字。'); localStorage.setItem('name', myName); diff --git a/files/zh-cn/learn/html/introduction_to_html/index.html b/files/zh-cn/learn/html/introduction_to_html/index.html index 4452927531..65a460db43 100644 --- a/files/zh-cn/learn/html/introduction_to_html/index.html +++ b/files/zh-cn/learn/html/introduction_to_html/index.html @@ -55,7 +55,7 @@ translation_of: Learn/HTML/Introduction_to_HTML <h2 id="相关链接">相关链接</h2> <dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">网络文化基础 1</a></dt> + <dt><a href="https://mozilla.github.io/content/web-lit-whitepaper/">网络文化基础 2</a></dt> <dd>一个优秀的Mozilla基础课程，探索和测试在HTML模块介绍中讨论的许多技能。学习者熟悉阅读，写作和参与这个六部分模块的网络。通过生产和协作掌握网络的基础。</dd> <dt></dt> </dl> diff --git a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html index 4f7add7614..02a3936597 100644 --- a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html @@ -478,7 +478,7 @@ for (let i = 0; i < buttons.length; i++) { <p dir="ltr">恭喜你，迈出了探索 JavaScript 世界的第一步。我们从理论开始，介绍为什么要使用 JavaScript，以及用它能做什么事情。过程中穿插了一些代码示例并讲解了 JavaScript 如何与网站中其他代码适配，等等。</p> -<p dir="ltr">现在 JavaScript 或许还有些令人生畏，但不用担心。在课程中我们会循序渐进。下一节将<a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash"> 全力投入实战</a>，让你专注其中，并建立自己的 JavaScript 示例。</p> +<p dir="ltr">现在 JavaScript 或许还有些令人生畏，但不用担心。在课程中我们会循序渐进。下一节将<a href="/zh-CN/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash"> 全力投入实战</a>，让你专注其中，并建立自己的 JavaScript 示例。</p> <p dir="ltr">{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> diff --git a/files/zh-cn/mdn/about/index.html b/files/zh-cn/mdn/about/index.html index 912b4e8e75..766e0465ed 100644 --- a/files/zh-cn/mdn/about/index.html +++ b/files/zh-cn/mdn/about/index.html @@ -45,7 +45,7 @@ translation_of: MDN/About <pre class="notranslate">“ <a href="https://developer.mozilla.org/zh-CN/docs/MDN/About$history">Mozilla贡献者</a>基于<a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>协议发布的<a href="https://developer.mozilla.org/zh-CN/docs/MDN/About">关于MDN</a>. ”</pre> -<p>注意，在示例中，“Mozzilla 贡献者”链接了引用页面的历史版本。请浏览<a href="https://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a>以获得进一步的解释。</p> +<p>注意，在示例中，“Mozilla 贡献者”链接了引用页面的历史版本。请浏览<a href="https://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a>以获得进一步的解释。</p> <div class="note"> <p><strong>注意:</strong> 请浏览 <a href="/zh-CN/docs/MDN_content_on_WebPlatform.org" title="/zh-CN/docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a> 获取在上述网站使用和署名 MDN 内容的信息。</p> @@ -53,9 +53,9 @@ translation_of: MDN/About <p>在2010年8月20日之前添加到 wiki 中的示例代码通过<a class="external external-icon" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>发布，你应该向MIT模板中添加相应的属性信息："© <最后修订时间> <发布者姓名>"。</p> -<p>在2010年8月20日之后添加到wiki中的示例代码属于 <a class="external external-icon" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a>. 版权声明是不必要的，如果你需要，可以使用以下内容："Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> +<p>在2010年8月20日之后添加到 wiki中的示例代码属于 <a class="external external-icon" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a>. 版权声明是不必要的，如果你需要，可以使用以下内容："Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> -<p>如果你需要对该 wiki 作出贡献，你必须在Attribution-ShareAlike license (或者在你编辑的页面已经制定的其他版权许可)下发布你的文档，在 <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication)下发布你的示例代码。将内容添加到这个 wiki 表明你同意在相应的许可之下发布你贡献的内容。</p> +<p>如果你需要对该 wiki 作出贡献，你必须在 Attribution-ShareAlike license (或者在你编辑的页面已经制定的其他版权许可)下发布你的文档，在 <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication)下发布你的示例代码。将内容添加到这个 wiki 表明你同意在相应的许可之下发布你贡献的内容。</p> <p>一些历史内容是在不同于以上的版权许可之下发布的，这些已在页面底部通过<a href="https://developer.mozilla.org/Archive/Meta_docs/Examples/Alternate_License_Block">其他版权许可</a>的方式进行了标注。</p> @@ -72,11 +72,11 @@ translation_of: MDN/About <h2 id="下载整站内容">下载整站内容</h2> -<p>你可以下载 <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">MDN 的镜像文件</a>(2017年2月，总共2.1GB)</p> +<p>你可以下载 <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">MDN 的镜像文件</a>(2017 年 2 月，总共 2.1GB)</p> <h3 id="单独页面">单独页面</h3> -<p>你可以通过在页面URL后添加<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Kuma/API#Document_parameters">文档参数</a>来制定需要的格式，获取MDN上每个单页的内容。</p> +<p>你可以通过在页面 URL 后添加<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Kuma/API#Document_parameters">文档参数</a>来制定需要的格式，获取 MDN 上每个单页的内容。</p> <h3 id="第三方工具">第三方工具</h3> @@ -98,11 +98,11 @@ translation_of: MDN/About <p><a href="https://developer.mozilla.org/zh-CN/docs/Project:MDN/Kuma" title="/zh-CN/docs/Project:MDN/Kuma">Kuma</a> 是 Mozilla 开发的用于驱动 MDN 的平台，目前仍处在持续开发的进程中。我们的开发者，以及大量的志愿者，正在不断的对这个平台作出改进。如果你在使用网站时发现了错误，或者遇到的问题，或者有新的可以让这个软件更加完美的想法建议，可以使用 <a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/form.mdn">Kuma bug form</a> 进行反馈。</p> -<h2 id="MDN历史">MDN历史</h2> +<h2 id="MDN历史">MDN 历史</h2> -<p>Mozilla 开发者网络（亦称作 Mozilla 开发者中心（MDC）或 Devmo）在2005年年初启动。那时 <a class="external" href="http://www.mozillafoundation.org">Mozilla 基金会</a> 从 AOL 获得了许可协议，得以使用原创的 <a href="/Project:cn/DevEdge" title="Project:en/DevEdge">DevEdge</a> 内容。DevEdge 内容的引入具有抛砖引玉之效，因此在那不久在社区志愿者的努力下它被迁移到了这个更易于更新与维护的 wiki 。</p> +<p>Mozilla 开发者网络（亦称作 Mozilla 开发者中心（MDC）或 Devmo）在 2005 年年初启动。那时 <a class="external" href="http://www.mozillafoundation.org">Mozilla 基金会</a> 从 AOL 获得了许可协议，得以使用原创的 <a href="/Project:cn/DevEdge" title="Project:en/DevEdge">DevEdge</a> 内容。DevEdge 内容的引入具有抛砖引玉之效，因此在那不久在社区志愿者的努力下它被迁移到了这个更易于更新与维护的 wiki 。</p> -<p>此后，这个项目不断发展，现在已经成为所有与关于 Mozilla 项目和开放网络技术的文档的核心一环。在2010年，该项目更名为Mozilla开发者网络（Mozilla Developer Network）。2011年，又添加了供web开发者分享与展示代码的 <a class="external" href="http://developer.mozilla.org/zh-CN/demos" title="https://developer.mozilla.org/zh-CN/demos/">Demo Studio</a> 与提供教程的 <a class="external" href="http://developer.mozilla.org/zh-CN/learn" title="https://developer.mozilla.org/zh-CN/learn">Learning</a> 页面。（MDC 现在表示了"MDN文档中心（MDN Doc Center）"）现在，Mozilla开发者网络正向着成为供Web设计师、应用开发者、以及拓展、主题制作者们时常参考的资源的方向发展。</p> +<p>此后，这个项目不断发展，现在已经成为所有与关于 Mozilla 项目和开放网络技术的文档的核心一环。在2010年，该项目更名为 Mozilla 开发者网络（Mozilla Developer Network）。2011年，又添加了供 web 开发者分享与展示代码的 <a class="external" href="http://developer.mozilla.org/zh-CN/demos" title="https://developer.mozilla.org/zh-CN/demos/">Demo Studio</a> 与提供教程的 <a class="external" href="http://developer.mozilla.org/zh-CN/learn" title="https://developer.mozilla.org/zh-CN/learn">Learning</a> 页面。（MDC 现在表示了"MDN文档中心（MDN Doc Center）"）现在，Mozilla开发者网络正向着成为供Web设计师、应用开发者、以及拓展、主题制作者们时常参考的资源的方向发展。</p> <p>更多关于 Mozilla 的后世前身可在我们的<a href="/zh-CN/docs/MDN_at_ten">十周年纪念庆</a>页面查看,其中还有参与者发表的 Ta 对 Mozilla 的评价。</p> diff --git a/files/zh-cn/mdn/contribute/localize/index.html b/files/zh-cn/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..e19453655e --- /dev/null +++ b/files/zh-cn/mdn/contribute/localize/index.html @@ -0,0 +1,74 @@ +--- +title: MDN 的本地化 +slug: MDN/Contribute/Localize +tags: + - Localization + - MDN Meta + - l10n +--- +<div>{{MDNSidebar}}</div> + +<p>2020年12月14日开始，MDN 将运行在基于 Github 的 <a href="https://github.com/mdn/yari">Yari 平台</a>上。新的平台也使 MDN 在许多方面发生了改变，这些变化基本上都对我们的工作有不同程度的改进，不过，在内容本地化的工作方面，变化可能看起来会更激进一些。许多的英语区域外的内容本地化工作被中止了，其中的内容长久未更新或活跃人数太少都是可能的原因。在将来，我们希望有更好的机制，来管理这些内容的本地化工作。</p> + +<p>除了下面列出的地区，所有区域的内容本地化工作都被冻结了，也就意味着这些内容暂时不会开放编辑。所有可接受本地化编辑的内容，都由各自对应的志愿者小组负责管理。</p> + +<h2 id="Active_locales">活跃语言</h2> + +<div class="notecard note"> +<p><strong>提示</strong>：如果你有意向加入某语言的内容本地化工作，请联系下面这些小组中的成员，也可<a href="/zh-CN/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">尝试寻求帮助</a>。语言名称后的标识与<a href="https://github.com/mdn/translated-content">Translated-content Repo</a>目录是对应的。</p> +</div> + +<h3 id="Brazilian_Portuguese_pt-BR">巴西葡萄牙语（pt-BR）</h3> + +<ul> + <li>讨论组：<a href="https://t.me/mdn_l10n_pt_br">Telegram (MDN localization in Brazillian Portuguese)</a></li> + <li>目前的志愿者：<a href="https://github.com/lumigueres">Luisa Migueres</a>，<a href="https://github.com/juliosampaio">Julio Sampaio</a>，<a href="https://github.com/josielrocha">Josiel Rocha</a>，<a href="https://github.com/clovislima">Clóvis Lima Júnior</a></li> +</ul> + +<h3 id="Chinese_zh-CN_zh-TW">汉语（zh-CN，zh-TW）</h3> + +<ul> + <li>讨论组：<a href="https://moztw.org/tg">Telegram (MozTW L10n channel)</a></li> + <li>目前的志愿者：<a href="https://github.com/irvin">Irvin</a>，<a href="https://github.com/t7yang">t7yang</a>，<a href="https://github.com/dibery">dibery</a></li> +</ul> + +<h3 id="French_fr">法语（fr）</h3> + +<ul> + <li>讨论组：<a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li> + <li>目前的志愿者：<a href="https://github.com/SphinxKnight">SphinxKnight</a>，<a href="https://github.com/tristantheb">tristantheb</a>，<a href="https://github.com/JNa0">JNa0</a>，<a href="https://github.com/nicolas-goudry">nicolas-goudry</a>，<a href="https://github.com/LEMIBANDDEXARI">LEMIBANDDEXARI</a></li> +</ul> + +<h3 id="Japanese_ja">日语（ja）</h3> + +<ul> + <li>讨论组：<a href="https://mozillajp.slack.com/">Slack (#translation channel)</a>，<a href="https://github.com/mozilla-japan/translation">GitHub (mozilla-japan)</a>，<a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja">Google Group (Mozilla.translations.ja)</a></li> + <li>目前的志愿者：<a href="https://github.com/mfuji09">mfuji09</a>，<a href="https://github.com/hmatrjp">hmatrjp</a>，<a href="https://github.com/potappo">potappo</a>，<a href="https://github.com/dynamis">dynamis</a>，<a href="https://github.com/kenji-yamasaki">kenji-yamasaki</a></li> +</ul> + +<h3 id="Korean_ko">韩语（ko）</h3> + +<ul> + <li>讨论组：<a href="https://open.kakao.com/o/gdfG288c">Kakao Talk (#MDN Korea)</a></li> + <li>目前的志愿者：<a href="https://github.com/hochan222">hochan222</a>，<a href="https://github.com/yechoi42">yechoi42</a>，<a href="https://github.com/cos18">cos18</a>，<a href="https://github.com/GwangYeol-Im">GwangYeol-Im</a>，<a href="https://github.com/pje1740">pje1740</a>，<a href="https://github.com/nKiNk">nKiNk</a>，<a href="https://github.com/yujo11">yujo11</a></li> +</ul> + +<h3 id="Russian_ru">俄语（ru）</h3> + +<ul> + <li>讨论组：<a href="https://chat.mozilla.org/#/room/#mdn-l10n-ru:mozilla.org">Matrix (#mdn-l10n-ru channel)</a></li> + <li>目前的志愿者：<a href="https://github.com/armanpwnz">armanpwnz</a>，<a href="https://github.com/captainspring">captainspring</a>，<a href="https://github.com/mpstv">mpstv</a>，<a href="https://github.com/myshov">myshov</a>，<a href="https://github.com/Saionaro">Saionaro</a>，<a href="https://github.com/sashasushko">sashasushko</a>，<a href="https://github.com/lex111">lex111</a></li> +</ul> + +<div class="notecard note"> + <p><strong>提示</strong>：如果你想解冻某个语言的内容本地化工作，请先了解<a href="https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#activating-a-locale">解冻所需要的准备工作</a>。</p> +</div> + + +<h2 id="See_also">参考链接</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/mdn-localization-update-february-2021/">MDN localization update, February 2021</a>——MDN 内容本地化工作的最新进展</li> + <li><a href="https://hacks.mozilla.org/an-update-on-mdn-web-docs-localization-strategy/">An update on MDN Web Docs’ localization strategy</a>——基于社群反馈的更新模式</li> + <li><a href="https://hacks.mozilla.org/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN Web Docs evolves! Lowdown on the upcoming new platform</a>——新平台的优势，以及为何本地化工作有所改变。</li> +</ul> diff --git a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html index 15252fc83a..313dbd3a22 100644 --- a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html +++ b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html @@ -2,213 +2,268 @@ title: 常用的宏 slug: MDN/Structures/Macros/Commonly-used_macros tags: - - CSS - - 参考 - - 宏 - - 结构 +- CSS +- 参考 +- 宏 +- 结构 translation_of: MDN/Structures/Macros/Commonly-used_macros original_slug: MDN/Structures/Macros/Custom_macros --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">本页列举了许多被创建用于 MDN 的通用宏。对于使用这些宏的基础信息，见<a href="/en-US/docs/MDN/Contribute/Content/Macros">使用宏</a>和<a href="/en-US/docs/MDN/Contribute/Editor/Links#Using_link_macros">使用链接宏</a>。</span>对于不常用的，只在特定上下文或不赞成使用的宏的信息，参见<a href="/en-US/docs/MDN/Contribute/Structures/Macros/Other">其它宏</a>。这里也有一份 <a href="/en-US/docs/templates">MDN 上所有宏的完整列表</a>。</p> +<p><span class="seoSummary">本页列举了一些 MDN 中的常用宏命令。对于使用这些宏的入门信息，请阅读<a href="/zh-CN/docs/MDN/Contribute/Content/Macros">使用宏</a>这篇文章。</span>还有一些不常用或只在特定内容中适用，以及一些不赞成使用的宏的信息，参见<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Other">其它宏</a>。在我们的 GitHub Repo 中，可以找到<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">MDN 上所有宏的完整列表</a>。</p> -<p>对于适合你使用的样式，另见 <a href="/en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS 样式指南</a>。</p> +<p>对于调整页面样式相关的宏，另见 <a href="/zh-CN/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS 样式指南</a>。</p> -<h2 id="链接">链接</h2> +<h2 id="Linking">链接</h2> -<h3 id="创建一个单独的超链接">创建一个单独的超链接</h3> +<p>为了简化一些常见超链接的创建工作——如指向站内的技术参考页面、术语库以及其他主题的链接——我们提供了丰富的宏来完成这些工作</p> -<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">通常来说，你不需要使用宏来创建任意的链接。使用编辑器界面上的<strong>链接</strong>按钮创建链接。</p> +<p>我们推荐使用宏来创建这些常见的链接，这样不但简洁，对翻译工作也很友好——使用宏创建的术语库和技术参考链接不需要翻译者再做处理，这些宏可提供正确的链接，使其符合当前页面的语言。</p> -<ul> - <li>{{TemplateLink("Glossary")}} 宏创建一个链接指向 MDN <a href="/en-US/docs/Glossary">术语汇编（glossary）</a>里的一个具体的术语词条。这个宏接受一个必须的和两个可选的参数： - - <ol> - <li>术语的名称（比如 "HTML"）。</li> - <li>代替术语名称显示在文章中的文本（此项应当尽可能少地使用）。{{optional_inline}}</li> - <li>如果这个参数是明确的并且是非零的，一般用于术语汇编链接的自定义样式将不适用。{{optional_inline}}</li> - </ol> +<h3 id="Glossayr_links">链接到术语库</h3> - <p>示例：</p> +<p>正如{{TemplateLink("Glossary")}}这个宏的名字所示，它可用于创建指向 MDN 中<a + href="/zh-CN/docs/Glossary">术语库</a>内一个具体词条的链接。调用这个宏时，有一个必需的参数和一个可选参数。</p> +<ol> + <li>术语的名字，比如“HTML”。 + <ul> + <li><code>\{{Glossary("HTML")}}</code>会指向{{Glossary("HTML")}}。</li> + </ul> + </li> + <li>可选参数：使用参数中的文本内容，替代术语的名字显示在页面中。</li> <ul> - <li>\{{Glossary("HTML")}} 生成 {{Glossary("HTML")}}</li> - <li>\{{Glossary("CSS", "Cascading Style Sheets")}} 生成 {{Glossary("CSS", "Cascading Style Sheets")}}</li> - <li>\{{Glossary("HTML", "", 1)}} 生成 {{Glossary("HTML", "", 1)}}</li> + <li><code>\{{Glossary("CSS", "Cascading Style Sheets")}}</code>会指向{{Glossary("CSS", "Cascading Style Sheets")}}。 + </li> </ul> - </li> -</ul> +</ol> -<h3 id="链接到参考文档页面">链接到参考文档页面</h3> +<h3 id="Links_to_in-page_sections">链接到页内章节</h3> -<p>有各种宏用来链接到 MDN 上特定参考区域里的页面。</p> +<p>{{TemplateLink("anch")}} 可用于创建指向当前文章中其他小节的链接。它和 Glossary 有一个相同作用的可选参数可在翻译时使用。</p> <ul> - <li>{{TemplateLink("cssxref")}} 链接到 <a href="/en-US/docs/CSS_Reference" title="en-US/docs/CSS_Reference">CSS 参考</a>里的一个页面。<br> - 示例： <code>\{{cssxref("cursor")}}</code>，显示为：{{ cssxref("cursor") }} 。</li> - <li>{{TemplateLink("domxref")}} 链接到 DOM 参考里的页面；如果你在结尾列入了圆括号，这个模板会像一个函数名那样显示这个链接。例如，<span class="plain"><span class="nowiki">\{{domxref("document.getElementsByName()")}}</span></span> 显示为 {{ domxref("document.getElementsByName()") }} <code>而 \{\{domxref("Node")\}\}</code> 显示为 {{ domxref("Node") }} 。</li> - <li>{{TemplateLink("event")}} 链接到 DOM 事件参考，例如：\{{event("change")}} 显示为 {{event("change")}} 。</li> - <li>{{TemplateLink("HTMLElement")}} 链接到 HTML 参考里的一个 HTML 元素。</li> - <li>{{TemplateLink("htmlattrxref")}} 链接到一个 HTML 属性。如果你只指定属性名，它将是一个全局属性的描述。如果你指定一个属性名和一个元素名，它将是一个具体元素的一个属性名。例如，<code>\{\{htmlattrxref("lang")\}\} </code>将创建链接：{{htmlattrxref("lang")}} 。<code>\{\{htmlattrxref("type","input")\}\}</code> 将创建链接：{{htmlattrxref("type","input")}} 。</li> - <li>{{TemplateLink("jsxref")}} 链接到 <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/Web/JavaScript/Reference">JavaScript 参考</a>里的一个页面。</li> - <li>{{TemplateLink("SVGAttr")}} 链接到一个特定的 SVG 属性。例如，<code>\{\{SVGAttr("d")\}\}</code> 创建这样的链接： {{SVGAttr("d")}} 。</li> - <li>{{TemplateLink("SVGElement")}} 链接到 SVG 参考里的一个 SVG 元素。</li> + <li><code>\{{anch("Linking to pages in references","链接到 MDN 的参考文档页面")}}</code></li> + <li> + <p>实际效果：{{anch("Linking to pages in references","链接到 MDN 的参考文档页面")}}</p> + </li> </ul> -<h3 id="链接到漏洞和互联网中继聊天（IRC）">链接到漏洞和互联网中继聊天（IRC）</h3> +<h3 id="Linking_to_pages_in_references">链接到 MDN 的参考文档页面</h3> + +<p>下面列出的宏可链接到 MDN 站内不同技术领域的参考文档，如 Javascript,、CSS、HTML、elements、SVG 等。</p> + +<P>这些宏都很容易上手，大多数情况下只需一个参数——所涉及的 Web 组件的名字（如标签、对象、方法、属性等的名字）。在{{anch("Glossayrlinks","术语库")}}中提到的，可修改实际显示的文本的可选参数，也存在于下面大多数宏中。如果你想了解其他参数，表格中最左列的链接中可以查看相关宏的文档。</P> + +<table class="standard-table"> + <thead> + <tr> + <th>宏</th> + <th>所归属的主题页面</th> + <th>示例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{TemplateLink("CSSxRef")}}</td> + <td><a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考文档</a> (/Web/CSS/Reference)</td> + <td><code>\{{CSSxRef("cursor")}}</code>会指向{{CSSxRef("cursor")}}.</td> + </tr> + <tr> + <td>{{TemplateLink("DOMxRef")}}</td> + <td><a href="/zh-CN/docs/Web/API">DOM 参考文档</a> (/Web/API)</td> + <td><code>\{{DOMxRef("Document")}}</code>或<code>\{{DOMxRef("document")}}</code>都指向{{DOMxRef("Document")}}。<br> + <code>\{{DOMxRef("document.getElementsByName()")}}</code>会指向{{DOMxRef("document.getElementsByName()")}}<br> + <code>\{{DOMxRef("Node")}}</code>会指向{{DOMxRef("Node")}}. <br> + 你可以使用第二个参数控制在页面上实际显示的文本：<code>\{{DOMxRef("document.getElementsByName()","getElementsByName()")}}</code>会生成{{DOMxRef("document.getElementsByName()","getElementsByName()")}} + </td> + </tr> + <tr> + <td>{{TemplateLink("HTMLElement")}}</code> + </td> + <td><a href="/zh-CN/docs/Web/HTML/Element">HTML 元素参考文档</a> (/Web/HTML/Element)</td> + <td><code>\{{HTMLElement("select")}}</code>会指向{{HTMLElement("select")}}</td> + </tr> + <tr> + <td>{{TemplateLink("HTMLAttrxRef")}}</td> + <td>如果只指明了属性的名字，链接会跳转到 <a href="/zh-CN/docs/Web/HTML/Global_attributes">HTML 全局属性</a>页面对应属性的位置。<br/>如果同时指明 HTML 元素和属性名，则会跳转到元素页面下对应属性的位置。</td> + <td> + <code>\{{HTMLAttrxRef("lang")}} </code>会指向{{HTMLAttrxRef("lang")}}.<br /><code>\{{HTMLAttrxRef("type","input")}}</code>生成的链接则会跳转到{{HTMLElement("input")}}元素页面下的{{HTMLAttrxRef("type","input")}}属性。 + </td> + </tr> + <tr> + <td>{{TemplateLink("JSxRef")}}</td> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference">JavaScript 参考文档</a>（/Web/JavaScript/Reference）.</td> + <td><code>\{{JSxRef("Promise")}}</code>会指向{{JSxRef("Promise")}}</td> + </tr> + <tr> + <td>{{TemplateLink("SVGAttr")}}</td> + <td><a href="/zh-CN/docs/Web/SVG/Attribute">SVG 属性参考</a> (/Web/SVG/Attribute).</td> + <td><code>\{{SVGAttr("d")}}</code>会指向{{SVGAttr("d")}}</td> + </tr> + <tr> + <td>{{TemplateLink("SVGElement")}}</td> + <td><a href="/zh-CN/docs/Web/SVG/Element">SVG 元素参考</a> (/Web/SVG/Element).</td> + <td><code>\{{SVGElement("view")}}</code>会指向{{SVGElement("view")}}</td> + </tr> + <tr> + <td>{{TemplateLink("HTTPHeader")}}</td> + <td><a href="/zh-CN/docs/Web/HTTP/Headers">HTTP 消息头</a> (/Web/HTTP/Headers).</td> + <td><code>\{{HTTPHeader("ACCEPT")}}</code>会指向{{HTTPHeader("ACCEPT")}}</td> + </tr> + <tr> + <td>{{TemplateLink("HTTPMethod")}}</td> + <td><a href="/zh-CN/docs/Web/HTTP/Methods">HTTP 请求方法</a> (/Web/HTTP/Methods).</td> + <td><code>\{{HTTPMethod("HEAD")}}</code>会指向{{HTTPMethod("HEAD")}}</td> + </tr> + <tr> + <td>{{TemplateLink("HTTPStatus")}}</td> + <td><a href="/zh-CN/docs/Web/HTTP/Status">HTTP 响应代码</a> (/Web/HTTP/Status)</td> + <td><code>\{{HTTPStatus("404")}}</code>会指向{{HTTPStatus("404")}}</td> + </tr> + <tr> + <td>{{TemplateLink("event")}}</td> + <td><a href="/zh-CN/docs/Web/Events">事件参考</a> (/Web/Events)</td> + <td> + <div class="notecard note"> + <h4>注意</h4> + <p>因为事件关联在具体的元素下，这个宏不是特别有用。例如想指向 wheel 事件的页面，需要使用 + <code>\{{DOMxRef("Document.wheel_event")}}</code>：{{DOMxRef("Document.wheel_event")}} + </p> + </div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Linking_to_bugs">关联到某个 Bug</h3> <ul> - <li>漏洞 - <ul> - <li>通过使用下面的语法 {{TemplateLink("bug")}} 可以让你轻松地链接到 bugzilla.mozilla.org 上的一个漏洞（页面）：<code>\{\{Bug(123456)\}\}</code> 。这将显示：{{ Bug(123456) }} 。</li> - <li>{{TemplateLink("WebkitBug")}} 插入一条指向 WebKit 漏洞数据库中一个漏洞的链接。例如：<code>\{\{WebkitBug(31277)\}\}</code> 插入 {{ WebkitBug(31277) }} 。</li> - </ul> - </li> - <li>{{TemplateLink("IRCLink")}} 插入一条指向特定 IRC 频道的链接，它带有一个提示框标明它是做什么的以及它需要一个 IRC 客户端。</li> + <li>Bugs + <ul> + <li>通过编号，{{TemplateLink("bug")}}宏可以指向<a href="bugzilla.mozilla.org">bugzilla.mozilla.org</a>站内相应的 bug，<code>\{{Bug(123456)}}</code>会指向{{Bug(123456)}}. + </li> + <li>类似的，{{TemplateLink("WebkitBug")}}宏同样可以借助编号，指向 WebKit bug 库里对应的 bug。例如，<code>\{{WebkitBug(31277)}}</code>会指向{{WebkitBug(31277)}}. + </li> + </ul> + </li> </ul> -<h3 id="用于多页面指南的导航帮助">用于多页面指南的导航帮助</h3> +<h3 id="Navigation_aids_for_multi-page_guides">多页面间的导航栏</h3> -<p>{{TemplateLink("Previous")}}，{{TemplateLink("Next")}}，和 {{TemplateLink("PreviousNext")}} 提供导航控制用于序列中的部分文章。对于单向模板，唯一需要的参数是序列中前一篇或后一篇文章的维基（wiki）地址。对于 {{TemplateLink("PreviousNext")}}，需要两个适当的文章地址作为参数。第一个参数用于前一篇文章，而第二个用于后一篇文章。</p> +<p> + {{TemplateLink("Previous")}}、{TemplateLink("Next")}}、{{TemplateLink("PreviousNext")}}、{{TemplateLink("PreviousMenuNext")}}这几个宏可以在页面中创建导航栏，帮助读者按照文章的先后顺序阅读。其中的参数需要填入目标页面在 MDN 中的位置，你可以在页面的网址中找到所需的信息。例如 <a href="/zh-CN/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 中的继承</a>这个页面，链接地址为“https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Inheritance”，那么它在 MDN 中的位置就可以用<code>Learn/JavaScript/Objects/Object_prototypes</code>描述。</p> -<h2 id="代码示例">代码示例</h2> +<h2 id="Code_samples">代码示例</h2> -<h3 id="实样">实样</h3> +<h3 id="Live_samples">动态示例</h3> <ul> - <li>{{TemplateLink("EmbedLiveSample")}} 让你嵌入一个如<a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">实样（Live samples）</a>中描述的代码示例结果到页面上。</li> - <li>{{TemplateLink("LiveSampleLink")}} 创建一个链接指向一个包含（当前）页面上如<a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">实样</a>中描述的代码示例结果。</li> + <li>{{TemplateLink("EmbedLiveSample")}} 可嵌入一个在<a href="/zh-CN/docs/MDN/Contribute/Structures/Live_samples">动态示例</a>中描述的代码示例，到当前页面上。</li> + <li>{{TemplateLink("LiveSampleLink")}} 创建一个页面链接，其中包含如<a href="/zh-CN/docs/MDN/Contribute/Structures/Live_samples">动态示例</a>中描述的示例的结果。</li> + <li>{{TemplateLink("EmbedGHLiveSample")}} 提供了一种新的动态示例编写和使用方式，你可以在<a href="/zh-CN/docs/MDN/Structures/Code_examples#github_live_samples">Github动态示例</a>中了解更多信息。</li> </ul> -<h3 id="附上的示例文件">附上的示例文件</h3> +<h2 id="Sidebar_generation">添加侧边栏组</h2> -<ul> - <li>{{TemplateLink("Embed_text")}} 模板允许你嵌入一份附加的文本文件到你的文章主体部分中。这将有助于你让代码段既可下载又能显示在文章内容中。你可以为语法高亮选择地指定一种语言。如果你不指定一种（语言），该文本将无格式化嵌入。第一个参数是被嵌入附件的文件名；第二个（参数），如果支持的话，是用于语法高亮的语言，比如 "javascript", "svg" 或 "cpp" 。</li> - <li>{{TemplateLink("EmbedSVG")}} 嵌入一个附带 XML 文件作为一张 SVG 图像到页面当中。指定附带的 SVG 文件的文件名。你可以和 {{TemplateLink("Embed_text")}} 一同使用来展示源码和相同文件的渲染输出。</li> -</ul> - -<h2 id="侧边栏组">侧边栏组</h2> - -<p>There templates for almost every large collection of pages. 它们通常链接回参考/指南/教程的主页面（这经常被需要，因为我们的面包屑有时做不到这样）并把文章放入适当的类别中。</p> +<p>一些有海量子条目的主题，比如技术参考、指南、教程等，通常需要一个单独的主页面提供导航。对于这些主题中的页面，顶部的面包屑导航就显得比较简陋，下面这些模板，可以在页面的左侧，生成对应主题的侧边导航栏。</p> <ul> - <li>{{TemplateLink("CSSRef")}} 生成 CSS 参考页面的侧边栏。</li> - <li>{{TemplateLink("HTMLRef")}} 生成 HTML 参考页面的侧边栏。</li> - <li>{{TemplateLink("APIRef")}} 生成 Web API 参考页面的侧边栏。</li> + <li>{{TemplateLink("CSSRef")}} 生成 CSS 参考页面的侧边栏。</li> + <li>{{TemplateLink("HTMLRef")}} 生成 HTML 参考页面的侧边栏。</li> + <li>{{TemplateLink("APIRef")}} 生成 Web API 参考页面的侧边栏。</li> </ul> -<p>（译者注：通过在 background-color 页面测试，编辑页面中 "Summary" 上一行的 {{CSSRef}} 用于生成页面左侧的 CSS 参考链接的侧边栏）</p> - -<h2 id="通用格式化">通用格式化</h2> +<h2 id="General-purpose_formatting">通用的文章格式化工具</h2> -<h3 id="API_文档的行内指示器">API 文档的行内指示器</h3> +<h3 id="Inline_indicators_for_API_documentation">API 文档的行内指示器</h3> -<p>{{TemplateLink("optional_inline")}} 和 {{TemplateLink("ReadOnlyInline")}} 被用于 API 文档，通常当描述一个对象的属性或一个函数的参数的列表。</p> +<p>{{TemplateLink("optional_inline")}} 和 {{TemplateLink("ReadOnlyInline")}} 被用于 API 文档，通常可以用来描述一个对象的属性是只读的或一个函数的参数是可省略的。 +</p> -<p>用法: <code>\{{optional_inline()}}</code> 或 <code>\{{ReadOnlyInline()}} 。</code>示例：</p> +<p>用法: <code>\{{optional_inline}}</code> 或 <code>\{{ReadOnlyInline}} 。</code>示例：</p> <dl> - <dt><code>isCustomObject</code> {{ReadOnlyInline()}}</dt> - <dd>如果为真，指示该对象是一个自定义对象。</dd> - <dt>parameterX {{ optional_inline() }}</dt> - <dd>Blah blah blah...</dd> + <dt><code>isCustomObject</code> {{ReadOnlyInline}}</dt> + <dd>如果此项值为 <code>true</code>，表明该对象是一个自定义对象。</dd> + <dt>某项参数{{optional_inline}}</dt> + <dd>参数描述</dd> </dl> -<h2 id="状态和兼容性指示器">状态和兼容性指示器</h2> +<h2 id="Status_and_compatibility_indicators">状态和兼容性指示器</h2> -<h3 id="没有附加参数的行内指示器">没有附加参数的行内指示器</h3> +<h3 id="Inline_indicators_with_no_additional_parameters">无需参数的行内指示器</h3> -<h4 id="非标准的">非标准的</h4> +<h4 id="Non-standard">非标准</h4> -<p>{{TemplateLink("non-standard_inline")}} 插入一个行内标记指示当前 API 还没有被标准化，并且不在一个标准行径上。</p> +<p>{{TemplateLink("non-standard_inline")}} 指示当前 API 还没有被标准化，也没有进入标准化议程。</p> -<h5 id="语法"><strong>语法</strong></h5> +<h5 id="Syntax"><strong>语法</strong></h5> <p><code>\{{non-standard_inline}}</code></p> -<h5 id="示例">示例</h5> +<h5 id="Examples">示例</h5> <ul> - <li>图标：{{non-standard_inline}}</li> + <li>图标：{{non-standard_inline}}</li> </ul> -<h4 id="实验性的">实验性的</h4> +<h4 id="Experimental">实验性的</h4> -<p>{{TemplateLink("experimental_inline")}} 插入一个行内标记指示当前 API 没有被广泛地实现，并且在以后可能会改变。</p> +<p>{{TemplateLink("experimental_inline")}} 指示当前 API 没有被广泛支持，且将来可能会有所修改。</p> -<h5 id="语法_2">语法</h5> +<h5 id="Syntax_2">语法</h5> <p><code>\{{experimental_inline}}</code></p> -<h5 id="示例_2"><code>示例</code></h5> +<h5 id="Examples_2"><code>示例</code></h5> <ul> - <li>图标：{{experimental_inline}}</li> + <li>图标：{{experimental_inline}}</li> </ul> -<h3 id="提供明确技术的指示器">提供明确技术的指示器</h3> - -<p>在这些宏当中，其参数（在明确规定下）应该是 "html", "js", "css" 或 "gecko" 当中的一个字符串，其后跟着版本号。</p> +<h3 id="Inline_indicators_that_support_specifying_the_technology">代表明确技术参考的行内指示器</h3> -<h4 id="不赞成的">不赞成的</h4> +<h4 id="Deprecated">不赞成的</h4> -<p>{{TemplateLink("deprecated_inline")}} 插入一个不赞成的行内标记来劝阻一个官方不赞成的 API 的使用。<strong>注意：</strong>“不赞成的”表示该项不该再被使用，但是仍然可用。如果你想表示它不再起作用了，使用术语“已废弃”。</p> +<p>{{TemplateLink("deprecated_inline")}}会插入一个带有“不赞成”的行内指示器，即{{Deprecated_Inline}}。这表示不鼓励使用该 API ，或其已经被移除。</p> -<p>不要在任何浏览器不可知的区域（ HTML, APIs, JS, CSS, … ）内使用参数。</p> +<h5 id="Syntax_3">语法</h5> -<h5 id="语法_3">语法</h5> +<p><code>\{{deprecated_inline}}</code>></p> -<p><code>\{{deprecated_inline}}</code> <code>或 \{{deprecated_inline("gecko5")}}</code></p> - -<h5 id="示例_3">示例</h5> +<h5 id="Examples_3">示例</h5> <ul> - <li>图标：{{deprecated_inline}}</li> - <li>徽标：{{deprecated_inline("gecko5")}}</li> + <li>图标：{{deprecated_inline}}</li> </ul> -<h4 id="已废弃的">已废弃的</h4> - -<p>{{TemplateLink("obsolete_inline")}} 插入一个已废弃的行内标记来阻止使用，比如正式废弃的一个函数，方法或属性。</p> +<h3 id="Page_or_section_header_indicators">页面或章节头部的指示器</h3> -<p>不要在任何浏览器不可知的区域（ HTML, APIs, JS, CSS, … ）内使用参数。</p> +<p>下列指示器的含义，类似于上述的内联指示器。这些组件应直接放置在技术参考页面的标题（或面包屑导航栏）下，也可以用于标记页面上的某个小节。</p> -<h5 id="语法_4">语法</h5> +<ul> + <li>{{TemplateLink("non-standard_header")}}语法：<code>\{{Non-standard_header()}}</code> {{ Non-standard_header}}</li> -<p><code>\{{obsolete_inline}}</code> 或<code> \{{obsolete_inline("js1.8.5")}}</code></p> + <li>{{TemplateLink("SeeCompatTable")}} 对于一些介绍<a href="/zh-CN/docs/MDN/Guidelines/Conventions_definitions#experimental">实验性功能</a>的内容，应当在这些内容前放置此指示器。语法：<code>\{{SeeCompatTable}}</code> {{SeeCompatTable()}}</li> -<h5 id="示例_4">示例</h5> + <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li> -<ul> - <li>图标：{{obsolete_inline}}</li> - <li>徽标：{{obsolete_inline("js1.8.5")}}</li> + <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li> </ul> -<h3 id="模板徽标">模板徽标</h3> +<h3 id="Indicating_that_a_feature_is_available_in_web_workers">指示一个功能在 web workers 中可用</h3> -<p>这些宏大多数被用于 <a href="/en-US/docs/WebAPI">WebAPI</a> 页面。见 {{anch("Creating new badges")}} 关于创建一个新徽标的信息。</p> +<p> {{TemplateLink("AvailableInWorkers")}} 宏插入一个本地化的指示框，指示一个功能在<a href="/zh-CN/docs/Web/API/Web_Workers_API">Web worker</a>上下文中可用。它还有一个可选参数，当带有<code>notservice</code>时，表示该功能在 web worker 中可用但在 servcie worker 中不可用。</p> -<h3 id="页面或区域标头指示">页面或区域标头指示</h3> +<h5 id="Syntax_4">语法</h5> -<p>这些模板与上述内联模板具有相同的语义。 模板应直接放置在参考页面的主页标题（或面包屑导航，如果可用）的下面。 它们也可以用于标记页面上的某个部分。</p> - -<ul> - <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_header()}}</code> {{ Non-standard_header() }}</li> - <li>{{TemplateLink("SeeCompatTable")}} 应该被放置在介绍实验性功能或兼容性的区域。 示例: <code>\{{SeeCompatTable()}}</code> {{ SeeCompatTable() }}</li> - <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li> - <li>{{TemplateLink("deprecated_header")}} 搭配变量: <code>\{{deprecated_header("gecko5")}}</code> {{ Deprecated_header("gecko5") }} 不要在与浏览器无关的任何区域中使用该参数 (HTML, APIs, JS, CSS, …).</li> - <li>{{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header()}}</code> {{ Obsolete_header() }}</li> - <li>{{TemplateLink("obsolete_header")}} 搭配变量: <code>\{{obsolete_header("gecko30")}}</code> {{ Obsolete_header("gecko30") }} 不要在与浏览器无关的任何区域中使用该参数 (HTML, APIs, JS, CSS, …).</li> - <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li> -</ul> +<p>\{{AvailableInWorkers}} + \{{AvailableInWorkers("notservice")}}</p> -<h3 id="指示一个功能在Web_workers中可用">指示一个功能在Web workers中可用</h3> +<h5 id="Examples_5">Examples</h5> -<p> {{TemplateLink("AvailableInWorkers")}} 宏插入一个本地化的指示框，指示一个功能在<a href="/en-US/docs/Web/API/Web_Workers_API">Web worker</a> 上下文中可用。</p> - -<ol> -</ol> - -<ol> -</ol> +<div>{{AvailableInWorkers}} + {{AvailableInWorkers("notservice")}} +</div> diff --git a/files/zh-cn/mdn/structures/macros/index.html b/files/zh-cn/mdn/structures/macros/index.html index 4227374bac..67cd0470bd 100644 --- a/files/zh-cn/mdn/structures/macros/index.html +++ b/files/zh-cn/mdn/structures/macros/index.html @@ -11,17 +11,17 @@ translation_of: MDN/Structures/Macros --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">为了自动化执行某些工作，<a href="/zh-CN/docs/MDN/Yari">Yari</a> 平台提供了一个强大的宏系统——<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript</a>。本文提供了一些相关信息，方便你在参与编辑 MDN 时，使用这些宏。</span></p> +<p><span class="seoSummary">为了自动化执行某些工作，<a href="/zh-CN/docs/MDN/Yari">Yari</a> 平台提供了一个强大的宏系统——<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript</a>。本文提供了一些相关信息，方便你在参与编辑 MDN 时使用这些宏。</span></p> -<p>本文只是简要介绍了 KumaScript，<a href="/zh-CN/docs/MDN/Kuma/KumaScript_guide" title="/zh-CN/docs/MDN/Kuma/KumaScript_guide">KumaScript 指南</a>提供了更深入的内容，帮助你使用和掌握它。</p> +<p>本文只是简要介绍了相关内容，<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript 指南</a>提供了更深入的内容。</p> <h2 id="How_macros_are_implemented">宏是如何实现的</h2> -<p>MDN 使用宏是基于运行于服务器上的 JavaScript 代码实现的，并由 <a href="http://nodejs.org/">Node.js</a> 解释执行。在此之上，已经实现了一个丰富的工具库，让宏可以与这个平台及其中的内容进行互动。</p> +<p>MDN 使用的宏基于运行于服务器上的 JavaScript 代码来实现，并由 <a href="http://nodejs.org/">Node.js</a> 解释执行。在此之上，已经实现了一个丰富的工具库，让宏可以与这个平台以及其中的内容进行交互。</p> <h2 id="Using_a_macro_in_content">在文章中使用宏</h2> -<p>要实际使用宏，只需将对宏的调用和可能需要的参数写在一对双括号中，如下：</p> +<p>要在文章中实际使用宏，只需将对宏的调用和可能需要的参数写在一对双括号中，如下：</p> <pre class="notranslate">\{{macroname(parameter-list)}}</pre> @@ -30,13 +30,13 @@ translation_of: MDN/Structures/Macros <ul> <li>宏的名称区分大小写，但一些常见的大小写错误也可以在执行时被纠正。比如将某个名称中含有大写的宏，全部使用小写字母，或者将某些名字以小写开头的宏大写。</li> <li>参数以逗号分隔。</li> - <li>如果没有参数，括号可以省略：<code>\{{macroname()}}</code> 和 <code>\{{macroname}}</code> 的效果是。</li> - <li>数字参数可以是引号，也可以不是。这取决于您（但是，像版本号这类可能被识别成小数的参数，则包含在引号中）</li> + <li>如果没有参数，括号可以省略：<code>\{{macroname()}}</code> 和 <code>\{{macroname}}</code> 的作用是相同的。</li> + <li>数字参数是否放在引号中，一般没有区别。但是，像版本号（如1.2.3）这类可能被识别成小数的参数，则需包含在引号中。</li> <li>如果遇到错误，请先仔细检查代码。如果仍然无法弄清楚发生了什么，请参阅<a href="/zh-CN/docs/MDN/Tools/KumaScript/Troubleshooting">排查 KumaScript 中的错误</a>以获取帮助。</li> </ul> -<p>宏的几乎所有执行结果都会被缓存，以便被重用来加快执行速度。这意味着宏仅在输入发生变化时才实际运行，包括调用时的参数以及环境值（例如这个宏被调用时所在的路径）。</p> +<p>宏的几乎所有执行结果都会被缓存，以便被重用并加快执行速度。这意味着宏仅在输入发生变化时才实际运行，包括调用时的参数以及环境值（例如调用这个宏的文章所在的路径）。</p> -<p>宏既可以用来做一些简单的工作，比如插入更大的文本块或从MDN的另一部分交换内容一样简单，也可以通过搜索站点的各个部分，设置输出样式和添加链接来构建整个内容索引。</p> +<p>宏既可以用来做一些简单的工作，比如插入更大的文本块或用 MDN 的替换文章中的内容。也可以通过搜索站点的各个部分，设置输出样式和添加链接来构建整个内容索引。</p> -<p>您可以在<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">常用的宏</a>页面看到一些我们最常用到的宏，还可以在我们 Github 的仓库中，浏览<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">所有可用的宏</a>。大多数宏顶部的注释中，都有内置的文档帮助你了解它的作用。</p> +<p>你可以在<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">常用的宏</a>页面看到一些我们最常用到的宏，还可以在我们 Github 的仓库中，浏览<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">所有可用的宏</a>。大多数宏顶部的注释中，都有内置的文档帮助你了解它的作用。</p> diff --git a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html index 88971977ae..501af7897a 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization <h2 id="剖析一个国际化的_WebExtension">剖析一个国际化的 WebExtension</h2> -<p>一个国际化的 WebExtension 与其他 WebExtension 一样可以包含各类功能，如<a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">后台脚本</a>、<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">内容脚本</a>等，但它也有些额外的部分，从而允许它适应不同的语言区域。目录树大致如下：</p> +<p>一个国际化的 WebExtension 与其他 WebExtension 一样可以包含各类功能，如<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#后台脚本">后台脚本</a>、<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">内容脚本</a>等，但它也有些额外的部分，从而允许它适应不同的语言区域。目录树大致如下：</p> <ul class="directory-tree"> <li>webextension-根目录/ @@ -65,7 +65,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization <h2 id="在__locales_中提供本地化的字符串">在 _locales 中提供本地化的字符串</h2> <div class="pull-aside"> -<div class="moreinfo">你可以使用<a href="http://r12a.github.io/apps/subtags/">Language subtag lookup page</a>上的查找工具查询语言子标签。请注意，你需要搜索语言的英语名称。</div> +<div class="moreinfo">你可以使用<a href="https://r12a.github.io/app-subtags/">Language subtag lookup page</a>上的查找工具查询语言子标签。请注意，你需要搜索语言的英语名称。</div> </div> <p>每个 i18n 系统都需要你提供想支持的各语言区域的已翻译字符串。 在 WebExtensions 中，这些字符串放在一个名为 <code>_locales</code> 的目录中，<code>_locales</code> 目录则位于扩展的根目录。每个语言区域都有一个名叫 <code>messages.json</code> 的文件，其中包含相应的字符串（在 WebExtension 中称作“消息”），这个文件放在 <code>_locales</code> 的子目录下，子目录以对应语言区域的语言子标签来命名。</p> @@ -303,8 +303,13 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <tbody> <tr> <td><code>@@extension_id</code></td> - <td>扩展或应用的 ID；你可以使用该字符串构建 URL，用于扩展内部的资源。甚至未本地化的扩展也可以使用该消息。<br> - <strong>注意：</strong>该消息无法在 manifest 文件中使用。</td> + <td> + <p>扩展的 UUID。你可以使用该字符串构建 URL，用于扩展内部的资源。甚至未本地化的扩展也可以使用该消息。</p> + + <p>该消息无法在 manifest 文件中使用。</p> + + <p>此外，此 ID <em>不是</em> {{WebExtAPIRef("runtime.id")}} 返回的附加组件 ID，附加组件 ID 可以使用 manifest.json 中的 <a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">applications</a> 键进行设置。这是生成的、出现在附加组件 URL 中的 UUID。这意味着你不能将此值用作 {{WebExtAPIRef("runtime.sendMessage()")}} 的 <code>extensionId</code> 参数，也不能使用它检查 {{WebExtAPIRef("runtime.MessageSender")}} 对象的 id 属性。</p> + </td> </tr> <tr> <td><code>@@ui_locale</code></td> @@ -367,7 +372,7 @@ padding-left: 1.5em;</pre> <h2 id="测试你的_WebExtension">测试你的 WebExtension</h2> -<p>从 Firefox 45 开始，你可以临时安装磁盘上的 WebExtensions — 另见<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk">从磁盘加载。</a>按上述步骤操作，然后尝试我们的 <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> WebExtension。访问你喜欢的任何网站，然后点一下链接，查看是否有通知出现来显示所点击的链接网址。</p> +<p>从 Firefox 45 开始，你可以临时安装磁盘上的 WebExtensions — 另见<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation#loading_from_disk">从磁盘加载。</a>按上述步骤操作，然后尝试我们的 <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> WebExtension。访问你喜欢的任何网站，然后点一下链接，查看是否有通知出现来显示所点击的链接网址。</p> <p>接下来，将 Firefox 的语言区域更改为你想测试的扩展支持的某个语言区域。</p> diff --git a/files/zh-cn/mozilla/firefox/releases/3.6/index.html b/files/zh-cn/mozilla/firefox/releases/3.6/index.html index 920c40fa26..a0b87cca2a 100644 --- a/files/zh-cn/mozilla/firefox/releases/3.6/index.html +++ b/files/zh-cn/mozilla/firefox/releases/3.6/index.html @@ -3,7 +3,7 @@ title: Firefox 3.6 for developers slug: Mozilla/Firefox/Releases/3.6 translation_of: Mozilla/Firefox/Releases/3.6 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html index 1202baaa23..a6eac54159 100644 --- a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html @@ -6,7 +6,7 @@ tags: translation_of: Mozilla/Firefox/Releases/3/Updating_extensions original_slug: Updating_extensions_for_Firefox_3 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html index 2f704dff7f..e8117f3603 100644 --- a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html @@ -1,136 +1,214 @@ --- -title: ARIA techniques +title: '使用 ARIA：角色、状态和属性' slug: Web/Accessibility/ARIA/ARIA_Techniques tags: - - ARIA - - Accessibility - - NeedsTranslation - - TopicStub +- ARIA +- 可访问性 +- 无障碍 +- Overview +- Reference translation_of: Web/Accessibility/ARIA/ARIA_Techniques --- -<h3 id="Roles">Roles</h3> - -<h4 id="Widget_roles">Widget roles</h4> - -<ul> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li> - <li>Marquee</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li> - <li>Scrollbar</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> - <li>Spinbutton</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> - <li>Timer</li> - <li>Tooltip</li> -</ul> - -<h4 id="Composite_roles">Composite roles</h4> - -<p>The techniques below describes each composite role as well as their required and optional child roles.</p> - -<ul> - <li>Grid (including row, gridcell, rowheader, columnheader roles)</li> - <li>Menubar/ Menu (including menuitem, menuitemcheckbox, menuitemradio)</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (包含 option role)</li> - <li>Tablist (包含 tab 和 tabpanel roles)</li> - <li>Tree (including group and treeitem roles)</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li> - <li>Treegrid</li> -</ul> - -<h4 id="Document_structure_roles">Document structure roles</h4> - -<ul> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li> - <li>Definition</li> - <li>Directory</li> - <li>Document</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li> - <li>Heading</li> - <li>Img</li> - <li>List, listitem</li> - <li>Math</li> - <li>Note</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li> - <li>Region</li> - <li>Separator</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li> -</ul> - -<h4 id="Landmark_roles">Landmark roles</h4> - -<ul> - <li>Application</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li> - <li>Complementary</li> - <li>Contentinfo</li> - <li>Form</li> - <li>Main</li> - <li>Navigation</li> - <li>Search</li> -</ul> - -<h3 id="States_and_properties">States and properties</h3> - -<h4 id="Widget_attributes">Widget attributes</h4> - -<ul> - <li>aria-autocomplete</li> - <li>aria-checked</li> - <li>aria-disabled</li> - <li>aria-expanded</li> - <li>aria-haspopup</li> - <li>aria-hidden</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> - <li>aria-level</li> - <li>aria-multiline</li> - <li>aria-multiselectable</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> - <li>aria-pressed</li> - <li>aria-readonly</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> - <li>aria-selected</li> - <li>aria-sort</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> -</ul> - -<h4 id="Live_region_attributes">Live region attributes</h4> - -<ul> - <li>aria-live</li> - <li>aria-relevant</li> - <li>aria-atomic</li> - <li>aria-busy</li> -</ul> - -<h4 id="Drag_drop_attributes">Drag & drop attributes</h4> - -<ul> - <li>aria-dropeffect</li> - <li>aria-dragged</li> -</ul> - -<h4 id="Relationship_attributes">Relationship attributes</h4> - -<ul> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> - <li>aria-controls</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> - <li>aria-flowto</li> - <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> - <li>aria-owns</li> - <li>aria-posinset</li> - <li>aria-setsize</li> -</ul> + +<p>ARIA 定义了可以应用于元素的语义，这些语义分为 <strong>roles</strong>（定义一种用户界面元素）、<strong>states</strong> 和 <strong>properties</strong>，这些都是角色所支持的。作者必须在元素的生命周期中为其分配一个 ARIA 角色和适当的状态和属性，除非该元素已经具有适当的 ARIA 语义（通过使用适当的 HTML 元素）。添加 ARIA 语义只会向浏览器的可访问性 API 公开额外信息，而不会影响页面的 DOM。</p> + +<h2 id="Roles">角色</h2> + +<h3 id="Widget_roles">组件角色</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">gridcell</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role">link</a></li> + <li>menuitem</li> + <li>menuitemcheckbox</li> + <li>menuitemradio</li> + <li>option</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li> + <li>scrollbar</li> + <li>searchbox</li> + <li>separator (when focusable)</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li> + <li>spinbutton</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li> + <li>treeitem</li> + </ul> +</div> + +<h3 id="Composite_roles">复合角色</h3> + +<p>下面的技术描述了每个复合角色及其必需和可选的子角色。</p> + +<div class="index"> + <ul> + <li>combobox</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (包含 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">gridcell</a>, rowheader, columnheader)</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a> (包含 option)</li> + <li>menu</li> + <li>menubar</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup</a> (参考 radio)</li> + <li>tablist (包含 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> 和 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li> + <li>tree</li> + <li>treegrid</li> + </ul> +</div> + +<h3 id="Document_structure_roles">文档结构角色</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li> + <li>columnheader</li> + <li>definition</li> + <li>directory</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li> + <li>feed</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li> + <li>math</li> + <li>none</li> + <li>note</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li> + <li>rowheader</li> + <li>separator</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li> + <li>term</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li> + <li>tooltip</li> + </ul> +</div> + +<h3 id="Landmark_roles">具有里程碑意义的角色</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li> + </ul> +</div> + +<h3 id="Live_Region_Roles">实时区域角色</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role">log</a></li> + <li>marquee</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role">status</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li> + </ul> +</div> + +<h3 id="Window_Roles">窗口角色</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li> + </ul> +</div> + +<h2 id="States_and_properties">状态和属性</h2> + +<h3 id="Widget_attributes">组件属性</h3> + +<div class="index"> + <ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-current</li> + <li>aria-disabled</li> + <li>aria-errormessage</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute">aria-invalid</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-modal</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-placeholder</li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> + </ul> +</div> + +<h3 id="Live_region_attributes">实时区域属性</h3> + +<div class="index"> + <ul> + <li>aria-live</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> + <li>aria-atomic</li> + <li>aria-busy</li> + </ul> +</div> + +<h3 id="Drag_drop_attributes">拖放属性</h3> + +<div class="index"> + <ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> + </ul> +</div> + +<h3 id="Relationship_attributes">关系属性</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute">aria-activedescendant</a></li> + <li>aria-colcount</li> + <li>aria-colindex</li> + <li>aria-colspan</li> + <li>aria-controls</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Annotations#associating_annotated_elements_with_their_details">aria-details</a></li> + <li>aria-errormessage</li> + <li>aria-flowto</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-rowcount</li> + <li>aria-rowindex</li> + <li>aria-rowspan</li> + <li>aria-setsize</li> + </ul> +</div> + +<h3 id="MicrosoftEdge-specific_properties">MicrosoftEdge 特定的属性</h3> + +<div class="index"> + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li> + </ul> +</div> diff --git a/files/zh-cn/web/accessibility/aria/index.html b/files/zh-cn/web/accessibility/aria/index.html index da650a78f6..b59dc1e7ca 100644 --- a/files/zh-cn/web/accessibility/aria/index.html +++ b/files/zh-cn/web/accessibility/aria/index.html @@ -3,175 +3,123 @@ title: ARIA slug: Web/Accessibility/ARIA tags: - ARIA - - Accessibility - - NeedsTranslation - - TopicStub + - 可访问性 + - 无障碍 + - HTML translation_of: Web/Accessibility/ARIA --- -<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。</p> -<p>ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。</p> +<p><strong>ARIA</strong> (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。</p> -<p>ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。</p> +<p>它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。</p> -<p>ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。</p> - -<div class="blockIndicator warning"> -<p>这些小部件中的许多后来被合并到HTML5中，如果存在这样的元素，<strong>开发人员应该更倾向使用对应的语义化HTML元素，而不是使用ARIA</strong>。例如，原生元素具有内置的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用ARIA，您有责任在脚本中模仿(等效的)浏览器行为。</p> +<div class="notecard warning"> + <p>许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，<strong>开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA</strong>。例如，原生元素具有内置的<a href="/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模仿（等效）浏览器行为。</p> </div> +<p>这是进度条小部件的标记：</p> -<p>下面是一段进度条组件的代码：</p> - -<pre class="brush: html notranslate"><code><div id="percent-loaded" role="progressbar" aria-valuenow="75" - aria-valuemin="0" aria-valuemax="100" /></code> +<pre class="brush: html"><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100"> +</div> </pre> -<p>由于这个滚动条是用<code><div></code>写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，这些是通过向元素添加属性来指定的。举个例子，<code>role="progressbar"</code>这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。<code>aria-valuemin </code>和<code>aria-valuemax</code> 属性表明了进度条的最小值和最大值。 <code>aria-valuenow</code>则描述了当前进度条的状态， 因此它得用JavaScript来更新。</p> +<p>这个进度条是使用 {{HTMLElement("div")}} 构建的，它没有任何意义。不幸的是，HTML 4 中没有更多语义标签可供开发人员使用，因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中， <code>role="progressbar"</code> 属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。 <code>aria-valuemin</code> 和 <code>aria-valuemax</code> 属性指定进度条的最小值和最大值，<code>aria-valuenow</code> 描述进度条的当前状态和因此必须使用 JavaScript 保持更新。</p> -<p>除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示：</p> +<p>除了将它们直接放置在元素中之外，还可以将 ARIA 属性添加到元素中，并使用 JavaScript 代码动态更新，如下所示：</p> -<pre class="brush: js notranslate"><code>// Find the progress bar <div> in the DOM. - var progressBar = document.getElementById("percent-loaded");</code> +<pre class="brush: js">// Find the progress bar <div> in the DOM. +var progressBar = document.getElementById("percent-loaded"); -<code>// Set its ARIA roles and states, -// so that assistive technologies know what kind of widget it is.</code> - progressBar.setAttribute("role", "progressbar"); - progressBar.setAttribute("aria-valuemin", 0); - progressBar.setAttribute("aria-valuemax", 100); +// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is. +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); // Create a function that can be called at any time to update // the value of the progress bar. - function updateProgress(percentComplete) { - progressBar.setAttribute("aria-valuenow", percentComplete); - } - -</pre> +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +}</pre> -<div class="note"> -<p>注意由于ARIA是在HTML4之后引入的，所以在HTML4或XTHML中没有提供验证。然而，它提供的可访问性收益远远超过任何技术上的无效性。</p> +<div class="notecard note"> + <p>请注意，ARIA 是在 HTML4 之后发明的，因此无法在 HTML4 或其 XHTML 变体中进行验证。然而，它提供的可访问性收益远远超过任何技术无效性。</p> -<p>在HTML5中，所有的ARIA属性都是有效的。新的标记元素（<code><main></code>, <code><header></code>, <code><nav></code>等）都已具有了ARIA角色，所以就没必要再标注说明了。</p> + <p>在 HTML5 中，所有 ARIA 属性都经过验证。新的地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。</p> </div> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h3 id="Documentation" name="Documentation">ARIA 入门</h3> - - <dl> - <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA 介绍</a></dt> - <dd>关于借助 ARIA 使得动态内容可访问的快速介绍。也可参考经典的 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA 介绍 - Gez Lemon</a>，2008 年。</dd> - <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web 应用与 ARIA FAQ</a></dt> - <dd>解答关于WAI-ARIA的问题并且解释为什么网站需要ARIA。</dd> - <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">在视频频和屏幕阅读器使用 ARIA</a></dt> - <dd>从网上看到真实和简单的例子，包括“before”和“after”ARIA视频。</dd> - <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">在 HTML 使用 ARIA</a></dt> - <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.一份为开发人员提供实用指南。它建议一些基于基于执行的在HTML元素上使用哪些ARIA属性。</dd> - </dl> - - <h3 id="ARIA_初级进阶">ARIA 初级进阶</h3> - - <dl> - <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">通过ARIA标签增强页面导航</a></dt> - <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd> - <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">提高表单可访问性</a></dt> - <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd> - <dt><a class="external" href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA 活动区域 </a></dt> - <dd>活动区域为屏幕阅读器提供关于如何处理一个页面内容变更的建议。</dd> - <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">用ARIA 活动区域去通知内容的改变</a></dt> - <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd> - </dl> - - <h3 id="ARIA_与脚本组件">ARIA 与脚本组件</h3> - - <dl> - <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘导航与组件焦点</a></dt> - <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd> - <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt> - <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd> - </dl> - - <h3 id="ARIA_资源">ARIA 资源</h3> - - <dl> - <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt> - <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd> - <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt> - <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd> - <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt> - <dd>Includes slide presentations and examples.</dd> - </dl> - </td> - <td> - <h3 id="Community" name="Community">邮件列表</h3> - - <dl> - <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt> - <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd> - </dl> - - <h3 id="Community" name="Community">博客</h3> - - <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p> - - <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> - - <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> - - <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p> - - <h3 id="提交_Bug">提交 Bug</h3> - - <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p> - - <h3 id="示例">示例</h3> - - <dl> - <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA 示例库</a></dt> - <dd>A set of barebones example files which are easy to learn from.</dd> - <dt><span class="external">可访问的 JS 组件库演示</span></dt> - <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd> - </dl> - - <dl> - <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! 邮箱</a></dt> - <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd> - </dl> - - <dl> - <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! 搜索</a></dt> - <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd> - </dl> - - <h3 id="规范特性">规范特性</h3> - - <dl> - <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt> - <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd> - <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt> - <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd> - <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> - <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br> - <br> - For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd> - <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> - <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd> - <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt> - <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd> - </dl> - </td> - </tr> - </tbody> - <tbody> - <tr> - <td colspan="2"> - <h3 id="Related_Topics" name="Related_Topics">相关主题</h3> - - <dl> - <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd> - </dl> - </td> - </tr> - </tbody> -</table> +<h2 id="Support">支持</h2> + +<p>与任何其他 Web 技术一样，对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器，以及与之交互的辅助技术类型。此外，操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。</p> + +<p>同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件，因为害怕失去与他们的计算机和浏览器交互的能力。因此，尽可能对 <a href="/zh-CN/docs/Learn/Accessibility/HTML">使用语义化的 HTML 元素</a> 很重要，因为语义 HTML 对辅助技术的支持要好得多。</p> + +<p>使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样，代理辅助技术解决方案不足以完全保证功能。</p> + +<h2 id="Tutorials">教程</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">ARIA 简介</a></dt> + <dd>快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 <a href="https://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>。</dd> + <dt><a href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of screen readers using ARIA</a></dt> + <dd>查看来自网络的真实和简化示例，视频包括 ARIA “之前”和 ARIA“之后”。</dd> + <dt><a href="https://w3c.github.io/using-aria/">Using ARIA</a></dt> + <dd>开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。</dd> +</dl> + +<h2 id="Simple_ARIA_enhancements">简单的 ARIA 增强</h2> + +<dl> + <dt><a href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Enhancing page navigation with ARIA landmarks</a></dt> + <dd>使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 <a href="https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">ARIA landmark implementation notes</a> 和真实站点上的示例（截至 2011 年 7 月更新）。</dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/forms">Improving form accessibility</a></dt> + <dd>ARIA 不仅适用于动态内容！了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。</dd> +</dl> + +<h2 id="ARIA_for_Scripted_Widgets">脚本小部件的 ARIA</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">编写可通过键盘导航的 JavaScript 小部件</a></dt> + <dd>{{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些，则必须确保您的小部件可通过键盘访问。</dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">实时区域</a></dt> + <dd>实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。</dd> + <dt><a href="https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to announce content changes</a></dt> + <dd>JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。</dd> +</dl> + +<h2 id="References">参考文献</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles">ARIA Roles</a></dt> + <dd>参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。</dd> +</dl> + +<h2 id="Standardization_Efforts">标准化工作</h2> + +<dl> + <dt><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA Specification</a></dt> + <dd>W3C 规范本身。</dd> + <dt><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a></dt> + <dd><p>官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。</p></dd> +</dl> + +<h2 id="Videos">视频</h2> + +<p>以下演讲是了解 ARIA 的好方法：</p> + +<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p> + +<h2 id="Filing_Bugs">提交错误</h2> + +<p><a href="/zh-CN/docs/Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs">在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。</a></p> + +<h2 id="Related_Topics">相关话题</h2> + +<p><a href="/zh-CN/docs/Web/Accessibility">Accessibility</a>, <a href="/zh-CN/docs/Web/Guide/AJAX">AJAX</a>, <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a></p> + +<section id="Quick_links"> + <ol> + <li><a href="/zh-CN/docs/Web/Guide">网页开发</a></li> + <li><a href="/zh-CN/docs/Mozilla/Accessibility">Mozilla 的可访问性</a></li> + </ol> +</section> diff --git a/files/zh-cn/web/accessibility/aria/roles/index.html b/files/zh-cn/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..e32d5a1038 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/index.html @@ -0,0 +1,86 @@ +--- +title: WAI-ARIA Roles +slug: Web/Accessibility/ARIA/Roles +tags: +- ARIA +- ARIA Roles +- 可访问性 +- 无障碍 +- Reference +- Roles +translation_of: Web/Accessibility/ARIA/Roles +--- +<p>此页面列出了涵盖 MDN 上讨论的所有 WAI-ARIA 角色的参考页面。有关角色的完整列表，请参阅 <a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA 技术</a></p> + +<p>{{SubpagesWithSummaries}}</p> + +<div class="hidden"> + <p>请通过在 Role 名称后添加您的姓名来声明您想要从事的 Role：（旧页面从 <a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a> 链接）。已完成初稿的已从以下列表中删除。</p> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">Gridcell</a> (Eric E)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li> + </ul> +</div> + + +<section id="Quick_links"> + <ol> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.html b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html new file mode 100644 index 0000000000..788446c200 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html @@ -0,0 +1,122 @@ +--- +title: 'ARIA: list role' +slug: Web/Accessibility/ARIA/Roles/List_role +tags: +- ARIA +- ARIA Role +- ARIA list +- 可访问性 +- 无障碍 +- Reference +- Role +- list +--- +<p>ARIA <code>list</code> 角色可用于标识项目列表。它通常与 <code>listitem</code> 角色结合使用，该角色用于标识包含在列表中的列表项。</p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">List item 1</div> + <div role="listitem">List item 2</div> + <div role="listitem">List item 3</div> +</section> +</pre> + +<h2 id="Description">描述</h2> + +<p>任何由外部容器和内部元素列表组成的内容都可以分别使用 <code>list</code> 和 <code>listitem</code> 容器识别为辅助技术。一个 <code>list</code> 必须有一个或多个 <code>listitem</code> 子级，或者，有一个或多个 <code>group</code> 作为子级，每个 <code>group</code>有一个或多个 <code>listitem</code> 作为子项。</p> + +<p>关于应该使用哪些元素来标记 <code>list</code> 和 <code>listitem</code> 没有硬性规定，但是您应该确保 <code>listitem</code> 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。</p> + +<div class="notecard warning"> + <h4>警告</h4> + <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></dt> + <dd><p>列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 <code>list</code> 或 <code>group</code> 的元素中找到。</p></dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></dt> + <dd><p>相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。</p></dd> +</dl> + +<h3 id="Keyboard_Interactions">键盘交互</h3> + +<p>无</p> + +<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3> + +<p>无</p> + +<h2 id="Examples">示例</h2> + +<p><a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara 的一些有用的例子和想法</p> + +<h2 id="Best_practices">最佳实践</h2> + +<p>仅在必要时使用 <code>role="list"</code> 和 <code>role="listitem"</code>。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。</p> + +<p>与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA <code>list</code> 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：</p> + +<pre class="brush: html"><ul> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ul></pre> + +<p>或者如果列表项的顺序很重要，则使用有序列表：</p> + +<pre class="brush: html"><ol> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ol></pre> + +<div class="notecard note"> + <h4>注意</h4> + <p>ARIA <code>list</code> / <code>listitem</code> 角色不区分有序列表和无序列表。</p> +</div> + +<p>顺便说一句，请注意，如果您使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role"><code>presentation</code></a> 角色，则每个子 <code>li</code> 元素都会继承 <code>presentation</code> 角色，因为 ARIA 需要 <code>listitem</code> 元素具有父 <code>list</code> 元素。因此，<code>li</code> 元素不会暴露给辅助技术，但是包含在这些 <code>li</code> 元素中的元素，包括嵌套列表，对辅助技术是可见的。</p> + +<div class="notecard note"> + <h4>注意</h4> + <p>如果要标记将用作选项卡式界面的项目列表，则应改为使用 <code>tab</code>、<code>tabpanel</code> 和 <code>tablist</code> 角色。</p> +</div> + +<h2 id="Specifications">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#list","list")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support">屏幕阅读器支持</h2> + +<p>TBD</p> + +<h2 id="See_also">相关链接</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: listitem role</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role">ARIA: group role</a></li> +</ul> + +<section id="Quick_links"> + <ol> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> diff --git a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html new file mode 100644 index 0000000000..7c48e3add6 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html @@ -0,0 +1,220 @@ +--- +title: 'ARIA: listbox role' +slug: Web/Accessibility/ARIA/Roles/listbox_role +tags: + - ARIA + - 可访问性 + - 无障碍 +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +--- +<p><code>listbox</code> 角色用于列表，用户可以从中选择一个或多个静态选项，并且与 HTML {{HTMLElement("select")}} 元素不同，它可能包含图像。</p> + +<h2 id="Description">描述</h2> + +<p><code>listbox</code> 角色用于标识创建列表的元素，用户可以从中选择一个或多个静态选项，类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同，<code>listbox</code> 可以包含图像。<code>listbox</code> 的每个子项都应该有一个 <a href="https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option"><code>option</code></a> role。</p> + +<p>强烈建议使用 HTML {{HTMLElement("select")}} 元素，如果只能选择一个选项，则使用一组单选按钮，如果可以选择多个选项，则使用一组复选框，因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为您提供相关的功能。</p> + +<p>具有 <code>listbox</code> 角色的元素含有隐式的 <code>aria-orientation</code> 和 <code>vertical</code> 值。</p> + +<p>当一个列表被 tab 聚焦到时，如果没有其他内容，将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航，按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航（相同的字母指向以那个开头的每个选项，不同的字母指向以整个字符串开头的第一个选项）。如果当前选项有关联的菜单， Shift+F10 将启动该菜单。如果项目可被勾选，Space 可用于切换 <a href="https://www.w3.org/TR/wai-aria-practices/#checkbox"><code>checkbox</code></a> role。对于可选择的列表项，Space 切换它们的选择，Shift+Space 可用于选择连续的项目，Ctrl+方向键 移动而不选择， Ctrl+Space 可用于选择非连续的项目。建议使用 checkbox、link 或其他方法来选择所有项目，为此可以使用 Ctrl+A 作为快捷键。</p> + +<p>当 listbox 角色被添加到元素中，或含有它的元素变得可见时，屏幕阅读器会在 listbox 获得焦点时读出它的 label 和 role。如果列表中的 option 或选项获得焦点，则接下来会读出它，如果屏幕阅读器支持，则会在列表中指示选项的位置。当焦点在列表中移动时，屏幕阅读器会读出相关选项。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties">相关的 ARIA 角色、状态和属性</h3> + +<h4 id="Associated_Roles">相关角色</h4> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role">option</a></dt> + <dd>需要一个或多个嵌套的 <code>option</code>。 所有被选择的选项都含有 <code>aria-selected</code> 且值为 <code>true</code>。所有未选中的选项都含有 <code>aria-selected</code> 且值为 <code>false</code>。 如果某个选项不可选择，<code>aria-selected</code> 会被忽略。</dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd>包含 <code>listitem</code> 元素的部分</dd> +</dl> + +<h4 id="States_and_Properties">状态和属性</h4> + +<dl> + <dt>aria-activedescendant</dt> + <dd>保存 listbox 中当前活动元素的 <code>id</code> 字符串。如果这是一个 option 元素，那么这将是最近与之交互选项的 <code>id</code>，无论该选项是否具有值为 <code>true</code> 的 <code>aria-selected</code>。即使在多选列表框中，也只会有一个 <code>id</code>。如果 <code>id</code> 不引用 listbox 的 DOM 后代，则 <code>id</code> 必须包含在 <code>aria-owns</code> 属性中的 ID 中。</dd> + <dt>aria-owns</dt> + <dd>这是一个以空格分隔的元素 ID 列表，它们不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 <code>aria-owns</code> 属性中。</dd> + <dt>aria-multiselectable</dt> + <dd>如果用户可以选择多个选项，则存在并设置为 <code>true</code>。如果设置为 <code>true</code>，<em>每个</em> 可选的选项都应包含 <code>aria-selected</code> 属性并设置为 <code>true</code> 或 <code>false</code>。 <em>不可选</em>的选项<em>不应该</em>具有<code>aria-selected</code>属性。</dd> + <dd>如果值为 <code>false</code> 或被省略，那么仅当前选中的选项（如果有任何选项被选中）才需要<code>aria-selected</code>属性，而且必须设置为<code>true</code>。</dd> + <dt>aria-required</dt> + <dd>一个布尔属性，指示必须选择具有非空字符串值的选项。</dd> + <dt>aria-readonly</dt> + <dd>用户无法更改选择或取消选择，但 listbox 是可操作的。</dd> + <dt>aria-label</dt> + <dd>一个可供人类阅读的字符串，用于标识 listbox。如果有可见标签，则应使用 <code>aria-labelledby</code> 来引用该标签。</dd> + <dt>aria-labelledby</dt> + <dd>标识以空格分隔的元素 ID 列表中的一个或多个可见元素，这些元素标识 listbox。如果没有可见标签，则应该使用 <code>aria-label</code> 来包含标签。 （注意：带有两个 L 的 "labelled" 是基于辅助功能 API 约定的正确拼写。）</dd> + <dt>aria-roledescription</dt> + <dd>一个可供人类阅读的字符串，可以更清楚地标识 listbox 的作用。屏幕阅读器通常会在阅读标签（如果存在）后向用户阅读此值，而不是说 “listbox”。</dd> +</dl> + +<p>（有关更多详细信息以及 ARIA 状态和属性的完整列表，请参阅 <a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA <code>listbox</code> (role)</a> 文档。 )</p> + +<h3 id="Keyboard_interactions">键盘交互</h3> + +<ul> + <li>当单选 listbox 获得焦点时： + <ul> + <li>如果在 listbox 获得焦点之前没有选择任何选项，则第一个选项将获得焦点。（可选）可以自动选择第一个选项。</li> + <li>如果在列表框获得焦点之前选择了一个选项，则焦点将设置在所选选项上。</li> + </ul> + </li> + <li>当多选 listbox 获得焦点时： + <ul> + <li>如果在列表框获得焦点之前没有选择任何选项，则焦点将设置在第一个选项上，并且选择状态不会自动更改。</li> + <li>如果在列表框获得焦点之前选择了一个或多个选项，则焦点将设置在列表中选定的第一个选项上。</li> + </ul> + </li> + <li><kbd>Down Arrow</kbd>: 将焦点移至下一个选项。（可选）在单选 listbox 中，选中的值也可以随焦点移动。</li> + <li><kbd>Up Arrow</kbd>: 将焦点移至上一个选项。（可选）在单选 listbox 中，选中的值也可以随焦点移动。</li> + <li><kbd>Home</kbd> (可选): 将焦点移至第一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。</li> + <li><kbd>End</kbd> (可选): 将焦点移至最后一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。</li> + <li>建议所有 listbox 都预先输入，尤其是那些有七个以上选项的列表框： + <ul> + <li>键入字符时：焦点移至名称符合键入的字符开头的一项。</li> + <li>快速连续键入多个字符时：焦点移至名称符合键入的字符串开头的一项。</li> + </ul> + </li> + <li><strong>多项选择</strong>: 作者可以实现两种交互模型中的任何一种来支持多选：推荐模型，不需要用户在导航列表时按住修饰键，例如 <kbd>Shift</kbd> 或 <kbd>Control</kbd> 或者需要在导航时按住修饰键以避免丢失选择状态的替代模型。 + <ul> + <li>推荐的选择模型——不需要按住修饰键： + <ul> + <li><kbd>Space</kbd>: 更改焦点选项的选择状态。</li> + <li><kbd>Shift + Down Arrow</kbd> （可选）: 将焦点移动并切换到下一个选项的选定状态。</li> + <li><kbd>Shift + Up Arrow</kbd> （可选）: 将焦点移动并切换到上一个选项的选定状态。</li> + <li><kbd>Shift + Space</kbd> （可选）: 选择从最近选择的项目到焦点项目的连续项目。</li> + <li><kbd>Control + Shift + Home</kbd> （可选）: 选择焦点选项和直到第一个选项的所有选项。 （可选）将焦点移至第一个选项。</li> + <li><kbd>Control + Shift + End</kbd> （可选）: 选择焦点选项和直到最后一个选项的所有选项。 （可选）将焦点移到最后一个选项。</li> + <li><kbd>Control + A</kbd> （可选）: 选择列表中的所有选项。（可选）如果选择了所有选项，它也可以取消选择所有选项。</li> + </ul> + </li> + </ul> + </li> +</ul> + +<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3> + +<h4 id="selecting_an_option_in_a_single_select_listbox">在单选 listbox 中选择一个选项</h4> + +<p>当用户选择一个选项时，必须发生以下情况：</p> + +<ol> + <li>取消选择先前选择的选项，将 aria-selected 设置为 false，或完全删除该属性，将新未选择的选项的外观更改为未选择的。</li> + <li>选择新选择的选项，在该选项上设置 aria-selected="true" 并将新选择的选项的外观更改为选中。</li> + <li>将列表框上的 <code>aria-activedescendant</code> 值更新为新选择的选项的 id</li> + <li>可视化处理选项的丢焦、聚焦和选定状态</li> +</ol> + +<h4 id="Toggling_the_state_of_an_option_in_a_multi_select_listbox">在多选列表框中切换选项的状态</h4> + +<p>当用户点击一个选项、聚焦在一个选项时按下 <kbd>Space</kbd>或者以其他方式切换一个选项的状态，必须发生以下情况：</p> + +<ol> + <li>切换当前聚焦选项的 aria-selected 状态，如果它是 false，则将 aria-selected 的状态更改为 true，如果为 true，则将其更改为 false。</li> + <li>更改选项的外观以反映其选定状态</li> + <li>将列表框上的 aria-activedescendant 值更新为用户刚刚与之交互的选项的 id，即使他们将选项切换为取消选择。</li> +</ol> + +<div class="notecard note"> + <p>ARIA 使用的第一原则是您可以使用具有内置语义和行为的原生功能，而不是重新利用元素并<strong>添加</strong> ARIA角色、状态或属性使其可访问。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。</p> +</div> + +<h2 id="Examples">例子</h2> + +<h4 id="Example_1_A_single_select_listbox_that_uses_aria-activedescendant">例子 1: 使用 aria-activedescendant 的单个选择列表框</h4> + +<p>下面的代码片段显示了如何将列表框角色直接添加到 html 源代码中。</p> + +<pre class="brush: html"><p id="listbox1label" role="label">Select a color:</p> +<div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" + onclick="return listItemClick(event);" + onkeydown="return listItemKeyEvent(event);" + onkeypress="return listItemKeyEvent(event);" + aria-activedescendant="listbox1-1"> + <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div> + <div role="option" id="listbox1-2">Orange</div> + <div role="option" id="listbox1-3">Red</div> + <div role="option" id="listbox1-4">Blue</div> + <div role="option" id="listbox1-5">Violet</div> + <div role="option" id="listbox1-6">Periwinkle</div> +</div> +</pre> + +<p>使用原生的 HTML {{HTMLElement("select")}} 和 {{HTMLElement("label")}} 元素可以更简单。</p> + +<pre class="brush: html"><label for="listbox1">Select a color:</label> +<select id="listbox1"> + <option selected>Green</option> + <option>Orange</option> + <option>Red</option> + <option>Blue</option> + <option>Violet</option> + <option>Periwinkle</option> +</select></pre> + +<h4 id="More_examples">更多例子</h4> + +<ul> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html">可滚动的 listbox 示例</a>: 滚动显示更多选项的单选 listbox，类似于 HTML <code>select</code> 的 <code>size</code> 属性大于 1。</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html">可折叠下拉 listbox 示例</a>: 激活时展开的单选可折叠 listbox，类似于 HTML <code>select</code> 并且属性 <code>size="1"</code>。</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html">具有可重新排列选项的 listbox 示例</a>: 带有可以添加、移动和删除选项的附带工具栏的单选和多选 listbox 的示例。</li> +</ul> + +<h2 id="Best_practices">最佳实践</h2> + +<ul> + <li>为了便于键盘访问，作者应该对这个角色的所有后代进行 <a href="https://www.w3.org/TR/wai-aria-1.1/#managingfocus">焦点管理</a></li> + <li>建议作者在列表未聚焦时使用不同的样式进行选择，例如非活动选项通常以较浅的背景颜色显示。</li> + <li>如果 listbox 不是另一个组件的一部分，那么它应该具有 <code>aria-labelledby</code> 属性。</li> + <li>如果一个或多个条目不是 listbox 的 DOM 子项，则需要设置额外的 <code>aria-*</code> 属性（参见 <a href="https://www.w3.org/TR/wai-aria-practices/#listbox_div">ARIA Best Practices</a>)。</li> + <li>如果有理由 <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">展开</a> 列表框，<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> 角色可能更合适。</li> +</ul> + +<h2 id="Specifications">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#listbox","ARIA listbox role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support">屏幕阅读器支持</h2> + +<p>TBD</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li>{{HTMLElement("select")}} 元素</li> + <li>{{HTMLElement("label")}} 元素</li> + <li>{{HTMLElement("option")}} 元素</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role">ARIA: <code>combobox</code> 角色</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role">ARIA: <code>option</code> 角色</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: <code>list</code> 角色</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: <code>listitem</code> 角色</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-practices/#Listbox">ARIA Best Practices – Listbox</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA Role Model – Listbox</a></li> +</ul> + +<section id="Quick_links"> + <ol> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html new file mode 100644 index 0000000000..a4f9bb691d --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html @@ -0,0 +1,120 @@ +--- +title: 'ARIA: listitem role' +slug: Web/Accessibility/ARIA/Roles/Listitem_role +tags: +- ARIA +- ARIA Role +- ARIA listitem +- 可访问性 +- 无障碍 +- Reference +- Role +- listitem +--- +<p>ARIA <code>listitem</code> 角色可用于标识项目列表中的项目。它通常与 <code>list</code> 角色结合使用，用于标识列表容器。</p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">List item 1</div> + <div role="listitem">List item 2</div> + <div role="listitem">List item 3</div> +</section> +</pre> + +<h2 id="Description">描述</h2> + +<p>任何由外部容器和内部元素列表组成的内容都可以分别使用 <code>list</code> 和 <code>listitem</code> 容器识别为辅助技术。</p> + +<p>关于应该使用哪些元素来标记 <code>list</code> 和 <code>listitem</code> 没有硬性规定，但是您应该确保 <code>listitem</code> 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。</p> + +<div class="notecard warning"> + <h4>警告</h4> + <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd><p>项目列表。角色为 <code>list</code> 的元素必须有一个或多个角色为 <code>listitem</code> 的元素作为子元素，一个或多个角色为 <code>group</code> 的元素具有一个或多个具有 <code>listitem</code> 角色的元素作为子元素。</p></dd> + <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></dt> + <dd><p>相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。</p></dd> +</dl> + +<h3 id="Keyboard_Interactions">键盘交互</h3> + +<p>无</p> + +<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3> + +<p>无</p> + +<h2 id="Examples">示例</h2> + +<p><a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara 的一些有用的例子和想法</p> + +<h2 id="Best_practices">最佳实践</h2> + +<p>仅在必要时使用 <code>role="list"</code> 和 <code>role="listitem"</code>。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。</p> + +<p>与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA <code>list</code> 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：</p> + +<pre class="brush: html"><ul> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ul></pre> + +<p>或者如果列表项的顺序很重要，则使用有序列表：</p> + +<pre class="brush: html"><ol> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ol></pre> + +<div class="notecard note"> + <h4>注意</h4> + <p>ARIA <code>list</code> / <code>listitem</code> 角色不区分有序列表和无序列表。</p> +</div> + +<div class="notecard note"> + <h4>注意</h4> + <p>如果要标记将用作选项卡式界面的项目列表，则应改为使用 <code>tab</code>、<code>tabpanel</code> 和 <code>tablist</code> 角色。</p> +</div> + +<h2 id="Specifications">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#listitem","listitem")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support">屏幕阅读器支持</h2> + +<p>TBD</p> + +<h2 id="See_also">相关链接</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: list role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role" rel="nofollow">ARIA: group role</a></li> +</ul> + +<section id="Quick_links"> + <ol> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html b/files/zh-cn/web/api/atob/index.html index f664a3908e..4679dec8c5 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/zh-cn/web/api/atob/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowOrWorkerGlobalScope/atob +slug: Web/API/atob tags: - API - Base64 @@ -10,7 +10,7 @@ tags: - 参考 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/atob -original_slug: Web/API/WindowBase64/atob +original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html b/files/zh-cn/web/api/btoa/index.html index 83873fc559..1ff44702a1 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/zh-cn/web/api/btoa/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.btoa() -slug: Web/API/WindowOrWorkerGlobalScope/btoa +slug: Web/API/btoa tags: - API - Base64 @@ -11,7 +11,7 @@ tags: - 数据 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/btoa -original_slug: Web/API/WindowBase64/btoa +original_slug: Web/API/WindowOrWorkerGlobalScope/btoa --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html b/files/zh-cn/web/api/caches/index.html index 8debcc3322..73c9fe5b30 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html +++ b/files/zh-cn/web/api/caches/index.html @@ -1,7 +1,8 @@ --- title: WindowOrWorkerGlobalScope.caches -slug: Web/API/WindowOrWorkerGlobalScope/caches +slug: Web/API/caches translation_of: Web/API/WindowOrWorkerGlobalScope/caches +original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- <p>{{APIRef()}}{{SeeCompatTable}}</p> diff --git a/files/zh-cn/web/api/canvas_api/index.html b/files/zh-cn/web/api/canvas_api/index.html index c10f589b23..b2bb060ed4 100644 --- a/files/zh-cn/web/api/canvas_api/index.html +++ b/files/zh-cn/web/api/canvas_api/index.html @@ -135,4 +135,4 @@ ctx.fillRect(10, 10, 150, 100);</code></pre> <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> </ul> -<section id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/zh-cn/web/api/clearinterval/index.html index 442e1bb81e..3ba4544b4b 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html +++ b/files/zh-cn/web/api/clearinterval/index.html @@ -1,13 +1,13 @@ --- title: WindowTimers.clearInterval() -slug: Web/API/WindowOrWorkerGlobalScope/clearInterval +slug: Web/API/clearInterval tags: - API - WindowOrWorkerGlobalScope - 参考 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval -original_slug: Web/API/Window/clearInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval --- <div>{{ApiRef("HTML DOM")}}</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/zh-cn/web/api/cleartimeout/index.html index 4e700ea7d0..30648c48b7 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/zh-cn/web/api/cleartimeout/index.html @@ -1,12 +1,12 @@ --- title: WindowOrWorkerGlobalScope.clearTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout +slug: Web/API/clearTimeout tags: - API - WindowOrWorkerGlobalScope - clearTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout -original_slug: Web/API/WindowTimers/clearTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout --- <div> <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/zh-cn/web/api/createimagebitmap/index.html index 7d55152960..c71c592551 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html +++ b/files/zh-cn/web/api/createimagebitmap/index.html @@ -1,7 +1,8 @@ --- title: self.createImageBitmap() -slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +slug: Web/API/createImageBitmap translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +original_slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap --- <div>{{APIRef("Canvas API")}}</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html b/files/zh-cn/web/api/crossoriginisolated/index.html index ad19e53c2e..ff327d5d07 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html +++ b/files/zh-cn/web/api/crossoriginisolated/index.html @@ -1,7 +1,8 @@ --- title: WindowOrWorkerGlobalScope.crossOriginIsolated -slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated +slug: Web/API/crossOriginIsolated translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated +original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated --- <div>{{APIRef()}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html b/files/zh-cn/web/api/fetch/index.html index 3ebf7d8fdb..a1ee53fadf 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html +++ b/files/zh-cn/web/api/fetch/index.html @@ -1,6 +1,6 @@ --- title: WorkerOrGlobalScope.fetch() -slug: Web/API/WindowOrWorkerGlobalScope/fetch +slug: Web/API/fetch tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - GlobalFetch - request translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- <p>{{APIRef("Fetch")}}</p> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/zh-cn/web/api/indexeddb/index.html index 1c1f17f52c..baf7f0c1b9 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html +++ b/files/zh-cn/web/api/indexeddb/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.indexedDB -slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +slug: Web/API/indexedDB tags: - API - Database @@ -11,6 +11,7 @@ tags: - 参考 - 属性 translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB --- <p>{{ APIRef() }}</p> diff --git a/files/zh-cn/web/api/intersection_observer_api/index.html b/files/zh-cn/web/api/intersection_observer_api/index.html index 16ec1fcc7f..37e64b709a 100644 --- a/files/zh-cn/web/api/intersection_observer_api/index.html +++ b/files/zh-cn/web/api/intersection_observer_api/index.html @@ -2,14 +2,21 @@ title: Intersection Observer API slug: Web/API/Intersection_Observer_API tags: - - Intersection Observer API - - IntersectionObserver +- API +- Clipping +- Intersection +- Intersection Observer API +- IntersectionObserver +- Overview +- Performance +- Reference +- Web translation_of: Web/API/Intersection_Observer_API --- <div> <p>{{DefaultAPISidebar("Intersection Observer API")}}</p> -<p class="summary">Intersection Observer API提供了一种异步检测目标元素与祖先元素或 {{Glossary("viewport")}} 相交情况变化的方法。</p> +<p class="summary">Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 {{Glossary("viewport")}} 相交情况变化的方法。</p> </div> <p>过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：</p> @@ -21,7 +28,7 @@ translation_of: Web/API/Intersection_Observer_API <li>在用户看见某个区域时执行任务或播放动画</li> </ul> -<p>过去，相交检测通常要用到事件监听，并且需要频繁调用{{domxref("Element.getBoundingClientRect()")}} 方法以获取相关元素的边界信息。事件监听和调用 {{domxref("Element.getBoundingClientRect()")}} 都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。</p> +<p>过去，相交检测通常要用到事件监听，并且需要频繁调用 {{domxref("Element.getBoundingClientRect()")}} 方法以获取相关元素的边界信息。事件监听和调用 {{domxref("Element.getBoundingClientRect()")}} 都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。</p> <p>假如有一个无限滚动的网页，开发者使用了一个第三方库来管理整个页面的广告，又用了另外一个库来实现消息盒子和点赞，并且页面有很多动画（译注：动画往往意味着较高的性能消耗）。两个库都有自己的相交检测程序，都运行在主线程里，而网站的开发者对这些库的内部实现知之甚少，所以并未意识到有什么问题。但当用户滚动页面时，这些相交检测程序就会在页面滚动回调函数里不停触发调用，造成性能问题，体验效果让人失望。</p> @@ -31,11 +38,11 @@ translation_of: Web/API/Intersection_Observer_API <h2 id="Intersection_observer_的概念和用法">Intersection observer 的概念和用法</h2> -<p>Intersection Observer API 允许你配置一个回调函数，当以下情况发生时会被调用</p> +<p>Intersection Observer API 允许你配置一个回调函数，当以下情况发生时会被调用</p> <ul> <li>每当目标(<strong>target</strong>)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(<strong>root</strong>)。</li> - <li>Observer第一次监听目标元素的时候</li> + <li>Observer 第一次监听目标元素的时候</li> </ul> <p>通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(<strong>root</strong>)元素的交集，请指定根(<strong>root</strong>)元素为<code>null</code>。</p> @@ -46,97 +53,528 @@ translation_of: Web/API/Intersection_Observer_API <h3 id="创建一个_intersection_observer">创建一个 intersection observer</h3> -<p>创建一个 IntersectionObserver对象，并传入相应参数和回调用函数，该回调函数将会在目标(<strong>target</strong>)元素和根(<strong>root</strong>)元素的交集大小超过阈值(<strong>threshold</strong>)规定的大小时候被执行。</p> +<p>创建一个 IntersectionObserver 对象，并传入相应参数和回调用函数，该回调函数将会在目标(<strong>target</strong>)元素和根(<strong>root</strong>)元素的交集大小超过阈值(<strong>threshold</strong>)规定的大小时候被执行。</p> -<pre class="brush: js notranslate">let options = { - root: document.querySelector('#scrollArea'), - rootMargin: '0px', - threshold: 1.0 +<pre class="brush: js">let options = { + root: document.querySelector('#scrollArea'), + rootMargin: '0px', + threshold: 1.0 } let observer = new IntersectionObserver(callback, options); </pre> -<p>阈值为1.0意味着目标元素完全出现在root选项指定的元素中可见时，回调函数将会被执行。</p> +<p>阈值为1.0意味着目标元素完全出现在 root 选项指定的元素中可见时，回调函数将会被执行。</p> <h4 id="Intersection_observer_options">Intersection observer options</h4> -<p>传递到{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}构造函数的 <code>options</code> 对象，允许您控制观察者的回调函数的被调用时的环境。它有以下字段：</p> +<p>传递到 {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 构造函数的 <code>options</code> 对象，允许您控制观察者的回调函数的被调用时的环境。它有以下字段：</p> <dl> <dt><code>root</code></dt> <dd>指定根(<strong>root</strong>)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为<code>null</code>，则默认为浏览器视窗。</dd> - <dt><code>rootMargin</code> </dt> - <dd>根(<strong>root</strong>)元素的外边距。类似于 CSS 中的 {{cssxref("margin")}} 属性，比如 "<code>10px 20px 30px 40px"</code> (top, right, bottom, left)。如果有指定root参数，则rootMargin也可以使用百分比来取值。该属性值是用作root元素和target发生交集时候的计算交集的区域范围，使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0。</dd> + <dt><code>rootMargin</code></dt> + <dd>根(<strong>root</strong>)元素的外边距。类似于 CSS 中的 {{cssxref("margin")}} 属性，比如 "<code>10px 20px 30px 40px"</code> (top, right, bottom, left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为0。</dd> <dt><code>threshold</code></dt> - <dd>可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。如果你只是想要探测当target元素的在root元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要target元素在root元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素中时候 回调才会被执行。</dd> + <dd>可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要 target 元素在 root 元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组 <code>[0, 0.25, 0.5, 0.75, 1]</code>。默认值是0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为1.0含义是当 target 完全出现在 root 元素中时候 回调才会被执行。</dd> <dt> <h4 id="Targeting_an_element_to_be_observed">Targeting an element to be observed</h4> </dt> </dl> -<p>为每个观察者配置一个目标</p> +<p>创建一个 observer 后需要给定一个目标元素进行观察。</p> <pre class="brush: js notranslate">let target = document.querySelector('#listItem'); observer.observe(target); </pre> -<p>每当目标满足该IntersectionObserver指定的threshold值，回调被调用。</p> +<p>每当目标满足该 IntersectionObserver 指定的 threshold 值，回调被调用。</p> -<p>只要目标满足为IntersectionObserver指定的阈值，就会调用回调。回调接收 {{domxref("IntersectionObserverEntry")}} 对象和观察者的列表：</p> +<p>只要目标满足为 IntersectionObserver 指定的阈值，就会调用回调。回调接收 {{domxref("IntersectionObserverEntry")}} 对象和观察者的列表：</p> -<pre class="notranslate"><code>let callback =(entries, observer) => { +<pre class="brush: js">let callback =(entries, observer) => { entries.forEach(entry => { - // Each entry describes an intersection change for one observed - // target element: - // entry.boundingClientRect - // entry.intersectionRatio - // entry.intersectionRect - // entry.isIntersecting - // entry.rootBounds - // entry.target - // entry.time + // Each entry describes an intersection change for one observed target element: + // entry.boundingClientRect + // entry.intersectionRatio + // entry.intersectionRect + // entry.isIntersecting + // entry.rootBounds + // entry.target + // entry.time }); -};</code></pre> +};</pre> <p>请留意，你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行，建议使用 {{domxref("Window.requestIdleCallback()")}} 方法。</p> <h3 id="How_intersection_is_calculated_--_交集的计算">How intersection is calculated -- 交集的计算</h3> -<p>所有区域均被Intersection Observer API 当做一个矩形看待。如果元素是不规则的图形也将会被看成一个包含元素所有区域的最小矩形，相似的，如果元素发生的交集部分不是一个矩形，那么也会被看作是一个包含他所有交集区域的最小矩形。</p> +<p>所有区域均被 Intersection Observer API 当做一个矩形看待。如果元素是不规则的图形也将会被看成一个包含元素所有区域的最小矩形，相似的，如果元素发生的交集部分不是一个矩形，那么也会被看作是一个包含他所有交集区域的最小矩形。</p> -<p>这个有助于理解IntersectionObserverEntry 的属性，IntersectionObserverEntry用于描述target和root的交集。</p> +<p>上述解释有助于理解<code>IntersectionObserverEntry</code> 提供的属性，其用于描述 target 和 root 的交集。</p> <h4 id="The_intersection_root_and_root_margin">The intersection root and root margin</h4> -<p>在我们开始跟踪target元素和容器元素之前，我们要先知道什么是容器(root)元素。容器元素又称为<strong>intersection root</strong>, 或 <strong>root element</strong>.这个既可以是target元素祖先元素也可以是指定null则使用浏览器视口做为容器(root)。</p> +<p>在我们开始跟踪 target 元素和容器元素之前，我们要先知道什么是容器 (root) 元素。容器元素又称为 <strong>intersection root</strong>，或 <strong>root element</strong>。 这个既可以是 target 元素祖先元素也可以是指定 null 则使用浏览器视口做为容器(root)。</p> -<p>用作描述intersection root 元素边界的矩形可以使用<strong>root margin</strong>来调整矩形大小，即rootMargin属性，在我们创建IntersectionObserver对象的时候使用。rootMargin的属性值将会做为margin偏移值添加到intersection root 元素的对应的margin位置，并最终形成root 元素的矩形边界。</p> + +<p><strong><dfn>root intersection rectangle</dfn></strong> 是用来对目标元素进行相交检测的矩形，它的大小有以下几种情况:</p> + +<ul> + <li>如果 intersection root 隐含 root (值为<code>null</code>) (也就是顶级 {{domxref("Document")}}), 那么 root intersection 矩形就是视窗的矩形大小。</li> + <li>如果 intersection root 有溢出部分, 则 root intersection 矩形是 root 元素的内容 (content) 区域.</li> + <li>否则，root intersection 矩形就是 intersection root 的 bounding client rectangle (可以调用元素的 {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} 方法获取).</li> +</ul> + +<p>用作描述 intersection root 元素边界的矩形可以使用 <strong>root margin</strong> 来调整矩形大小，即 <code>rootMargin</code> 属性，在我们创建 IntersectionObserver 对象的时候使用。<code>rootMargin</code> 的属性值将会做为 margin 偏移值添加到 intersection root 元素的对应的 margin 位置，并最终形成 root 元素的矩形边界 (在执行回调函数时可由 {{domxref("IntersectionObserverEntry.rootBounds")}} 得到)。</p> <h4 id="Thresholds">Thresholds</h4> -<p>IntersectionObserver API并不会每次在元素的交集发生变化的时候都会执行回调。相反它使用了<strong>thresholds</strong>参数。当你创建一个observer的时候，你可以提供一个或者多个number类型的数值用来表示target元素在root元素的可见程序的百分比，然后，API的回调函数只会在元素达到<strong>thresholds</strong>规定的阈值时才会执行。</p> +<p>IntersectionObserver API 并不会每次在元素的交集发生变化的时候都会执行回调。相反它使用了 <strong>thresholds</strong> 参数。当你创建一个 observer 的时候，你可以提供一个或者多个 number 类型的数值用来表示 target 元素在 root 元素的可见程序的百分比，然后，API的回调函数只会在元素达到 <strong>thresholds</strong> 规定的阈值时才会执行。</p> -<p>例如，当你想要在target在root元素中中的可见性每超过25%或者减少25%的时候都通知一次。你可以在创建observer的时候指定<strong>thresholds</strong>属性值为[0, 0.25, 0.5, 0.75, 1]，你可以通过检测在每次交集发生变化的时候的都会传递回调函数的参数"IntersectionObserverEntry.isIntersecting"的属性值来判断target元素在root元素中的可见性是否发生变化。如果isIntersecting 是 true，target元素的至少已经达到<strong>thresholds</strong>属性值当中规定的其中一个阈值，如果是false，target元素不在给定的阈值范围内可见。</p> +<p>例如，当你想要在 target 在 root 元素中中的可见性每超过25%或者减少25%的时候都通知一次。你可以在创建 observer 的时候指定 <strong>thresholds</strong> 属性值为 <code>[0, 0.25, 0.5, 0.75, 1]</code>，你可以通过检测在每次交集发生变化的时候的都会传递回调函数的参数 {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} 的属性值来判断 target 元素在 root 元素中的可见性是否发生变化。如果 <code>isIntersecting</code> 为真，target 元素的至少已经达到 <strong>thresholds</strong> 属性值当中规定的其中一个阈值，如果为假，则 target 元素不在给定的阈值范围内可见。</p> -<p>为了让我们感受下thresholds是如何工作的，尝试滚动以下的例子，每一个colored box 的四个边角都会展示自身在root元素中的可见程度百分比，所以在你滚动root的时候你将会看到四个边角的数值一直在发生变化。每一个box都有不同的thresholds：</p> +<p>Note that it's possible to have a non-zero intersection rectangle, which can happen if the intersection is exactly along the boundary between the two or the area of {{domxref("IntersectionObserverEntry.boundingClientRect", "boundingClientRect")}} is zero. This state of the target and root sharing a boundary line is not considered enough to be considered transitioning into an intersecting state.</p> + +<p>为了让我们感受下 thresholds 是如何工作的，尝试滚动以下的例子，每一个 colored box 的四个边角都会展示自身在 root 元素中的可见程度百分比，所以在你滚动 root 的时候你将会看到四个边角的数值一直在发生变化。 每一个 box 都有不同的 thresholds：</p> <ul> - <li>第一个box的thresholds属性值 <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li> - <li>第二个box只有唯一的值 [0.5].</li> - <li>第三个box thresholds按10%从0递增(0%, 10%, 20%, etc.).</li> - <li>最后一个box [0, 0.25, 0.5, 0.75, 1.0]</li> + <li>第一个盒子的 thresholds 包含每个可视百分比，也就是说，{{domxref("IntersectionObserver.thresholds")}} 数组是 <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>。</li> + <li>第二个盒子只有唯一的值 <code>[0.5]</code>。</li> + <li>第三个盒子的 thresholds 按10%从0递增(0%, 10%, 20%, etc.)。</li> + <li>最后一个盒子为 <code>[0, 0.25, 0.5, 0.75, 1.0]</code>。</li> </ul> +<div id="Threshold_example"> + +<pre class="brush: html hidden"><template id="boxTemplate"> + <div class="sampleBox"> + <div class="label topLeft"></div> + <div class="label topRight"></div> + <div class="label bottomLeft"></div> + <div class="label bottomRight"></div> + </div> +</template> + +<main> + <div class="contents"> + <div class="wrapper"> + </div> + </div> +</main></pre> + +<pre class="brush: css hidden">.contents { + position: absolute; + width: 700px; + height: 1725px; +} + +.wrapper { + position: relative; + top: 600px; +} + +.sampleBox { + position: relative; + left: 175px; + width: 150px; + background-color: rgb(245, 170, 140); + border: 2px solid rgb(201, 126, 17); + padding: 4px; + margin-bottom: 6px; +} + +#box1 { + height: 200px; +} + +#box2 { + height: 75px; +} + +#box3 { + height: 150px; +} + +#box4 { + height: 100px; +} + +.label { + font: 14px "Open Sans", "Arial", sans-serif; + position: absolute; + margin: 0; + background-color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.7); + width: 3em; + height: 18px; + padding: 2px; + text-align: center; +} + +.topLeft { + left: 2px; + top: 2px; +} + +.topRight { + right: 2px; + top: 2px; +} + +.bottomLeft { + bottom: 2px; + left: 2px; +} + +.bottomRight { + bottom: 2px; + right: 2px; +} +</pre> + +<pre class="brush: js hidden">let observers = []; + +startup = () => { + let wrapper = document.querySelector(".wrapper"); + + // Options for the observers + + let observerOptions = { + root: null, + rootMargin: "0px", + threshold: [] + }; + + // An array of threshold sets for each of the boxes. The + // first box's thresholds are set programmatically + // since there will be so many of them (for each percentage + // point). + + let thresholdSets = [ + [], + [0.5], + [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], + [0, 0.25, 0.5, 0.75, 1.0] + ]; + + for (let i=0; i<=1.0; i+= 0.01) { + thresholdSets[0].push(i); + } + + // Add each box, creating a new observer for each + + for (let i=0; i<4; i++) { + let template = document.querySelector("#boxTemplate").content.cloneNode(true); + let boxID = "box" + (i+1); + template.querySelector(".sampleBox").id = boxID; + wrapper.appendChild(document.importNode(template, true)); + + // Set up the observer for this box + + observerOptions.threshold = thresholdSets[i]; + observers[i] = new IntersectionObserver(intersectionCallback, observerOptions); + observers[i].observe(document.querySelector("#" + boxID)); + } + + // Scroll to the starting position + + document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY; + document.scrollingElement.scrollLeft = 750; +} + +intersectionCallback = (entries) => { + entries.forEach((entry) => { + let box = entry.target; + let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%"; + + box.querySelector(".topLeft").innerHTML = visiblePct; + box.querySelector(".topRight").innerHTML = visiblePct; + box.querySelector(".bottomLeft").innerHTML = visiblePct; + box.querySelector(".bottomRight").innerHTML = visiblePct; + }); +} + +startup(); +</pre> +</div> + +<p>{{EmbedLiveSample("Threshold_example", 500, 500)}}</p> + + + +<h4 id="Clipping_and_the_intersection_rectangle">Clipping and the intersection rectangle</h4> + +<p>The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.</p> + +<ol> + <li>The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.</li> + <li>Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li> + <li>If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <code><iframe></code> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.</li> + <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li> + <li>The resulting rectangle is then updated by intersecting it with the <a href="#root-intersection-rectangle">root intersection rectangle</a>.</li> + <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li> +</ol> + +<h3 id="Intersection_change_callbacks">Intersection change callbacks</h3> + +<p>When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of {{domxref("IntersectionObserverEntry")}} objects, one for each threshold which was crossed, and a reference to the <code>IntersectionObserver</code> object itself.</p> + +<p>Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.</p> + +<p>The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. For a threshold value of 0.0 (default) the callback is called <a href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverentry-isintersecting">approximately</a> upon transition of the boolean value of {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}}. The snippet thus first checks that the transition is a positive one, then determines whether {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is above 75%, in which case it increments the counter.</p> + +<pre class="brush: js">intersectionCallback(entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + let elem = entry.target; + + if (entry.intersectionRatio >= 0.75) { + intersectionCounter++; + } + } + }); +} +</pre> + <h2 id="Interfaces">Interfaces</h2> <dl> <dt>{{domxref("IntersectionObserver")}}</dt> - <dd>Provides a way to <span style="line-height: 1.5;">asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.</span></dd> + <dd>The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level {{domxref("Document")}}'s {{Glossary('viewport')}}. The ancestor or viewport is referred to as the <strong>root</strong>.</dd> <dt>{{domxref("IntersectionObserverEntry")}}</dt> - <dd>Provides information about the intersection of a particular target with the observers root element at a particular time. Instances of this interface cannot be created, but a list of them is returned by {{domxref("IntersectionObserver.takeRecords", "IntersectionObserver.takeRecords()")}}.</dd> + <dd>Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your <code>IntersectionObserver</code> callback, or by calling {{domxref("IntersectionObserver.takeRecords()")}}.</dd> +</dl> + +<h2 id="A_simple_example">A simple example</h2> + +<p>This simple example causes a target element to change its color and transparency as it becomes more or less visible. At <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..</p> + +<h3 id="HTML">HTML</h3> + +<p>The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID <code>"box"</code>) and some contents within the box.</p> + +<pre class="brush: html"><div id="box"> + <div class="vertical"> + Welcome to <strong>The Box!</strong> + </div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, which we'll use to affect the changes to the element as it becomes more or less obscured.</p> + +<pre class="brush: css">#box { + background-color: rgba(40, 40, 190, 255); + border: 4px solid rgb(20, 20, 120); + transition: background-color 1s, border 1s; + width: 350px; + height: 350px; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.vertical { + color: white; + font: 32px "Arial"; +} + +.extra { + width: 350px; + height: 350px; + margin-top: 10px; + border: 4px solid rgb(20, 20, 120); + text-align: center; + padding: 20px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.</p> + +<h4 id="Setting_up">Setting up</h4> + +<p>First, we need to prepare some variables and install the observer.</p> + +<pre class="brush: js">const numSteps = 20.0; + +let boxElement; +let prevRatio = 0.0; +let increasingColor = "rgba(40, 40, 190, ratio)"; +let decreasingColor = "rgba(190, 40, 40, ratio)"; + +// Set things up +window.addEventListener("load", (event) => { + boxElement = document.querySelector("#box"); + + createObserver(); +}, false);</pre> + +<p>The constants and variables we set up here are:</p> + +<dl> + <dt><code>numSteps</code></dt> + <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd> + <dt><code>prevRatio</code></dt> + <dd>This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.</dd> + <dt><code>increasingColor</code></dt> + <dd>A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.</dd> + <dt><code>decreasingColor</code></dt> + <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd> </dl> +<p>We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p> + +<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4> + +<p>The <code>createObserver()</code> method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.</p> + +<pre class="brush: js">function createObserver() { + let observer; + + let options = { + root: null, + rootMargin: "0px", + threshold: buildThresholdList() + }; + + observer = new IntersectionObserver(handleIntersect, options); + observer.observe(boxElement); +}</pre> + +<p>This begins by setting up an <code>options</code> object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.</p> + +<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p> + +<p>Once <code>options</code> is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p> + +<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p> + +<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4> + +<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p> + +<pre class="brush: js">function buildThresholdList() { + let thresholds = []; + let numSteps = 20; + + for (let i=1.0; i<=numSteps; i++) { + let ratio = i/numSteps; + thresholds.push(ratio); + } + + thresholds.push(0); + return thresholds; +}</pre> + +<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>#</th> + <th>Ratio</th> + <th>#</th> + <th>Ratio</th> + </tr> + <tr> + <th>1</th> + <td>0.05</td> + <th>11</th> + <td>0.55</td> + </tr> + <tr> + <th>2</th> + <td>0.1</td> + <th>12</th> + <td>0.6</td> + </tr> + <tr> + <th>3</th> + <td>0.15</td> + <th>13</th> + <td>0.65</td> + </tr> + <tr> + <th>4</th> + <td>0.2</td> + <th>14</th> + <td>0.7</td> + </tr> + <tr> + <th>5</th> + <td>0.25</td> + <th>15</th> + <td>0.75</td> + </tr> + <tr> + <th>6</th> + <td>0.3</td> + <th>16</th> + <td>0.8</td> + </tr> + <tr> + <th>7</th> + <td>0.35</td> + <th>17</th> + <td>0.85</td> + </tr> + <tr> + <th>8</th> + <td>0.4</td> + <th>18</th> + <td>0.9</td> + </tr> + <tr> + <th>9</th> + <td>0.45</td> + <th>19</th> + <td>0.95</td> + </tr> + <tr> + <th>10</th> + <td>0.5</td> + <th>20</th> + <td>1.0</td> + </tr> + </tbody> +</table> + +<p>We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.</p> + +<h4 id="Handling_intersection_changes">Handling intersection changes</h4> + +<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p> + +<pre class="brush: js">function handleIntersect(entries, observer) { + entries.forEach((entry) => { + if (entry.intersectionRatio > prevRatio) { + entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio); + } else { + entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio); + } + + prevRatio = entry.intersectionRatio; + }); +}</pre> + +<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.</p> + +<p>Similarly, if the <code>intersectionRatio</code> is going down, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p> + +<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p> + +<h3 id="Result">Result</h3> + +<p>Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.</p> + +<p>{{EmbedLiveSample('A_simple_example', 425, 425)}}</p> + +<p>There's an even more extensive example at <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>.</p> + + <h2 id="Specifications">Specifications</h2> <table class="standard-table"> @@ -156,12 +594,12 @@ observer.observe(target); <h2 id="浏览器兼容性">浏览器兼容性</h2> - - <p>{{Compat("api.IntersectionObserver")}}</p> <h2 id="更多参考">更多参考</h2> <ul> <li><a href="https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js">Intersection Observer polyfill</a></li> -</ul> + <li><a href="/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li> + <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li> +</ul>
\ No newline at end of file diff --git a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html index 0e4513516e..92a8b99ff1 100644 --- a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html +++ b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html @@ -4,6 +4,8 @@ slug: Web/API/IntersectionObserver/disconnect tags: - API - Disconnect + - Intersection Observer + - Intersection Observer API - IntersectionObserver - Method translation_of: Web/API/IntersectionObserver/disconnect @@ -14,7 +16,8 @@ translation_of: Web/API/IntersectionObserver/disconnect <h2 id="语法">语法</h2> -<pre class="syntaxbox"><em>IntersectionObserver</em>.disconnect();</pre> +<pre + class="brush: js"><em>intersectionObserver</em>.disconnect();</pre> <h3 id="参数">参数</h3> @@ -26,26 +29,13 @@ translation_of: Web/API/IntersectionObserver/disconnect <h2 id="说明">说明</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容性">浏览器兼容性 </h2> -<p>{{Compat("api.IntersectionObserver.disconnect")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">参考</h2> <ul> <li>{{domxref("IntersectionObserver.observe", "observe()")}}</li> diff --git a/files/zh-cn/web/api/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/index.html index e3bcf96bd3..1aa608a771 100644 --- a/files/zh-cn/web/api/intersectionobserver/index.html +++ b/files/zh-cn/web/api/intersectionobserver/index.html @@ -47,11 +47,12 @@ translation_of: Web/API/IntersectionObserver <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt> <dd><font face="Open Sans, arial, x-locale-body, sans-serif">使</font><code>IntersectionObserver</code>停止监听特定目标元素。</dd> <dt> - <h2 id="示例">示例</h2> </dt> </dl> -<pre><code>var intersectionObserver = new IntersectionObserver(function(entries) { +<h2 id="示例">示例</h2> + +<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) { // If intersectionRatio is 0, the target is out of view // and we do not need to do anything. if (entries[0].intersectionRatio <= 0) return; @@ -60,28 +61,15 @@ translation_of: Web/API/IntersectionObserver console.log('Loaded new items'); }); // start observing -intersectionObserver.observe(document.querySelector('.scrollerFooter'));</code></pre> +intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre> <h2 id="规范">规范</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - <tr> - <td>{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td> </td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容">浏览器兼容</h2> -<p>{{Compat("api.IntersectionObserver")}}</p> +<p>{{Compat}}</p> <h2 id="参考">参考</h2> diff --git a/files/zh-cn/web/api/intersectionobserver/observe/index.html b/files/zh-cn/web/api/intersectionobserver/observe/index.html index c2758917f6..9e5a3a577a 100644 --- a/files/zh-cn/web/api/intersectionobserver/observe/index.html +++ b/files/zh-cn/web/api/intersectionobserver/observe/index.html @@ -11,7 +11,8 @@ translation_of: Web/API/IntersectionObserver/observe <h2 id="语法">语法</h2> -<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre> +<pre + class="brush: js"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre> <h3 id="参数">参数</h3> @@ -25,37 +26,41 @@ translation_of: Web/API/IntersectionObserver/observe <p><code>undefined</code>.</p> -<dl> -</dl> +<h2 id="Examples">示例</h2> + +<pre class="brush: js"> +// Register IntersectionObserver +const io = new IntersectionObserver(entries => { + entries.forEach(entry => { + // Add 'active' class if observation target is inside viewport + if (entry.intersectionRatio > 0) { + entry.target.classList.add('active'); + } + // Remove 'active' class otherwise + else { + entry.target.classList.remove('active'); + } + }) +}) + +// Declares what to observe, and observes its properties. +const boxElList = document.querySelectorAll('.box'); +boxElList.forEach((el) => { + io.observe(el); +}) +</pre> -<h2 id="Examples">Examples</h2> +<h2 id="Specifications">规范</h2> -<p><<<...>>></p> +{{Specifications}} -<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +<h2 id="Browser_compatibility">浏览器兼容性</h2> -<div> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{Compat}}</p> -<p>{{Compat("api.IntersectionObserver.observe")}}</p> -</div> -<h2 id="See_also">See also</h2> +<h2 id="See_also">参考</h2> <ul> <li>{{domxref("IntersectionObserver.unobserve()")}}</li> diff --git a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html index c3099ca224..45f8e1f5b5 100644 --- a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html +++ b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html @@ -4,14 +4,23 @@ slug: Web/API/IntersectionObserver/unobserve tags: - API - Intersection + - Intersection Observer + - Intersection Observer API + - IntersectionObserver - unobserve translation_of: Web/API/IntersectionObserver/unobserve +browser-compat: api.IntersectionObserver.unobserve --- -<div><code>unobserve()方法命令</code>IntersectionObserver停止对一个元素的观察。</div> +<div>{{APIRef("Intersection Observer API")}}</div> + +<p>{{domxref("IntersectionObserver")}}的<code>unobserve()</code> + 方法命令<code>IntersectionObserver</code>停止对一个元素的观察。 +</p> <h2 id="语法">语法</h2> -<pre class="syntaxbox">IntersectionObserver.unobserve(<em>target</em>);</pre> +<pre + class="brush: js"><em>IntersectionObserver</em>.unobserve(<em>target</em>);</pre> <h3 id="参数">参数</h3> @@ -40,24 +49,11 @@ observer.unobserve(document.getElementById("elementToObserve"));</pre> <h2 id="说明">说明</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("api.IntersectionObserver.unobserve")}}</p> +<p>{{Compat}}</p> <h2 id="另请参阅">另请参阅</h2> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/zh-cn/web/api/issecurecontext/index.html index d9f72b13a5..355b4dcde6 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html +++ b/files/zh-cn/web/api/issecurecontext/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.isSecureContext -slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +slug: Web/API/isSecureContext tags: - API - Property @@ -10,6 +10,7 @@ tags: - Workers - isSecureContext translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext --- <p>{{APIRef()}}{{SeeCompatTable}}</p> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html b/files/zh-cn/web/api/origin/index.html index eac425fbd9..eeb79e7cf3 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html +++ b/files/zh-cn/web/api/origin/index.html @@ -1,11 +1,12 @@ --- title: WindowOrWorkerGlobalScope.origin -slug: Web/API/WindowOrWorkerGlobalScope/origin +slug: Web/API/origin tags: - global scope - origin - serialized translation_of: Web/API/WindowOrWorkerGlobalScope/origin +original_slug: Web/API/WindowOrWorkerGlobalScope/origin --- <p>{{APIRef()}}{{SeeCompatTable}}{{domxref("WindowOrWorkerGlobalScope")}} 接口的 <code><strong>origin</strong></code> 只读属性返回全局范围的 <strong>origin</strong>, 序列化为一个字符串。</p> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html b/files/zh-cn/web/api/queuemicrotask/index.html index 3f81e04235..9079205222 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html +++ b/files/zh-cn/web/api/queuemicrotask/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.queueMicrotask() -slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask +slug: Web/API/queueMicrotask tags: - API - JavaScript @@ -10,6 +10,7 @@ tags: - 同步 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask +original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html b/files/zh-cn/web/api/setinterval/index.html index d5a453b133..f3401fc5a5 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/zh-cn/web/api/setinterval/index.html @@ -1,6 +1,6 @@ --- title: window.setInterval -slug: Web/API/WindowOrWorkerGlobalScope/setInterval +slug: Web/API/setInterval tags: - API - DOM @@ -8,7 +8,7 @@ tags: - 方法 - 时间 translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval -original_slug: Web/API/Window/setInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval --- <div>{{ ApiRef("HTML DOM") }}</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html b/files/zh-cn/web/api/settimeout/index.html index d0c80bb95b..1499eccade 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/zh-cn/web/api/settimeout/index.html @@ -1,13 +1,13 @@ --- title: window.setTimeout -slug: Web/API/WindowOrWorkerGlobalScope/setTimeout +slug: Web/API/setTimeout tags: - Timers - WindowOrWorkerGlobalScope - WindowTimers - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout -original_slug: Web/API/Window/setTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/subtlecrypto/index.html b/files/zh-cn/web/api/subtlecrypto/index.html index 24dec9a283..c173e906e8 100644 --- a/files/zh-cn/web/api/subtlecrypto/index.html +++ b/files/zh-cn/web/api/subtlecrypto/index.html @@ -28,8 +28,8 @@ translation_of: Web/API/SubtleCrypto <p>这些函数你可以用来实现系统中的隐私和身份验证等安全功能。<strong>SubtleCrypto </strong>API提供了如下加密函数：</p> <p>* <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></code> 、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></code>: 创建和验证数字签名。<br> - * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></code>: 加密和解密数据。<br> - * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></code>: create a fixed-length, collision-resistant digest of some data.</p> + * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></code>: 加密和解密数据。<br> + * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></code>：为数据生成一个定长的，防碰撞的消息摘要。</p> <h3 id="密钥管理功能">密钥管理功能</h3> @@ -232,9 +232,9 @@ translation_of: Web/API/SubtleCrypto <dl> <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt> - <dd><code>以算法、密钥、</code>明文<code>为参数，返回一个包含加密数据的 </code>{{jsxref("Promise")}}对象。</dd> + <dd>以算法、密钥、明文为参数，返回一个包含加密数据的 {{jsxref("Promise")}} 对象。</dd> <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt> - <dd><code>以算法、密钥、</code>明文<code>为参数，返回一个包含解密数据的 </code>{{jsxref("Promise")}}对象。</dd> + <dd>以算法、密钥、密文为参数，返回一个包含解密数据的 {{jsxref("Promise")}} 对象。</dd> <dt>{{domxref("SubtleCrypto.sign()")}}</dt> <dd>以文本、算法和密码为参数，返回一个包含签名的 {{jsxref("Promise")}}。</dd> <dt>{{domxref("SubtleCrypto.verify()")}}</dt> diff --git a/files/zh-cn/web/api/web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/index.html index f4f25afdfa..75edbde9bf 100644 --- a/files/zh-cn/web/api/web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/index.html @@ -443,7 +443,7 @@ function voiceMute() { // toggle to mute and unmute sound <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <h3 id="Quicklinks">Quicklinks</h3> <ol> diff --git a/files/zh-cn/web/api/webrtc_api/connectivity/index.html b/files/zh-cn/web/api/webrtc_api/connectivity/index.html index 647cce7449..7a9950be14 100644 --- a/files/zh-cn/web/api/webrtc_api/connectivity/index.html +++ b/files/zh-cn/web/api/webrtc_api/connectivity/index.html @@ -41,33 +41,33 @@ translation_of: Web/API/WebRTC_API/Connectivity <ol> <li>呼叫者通过 {{domxref("navigator.mediaDevices.getUserMedia()")}} 捕捉本地媒体。</li> <li>呼叫者创建一个<code>RTCPeerConnection</code> 并调用 {{domxref("RTCPeerConnection.addTrack()")}} (注： <code>addStream</code> 已经过时。)</li> - <li>呼叫者调用 ("RTCPeerConnection.createOffer()")来创建一个提议(offer).</li> - <li>呼叫者调用 ("RTCPeerConnection.setLocalDescription()") 将提议(Offer)<em> </em>设置为本地描述 (即，连接的本地描述).</li> + <li>呼叫者调用 {{domxref("RTCPeerConnection.createOffer()")}} 来创建一个提议(offer).</li> + <li>呼叫者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将提议(Offer)<em> </em>设置为本地描述 (即，连接的本地描述).</li> <li>setLocalDescription()之后, 呼叫者请求 STUN 服务创建ice候选(ice candidates)</li> <li>呼叫者通过信令服务器将提议(offer)传递至 本次呼叫的预期的接受者.</li> - <li>接受者收到了提议(offer) 并调用 ("RTCPeerConnection.setRemoteDescription()") 将其记录为远程描述 (也就是连接的另一端的描述).</li> + <li>接受者收到了提议(offer) 并调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}} 将其记录为远程描述 (也就是连接的另一端的描述).</li> <li>接受者做一些可能需要的步骤结束本次呼叫：捕获本地媒体，然后通过{{domxref("RTCPeerConnection.addTrack()")}}添加到连接中。</li> - <li>接受者通过("RTCPeerConnection.createAnswer()")创建一个应答。</li> - <li>接受者调用 ("RTCPeerConnection.setLocalDescription()") 将应答(answer)<em> </em>设置为本地描述. 此时，接受者已经获知连接双方的配置了.</li> + <li>接受者通过 {{domxref("RTCPeerConnection.createAnswer()")}} 创建一个应答。</li> + <li>接受者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将应答(answer)<em> </em>设置为本地描述. 此时，接受者已经获知连接双方的配置了.</li> <li>接受者通过信令服务器将应答传递到呼叫者.</li> <li>呼叫者接受到应答.</li> - <li>呼叫者调用 ("RTCPeerConnection.setRemoteDescription()") 将应答设定为远程描述. 如此，呼叫者已经获知连接双方的配置了.</li> + <li>呼叫者调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}} 将应答设定为远程描述. 如此，呼叫者已经获知连接双方的配置了.</li> </ol> <h3 id="待定的和当前描述"><strong>待定的和当前描述</strong></h3> <p>进一步了解该过程，我们发现localDescription和remoteDescription(返回这两个描述的属性 )并不像外观那样简单。 因为在重新协商期间，提议可能会被拒绝，因为它提出了不兼容的格式，每个端点都有能力提出一种新的格式，但是实际上不会切换到另一个对等体，直到它被其他对等体接受为止。 因此，WebRTC使用待定和当前的描述。</p> -<p><strong>当前描述</strong>(由 ("RTCPeerConnection.currentLocalDescription") 和 ("RTCPeerConnection.currentRemoteDescription") 属性返回 )表示连接实际使用的描述。 这是双方已经完全同意使用的最新连接。</p> +<p><strong>当前描述</strong>(由 {{domxref("RTCPeerConnection.currentLocalDescription")}} 和 {{domxref("RTCPeerConnection.currentRemoteDescription")}} 属性返回 )表示连接实际使用的描述。 这是双方已经完全同意使用的最新连接。</p> -<p><strong>待定的描述</strong>(由 ("RTCPeerConnection.pendingLocalDescription" ) 和 ("RTCPeerConnection.pendingRemoteDescription") 返回 )表示当 分别调用setLocalDescription( )或setRemoteDescription( )。</p> +<p><strong>待定的描述</strong>(由 {{domxref("RTCPeerConnection.pendingLocalDescription")}} 和 {{domxref("RTCPeerConnection.pendingRemoteDescription")}} 返回 )表示当 分别调用setLocalDescription( )或setRemoteDescription( )。</p> -<p>当读取描述( ("RTCPeerConnection.localDescription" ) 和 ("RTCPeerConnection.remoteDescription" ) )返回时，返回的值是pendingLocalDescription / pendingRemoteDescription的值，如果有待处理的描述( 也就是说，待处理描述不为null ); 否则，返回当前描述(currentLocalDescription / currentRemoteDescription )。</p> +<p>当读取描述( {{domxref("RTCPeerConnection.localDescription")}} 和 {{domxref("RTCPeerConnection.remoteDescription")}} )返回时，返回的值是pendingLocalDescription / pendingRemoteDescription的值，如果有待处理的描述( 也就是说，待处理描述不为null ); 否则，返回当前描述(currentLocalDescription / currentRemoteDescription )。</p> <p>通过调用setLocalDescription( )或setRemoteDescription( )更改描述时，将指定的描述设置为待定描述，WebRTC层开始评估是否可以接受。 一旦建议的描述已经达成一致，currentLocalDescription或currentRemoteDescription的值将更改为待处理描述，并且待处理的描述再次设置为null，表示没有待处理的描述。</p> <div class="note"> -<p>pendingLocalDescription不仅包含正在考虑的提议或答案，而且自从提议或应答以来已经收集到的任何本地ICE候选人都被创建。 类似地，pendingRemoteDescription包括通过调用 ("RTCPeerConnection.addIceCandidate( )" ) 提供的任何远程ICE候选。</p> +<p>pendingLocalDescription不仅包含正在考虑的提议或答案，而且自从提议或应答以来已经收集到的任何本地ICE候选人都被创建。 类似地，pendingRemoteDescription包括通过调用 {{domxref("RTCPeerConnection.addIceCandidate()")}} 提供的任何远程ICE候选。</p> </div> <p>有关这些属性和方法的更多细节，请参阅各个文章。</p> diff --git a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html index c270b2f109..7201946aae 100644 --- a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html @@ -2,44 +2,88 @@ title: XMLHttpRequest.responseType slug: Web/API/XMLHttpRequest/responseType tags: - - XMLHttpRequest.responseType + - AJAX + - API + - HTTP + - HTTP Response + - HTTP Response Type + - Property + - Reference + - Response + - XHR + - XMLHttpRequest + - responseType translation_of: Web/API/XMLHttpRequest/responseType +browser-compat: api.XMLHttpRequest.responseType --- -<p>{{APIRef('XMLHttpRequest')}}</p> +<div>{{APIRef('XMLHttpRequest')}}</div> -<p><strong>XMLHttpRequest.responseType </strong>属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。</p> +<p>{{DOMxRef("XMLHttpRequest")}} 属性 <strong><code>responseType</code></strong> 是一个枚举字符串值，用于指定响应中包含的数据类型。</p> -<p>在工作环境(Work Environment)中将responseType的值设置为"document"通常会被忽略. 当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个<code>InvalidAccessError</code> 的异常。</p> +<p>它还允许作者更改响应类型。如果将 <code>responseType</code> 的值设置为空字符串，则会使用 <code>text</code> 作为默认值。</p> -<p>responseType支持以下几种值：</p> +<h2 id="syntax">语法</h2> -<p>{{page("/zh-CN/docs/Web/API/XMLHttpRequestResponseType", "取值")}}</p> +<pre class="brush: js">var <var>type</var> = <var>XMLHttpRequest</var>.responseType; -<h2 id="规范">规范</h2> +<var>XMLHttpRequest</var>.responseType = <var>type</var>;</pre> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>WHATWG living standard</td> - </tr> - </tbody> -</table> +<h3 id="Value">值</h3> -<h2 id="浏览器兼容性">浏览器兼容性</h2> +<p>{{JSxRef("Global_Objects/String")}} 类型的值，指定响应包含的数据类型。它可以采用以下值：</p> -<p>{{Compat("api.XMLHttpRequest.responseType")}}</p> +<dl> + <dt><code>""</code></dt> + <dd>空的 <code>responseType</code> 字符串与默认类型 <code>"text"</code> 相同。</dd> + <dt><code>"arraybuffer"</code></dt> + <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 JavaScript {{JSxRef("ArrayBuffer")}}。</dd> + <dt><code>"blob"</code></dt> + <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 {{DOMxRef("Blob")}} 对象。</dd> + <dt><code>"document"</code></dt> + <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个 {{Glossary("HTML")}} {{DOMxRef("Document")}} 或 {{Glossary("XML")}} {{DOMxRef("XMLDocument")}}，根据接收到的数据的 MIME 类型而定。请参阅 <a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> 中的 HTML，了解有关使用 XHR 获取 HTML 内容的更多信息。</dd> + <dt><code>"json"</code></dt> + <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是通过将接收到的数据内容解析为 {{Glossary("JSON")}} 而创建的 JavaScript 对象。</dd> + <dt><code>"text"</code></dt> + <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是 {{DOMxRef("DOMString")}} 对象中的文本。</dd> + <dt><code>"ms-stream"</code> {{non-standard_inline}}</dt> + <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。</dd> +</dl> -<h2 id="了解更多">了解更多</h2> +<div class="note"> + <p>将 <code>responseType</code> 设置为特定值时，作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 <code>responseType</code> 不兼容，则 {{DOMxRef("XMLHttpRequest.response", "response")}} 的值将为<code>null</code> .</p> +</div> + +<h3 id="Exceptions">异常</h3> + +<dl> + <dt><code>InvalidAccessError</code></dt> + <dd>试图更改 <code>XMLHttpRequest</code> 的 <code>responseType</code>，该值处于同步模式但不在 {{DOMxRef("Worker")}} 中。有关其他详细信息，请参阅下面的 {{anch("Synchronous_XHR_restrictions", "同步 XHR 限制")}}。</dd> +</dl> + +<h2 id="Usage_notes">使用说明</h2> + +<h3 id="Synchronous_XHR_restrictions">同步 XHR 限制</h3> + +<p>您不能在同步<code>XMLHttpRequest</code> 中更改 <code>responseType</code> 的值，除非请求属于 {{DOMxRef("Worker")}}。此限制部分旨在帮助确保同步操作不会用于阻塞浏览器主线程的大型事务，从而阻碍用户体验。</p> + +<p>XHR 请求默认是异步的；它们仅通过在调用 {{DOMxRef("XMLHttpRequest.open", "open()")}} 时将 <code>false</code> 作为可选<code>async</code> 参数的值传递来置于同步模式。</p> + +<h3 id="Restrictions_in_Workers">Worker 中的限制</h3> + +<p>在 {{DOMxRef("Worker")}} 中尝试将 <code>responseType</code> 的值设置为 <code>document</code> 时会被忽略。</p> + +<h2 id="Specifications">规范</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">相关链接</h2> <ul> - <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> - <li>响应数据： {{domxref("XMLHttpRequest.response", "response")}} 、 {{domxref("XMLHttpRequest.responseText", "responseText")}} 和 {{domxref("XMLHttpRequest.responseXML", "responseXML")}}</li> + <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest</a></li> + <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li>{{DOMxRef("XMLHttpRequest.response", "response")}}, {{DOMxRef("XMLHttpRequest.responseText", "responseText")}} 和 {{DOMxRef("XMLHttpRequest.responseXML", "responseXML")}}</li> </ul> diff --git a/files/zh-cn/web/css/_doublecolon_before/index.html b/files/zh-cn/web/css/_doublecolon_before/index.html index e71e51a49b..c26c09f813 100644 --- a/files/zh-cn/web/css/_doublecolon_before/index.html +++ b/files/zh-cn/web/css/_doublecolon_before/index.html @@ -33,7 +33,7 @@ p::before { content: "Hello world!"; } </pre> <h3 id="Adding_quotation_marks" name="Adding_quotation_marks">加入引用标记</h3> -<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssref("::after")}}</code>来插入引用性文本。</p> +<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssxref("::after")}}</code>来插入引用性文本。</p> <h4 id="HTML_内容">HTML 内容</h4> diff --git a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html index 85b576cfd7..870e84f663 100644 --- a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -1,10 +1,11 @@ --- title: Border-image 生成器 -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator tags: - CSS - Tools translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.</p> diff --git a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html index 70ffc1aad1..4781337bc3 100644 --- a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -1,8 +1,8 @@ --- title: 圆角边框生成器 -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器 +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>使用<em>Border-radius generator</em>生成 CSS3 {{cssxref("border-radius")}} 样式</p> diff --git a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html index 79b9abe9e2..2847389264 100644 --- a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -1,8 +1,8 @@ --- title: Box-shadow generator -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- <p>这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。</p> diff --git a/files/zh-cn/web/css/css_flow_layout/index.html b/files/zh-cn/web/css/css_flow_layout/index.html index e6736b7023..4338eb2f88 100644 --- a/files/zh-cn/web/css/css_flow_layout/index.html +++ b/files/zh-cn/web/css/css_flow_layout/index.html @@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 9386a5ef17..f1c3a4ecc2 100644 --- a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -555,7 +555,7 @@ dd { <p>可能你在使用自动定位或网格布局的其他功能时也会遇到问题，如果遇到了，请把它们抛出来，或者作为用例追加到已有问题上，一方面便于解决，另一方面也会帮助规范在未来的新版本变得更好。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 57d8f1b75c..0659a28b3a 100644 --- a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -685,7 +685,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>在本文章中我们快速对网格布局的概念有了个基本的了解。利用示例代码进行练习，然后<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">接下来我们正式开始挖掘关于网格布局的各种细节</a>。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong><a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考</a></strong></li> diff --git a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 0b5c506a1f..9496e10a87 100644 --- a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -643,7 +643,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>CSS 网格布局和盒模型对齐规范是为了解决 CSS 中的书写模式而设计的，这意味着，如果你用一种从右到左的语言工作，比如阿拉伯语，那网格的起始线就应该是从右上开始，此时 justify-content: start 也将使网格轨道从网格的右侧开始。为 <code>margin-right</code> 和 <code>margin-left</code> 设置自动外边距，或者使用绝对位置如 <code>top<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，</span></font></code><code>right<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，</span></font></code><code>bottom</code> 和 <code>left</code> 来设置偏移量对书写模式来说并不是一种友好的表达方式。在下一篇文章中，我们会深入讨论 CSS 网格布局、盒模型对齐和书写模式之间的关系，理解这些原理，对于开发用多种语言显示的网站，或者设计混合了多种语言和书写模式的页面将大有益处。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index e67b69a9fa..3e606beaa6 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -393,7 +393,7 @@ img { <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">CSS Grid and the New Autoprefixer</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html index 286a249901..a68be27726 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -121,7 +121,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility <p>作为一种开始思考这些问题的方式，当使用 CSS 网格布局时，建议阅读 Leonie Watson 的 <em><a href="http://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the Keyboard Navigation Disconnect</a>。<a href="https://www.youtube.com/watch?v=spxT2CmHoPk">来自 ffconf 的 Leoie 的演示视频</a>有助于了解屏幕阅读器如何使用 CSS 的视觉表示进行工作。Adrian Roselli 也发表了 <a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">tab order in various browsers</a> —— 尽管这是在 Firefox 完全实现网格支持之前。</em></p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><em><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></em></li> <li><em><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></em></li> diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index 216a6fa669..9608cd5fda 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -444,7 +444,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <p><a href="https://drafts.csswg.org/css-logical-props/">CSS 逻辑属性规范</a> 的目标是改变现状，在未来的 CSS 中，{{cssxref("margin-left")}} 和 {{cssxref("margin-right")}} 将与<a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">逻辑属性</a>相同。Firefox 已经实现了，所以你现在就可以在 Firefox 中试上一试。未来如果得到全面支持，那么通过网格学习到的“块和行内”的知识，你也能马上举一反三地用在其他地方了。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html index bdbddab744..5c3d8b05d5 100644 --- a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html @@ -482,7 +482,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas <p>如果你通过阅读本指南前面的几篇文章已经开始上手了，那么你应该是用基于线的定位方式或用命名区域的方式来创建网格布局的。花费一些时间用网格去创建常见的布局模式，虽然还有很多的术语要学习，不过语法是非常一目了然的。在你练习开发的过程中可能会遭遇到一些问题，并且用我们没有讲过的方法去解决它们。在本指南后面的文章中，我们将着眼于更多规范中的细节 —— 目标是让你能用它创建出更加复杂的布局。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/index.html index 17f637d96f..46faef1a06 100644 --- a/files/zh-cn/web/css/css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/index.html @@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 86699a10f4..4ca790f7b7 100644 --- a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -428,7 +428,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>这就是我们需要的，不用做任何计算，网格在分配 1fr 的列轨道空间之前会自动把 10 像素的轨道间距删除掉。在你动手创建自己的布局的过程中，语法会变得越来越熟悉，你能找到适于自己的方法和喜欢创建的项目类型。尝试用不同的方法去创建一些通用的布局模式，你会找到最适合自己的工作方式。在下一篇文章中我们会探讨如何用网格定位元素 —— 根本不需要使用定位属性！</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 004634d8b8..89a3d38534 100644 --- a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -600,7 +600,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid <p>再者，记住你明确定位的元素是可以互相重叠的。有时你能用这点创造一些有趣的效果，但有时也会因为你定位错了线而导致不正确的重叠。<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> 可以在你学习时给你帮助，特别是当你的网格比较复杂时。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index a20d8b626a..e052b14da2 100644 --- a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -535,7 +535,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 <li>有关其他常见布局模式，请参见 <a href="http://gridbyexample.com">Grid by Example</a>, 这里有许多网格布局的小例子，也有一些较大的UI模式和完整的页面布局。</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 6294c4aa25..2f3ed187ba 100644 --- a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -580,7 +580,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>正如本文中所述，CSS Grid Layout 只是您工具包的一部分。不要害怕在布局时将它与其他布局方法混用，大胆用它获得你想要的效果吧。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li> diff --git a/files/zh-cn/web/css/grid-area/index.html b/files/zh-cn/web/css/grid-area/index.html index d5c5c3d9e2..4f35049aee 100644 --- a/files/zh-cn/web/css/grid-area/index.html +++ b/files/zh-cn/web/css/grid-area/index.html @@ -220,7 +220,7 @@ grid-area: unset;</pre> <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-auto-columns/index.html b/files/zh-cn/web/css/grid-auto-columns/index.html index 7b24f9199e..fa64012b44 100644 --- a/files/zh-cn/web/css/grid-auto-columns/index.html +++ b/files/zh-cn/web/css/grid-auto-columns/index.html @@ -149,7 +149,7 @@ grid-auto-columns: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-auto-flow/index.html b/files/zh-cn/web/css/grid-auto-flow/index.html index bf53cdd92b..3f6d6cf6c0 100644 --- a/files/zh-cn/web/css/grid-auto-flow/index.html +++ b/files/zh-cn/web/css/grid-auto-flow/index.html @@ -154,7 +154,7 @@ grid-auto-flow: unset;</pre> <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-auto-rows/index.html b/files/zh-cn/web/css/grid-auto-rows/index.html index a448a6833b..536e625a8a 100644 --- a/files/zh-cn/web/css/grid-auto-rows/index.html +++ b/files/zh-cn/web/css/grid-auto-rows/index.html @@ -148,7 +148,7 @@ grid-auto-rows: unset; <li>视频教程：<em><a href="http://gridbyexample.com/video/series-auto-placement-order/">引入网格自动放置和排序</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/grid-column/index.html b/files/zh-cn/web/css/grid-column/index.html index d826b70c60..c8f01a098a 100644 --- a/files/zh-cn/web/css/grid-column/index.html +++ b/files/zh-cn/web/css/grid-column/index.html @@ -138,7 +138,7 @@ translation_of: Web/CSS/grid-column <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-row/index.html b/files/zh-cn/web/css/grid-row/index.html index 4f5826271a..83baa1020b 100644 --- a/files/zh-cn/web/css/grid-row/index.html +++ b/files/zh-cn/web/css/grid-row/index.html @@ -144,7 +144,7 @@ grid-row: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template-areas/index.html b/files/zh-cn/web/css/grid-template-areas/index.html index 15cdc56df2..89b09a064f 100644 --- a/files/zh-cn/web/css/grid-template-areas/index.html +++ b/files/zh-cn/web/css/grid-template-areas/index.html @@ -141,7 +141,7 @@ grid-template-areas: unset; /* 未设置 */ <li>视频教程<em>：<a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template-columns/index.html b/files/zh-cn/web/css/grid-template-columns/index.html index bb3150a257..3cd25ea361 100644 --- a/files/zh-cn/web/css/grid-template-columns/index.html +++ b/files/zh-cn/web/css/grid-template-columns/index.html @@ -140,7 +140,7 @@ grid-template-columns: unset; <li>视频教程: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template-rows/index.html b/files/zh-cn/web/css/grid-template-rows/index.html index fdffd201ff..7ab2365eeb 100644 --- a/files/zh-cn/web/css/grid-template-rows/index.html +++ b/files/zh-cn/web/css/grid-template-rows/index.html @@ -153,7 +153,7 @@ grid-template-rows: unset; <li>视频教程: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template/index.html b/files/zh-cn/web/css/grid-template/index.html index 0b79fc80d3..7b305e2862 100644 --- a/files/zh-cn/web/css/grid-template/index.html +++ b/files/zh-cn/web/css/grid-template/index.html @@ -146,7 +146,7 @@ footer { <li>视频教程：<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid/index.html b/files/zh-cn/web/css/grid/index.html index 2e4e255ebe..ff04b9027c 100644 --- a/files/zh-cn/web/css/grid/index.html +++ b/files/zh-cn/web/css/grid/index.html @@ -133,7 +133,7 @@ grid: unset; <li><em>网格布局指南：</em><em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/minmax()/index.html b/files/zh-cn/web/css/minmax()/index.html index 3d78c94ddf..4509e35f5d 100644 --- a/files/zh-cn/web/css/minmax()/index.html +++ b/files/zh-cn/web/css/minmax()/index.html @@ -138,7 +138,7 @@ minmax(auto, 300px) <li>视频教程：<em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li> </li> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> diff --git a/files/zh-cn/web/demos_of_open_web_technologies/index.html b/files/zh-cn/web/demos/index.html index 29978d4ed2..04c11c2257 100644 --- a/files/zh-cn/web/demos_of_open_web_technologies/index.html +++ b/files/zh-cn/web/demos/index.html @@ -1,6 +1,6 @@ --- title: 开源 Web 技术示例 -slug: Web/Demos_of_open_web_technologies +slug: Web/Demos tags: - 2D - 3D @@ -11,7 +11,7 @@ tags: - SVG - Video translation_of: Web/Demos_of_open_web_technologies -original_slug: Web/演示说明 +original_slug: Web/Demos_of_open_web_technologies --- <p class="summary">Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。</p> diff --git a/files/zh-cn/web/houdini/index.html b/files/zh-cn/web/guide/houdini/index.html index 68259ebd34..2c81ff1ed3 100644 --- a/files/zh-cn/web/houdini/index.html +++ b/files/zh-cn/web/guide/houdini/index.html @@ -1,12 +1,13 @@ --- title: CSS Houdini -slug: Web/Houdini +slug: Web/Guide/Houdini tags: - API - CSS - Houdini - Web translation_of: Web/Houdini +original_slug: Web/Houdini --- <p>Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问<a href="/en-US/docs/Web/API/CSS_Object_Model">CSS 对象模型</a> （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。</p> diff --git a/files/zh-cn/web/http/methods/index.html b/files/zh-cn/web/http/methods/index.html index 6f926a633d..036f553cf5 100644 --- a/files/zh-cn/web/http/methods/index.html +++ b/files/zh-cn/web/http/methods/index.html @@ -14,15 +14,15 @@ translation_of: Web/HTTP/Methods --- <p>{{HTTPSidebar}}</p> -<p>HTTP 定义了一组<strong>请求方法</strong>, 以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作. 虽然他们也可以是名词, 但这些请求方法有时被称为HTTP动词. 每一个请求方法都实现了不同的语义, 但一些共同的特征由一组共享：: 例如一个请求方法可以是 {{glossary("safe")}}, {{glossary("idempotent")}}, 或 {{glossary("cacheable")}}.</p> +<p>HTTP 定义了一组<strong>请求方法</strong>，以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作。虽然他们也可以是名词, 但这些请求方法有时被称为HTTP动词。每一个请求方法都实现了不同的语义，但一些共同的特征由一组共享：例如一个请求方法可以是 {{glossary("safe")}}, {{glossary("idempotent")}}, 或 {{glossary("cacheable")}}。</p> <dl> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code></dt> - <dd>GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.</dd> + <dd>GET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> - <dd>HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体.</dd> + <dd>HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/POST">POST</a></code></dt> - <dd>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用. </dd> + <dd>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> <dd>PUT方法用请求有效载荷替换目标资源的所有当前表示。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html index 0ea7538a96..8b00401fcc 100644 --- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html +++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html @@ -447,8 +447,8 @@ console.log(a[0]); // 3</pre> <pre class="brush: js notranslate">3.14 -.2345789 // -0.23456789 --3.12e+12 // -3.12*10<sup>12</sup> -.1e-23 // 0.1*10<sup>-23</sup>=10<sup>-24</sup>=1e-24 +-3.12e+12 // -3.12*10^12 +.1e-23 // 0.1*10^(-23)=10^(-24)=1e-24 </pre> <h3 id="对象字面量_Object_literals">对象字面量 (Object literals)</h3> diff --git a/files/zh-cn/web/javascript/guide/text_formatting/index.html b/files/zh-cn/web/javascript/guide/text_formatting/index.html index 522b3ed362..eac38b4502 100644 --- a/files/zh-cn/web/javascript/guide/text_formatting/index.html +++ b/files/zh-cn/web/javascript/guide/text_formatting/index.html @@ -62,7 +62,7 @@ typeof foo; // 返回 'object'</pre> <pre class="brush: js notranslate">const firstString = '2 + 2'; //创建一个字符串字面量 const secondString = new String('2 + 2'); // 创建一个字符串对象 eval(firstString); // 返回数字 4 -eval(secondString); // 返回字符串 "2 + 2"</pre> +eval(secondString); // 返回包含 "2 + 2" 的字符串对象</pre> <p><code>String</code> 对象有一个属性 <code>length</code>，标识了字符串中 UTF-16 的码点个数。举例，下面的代码把 13 赋值给了<code>helloLength</code>，因为 "Hello, World!" 包含 13 个字符，每个字符用一个 UTF-16 码点表示。你可以通过数组的方式访问每一个码点，但你不能修改每个字符，因为字符串是不变的类数组对象： </p> diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md new file mode 100644 index 0000000000..708d629c23 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md @@ -0,0 +1,81 @@ +--- +title: Array() 构造器 +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - 数组 + - 构造器 + - JavaScript + - 参考手册 +browser-compat: javascript.builtins.Array.Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +{{JSRef}} + +**`Array()`** 构造器用于创建 {{jsxref("Array")}} 对象。 + +## 语法 + +```js +// literal constructor +[element0, element1, ..., elementN] + +// construct from elements +new Array(element0, element1, ..., elementN) + +// construct from array length +new Array(arrayLength) +``` + +### 参数 + +- `elementN` + - : `Array` 构造器会根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外（详见下面的 `arrayLength` 参数）。注意，后者仅适用于用 Array 构造器创建数组，而不适用于用方括号创建的数组字面量。 +- `arrayLength` + - : 一个范围在 0 到 2^32 - 1 之间的整数，此时将返回一个 `length` 的值等于 `arrayLength` 的数组对象（言外之意就是该数组此时并没有包含任何实际的元素，不能理所当然地认为它包含 `arrayLength` 个值为 undefined 的元素）。如果传入的参数不是有效值，则会抛出 {{jsxref("RangeError")}} 异常 + +## 示例 + +### 数组字面量 + +可以通过使用 [数组字面量](/zn-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals) 创建数组 + +```js +let fruits = ['Apple', 'Banana']; + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Apple" +``` + +### 单个参数的 Array 构造器 + +可以通过单个数字参数的构造器创建数组，数组的长度为传入的参数，该数组不包含任何实际的元素 + +```js +let fruits = new Array(2); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // undefined +``` + +### 多个参数的 Array 构造器 + +如果向构造器传入多个参数，则会创建一个包含所有传入参数的新数组 + +```js +let fruits = new Array('Apple', 'Banana'); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Apple" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 相关链接 + +- {{jsxref("Array")}} class diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.html b/files/zh-cn/web/javascript/reference/global_objects/array/index.html deleted file mode 100644 index 3b16a483c8..0000000000 --- a/files/zh-cn/web/javascript/reference/global_objects/array/index.html +++ /dev/null @@ -1,443 +0,0 @@ ---- -title: Array -slug: Web/JavaScript/Reference/Global_Objects/Array -tags: - - JavaScript - - 二维数组 - - 全局对象 - - 参考手册 - - 数组 -translation_of: Web/JavaScript/Reference/Global_Objects/Array ---- -<div>{{JSRef}}</div> - -<div></div> - -<p>JavaScript的 <code><strong>Array</strong></code> 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。</p> - -<p><strong>创建数组</strong></p> - -<pre class="brush: js">var fruits = ['Apple', 'Banana']; - -console.log(fruits.length); -// 2 -</pre> - -<p><strong>通过索引访问数组元素</strong></p> - -<pre class="brush: js">var first = fruits[0]; -// Apple - -var last = fruits[fruits.length - 1]; -// Banana</pre> - -<p><strong>遍历数组</strong></p> - -<pre class="brush: js">fruits.forEach(function (item, index, array) { - console.log(item, index); -}); -// Apple 0 -// Banana 1</pre> - -<p><strong>添加元素到数组的末尾</strong></p> - -<pre class="brush: js">var newLength = fruits.push('Orange'); -// newLength:3; fruits: ["Apple", "Banana", "Orange"]</pre> - -<p><strong>删除数组末尾的元素</strong></p> - -<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) -// last: "Orange"; fruits: ["Apple", "Banana"];</pre> - -<p><strong>删除数组最前面（头部）的元素</strong></p> - -<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front -// first: "Apple"; fruits: ["Banana"];</pre> - -<p><strong>添加元素到数组的头部</strong></p> - -<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front -// ["Strawberry", "Banana"]; -</pre> - -<p><strong>找出某个元素在数组中的索引</strong></p> - -<pre class="brush: js">fruits.push('Mango'); -// ["Strawberry", "Banana", "Mango"] - -var pos = fruits.indexOf('Banana'); -// 1</pre> - -<p><strong>通过索引删除某个元素</strong></p> - -<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item - -// ["Strawberry", "Mango"]</pre> - -<p><strong>从一个索引位置删除多个元素</strong></p> - -<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; -console.log(vegetables); -// ["Cabbage", "Turnip", "Radish", "Carrot"] - -var pos = 1, n = 2; - -var removedItems = vegetables.splice(pos, n); -// this is how to remove items, n defines the number of items to be removed, -// from that position(pos) onward to the end of array. - -console.log(vegetables); -// ["Cabbage", "Carrot"] (the original array is changed) - -console.log(removedItems); -// ["Turnip", "Radish"]</pre> - -<p><strong>复制一个数组</strong></p> - -<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy -// ["Strawberry", "Mango"]</pre> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] -new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) -new Array(<var>arrayLength</var>) -</pre> - -<dl> - <dt> - <h3 id="参数">参数</h3> - </dt> - <dt><code>elementN</code></dt> - <dd><code>Array</code> 构造器会根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外（详见下面的 <code>arrayLength</code> 参数）。注意，后面这种情况仅适用于用 <code>Array</code> 构造器创建数组，而不适用于用方括号创建的数组字面量。</dd> - <dt><code>arrayLength</code></dt> - <dd>一个范围在 0 到 2<sup>32</sup>-1 之间的整数，此时将返回一个 <code>length</code> 的值等于 <code>arrayLength</code> 的数组对象（言外之意就是该数组此时并没有包含任何实际的元素，不能理所当然地认为它包含 <code>arrayLength</code> 个值为 <code>undefined</code> 的元素）。如果传入的参数不是有效值，则会抛出 {{jsxref("RangeError")}} 异常。</dd> -</dl> - -<h2 id="描述">描述</h2> - -<p>数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组 {{jsxref("TypedArray")}}。</p> - -<p>只能用整数作为数组元素的索引，而不能用字符串。后者称为<a href="https://en.wikipedia.org/wiki/Associative_array">关联数组</a>。使用非整数并通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">方括号</a>或<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors">点号</a>来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#Properties">属性集合</a>上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。</p> - -<h3 id="访问数组元素">访问数组元素</h3> - -<p>JavaScript 数组的索引是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的长度减1。如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 <code>undefined</code>。</p> - -<pre class="brush: js language-js">var arr = ['this is the first element', 'this is the second element', 'this is the last element']; -console.log(arr[0]); // 打印 'this is the first element' -console.log(arr[1]); // 打印 'this is the second element' -console.log(arr[arr.length - 1]); // 打印 'this is the last element' -</pre> - -<p>虽然数组元素可以看做是数组对象的属性，就像 <code>toString</code> 一样，但是下面的写法是错误的，运行时会抛出 <code>SyntaxError</code> 异常，而原因则是使用了非法的属性名：</p> - -<pre class="brush: js language-js">console.log(arr.0); // a syntax error -</pre> -<p>并不是 JavaScript 数组有什么特殊之处，而是因为在 JavaScript 中，以数字开头的属性不能用点号引用，必须用方括号。比如，如果一个对象有一个名为 <code>3d</code> 的属性，那么只能用方括号来引用它。下面是具体的例子：</p> - -<pre class="brush: js language-js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; -console.log(years.0); // 语法错误 -console.log(years[0]); // √ -</pre> -<pre class="brush: js language-js">renderer.3d.setTexture(model, 'character.png'); // 语法错误 -renderer['3d'].setTexture(model, 'character.png'); // √ -</pre> - -<p>注意在 <code>3d</code> 那个例子中，引号是必须的。你也可以将数组的索引用引号引起来，比如 <code>years[2]</code> 可以写成 <code>years['2']</code>。 <code>years[2]</code> 中的 2 会被 JavaScript 解释器通过调用 <code>toString</code> 隐式转换成字符串。正因为这样，<code>'2'</code> 和 <code>'02'</code> 在 <code>years</code> 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 <code>true</code>：</p> - -<pre class="brush: js language-js">console.log(years['2'] != years['02']); -</pre> -<p>类似地，如果对象的属性名称是保留字（最好不要这么做！），那么就只能通过字符串的形式用方括号来访问（从 firefox 40.0a2 开始也支持用点号访问了）：</p> - -<pre class="brush: js language-js">var promise = { - 'var' : 'text', - 'array': [1, 2, 3, 4] -}; - -console.log(promise['var']); -</pre> - -<h3 id="length_和数字下标之间的关系">length 和数字下标之间的关系</h3> - -<p>JavaScript 数组的 {{jsxref("Array.length", "length")}} 属性和其数字下标之间有着紧密的联系。数组内置的几个方法（例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等）都会考虑 {{jsxref("Array.length", "length")}} 的值。另外还有一些方法（例如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}} 等）还会改变 {{jsxref("Array.length", "length")}} 的值。</p> - -<pre class="brush: js language-js">var fruits = []; -fruits.push('banana', 'apple', 'peach'); - -console.log(fruits.length); // 3 -</pre> - -<p>使用一个合法的下标为数组元素赋值，并且该下标超出了当前数组的大小的时候，解释器会同时修改 {{jsxref("Array.length", "length")}} 的值：</p> - -<pre class="brush: js language-js">fruits[5] = 'mango'; -console.log(fruits[5]); // 'mango' -console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] -console.log(fruits.length); // 6 -</pre> - -<p>也可以显式地给 {{jsxref("Array.length", "length")}} 赋一个更大的值：</p> - -<pre class="brush: js language-js">fruits.length = 10; -console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] -console.log(fruits.length); // 10 -</pre> -<p>而为 {{jsxref("Array.length", "length")}} 赋一个更小的值则会删掉一部分元素：</p> - -<pre class="brush: js language-js">fruits.length = 2; -console.log(Object.keys(fruits)); // ['0', '1'] -console.log(fruits.length); // 2</pre> - -<p>这一节的内容在 {{jsxref("Array.length")}} 中有更详细的介绍。</p> -<h3 id="正则匹配结果所返回的数组">正则匹配结果所返回的数组</h3> - -<p>使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。{{jsxref("RegExp.exec")}}、{{jsxref("String.match")}}、{{jsxref("String.replace")}} 都会返回这样的数组。看下面的例子和例子下面的表格：</p> - -<pre class="brush: js">// 匹配1个 d 后面紧跟着至少1个 b，再后面又跟着1个 d 的子串， -// 并且需要记住子串中匹配到的 b 和最后的 d （通过正则表达式中的分组）， -// 同时在匹配时忽略大小写 - -myRe = /d(b+)(d)/i; -myArray = myRe.exec("cdbBdbsbz"); -</pre> - -<p>该正则匹配返回的数组包含以下属性和元素：</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <td class="header">属性/元素</td> - <td class="header">说明</td> - <td class="header">示例</td> - </tr> - <tr> - <td><code>input</code></td> - <td>只读属性，原始字符串</td> - <td>cdbBdbsbz</td> - </tr> - <tr> - <td><code>index</code></td> - <td>只读属性，匹配到的子串在原始字符串中的索引</td> - <td>1</td> - </tr> - <tr> - <td><code>[0]</code></td> - <td>只读元素，本次匹配到的子串</td> - <td>dbBd</td> - </tr> - <tr> - <td><code>[1], ...[n]</code></td> - <td>只读元素，正则表达式中所指定的分组所匹配到的子串，其数量由正则中的分组数量决定，无最大上限</td> - <td>[1]: bB<br> - [2]: d</td> - </tr> - </tbody> -</table> - -<h2 id="属性">属性</h2> - -<div><code>Array.length</code></div> - -<dl> - <dd><code>Array</code> 构造函数的 length 属性，其值为1（注意该属性为静态属性，不是数组实例的 length 属性）。</dd> - <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> - <dd>返回 <code>Array</code> 构造函数。</dd> - <dt>{{jsxref("Array.prototype")}}</dt> - <dd>通过数组的原型对象可以为所有数组对象添加属性。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("Array.from()")}}</dt> - <dd>从类数组对象或者可迭代对象中创建一个新的数组实例。</dd> - <dt>{{jsxref("Array.isArray()")}}</dt> - <dd>用来判断某个变量是否是一个数组对象。</dd> - <dt>{{jsxref("Array.of()")}}</dt> - <dd>根据一组参数来创建新的数组实例，支持任意的参数数量和类型。</dd> -</dl> - -<h2 id="数组实例"><font face="Consolas, Liberation Mono, Courier, monospace">数组实例</font></h2> - -<p>所有数组实例都会从 {{jsxref("Array.prototype")}} 继承属性和方法。修改 <code>Array</code> 的原型会影响到所有的数组实例。</p> - -<h3 id="属性_2">属性</h3> - -<div>{{page('/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> - -<h3 id="方法_2">方法</h3> - -<h4 id="修改器方法">修改器方法</h4> - -<p>{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</p> - -<h4 id="访问方法">访问方法</h4> - -<p>{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</p> - -<h4 id="迭代方法">迭代方法</h4> - -<p>{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</p> - -<h2 id="数组泛型方法">数组泛型方法</h2> - -<div class="warning"> -<p><strong>泛型方法是非标准，并且已弃用，有可能不久就会移除。</strong> 需注意的是此方法同时有跨浏览器问题. 但是 <a href="https://github.com/plusdude/array-generics">Github上有可用的shim</a>。</p> -</div> - -<p>有时我们会希望在字符串或其他类数组对象上使用数组所提供的方法（如函数的 {{jsxref("Functions/arguments", "arguments", "", 1)}}）。此时你可以把一个字符串作为一个字符数组来看待（也就是说，把非数组以某种方式看成是一个数组）。比如，可以用下面的方法来检查变量 <code>str</code> 中的字符是否都是字母：</p> - -<pre class="brush: js">function isLetter(character) { - return character >= 'a' && character <= 'z'; -} - -if (Array.prototype.every.call(str, isLetter)) { - console.log("The string '" + str + "' contains only letters!"); -}</pre> - -<p>这种方法能够行得通，但不够简洁，JavaScript 1.6 中引入了一个泛型化的简写形式：</p> - -<pre class="brush: js">if (Array.every(str, isLetter)) { - console.log("The string '" + str + "' contains only letters!"); -}</pre> - -<p>{{jsxref("Global_Objects/String", "String")}} 对象也包含一些泛型方法，见： {{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}}。</p> - -<p>注意，这些并不属于 ECMAScript 标准，也不能在非 Gecko 浏览器中使用。你可以用标准方法 {{jsxref("Array.from()")}} 来替代上面的写法， <code>from</code> 方法可以将一个对象转换为真正的数组（虽然老的浏览器可能不支持）：</p> - -<pre class="brush: js"><code>if (Array.from(str).every(isLetter)) { - console.log("The string '" + str + "' contains only letters!"); -}</code></pre> - -<h2 id="示例">示例</h2> - -<h3 id="创建数组">创建数组</h3> - -<p>下面这个例子创建了一个长度为 0 的数组 <code>msgArray</code>，然后给 <code>msgArray[0]</code> 和 <code>msgArray[99]</code> 赋值，从而导致数组长度变为了 100。</p> - -<pre class="brush: js">var msgArray = []; -msgArray[0] = 'Hello'; -msgArray[99] = 'world'; - -if (msgArray.length === 100) { - console.log('The length is 100.'); -}</pre> - -<h3 id="创建二维数组">创建二维数组</h3> - -<p>下面的例子创建了一个代表国际象棋棋盘的二维数组，然后将 (6, 4) 上的 Pawn （卒）拷贝到 (4, 4) 位置，而原本 (6, 4) 位置则被设置为空格。</p> - -<pre class="brush: js">var board = [ - ['R','N','B','Q','K','B','N','R'], - ['P','P','P','P','P','P','P','P'], - [' ',' ',' ',' ',' ',' ',' ',' '], - [' ',' ',' ',' ',' ',' ',' ',' '], - [' ',' ',' ',' ',' ',' ',' ',' '], - [' ',' ',' ',' ',' ',' ',' ',' '], - ['p','p','p','p','p','p','p','p'], - ['r','n','b','q','k','b','n','r'] ]; - -console.log(board.join('\n') + '\n\n'); - -// Move King's Pawn forward 2 -board[4][4] = board[6][4]; -board[6][4] = ' '; -console.log(board.join('\n')); -</pre> - -<p>下面是输出：</p> - -<pre class="brush: js">R,N,B,Q,K,B,N,R -P,P,P,P,P,P,P,P - , , , , , , , - , , , , , , , - , , , , , , , - , , , , , , , -p,p,p,p,p,p,p,p -r,n,b,q,k,b,n,r - -R,N,B,Q,K,B,N,R -P,P,P,P,P,P,P,P - , , , , , , , - , , , , , , , - , , , ,p, , , - , , , , , , , -p,p,p,p, ,p,p,p -r,n,b,q,k,b,n,r -</pre> - -<h3 id="用数组将一组值以表格形式显示">用数组将一组值以表格形式显示</h3> - -<pre class="brush: js"><code>values = []; -for (var x = 0; x < 10; x++){ - values.push([ - 2 ** x, - 2 * x ** 2 - ]) -}; -console.table(values)</code></pre> - -<p>结果为：</p> - -<pre><code>0 1 0 -1 2 2 -2 4 8 -3 8 18 -4 16 32 -5 32 50 -6 64 72 -7 128 98 -8 256 128 -9 512 162</code></pre> - -<p>（第一列为索引）</p> - -<h2 id="规范">规范</h2> - -<table class=" standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">说明</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>初始定义。</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>新增方法: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>新增方法：{{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> - <p>新增方法：{{jsxref("Array.prototype.includes()")}}</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{Compat("javascript.builtins.Array")}}</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> - <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li> -</ul> diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md new file mode 100644 index 0000000000..70b70221e2 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md @@ -0,0 +1,467 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - 数组 + - 类 + - 示例 + - 全局对象 + - JavaScript + - 参考手册 +browser-compat: javascript.builtins.Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +{{JSRef}} + +JavaScript的 **`Array`** 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。 + +## 描述 + +数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组 {{jsxref("TypedArray")}}。 + +只能用整数作为数组元素的索引，而不能用字符串。后者称为 [关联数组](https://en.wikipedia.org/wiki/Associative_array)。使用非整数并通过 [方括号](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#对象和属性) 或 [点号](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors) 来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的 [属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性) 上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。 + +### 常见操作 + +**创建数组** + +```js +let fruits = ['Apple', 'Banana'] + +console.log(fruits.length) +// 2 +``` + +**通过索引访问数组元素** + +```js +let first = fruits[0] +// Apple + +let last = fruits[fruits.length - 1] +// Banana +``` + +**遍历数组** + +```js +fruits.forEach(function(item, index, array) { + console.log(item, index) +}) +// Apple 0 +// Banana 1 +``` + +**添加元素到数组的末尾** + +```js +let newLength = fruits.push('Orange') +// ["Apple", "Banana", "Orange"] +``` + +**删除数组末尾的元素** + +```js +let last = fruits.pop() // remove Orange (from the end) +// ["Apple", "Banana"] +``` + +**删除数组头部元素** + +```js +let first = fruits.shift() // remove Apple from the front +// ["Banana"] +``` + +**添加元素到数组的头部** + +```js +let newLength = fruits.unshift('Strawberry') // add to the front +// ["Strawberry", "Banana"] +``` + +**找出某个元素在数组中的索引** + +```js +fruits.push('Mango') +// ["Strawberry", "Banana", "Mango"] + +let pos = fruits.indexOf('Banana') +// 1 +``` + +**通过索引删除某个元素** + +```js +let removedItem = fruits.splice(pos, 1) // this is how to remove an item + +// ["Strawberry", "Mango"] +``` + +**从一个索引位置删除多个元素** + +```js +let vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'] +console.log(vegetables) +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +let pos = 1 +let n = 2 + +let removedItems = vegetables.splice(pos, n) +// this is how to remove items, n defines the number of items to be removed, +// starting at the index position specified by pos and progressing toward the end of array. + +console.log(vegetables) +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems) +// ["Turnip", "Radish"] +``` + +**复制一个数组** + +```js +let shallowCopy = fruits.slice() // this is how to make a copy +// ["Strawberry", "Mango"] +``` + +### 访问数组元素 + +JavaScript 数组的索引是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的 {{jsxref("Array.length", "长度")}} 减1。 + +如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 `undefined`。 + +```js +let arr = ['this is the first element', 'this is the second element', 'this is the last element'] +console.log(arr[0]) // logs 'this is the first element' +console.log(arr[1]) // logs 'this is the second element' +console.log(arr[arr.length - 1]) // logs 'this is the last element' +``` + +虽然数组元素可以看做是数组对象的属性，就像 `toString` 一样，但是下面的写法是错误的，运行时会抛出 `SyntaxError` 异常，而原因则是使用了非法的属性名： + +```js +console.log(arr.0) // a syntax error +``` + +并不是 JavaScript 数组有什么特殊之处，而是因为在 JavaScript 中，以数字开头的属性不能用点号引用，必须用方括号。 + +比如，如果一个对象有一个名为 `3d` 的属性，那么只能用方括号来引用它。下面是具体的例子： + +```js +let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] +console.log(years.0) // a syntax error +console.log(years[0]) // works properly +``` + +```js +renderer.3d.setTexture(model, 'character.png') // a syntax error +renderer['3d'].setTexture(model, 'character.png') // works properly +``` + +注意在 `3d` 那个例子中，引号是必须的。你也可以将数组的索引用引号引起来，比如 `years[2]` 可以写成 `years['2']`。 + +`years[2]` 中的 2 会被 JavaScript 解释器通过调用 `toString` 隐式转换成字符串。正因为这样，`'2'` 和 `'02'` 在 `years` 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 `true`： + +```js +console.log(years['2'] != years['02']) +``` + +### 数组长度与数字下标之间的关系 + +JavaScript 数组的 {{jsxref("Array.length", "length")}} 属性和其数字下标之间有着紧密的联系。 + +数组内置的几个方法（例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等）都会考虑 {{jsxref("Array.length", "length")}} 的值。 + +另外还有一些方法（例如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}} 等）还会改变 {{jsxref("Array.length", "length")}} 的值。 + +```js +const fruits = [] +fruits.push('banana', 'apple', 'peach') + +console.log(fruits.length) // 3 +``` + +使用一个合法的下标为数组元素赋值，并且该下标超出了当前数组的大小的时候，解释器会同时修改 {{jsxref("Array.length", "length")}} 的值： + +```js +fruits[5] = 'mango' +console.log(fruits[5]) // 'mango' +console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] +console.log(fruits.length) // 6 +``` + +也可以显式地给 {{jsxref("Array.length", "length")}} 赋一个更大的值： + +```js +fruits.length = 10 +console.log(fruits) // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4] +console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] +console.log(fruits.length) // 10 +console.log(fruits[8]) // undefined +``` + +而为 {{jsxref("Array.length", "length")}} 赋一个更小的值则会删掉一部分元素： + +```js +fruits.length = 2 +console.log(Object.keys(fruits)) // ['0', '1'] +console.log(fruits.length) // 2 +``` + +这一节的内容在 {{jsxref("Array.length")}} 中有更详细的介绍。 + +### 正则匹配结果所返回的数组 + +使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。{{jsxref("RegExp.exec")}}、{{jsxref("String.match")}}、{{jsxref("String.replace")}} 都会返回这样的数组。 + +看下面的例子和例子下面的表格： + +```js +// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +const myRe = /d(b+)(d)/i +const myArray = myRe.exec('cdbBdbsbz') +``` + +该正则匹配返回的数组包含以下属性和元素： + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th class="header" scope="col">属性/元素</td> + <th class="header" scope="col">说明</td> + <th class="header" scope="col">示例</td> + </tr> + </thead> + <tbody> + <tr> + <td><code>input</code><br />{{ReadOnlyInline}}</td> + <td>正则表达式所匹配的原始字符串</td> + <td><code>"cdbBdbsbz"</code></td> + </tr> + <tr> + <td><code>index</code><br />{{ReadOnlyInline}}</td> + <td>匹配到的子串在原始字符串中的索引</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>[0]</code><br />{{ReadOnlyInline}}</td> + <td>最后匹配到的子串</td> + <td><code>"dbBd"</code></td> + </tr> + <tr> + <td><code>[1], ...[n]</code><br />{{ReadOnlyInline}}</td> + <td>正则表达式中所指定的分组所匹配到的子串，其数量由正则中的分组数量决定，无最大上限</td> + <td> + <code>[1]: "bB"<br />[2]: "d"</code> + </td> + </tr> + </tbody> +</table> + +## 构造器 + +- {{jsxref("Array/Array", "Array()")}} + - : 创建一个新的 `Array` 对象 + +## 静态属性 + +- {{jsxref("Array/@@species", "get Array[@@species]")}} + - : 返回 Array 的构造函数 + +## 静态方法 + +- {{jsxref("Array.from()")}} + - : 从类数组对象或者可迭代对象中创建一个新的数组实例 +- {{jsxref("Array.isArray()")}} + - : 用来判断某个变量是否是一个数组对象 +- {{jsxref("Array.of()")}} + - : 根据一组参数来创建新的数组实例，支持任意的参数数量和类型 + +## 实例属性 + +- {{jsxref("Array.prototype.length")}} + - : 数组中的元素个数 +- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}} + - : 包含了所有 ES2015 (ES6) 中新定义的、且并未被更早的 ECMAScript 标准收纳的属性名。这些属性被排除在由 [`with`](/zh-CN/docs/Web/JavaScript/Reference/Statements/with) 语句绑定的环境中 + +## 实例方法 + +- {{jsxref("Array.prototype.at()")}}{{Experimental_Inline}} + - : Returns the array item at the given index. Accepts negative integers, which count back from the last item. +- {{jsxref("Array.prototype.concat()")}} + - : 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组 +- {{jsxref("Array.prototype.copyWithin()")}} + - : 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度 +- {{jsxref("Array.prototype.entries()")}} + - : 返回一个新的 `Array Iterator` 对象，该对象包含数组中每个索引的键/值对 +- {{jsxref("Array.prototype.every()")}} + - : 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值 +- {{jsxref("Array.prototype.fill()")}} + - : 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素 +- {{jsxref("Array.prototype.filter()")}} + - : 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素 +- {{jsxref("Array.prototype.find()")}} + - : 返回数组中满足提供的测试函数的第一个元素的值。否则返回 `undefined` +- {{jsxref("Array.prototype.findIndex()")}} + - : 返回数组中满足提供的测试函数的第一个元素的**索引**。若没有找到对应元素则返回 `-1` +- {{jsxref("Array.prototype.flat()")}} + - : 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 +- {{jsxref("Array.prototype.flatMap()")}} + - : 使用映射函数映射每个元素，然后将结果压缩成一个新数组 +- {{jsxref("Array.prototype.forEach()")}} + - : 对数组的每个元素执行一次给定的函数 +- {{jsxref("Array.prototype.includes()")}} + - : 判断一个数组是否包含一个指定的值，如果包含则返回 `true`，否则返回 `false` +- {{jsxref("Array.prototype.indexOf()")}} + - : 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 `-1` +- {{jsxref("Array.prototype.join()")}} + - : 将一个数组的所有元素连接成一个字符串并返回这个字符串 +- {{jsxref("Array.prototype.keys()")}} + - : 返回一个包含数组中每个索引键的 `Array Iterator` 对象 +- {{jsxref("Array.prototype.lastIndexOf()")}} + - : 返回指定元素在数组中的最后一个的索引，如果不存在则返回 `-1` +- {{jsxref("Array.prototype.map()")}} + - : 返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值 +- {{jsxref("Array.prototype.pop()")}} + - : 从数组中删除最后一个元素，并返回该元素的值 +- {{jsxref("Array.prototype.push()")}} + - : 将一个或多个元素添加到数组的末尾，并返回该数组的新长度 +- {{jsxref("Array.prototype.reduce()")}} + - : 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值 +- {{jsxref("Array.prototype.reduceRight()")}} + - : 接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值 +- {{jsxref("Array.prototype.reverse()")}} + - : 将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组 +- {{jsxref("Array.prototype.shift()")}} + - : 从数组中删除第一个元素，并返回该元素的值 +- {{jsxref("Array.prototype.slice()")}} + - : 提取源数组的一部分并返回一个新数组 +- {{jsxref("Array.prototype.some()")}} + - : 测试数组中是不是至少有一个元素通过了被提供的函数测试 +- {{jsxref("Array.prototype.sort()")}} + - : 对数组元素进行原地排序并返回此数组 +- {{jsxref("Array.prototype.splice()")}} + - : 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容 +- {{jsxref("Array.prototype.toLocaleString()")}} + - : 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 {{jsxref("Object.prototype.toLocaleString()")}} 方法转成字符串 +- {{jsxref("Array.prototype.toString()")}} + - : 返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 {{jsxref("Object.prototype.toString()")}} 方法转成字符串 +- {{jsxref("Array.prototype.unshift()")}} + - : 将一个或多个元素添加到数组的头部，并返回该数组的新长度 +- {{jsxref("Array.prototype.values()")}} + - : 返回一个新的 `Array Iterator 对象`，该对象包含数组每个索引的值 +- {{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} + - : 返回一个新的 `Array Iterator 对象`，该对象包含数组每个索引的值 + +## 示例 + +### 创建数组 + +下面这个例子创建了一个长度为 `0` 的数组 `msgArray`，然后给 `msgArray[0]` 和 `msgArray[99]` 赋值，从而导致数组长度变为了 `100`。 + +```js +let msgArray = [] +msgArray[0] = 'Hello' +msgArray[99] = 'world' + +if (msgArray.length === 100) { + console.log('The length is 100.') +} +``` + +### 创建二维数组 + +下面的例子创建了一个代表国际象棋棋盘的二维数组，然后将 `[6][4]` 上的 `p` (Pawn 兵) 拷贝到 `[4][4]`，而原本的 `[6][4]` 位置则被设置为空格。 + +```js +let board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ] + +console.log(board.join('\n') + '\n\n') + +// Move King's Pawn forward 2 +board[4][4] = board[6][4] +board[6][4] = ' ' +console.log(board.join('\n')) +``` + +下面是输出： + +```plain +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +``` + +### 用数组将一组值以表格形式显示 + +```js +values = [] +for (let x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +} +console.table(values) +``` + +结果为： + +```plain +// The first column is the index +0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162 +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 相关链接 + +- JavaScript 指南: + + - [对象属性索引](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#对象属性索引) + - [索引集合类: 数组对象](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组对象array_object) + +- [Typed Arrays](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [RangeError: invalid array length](/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length) diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.html b/files/zh-cn/web/javascript/reference/statements/import/index.html index b7634d9cef..203ce9b8cc 100644 --- a/files/zh-cn/web/javascript/reference/statements/import/index.html +++ b/files/zh-cn/web/javascript/reference/statements/import/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Statements/import <p>语法</p> -<pre class="syntaxbox notranslate">import <em>defaultExport</em> from "<em>module-name</em>"; +<pre class="syntaxbox brush: js notranslate">import <em>defaultExport</em> from "<em>module-name</em>"; import * as <em>name</em> from "<em>module-name</em>"; import { <em>export </em>} from "<em>module-name</em>"; import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; @@ -95,7 +95,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。 这将运行模块中的全局代码, 但实际上不导入任何值。</p> -<pre class="notranslate"><code>import '/modules/my-module.js';</code></pre> +<pre class="brush: js notranslate">import '/modules/my-module.js';</pre> <h3 id="导入默认值">导入默认值</h3> @@ -116,9 +116,9 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 // specific, named imports </pre> -<p>When importing a default export with {{anch("Dynamic Imports", "dynamic imports")}}, it works a bit differently. You need to destructure and rename the "default" key from the returned object.</p> +<p>当用{{anch("动态导入")}}的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。</p> -<pre class="notranslate">(async () => { +<pre class="brush: js notranslate">(async () => { if (somethingIsTrue) { const { default: myDefault, foo, bar } = await import('/modules/my-module.js'); } @@ -140,15 +140,15 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 <code>promise</code>。</p> -<pre class="brush: js notranslate"><code>import('/modules/my-module.js') +<pre class="brush: js notranslate">import('/modules/my-module.js') .then((module) => { // Do something with the module. - });</code> + }); </pre> <p>这种使用方式也支持 <code>await</code> 关键字。</p> -<pre class="brush: js notranslate"><code>let module = await import('/modules/my-module.js');</code></pre> +<pre class="brush: js notranslate">let module = await import('/modules/my-module.js');</pre> <h2 id="示例">示例</h2> @@ -227,6 +227,6 @@ for (const link of document.querySelectorAll("nav > a")) { <li>Limin Zhu, Brian Terlson and Microsoft Edge Team: <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> <li>Hacks blog post by Jason Orendorff: <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a></li> <li>Hacks blog post by Lin Clark: <a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a></li> - <li>Axel Rauschmayer's book: <a class="external" href="http://exploringjs.com/es6/ch_modules.html">"Exploring JS: Modules"</a></li> + <li>Axel Rauschmayer's book: <a class="external" href="https://exploringjs.com/es6/ch_modules.html">"Exploring JS: Modules"</a></li> <li>The Modern JavaScript Tutorial(javascript.info): <a class="external" href="https://javascript.info/import-export">Export and Import</a></li> </ul> diff --git a/files/zh-cn/web/javascript/reference/statements/return/index.html b/files/zh-cn/web/javascript/reference/statements/return/index.html index 9debeab7af..8c82917d96 100644 --- a/files/zh-cn/web/javascript/reference/statements/return/index.html +++ b/files/zh-cn/web/javascript/reference/statements/return/index.html @@ -69,11 +69,11 @@ a + b;</pre> <pre class="brush: js">function counter() { for (var count = 1; ; count++) { // 无限循环 console.log(count + "A"); // 执行5次 - if (count === 5) { - return; - } - console.log(count + "B"); // 执行4次 + if (count === 5) { + return; } + console.log(count + "B"); // 执行4次 + } console.log(count + "C"); // 永远不会执行 } diff --git a/files/zh-cn/web/media/autoplay_guide/index.html b/files/zh-cn/web/media/autoplay_guide/index.html index aa8c207ed2..332f54bfa4 100644 --- a/files/zh-cn/web/media/autoplay_guide/index.html +++ b/files/zh-cn/web/media/autoplay_guide/index.html @@ -4,7 +4,7 @@ slug: Web/Media/Autoplay_guide translation_of: Web/Media/Autoplay_guide original_slug: Web/媒体/Autoplay_guide --- -<p>Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. <span class="seoSummary">In this guide, we'll cover autoplay functionality in the various media and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.</span></p> +<p>网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。<span class="seoSummary">在这篇文章中，我们将介绍各种媒体和 Web Audio APIs 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。</span></p> <p>Autoplay blocking is <em>not</em> applied to {{HTMLElement("video")}} elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be <strong>audible</strong>, and autoplay blocking applies to them. <strong>Inaudible</strong> media are not affected by autoplay blocking.</p> |