diff options
335 files changed, 366 insertions, 34698 deletions
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index a24398837a..ef02ac4a91 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -17,8 +17,6 @@ /zh-CN/docs/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/CORS_Enabled_Image /zh-CN/docs/Web/HTML/CORS_enabled_image /zh-CN/docs/CSS /zh-CN/docs/Web/CSS -/zh-CN/docs/CSS/:-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/:placeholder-shown -/zh-CN/docs/CSS/::-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/::placeholder /zh-CN/docs/CSS/::after /zh-CN/docs/Web/CSS/::after /zh-CN/docs/CSS/:first-child /zh-CN/docs/Web/CSS/:first-child /zh-CN/docs/CSS/:only-child /zh-CN/docs/Web/CSS/:only-child @@ -40,18 +38,7 @@ /zh-CN/docs/CSS/Common_CSS_Questions /zh-CN/docs/Learn/CSS/Howto/CSS_FAQ /zh-CN/docs/CSS/Descendant_selectors /zh-CN/docs/Web/CSS/Descendant_combinator /zh-CN/docs/CSS/General_sibling_selectors /zh-CN/docs/Web/CSS/General_sibling_combinator -/zh-CN/docs/CSS/Getting_Started /zh-CN/docs/conflicting/Learn/CSS/First_steps -/zh-CN/docs/CSS/Getting_Started/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks -/zh-CN/docs/CSS/Getting_Started/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/zh-CN/docs/CSS/Getting_Started/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units /zh-CN/docs/CSS/Getting_Started/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content -/zh-CN/docs/CSS/Getting_Started/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/zh-CN/docs/CSS/Getting_Started/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists -/zh-CN/docs/CSS/Getting_Started/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured -/zh-CN/docs/CSS/Getting_Started/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors -/zh-CN/docs/CSS/Getting_Started/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 -/zh-CN/docs/CSS/Getting_Started/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 -/zh-CN/docs/CSS/Getting_Started/Why_use_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/CSS/ID_selectors /zh-CN/docs/Web/CSS/ID_selectors /zh-CN/docs/CSS/Media /zh-CN/docs/Web/API/CSSMediaRule /zh-CN/docs/CSS/Media/Visual /zh-CN/docs/Web/CSS/@media @@ -60,7 +47,6 @@ /zh-CN/docs/CSS/Specificity /zh-CN/docs/Web/CSS/Specificity /zh-CN/docs/CSS/Syntax /zh-CN/docs/Web/CSS/Syntax /zh-CN/docs/CSS/Tutorials /zh-CN/docs/Web/CSS/Tutorials -/zh-CN/docs/CSS/Tutorials/Using_CSS_flexible_boxes /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /zh-CN/docs/CSS/Tutorials/Using_CSS_transforms /zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /zh-CN/docs/CSS/Tutorials/Using_CSS_transitions /zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions /zh-CN/docs/CSS/Type_selectors /zh-CN/docs/Web/CSS/Type_selectors @@ -121,7 +107,6 @@ /zh-CN/docs/CSS/text-rendering /zh-CN/docs/Web/CSS/text-rendering /zh-CN/docs/CSS/text-shadow /zh-CN/docs/Web/CSS/text-shadow /zh-CN/docs/CSS/text-transform /zh-CN/docs/Web/CSS/text-transform -/zh-CN/docs/CSS/timing-function /zh-CN/docs/conflicting/Web/CSS/easing-function /zh-CN/docs/CSS/transform /zh-CN/docs/Web/CSS/transform /zh-CN/docs/CSS/transition /zh-CN/docs/Web/CSS/transition /zh-CN/docs/CSS/transition-timing-function /zh-CN/docs/Web/CSS/transition-timing-function @@ -134,33 +119,10 @@ /zh-CN/docs/CSS/word-spacing /zh-CN/docs/Web/CSS/word-spacing /zh-CN/docs/CSS/z-index /zh-CN/docs/Web/CSS/z-index /zh-CN/docs/CSS/动画 /zh-CN/docs/Web/CSS/animation -/zh-CN/docs/CSS/开始 /zh-CN/docs/conflicting/Learn/CSS/First_steps -/zh-CN/docs/CSS/开始/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks -/zh-CN/docs/CSS/开始/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/zh-CN/docs/CSS/开始/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units /zh-CN/docs/CSS/开始/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content -/zh-CN/docs/CSS/开始/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/zh-CN/docs/CSS/开始/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists -/zh-CN/docs/CSS/开始/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured /zh-CN/docs/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS -/zh-CN/docs/CSS/开始/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors -/zh-CN/docs/CSS/开始/Tables /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/zh-CN/docs/CSS/开始/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 -/zh-CN/docs/CSS/开始/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 -/zh-CN/docs/CSS/开始/为何使用CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/CSS/开始/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types -/zh-CN/docs/CSS/开始/布局 /zh-CN/docs/conflicting/Learn/CSS/CSS_layout -/zh-CN/docs/CSS:Getting_Started:Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks -/zh-CN/docs/CSS:Getting_Started:Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/zh-CN/docs/CSS:Getting_Started:Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units /zh-CN/docs/CSS:Getting_Started:Content /zh-CN/docs/Learn/CSS/Howto/Generated_content -/zh-CN/docs/CSS:Getting_Started:How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/zh-CN/docs/CSS:Getting_Started:Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists -/zh-CN/docs/CSS:Getting_Started:Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured -/zh-CN/docs/CSS:Getting_Started:Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors -/zh-CN/docs/CSS:Getting_Started:Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 -/zh-CN/docs/CSS:Getting_Started:What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 -/zh-CN/docs/CSS:Getting_Started:Why_use_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/CSS:Media:Visual /zh-CN/docs/Web/CSS/@media /zh-CN/docs/CSS:background /zh-CN/docs/Web/CSS/background /zh-CN/docs/CSS:background-attachment /zh-CN/docs/Web/CSS/background-attachment @@ -174,7 +136,6 @@ /zh-CN/docs/CSS:position /zh-CN/docs/Web/CSS/position /zh-CN/docs/CSS:text-transform /zh-CN/docs/Web/CSS/text-transform /zh-CN/docs/CSS:visibility /zh-CN/docs/Web/CSS/visibility -/zh-CN/docs/CSS:开始 /zh-CN/docs/conflicting/Learn/CSS/First_steps /zh-CN/docs/Canvas /zh-CN/docs/Web/API/Canvas_API/Tutorial /zh-CN/docs/Canvas_tutorial/Applying_styles_and_colors /zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /zh-CN/docs/Canvas_tutorial/Basic_animations /zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations @@ -184,7 +145,6 @@ /zh-CN/docs/Canvas_tutorial:Applying_styles_and_colors /zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /zh-CN/docs/Canvas_tutorial:Using_images /zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images /zh-CN/docs/Canvas教程 /zh-CN/docs/Web/API/Canvas_API/Tutorial -/zh-CN/docs/Chrome /zh-CN/docs/conflicting/Glossary/Chrome /zh-CN/docs/Controlling_DNS_prefetching /zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control /zh-CN/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators /zh-CN/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators @@ -200,7 +160,6 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/input /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/push /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/reverse /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift @@ -210,7 +169,6 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Error /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/EvalError /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/EvalError /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function -/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Math /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Math/random /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Number /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number @@ -220,7 +178,6 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Properties /zh-CN/docs/Web/JavaScript/Reference/Global_Objects /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Properties/NaN /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN -/zh-CN/docs/Core_JavaScript_1.5_Reference/Reserved_Words /zh-CN/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /zh-CN/docs/Core_JavaScript_1.5_Reference/Statements /zh-CN/docs/Web/JavaScript/Reference/Statements /zh-CN/docs/Core_JavaScript_1.5_Reference/Statements/throw /zh-CN/docs/Web/JavaScript/Reference/Statements/throw /zh-CN/docs/Core_JavaScript_1.5_Reference:About /zh-CN/docs/Web/JavaScript/Reference/About @@ -233,7 +190,6 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:input /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:push /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:reverse /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift @@ -242,14 +198,12 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Error /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function -/zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function:prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Math /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Number /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp:lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Properties /zh-CN/docs/Web/JavaScript/Reference/Global_Objects -/zh-CN/docs/Core_JavaScript_1.5_Reference:Reserved_Words /zh-CN/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /zh-CN/docs/Core_JavaScript_1.5_Reference:Statements:throw /zh-CN/docs/Web/JavaScript/Reference/Statements/throw /zh-CN/docs/DHTML /zh-CN/docs/Glossary/DHTML /zh-CN/docs/DOM/Blob /zh-CN/docs/Web/API/Blob @@ -265,9 +219,6 @@ /zh-CN/docs/DOM/DOMString /zh-CN/docs/Web/API/DOMString /zh-CN/docs/DOM/Document.querySelectorAll /zh-CN/docs/Web/API/Document/querySelectorAll /zh-CN/docs/DOM/Document.scripts /zh-CN/docs/Web/API/Document/scripts -/zh-CN/docs/DOM/Element.children /zh-CN/docs/orphaned/Web/API/ParentNode/children -/zh-CN/docs/DOM/Element.firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild -/zh-CN/docs/DOM/Element.lastElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/lastElementChild /zh-CN/docs/DOM/Element.nextElementSibling /zh-CN/docs/Web/API/Element/nextElementSibling /zh-CN/docs/DOM/Element.querySelectorAll /zh-CN/docs/Web/API/Element/querySelectorAll /zh-CN/docs/DOM/EventTarget /zh-CN/docs/Web/API/EventTarget @@ -290,7 +241,6 @@ /zh-CN/docs/DOM/HTMLDocument /zh-CN/docs/Web/API/HTMLDocument /zh-CN/docs/DOM/HTMLFieldSetElement /zh-CN/docs/Web/API/HTMLFieldSetElement /zh-CN/docs/DOM/ImageData /zh-CN/docs/Web/API/ImageData -/zh-CN/docs/DOM/Input.mozSetFileNameArray /zh-CN/docs/conflicting/Web/API/HTMLInputElement /zh-CN/docs/DOM/KeyboardEvent /zh-CN/docs/Web/API/KeyboardEvent /zh-CN/docs/DOM/MouseScrollEvent /zh-CN/docs/Web/API/MouseScrollEvent /zh-CN/docs/DOM/MouseWheelEvent /zh-CN/docs/Web/API/MouseWheelEvent @@ -299,7 +249,6 @@ /zh-CN/docs/DOM/Node.appendChild /zh-CN/docs/Web/API/Node/appendChild /zh-CN/docs/DOM/Node.attributes /zh-CN/docs/Web/API/Element/attributes /zh-CN/docs/DOM/Node.baseURI /zh-CN/docs/Web/API/Node/baseURI -/zh-CN/docs/DOM/Node.baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/DOM/Node.childNodes /zh-CN/docs/Web/API/Node/childNodes /zh-CN/docs/DOM/Node.cloneNode /zh-CN/docs/Web/API/Node/cloneNode /zh-CN/docs/DOM/Node.compareDocumentPosition /zh-CN/docs/Web/API/Node/compareDocumentPosition @@ -313,7 +262,6 @@ /zh-CN/docs/DOM/Node.isSameNode /zh-CN/docs/Web/API/Node/isSameNode /zh-CN/docs/DOM/Node.isSupported /zh-CN/docs/Web/API/Node/isSupported /zh-CN/docs/DOM/Node.lastChild /zh-CN/docs/Web/API/Node/lastChild -/zh-CN/docs/DOM/Node.localName /zh-CN/docs/conflicting/Web/API/Element/localName /zh-CN/docs/DOM/Node.lookupNamespaceURI /zh-CN/docs/Web/API/Node/lookupNamespaceURI /zh-CN/docs/DOM/Node.lookupPrefix /zh-CN/docs/Web/API/Node/lookupPrefix /zh-CN/docs/DOM/Node.nodeName /zh-CN/docs/Web/API/Node/nodeName @@ -323,7 +271,6 @@ /zh-CN/docs/DOM/Node.ownerDocument /zh-CN/docs/Web/API/Node/ownerDocument /zh-CN/docs/DOM/Node.parentElement /zh-CN/docs/Web/API/Node/parentElement /zh-CN/docs/DOM/Node.parentNode /zh-CN/docs/Web/API/Node/parentNode -/zh-CN/docs/DOM/Node.prefix /zh-CN/docs/conflicting/Web/API/Element/prefix /zh-CN/docs/DOM/Node.previousSibling /zh-CN/docs/Web/API/Node/previousSibling /zh-CN/docs/DOM/Node.removeChild /zh-CN/docs/Web/API/Node/removeChild /zh-CN/docs/DOM/Node.replaceChild /zh-CN/docs/Web/API/Node/replaceChild @@ -331,7 +278,6 @@ /zh-CN/docs/DOM/NodeList.item /zh-CN/docs/Web/API/NodeList/item /zh-CN/docs/DOM/Selection /zh-CN/docs/Web/API/Selection /zh-CN/docs/DOM/Selection/collapseToStart /zh-CN/docs/Web/API/Selection/collapseToStart -/zh-CN/docs/DOM/Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API /zh-CN/docs/DOM/StyleSheet /zh-CN/docs/Web/API/StyleSheet /zh-CN/docs/DOM/StyleSheet/href /zh-CN/docs/Web/API/StyleSheet/href /zh-CN/docs/DOM/Text.isElementContentWhitespace /zh-CN/docs/Web/API/Text/isElementContentWhitespace @@ -375,7 +321,6 @@ /zh-CN/docs/DOM/document.anchors /zh-CN/docs/Web/API/Document/anchors /zh-CN/docs/DOM/document.applets /zh-CN/docs/Web/API/Document/applets /zh-CN/docs/DOM/document.async /zh-CN/docs/Web/API/XMLDocument/async -/zh-CN/docs/DOM/document.baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/DOM/document.body /zh-CN/docs/Web/API/Document/body /zh-CN/docs/DOM/document.characterSet /zh-CN/docs/Web/API/Document/characterSet /zh-CN/docs/DOM/document.close /zh-CN/docs/Web/API/Document/close @@ -401,7 +346,6 @@ /zh-CN/docs/DOM/document.height /zh-CN/docs/Web/API/Document/height /zh-CN/docs/DOM/document.images /zh-CN/docs/Web/API/Document/images /zh-CN/docs/DOM/document.importNode /zh-CN/docs/Web/API/Document/importNode -/zh-CN/docs/DOM/document.inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet /zh-CN/docs/DOM/document.lastModified /zh-CN/docs/Web/API/Document/lastModified /zh-CN/docs/DOM/document.lastStyleSheetSet /zh-CN/docs/Web/API/Document/lastStyleSheetSet /zh-CN/docs/DOM/document.linkColor /zh-CN/docs/Web/API/Document/linkColor @@ -462,13 +406,9 @@ /zh-CN/docs/DOM/element.previousElementSibling /zh-CN/docs/Web/API/Element/previousElementSibling /zh-CN/docs/DOM/element.removeAttribute /zh-CN/docs/Web/API/Element/removeAttribute /zh-CN/docs/DOM/element.setCapture /zh-CN/docs/Web/API/Element/setCapture -/zh-CN/docs/DOM/element.tabIndex /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/DOM/element.tagName /zh-CN/docs/Web/API/Element/tagName /zh-CN/docs/DOM/event /zh-CN/docs/Web/API/Event -/zh-CN/docs/DOM/event.altKey /zh-CN/docs/conflicting/Web/API/MouseEvent/altKey /zh-CN/docs/DOM/event.bubbles /zh-CN/docs/Web/API/Event/bubbles -/zh-CN/docs/DOM/event.button /zh-CN/docs/conflicting/Web/API/MouseEvent/button -/zh-CN/docs/DOM/event.cancelBubble /zh-CN/docs/orphaned/Web/API/UIEvent/cancelBubble /zh-CN/docs/DOM/event.cancelable /zh-CN/docs/Web/API/Event/cancelable /zh-CN/docs/DOM/event.currentTarget /zh-CN/docs/Web/API/Event/currentTarget /zh-CN/docs/DOM/event.defaultPrevented /zh-CN/docs/Web/API/Event/defaultPrevented @@ -476,7 +416,6 @@ /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.preventDefault /zh-CN/docs/Web/API/Event/preventDefault -/zh-CN/docs/DOM/event.shiftKey /zh-CN/docs/conflicting/Web/API/MouseEvent/shiftKey /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 /zh-CN/docs/DOM/event.timeStamp /zh-CN/docs/Web/API/Event/timeStamp @@ -522,20 +461,14 @@ /zh-CN/docs/DOM/window.navigator.language /zh-CN/docs/orphaned/Web/API/NavigatorLanguage/language /zh-CN/docs/DOM/window.navigator.onLine /zh-CN/docs/orphaned/Web/API/NavigatorOnLine/onLine /zh-CN/docs/DOM/window.navigator.oscpu /zh-CN/docs/Web/API/Navigator/oscpu -/zh-CN/docs/DOM/window.navigator.platform /zh-CN/docs/orphaned/Web/API/NavigatorID/platform -/zh-CN/docs/DOM/window.navigator.plugins /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/plugins -/zh-CN/docs/DOM/window.navigator.registerContentHandler /zh-CN/docs/orphaned/Web/API/Navigator/registerContentHandler -/zh-CN/docs/DOM/window.navigator.userAgent /zh-CN/docs/orphaned/Web/API/NavigatorID/userAgent /zh-CN/docs/DOM/window.navigator.vendor /zh-CN/docs/Web/API/Navigator/vendor /zh-CN/docs/DOM/window.navigator.vendorSub /zh-CN/docs/Web/API/Navigator/vendorSub /zh-CN/docs/DOM/window.onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/DOM/window.oncontextmenu /zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu /zh-CN/docs/DOM/window.onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange /zh-CN/docs/DOM/window.oninput /zh-CN/docs/Web/API/GlobalEventHandlers/oninput -/zh-CN/docs/DOM/window.onmouseup /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onmouseup /zh-CN/docs/DOM/window.onpopstate /zh-CN/docs/Web/API/WindowEventHandlers/onpopstate /zh-CN/docs/DOM/window.onresize /zh-CN/docs/Web/API/GlobalEventHandlers/onresize -/zh-CN/docs/DOM/window.onscroll /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /zh-CN/docs/DOM/window.onselect /zh-CN/docs/Web/API/GlobalEventHandlers/onselect /zh-CN/docs/DOM/window.onsubmit /zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit /zh-CN/docs/DOM/window.onunload /zh-CN/docs/Web/API/WindowEventHandlers/onunload @@ -555,7 +488,6 @@ /zh-CN/docs/DOM/window.setTimeout12 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/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:Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API /zh-CN/docs/DOM:XMLDocument /zh-CN/docs/Web/API/XMLDocument /zh-CN/docs/DOM:document /zh-CN/docs/Web/API/Document /zh-CN/docs/DOM:document.createElement /zh-CN/docs/Web/API/document/createElement @@ -585,11 +517,9 @@ /zh-CN/docs/DOM:window.onresize /zh-CN/docs/Web/API/GlobalEventHandlers/onresize /zh-CN/docs/DOM:window.open /zh-CN/docs/Web/API/Window/open /zh-CN/docs/DOM:window.openDialog /zh-CN/docs/Web/API/Window/openDialog -/zh-CN/docs/Detecting_device_orientation /zh-CN/docs/orphaned/Web/API/Detecting_device_orientation /zh-CN/docs/Document_Object_Model_(DOM)/window.onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/Download_Mozilla_Source_Code /en-US/docs/Mozilla/Developer_guide/Source_Code/Downloading_Source_Archives /zh-CN/docs/Enumerability_and_ownership_of_properties /zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties -/zh-CN/docs/Example_2_-_Using_UL /zh-CN/docs/orphaned/Example_2_-_Using_UL /zh-CN/docs/Firefox_12_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/12 /zh-CN/docs/Firefox_14_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/14 /zh-CN/docs/Firefox_15_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/15 @@ -604,7 +534,6 @@ /zh-CN/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary) /zh-CN/docs/Games/Introduction_to_HTML5_Game_Development /zh-CN/docs/Games/Publishing_games/游戏货币化 /zh-CN/docs/Games/Publishing_games/Game_monetization /zh-CN/docs/Games/Techniques/Control_mechanisms/移动端触摸控制 /zh-CN/docs/Games/Techniques/Control_mechanisms/Mobile_touch -/zh-CN/docs/Games/Tools/引擎和工具 /zh-CN/docs/orphaned/Games/Tools/Engines_and_tools /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/创建、绘制画布 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/反弹的墙壁 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/撞击处理 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection @@ -612,8 +541,6 @@ /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/让球动起来 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/鼠标控制 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls /zh-CN/docs/Games/简介 /zh-CN/docs/Games/Introduction -/zh-CN/docs/Getting_Started__junk /zh-CN/docs/conflicting/Learn/CSS/First_steps -/zh-CN/docs/Glossary/DTD /zh-CN/docs/conflicting/Glossary/Doctype /zh-CN/docs/Glossary/Header /zh-CN/docs/Glossary/HTTP_header /zh-CN/docs/Glossary/IP地址 /zh-CN/docs/Glossary/IP_Address /zh-CN/docs/Glossary/Serialize /zh-CN/docs/Glossary/Serialization @@ -654,11 +581,9 @@ /zh-CN/docs/Glossary/请求头 /zh-CN/docs/Glossary/Request_header /zh-CN/docs/Glossary/通用首部 /zh-CN/docs/Glossary/General_header /zh-CN/docs/Glossary/面向对象编程 /zh-CN/docs/Glossary/OOP -/zh-CN/docs/Glossary_of_translation /zh-CN/docs/orphaned/Glossary_of_translation /zh-CN/docs/HTML /zh-CN/docs/Web/HTML /zh-CN/docs/HTML/Block-level_elements /zh-CN/docs/Web/HTML/Block-level_elements /zh-CN/docs/HTML/Canvas /zh-CN/docs/Web/API/Canvas_API -/zh-CN/docs/HTML/Canvas/Drawing_graphics_with_canvas /zh-CN/docs/conflicting/Web/API/Canvas_API/Tutorial /zh-CN/docs/HTML/Canvas/Tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial /zh-CN/docs/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Editable_content /zh-CN/docs/HTML/Element /zh-CN/docs/Web/HTML/Element @@ -670,7 +595,6 @@ /zh-CN/docs/HTML/Element/audio /zh-CN/docs/Web/HTML/Element/audio /zh-CN/docs/HTML/Element/canvas /zh-CN/docs/Web/HTML/Element/canvas /zh-CN/docs/HTML/Element/code /zh-CN/docs/Web/HTML/Element/code -/zh-CN/docs/HTML/Element/command /zh-CN/docs/orphaned/Web/HTML/Element/command /zh-CN/docs/HTML/Element/datalist /zh-CN/docs/Web/HTML/Element/datalist /zh-CN/docs/HTML/Element/header /zh-CN/docs/Web/HTML/Element/header /zh-CN/docs/HTML/Element/iframe /zh-CN/docs/Web/HTML/Element/iframe @@ -680,24 +604,15 @@ /zh-CN/docs/HTML/Element/section /zh-CN/docs/Web/HTML/Element/section /zh-CN/docs/HTML/Element/video /zh-CN/docs/Web/HTML/Element/video /zh-CN/docs/HTML/Element/视频 /zh-CN/docs/Web/HTML/Element/video -/zh-CN/docs/HTML/Focus_management_in_HTML /zh-CN/docs/conflicting/Web/API/Document/hasFocus /zh-CN/docs/HTML/Forms /zh-CN/docs/Learn/Forms /zh-CN/docs/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript -/zh-CN/docs/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/zh-CN/docs/HTML/HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5 -/zh-CN/docs/HTML/HTML5-and-his-friends /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5 -/zh-CN/docs/HTML/HTML5/HTML5_Tags_List /zh-CN/docs/conflicting/Web/HTML/Element -/zh-CN/docs/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/conflicting/Web/Guide/HTML/HTML5 -/zh-CN/docs/HTML/HTML5/HTML5_入门 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/HTML/HTML_Elements /zh-CN/docs/Web/HTML/Element/Heading_Elements /zh-CN/docs/HTML/HTML_Elements/time /zh-CN/docs/Web/HTML/Element/time /zh-CN/docs/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-CN/docs/HTML/块级元素 /zh-CN/docs/Web/HTML/Block-level_elements /zh-CN/docs/HTML\Canvas\Tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial /zh-CN/docs/HTTP /zh-CN/docs/Web/HTTP -/zh-CN/docs/HTTP/HTTP_response_codes /zh-CN/docs/conflicting/Web/HTTP/Status /zh-CN/docs/IndexedDB /zh-CN/docs/Web/API/IndexedDB_API -/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /zh-CN/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /zh-CN/docs/IndexedDB/IDBObjectStore /zh-CN/docs/Web/API/IDBObjectStore /zh-CN/docs/IndexedDB/Using_IndexedDB /zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB /zh-CN/docs/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript @@ -715,14 +630,12 @@ /zh-CN/docs/JS-ref/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/JS-ref/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/JS-ref/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/JS-ref/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/JS-ref/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/JS-ref/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/JS-ref/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/JS-ref/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/JS-ref/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/JS-ref/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/JS-ref/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/JS-ref/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/JS-ref/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/JS-ref/Date/getDay /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay @@ -813,7 +726,6 @@ /zh-CN/docs/JS-ref/Global_Objects/Object/preventExtensions/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen /zh-CN/docs/JS-ref/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/JS-ref/Global_Objects/Object/proto /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto -/zh-CN/docs/JS-ref/Global_Objects/Object/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/JS-ref/Global_Objects/Object/seal /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/JS-ref/Global_Objects/Object/setPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /zh-CN/docs/JS-ref/Global_Objects/Object/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource @@ -822,15 +734,12 @@ /zh-CN/docs/JS-ref/Global_Objects/Proxy /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy /zh-CN/docs/JS-ref/Global_Objects/Set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set /zh-CN/docs/JS-ref/Global_Objects/WeakSet /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet -/zh-CN/docs/JS-ref/Global_Objects/WeakSet/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/JS-ref/Global_Objects/decodeURI /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /zh-CN/docs/JS-ref/Global_Objects/isFinite /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isFinite /zh-CN/docs/JS-ref/Global_Objects/null /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null /zh-CN/docs/JS-ref/Global_Objects/parseFloat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat /zh-CN/docs/JS-ref/Global_Objects/undefined /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined -/zh-CN/docs/JS-ref/Map /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/JS-ref/Operators /zh-CN/docs/Web/JavaScript/Reference/Operators -/zh-CN/docs/JS-ref/Operators/Logical_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca /zh-CN/docs/JS-ref/Operators/Operator_Precedence /zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /zh-CN/docs/JS-ref/Operators/delete /zh-CN/docs/Web/JavaScript/Reference/Operators/delete /zh-CN/docs/JS-ref/Operators/in /zh-CN/docs/Web/JavaScript/Reference/Operators/in @@ -841,7 +750,6 @@ /zh-CN/docs/JS-ref/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JS-ref/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/JS-ref/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/JS-ref/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JS-ref/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/JS-ref/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax /zh-CN/docs/JS-ref/Statements /zh-CN/docs/Web/JavaScript/Reference/Statements @@ -874,13 +782,10 @@ /zh-CN/docs/JS-ref/rest_parameters /zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters /zh-CN/docs/JavaScript /zh-CN/docs/Web/JavaScript /zh-CN/docs/JavaScript-840092-dup /zh-CN/docs/Web/JavaScript -/zh-CN/docs/JavaScript-840092-dup/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Objects /zh-CN/docs/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/JavaScript/Data_structures /zh-CN/docs/Web/JavaScript/Data_structures -/zh-CN/docs/JavaScript/Getting_Started /zh-CN/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics /zh-CN/docs/JavaScript/Guide /zh-CN/docs/Web/JavaScript/Guide /zh-CN/docs/JavaScript/Guide-redirect-1 /zh-CN/docs/Web/JavaScript/Guide -/zh-CN/docs/JavaScript/Guide/About /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction /zh-CN/docs/JavaScript/Guide/Closures /zh-CN/docs/Web/JavaScript/Closures /zh-CN/docs/JavaScript/Guide/Details_of_the_Object_Model /zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /zh-CN/docs/JavaScript/Guide/Expressions_and_Operators /zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators @@ -888,7 +793,6 @@ /zh-CN/docs/JavaScript/Guide/Inheritance_Revisited /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /zh-CN/docs/JavaScript/Guide/Iterators_and_Generators /zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators -/zh-CN/docs/JavaScript/Guide/JavaScript_Overview /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b /zh-CN/docs/JavaScript/Guide/Predefined_Core_Objects /zh-CN/docs/Web/JavaScript/Guide /zh-CN/docs/JavaScript/Guide/Regular_Expressions /zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions /zh-CN/docs/JavaScript/Guide/Sameness /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness @@ -897,7 +801,6 @@ /zh-CN/docs/JavaScript/Guide/Values,_variables,_and_literals /zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types /zh-CN/docs/JavaScript/Guide/Working_with_Objects /zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects /zh-CN/docs/JavaScript/Guide/闭包 /zh-CN/docs/Web/JavaScript/Closures -/zh-CN/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Objects /zh-CN/docs/JavaScript/JavaScript_technologies_overview /zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview /zh-CN/docs/JavaScript/Language_Resources /zh-CN/docs/Web/JavaScript/Language_Resources /zh-CN/docs/JavaScript/Memory_Management /zh-CN/docs/Web/JavaScript/Memory_Management @@ -915,14 +818,12 @@ /zh-CN/docs/JavaScript/Reference/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/JavaScript/Reference/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/JavaScript/Reference/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/JavaScript/Reference/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/JavaScript/Reference/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/JavaScript/Reference/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/JavaScript/Reference/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/JavaScript/Reference/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/JavaScript/Reference/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/JavaScript/Reference/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/JavaScript/Reference/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/JavaScript/Reference/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/JavaScript/Reference/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/JavaScript/Reference/Date/getDay /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay @@ -959,14 +860,12 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/JavaScript/Reference/Global_Objects/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/JavaScript/Reference/Global_Objects/Date/getDay /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay @@ -990,7 +889,6 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/Function/toString /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString /zh-CN/docs/JavaScript/Reference/Global_Objects/JSON /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON /zh-CN/docs/JavaScript/Reference/Global_Objects/JSON/stringify /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify -/zh-CN/docs/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/JavaScript/Reference/Global_Objects/Math /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math /zh-CN/docs/JavaScript/Reference/Global_Objects/Math/SQRT2 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT2 /zh-CN/docs/JavaScript/Reference/Global_Objects/Math/abs /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/abs @@ -1053,18 +951,15 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/preventExtensions/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/proto /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto -/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/toString /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/valueOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf -/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/原型 /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/JavaScript/Reference/Global_Objects/Proxy /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/JavaScript/Reference/Global_Objects/Set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set /zh-CN/docs/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String @@ -1084,15 +979,12 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/String/toUpperCase /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase /zh-CN/docs/JavaScript/Reference/Global_Objects/WeakMap /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap /zh-CN/docs/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet -/zh-CN/docs/JavaScript/Reference/Global_Objects/WeakSet/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/JavaScript/Reference/Global_Objects/decodeURI /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /zh-CN/docs/JavaScript/Reference/Global_Objects/isFinite /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isFinite /zh-CN/docs/JavaScript/Reference/Global_Objects/null /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null /zh-CN/docs/JavaScript/Reference/Global_Objects/parseFloat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat /zh-CN/docs/JavaScript/Reference/Global_Objects/undefined /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined -/zh-CN/docs/JavaScript/Reference/Map /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/JavaScript/Reference/Operators /zh-CN/docs/Web/JavaScript/Reference/Operators -/zh-CN/docs/JavaScript/Reference/Operators/Logical_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca /zh-CN/docs/JavaScript/Reference/Operators/Operator_Precedence /zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /zh-CN/docs/JavaScript/Reference/Operators/delete /zh-CN/docs/Web/JavaScript/Reference/Operators/delete /zh-CN/docs/JavaScript/Reference/Operators/in /zh-CN/docs/Web/JavaScript/Reference/Operators/in @@ -1103,7 +995,6 @@ /zh-CN/docs/JavaScript/Reference/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/JavaScript/Reference/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/JavaScript/Reference/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/JavaScript/Reference/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax /zh-CN/docs/JavaScript/Reference/Statements /zh-CN/docs/Web/JavaScript/Reference/Statements @@ -1224,48 +1115,23 @@ /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试/Automated_testing /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试/HTML_and_CSS /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试/Your_own_automation_environment /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment -/zh-CN/docs/Learn/tutorial /zh-CN/docs/conflicting/Learn_30ccce5e65b5ce795fc2e288fe9d012b -/zh-CN/docs/Learn/tutorial/How_to_build_a_web_site /zh-CN/docs/conflicting/Learn /zh-CN/docs/Localization /zh-CN/docs/Glossary/Localization -/zh-CN/docs/MDC:怎样进行帮助 /zh-CN/docs/conflicting/MDN/Contribute /zh-CN/docs/MDN/CSS /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties -/zh-CN/docs/MDN/Community /zh-CN/docs/orphaned/MDN/Community -/zh-CN/docs/MDN/Community/Conversations /zh-CN/docs/orphaned/MDN/Community/Conversations -/zh-CN/docs/MDN/Community/Doc_sprints /zh-CN/docs/orphaned/MDN/Community/Doc_sprints -/zh-CN/docs/MDN/Community/Whats_happening /zh-CN/docs/orphaned/MDN/Community/Whats_happening -/zh-CN/docs/MDN/Community/在社区工作 /zh-CN/docs/orphaned/MDN/Community/Working_in_community /zh-CN/docs/MDN/Contribute/Content /zh-CN/docs/MDN/Guidelines /zh-CN/docs/MDN/Contribute/Content/CSS_style_guide /zh-CN/docs/MDN/Guidelines/CSS_style_guide -/zh-CN/docs/MDN/Contribute/Content/Content_blocks /zh-CN/docs/conflicting/MDN/Guidelines/CSS_style_guide /zh-CN/docs/MDN/Contribute/Content/Custom_macros /zh-CN/docs/MDN/Structures/Macros/Commonly-used_macros /zh-CN/docs/MDN/Contribute/Content/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Does_this_belong_on_MDN /zh-CN/docs/MDN/Contribute/Content/Style_guide /zh-CN/docs/MDN/Guidelines/Writing_style_guide /zh-CN/docs/MDN/Contribute/Howto/Compatibility_tables /zh-CN/docs/MDN/Structures/Compatibility_tables -/zh-CN/docs/MDN/Contribute/Howto/Create_an_MDN_account /zh-CN/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/zh-CN/docs/MDN/Contribute/Howto/Do_a_technical_review /zh-CN/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/zh-CN/docs/MDN/Contribute/Howto/Do_an_editorial_review /zh-CN/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/zh-CN/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /zh-CN/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/zh-CN/docs/MDN/Contribute/Howto/Tag_JavaScript_pages /zh-CN/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /zh-CN/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /zh-CN/docs/MDN/Contribute/Howto/创建及编辑页面 /zh-CN/docs/MDN/Contribute/Howto/Create_and_edit_pages /zh-CN/docs/MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据 /zh-CN/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data /zh-CN/docs/MDN/Contribute/Howto/学习_交互_在线_起步_开始 /zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web -/zh-CN/docs/MDN/Contribute/Howto/成为一名测试版试验员 /zh-CN/docs/orphaned/MDN/Contribute/Howto/Be_a_beta_tester /zh-CN/docs/MDN/Contribute/Howto/标签 /zh-CN/docs/MDN/Contribute/Howto/Tag -/zh-CN/docs/MDN/Contribute/Howto/标记_JavaScript_页面 /zh-CN/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages /zh-CN/docs/MDN/Contribute/Structures /zh-CN/docs/MDN/Structures /zh-CN/docs/MDN/Contribute/Structures/Live_samples /zh-CN/docs/MDN/Structures/Live_samples -/zh-CN/docs/MDN/Contribute/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/MDN/Contribute/Structures/Macros /zh-CN/docs/MDN/Structures/Macros -/zh-CN/docs/MDN/Editor /zh-CN/docs/orphaned/MDN/Editor -/zh-CN/docs/MDN/Editor/Basics /zh-CN/docs/orphaned/MDN/Editor/Basics -/zh-CN/docs/MDN/Editor/Basics/Page_controls /zh-CN/docs/orphaned/MDN/Editor/Basics/Page_controls -/zh-CN/docs/MDN/Editor/Basics/Page_info /zh-CN/docs/orphaned/MDN/Editor/Basics/Page_info -/zh-CN/docs/MDN/Editor/Edit_box /zh-CN/docs/orphaned/MDN/Editor/Keyboard_shortcuts -/zh-CN/docs/MDN/Editor/Source_mode /zh-CN/docs/orphaned/MDN/Editor/Source_mode /zh-CN/docs/MDN/Feedback /zh-CN/docs/MDN/Contribute/Feedback /zh-CN/docs/MDN/Getting_started /zh-CN/docs/MDN/Contribute/Getting_started -/zh-CN/docs/MDN/Guidelines/Content_blocks /zh-CN/docs/conflicting/MDN/Guidelines/CSS_style_guide /zh-CN/docs/MDN/Guidelines/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Does_this_belong_on_MDN /zh-CN/docs/MDN/Guidelines/Style_guide /zh-CN/docs/MDN/Guidelines/Writing_style_guide /zh-CN/docs/MDN/JavaScript /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create @@ -1277,18 +1143,13 @@ /zh-CN/docs/MDN/JavaScript/Reference/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen /zh-CN/docs/MDN/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor /zh-CN/docs/MDN/Kuma /zh-CN/docs/MDN/Yari -/zh-CN/docs/MDN/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/MDN/Structures/Macros/Custom_macros /zh-CN/docs/MDN/Structures/Macros/Commonly-used_macros /zh-CN/docs/MDN_at_ten /zh-CN/docs/MDN/At_ten -/zh-CN/docs/Media_Gallery /zh-CN/docs/orphaned/Web/Guide/Events/Media_events /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/menus /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/查询 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/剪切板 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/clipboard /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/剪切板/setImageData /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData -/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation /zh-CN/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome /zh-CN/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension /zh-CN/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Walkthrough /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/主页地址 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url @@ -1296,8 +1157,6 @@ /zh-CN/docs/Mozilla/Add-ons/WebExtensions/匹配模板 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns /zh-CN/docs/Mozilla/Add-ons/WebExtensions/实现一个设置页面 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page /zh-CN/docs/Mozilla/Add-ons/WebExtensions/构建一个跨浏览器的扩展插件 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension -/zh-CN/docs/Mozilla/Add-ons/WebExtensions/用户界面元素 /zh-CN/docs/conflicting/Mozilla/Add-ons/WebExtensions/user_interface -/zh-CN/docs/Mozilla/Mozilla_Persona /zh-CN/docs/orphaned/Mozilla/Mozilla_Persona /zh-CN/docs/Mozilla/附加组件 /zh-CN/docs/Mozilla/Add-ons /zh-CN/docs/Mozilla_event_reference /zh-CN/docs/Web/Events /zh-CN/docs/Mozilla_event_reference/DOMContentLoaded_(event) /zh-CN/docs/Web/API/Window/DOMContentLoaded_event @@ -1314,8 +1173,6 @@ /zh-CN/docs/Mozilla_event_reference/visibilitychange /zh-CN/docs/Web/API/Document/visibilitychange_event /zh-CN/docs/Online_and_offline_events /zh-CN/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events /zh-CN/docs/Other_JavaScript_tools /zh-CN/docs/Tools -/zh-CN/docs/Python /zh-CN/docs/conflicting/Learn/Server-side/Django -/zh-CN/docs/Quirks_Mode_and_Standards_Mode /zh-CN/docs/conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode /zh-CN/docs/Rich-Text_Editing_in_Mozilla /zh-CN/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla /zh-CN/docs/SVG /zh-CN/docs/Web/SVG /zh-CN/docs/SVG-840092-dup /zh-CN/docs/Web/SVG @@ -1331,9 +1188,6 @@ /zh-CN/docs/SVG/教程/引言 /zh-CN/docs/Web/SVG/Tutorial/Introduction /zh-CN/docs/SVG_In_HTML_Introduction /zh-CN/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction /zh-CN/docs/Same_origin_policy_for_JavaScript /zh-CN/docs/Web/Security/Same-origin_policy -/zh-CN/docs/Security/CSP /zh-CN/docs/conflicting/Web/HTTP/CSP -/zh-CN/docs/Security/CSP/Introducing_Content_Security_Policy /zh-CN/docs/conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 -/zh-CN/docs/Security/CSP/Using_CSP_violation_reports /zh-CN/docs/conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 /zh-CN/docs/Security/CSP/Using_Content_Security_Policy /zh-CN/docs/Web/HTTP/CSP /zh-CN/docs/Security/HTTP_Strict_Transport_Security /zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security /zh-CN/docs/Server-sent_events /zh-CN/docs/Web/API/Server-sent_events @@ -1347,20 +1201,14 @@ /zh-CN/docs/Site_Compatibility_for_Firefox_21 /zh-CN/docs/Mozilla/Firefox/Releases/21/Site_compatibility /zh-CN/docs/Site_Compatibility_for_Firefox_23 /zh-CN/docs/Mozilla/Firefox/Releases/23/Site_compatibility /zh-CN/docs/Site_Compatibility_for_Firefox_24 /zh-CN/docs/Mozilla/Firefox/Releases/24/Site_compatibility -/zh-CN/docs/Specification_List /zh-CN/docs/orphaned/Web/Specification_list /zh-CN/docs/Tips_for_Authoring_Fast-loading_HTML_Pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /zh-CN/docs/Tools-840092-dup/Remote_Debugging /zh-CN/docs/Tools/Remote_Debugging /zh-CN/docs/Tools-840092-dup/Tools_Toolbox /zh-CN/docs/Tools/Tools_Toolbox -/zh-CN/docs/Tools-840092-dup/Using_the_Source_Editor /zh-CN/docs/conflicting/tools/Keyboard_shortcuts -/zh-CN/docs/Tools/Add-ons /zh-CN/docs/orphaned/Tools/Add-ons /zh-CN/docs/Tools/Firebug迁移 /zh-CN/docs/Tools/Migrating_from_Firebug /zh-CN/docs/Tools/Page_Inspector/3D_view /zh-CN/docs/Tools/3D_View /zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts /zh-CN/docs/Tools/Page_Inspector/How_to/Edit_fonts -/zh-CN/docs/Tools/Page_Inspector/Keyboard_shortcuts /zh-CN/docs/orphaned/Tools/Page_Inspector/Keyboard_shortcuts -/zh-CN/docs/Tools/Profiler /zh-CN/docs/conflicting/Tools/Performance /zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone /zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE /zh-CN/docs/Tools/Responsive_Design_View /zh-CN/docs/Tools/Responsive_Design_Mode -/zh-CN/docs/Tools/Using_the_Source_Editor /zh-CN/docs/conflicting/tools/Keyboard_shortcuts /zh-CN/docs/Tools/Web音频编辑器 /zh-CN/docs/Tools/Web_Audio_Editor /zh-CN/docs/Tools/不推荐的工具 /zh-CN/docs/Tools/Deprecated_tools /zh-CN/docs/Tools/响应式设计视图 /zh-CN/docs/Tools/Responsive_Design_Mode @@ -1370,18 +1218,12 @@ /zh-CN/docs/Tools/标尺 /zh-CN/docs/Tools/Rulers /zh-CN/docs/Transforming_XML_with_XSLT /zh-CN/docs/Web/XSLT/Transforming_XML_with_XSLT /zh-CN/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces /zh-CN/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -/zh-CN/docs/Understanding_Underlines /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /zh-CN/docs/Updating_extensions_for_Firefox_3 /zh-CN/docs/Mozilla/Firefox/Releases/3/Updating_extensions -/zh-CN/docs/Using_XPath /zh-CN/docs/conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Using_files_from_web_applications /zh-CN/docs/Web/API/File/Using_files_from_web_applications /zh-CN/docs/WOFF /zh-CN/docs/Web/Guide/WOFF /zh-CN/docs/Web-based_protocol_handlers /zh-CN/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /zh-CN/docs/Web/API/APIWwindow.sidebar /zh-CN/docs/Web/API/Window/sidebar -/zh-CN/docs/Web/API/AbstractWorker /zh-CN/docs/orphaned/Web/API/AbstractWorker -/zh-CN/docs/Web/API/AbstractWorker/onerror /zh-CN/docs/orphaned/Web/API/AbstractWorker/onerror /zh-CN/docs/Web/API/AmbientLightSensor/reading /zh-CN/docs/Web/API/AmbientLightSensor/illuminance -/zh-CN/docs/Web/API/Ambient_Light_Events /zh-CN/docs/orphaned/Web/API/Ambient_Light_Events -/zh-CN/docs/Web/API/AnalyserNode/fft /zh-CN/docs/orphaned/Web/API/AnalyserNode/fft /zh-CN/docs/Web/API/ArrayBuffer /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /zh-CN/docs/Web/API/ArrayBufferView /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray /zh-CN/docs/Web/API/AudioContext/createAnalyser /zh-CN/docs/Web/API/BaseAudioContext/createAnalyser @@ -1398,64 +1240,38 @@ /zh-CN/docs/Web/API/AudioContext/decodeAudioData /zh-CN/docs/Web/API/BaseAudioContext/decodeAudioData /zh-CN/docs/Web/API/AudioContext/destination /zh-CN/docs/Web/API/BaseAudioContext/destination /zh-CN/docs/Web/API/AudioContext/listener /zh-CN/docs/Web/API/BaseAudioContext/listener -/zh-CN/docs/Web/API/AudioContext/mozAudioChannelType /zh-CN/docs/orphaned/Web/API/AudioContext/mozAudioChannelType /zh-CN/docs/Web/API/AudioContext/onstatechange /zh-CN/docs/Web/API/BaseAudioContext/onstatechange /zh-CN/docs/Web/API/AudioContext/sampleRate /zh-CN/docs/Web/API/BaseAudioContext/sampleRate /zh-CN/docs/Web/API/AudioContext/state /zh-CN/docs/Web/API/BaseAudioContext/state -/zh-CN/docs/Web/API/AudioNode/connect(AudioParam) /zh-CN/docs/orphaned/Web/API/AudioNode/connect(AudioParam) -/zh-CN/docs/Web/API/Beacon_API/Using_the_Beacon_API /zh-CN/docs/conflicting/Web/API/Beacon_API /zh-CN/docs/Web/API/Blob.size /zh-CN/docs/Web/API/Blob/size /zh-CN/docs/Web/API/Blob.slice /zh-CN/docs/Web/API/Blob/slice /zh-CN/docs/Web/API/Blob.type /zh-CN/docs/Web/API/Blob/type -/zh-CN/docs/Web/API/Body /zh-CN/docs/orphaned/Web/API/Body -/zh-CN/docs/Web/API/Body/arrayBuffer /zh-CN/docs/orphaned/Web/API/Body/arrayBuffer -/zh-CN/docs/Web/API/Body/blob /zh-CN/docs/orphaned/Web/API/Body/blob -/zh-CN/docs/Web/API/Body/body /zh-CN/docs/orphaned/Web/API/Body/body -/zh-CN/docs/Web/API/Body/bodyUsed /zh-CN/docs/orphaned/Web/API/Body/bodyUsed -/zh-CN/docs/Web/API/Body/formData /zh-CN/docs/orphaned/Web/API/Body/formData -/zh-CN/docs/Web/API/Body/json /zh-CN/docs/orphaned/Web/API/Body/json -/zh-CN/docs/Web/API/Body/text /zh-CN/docs/orphaned/Web/API/Body/text -/zh-CN/docs/Web/API/CSSMatrix /zh-CN/docs/conflicting/Web/API/DOMMatrix /zh-CN/docs/Web/API/CSSStyleSheet.insertRule /zh-CN/docs/Web/API/CSSStyleSheet/insertRule /zh-CN/docs/Web/API/CSS分页规则 /zh-CN/docs/Web/API/CSSPageRule /zh-CN/docs/Web/API/CanvasCaptureMediaStream /zh-CN/docs/Web/API/CanvasCaptureMediaStreamTrack /zh-CN/docs/Web/API/CanvasGradient.addColorStop /zh-CN/docs/Web/API/CanvasGradient/addColorStop /zh-CN/docs/Web/API/CanvasRenderingContext2D.createLinearGradient /zh-CN/docs/Web/API/CanvasRenderingContext2D/createLinearGradient /zh-CN/docs/Web/API/CanvasRenderingContext2D.createPattern /zh-CN/docs/Web/API/CanvasRenderingContext2D/createPattern -/zh-CN/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /zh-CN/docs/conflicting/Web/API/Canvas_API/Tutorial /zh-CN/docs/Web/API/Channel_Messaging_API/使用_channel_messaging /zh-CN/docs/Web/API/Channel_Messaging_API/Using_channel_messaging -/zh-CN/docs/Web/API/ChildNode /zh-CN/docs/orphaned/Web/API/ChildNode /zh-CN/docs/Web/API/ChildNode.nextElementSibling /zh-CN/docs/Web/API/Element/nextElementSibling -/zh-CN/docs/Web/API/ChildNode.remove /zh-CN/docs/orphaned/Web/API/ChildNode/remove -/zh-CN/docs/Web/API/ChildNode/after /zh-CN/docs/orphaned/Web/API/ChildNode/after -/zh-CN/docs/Web/API/ChildNode/before /zh-CN/docs/orphaned/Web/API/ChildNode/before -/zh-CN/docs/Web/API/ChildNode/remove /zh-CN/docs/orphaned/Web/API/ChildNode/remove -/zh-CN/docs/Web/API/ChildNode/replaceWith /zh-CN/docs/orphaned/Web/API/ChildNode/replaceWith /zh-CN/docs/Web/API/Childnode.previousElementSibling /zh-CN/docs/Web/API/Element/previousElementSibling /zh-CN/docs/Web/API/Coordinates /zh-CN/docs/Web/API/GeolocationCoordinates /zh-CN/docs/Web/API/Coordinates/latitude /zh-CN/docs/Web/API/GeolocationCoordinates/latitude /zh-CN/docs/Web/API/DOMImplementation.createHTMLDocument /zh-CN/docs/Web/API/DOMImplementation/createHTMLDocument /zh-CN/docs/Web/API/DOMImplementation.hasFeature /zh-CN/docs/Web/API/DOMImplementation/hasFeature -/zh-CN/docs/Web/API/DOMLocator /zh-CN/docs/orphaned/Web/API/DOMLocator -/zh-CN/docs/Web/API/Detecting_device_orientation /zh-CN/docs/orphaned/Web/API/Detecting_device_orientation /zh-CN/docs/Web/API/DeviceAcceleration /zh-CN/docs/Web/API/DeviceMotionEventAcceleration -/zh-CN/docs/Web/API/DeviceLightEvent /zh-CN/docs/orphaned/Web/API/DeviceLightEvent -/zh-CN/docs/Web/API/DeviceLightEvent/Using_light_events /zh-CN/docs/orphaned/Web/API/Ambient_Light_Events /zh-CN/docs/Web/API/Document.querySelectorAll /zh-CN/docs/Web/API/Document/querySelectorAll /zh-CN/docs/Web/API/Document.releaseCapture /zh-CN/docs/Web/API/Document/releaseCapture /zh-CN/docs/Web/API/Document/async /zh-CN/docs/Web/API/XMLDocument/async -/zh-CN/docs/Web/API/Document/cookie/Simple_document.cookie_framework /zh-CN/docs/orphaned/Web/API/Document/cookie/Simple_document.cookie_framework /zh-CN/docs/Web/API/Document/defaultView/popstate_event /zh-CN/docs/Web/API/Window/popstate_event /zh-CN/docs/Web/API/Document/defaultView/resize_event /zh-CN/docs/Web/API/Window/resize_event /zh-CN/docs/Web/API/Document/defaultView/storage_event /zh-CN/docs/Web/API/Window/storage_event /zh-CN/docs/Web/API/Document/domConfig /zh-CN/docs/Web/API/Document -/zh-CN/docs/Web/API/Document/inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet /zh-CN/docs/Web/API/Document/mozFullScreen /zh-CN/docs/Web/API/Document/fullscreen /zh-CN/docs/Web/API/Document/mozFullScreenElement /zh-CN/docs/Web/API/Document/fullscreenElement /zh-CN/docs/Web/API/Document/mozFullScreenEnabled /zh-CN/docs/Web/API/Document/fullscreenEnabled /zh-CN/docs/Web/API/Document/onreadystatechange /en-US/docs/Web/API/Document/readystatechange_event /zh-CN/docs/Web/API/Document/rouchmove_event /zh-CN/docs/Web/API/Document/touchmove_event -/zh-CN/docs/Web/API/DocumentOrShadowRoot /zh-CN/docs/orphaned/Web/API/DocumentOrShadowRoot /zh-CN/docs/Web/API/DocumentOrShadowRoot/activeElement /zh-CN/docs/Web/API/Document/activeElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /zh-CN/docs/Web/API/Document/elementFromPoint /zh-CN/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint /zh-CN/docs/Web/API/Document/elementsFromPoint @@ -1463,9 +1279,6 @@ /zh-CN/docs/Web/API/DocumentOrShadowRoot/getSelection /zh-CN/docs/Web/API/Document/getSelection /zh-CN/docs/Web/API/DocumentOrShadowRoot/pointerLockElement /zh-CN/docs/Web/API/Document/pointerLockElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/styleSheets /zh-CN/docs/Web/API/Document/styleSheets -/zh-CN/docs/Web/API/DocumentTouch /zh-CN/docs/orphaned/Web/API/DocumentTouch -/zh-CN/docs/Web/API/Document_Object_Model/Events /zh-CN/docs/orphaned/Web/API/Document_Object_Model/Events -/zh-CN/docs/Web/API/Document_Object_Model/Preface /zh-CN/docs/conflicting/Web/API/Document_Object_Model /zh-CN/docs/Web/API/Element.classList /zh-CN/docs/Web/API/Element/classList /zh-CN/docs/Web/API/Element.className /zh-CN/docs/Web/API/Element/className /zh-CN/docs/Web/API/Element.clientLeft /zh-CN/docs/Web/API/Element/clientLeft @@ -1483,7 +1296,6 @@ /zh-CN/docs/Web/API/Element.innerHTML /zh-CN/docs/Web/API/Element/innerHTML /zh-CN/docs/Web/API/Element.insertAdjacentHTML /zh-CN/docs/Web/API/Element/insertAdjacentHTML /zh-CN/docs/Web/API/Element.matches /zh-CN/docs/Web/API/Element/matches -/zh-CN/docs/Web/API/Element.name /zh-CN/docs/conflicting/Web/API /zh-CN/docs/Web/API/Element.onafterscriptexecute /zh-CN/docs/Web/API/Document/onafterscriptexecute /zh-CN/docs/Web/API/Element.onbeforescriptexecute /zh-CN/docs/Web/API/Document/onbeforescriptexecute /zh-CN/docs/Web/API/Element.oncopy /zh-CN/docs/Web/API/HTMLElement/oncopy @@ -1500,37 +1312,21 @@ /zh-CN/docs/Web/API/Element/Activate_event /zh-CN/docs/Web/API/Element/DOMActivate_event /zh-CN/docs/Web/API/Element/accessKey /zh-CN/docs/Web/API/HTMLElement/accessKey /zh-CN/docs/Web/API/Element/addEventListener /zh-CN/docs/Web/API/EventTarget/addEventListener -/zh-CN/docs/Web/API/Element/currentStyle /zh-CN/docs/orphaned/Web/API/Element/currentStyle -/zh-CN/docs/Web/API/Element/name /zh-CN/docs/conflicting/Web/API /zh-CN/docs/Web/API/Element/onafterscriptexecute /zh-CN/docs/Web/API/Document/onafterscriptexecute /zh-CN/docs/Web/API/Element/onbeforescriptexecute /zh-CN/docs/Web/API/Document/onbeforescriptexecute /zh-CN/docs/Web/API/Element/oncopy /zh-CN/docs/Web/API/HTMLElement/oncopy /zh-CN/docs/Web/API/Element/oncut /zh-CN/docs/Web/API/HTMLElement/oncut -/zh-CN/docs/Web/API/Element/ongotpointercapture /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/ongotpointercapture /zh-CN/docs/Web/API/Element/onpaste /zh-CN/docs/Web/API/HTMLElement/onpaste /zh-CN/docs/Web/API/Element/removeAttributre /zh-CN/docs/Web/API/Element/removeAttribute -/zh-CN/docs/Web/API/Element/runtimeStyle /zh-CN/docs/orphaned/Web/API/Element/runtimeStyle -/zh-CN/docs/Web/API/ElementCSSInlineStyle/style /zh-CN/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/zh-CN/docs/Web/API/Entity /zh-CN/docs/orphaned/Web/API/Entity /zh-CN/docs/Web/API/Event/CustomEvent /zh-CN/docs/Web/API/CustomEvent -/zh-CN/docs/Web/API/Event/altKey /zh-CN/docs/conflicting/Web/API/MouseEvent/altKey -/zh-CN/docs/Web/API/Event/button /zh-CN/docs/conflicting/Web/API/MouseEvent/button -/zh-CN/docs/Web/API/Event/createEvent /zh-CN/docs/conflicting/Web/API/Document/createEvent -/zh-CN/docs/Web/API/Event/deepPath /zh-CN/docs/conflicting/Web/API/Event/composedPath /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/relatedTarget /zh-CN/docs/conflicting/Web/API/MouseEvent/relatedTarget -/zh-CN/docs/Web/API/Event/shiftKey /zh-CN/docs/conflicting/Web/API/MouseEvent/shiftKey /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 -/zh-CN/docs/Web/API/EventTarget/attachEvent /zh-CN/docs/conflicting/Web/API/EventTarget/addEventListener -/zh-CN/docs/Web/API/EventTarget/detachEvent /zh-CN/docs/conflicting/Web/API/EventTarget/removeEventListener -/zh-CN/docs/Web/API/EventTarget/fireEvent /zh-CN/docs/conflicting/Web/API/EventTarget/dispatchEvent /zh-CN/docs/Web/API/FetchController /zh-CN/docs/Web/API/AbortController /zh-CN/docs/Web/API/FetchController/AbortController /zh-CN/docs/Web/API/AbortController/AbortController /zh-CN/docs/Web/API/FetchController/abort /zh-CN/docs/Web/API/AbortController/abort -/zh-CN/docs/Web/API/FetchObserver /zh-CN/docs/orphaned/Web/API/FetchObserver /zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Basic_concepts /zh-CN/docs/Web/API/File.fileName /zh-CN/docs/Web/API/File/fileName /zh-CN/docs/Web/API/File.fileSize /zh-CN/docs/Web/API/File/fileSize @@ -1562,7 +1358,6 @@ /zh-CN/docs/Web/API/GlobalEventHandlers.onscroll /zh-CN/docs/Web/API/GlobalEventHandlers/onscroll /zh-CN/docs/Web/API/GlobalEventHandlers.onselect /zh-CN/docs/Web/API/GlobalEventHandlers/onselect /zh-CN/docs/Web/API/GlobalEventHandlers.onsubmit /zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit -/zh-CN/docs/Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/ontouchmove /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 @@ -1572,7 +1367,6 @@ /zh-CN/docs/Web/API/HTMLElement.blur /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/blur /zh-CN/docs/Web/API/HTMLElement.click /zh-CN/docs/Web/API/HTMLElement/click /zh-CN/docs/Web/API/HTMLElement.contentEditable /zh-CN/docs/Web/API/HTMLElement/contentEditable -/zh-CN/docs/Web/API/HTMLElement.dataset /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/dataset /zh-CN/docs/Web/API/HTMLElement.dir /zh-CN/docs/Web/API/HTMLElement/dir /zh-CN/docs/Web/API/HTMLElement.focus /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/focus /zh-CN/docs/Web/API/HTMLElement.isContentEditable /zh-CN/docs/Web/API/HTMLElement/isContentEditable @@ -1581,20 +1375,10 @@ /zh-CN/docs/Web/API/HTMLElement.offsetParent /zh-CN/docs/Web/API/HTMLElement/offsetParent /zh-CN/docs/Web/API/HTMLElement.offsetTop /zh-CN/docs/Web/API/HTMLElement/offsetTop /zh-CN/docs/Web/API/HTMLElement.offsetWidth /zh-CN/docs/Web/API/HTMLElement/offsetWidth -/zh-CN/docs/Web/API/HTMLElement.style /zh-CN/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/zh-CN/docs/Web/API/HTMLElement.tabIndex /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/Web/API/HTMLElement.title /zh-CN/docs/Web/API/HTMLElement/title -/zh-CN/docs/Web/API/HTMLElement/blur /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/blur -/zh-CN/docs/Web/API/HTMLElement/dataset /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/zh-CN/docs/Web/API/HTMLElement/focus /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/focus -/zh-CN/docs/Web/API/HTMLElement/forceSpellCheck /zh-CN/docs/orphaned/Web/API/HTMLElement/forceSpellCheck -/zh-CN/docs/Web/API/HTMLElement/nonce /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/nonce -/zh-CN/docs/Web/API/HTMLElement/style /zh-CN/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/zh-CN/docs/Web/API/HTMLElement/tabIndex /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/Web/API/HTMLFormElement.elements /zh-CN/docs/Web/API/HTMLFormElement/elements /zh-CN/docs/Web/API/HTMLFormElement.reset /zh-CN/docs/Web/API/HTMLFormElement/reset /zh-CN/docs/Web/API/HTMLFormElement.submit /zh-CN/docs/Web/API/HTMLFormElement/submit -/zh-CN/docs/Web/API/HTMLHyperlinkElementUtils /zh-CN/docs/orphaned/Web/API/HTMLHyperlinkElementUtils /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/hash /zh-CN/docs/Web/API/HTMLAnchorElement/hash /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/href /zh-CN/docs/Web/API/HTMLAnchorElement/href /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/origin /zh-CN/docs/Web/API/HTMLAnchorElement/origin @@ -1603,78 +1387,31 @@ /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/search /zh-CN/docs/Web/API/HTMLAnchorElement/search /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/HTMLInputElement.mozSetFileNameArray /zh-CN/docs/conflicting/Web/API/HTMLInputElement -/zh-CN/docs/Web/API/HTMLInputElement/mozSetFileNameArray /zh-CN/docs/conflicting/Web/API/HTMLInputElement -/zh-CN/docs/Web/API/HTMLOrForeignElement/blur /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/blur -/zh-CN/docs/Web/API/HTMLOrForeignElement/dataset /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/zh-CN/docs/Web/API/HTMLOrForeignElement/focus /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/focus -/zh-CN/docs/Web/API/HTMLOrForeignElement/nonce /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/nonce -/zh-CN/docs/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/Web/API/HTMLTableElement.deleteTHead /zh-CN/docs/Web/API/HTMLTableElement/deleteTHead /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/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /zh-CN/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /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 -/zh-CN/docs/Web/API/MSSelection /zh-CN/docs/orphaned/Web/API/MSSelection /zh-CN/docs/Web/API/MediaStream.addTrack /zh-CN/docs/Web/API/MediaStream/addTrack -/zh-CN/docs/Web/API/NameList /zh-CN/docs/orphaned/Web/API/NameList /zh-CN/docs/Web/API/Navigator.battery /zh-CN/docs/Web/API/Navigator/battery /zh-CN/docs/Web/API/Navigator.buildID /zh-CN/docs/Web/API/Navigator/buildID /zh-CN/docs/Web/API/Navigator.cookieEnabled /zh-CN/docs/Web/API/Navigator/cookieEnabled /zh-CN/docs/Web/API/Navigator.mozIsLocallyAvailable /zh-CN/docs/Web/API/Navigator/mozIsLocallyAvailable /zh-CN/docs/Web/API/Navigator.oscpu /zh-CN/docs/Web/API/Navigator/oscpu -/zh-CN/docs/Web/API/Navigator.registerContentHandler /zh-CN/docs/orphaned/Web/API/Navigator/registerContentHandler /zh-CN/docs/Web/API/Navigator.vendor /zh-CN/docs/Web/API/Navigator/vendor /zh-CN/docs/Web/API/Navigator.vendorSub /zh-CN/docs/Web/API/Navigator/vendorSub -/zh-CN/docs/Web/API/Navigator/registerContentHandler /zh-CN/docs/orphaned/Web/API/Navigator/registerContentHandler -/zh-CN/docs/Web/API/NavigatorConcurrentHardware /zh-CN/docs/orphaned/Web/API/NavigatorConcurrentHardware -/zh-CN/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency /zh-CN/docs/orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency -/zh-CN/docs/Web/API/NavigatorGeolocation /zh-CN/docs/conflicting/Web/API/Geolocation /zh-CN/docs/Web/API/NavigatorGeolocation.geolocation /zh-CN/docs/Web/API/Navigator/geolocation /zh-CN/docs/Web/API/NavigatorGeolocation/geolocation /zh-CN/docs/Web/API/Navigator/geolocation -/zh-CN/docs/Web/API/NavigatorID /zh-CN/docs/orphaned/Web/API/NavigatorID -/zh-CN/docs/Web/API/NavigatorID.appCodeName /zh-CN/docs/orphaned/Web/API/NavigatorID/appCodeName -/zh-CN/docs/Web/API/NavigatorID.appName /zh-CN/docs/orphaned/Web/API/NavigatorID/appName -/zh-CN/docs/Web/API/NavigatorID.appVersion /zh-CN/docs/orphaned/Web/API/NavigatorID/appVersion -/zh-CN/docs/Web/API/NavigatorID.platform /zh-CN/docs/orphaned/Web/API/NavigatorID/platform -/zh-CN/docs/Web/API/NavigatorID.product /zh-CN/docs/orphaned/Web/API/NavigatorID/product -/zh-CN/docs/Web/API/NavigatorID.userAgent /zh-CN/docs/orphaned/Web/API/NavigatorID/userAgent -/zh-CN/docs/Web/API/NavigatorID/appCodeName /zh-CN/docs/orphaned/Web/API/NavigatorID/appCodeName -/zh-CN/docs/Web/API/NavigatorID/appName /zh-CN/docs/orphaned/Web/API/NavigatorID/appName -/zh-CN/docs/Web/API/NavigatorID/appVersion /zh-CN/docs/orphaned/Web/API/NavigatorID/appVersion -/zh-CN/docs/Web/API/NavigatorID/platform /zh-CN/docs/orphaned/Web/API/NavigatorID/platform -/zh-CN/docs/Web/API/NavigatorID/product /zh-CN/docs/orphaned/Web/API/NavigatorID/product -/zh-CN/docs/Web/API/NavigatorID/userAgent /zh-CN/docs/orphaned/Web/API/NavigatorID/userAgent -/zh-CN/docs/Web/API/NavigatorLanguage /zh-CN/docs/orphaned/Web/API/NavigatorLanguage -/zh-CN/docs/Web/API/NavigatorLanguage.language /zh-CN/docs/orphaned/Web/API/NavigatorLanguage/language -/zh-CN/docs/Web/API/NavigatorLanguage/language /zh-CN/docs/orphaned/Web/API/NavigatorLanguage/language -/zh-CN/docs/Web/API/NavigatorLanguage/languages /zh-CN/docs/orphaned/Web/API/NavigatorLanguage/languages -/zh-CN/docs/Web/API/NavigatorOnLine /zh-CN/docs/orphaned/Web/API/NavigatorOnLine -/zh-CN/docs/Web/API/NavigatorOnLine.onLine /zh-CN/docs/orphaned/Web/API/NavigatorOnLine/onLine -/zh-CN/docs/Web/API/NavigatorOnLine/Online_and_offline_events /zh-CN/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -/zh-CN/docs/Web/API/NavigatorOnLine/onLine /zh-CN/docs/orphaned/Web/API/NavigatorOnLine/onLine -/zh-CN/docs/Web/API/NavigatorPlugins /zh-CN/docs/orphaned/Web/API/NavigatorPlugins -/zh-CN/docs/Web/API/NavigatorPlugins.javaEnabled /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/javaEnabled -/zh-CN/docs/Web/API/NavigatorPlugins.plugins /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/plugins -/zh-CN/docs/Web/API/NavigatorPlugins/javaEnabled /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/javaEnabled -/zh-CN/docs/Web/API/NavigatorPlugins/mimeTypes /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/mimeTypes -/zh-CN/docs/Web/API/NavigatorPlugins/plugins /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/plugins -/zh-CN/docs/Web/API/NavigatorPlugins/测试滕盖 /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/测试滕盖 -/zh-CN/docs/Web/API/NavigatorStorage /zh-CN/docs/orphaned/Web/API/NavigatorStorage -/zh-CN/docs/Web/API/NavigatorStorage/storage /zh-CN/docs/orphaned/Web/API/NavigatorStorage/storage /zh-CN/docs/Web/API/Node.appendChild /zh-CN/docs/Web/API/Node/appendChild /zh-CN/docs/Web/API/Node.attributes /zh-CN/docs/Web/API/Element/attributes /zh-CN/docs/Web/API/Node.baseURI /zh-CN/docs/Web/API/Node/baseURI -/zh-CN/docs/Web/API/Node.baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/Web/API/Node.childNodes /zh-CN/docs/Web/API/Node/childNodes /zh-CN/docs/Web/API/Node.cloneNode /zh-CN/docs/Web/API/Node/cloneNode /zh-CN/docs/Web/API/Node.compareDocumentPosition /zh-CN/docs/Web/API/Node/compareDocumentPosition /zh-CN/docs/Web/API/Node.contains /zh-CN/docs/Web/API/Node/contains /zh-CN/docs/Web/API/Node.firstChild /zh-CN/docs/Web/API/Node/firstChild -/zh-CN/docs/Web/API/Node.getUserData /zh-CN/docs/orphaned/Web/API/Node/getUserData /zh-CN/docs/Web/API/Node.hasAttributes /zh-CN/docs/Web/API/Element/hasAttributes /zh-CN/docs/Web/API/Node.hasChildNodes /zh-CN/docs/Web/API/Node/hasChildNodes /zh-CN/docs/Web/API/Node.insertBefore /zh-CN/docs/Web/API/Node/insertBefore @@ -1683,72 +1420,38 @@ /zh-CN/docs/Web/API/Node.isSameNode /zh-CN/docs/Web/API/Node/isSameNode /zh-CN/docs/Web/API/Node.isSupported /zh-CN/docs/Web/API/Node/isSupported /zh-CN/docs/Web/API/Node.lastChild /zh-CN/docs/Web/API/Node/lastChild -/zh-CN/docs/Web/API/Node.localName /zh-CN/docs/conflicting/Web/API/Element/localName /zh-CN/docs/Web/API/Node.lookupNamespaceURI /zh-CN/docs/Web/API/Node/lookupNamespaceURI /zh-CN/docs/Web/API/Node.lookupPrefix /zh-CN/docs/Web/API/Node/lookupPrefix -/zh-CN/docs/Web/API/Node.namespaceURI /zh-CN/docs/conflicting/Web/API/Element/namespaceURI /zh-CN/docs/Web/API/Node.nextSibling /zh-CN/docs/Web/API/Node/nextSibling /zh-CN/docs/Web/API/Node.nodeName /zh-CN/docs/Web/API/Node/nodeName -/zh-CN/docs/Web/API/Node.nodePrincipal /zh-CN/docs/conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 /zh-CN/docs/Web/API/Node.nodeType /zh-CN/docs/Web/API/Node/nodeType /zh-CN/docs/Web/API/Node.nodeValue /zh-CN/docs/Web/API/Node/nodeValue /zh-CN/docs/Web/API/Node.normalize /zh-CN/docs/Web/API/Node/normalize /zh-CN/docs/Web/API/Node.ownerDocument /zh-CN/docs/Web/API/Node/ownerDocument /zh-CN/docs/Web/API/Node.parentElement /zh-CN/docs/Web/API/Node/parentElement /zh-CN/docs/Web/API/Node.parentNode /zh-CN/docs/Web/API/Node/parentNode -/zh-CN/docs/Web/API/Node.prefix /zh-CN/docs/conflicting/Web/API/Element/prefix /zh-CN/docs/Web/API/Node.previousSibling /zh-CN/docs/Web/API/Node/previousSibling /zh-CN/docs/Web/API/Node.removeChild /zh-CN/docs/Web/API/Node/removeChild /zh-CN/docs/Web/API/Node.replaceChild /zh-CN/docs/Web/API/Node/replaceChild -/zh-CN/docs/Web/API/Node.setUserData /zh-CN/docs/orphaned/Web/API/Node/setUserData /zh-CN/docs/Web/API/Node.textContent /zh-CN/docs/Web/API/Node/textContent /zh-CN/docs/Web/API/Node/C /zh-CN/docs/Web/API/Node/contains -/zh-CN/docs/Web/API/Node/baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/Web/API/Node/childNodes_temp /zh-CN/docs/Web/API/Node/childNodes -/zh-CN/docs/Web/API/Node/getUserData /zh-CN/docs/orphaned/Web/API/Node/getUserData /zh-CN/docs/Web/API/Node/hasAttributes /zh-CN/docs/Web/API/Element/hasAttributes /zh-CN/docs/Web/API/Node/innerText /zh-CN/docs/Web/API/HTMLElement/innerText -/zh-CN/docs/Web/API/Node/localName /zh-CN/docs/conflicting/Web/API/Element/localName -/zh-CN/docs/Web/API/Node/namespaceURI /zh-CN/docs/conflicting/Web/API/Element/namespaceURI -/zh-CN/docs/Web/API/Node/nodePrincipal /zh-CN/docs/conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 -/zh-CN/docs/Web/API/Node/outerText /zh-CN/docs/conflicting/Web/API/HTMLElement/outerText -/zh-CN/docs/Web/API/Node/prefix /zh-CN/docs/conflicting/Web/API/Element/prefix -/zh-CN/docs/Web/API/Node/rootNode /zh-CN/docs/conflicting/Web/API/Node/getRootNode -/zh-CN/docs/Web/API/Node/setUserData /zh-CN/docs/orphaned/Web/API/Node/setUserData /zh-CN/docs/Web/API/NodeList.item /zh-CN/docs/Web/API/NodeList/item -/zh-CN/docs/Web/API/NonDocumentTypeChildNode /zh-CN/docs/conflicting/Web/API/Element_861159909c20acebf8e506c3bb0e2f7e /zh-CN/docs/Web/API/NonDocumentTypeChildNode.nextElementSibling /zh-CN/docs/Web/API/Element/nextElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode.previousElementSibling /zh-CN/docs/Web/API/Element/previousElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling /zh-CN/docs/Web/API/Element/nextElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling /zh-CN/docs/Web/API/Element/previousElementSibling -/zh-CN/docs/Web/API/Notation /zh-CN/docs/orphaned/Web/API/Notation /zh-CN/docs/Web/API/OfflineAudioContext/complete /zh-CN/docs/Web/API/OfflineAudioContext/complete_event -/zh-CN/docs/Web/API/OscillatorNode/stop /zh-CN/docs/orphaned/Web/API/OscillatorNode/stop -/zh-CN/docs/Web/API/ParentNode /zh-CN/docs/orphaned/Web/API/ParentNode /zh-CN/docs/Web/API/ParentNode.childElementCount /zh-CN/docs/Web/API/Element/childElementCount -/zh-CN/docs/Web/API/ParentNode.children /zh-CN/docs/orphaned/Web/API/ParentNode/children -/zh-CN/docs/Web/API/ParentNode.firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild -/zh-CN/docs/Web/API/ParentNode.lastElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/lastElementChild -/zh-CN/docs/Web/API/ParentNode/append /zh-CN/docs/orphaned/Web/API/ParentNode/append /zh-CN/docs/Web/API/ParentNode/childElementCount /zh-CN/docs/Web/API/Element/childElementCount -/zh-CN/docs/Web/API/ParentNode/children /zh-CN/docs/orphaned/Web/API/ParentNode/children -/zh-CN/docs/Web/API/ParentNode/firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild -/zh-CN/docs/Web/API/ParentNode/lastElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/lastElementChild -/zh-CN/docs/Web/API/ParentNode/prepend /zh-CN/docs/orphaned/Web/API/ParentNode/prepend -/zh-CN/docs/Web/API/ParentNode/querySelector /zh-CN/docs/orphaned/Web/API/ParentNode/querySelector -/zh-CN/docs/Web/API/ParentNode/querySelectorAll /zh-CN/docs/orphaned/Web/API/ParentNode/querySelectorAll -/zh-CN/docs/Web/API/ParentNode/replaceChildren /zh-CN/docs/orphaned/Web/API/ParentNode/replaceChildren /zh-CN/docs/Web/API/Performance.now() /zh-CN/docs/Web/API/Performance/now /zh-CN/docs/Web/API/Performance/内存 /zh-CN/docs/Web/API/Performance/memory /zh-CN/docs/Web/API/Position /zh-CN/docs/Web/API/GeolocationPosition /zh-CN/docs/Web/API/Position/coords /zh-CN/docs/Web/API/GeolocationPosition/coords /zh-CN/docs/Web/API/PositionError /zh-CN/docs/Web/API/GeolocationPositionError -/zh-CN/docs/Web/API/Push_API/Using_the_Push_API /zh-CN/docs/conflicting/Web/API/Push_API -/zh-CN/docs/Web/API/RTCPeerConnection/getDefaultIceServers /zh-CN/docs/orphaned/Web/API/RTCPeerConnection/getDefaultIceServers -/zh-CN/docs/Web/API/RandomSource /zh-CN/docs/conflicting/Web/API/Crypto/getRandomValues /zh-CN/docs/Web/API/RandomSource/getRandomValues /zh-CN/docs/Web/API/Crypto/getRandomValues -/zh-CN/docs/Web/API/RenderingContext /zh-CN/docs/orphaned/Web/API/RenderingContext -/zh-CN/docs/Web/API/Request/context /zh-CN/docs/orphaned/Web/API/Request/context /zh-CN/docs/Web/API/Response/克隆 /zh-CN/docs/Web/API/Response/clone /zh-CN/docs/Web/API/SVGPathElement/getTotalLength /zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength /zh-CN/docs/Web/API/Screen.availHeight /zh-CN/docs/Web/API/Screen/availHeight @@ -1767,15 +1470,12 @@ /zh-CN/docs/Web/API/Selection.isCollapsed /zh-CN/docs/Web/API/Selection/isCollapsed /zh-CN/docs/Web/API/Selection.removeRange /zh-CN/docs/Web/API/Selection/removeRange /zh-CN/docs/Web/API/Selection/从Document中删除 /zh-CN/docs/Web/API/Selection/deleteFromDocument -/zh-CN/docs/Web/API/Slotable /zh-CN/docs/conflicting/Web/API/Element -/zh-CN/docs/Web/API/Storage/LocalStorage /zh-CN/docs/conflicting/Web/API/Window/localStorage /zh-CN/docs/Web/API/Streams_API/使用可读文件流 /zh-CN/docs/Web/API/Streams_API/Using_readable_streams /zh-CN/docs/Web/API/Streams_API/概念 /zh-CN/docs/Web/API/Streams_API/Concepts /zh-CN/docs/Web/API/Text.isElementContentWhitespace /zh-CN/docs/Web/API/Text/isElementContentWhitespace /zh-CN/docs/Web/API/Text.replaceWholeText /zh-CN/docs/Web/API/Text/replaceWholeText /zh-CN/docs/Web/API/Text.splitText /zh-CN/docs/Web/API/Text/splitText /zh-CN/docs/Web/API/TextEncoder.TextEncoder /zh-CN/docs/Web/API/TextEncoder/TextEncoder -/zh-CN/docs/Web/API/TextRange/text /zh-CN/docs/orphaned/Web/API/TextRange/text /zh-CN/docs/Web/API/Touch.clientX /zh-CN/docs/Web/API/Touch/clientX /zh-CN/docs/Web/API/Touch.clientY /zh-CN/docs/Web/API/Touch/clientY /zh-CN/docs/Web/API/Touch.force /zh-CN/docs/Web/API/Touch/force @@ -1788,14 +1488,11 @@ /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/TypeInfo /zh-CN/docs/orphaned/Web/API/TypeInfo -/zh-CN/docs/Web/API/UIEvent/cancelBubble /zh-CN/docs/orphaned/Web/API/UIEvent/cancelBubble /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 /zh-CN/docs/Web/API/URL.revokeObjectURL /zh-CN/docs/Web/API/URL/revokeObjectURL /zh-CN/docs/Web/API/URL/密码 /zh-CN/docs/Web/API/URL/password -/zh-CN/docs/Web/API/URLUtils /zh-CN/docs/orphaned/Web/API/HTMLHyperlinkElementUtils /zh-CN/docs/Web/API/URLUtils/hash /zh-CN/docs/Web/API/HTMLAnchorElement/hash /zh-CN/docs/Web/API/URLUtils/href /zh-CN/docs/Web/API/HTMLAnchorElement/href /zh-CN/docs/Web/API/URLUtils/origin /zh-CN/docs/Web/API/HTMLAnchorElement/origin @@ -1807,11 +1504,7 @@ /zh-CN/docs/Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) /zh-CN/docs/Web/API/WebGLRenderingContext/polygonOffset /zh-CN/docs/Web/API/WebGL_API/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/API/WebGL_API/Getting_started_with_WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/zh-CN/docs/Web/API/WebRTC_API/Architecture /zh-CN/docs/conflicting/Web/API/WebRTC_API/Protocols -/zh-CN/docs/Web/API/WebRTC_API/Overview /zh-CN/docs/conflicting/Web/API/WebRTC_API -/zh-CN/docs/Web/API/WebRTC_API/WebRTC_basics /zh-CN/docs/conflicting/Web/API/WebRTC_API/Signaling_and_video_calling /zh-CN/docs/Web/API/WebSocket/二进制类型 /zh-CN/docs/Web/API/WebSocket/binaryType -/zh-CN/docs/Web/API/WebSockets_API/WebSocket_Server_Vb.NET /zh-CN/docs/orphaned/Web/API/WebSockets_API/WebSocket_Server_Vb.NET /zh-CN/docs/Web/API/WebVR_API/WebVR_concepts /zh-CN/docs/Web/API/WebVR_API/Concepts /zh-CN/docs/Web/API/Web_Audio_API/基于Web_Audio_API实现的音频可视化效果 /zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API /zh-CN/docs/Web/API/Web_Audio_API/最佳实践 /zh-CN/docs/Web/API/Web_Audio_API/Best_practices @@ -1842,7 +1535,6 @@ /zh-CN/docs/Web/API/Window.navigator /zh-CN/docs/Web/API/Window/navigator /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.onmouseup /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onmouseup /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 @@ -1866,24 +1558,16 @@ /zh-CN/docs/Web/API/Window.setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/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/URL /zh-CN/docs/conflicting/Web/API/URL /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/getAttention /zh-CN/docs/orphaned/Web/API/Window/getAttention /zh-CN/docs/Web/API/Window/onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload -/zh-CN/docs/Web/API/Window/ondevicelight /zh-CN/docs/orphaned/Web/API/Window/ondevicelight -/zh-CN/docs/Web/API/Window/ondeviceproximity /zh-CN/docs/orphaned/Web/API/Window/ondeviceproximity /zh-CN/docs/Web/API/Window/onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange -/zh-CN/docs/Web/API/Window/onmouseup /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onmouseup /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/onscroll /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /zh-CN/docs/Web/API/Window/onunload /zh-CN/docs/Web/API/WindowEventHandlers/onunload -/zh-CN/docs/Web/API/Window/onuserproximity /zh-CN/docs/orphaned/Web/API/Window/onuserproximity -/zh-CN/docs/Web/API/Window/restore /zh-CN/docs/conflicting/Web/API/Window/moveTo /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/WindowBase64 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope#方法 @@ -1895,8 +1579,6 @@ /zh-CN/docs/Web/API/XDomainRequest /zh-CN/docs/orphaned/Web/API/XDomainRequest /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/XMLHttpRequest/openRequest /zh-CN/docs/orphaned/Web/API/XMLHttpRequest/openRequest -/zh-CN/docs/Web/API/XMLHttpRequestResponseType /zh-CN/docs/orphaned/Web/API/XMLHttpRequestResponseType /zh-CN/docs/Web/API/console.dir /zh-CN/docs/Web/API/Console/dir /zh-CN/docs/Web/API/console.group /zh-CN/docs/Web/API/Console/group /zh-CN/docs/Web/API/console.groupCollapsed /zh-CN/docs/Web/API/Console/groupCollapsed @@ -1925,20 +1607,17 @@ /zh-CN/docs/Web/API/document.documentElement /zh-CN/docs/Web/API/Document/documentElement /zh-CN/docs/Web/API/document.documentURI /zh-CN/docs/Web/API/Document/documentURI /zh-CN/docs/Web/API/document.documentURIObject /zh-CN/docs/Web/API/Document/documentURIObject -/zh-CN/docs/Web/API/document.elementFromPoint /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint /zh-CN/docs/Web/API/document.embeds /zh-CN/docs/Web/API/Document/embeds /zh-CN/docs/Web/API/document.evaluate /zh-CN/docs/Web/API/Document/evaluate /zh-CN/docs/Web/API/document.execCommand /zh-CN/docs/Web/API/Document/execCommand /zh-CN/docs/Web/API/document.fgColor /zh-CN/docs/Web/API/Document/fgColor /zh-CN/docs/Web/API/document.forms /zh-CN/docs/Web/API/Document/forms /zh-CN/docs/Web/API/document.getElementById /zh-CN/docs/Web/API/Document/getElementById -/zh-CN/docs/Web/API/document.getSelection /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/getSelection /zh-CN/docs/Web/API/document.hasFocus /zh-CN/docs/Web/API/Document/hasFocus /zh-CN/docs/Web/API/document.head /zh-CN/docs/Web/API/Document/head /zh-CN/docs/Web/API/document.height /zh-CN/docs/Web/API/Document/height /zh-CN/docs/Web/API/document.images /zh-CN/docs/Web/API/Document/images /zh-CN/docs/Web/API/document.implementation /zh-CN/docs/Web/API/Document/implementation -/zh-CN/docs/Web/API/document.inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet /zh-CN/docs/Web/API/document.lastModified /zh-CN/docs/Web/API/Document/lastModified /zh-CN/docs/Web/API/document.lastStyleSheetSet /zh-CN/docs/Web/API/Document/lastStyleSheetSet /zh-CN/docs/Web/API/document.linkColor /zh-CN/docs/Web/API/Document/linkColor @@ -1951,17 +1630,13 @@ /zh-CN/docs/Web/API/document.readyState /zh-CN/docs/Web/API/Document/readyState /zh-CN/docs/Web/API/document.referrer /zh-CN/docs/Web/API/Document/referrer /zh-CN/docs/Web/API/document.scripts /zh-CN/docs/Web/API/Document/scripts -/zh-CN/docs/Web/API/document.styleSheets /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/styleSheets /zh-CN/docs/Web/API/document.title /zh-CN/docs/Web/API/Document/title /zh-CN/docs/Web/API/document.tooltipNode /zh-CN/docs/Web/API/Document/tooltipNode /zh-CN/docs/Web/API/document.width /zh-CN/docs/Web/API/Document/width /zh-CN/docs/Web/API/document.write /zh-CN/docs/Web/API/Document/write /zh-CN/docs/Web/API/document.writeln /zh-CN/docs/Web/API/Document/writeln /zh-CN/docs/Web/API/element.outerHTML /zh-CN/docs/Web/API/Element/outerHTML -/zh-CN/docs/Web/API/event.altKey /zh-CN/docs/conflicting/Web/API/MouseEvent/altKey /zh-CN/docs/Web/API/event.bubbles /zh-CN/docs/Web/API/Event/bubbles -/zh-CN/docs/Web/API/event.button /zh-CN/docs/conflicting/Web/API/MouseEvent/button -/zh-CN/docs/Web/API/event.cancelBubble /zh-CN/docs/orphaned/Web/API/UIEvent/cancelBubble /zh-CN/docs/Web/API/event.cancelable /zh-CN/docs/Web/API/Event/cancelable /zh-CN/docs/Web/API/event.currentTarget /zh-CN/docs/Web/API/Event/currentTarget /zh-CN/docs/Web/API/event.defaultPrevented /zh-CN/docs/Web/API/Event/defaultPrevented @@ -1969,19 +1644,15 @@ /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.preventDefault /zh-CN/docs/Web/API/Event/preventDefault -/zh-CN/docs/Web/API/event.relatedTarget /zh-CN/docs/conflicting/Web/API/MouseEvent/relatedTarget -/zh-CN/docs/Web/API/event.shiftKey /zh-CN/docs/conflicting/Web/API/MouseEvent/shiftKey /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 /zh-CN/docs/Web/API/event.timeStamp /zh-CN/docs/Web/API/Event/timeStamp /zh-CN/docs/Web/API/event.type /zh-CN/docs/Web/API/Event/type /zh-CN/docs/Web/API/navigator.doNotTrack /zh-CN/docs/Web/API/Navigator/doNotTrack /zh-CN/docs/Web/API/notification/Using_Web_Notifications /zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API -/zh-CN/docs/Web/API/notification/sound /zh-CN/docs/orphaned/Web/API/notification/sound /zh-CN/docs/Web/API/range.getBoundingClientRect /zh-CN/docs/Web/API/Range/getBoundingClientRect /zh-CN/docs/Web/API/range.startOffset /zh-CN/docs/Web/API/Range/startOffset /zh-CN/docs/Web/API/range.surroundContents /zh-CN/docs/Web/API/Range/surroundContents -/zh-CN/docs/Web/API/window.onscroll /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /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 @@ -1997,7 +1668,6 @@ /zh-CN/docs/Web/API/鼠标事件 /zh-CN/docs/Web/API/MouseEvent /zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role /zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role /zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性 /zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute -/zh-CN/docs/Web/Accessibility/Web_Development /zh-CN/docs/conflicting/Web/Accessibility /zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery /zh-CN/docs/Web/Guide/Audio_and_video_delivery /zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained /zh-CN/docs/Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained /zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges /zh-CN/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges @@ -2005,38 +1675,20 @@ /zh-CN/docs/Web/Apps/Progressive /zh-CN/docs/Web/Progressive_web_apps /zh-CN/docs/Web/Apps/Progressive/App_structure /zh-CN/docs/Web/Progressive_web_apps/App_structure /zh-CN/docs/Web/Apps/Progressive/Introduction /zh-CN/docs/Web/Progressive_web_apps/Introduction -/zh-CN/docs/Web/Apps/Progressive/Network_independent /zh-CN/docs/conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f -/zh-CN/docs/Web/Apps/Progressive/Re-engageable /zh-CN/docs/conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 -/zh-CN/docs/Web/Apps/Progressive/Responsive /zh-CN/docs/conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks /zh-CN/docs/Web/CSS/边框分割 /zh-CN/docs/Web/CSS/border-collapse /zh-CN/docs/Web/CSS/-moz-appearance /zh-CN/docs/Web/CSS/appearance -/zh-CN/docs/Web/CSS/:-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/:placeholder-shown -/zh-CN/docs/Web/CSS/::-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/::placeholder -/zh-CN/docs/Web/CSS/:any /zh-CN/docs/conflicting/Web/CSS/:is /zh-CN/docs/Web/CSS/:blank空白伪类 /zh-CN/docs/Web/CSS/:blank /zh-CN/docs/Web/CSS/:matches /zh-CN/docs/Web/CSS/:is -/zh-CN/docs/Web/CSS/@viewport/height /zh-CN/docs/conflicting/Web/CSS/@viewport -/zh-CN/docs/Web/CSS/@viewport/orientation /zh-CN/docs/conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a -/zh-CN/docs/Web/CSS/@viewport/viewport-fit /zh-CN/docs/conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -/zh-CN/docs/Web/CSS/@viewport/width /zh-CN/docs/conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 -/zh-CN/docs/Web/CSS/@viewport/zoom /zh-CN/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 /zh-CN/docs/Web/CSS/Adjacent_sibling_selectors /zh-CN/docs/Web/CSS/Adjacent_sibling_combinator /zh-CN/docs/Web/CSS/All_About_The_Containing_Block /zh-CN/docs/Web/CSS/Containing_block /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/conflicting/Web/CSS/CSS_Backgrounds_and_Borders -/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /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_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_Colors /zh-CN/docs/conflicting/Web/CSS/CSS_Color /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/Mixins /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox -/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_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/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_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 /zh-CN/docs/Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外 /zh-CN/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow /zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes /zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes @@ -2079,20 +1731,11 @@ /zh-CN/docs/Web/CSS/filter-function/grayscale /zh-CN/docs/Web/CSS/filter-function/grayscale() /zh-CN/docs/Web/CSS/filter-function/opacity /zh-CN/docs/Web/CSS/filter-function/opacity() /zh-CN/docs/Web/CSS/filter滤镜 /zh-CN/docs/Web/CSS/filter -/zh-CN/docs/Web/CSS/linear-gradient /zh-CN/docs/orphaned/Web/CSS/linear-gradient() -/zh-CN/docs/Web/CSS/linear-gradient() /zh-CN/docs/orphaned/Web/CSS/linear-gradient() /zh-CN/docs/Web/CSS/margin_collapsing /zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing /zh-CN/docs/Web/CSS/max /zh-CN/docs/Web/CSS/max() /zh-CN/docs/Web/CSS/min /zh-CN/docs/Web/CSS/min() /zh-CN/docs/Web/CSS/minmax /zh-CN/docs/Web/CSS/minmax() -/zh-CN/docs/Web/CSS/radial-gradient /zh-CN/docs/orphaned/Web/CSS/radial-gradient() -/zh-CN/docs/Web/CSS/radial-gradient() /zh-CN/docs/orphaned/Web/CSS/radial-gradient() /zh-CN/docs/Web/CSS/repeat /zh-CN/docs/Web/CSS/repeat() -/zh-CN/docs/Web/CSS/repeating-linear-gradient /zh-CN/docs/orphaned/Web/CSS/repeating-linear-gradient() -/zh-CN/docs/Web/CSS/repeating-linear-gradient() /zh-CN/docs/orphaned/Web/CSS/repeating-linear-gradient() -/zh-CN/docs/Web/CSS/repeating-radial-gradient /zh-CN/docs/orphaned/Web/CSS/repeating-radial-gradient() -/zh-CN/docs/Web/CSS/repeating-radial-gradient() /zh-CN/docs/orphaned/Web/CSS/repeating-radial-gradient() -/zh-CN/docs/Web/CSS/timing-function /zh-CN/docs/conflicting/Web/CSS/easing-function /zh-CN/docs/Web/CSS/transform-function/matrix /zh-CN/docs/Web/CSS/transform-function/matrix() /zh-CN/docs/Web/CSS/transform-function/matrix3d /zh-CN/docs/Web/CSS/transform-function/matrix3d() /zh-CN/docs/Web/CSS/transform-function/perspective /zh-CN/docs/Web/CSS/transform-function/perspective() @@ -2109,7 +1752,6 @@ /zh-CN/docs/Web/CSS/transform-function/skewY /zh-CN/docs/Web/CSS/transform-function/skewY() /zh-CN/docs/Web/CSS/transform-function/translate /zh-CN/docs/Web/CSS/transform-function/translate() /zh-CN/docs/Web/CSS/transform-function/translate3d /zh-CN/docs/Web/CSS/transform-function/translate3d() -/zh-CN/docs/Web/CSS/transform-function/translateX /zh-CN/docs/orphaned/Web/CSS/transform-function/translateX /zh-CN/docs/Web/CSS/transform-function/translateY /zh-CN/docs/Web/CSS/transform-function/translateY() /zh-CN/docs/Web/CSS/url /zh-CN/docs/Web/CSS/url() /zh-CN/docs/Web/CSS/var /zh-CN/docs/Web/CSS/var() @@ -2119,22 +1761,9 @@ /zh-CN/docs/Web/CSS/右上角边框半径 /zh-CN/docs/Web/CSS/border-top-right-radius /zh-CN/docs/Web/CSS/媒体查询 /zh-CN/docs/Web/CSS/Media_Queries /zh-CN/docs/Web/CSS/实际值 /zh-CN/docs/Web/CSS/actual_value -/zh-CN/docs/Web/CSS/开始 /zh-CN/docs/conflicting/Learn/CSS/First_steps -/zh-CN/docs/Web/CSS/开始/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks -/zh-CN/docs/Web/CSS/开始/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/zh-CN/docs/Web/CSS/开始/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units /zh-CN/docs/Web/CSS/开始/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content -/zh-CN/docs/Web/CSS/开始/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/zh-CN/docs/Web/CSS/开始/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists -/zh-CN/docs/Web/CSS/开始/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured /zh-CN/docs/Web/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS -/zh-CN/docs/Web/CSS/开始/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors -/zh-CN/docs/Web/CSS/开始/Tables /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/zh-CN/docs/Web/CSS/开始/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 -/zh-CN/docs/Web/CSS/开始/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 -/zh-CN/docs/Web/CSS/开始/为何使用CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/Web/CSS/开始/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types -/zh-CN/docs/Web/CSS/开始/布局 /zh-CN/docs/conflicting/Learn/CSS/CSS_layout /zh-CN/docs/Web/CSS/整型 /zh-CN/docs/Web/CSS/integer /zh-CN/docs/Web/CSS/文本修饰 /zh-CN/docs/Web/CSS/text-decoration /zh-CN/docs/Web/CSS/文本装饰线厚度(粗细) /zh-CN/docs/Web/CSS/text-decoration-thickness @@ -2144,7 +1773,6 @@ /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 /zh-CN/docs/Web/Events/DOMMouseScroll /zh-CN/docs/Web/API/Element/DOMMouseScroll_event -/zh-CN/docs/Web/Events/abort /zh-CN/docs/conflicting/Web/API/HTMLMediaElement/abort_event /zh-CN/docs/Web/Events/afterprint /zh-CN/docs/Web/API/Window/afterprint_event /zh-CN/docs/Web/Events/afterscriptexecute /zh-CN/docs/Web/API/Element/afterscriptexecute_event /zh-CN/docs/Web/Events/animationend /zh-CN/docs/Web/API/HTMLElement/animationend_event @@ -2228,39 +1856,17 @@ /zh-CN/docs/Web/Events/提交 /zh-CN/docs/Web/API/HTMLFormElement/submit_event /zh-CN/docs/Web/Events/滚轮事件 /zh-CN/docs/Web/API/Element/wheel_event /zh-CN/docs/Web/Events/进度条 /zh-CN/docs/Web/API/XMLHttpRequest/progress_event -/zh-CN/docs/Web/Guide/API/DOM /zh-CN/docs/conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef -/zh-CN/docs/Web/Guide/API/DOM/Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API -/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API /zh-CN/docs/Web/Guide/API/DOM/The_structured_clone_algorithm /zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm /zh-CN/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM /zh-CN/docs/Web/API/Document_Object_Model/Whitespace /zh-CN/docs/Web/Guide/CSS /zh-CN/docs/Learn/CSS /zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites /zh-CN/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS -/zh-CN/docs/Web/Guide/CSS/CSS基础 /zh-CN/docs/orphaned/Web/Guide/CSS/CSS基础 /zh-CN/docs/Web/Guide/CSS/Consistent_list_indentation /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /zh-CN/docs/Web/Guide/CSS/Counters /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -/zh-CN/docs/Web/Guide/CSS/Flexible_boxes /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -/zh-CN/docs/Web/Guide/CSS/Getting_started /zh-CN/docs/conflicting/Learn/CSS/First_steps -/zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks -/zh-CN/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/zh-CN/docs/Web/Guide/CSS/Getting_started/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units /zh-CN/docs/Web/Guide/CSS/Getting_started/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content -/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/zh-CN/docs/Web/Guide/CSS/Getting_started/Layout /zh-CN/docs/conflicting/Learn/CSS/CSS_layout -/zh-CN/docs/Web/Guide/CSS/Getting_started/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /zh-CN/docs/Web/Guide/CSS/Getting_started/Media /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types -/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured /zh-CN/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS -/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors -/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables -/zh-CN/docs/Web/Guide/CSS/Getting_started/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 -/zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 -/zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 -/zh-CN/docs/Web/Guide/CSS/Getting_started/为何使用CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/Web/Guide/CSS/Getting_started/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types -/zh-CN/docs/Web/Guide/CSS/Getting_started/布局 /zh-CN/docs/conflicting/Learn/CSS/CSS_layout /zh-CN/docs/Web/Guide/CSS/Media_queries /zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries -/zh-CN/docs/Web/Guide/CSS/Scaling_background_images /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /zh-CN/docs/Web/Guide/CSS/Testing_media_queries /zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries /zh-CN/docs/Web/Guide/CSS/Understanding_z_index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index @@ -2275,21 +1881,11 @@ /zh-CN/docs/Web/Guide/CSS/Using_CSS_transforms /zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions /zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions /zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts /zh-CN/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts -/zh-CN/docs/Web/Guide/CSS/Using_multiple_backgrounds /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /zh-CN/docs/Web/Guide/CSS/Using_the_:target_selector /zh-CN/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors /zh-CN/docs/Web/Guide/CSS/Visual_formatting_model /zh-CN/docs/Web/CSS/Visual_formatting_model /zh-CN/docs/Web/Guide/CSS/媒体查询 /zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries -/zh-CN/docs/Web/Guide/DOM /zh-CN/docs/conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef /zh-CN/docs/Web/Guide/DOM/Whitespace_in_the_DOM /zh-CN/docs/Web/API/Document_Object_Model/Whitespace -/zh-CN/docs/Web/Guide/Events /zh-CN/docs/orphaned/Web/Guide/Events -/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events /zh-CN/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events -/zh-CN/docs/Web/Guide/Events/Event_handlers /zh-CN/docs/orphaned/Web/Guide/Events/Event_handlers -/zh-CN/docs/Web/Guide/Events/Media_events /zh-CN/docs/orphaned/Web/Guide/Events/Media_events -/zh-CN/docs/Web/Guide/Events/Mutation_events /zh-CN/docs/orphaned/Web/Guide/Events/Mutation_events -/zh-CN/docs/Web/Guide/Events/Orientation_and_motion_data_explained /zh-CN/docs/orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -/zh-CN/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /zh-CN/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /zh-CN/docs/Web/Guide/Events/Touch_events /zh-CN/docs/Web/API/Touch_events -/zh-CN/docs/Web/Guide/Events/事件回调 /zh-CN/docs/orphaned/Web/Guide/Events/Event_handlers /zh-CN/docs/Web/Guide/HTML /zh-CN/docs/Learn/HTML /zh-CN/docs/Web/Guide/HTML/A_basic_ray-caster /zh-CN/docs/Web/API/Canvas_API/A_basic_ray-caster /zh-CN/docs/Web/Guide/HTML/Canvas_tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial @@ -2308,34 +1904,21 @@ /zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Using_images /zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images /zh-CN/docs/Web/Guide/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Editable_content /zh-CN/docs/Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla /zh-CN/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla -/zh-CN/docs/Web/Guide/HTML/Email_links /zh-CN/docs/conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks /zh-CN/docs/Web/Guide/HTML/Forms /zh-CN/docs/Learn/Forms /zh-CN/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls /zh-CN/docs/Web/Guide/HTML/Forms/My_first_HTML_form /zh-CN/docs/Learn/Forms/Your_first_form /zh-CN/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data /zh-CN/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Web/Guide/HTML/Forms/表单入门 /zh-CN/docs/Learn/Forms/Your_first_form -/zh-CN/docs/Web/Guide/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/zh-CN/docs/Web/Guide/HTML/HTML /zh-CN/docs/orphaned/Web/Guide/HTML/HTML -/zh-CN/docs/Web/Guide/HTML/HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5 -/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation -/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/conflicting/Web/Guide/HTML/HTML5 -/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list /zh-CN/docs/conflicting/Web/HTML/Element -/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/Web/Guide/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML -/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /zh-CN/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages -/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video /zh-CN/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /zh-CN/docs/Web/Guide/HTML/Using_data_attributes /zh-CN/docs/Learn/HTML/Howto/Use_data_attributes -/zh-CN/docs/Web/Guide/Localizations_and_character_encodings /zh-CN/docs/orphaned/Web/Guide/Localizations_and_character_encodings /zh-CN/docs/Web/Guide/Performance/Using_web_workers /zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers /zh-CN/docs/Web/Guide/Using_FormData_Objects /zh-CN/docs/Web/API/FormData/Using_FormData_Objects /zh-CN/docs/Web/HTML/Attributes/自动完成属性 /zh-CN/docs/Web/HTML/Attributes/autocomplete /zh-CN/docs/Web/HTML/CORS_settings_attributes /zh-CN/docs/Web/HTML/Attributes/crossorigin /zh-CN/docs/Web/HTML/Canvas /zh-CN/docs/Web/API/Canvas_API /zh-CN/docs/Web/HTML/Canvas/Canvas教程 /zh-CN/docs/Web/API/Canvas_API/Tutorial -/zh-CN/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /zh-CN/docs/conflicting/Web/API/Canvas_API/Tutorial /zh-CN/docs/Web/HTML/Canvas/Tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial /zh-CN/docs/Web/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Editable_content /zh-CN/docs/Web/HTML/Controlling_spell_checking_in_HTML_forms /en-US/docs/Web/HTML/Global_attributes/spellcheck @@ -2346,35 +1929,23 @@ /zh-CN/docs/Web/HTML/Element/Video/canplaythrough_event /zh-CN/docs/Web/API/HTMLMediaElement/canplaythrough_event /zh-CN/docs/Web/HTML/Element/Video/ended_event /zh-CN/docs/Web/API/HTMLMediaElement/ended_event /zh-CN/docs/Web/HTML/Element/Video/loadeddata_event /zh-CN/docs/Web/API/HTMLMediaElement/loadeddata_event -/zh-CN/docs/Web/HTML/Element/command /zh-CN/docs/orphaned/Web/HTML/Element/command -/zh-CN/docs/Web/HTML/Element/element /zh-CN/docs/orphaned/Web/HTML/Element/element -/zh-CN/docs/Web/HTML/Element/isindex /zh-CN/docs/orphaned/Web/HTML/Element/isindex -/zh-CN/docs/Web/HTML/Element/listing /zh-CN/docs/orphaned/Web/HTML/Element/listing -/zh-CN/docs/Web/HTML/Element/multicol /zh-CN/docs/orphaned/Web/HTML/Element/multicol -/zh-CN/docs/Web/HTML/Element/nextid /zh-CN/docs/orphaned/Web/HTML/Element/nextid /zh-CN/docs/Web/HTML/Element/video/play_event /zh-CN/docs/Web/API/HTMLMediaElement/play_event /zh-CN/docs/Web/HTML/Element/video/timeupdate_event /zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event /zh-CN/docs/Web/HTML/Element/视频 /zh-CN/docs/Web/HTML/Element/video /zh-CN/docs/Web/HTML/Element/选项 /zh-CN/docs/Web/HTML/Element/option -/zh-CN/docs/Web/HTML/Focus_management_in_HTML /zh-CN/docs/conflicting/Web/API/Document/hasFocus /zh-CN/docs/Web/HTML/Forms /zh-CN/docs/Learn/Forms /zh-CN/docs/Web/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls /zh-CN/docs/Web/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Web/HTML/Forms/表单入门 /zh-CN/docs/Learn/Forms/Your_first_form -/zh-CN/docs/Web/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/zh-CN/docs/Web/HTML/Global_attributes/dropzone /zh-CN/docs/orphaned/Web/HTML/Global_attributes/dropzone /zh-CN/docs/Web/HTML/Global_attributes/x-ms-加速装置键 /zh-CN/docs/Web/HTML/Global_attributes/x-ms-acceleratorkey /zh-CN/docs/Web/HTML/Global_attributes/x-ms-格式-检测 /zh-CN/docs/Web/HTML/Global_attributes/x-ms-format-detection /zh-CN/docs/Web/HTML/Global_attributes/摩缺 /zh-CN/docs/Web/HTML/Global_attributes/accesskey /zh-CN/docs/Web/HTML/Inline_elemente /zh-CN/docs/Web/HTML/Inline_elements /zh-CN/docs/Web/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /zh-CN/docs/Glossary/speculative_parsing -/zh-CN/docs/Web/HTML/Preloading_content /zh-CN/docs/orphaned/Web/HTML/Preloading_content -/zh-CN/docs/Web/HTML/Supported_media_formats /zh-CN/docs/conflicting/Web/Media/Formats /zh-CN/docs/Web/HTML/全局属性 /zh-CN/docs/Web/HTML/Global_attributes /zh-CN/docs/Web/HTML/内联元素 /zh-CN/docs/Web/HTML/Inline_elements /zh-CN/docs/Web/HTML/动作 /zh-CN/docs/Glossary/speculative_parsing -/zh-CN/docs/Web/HTML/媒体支持 /zh-CN/docs/conflicting/Web/Media/Formats /zh-CN/docs/Web/HTML/属性 /zh-CN/docs/Web/HTML/Attributes /zh-CN/docs/Web/HTTP/Access_control_CORS /zh-CN/docs/Web/HTTP/CORS /zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types /zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types @@ -2383,7 +1954,6 @@ /zh-CN/docs/Web/HTTP/Caching_FAQ /zh-CN/docs/Web/HTTP/Caching /zh-CN/docs/Web/HTTP/Content_negotiation/Accept_默认值 /zh-CN/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values /zh-CN/docs/Web/HTTP/HTTP_Strict_Transport_Security /zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security -/zh-CN/docs/Web/HTTP/HTTP_response_codes /zh-CN/docs/conflicting/Web/HTTP/Status /zh-CN/docs/Web/HTTP/HTTP请求方法 /zh-CN/docs/Web/HTTP/Methods /zh-CN/docs/Web/HTTP/HTTP请求方法/GET /zh-CN/docs/Web/HTTP/Methods/GET /zh-CN/docs/Web/HTTP/HTTP请求方法/POST /zh-CN/docs/Web/HTTP/Methods/POST @@ -2406,26 +1976,20 @@ /zh-CN/docs/Web/HTTP/Response_codes/100 /zh-CN/docs/Web/HTTP/Status/100 /zh-CN/docs/Web/HTTP/Response_codes/204 /zh-CN/docs/Web/HTTP/Status/204 /zh-CN/docs/Web/HTTP/Response_codes/501 /zh-CN/docs/Web/HTTP/Status/501 -/zh-CN/docs/Web/HTTP/Server-Side_Access_Control /zh-CN/docs/conflicting/Web/HTTP/CORS /zh-CN/docs/Web/HTTP/X-Frame-Options /zh-CN/docs/Web/HTTP/Headers/X-Frame-Options /zh-CN/docs/Web/HTTP/data_URIs /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /zh-CN/docs/Web/HTTP/消息 /zh-CN/docs/Web/HTTP/Messages /zh-CN/docs/Web/HTTP/策略特征 /zh-CN/docs/Web/HTTP/Feature_Policy /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/跨域资源共享(CORS)_ /zh-CN/docs/orphaned/Web/HTTP/跨域资源共享(CORS)_ /zh-CN/docs/Web/HTTP/重定向 /zh-CN/docs/Web/HTTP/Redirections /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/Getting_Started /zh-CN/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -/zh-CN/docs/Web/JavaScript/Guide/About /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction /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 /zh-CN/docs/Web/JavaScript/Guide/EventLoop /zh-CN/docs/Web/JavaScript/EventLoop /zh-CN/docs/Web/JavaScript/Guide/Inheritance_Revisited /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /zh-CN/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/zh-CN/docs/Web/JavaScript/Guide/JavaScript_Overview /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b /zh-CN/docs/Web/JavaScript/Guide/Predefined_Core_Objects /zh-CN/docs/Web/JavaScript/Guide -/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries /zh-CN/docs/conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions /zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/量词 /zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers /zh-CN/docs/Web/JavaScript/Guide/Sameness /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness /zh-CN/docs/Web/JavaScript/Guide/Statements /zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling @@ -2434,7 +1998,6 @@ /zh-CN/docs/Web/JavaScript/Guide/iterable /zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols /zh-CN/docs/Web/JavaScript/Guide/介绍 /zh-CN/docs/Web/JavaScript/Guide/Introduction /zh-CN/docs/Web/JavaScript/Guide/可迭代对象 /zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols -/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Objects /zh-CN/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/JavaScript/Reference/Array /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array /zh-CN/docs/Web/JavaScript/Reference/Array/Reduce /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce @@ -2448,14 +2011,12 @@ /zh-CN/docs/Web/JavaScript/Reference/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Web/JavaScript/Reference/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/Web/JavaScript/Reference/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/Web/JavaScript/Reference/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/Web/JavaScript/Reference/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/Web/JavaScript/Reference/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/Web/JavaScript/Reference/Classes/Class_elements /zh-CN/docs/Web/JavaScript/Reference/Classes/Public_class_fields /zh-CN/docs/Web/JavaScript/Reference/Comments /zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Comments /zh-CN/docs/Web/JavaScript/Reference/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date @@ -2472,7 +2033,6 @@ /zh-CN/docs/Web/JavaScript/Reference/Date/setTime /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/setTime /zh-CN/docs/Web/JavaScript/Reference/Date/toJSON /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON /zh-CN/docs/Web/JavaScript/Reference/Date/valueOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf -/zh-CN/docs/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments /zh-CN/docs/orphaned/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments /zh-CN/docs/Web/JavaScript/Reference/Errors/不能添加属性 /zh-CN/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property /zh-CN/docs/Web/JavaScript/Reference/Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Function/apply /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply @@ -2481,7 +2041,6 @@ /zh-CN/docs/Web/JavaScript/Reference/Function/caller /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller /zh-CN/docs/Web/JavaScript/Reference/Function/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length /zh-CN/docs/Web/JavaScript/Reference/Function/name /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name -/zh-CN/docs/Web/JavaScript/Reference/Function/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Function/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource /zh-CN/docs/Web/JavaScript/Reference/Function/toString /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString /zh-CN/docs/Web/JavaScript/Reference/Functions_and_function_scope /zh-CN/docs/Web/JavaScript/Reference/Functions @@ -2496,44 +2055,14 @@ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/index /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/input /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce()用法 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBufferView /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncIterator -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Collator /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/DataView -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DisplayNames /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/EvalError -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ListFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Locale /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@iterator -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/@@species /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@species -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/Map /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/clear /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/delete /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/entries /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/get /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/has /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/keys /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/set /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/size /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/values /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/values /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/反双曲余弦值 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/format /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create/About_JavaScript /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal @@ -2558,10 +2087,7 @@ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/lookupGetter /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions/About_this_Reference /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/PluralRules /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/defineProperty /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty @@ -2575,35 +2101,14 @@ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/preventExtensions /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/setPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/比较_Reflect_和_Object_方法 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/contains /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Symbol -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypeError -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/URIError -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/clear /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -/zh-CN/docs/Web/JavaScript/Reference/Map /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/Web/JavaScript/Reference/Methods_Index /zh-CN/docs/Web/JavaScript/Reference -/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators -/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e -/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 -/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca -/zh-CN/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /zh-CN/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator /zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax /zh-CN/docs/Web/JavaScript/Reference/Operators/async允许声明一个函数为一个包含异步操作的函数 /zh-CN/docs/Web/JavaScript/Reference/Operators/async_function /zh-CN/docs/Web/JavaScript/Reference/Operators/取余 /zh-CN/docs/Web/JavaScript/Reference/Operators/Remainder @@ -2612,7 +2117,6 @@ /zh-CN/docs/Web/JavaScript/Reference/Operators/按位与 /zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_AND /zh-CN/docs/Web/JavaScript/Reference/Operators/相加 /zh-CN/docs/Web/JavaScript/Reference/Operators/Addition /zh-CN/docs/Web/JavaScript/Reference/Operators/相等 /zh-CN/docs/Web/JavaScript/Reference/Operators/Equality -/zh-CN/docs/Web/JavaScript/Reference/Operators/管道操作符 /zh-CN/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator /zh-CN/docs/Web/JavaScript/Reference/Operators/类 /zh-CN/docs/Web/JavaScript/Reference/Operators/class /zh-CN/docs/Web/JavaScript/Reference/Operators/自减 /zh-CN/docs/Web/JavaScript/Reference/Operators/Decrement /zh-CN/docs/Web/JavaScript/Reference/Operators/逻辑和 /zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND @@ -2620,11 +2124,8 @@ /zh-CN/docs/Web/JavaScript/Reference/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/Web/JavaScript/Reference/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource -/zh-CN/docs/Web/JavaScript/Reference/Reserved_words /zh-CN/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /zh-CN/docs/Web/JavaScript/Reference/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax -/zh-CN/docs/Web/JavaScript/Reference/Statements/default /zh-CN/docs/conflicting/Web/JavaScript/Reference/Statements/switch /zh-CN/docs/Web/JavaScript/Reference/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/JavaScript/Reference/String/Trim /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim /zh-CN/docs/Web/JavaScript/Reference/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart @@ -2652,32 +2153,19 @@ /zh-CN/docs/Web/JavaScript/Strict_mode /zh-CN/docs/Web/JavaScript/Reference/Strict_mode /zh-CN/docs/Web/JavaScript/Strict_mode/Transitioning_to_strict_mode /zh-CN/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode /zh-CN/docs/Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation /zh-CN/docs/Web/JavaScript/The_performance_hazards_of_prototype_mutation -/zh-CN/docs/Web/JavaScript/javascript(起步) /zh-CN/docs/orphaned/Web/JavaScript/javascript(起步) /zh-CN/docs/Web/JavaScript/重新认识js /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript -/zh-CN/docs/Web/Localization /zh-CN/docs/orphaned/Web/Localization /zh-CN/docs/Web/Media/Formats/视频编解码器 /zh-CN/docs/Web/Media/Formats/Video_codecs /zh-CN/docs/Web/Performance/浏览器渲染页面的工作原理 /zh-CN/docs/Web/Performance/How_browsers_work -/zh-CN/docs/Web/Progressive_web_apps/Network_independent /zh-CN/docs/conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f -/zh-CN/docs/Web/Progressive_web_apps/Re-engageable /zh-CN/docs/conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 -/zh-CN/docs/Web/Progressive_web_apps/Responsive /zh-CN/docs/conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -/zh-CN/docs/Web/Progressive_web_apps/优势 /zh-CN/docs/conflicting/Web/Progressive_web_apps/Introduction /zh-CN/docs/Web/Progressive_web_apps/加载 /zh-CN/docs/Web/Progressive_web_apps/Loading /zh-CN/docs/Web/Progressive_web_apps/添加到主屏幕 /zh-CN/docs/Web/Progressive_web_apps/Add_to_home_screen -/zh-CN/docs/Web/Reference /zh-CN/docs/orphaned/Web/Reference -/zh-CN/docs/Web/Reference/API /zh-CN/docs/orphaned/Web/Reference/API /zh-CN/docs/Web/SVG/Attribute/文本锚点 /zh-CN/docs/Web/SVG/Attribute/text-anchor /zh-CN/docs/Web/SVG/Attribute/样式 /zh-CN/docs/Web/SVG/Attribute/Styling -/zh-CN/docs/Web/SVG/Element/color-profile /zh-CN/docs/orphaned/Web/SVG/Element/color-profile /zh-CN/docs/Web/SVG/Element/圆 /zh-CN/docs/Web/SVG/Element/circle /zh-CN/docs/Web/SVG/Element/多边形 /zh-CN/docs/Web/SVG/Element/polygon /zh-CN/docs/Web/SVG/Element/线性渐变 /zh-CN/docs/Web/SVG/Element/linearGradient /zh-CN/docs/Web/SVG/Firefox对SVG_1.1的支持 /zh-CN/docs/Web/SVG/SVG_1.1_Support_in_Firefox /zh-CN/docs/Web/SVG/Tutorial/渐变 /zh-CN/docs/Web/SVG/Tutorial/Gradients -/zh-CN/docs/Web/Security/CSP /zh-CN/docs/conflicting/Web/HTTP/CSP -/zh-CN/docs/Web/Security/CSP/Introducing_Content_Security_Policy /zh-CN/docs/conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 -/zh-CN/docs/Web/Security/CSP/Using_CSP_violation_reports /zh-CN/docs/conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 /zh-CN/docs/Web/Security/CSP/Using_Content_Security_Policy /zh-CN/docs/Web/HTTP/CSP -/zh-CN/docs/Web/Security/Information_Security_Basics /zh-CN/docs/orphaned/Web/Security/Information_Security_Basics /zh-CN/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types /zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types /zh-CN/docs/Web/Security/传输层安全协议 /zh-CN/docs/Web/Security/Transport_Layer_Security /zh-CN/docs/Web/Security/子资源完整性 /zh-CN/docs/Web/Security/Subresource_Integrity @@ -2688,29 +2176,20 @@ /zh-CN/docs/Web/WebGL/用WebGL来画2D图形 /zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/Web_Components/Custom_Elements /zh-CN/docs/Web/Web_Components/Using_custom_elements /zh-CN/docs/Web/Web_Components/HTML导入 /zh-CN/docs/Web/Web_Components/HTML_Imports -/zh-CN/docs/Web/Web_Components/Status_in_Firefox /zh-CN/docs/orphaned/Web/Web_Components/Status_in_Firefox -/zh-CN/docs/Web/Web_Components/影子_DOM /zh-CN/docs/conflicting/Web/Web_Components/Using_shadow_DOM /zh-CN/docs/Web/XSLT/Elements /zh-CN/docs/Web/XSLT/Element /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/WebAPI /zh-CN/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 /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 /zh-CN/docs/WebGL/Getting_started_with_WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /zh-CN/docs/WebGL/开始使用WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/zh-CN/docs/WebGuide/API/File_System /zh-CN/docs/conflicting/Web/API/File_and_Directory_Entries_API/Introduction /zh-CN/docs/WebGuide/API/File_System/Introduction /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction -/zh-CN/docs/WebRTC /zh-CN/docs/conflicting/Web/API/WebRTC_API_d8621144cbc61520339c3b10c61731f0 /zh-CN/docs/WebRTC/navigator.getUserMedia /zh-CN/docs/Web/API/Navigator/getUserMedia /zh-CN/docs/WebRTC/介绍 /zh-CN/docs/Web/API/WebRTC_API/Session_lifetime -/zh-CN/docs/Web_Development /zh-CN/docs/conflicting/Web/Guide /zh-CN/docs/Web_Development/Introduction_to_Web_development /zh-CN/docs/Web/Guide/Introduction_to_Web_development -/zh-CN/docs/Web_Development/Mobile /zh-CN/docs/conflicting/Web/Guide/Mobile -/zh-CN/docs/Web_Development/Mobile/responsive_design /zh-CN/docs/conflicting/Web/Progressive_web_apps -/zh-CN/docs/Web_Development/Mobile/自适应_设计 /zh-CN/docs/conflicting/Web/Progressive_web_apps /zh-CN/docs/Web_Development/Web开发介绍 /zh-CN/docs/Web/Guide/Introduction_to_Web_development /zh-CN/docs/XHTML /zh-CN/docs/Glossary/XHTML /zh-CN/docs/XMLSerializer /zh-CN/docs/Web/API/XMLSerializer @@ -2732,11 +2211,9 @@ /zh-CN/docs/learn/Accessibility/什么是可访问性 /zh-CN/docs/Learn/Accessibility/What_is_accessibility /zh-CN/docs/learn/Accessibility/多媒体 /zh-CN/docs/Learn/Accessibility/Multimedia /zh-CN/docs/learn/GitHub /zh-CN/docs/Learn/Tools_and_testing/GitHub -/zh-CN/docs/learn/HTML/Forms_and_buttons /zh-CN/docs/orphaned/Learn/HTML/Forms_and_buttons /zh-CN/docs/learn/HTML/Introduction_to_HTML/创建超链接 /zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks /zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构 /zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure /zh-CN/docs/learn/How_the_Internet_works /zh-CN/docs/Learn/Common_questions/How_does_the_Internet_work -/zh-CN/docs/learn/How_to_contribute /zh-CN/docs/orphaned/Learn/How_to_contribute /zh-CN/docs/learn/JavaScript/Building_blocks/事件 /zh-CN/docs/Learn/JavaScript/Building_blocks/Events /zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊 /zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery /zh-CN/docs/learn/JavaScript/异步 /zh-CN/docs/Learn/JavaScript/Asynchronous @@ -2752,7 +2229,6 @@ /zh-CN/docs/learn/Server-side/Django/主页构建 /zh-CN/docs/Learn/Server-side/Django/Home_page /zh-CN/docs/learn/Server-side/Django/开发环境 /zh-CN/docs/Learn/Server-side/Django/development_environment /zh-CN/docs/learn/Server-side/Django/管理站点 /zh-CN/docs/Learn/Server-side/Django/Admin_site -/zh-CN/docs/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /zh-CN/docs/orphaned/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /zh-CN/docs/learn/WebGL/By_example /zh-CN/docs/Web/API/WebGL_API/By_example /zh-CN/docs/learn/WebGL/By_example/Basic_scissoring /zh-CN/docs/Web/API/WebGL_API/By_example/Basic_scissoring /zh-CN/docs/learn/WebGL/By_example/Boilerplate_1 /zh-CN/docs/Web/API/WebGL_API/By_example/Boilerplate_1 @@ -2763,7 +2239,6 @@ /zh-CN/docs/learn/WebGL/By_example/Hello_GLSL /zh-CN/docs/Web/API/WebGL_API/By_example/Hello_GLSL /zh-CN/docs/learn/WebGL/By_example/Scissor_animation /zh-CN/docs/Web/API/WebGL_API/By_example/Scissor_animation /zh-CN/docs/learn/WebGL/By_example/Simple_color_animation /zh-CN/docs/Web/API/WebGL_API/By_example/Simple_color_animation -/zh-CN/docs/learn/Web_Mechanics /zh-CN/docs/conflicting/Learn/Common_questions /zh-CN/docs/learn/常见问题 /zh-CN/docs/Learn/Common_questions /zh-CN/docs/learn/常见问题/Thinking_before_coding /zh-CN/docs/Learn/Common_questions/Thinking_before_coding /zh-CN/docs/learn/常见问题/What_are_hyperlinks /zh-CN/docs/Learn/Common_questions/What_are_hyperlinks @@ -2777,5 +2252,4 @@ /zh-CN/docs/使用Javascript和DOM_Interfaces来处理HTML /zh-CN/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces /zh-CN/docs/安全 /zh-CN/docs/Web/Security /zh-CN/docs/怪异模式和标准模式 /zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode -/zh-CN/docs/理解下划线 /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /zh-CN/docs/首页 /zh-CN/docs/Web diff --git a/files/zh-cn/conflicting/glossary/chrome/index.html b/files/zh-cn/conflicting/glossary/chrome/index.html deleted file mode 100644 index 7c563bc814..0000000000 --- a/files/zh-cn/conflicting/glossary/chrome/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Chrome -slug: conflicting/Glossary/Chrome -tags: - - Toolkit API -translation_of: Glossary/Chrome -translation_of_original: Chrome -original_slug: Chrome ---- -<p><b>Chrome</b> 这个单词在 Mozilla 的技术中有着多重含义。</p> -<dl> - <dt> - Browser chrome / Chrome</dt> - <dd> - "browser chrome" 或者直接 Chrome 可以用来指代围绕着普通网页区域的浏览器界面，它对应的词是 content ，表示网页区域.</dd> - <dd> - 更通用点讲, chrome is the entirety of entities making up the user interface of a specific application or <a href="en/Extension">extension</a>.</dd> - <dt> - <code><a class="external" rel="freelink">chrome://</a></code> URL</dt> - <dd> - An URL using the <code><a class="external" rel="freelink">chrome://</a></code> protocol. Code loaded from a chrome URL has extended, or - <i> - chrome</i> - , privileges.</dd> - <dd> - XUL-based applications load the code for their interface from <code><a class="external" rel="freelink">chrome://</a></code> URLs.</dd> - <dt> - Chrome 特权</dt> - <dd> - 拥有 chrome 特权的代码可以实现各种事情, 而普通网页中的 JS 代码则不是。</dd> - <dt> - <code>window.open</code> 方法的<code> chrome</code> 参数</dt> - <dd> - 将 <a href="en/DOM/window.open#Features_requiring_privileges"><code>chrome</code> 参数传给 <code>window.open</code></a> 能够打开一个没有多余浏览器界面元素（工具栏、地址栏等）的新窗口.</dd> - <dt> - <code>chrome</code> 文件夹</dt> - <dd> - profile 根目录中的 chrome 文件夹通常是用来存放 userChrome.js 扩展需要加载的 js 脚本</dd> - <dt> - <code>-chrome</code> 命令行参数</dt> - <dd> - Starts the application and opens the specified XUL file in a top level window. E.g. <code>mozilla -chrome <a class="external" rel="freelink">chrome://inspector/content</a></code> starts the DOM Inspector.</dd> - <dt> - Chrome 包</dt> - <dd> - A - <i> - chrome package</i> - consists of a set of - <i> - <a href="en/Chrome_Registration">chrome providers</a></i> - . There are three basic types of chrome providers: - <ul> - <li><b>Content</b>. Content can consist of any file type viewable from within Mozilla. In particular, the content provider most often consists of a set of <a href="en/XUL">XUL</a>, <a href="en/JavaScript">JavaScript</a> and <a href="en/XBL">XBL</a> binding files.</li> - <li><b>Locale</b>. Translations for multi-language support. The two main types of files are <a href="en/XUL_Tutorial/Localization">DTD</a> files and java-style <a href="en/XUL_Tutorial/Property_Files">properties files</a>.</li> - <li><b>Skin</b>. The skin provider provides complete appearance data for the user interface. Consisting of <a href="en/CSS">CSS</a> files and images.</li> - </ul> - </dd> -</dl> -<dl> - <dt> - <code>chrome.rdf</code></dt> - <dd> - The chrome registry, stores the list of registered chrome packages and other information. It was located in the install directory and in the profile. It is no longer used since Gecko 1.8 (Firefox 1.5).</dd> -</dl> -<h2 id="See_also" name="See_also">相关链接</h2> -<p>(Note that while both of the documents below mention <code>contents.rdf</code> files, an easier way of registering your chrome providers - using <a href="en/Chrome_Registration">Chrome Manifests</a> - is supported since <a href="en/Firefox_1.5">Firefox 1.5</a> / Toolkit 1.8)</p> -<ul> - <li><a href="en/XUL_Tutorial/XUL_Structure">XUL Tutorial:XUL Structure</a></li> - <li><a href="en/XUL_Tutorial/The_Chrome_URL">XUL_Tutorial:The Chrome URL</a></li> -</ul> diff --git a/files/zh-cn/conflicting/glossary/doctype/index.html b/files/zh-cn/conflicting/glossary/doctype/index.html deleted file mode 100644 index f93b74d8ba..0000000000 --- a/files/zh-cn/conflicting/glossary/doctype/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: DTD -slug: conflicting/Glossary/Doctype -translation_of: Glossary/Doctype -translation_of_original: Glossary/DTD -original_slug: Glossary/DTD ---- -<p>{{page("/en-US/docs/Glossary/Doctype")}}</p> - -<p><font face="Courier New"><!DOCTYPE></font> informs the <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/browser" title="browser: A Web browser is a program that retrieves and displays pages from the Web, and lets users access further pages through hyperlinks."><u><font color="#0066cc">browser</font></u></a> which version of <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure."><u><font color="#0066cc">HTML</font></u></a> (or <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/XML" title="XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The IT industry uses many languages based on XML as data-description languages."><u><font color="#0066cc">XML</font></u></a>) you used to write the document. Doctype is a <a class="new glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/declaration" title="The definition of that term (declaration) has not been written yet; please consider contributing it!"><u><font color="#0066cc">declaration</font></u></a>, not a <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/tag" title="tag: In HTML a tag is used for creating an element. The name of an HTML element is the name used in angle brackets such as <p> for paragraph. Note that the end tag's name is preceded by a slash character, "</p>", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case."><u><font color="#0066cc">tag</font></u></a>; you can also refer to it as "document type declaration", or "DTD" for short.</p> diff --git a/files/zh-cn/conflicting/learn/common_questions/index.html b/files/zh-cn/conflicting/learn/common_questions/index.html deleted file mode 100644 index 0eefb8f643..0000000000 --- a/files/zh-cn/conflicting/learn/common_questions/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Web 工程学 -slug: conflicting/Learn/Common_questions -tags: - - Web 工程学 - - 初学者 -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics -original_slug: learn/Web_Mechanics ---- -<p>请访问 <a class="redirect" href="/zh-CN/docs/learn/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98">常见问题</a></p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index a5ab6d1ebe..0000000000 --- a/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: 层叠和继承 -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} <span class="seoSummary">这是 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">开始学CSS</a> 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。</span></p> - -<h2 class="clearLeft" id="资料_层叠和继承">资料: 层叠和继承</h2> - -<p>一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。</p> - -<p>对于<em>层叠</em>来说，共有三种主要的样式来源：</p> - -<ul> - <li>浏览器对HTML定义的默认样式。</li> - <li><span style="line-height: 1.5;">用户定义的样式。</span></li> - <li><span style="line-height: 1.5;">开发者定义的样式，可以有三种形式：</span> - <ul> - <li><span style="line-height: 1.5;">定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。</span></li> - <li>在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。</li> - <li>定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。</li> - </ul> - </li> -</ul> - -<p>用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。</p> - -<p>有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的<code>userContent.css</code> 样式文件并放到“用户配置”的文件夹中。</p> - -<p>另外，还有一部分样式来自外链的wiki服务器上的样式表。</p> -</div> - -<p>在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。</p> - -<p>而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。</p> - -<p>同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。</p> - -<p>再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。</p> - -<p>对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。</p> - -<p>当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。</p> - -<p>这就意味着，作为开发者，你很难准确的预知页面<span style="line-height: 1.5;">最终</span><span style="line-height: 1.5;">在用户电脑上的显示效果。</span></p> - -<p>如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：<a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a>。</p> -</div> - -<h2 id="动手_使用继承">动手: 使用继承</h2> - -<ol> - <li>编辑你之前创建的style.css文件。</li> - <li>把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素: - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。<br> - - <p>但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.</p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> -</table> - -<table style="border: 2px outset #36b; margin-right: 2em; padding: 1em;"> - <caption>修改前</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #36b; padding: 1em;"> - <caption>修改后</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> -改动一下样式表，完整如下效果：只在红色的字母上加下划线： - -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">参考答案</div> - -<p>把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">隐藏答案</a></div> -<a href="#tutochallenge" title="点击显示参考答案">查看参考答案</a></div> - -<h2 id="下一节">下一节?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<code><p></code> 和 <code><strong>，你可以尝试着改变一下页面中它们的样式。</code>下一节会介绍怎样通过<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors" style="line-height: 1.5;" title="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">定义样式。</span></p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/index.html deleted file mode 100644 index 9c20acc77b..0000000000 --- a/files/zh-cn/conflicting/learn/css/building_blocks/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: 盒模型 -slug: conflicting/Learn/CSS/Building_blocks -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes -original_slug: Web/Guide/CSS/Getting_started/Boxes ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 <a href="/zh-CN/docs/CSS/开始">CSS入门教程</a> 的<span style="line-height: 1.5;">第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。</span></p> - -<h2 class="clearLeft" id="信息：盒模型">信息：盒模型</h2> - -<p>当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。</p> - -<p>中间是<em>元素</em>呈现内容的区域。这个区域的外面是<em>内边距</em>。再外面是<em>边框</em>。最外面的是<em>外边距</em>，外边距将该元素与其它元素分开。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">外边距</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">内边距</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p> - </div> - </div> - </div> - - <p><em>浅灰色标出了布局的几个部分。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p> - </div> - </div> - </div> - - <p><em>你在浏览器看到的样子。</em></p> - </td> - </tr> - </tbody> -</table> - -<p>内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。</p> - -<h3 id="颜色">颜色</h3> - -<p>内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">外边距</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">内边距</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p> - </div> - </div> - </div> - - <p><em>元素有绿色的背景。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p> - </div> - </div> - </div> - - <p><em>你在浏览器看到的样子。</em></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="边框">边框</h3> - -<p>你可以用边线或者边框来装饰元素。</p> - -<p>用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。</p> - -<p>样式包括：</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p>你也可以通过设置样式为 <code>none</code> 或 <code>hidden</code> 来明确地移除边框，或者设置边框颜色为 <code>transparent</code> 来让边框不可见，后者不会改变布局。</p> - -<p>如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。</p> - -<div class="tuto_example"> -<div class="tuto_type">例子</div> - -<p>下面的代码设置了一个h3元素的背景色和顶部边框：</p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* 中绿 */ - background-color: #efe; /* 浅绿 */ - color: #050; /* 深绿 */ - } -</pre> - -<p>结果如下：</p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">样式化后的标题</p> - </td> - </tr> - </tbody> -</table> - -<p>下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：</p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> - -<p>结果如下：</p> - -<table> - <tbody> - <tr> - <td>图片:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="外边距和内边距">外边距和内边距</h3> - -<p>使用外边距和内边距调整元素的位置，并在其周围创建空间。</p> - -<p>用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。</p> - -<p>如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。</p> - -<p>如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。</p> - -<p>你也可以按照顺序指定四个宽度： 上、右、下、左。</p> - -<div class="tuto_example"> -<div class="tuto_type">例子</div> - -<p>下面的规则通过给元素四周设置红色边框，标记出了类名为 <code>remark</code> 的段落元素。</p> - -<p>文本周围的内边距将边框与文字拉开一点距离。</p> - -<p>左外边距使得段落相对于其余文本产生缩进：</p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p>结果如下：</p> - -<table> - <tbody> - <tr> - <td> - <p>这是一个普通的段落。</p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">这是一个标记段落。</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。</p> - -<p>不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。</p> - -<p>为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。</p> - -<p>欲知更多关于内边距，外边距和边框的细节， 请看 <a href="/zh-CN/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">盒模型</span></a> 参考页。</p> -</div> - -<h2 id="实践：添加边框">实践：添加边框</h2> - -<p>编辑你的CSS文件，<code>style2.css</code>。添加下面的规则，给页面中每个标题元素上面画一条线：</p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p>如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：</p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p>刷新你的浏览器看看效果：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>（不必完全保证宽度和颜色和这里的一模一样。）</p> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">看答案。</a></p> - -<h2 id="下一节">下一节?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a> 。</p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index d2c7dcbbbb..0000000000 --- a/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: 选择器 -slug: conflicting/Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/Guide/CSS/Getting_started/Selectors ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。</span></p> - -<h2 class="clearLeft" id="资料_选择器（Selectors）">资料: 选择器（Selectors）</h2> - -<p>CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：</p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p><span style="line-height: 1.5;">在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。</span></p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>花括号中的部分称为<strong>声明（declaration）</strong></p> - -<p><code>关键字color是一个属性</code>, <code>red</code> 是其对应的值.</p> - -<p>同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.</p> - -<p><code>这个教程中将类似strong的选择器称为标签选择器（tag selector）</code>.CSS规范中称之为类型选择器（<em>type</em> selector）.</p> -</div> - -<p>本节将介绍更多的选择器。</p> - -<p>除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.</p> - -<p>其中 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 和 <code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> 两个属性具有比较重要的地位。</code></p> - -<h3 id="类选择器（Class_selectors）">类选择器（Class selectors）</h3> - -<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。</p> - -<p>在写样式表时，类选择器是以英文句号（.）开头的。</p> - -<h3 id="ID选择器（ID_selectors）">ID选择器（ID selectors）</h3> - -<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。</p> - -<p>在写样式表时，ID选择器是以#开头的。</p> - -<div class="tuto_example"> -<div class="tuto_type">例：</div> -下面的p标签同时具有 <code>class</code> 属性和<code>id</code> 属性: - -<pre class="brush: html"><p class="key" id="principal"> -</pre> - -<p><strong>id</strong> 属性值 <code>principal</code>必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 <strong>class </strong>属性值 <code>key</code>.</p> - -<p>在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）</p> - -<pre class="brush: css">.key { - color: green; -} -</pre> - -<p>下面的规则将使 <strong>id</strong> 等于 <code>principal 的那个元素的文字变为粗体</code>:</p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<p>如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>你也可以将多个选择器组合起来构成更确定的选择器。</p> - -<p>比如，选择器<code>.key</code> 选中所有class属性为 <code>key的元素</code>. 选择器 <code>p.key</code> 选中所有class属性为<span style="font-family: courier new,andale mono,monospace; line-height: normal;">key的</span>{{ HTMLElement("p") }} 元素。</p> - -<p>除了<code>class</code> 和 <code>id，你还可以用方括号的形式指定其他属性。比如</code>，选择器 <code>[type='button']</code> 选中所有 <code>type</code> 属性为 <code>button 的元素。</code></p> -</div> - -<p>如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。</p> - -<p>如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。</p> - -<h3 id="伪类选择器（Pseudo-classes_selectors）">伪类选择器（Pseudo-classes selectors）</h3> - -<p>CSS伪类（<a href="/en-US/docs/Web/Guide/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a>）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。</p> - -<p>伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type">语法</div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="伪类列表">伪类列表</h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="资料_基于关系的选择器">资料: 基于关系的选择器</h2> - -<p>CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。</p> - -<table id="relselectors"> - <caption>常见的基于关系的选择器</caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>选择器</strong></td> - <td><strong>选择的元素</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td>元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)</td> - </tr> - <tr> - <td><code>A > E</code></td> - <td>元素A的任一子元素E(也就是直系后代)</td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td>任一是其父母结点的第一个子节点的元素E</td> - </tr> - <tr> - <td><code>B + E</code></td> - <td>元素B的任一下一个兄弟元素E</td> - </tr> - <tr> - <td><code>B ~ E</code></td> - <td>B元素后面的拥有共同父元素的兄弟元素E</td> - </tr> - </tbody> -</table> - -<p>你可以任意组合以表达更复杂的关系。</p> - -<p>你还可以使用星号（*）来表示”任意元素“。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>一个HTML表格有<code style="font-size: 14px;">id</code> 属性，但是它的行和单元格没有单独的id:</p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p>下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:</p> - -<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} - #data-table-1 td:first-child + td {font-family: monospace;} -</pre> - -<p>最终效果:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="margin-right: 2em; width: 18em;"> - <tbody> - <tr> - <td><strong>Prefix</strong></td> - <td><code>0001</code></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>一般情况下，如果你提高了某个选择器的的确定度，你便<span style="line-height: 1.5;">提高它的优先级。</span></p> - -<p>使用这个技巧，可以避免为大量标签指定 <code>class</code> 或 <code>id</code> 属性。CSS（引擎）会帮你做的。</p> - -<p>在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。</p> - -<p>更多关于表格的例子，见 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a>。</p> -</div> - -<h2 id="实例_使用类选择器和ID选择器">实例: 使用类选择器和ID选择器</h2> - -<ol> - <li>创建一个HTML文件</li> - <li>将下面内容拷贝到HTML文件中 - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p id="first"> - <strong class="carrot">C</strong>ascading - <strong class="spinach">S</strong>tyle - <strong class="spinach">S</strong>heets - </p> - <p id="second"> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li>创建style1.css: - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li>保存文件，在浏览器中查看效果: - <table style="border: 2px outset #3366bb; height: 53px; padding: 1em; width: 494px;"> - <tbody> - <tr> - <td style="font-style: italic;"><em><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets //此处应为斜体</em></td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。</p> - - <p>类选择器 <code>.carrot</code> 和<code>.spinach</code> 比标签选择器 <code>strong 拥有更高优先级。</code></p> - - <p>ID 选择器 <code>#first</code> 比类选择器和标签选择器更优先。</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<ol> - <li>不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色: - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色: - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="实例_使用伪类选择器">实例: 使用伪类选择器</h2> - -<ol> - <li>创建如下 HTML: - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> - </body> -</html> -</pre> - </li> - <li>编辑CSS: - <pre class="brush: css">a.homepage:link, a.homepage:visited { - padding: 1px 10px 1px 10px; - color: #fff; - background: #555; - border-radius: 3px; - border: 1px outset rgba(50,50,50,.5); - font-family: georgia, serif; - font-size: 14px; - font-style: italic; - text-decoration: none; -} - -a.homepage:hover, a.homepage:focus, a.homepage:active { - background-color: #666; -} -</pre> - </li> - <li>保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果): - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="实例_使用基于关系的选择器和伪类选择器">实例: 使用基于关系的选择器和伪类选择器</h2> - -<p>通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（<strong style="font-size: 14px; line-height: 1.5;">pure-CSS dropdown menus</strong><span style="font-size: 14px; line-height: 1.5;">）。关键点就是创建下面这类规则：</span></p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p>然后将这些规则应用到下面的HTML结构中：</p> - -<pre class="brush: html"><div class="menu-bar"> - <ul> - <li> - <a href="example.html">Menu</a> - <ul> - <li> - <a href="example.html">Link</a> - </li> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - </ul> - </li> - </ul> -</div> -</pre> - -<p>学习实例 <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a>.</p> - -<h2 id="接下来是什么">接下来是什么?</h2> - -<p>你的样式表变得多而复杂。下面章节将讲述如何让样式表更 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS" title="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS">易读</a>.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}</p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 091b9458f9..0000000000 --- a/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,510 +0,0 @@ ---- -title: 表格 -slug: conflicting/Learn/CSS/Building_blocks/Styling_tables -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables -original_slug: Web/Guide/CSS/Getting_started/Tables ---- -<p>{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}</p> - -<p>这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。</p> - -<h2 class="clearLeft" id="信息_表格">信息: 表格</h2> - -<p>表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。</p> - -<p>当你设计你的文档时，使用一个表格来表示一系列信息的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">关系</a>。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。</p> - -<p>创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a>）使用的技术可以更好的达成目的。</p> - -<h3 id="表格结构">表格结构</h3> - -<p>在表格中，信息显示在一个个的<em>单元格</em>（<em>cell</em>）中.</p> - -<p>在页面横向上一条直线的单元格构成了<em>行</em>（<em>row</em>）。</p> - -<p>在一些表格中，行可能被分组。表格开始的特定的行组是<em>表头</em> （<em>header</em>）。表格最后的特定行组是<em>表尾</em>（<em>footer</em>）。表格中主要的行就是<em>表体</em>（<em>body</em>），这些表体也可能被分组。</p> - -<p>在页面纵向上一条直线的单元格构成了<em>列</em>（<em>column</em>），但是在CSS表格中，列的使用是受限的。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>在<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">选择器</a>那章的<a href="/zh-CN/Web/Guide/CSS/Getting_Started/Selectors#relselectors">基于关系的选择器</a>就是一个五行十个单元格的表格。</p> - -<p>第一行是表头，其余四行是表体，没有表尾。</p> - -<p>表中有两列。</p> -</div> - -<p>本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。</p> - -<h3 id="边框">边框</h3> - -<p>单元格没有外边距。</p> - -<p>但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这有三个表格。</p> - -<p>左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。</p> - -<div style="background-color: white; border: 2px outset #36b; padding: 1em; display: inline-block;"> -<table style="background-color: lime; border-collapse: separate; display: inline-block;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> -</table> - -<table style="background-color: lime; border-collapse: separate; display: inline-block; margin-left: 2em;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> -</table> - -<table style="background-color: lime; border-collapse: collapse; display: inline-block; margin-left: 2em;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="标题">标题</h3> - -<p>{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。</p> - -<p>可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。</p> - -<p>想要样式化caption的文本，可以使用任何常规的文本属性。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这个表格有一个在底部的标题。</p> - -<pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <table> - <caption>Suits</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Clubs</td> - <td style="border: 1px solid gray; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Diamonds</td> - <td style="border: 1px solid gray; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="空单元格">空单元格</h3> - -<p>你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。</p> - -<p>你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。</p> - -<div class="tuto_example"> -<div class="tuto_type">实例</div> - -<p>这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。</p> - -<p>左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="background-color: #ddffdd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="background-color: #ddffdd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">细节</div> - -<p>请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/tables.html">表格</a>来获得更多关于表格的细节信息。</p> - -<p>规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。</p> -</div> - -<h2 id="实例_设计表格样式">实例: 设计表格样式</h2> - -<ol> - <li>创建一个新的HTML文档, <code>doc3.html。</code> 复制粘贴以下内容，请确保通过滚动获取全部内容： - - <div style="height: 36em; overflow: auto;"> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Sample document 3</title> - <link rel="stylesheet" href="style3.css"> - </head> - <body> - <table id="demo-table"> - <caption>Oceans</caption> - <thead> - <tr> - <th></th> - <th>Area</th> - <th>Mean depth</th> - </tr> - <tr> - <th></th> - <th>million km<sup>2</sup></th> - <th>m</th> - </tr> - </thead> - <tbody> - <tr> - <th>Arctic</th> - <td>13,000</td> - <td>1,200</td> - </tr> - <tr> - <th>Atlantic</th> - <td>87,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Pacific</th> - <td>180,000</td> - <td>4,000</td> - </tr> - <tr> - <th>Indian</th> - <td>75,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Southern</th> - <td>20,000</td> - <td>4,500</td> - </tr> - </tbody> - <tfoot> - <tr> - <th>Total</th> - <td>361,000</td> - <td></td> - </tr> - <tr> - <th>Mean</th> - <td>72,000</td> - <td>3,800</td> - </tr> - </tfoot> - </table> - </body> -</html> -</pre> - </div> - </li> - <li>创建一个新的样式表 <code>style3.css。复制粘贴一些内容，通过滚动获取全部内容：</code> - <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ - -#demo-table { - font: 100% sans-serif; - background-color: #efe; - border-collapse: collapse; - empty-cells: show; - border: 1px solid #7a7; -} - -#demo-table > caption { - text-align: left; - font-weight: bold; - font-size: 200%; - border-bottom: .2em solid #4ca; - margin-bottom: .5em; -} - - -/* basic shared rules */ -#demo-table th, -#demo-table td { - text-align: right; - padding-right: .5em; -} - -#demo-table th { - font-weight: bold; - padding-left: .5em; -} - - -/* header */ -#demo-table > thead > tr:first-child > th { - text-align: center; - color: blue; -} - -#demo-table > thead > tr + tr > th { - font-style: italic; - color: gray; -} - -/* fix size of superscript */ -#demo-table sup { - font-size: 75%; -} - -/* body */ -#demo-table td { - background-color: #cef; - padding:.5em .5em .5em 3em; -} - -#demo-table tbody th:after { - content: ":"; -} - - -/* footer */ -#demo-table tfoot { - font-weight: bold; -} - -#demo-table tfoot th { - color: blue; -} - -#demo-table tfoot th:after { - content: ":"; -} - -#demo-table > tfoot td { - background-color: #cee; -} - -#demo-table > tfoot > tr:first-child td { - border-top: .2em solid #7a7; -} -</pre> - </li> - <li>在浏览器打开文档，它将看起来像下面一样： - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> - - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项： - <ul> - <li>标题是放在表格边框的外面的;</li> - <li>如果你在可选项中设置了最小点尺寸，它可能会影响km<sup>2</sup>这样的上标;</li> - <li>有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;</li> - <li>冒号是通过样式表来添加的。</li> - </ul> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>更改样式表来使表格像下面一样显示：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">查看</a>挑战的答案。</p> - -<h2 id="接下来">接下来?</h2> - -<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/propidx.html">完全属性表</a>来获得完整的属性和值的信息。</p> - -<p><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media">下一页</a>将再次着眼于CSS样式表的目的和结构。</p> -</div> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 680e46c676..0000000000 --- a/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Color -slug: conflicting/Learn/CSS/Building_blocks/Values_and_units -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color -original_slug: Web/Guide/CSS/Getting_started/Color ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.</span></p> - -<h2 class="clearLeft" id="关于_颜色">关于: 颜色</h2> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：</span></p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td></td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"></td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"></td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"></td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"></td> - </tr> - <tr> - <td>主要的</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"></td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"></td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"></td> - </tr> - <tr> - <td>次要 </td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"></td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"></td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"></td> - </tr> - <tr> - <td></td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"></td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"></td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"></td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"></td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"></td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"></td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"></td> - </tr> - </tbody> -</table> - - - -<div class="tuto_details"> -<div class="tuto_type">细节</div> - -<div style="line-height: 1.428571em; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; color: rgb(0, 0, 0);">你的浏览器可能支持更多名字命名的颜色，比如：</div> - -<div></div> - -<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"></td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"></td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"></td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"></td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"></td> - </tr> - </tbody> -</table> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多存在的名字的颜色命名</span>, <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你可以参看CSS 3颜色模块中的</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="line-height: 1.5;">SVG color keywords</a><span style="line-height: 1.5;"> 部分. </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。</span></p> -</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：</span></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>黑</td> - <td style="width: 2em; height: 2em; background-color: #000;"></td> - <td><code>#000</code></td> - </tr> - <tr> - <td>纯 红</td> - <td style="width: 2em; height: 2em; background-color: #f00;"></td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>纯 绿</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"></td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>纯 蓝</td> - <td style="width: 2em; height: 2em; background-color: #00f;"></td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>白</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）</span>:</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>黑</td> - <td style="width: 2em; height: 2em; background-color: #000;"></td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>纯红</td> - <td style="width: 2em; height: 2em; background-color: #f00;"></td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>纯绿</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"></td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>纯蓝</td> - <td style="width: 2em; height: 2em; background-color: #00f;"></td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>白</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你能够从你的画图程序或者其他的工具上得到6位的颜色数值</span>.</p> - -<div class="tuto_example"> -<div class="tuto_type">例如</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">可以通过调整3位数字来得到不同的颜色</span>:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>从纯红开始:</td> - <td style="width: 2em; height: 2em; background-color: #f00;"></td> - <td><code>#f00</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它淡一点，加一些绿色和蓝色</span>:</td> - <td style="width: 2em; height: 2em; background-color: #f77;"></td> - <td><code>#f77</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更偏橙色一些，多加一些绿色</span>:</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"></td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更深一些，所有的颜色部分，红，绿，蓝都要减少</span>:</td> - <td style="width: 2em; height: 2em; background-color: #c74;"></td> - <td><code>#c74</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它的饱和度更低一些，所有的颜色值都调整到差不多大小</span>:</td> - <td style="width: 2em; height: 2em; background-color: #c98;"></td> - <td><code>#c98</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">如果所有的颜色值都相等，那么就变成了灰色</span>:</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"></td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于浅色，比如说淡蓝色</span>:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">从纯白色开始</span>:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> - <td><code>#fff</code></td> - </tr> - <tr> - <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">稍微降低一下各个颜色值</span>:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"></td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">还能够通过RGB值（0-255或者是百分比值），来得到颜色</span></p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">比如，下面是深红色的RGB表示法</span>:</p> - -<pre class="brush:css">rgb(128, 0, 0) </pre> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于如何指定颜色的所有信息，可以参看 CSS规范中的</span>: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> 部分.</p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">更多关于系统颜色的说明，比如菜单、</span>树<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">等，可以参看CSS规范中得</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="line-height: 1.5;">CSS2 System Colors</a><span style="line-height: 1.5;"> 部分.</span></p> -</div> - -<h3 id="颜色属性">颜色属性</h3> - -<p>你已经在文本中使用了 {{ cssxref("color") }} 属性.</p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">同样可以使用</span><span style="line-height: 1.5;">{{ cssxref("background-color") }} </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来改变元素的背景色.</span></p> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">背景色可以设置</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">transparent</code><span style="line-height: 1.5;"> </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来移除掉所有的颜色，呈现出父元素的背景色</span></p> - -<div class="tuto_example"> -<div class="tuto_type">例如</div> - -<p>在本指南中，<strong>例如</strong> 文本框使用了淡黄色来表示背景色：</p> - -<pre class="brush:css">background-color: #fffff4; -</pre> - -<p><strong>更多细节</strong> 文本框使用了下面的淡灰色 :</p> - -<pre class="brush:css">background-color: #f4f4f4; -</pre> -</div> - - - -<h2 id="实践_使用颜色代码">实践: 使用颜色代码</h2> - -<ol> - <li>编辑你的CSS文件.</li> - <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">下面用粗体显示的部分，表示首字母用淡蓝色显示</span>. (你的文件中的布局和注释可能与下面所示的不同。按照你喜欢的方式来组织它们吧！) - <pre class="brush:css;highlight:[13]">/*** CSS 手册: 颜色页面 ***/ - -/* 页面 字体 */ -body {font: 16px "Comic Sans MS", cursive;} - -/* 段落 */ -p {color: blue;} -#first {font-style: italic;} - -/* 首字母 */ -strong { - color: red; - background-color: #ddf; - font: 200% serif; - } - -.carrot {color: red;} -.spinach {color: green;} </pre> - </li> - <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">保存文件，刷新浏览器看结果</span>.</li> -</ol> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来</span>.</p> - -<p>(<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制</span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">你需要查一下CSS规范或者是工具来得到一致的颜色</span><span style="line-height: 1.5;">.)</span></p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>The following values are reasonable approximations of the named colors:</p> - -<pre class="brush: css">strong { - color: #f00; /* red */ - background-color: #ddf; /* pale blue */ - font: 200% serif; -} - -.carrot { - color: #fa0; /* orange */ -} - -.spinach { - color: #080; /* dark green */ -} - -p { - color: #00f; /* blue */ -} -</pre> - - -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决的方法.</a></div> - -<h2 id="下一步">下一步?</h2> - -<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容")}}. 示例文本和示例样式表是严格分开的。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">下一节 </a>将介绍在什么情况下可以允许他们不分开.</p> diff --git a/files/zh-cn/conflicting/learn/css/css_layout/index.html b/files/zh-cn/conflicting/learn/css/css_layout/index.html deleted file mode 100644 index 6e5cc4ae53..0000000000 --- a/files/zh-cn/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: 布局 -slug: conflicting/Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/Guide/CSS/Getting_started/Layout ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 <a href="/zh-CN/docs/CSS/开始" title="en/CSS/Getting Started">CSS入门教程</a> 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。</p> - -<h2 class="clearLeft" id="说明_布局">说明: 布局</h2> - -<p>你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。</p> - -<p>当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。</p> - -<p>本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 <a href="http://learnlayout.com/">学习高级布局</a>）</p> - -<h3 id="文档结构">文档结构</h3> - -<p>当你想控制文档布局时，就不得不改变它的结构。</p> - -<p>页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>在你的示例中, 编号段落并没有自己的容器。</p> - -<p>你的样式表无法为这些段落画出边框，因为没有选择器指向它们。</p> - -<p>为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:</p> - -<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> -<div id="numbered"> - <p>Lorem ipsum</p> - <p>Dolor sit</p> - <p>Amet consectetuer</p> - <p>Magna aliquam</p> - <p>Autem veleum</p> -</div> -</pre> - -<p>现在可以通过样式表在每个列表周围画出边框了:</p> - -<pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - -<p>运行结果如下:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="大小单位">大小单位</h3> - -<p>到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。</p> - -<p>因此，最好通过百分比或 ems (<code>em</code>) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>文本左边的border通过像素来指定大小。</p> - -<p>文本右边的border通过 ems来指定大小。</p> - -<p>在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="">RESIZE ME PLEASE</div> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多详情</div> - -<p>对于其它设备，其它的长度单位可能更合适。</p> - -<p>在本指南中会有其它篇幅详细介绍这一点。</p> - -<p>更多详情参见CSS说明中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> .</p> -</div> - -<h3 id="文本布局">文本布局</h3> - -<p>有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:</p> - -<dl> - <dt>{{ cssxref("text-align") }}</dt> - <dd>内容对齐。 可以使用下面几个值： <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>。</dd> - <dt>{{ cssxref("text-indent") }}</dt> - <dd>指定内容缩进。</dd> -</dl> - -<p>这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>标题居中:</p> - -<pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - -<p>输出结果:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> -</table> - -<p>在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。</p> -</div> - -<h3 id="浮动">浮动</h3> - -<p> {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。</p> - -<p>本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。</p> - -<p>为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:</p> - -<pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> - -<p>运行结果如下:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>(box右侧需要增加一些padding ,防止文本与边框太近)</p> - -<h3 id="位置">位置</h3> - -<p>你可以为一个元素指定 {{ cssxref("position") }} 属性为以下值之一，来设置其位置。</p> - -<p>这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。</p> - -<dl> - <dt><code>relative</code></dt> - <dd>通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。</dd> - <dt><code>fixed</code></dt> - <dd>为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。</dd> - <dt><code>absolute</code></dt> - <dd>为元素指定相对于其父元素的确切位置。只有在父元素使用 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 时才有效。你可以为任何父元素指定 <code>position: relative;因为它不会产生移动。</code></dd> - <dt><code>static</code></dt> - <dd>默认值。当明确要关闭位置属性时使用。</dd> -</dl> - -<p>和 <code>position</code> 属性(除了 <code>static</code>)一起使用的, 有下列属性: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> 通过设置它们来指定元素的位置或大小。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:</p> - -<pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - -<p>在你的样式表里，将父容器的position设置为 <code>relative。无需为它设置任何具体变动。</code> 将子元素的position属性设置为 <code>absolute</code>:</p> - -<pre class="brush:css">#parent-div { - position: relative; - font: bold 200% sans-serif; -} - -#forward, #back { - position: absolute; - margin:0px; /* no margin around the elements */ - top: 0px; /* distance from top */ - left: 0px; /* distance from left */ -} - -#forward { - color: blue; -} - -#back { - color: red; -} -</pre> - -<p>输出结果如下,反斜杠显示在斜杠上方</p> - -<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> -</div> - -<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多详情</div> - -<p>更多详情的postion说明在 CSS Specification 中占用了两个章节: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> 和 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p> - -<p>如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。</p> -</div> - -<h2 id="实践_设置布局">实践: 设置布局</h2> - -<ol> - <li>修改示例文档, <code>doc2.html</code>, 和样式表, <code>style2.css</code>, 使用之前的示例 <a href="#Document_structure" title="#Document structure"><strong>文档结构</strong></a> and <a href="#Floats" title="#Floats"><strong>浮动</strong></a>.</li> - <li>在 <a href="#Floats" title="#Floats"><strong>浮动</strong></a> 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>修改示例文档, <code>doc2.html</code>, 在文档末尾添加一个标签, <code>注意在</body>之前。</code></p> - -<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - -<p>如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:</p> - -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。</p> - -<p>在样式表中添加一条规则，将图片显示在文档右上角。</p> - -<p>刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。</p> - -<div style="position: relative; width: 29.5em; height: 18em;"> -<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - -<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> -<ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> -</ul> -</div> - -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - -<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> -<p><strong>1: </strong>Lorem ipsum</p> - -<p><strong>2: </strong>Dolor sit</p> - -<p><strong>3: </strong>Amet consectetuer</p> - -<p><strong>4: </strong>Magna aliquam</p> - -<p><strong>5: </strong>Autem veleum</p> -</div> - -<p style=""> </p> - -<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> -</div> -</div> -</div> - -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout"> 查看该挑战的解决方案</a>。</p> - -<h2 id="接下来是什么？">接下来是什么？</h2> - -<p>{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables">表格</a>的一些特定方法。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index 7f731ee088..0000000000 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: 创建可读性良好的CSS -slug: conflicting/Learn/CSS/First_steps/How_CSS_is_structured -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS -original_slug: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第6部分；<span class="seoSummary"> 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。</span></p> - -<h2 class="clearLeft" id="资料：创建可读性良好的_CSS">资料：创建可读性良好的 CSS</h2> - -<p>你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。</p> - -<h3 id="空白字符">空白字符</h3> - -<p>空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。</p> - -<p>对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。</p> - -<p>如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。</p> - -<p>样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：</p> - -<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} -</pre> - -<p>也有人喜欢下面这种每行只写一个属性-值的风格：</p> - -<pre class="brush: css">.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - -<p>还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：</p> - -<pre class="brush: css">.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - -<p>还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：</p> - -<pre class="brush: css">.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - -<p>有些人混合使用空白字符来提高可读性：</p> - -<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } -.vegetable.carrot { color: orange; height: 90px; width: 10px } -.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } -</pre> -</div> - -<p>而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。</p> - -<h3 id="注释">注释</h3> - -<p>CSS注释以<code>/*</code> 开始，以 <code>*/</code>结束。</p> - -<p>你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。</p> - -<p>对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<pre class="brush: css">/* style for initial letter C in first paragraph */ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> -</div> - -<h3 id="选取器组">选取器组</h3> - -<p>当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。</p> - -<p>在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<p>这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。</p> - -<p>将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。</p> - -<pre class="brush: css">/* color for headings */ -h1, h2, h3 {color: navy;} -</pre> -</div> - -<h2 id="实践：添加注释来提高展现力">实践：添加注释来提高展现力</h2> - -<ol> - <li>编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）： - <pre class="brush: css">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> - </li> - <li>为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。</li> - <li>保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果： - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details"> -<div class="tuto_type">挑战</div> - -<p>将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p>（这个不止一种解决方案。）</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">一种解决方法：</div> -其中一种解决办法就是给<code>.carrot</code>添加注释： - -<pre class="brush: css">.carrot { - color: orange; -} -</pre> -A more specific selector, <code>p#second</code> also works. <a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决方案</a></div> - -<h2 id="接下来是什么">接下来是什么?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles">详细指定文本的外观</a> 。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 5bf2a3b516..0000000000 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CSS如何工作 -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/Guide/CSS/Getting_started/How_CSS_works ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。</span></p> - -<h2 class="clearLeft" id="信息：CSS_如何工作">信息：CSS 如何工作</h2> - -<p>浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：</p> - -<ol> - <li>浏览器先将标记语言和CSS转换成<a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。</li> - <li>最后浏览器把 DOM的内容展示出来。</li> -</ol> - -<p>标记语言通过使用“元素”来定义文档结构。你需要使用一些以'<'开头和以'>'结尾的字符串，俗称<em>tags，</em>来构成元素。这些元素一般是在'<code>< ></code>'里加上元素名来作为起始tag，在<span style="line-height: inherit;">'</span><code style="font-size: 14px; line-height: inherit;">< ></code><span style="line-height: inherit;">'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。</span></p> - -<p>元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。</p> - -<p>DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> -在示例代码中， 我们使用 <code><p></code> 标签和它的结束标签 <code></p></code> 构造了一个容器： - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="实例">实例</h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p>在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<p>理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。</p> - -<h2 id="行动：分析DOM结构">行动：分析DOM结构</h2> - -<h3 id="使用_DOM_Inspector">使用 DOM Inspector</h3> - -<p>你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。</p> - -<ol> - <li>使用 Mozilla 浏览器来打开示例文档。</li> - <li>在浏览器菜单栏中，选择 <strong>工具 > 查看器</strong>，也可能是选择 <strong>工具> Web 开发者 > 查看器。</strong> - <div class="tuto_details"> - <div class="tuto_type">更多细节</div> - - <p>如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">安装地址</a> 来安装并重启浏览器，然后再回到这里继续学习。</p> - - <p>如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。</p> - </div> - </li> - <li>你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。 - <p><strong>注意: </strong> HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。</p> - - <p>通过展开元素结点，你可能会看到下面这样的一部分内容：</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。</p> - - <p>如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 </p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>在 DOMi 中，点击一个 <small>STRONG</small> 结点。</p> - -<p>在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 </p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看挑战的解决方案</a></div> - -<h3 id="使用_Web_X-Ray_Goggles">使用 Web X-Ray Goggles</h3> - -<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。</p> - -<p><span style="line-height: 1.5;">到 </span><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" style="line-height: 1.5;" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>的主页。</p> - -<ol> - <li>将页面中的书签链接拖拽到浏览器工具栏。</li> - <li>打开你的示例 HTML 文档。</li> - <li>通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 </li> - <li>通过在文档中移动鼠标箭头来查看相应的文档元素。</li> -</ol> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">下一章</a> 中将会深入解释这种相互联系和相互影响。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html deleted file mode 100644 index 918372bd48..0000000000 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 为何使用CSS？ -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 -tags: - - CSS - - CSS:入门 - - NeedsLiveSample -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}<span class="seoSummary">这是<a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS入门教程</a> 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。</span></p> - -<h2 class="clearLeft" id="信息_为何使用CSS？">信息: 为何使用CSS？</h2> - -<p>CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为<em>样式</em>(<em>style</em>)。您可以将样式从它的内容分离出来，以便您能够：</p> - -<ul> - <li>避免重复</li> - <li>更容易维护</li> - <li>为不同的目的，使用不同的样式而内容相同</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">例如</div> - -<p>您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。</p> - -<p>当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。</p> - -<p>当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。</p> -</div> - -<p>总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)</p> - -<div class="tuto_details"> -<div class="tuto_type">更多的细节</div> - -<p>像HTML之类的标记语言也会提供指定样式的方法。</p> - -<p>例如，在HTML中，您可以使用<code><b></code>标签来加粗文字，同时，您也可以在页面的<code><body>标记中指定背景颜色。</code></p> - -<p>当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。</p> -</div> - -<h2 id="行动：创建样式表">行动：创建样式表</h2> - -<ol> - <li>在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：<code>style1.css</code></li> - <li>在您的CSS文件中，复制、粘贴下面的行，并保存该文件: - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="连接您的文档和样式表">连接您的文档和样式表</h3> - -<ol> - <li>为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行： - <pre class="brush: html; highlight:[6];"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li>保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示： - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">挑战</div> - -<p>除了红色外，CSS允许使用其它的颜色名称。</p> - -<p>不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">请参考解答。</a></div> - -<h2 id="下一节？">下一节？</h2> - -<p>{{nextPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">更多的</a>关于您的浏览器在显示文档时如何将它们组合在一起。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html deleted file mode 100644 index 973ec37d71..0000000000 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: What is CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/Guide/CSS/Getting_started/What_is_CSS ---- -<div>{{CSSTutorialTOC}}</div> - -<p>{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为<span class="seoSummary"> <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 入门指南</a> 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。</span></p> - -<h2 class="clearLeft" id="资料_什么是_CSS">资料: 什么是 CSS</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) 是一门指定文档该如何呈现给用户的语言。</p> - -<p><em>文档</em><span style="line-height: inherit;"> 是信息的集合，它使用一门 </span><em>标记语言</em><span style="line-height: inherit;"> 作为结构。</span></p> - -<p>将一篇文档 <em>呈现 </em>给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。</p> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<ul> - <li>你现在阅读的这个网页就是文档。<br> - 网页中的信息通常使用标记语言 HTML (HyperText Markup Language) 来组织它的结构。</li> - <li>一个应用中的对话框，也称为模态窗口，也是文档。<br> - 这样的对话框可能也会使用类似于 XUL 这样的标记语言。Mozilla 的有些应用使用了该语言。</li> -</ul> -</div> - -<p>在该教程中，如果使用像下方这样标题为 <strong>更多细节</strong> 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。</p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。</p> - -<p>举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。</p> - -<p>关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en/HTML" title="en/HTML">HTML</a></td> - <td>用于 web 页面</td> - </tr> - <tr> - <td><a href="/en/XML" title="en/XML">XML</a></td> - <td>用于结构化文档</td> - </tr> - <tr> - <td><a href="/en/SVG" title="en/SVG">SVG</a></td> - <td>用于图形</td> - </tr> - <tr> - <td><a href="/en/XUL" title="en/XUL">XUL</a></td> - <td>用于 Mozilla 中的用户界面</td> - </tr> - </tbody> -</table> - -<p>在教程的第二部分，你会看到使用这些标记语言的例子。</p> -</div> - -<p><em> </em>为用户<em>展现 </em><span style="line-height: inherit;">文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。</span></p> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为<em>用户代理</em>(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。</p> - -<p>要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">定义</a>。</p> -</div> - -<h2 id="动手：创建一个文档">动手：创建一个文档</h2> - -<ol> - <li>在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。</li> - <li>打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。</li> - <li>将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 <code>doc1.html</code> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li>在你的浏览器中开启一个新的标签页或窗口，打开文件。 - <p>你会看到一串开头字母大写的文本，像这样：</p> - - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。</p> - </li> -</ol> - -<h2 id="接下来是什么？">接下来是什么？</h2> - -<p>{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在<a href="/zh-CN/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">下一节</a>中，你将会使用 CSS 来指定样式。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/index.html b/files/zh-cn/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index d18a052149..0000000000 --- a/files/zh-cn/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: CSS入门教程 -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - CSS:Getting_Started - - CSS入门 - - CSS教程 - - Web - - 初学者 - - 教程 -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/Guide/CSS/Getting_started ---- -<p> </p> - -<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> - -<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> - -<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> - -<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3> - -<ul> - <li>一个文本编辑器</li> - <li>一个现代浏览器</li> - <li>编辑器与浏览器的基本使用方法</li> -</ul> - -<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p> - -<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> - -<h2 id="如何使用本指南">如何使用本指南</h2> - -<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p> - -<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3> - -<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> - -<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p> - -<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> - -<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3> - -<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> - -<ol> - <li><strong><a href="/zh-CN/CSS/Getting_Started/JavaScript">JavaScript</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> -</ol> - -<p> </p> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index 730c8cbca6..0000000000 --- a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: 理解下划线 -slug: conflicting/Learn/CSS/Styling_text/Fundamentals -tags: - - CSS:Articles -translation_of: >- - Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration -translation_of_original: Understanding_Underlines -original_slug: Understanding_Underlines ---- -<p>对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做：</p> - -<pre class="notranslate"><a href="link.html"> -<span style="text-decoration: none;">一个链接</span> -</a></pre> - -<p>与大部分人的想法相反，这样去除下划线是不应该的。本文将会探讨去除下滑的正确方法及其原因。正确的处理下划线有很大的好处，譬如简洁的标签及高可读性的源代码。</p> - -<h3 id="How_Text_Gets_Decorated" name="How_Text_Gets_Decorated">文字是如何被加上修饰线（decoration）的</h3> - -<p>了解如何正确删除下划线之前，我们先了解一下修饰线（<code>decoration</code> 下同）是如何被应用的。首先，让我们先思考一个 <code>span</code> 在一个 <code>p</code> 中会是什么样子。</p> - -<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> -这里有一些文字 -</span></p></pre> - -<p>很明显，就像下面所展示的：文字被加上了下划线。</p> - - - -<p><u>这里有一些文字。</u></p> - - - -<p>现在，让我们添加再添加一个 <code>span</code> 嵌套在之前的 <code>span</code> 里面。然后再给后加的 <code>span</code> 一个不一样的线样式：</p> - -<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> -这里有一些 -<span style="text-decoration: overline;">额外的</span> -文字。 -</span></p></pre> - - - -<p><u>这里有一些<span style="text-decoration: overline;">额外的</span>文字。</u></p> - - - -<p>我们发现此例的 “额外的” 一词出现了既有上划线也有下划线的情况。但是这为什么呢？我们仅给最里面 <code>span</code> 标签设置了上划线。<code>text-decoration</code> 的值并不会被继承。那么为什么 “额外的” 下面会有下划线呢？</p> - -<p>现在让我们把最里面 <code>span</code> 的文字颜色（<code>color</code> 下同）改一下，比如红色，我们就能知道怎么回事了。</p> - - - -<p><u>这里有一些<span style="color: red; text-decoration: overline;">额外的</span>文字。</u></p> - - - -<p>上划线和文字一起变成了红色，但是下划线并没有。这是因为下划线实际上是外面 <code>span</code> 的一部分，它只是在最里面 <code>span</code> 的下方经过而已。如果我们给外面的 <code>span</code> 加个背景，我们一般是希望背景也能穿过里面 <code>span</code> 显示出来。同样的，父级的文字修饰线就会显示在子级元素上，即使你并没有给子级元素设置或继承修饰线。</p> - -<p>现在，让我们明确地移除里面 <code>span</code> 的修饰线样式。</p> - -<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> -这里有一些 -<span style="text-decoration: none; color: red;">额外的</span> -文字。 -</span></p></pre> - -<p>这样意味着不应有任何修饰线样式在里面的 <code>span</code> 上，但是这样并不会阻止外面的 <code>span</code> 显示下划线。这就和 “把里面 <code>span</code> 的背景设为透明并不会让我们看不到外面 <code>span</code> (或者 <code>body</code> 之类的) 的背景” 一样。我们可以在下面看见，下划线仍旧是外面 <code>span</code> 的颜色。</p> - - - -<p><u>这里有一些<span style="color: red; text-decoration: none;">额外的</span>文字。</u></p> - - - -<p>那么让我们考虑一下这种情况：你在一个超链接 <code>a</code> 里添加了一个 <code>span</code> ，如果你想移除链接的下划线。但是因为上面所说的原因，你是没办法这样达成目的：</p> - -<pre class="notranslate"><a href="http://developer.netscape.com/">这个链接 -<span style="text-decoration: none; font-weight: bold;"> -有个span -</span>在里面</a></pre> - - - - - - - -<p>因此，我们不能使用这种方式移除下划线，我们需要其他的方法。而这其他的方法比你想象的要简单许多。</p> - -<h3 id="How_to_Really_Turn_Off_Underlines" name="How_to_Really_Turn_Off_Underlines">如何真正地将下划线移除</h3> - -<p>答案很简单：如果你不希望超链接拥有下划线，那么请直接关闭该标签本身的下划线。通过覆写在链接中的<code>span</code>的样式来修改下划线是不会在正常的浏览器中起效的，这是一种多余的无用行为。</p> - -<p>比方说，如果你想移除页面中所有超链接的下划线，那么最简单的办法是：</p> - -<pre class="notranslate">a:link, a:visited {text-decoration: none;}</pre> - -<p>另一个常见情况是仅从一组选定的链接中删除其中的下划线。比方说，在页面顶部的导航链接通常不会设有下划线。在这种情况下，你最好的选择是使用 class 或者 id 属性对目标元素进行分类，然后编写对应的样式。比方说，假设在下面的表格中有你希望修改的链接标签，那么给<code>table</code>本身追加一个<code>id</code>属性就是你首先需要做的。</p> - -<pre class="notranslate"><table id="navbar"> -<tr> -<td><a href="link1.html">Home</a></td> -<td><a href="link2.html">Electronics</a></td> -<td><a href="link3.html">Accessories</a></td> -<td><a href="link4.html">Software</a></td> -<td><a href="link5.html">Checkout</a></td> -</tr> -</table></pre> - -<p>有了 <code>id</code> 之后, 我们现在就可以为其编写一条CSS规则：</p> - -<p><code>table#navbar a {text-decoration: none;}</code></p> - -<p>这种方法最大的额外好处就是你可以基于此规则为这些链接扩展其他样式，比如：</p> - -<pre class="notranslate">table#navbar a {text-decoration: none; color: yellow; -font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}</pre> - -<p>当然，你也可以直接将你希望修改样式的链接赋上特定的 class ，在有些情况下这是十分有必要的。而且，在绝大多数情况下 ，使用与本页面类似的方法将有效地帮助到其他作者。Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.</p> - -<h3 id="Other_Decorations" name="Other_Decorations">其他修饰线</h3> - -<p>本文重点介绍下划线，因为下划线是迄今为止在网络上使用的最常见的文本修饰。不过，此处讨论的原理适用于任何形式的装饰。如果文本设置了删除线样式，则该样式将穿透元素的文本以及任何子元素的文本，无论<code>text-decoration</code>的值是多少。举个例子：This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for <code>text-decoration</code>. As an example:</p> - -<pre class="notranslate"><p style="text-decoration: line-through;"> -This text has been -<span style="text-decoration: none; color: red;">stricken</span> -with a line. -</p></pre> - -<p>The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.</p> - - - -<h3 id="Conclusion" name="Conclusion">结论</h3> - -<p>Although some browsers will let you get away with it, the use of <code>span</code> to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.</p> - -<h3 id="Recommendations" name="Recommendations">建议</h3> - -<ul> - <li><strong>不要</strong>尝试通过<code>span</code>标签来修饰链接，这是一种无效的行为——在使用规范CSS的浏览器中，它不能够去除类似下划线等装饰线。</li> - <li>利用CSS选择器，通过class或id属性对元素进行进行分类来提高CSS的效率。.</li> -</ul> - -<div class="originaldocinfo"> -<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3> - -<ul> - <li>作者： Eric A. Meyer, Netscape Communications</li> - <li>最后更新： Published 2002年3月5日</li> - <li>版权信息： Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>注意： This reprinted article was originally part of the DevEdge site.</li> -</ul> -</div> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html deleted file mode 100644 index 128204ecbc..0000000000 --- a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: 文本样式 -slug: >- - conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/Guide/CSS/Getting_started/Text_styles ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。</p> - -<h2 class="clearLeft" id="资料：文本样式">资料：文本样式</h2> - -<p>CSS提供了几个属性用来操作字体。</p> - -<p>我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：</p> - -<ul> - <li>字体加粗，字体的风格：斜体和字体变形：小型大写字母</li> - <li>字体的大小</li> - <li>行高</li> - <li>字体</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">示例</div> - -<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} -</pre> - -<p>这条规则定义了字体的几个属性，使整个段落文本都变成斜体。</p> - -<p>字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。</p> - -<p>文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。</p> - -<p><span style="line-height: 1.5;">这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。</span></p> -</div> - -<h3 id="sect1"> </h3> - -<h3 id="字体">字体</h3> - -<p>你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。</p> - -<p>在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。</p> - -<p>如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。</p> - -<p>使用 {{ cssxref("font-family") }} 属性指定文本的字体。</p> - -<p>简体中文的字体示例：</p> - -<p>Windows：font-family:微软雅黑;</p> - -<p>Mac OS：font-family:"Songti SC";</p> - -<h3 id="字号">字号</h3> - -<p>浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。</p> - -<p>你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。</p> - -<p>如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。</p> - -<p>使用{{ cssxref("font-size") }} 属性指定字体的大小。</p> - -<h3 id="行高">行高</h3> - -<p>行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。</p> - -<p>使用 {{ cssxref("line-height") }} 属性指定文本的行间距。</p> - -<h3 id="装饰">装饰</h3> - -<p>单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。</p> - -<h3 id="其他属性">其他属性</h3> - -<p>使用<span style="line-height: 1.5;">{{ cssxref("font-style") }}</span><code style="font-size: 14px;">: italic;指定文本为斜体</code><code style="font-size: 14px;">;</code></p> - -<p><code style="font-size: 14px;">使用</code><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-weight") }}: bold;指定文本加粗;</code></p> - -<p>使用<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;</code></p> - -<p>如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.</p> - -<div class="tuto_details"> -<div class="tuto_type">详细资料</div> - -<p>我们也可以采用其他方式指定文本样式。</p> - -<p><span style="line-height: 1.5;">比如，这里提到的几个属性的其他值。</span></p> - -<p>在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。</p> - -<p>字体相关的全部细节，可以在CSS规范里查看<a class="external" href="http://www.w3.org/TR/CSS21/fonts.html" style="line-height: 1.5;">Fonts</a><span style="line-height: 1.5;"> 。文本修饰相关可以查看</span><span style="line-height: 1.5;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html" style="line-height: 1.5;">Text</a><span style="line-height: 1.5;"> 。</span></p> - -<p>如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。</p> -</div> - -<h2 id="实践：指定字体">实践：指定字体</h2> - -<p>对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。</p> - -<ol> - <li>编辑我们的样式表。</li> - <li>添加以下规则到你的样式表中。推荐这个规则放在css文件的开头: - <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} -</pre> - </li> - <li>添加一个该规则的注释，可以添加空格匹配你的整体样式布局。</li> - <li>保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。 - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">查看答案.</a></div> - -<h2 id="下一节">下一节?</h2> - -<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。</p> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index 61655596da..0000000000 --- a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Lists -slug: conflicting/Learn/CSS/Styling_text/Styling_lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists -original_slug: Web/Guide/CSS/Getting_started/Lists ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。</p> - -<h2 class="clearLeft" id="信息_列表">信息: 列表</h2> - -<p>如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。</p> - -<p>CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。</p> - -<p>使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。</p> - -<p>你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。</p> - -<h3 id="无序列表">无序列表</h3> - -<p>无序列表的每个列表项都用同样的方式标记。</p> - -<p>CSS 有三种标记样式：</p> - -<ul style="padding-left: 2em;"> - <li style="list-style-type: disc;"><code>disc</code></li> - <li style="list-style-type: circle;"><code>circle</code></li> - <li style="list-style-type: square;"><code>square</code></li> -</ul> - -<p>你可以指定一个图片的URL来自定义标记样式。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>下面的规则为不同类的列表项指定了不同的标记：</p> - -<pre class="brush:css">li.open {list-style: circle;} -li.closed {list-style: disc;} -</pre> - -<p>这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：</p> - -<pre class="brush:css"><ul> - <li class="open">Lorem ipsum</li> - <li class="closed">Dolor sit</li> - <li class="closed">Amet consectetuer</li> - <li class="open">Magna aliquam</li> - <li class="closed">Autem veleum</li> -</ul> -</pre> - -<p>结果：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <ul style="padding-right: 6em;"> - <li style="list-style-type: circle;">Lorem ipsum</li> - <li style="list-style-type: disc;">Dolor sit</li> - <li style="list-style-type: disc;">Amet consectetuer</li> - <li style="list-style-type: circle;">Magna aliquam</li> - <li style="list-style-type: disc;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="有序列表">有序列表</h3> - -<p>在有序列表中，每个列表项都被标记了不同的序号。</p> - -<p>用{{ cssxref("list-style") }} 属性指定标记样式：</p> - -<ul style="padding-left: 2em;"> - <li style=""><code>decimal</code></li> - <li style=""><code>lower-roman</code></li> - <li style=""><code>upper-roman</code></li> - <li style=""><code>lower-latin</code></li> - <li style=""><code>upper-latin</code></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>这条规则指定类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">info的</span><span style="line-height: 1.5;">{{ HTMLElement("ol") }} 元素的列表项用大写字母标序</span></p> - -<pre class="brush:css">ol.info {list-style: upper-latin;} -</pre> - -<p>{{ HTMLElement("li") }} 元素继承了ol的样式：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <ul> - <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。</p> - -<p>如果你使用如HTML这类提供了方便的无序列表<span style="line-height: 1.5;"> ({{ HTMLElement("ul") }}) 和有序列表</span><span style="line-height: 1.5;">({{ HTMLElement("ol") }})</span><span style="line-height: 1.5;">的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。</span></p> - -<p>浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。</p> -</div> - -<h3 id="计数器">计数器</h3> - -<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> -<p><strong>注意: </strong> 一些浏览器不支持计数器。<a class="external" href="http://www.quirksmode.org/" style="line-height: 1.5;" title="http://www.quirksmode.org/">Quirks Mode site</a><span style="line-height: 1.5;"> 的</span><a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: 1.5;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: 1.5;"> 页有更多这方面的兼容表格可以参考。</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Guide/CSS_Reference" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference">CSS Reference</a><span style="line-height: 1.5;"> 也有浏览器兼容性表格。</span></p> -</div> - -<p>你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。</p> - -<p>要想计数，你必须定义一个计数器。</p> - -<p>在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。</p> - -<p>设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。</p> - -<p>通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 <code>content</code> 属性来显示计数器。 (如上一节所示, <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="en-US/docs/Web/Guide/CSS/Getting_Started/Content">内容</a></strong>).</p> - -<p>在<code>content属性</code>的值中设置 <code>counter()，</code>在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 <strong>有序列表 </strong>中相同。</p> - -<p>正常情况下，显示计数器的元素也会递增计数器。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>这条规则会为每个类名中包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLElement("h3") }} 元素初始化计数器 mynum：</span></p> - -<pre class="brush:css">h3.numbered {counter-reset: mynum;} -</pre> - -<p> </p> - -<p>这条规则为每个类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLELement("p") }}元素</span><span style="line-height: 1.5;">显示并递增</span><span style="line-height: 1.5;">计数器：</span></p> - -<pre class="brush:css">p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold;} -</pre> - -<p>结果：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: .5em 6em .5em 1em;"> - <tbody> - <tr> - <td><strong>Heading</strong> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">更多细节</div> - -<p>除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。</p> - -<p>如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。</p> - -<p>你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 。</p> -</div> - -<h2 id="实例_设计列表样式">实例: 设计列表样式</h2> - -<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">新建</span></font>doc2.html：</code></p> - -<pre class="brush:html;"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document 2</title> - <link rel="stylesheet" href="style2.css"> - </head> - <body> - - <h3 id="oceans">The oceans</h3> - <ul> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - - <h3 class="numbered">Numbered paragraphs</h3> - <p class="numbered">Lorem ipsum</p> - <p class="numbered">Dolor sit</p> - <p class="numbered">Amet consectetuer</p> - <p class="numbered">Magna aliquam</p> - <p class="numbered">Autem veleum</p> - - </body> -</html> -</pre> - -<p>新建<code>style2.css</code>：</p> - -<pre class="brush:css;">/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> - -<p>如果布局和注释不符合你的口味，随便改。</p> - -<p>在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">挑战</div> - -<p>增加一条规则，用罗马数字i到v计数大洋的名字</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>修改样式，将标题用大写字母加括号的方式标序：</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> - - <p><strong>. . .</strong></p> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">答案</a></p> - -<h2 id="接下来">接下来?</h2> - -<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes">盒子</a>（<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>）。</p> - -<p> </p> diff --git a/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 45171f78c7..0000000000 --- a/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: 起步(Javascript 教程) -slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - bug-840092 -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started -original_slug: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">JavaScript是什么?</h2> - -<p>作为一门计算机语言，JavaScript本身强大、复杂，且难于理解。但是，你可以用它来开发一系列的应用程序，它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子：<a class="external" href="http://local.google.com/">Google Maps</a>。</p> - -<p>JavaScript（通称为ECMAScript）最大的优势在于，它基于浏览器，但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps，它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现，你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同，JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。</p> - -<h2 id="What_you_should_already_know" name="What_you_should_already_know">你应该知道</h2> - -<p>JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 </p> - -<p>在使用 JavaScript进行开发的过程中，可能还会涉及很多其他技术，这不在本文讨论的范围之内。 所以，不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。</p> - -<h2 id="Getting_Started" name="Getting_Started">起步</h2> - -<p>JavaScript的起步非常简单。你不需要进行复杂的程序安装，不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的，你所需要做的全部事情就是把你的代码保存为文本文件，然后再浏览器中打开。就这么简单！</p> - -<p>JavaScript非常适合作为入门级的编程语言。它直观形象，并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同，它们只对那些专业的软件开发者来说是有价值的。</p> - -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">浏览器兼容问题</h2> - -<p>不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异，提供了通用性的功能函数来方便调用。</p> - -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">如何运行示例</h2> - -<p>下面的例子都有相同的代码。要执行它们有多种方法，如果你有自己的个人站点，你还可以在站点上把这些例子保存为新的页面。</p> - -<p>如果你没有自己的个人站点，你可以在电脑上把这些例子保存下来，并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方，也是它适合做入门语言的原因。你不需要编译器或者开发环境，你只需要一个浏览器就可以开始起步了。</p> - -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">举例：捕获一个鼠标单击事件</h2> - -<p>事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题，这个简单的例子并不能说明所有的问题。然而，如果我们不涉及JavaScript事件系统，我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西，如果你想要了解更多的内部细节，那你可以去查找更详细的相关资料。</p> - -<p>鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件：</p> - -<ul> - <li>Click - 用户点击鼠标时触发</li> - <li>DblClick - 用户双击鼠标时触发</li> - <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)</li> - <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)</li> - <li>MouseOut - 当鼠标指针离开对象物理边界时触发</li> - <li>MouseOver - 当鼠标指针进入对象物理边界时触发</li> - <li>MouseMove -当鼠标指针在对象物理边界内移动时触发</li> - <li>ContextMenu - 用户点击鼠标右键时触发</li> -</ul> - -<p>捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：</p> - -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> - -<p>要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用<script>包裹后放到HTML页面中：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onclick_callback () { - alert ("Hello, World!"); - } -</script> -<span onclick="onclick_callback();">Click Here</span></pre> - -<p>另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onclick_callback(event) { - var eType = event.type; - /* the following is for compatability */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget ); - } -</script> -<span onclick="onclick_callback(event);">Click Here</span></pre> - -<p>对于事件的注册和接收还用注意一些的是，你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程：生成span对象，添加到页面中的body，给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。</p> - -<pre class="brush:js"><script type="text/javascript"> - function mouseevent_callback(event) { - /* The following is for compatability */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onload () { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events */ - span.onmousedown = mouseevent_callback; - span.onmouseup = mouseevent_callback; - span.onmouseover = mouseevent_callback; - span.onmouseout = mouseevent_callback; - - /* display the span on the page */ - body.appendChild(span); -} -</script></pre> - -<p>{{ draft() }}</p> - -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">举例：捕获一个键盘事件</h2> - -<p>同上面的例子类似，键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。</p> - -<p>下面的列表展示了一些具体的键盘事件，同鼠标事件相比是很少的：</p> - -<ul> - <li>KeyPress - 按键被按下并且释放后触发</li> - <li>KeyDown - 按键被按下但是还没有被释放时触发</li> - <li>KeyUp - 按键被释放时触发</li> - <li>TextInput ( Webkit浏览器下可以使用，并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本时触发。本文不介绍该事件。</li> -</ul> - -<p>在一个 <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 事件中，键值的Unicode编码会存储到属性keyCode或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> 中，但是两者不会同时存在。按键会生成一个字母 (如 'a')，这时会把字母的编码存储到<code>charCode</code> 中，注意这里是区分大小写的( <code>charCode</code> 会判断shift键是否同时被按下)。其他情况下，编码会存储到 <code>keyCode中。</code></p> - -<p>捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数，在元素属性中处理相关事件。 举例：</p> - -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"></input> -</pre> - -<p>同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用<script包裹后写到HTML页面中：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onkeypress_callback () { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="onkeypress_callback();"></input> -</pre> - -<p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onkeypress_callback(evt) { - var eType = evt.type; // Will return "keypress" as the event type - var eCode = 'keyCode is ' + evt.keyCode; - var eChar = 'charCode is ' + evt.charCode; - - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="onkeypress_callback(event);"></input></pre> - -<p>要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：</p> - -<pre class="brush:js"><script type="text/javascript"> - document.onkeypress = key_event; - document.onkeydown = key_event; - document.onkeyup = key_event; - - function key_event(evt) { - var eType = evt.type; - var eCode = "ASCII code is " + evt.keyCode; - var eChar = 'charCode is ' + evt.charCode; - - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script></pre> - -<p>下面是一个完整的键盘事件处理过程：</p> - -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; - var keychar = String.fromCharCode(key); - if (key==exampleKey) { metaChar = true; } - if (key!=exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { alert("Key pressed " + key); } - } - } - function metaKeyUp (event) { - var key = event.keyCode || event.which; - if (key==exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> -</body> -</html></pre> - -<h3 id="浏览器_bugs_和_quirks">浏览器 bugs 和 quirks</h3> - -<p>键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;">charCode。通常情况下，</code><code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 指向的是用户按下的键盘上的那个键，而</span><code style="font-style: normal; line-height: 1.5;">charCode</code><span style="line-height: 1.5;"> 存储的是相应键的 ASCII 码值。这两个值不一定相同，如， 小写 'a' 和 大写 'A' 拥有相同的 </span><code style="font-style: normal; line-height: 1.5;">keyCode，因为用户按下的是相同的按键，但是他们的</code><code style="font-style: normal; line-height: 1.5;">charCode不同，因为两个字母的码值不同。</code><span style="line-height: 1.5;"> </span></p> - -<p>不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 <code>charCode，他们把字母信息写到了</code><code>keyCode</code>中，而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中， <code>keyCode</code> 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.</p> - -<p>可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.</p> - -<p>{{ draft() }}</p> - -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例：拖曳图片</h2> - -<p>下面的例子展示了firefox浏览器下如何实现拖动图片：</p> - -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style type='text/css'> -img { position: absolute; } -</style> - -<script type='text/javascript'> -window.onload = function() { - - movMeId=document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - movMeId.style.position = "absolute"; - - document.onmousedown = coordinates; - document.onmouseup=mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove=moveImage; - return false; - } else { - return false; - } - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> - -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例：改变大小</h2> - -<div>{{todo("Need Content. Or, remove headline")}}</div> - -<h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例：绘制直线</h3> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">附加文档信息</h2> - -<ul> - <li>作者: <a class="external" href="http://linuxmachines.com/">Jeff Carr</a></li> - <li>Here is a attempt at a new <a href="/en-US/docs/javascript_new_testpage" title="en-US/docs/javascript_new_testpage">JavaScript new testpage</a></li> - <li>最后修改: July 14 2005</li> - <li>版权信息: © 2005 by individual contributors; content available under the <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> - -<p> </p> diff --git a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index 81d56d0055..0000000000 --- a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Email links -slug: conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -tags: - - HTML5 - - SEO - - a - - email link - - mailto -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links -translation_of_original: Web/Guide/HTML/Email_links -original_slug: Web/Guide/HTML/Email_links ---- -<p>这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成<span class="seoSummary">{{HTMLElement("a")}} </span>元素和mailto URL方案。<span class="seoSummary">.</span></p> - -<h2 id="Mailto_基础">Mailto 基础</h2> - -<p>以它最基础和最常用的形式，一个<code>mailto</code>链接仅简单的指明目标收件人的邮箱地址。例如：</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> - -Complete examples detail: - -<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com -&amp;subject=The%20subject%20of%20the%20email -&amp;body=The%20body%20of%20the%20email"> -Send mail with cc, bcc, subject and body</a></pre> - - - -<p>这导致链接看起来像这样: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> - -<p>事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。</p> - -<h2 id="指定细节">指定细节</h2> - -<p>除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的<code>mailto</code> URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。</p> - -<div class="blockIndicator note"> -<dl> - <dt>译者注：</dt> -</dl> - -<ul> - <li>`subject`：主题</li> - <li>`cc`：抄送到次要收件人（与邮件有关但无需做出应答的个人或组织）</li> - <li> `bcc`：密送到其他收件人。主要、次要收件人不应该获得密送收件人的身份。</li> - <li>`body`：邮件内容</li> -</ul> -</div> - -<div class="note"> -<p><strong>Note:</strong> 每个字段的值都必须进行编码 (也就是, 带有非印刷字符和空格 <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>).</p> -</div> - -<h3 id="样品mailto_网址">样品mailto 网址</h3> - -<p>这有一些有关<code> mailto</code> 的示例链接:</p> - -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> -</ul> - -<p>请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。</p> - -<h3 id="例子">例子</h3> - -<p>如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 <code>mailto链接，像这样</code>:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F"> -Subscribe to our newsletter -</a></pre> - -<p>结果链接看起来像这样: <a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">Subscribe to our newsletter</a>.</p> - -<section id="Quick_Links"> -<ol> - <li>{{HTMLElement("a")}}</li> - <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> - <li>{{RFC(5322, "Internet Message Format")}}</li> - <li><a href="http://www.url-encode-decode.com/">URL encode/decode online</a></li> -</ol> -</section> diff --git a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index b2537fe024..0000000000 --- a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: 使用 HTML5 音频和视频 -slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Flash - - HTML - - HTML5 - - Media - - Ogg - - Web - - 媒体 - - 指南 - - 概述 - - 特性 - - 范例 - - 视频 - - 音频 -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video -original_slug: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -<p>HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。</p> - -<h2 id="嵌入媒体">嵌入媒体</h2> - -<p>在HTML中嵌入媒体：</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - 你的浏览器不支持 <code>video</code> 标签. -</video></pre> - -<p>这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。</p> - -<p>下面是一个将音频<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">嵌入</span>到HTML文档的例子。</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -你的浏览器不支持audio标签 -</audio></pre> -</div> - -<p>src属性可以设置为一个音频文件的URL或者本地文件的路径。</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -你的浏览器不支持audio标签 -</audio></pre> -</div> - -<p>这个例子的代码中使用了HTML的“audio”元素的一些属性：</p> - -<ul> - <li><code>controls</code> : 为网页中的音频显示标准的HTML5控制器。</li> - <li><code>autoplay</code> : 使音频自动播放。</li> - <li><code>loop</code> : 使音频自动重复播放。</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：</p> - -<ul> - <li><code>"none"</code> 不缓冲文件</li> - <li><code>"auto"</code> 缓冲音频文件</li> - <li><code>"metadata"</code> 仅仅缓冲文件的元数据</li> -</ul> - -<p>可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Your browser does not support the <code>video</code> element. -</video> -</pre> - -<p>当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">audio和video元素支持的媒体格式</a> 来查看不同浏览器对视频音频编码格式的支持情况。</p> - -<p>你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Your browser does not support the <code>video</code> element. -</video></pre> - -<p>在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。</p> - -<p>如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。</p> - -<p>点击 <a href="https://developer.mozilla.org/en-US/docs/DOM/Media_events">媒体事件</a> 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements.</a></p> - -<h2 id="媒体回放控制">媒体回放控制</h2> - -<p>当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> 方法， 这一方法在实现媒体元素的接口中定义。</p> - -<p>控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">播放声音</button> - <button onclick="document.getElementById('demo').pause()">暂停声音</button> - <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button> - <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button> -</div> -</pre> - -<h2 id="终止媒体下载">终止媒体下载</h2> - -<p>停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。</p> - -<p>以下是即刻停止媒体下载的方法：</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src=''; -//or -mediaElement.<code>removeAttribute("src");</code> -</pre> - -<p>通过移除媒体元素的 <code>src</code> 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。</p> - -<p> </p> - -<h2 id="在媒体中查找">在媒体中查找</h2> - -<p>媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性<code>currentTime的值来达成的；有关元素属性的详细信息请看</code>{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。</p> - -<p>你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。</p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // 返回开始时间 (in seconds) -mediaElement.seekable.end(); // 返回结束时间 (in seconds) -mediaElement.currentTime = 122; // 设定在 122 seconds -mediaElement.played.end(); // 返回浏览器播放的秒数 -</pre> - -<h2 id="标记播放范围">标记播放范围</h2> - -<p><font face="Consolas"><font color="#4d4e53">在给一个<audio>或者<video>元素标签</font>指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。</font></p> - -<p><font face="Consolas">一条指定时间范围的语句：</font></p> - -<pre>#t=[starttime][,endtime]</pre> - -<p>时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。</p> - -<p>一些例子：</p> - -<dl> - <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> - <dd>指定视频播放范围为从第10秒到第20秒.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> - <dd>指定视频从开始播放到第10.5秒.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> - <dd>指定视频从开始播放到两小时.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> - <dd>指定视频从第60秒播放到结束.</dd> -</dl> - -<div class="note"> -<p>媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。</p> -</div> - -<h2 id="备选项">备选项</h2> - -<p>在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。</p> - -<p>此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。</p> - -<h3 id="使用Flash">使用Flash</h3> - -<p>{{ HTMLElement("video") }} <font color="#4d4e53">标签</font>不被支持时可以使用Flash播放Flash格式的影像。</p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p>注意不要在object标签中加入class、id以兼容IE以外的浏览器。</p> - -<h3 id="使用Java_小程序播放Ogg视频">使用Java 小程序播放Ogg视频</h3> - -<p>这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:</p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p>如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.</p> - -<p>{{ h1_gecko_minversion("错误处理", "2.0") }}</p> - -<p>Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。</p> - -<p>这使你可以查到是哪个资源加载失败，哪个是可用的。</p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p>由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。</p> - -<h3 id="没有资源加载成功时的检测">没有资源加载成功时的检测</h3> - -<p>检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。</p> - -<p>如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。</p> - -<h3 id="没有资源可用时显示备用内容">没有资源可用时显示备用内容</h3> - -<p>另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。</p> - -<pre class="brush: html"><video controls> - <source src="dynamicsearch.mp4" type="video/mp4"></source> - <a href="dynamicsearch.mp4"> - <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> - </a> - <p>Click image to play a video demo of dynamic app search</p> -</video> - -</pre> - -<pre class="brush: js">var v = document.querySelector('video'), - sources = v.querySelectorAll('source'), - lastsource = sources[sources.length-1]; -lastsource.addEventListener('error', function(ev) { - var d = document.createElement('div'); - d.innerHTML = v.innerHTML; - v.parentNode.replaceChild(d, v); -}, false); -</pre> - -<h2 id="相关文章">相关文章</h2> - -<ul> - <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> - <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> - <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introducing the Audio API Extension</a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li> - <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li> - <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li> - <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li> - <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> - <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - for HTML5 video</li> -</ul> diff --git a/files/zh-cn/conflicting/learn/index.html b/files/zh-cn/conflicting/learn/index.html deleted file mode 100644 index 33efe52747..0000000000 --- a/files/zh-cn/conflicting/learn/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: 如何建设一个网站 -slug: conflicting/Learn -translation_of: Learn -translation_of_original: Learn/tutorial/How_to_build_a_web_site -original_slug: Learn/tutorial/How_to_build_a_web_site ---- -<p> 当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。</p> - -<p>我们建议你先从这儿的文章开始 ，认真学习它们，如果你在学习中有关术语的问题，请用我们的<a href="/en-US/docs/Glossary">词汇表</a>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="text-align: center;"> </th> - <th scope="col" style="text-align: center;">理论<br> - 知识</th> - <th scope="col" style="text-align: center;">技术<br> - 知识</th> - <th scope="col" style="text-align: center;">实践<br> - 知识</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="text-align: center;">1</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Thinking_before_coding">开始你的web项目</a></strong><br> - <em>在这篇文章中我们首先讨论了在任何一个项目中你所必要的一步：确定你要完成什么和为什么.</em></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">2</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_the_Internet_works">英特网是如何工作的</a></strong><br> - <em>这篇文章将为你解释什么是英特网以及它是如何工作的。</em></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">3</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> 了解网页、网站、服务器、以及搜索引擎之间的不同</a></strong></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_is_a_web_server">网络服务器是什么?</a></strong><br> - <em>在这篇文章中，我们将要论述什么是网络服务器，它们是如何运作的以及它们为什么如此重要.</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_software_do_I_need">我们需要什么软件（它们用来干什么）?</a></strong><br> - <em>在文中我们将要介绍你在编辑网页，上传文件，以及管理网站中你需要什么软件。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">4</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_links_on_the_web">了解网络上的链接</a></strong><br> - <em>在文章中, 我们将详细的论述网络链接, 这个在万维网中相当重要的一个角色.</em></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">5</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_URLs">了解URLs以及它们的构成</a></strong><br> - <em>在这篇文章中，我们将介绍URLs是什么（同一资源定位器）以及它们是如何构成的。</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_domain_names">认识域名</a></strong><br> - <em>在这篇文章中，我们将对域名留下深刻印象：域名是什么，它们如何构成，以及怎样获取一个域名。</em></td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">6</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">剖析一个网页</a></strong><br> - <em>当你在做你自己的网站时，你最好知道一些普通的设计</em>.</td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_much_does_it_cost">在网上做些什么花费多少钱？</a></strong><br> - <em>涉及到互联网的东西并不像它看起来那么便宜。在文中我们将论述你可能花费多少钱以及为什么。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">7</th> - <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">设计之外，基础的网页设计</a></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">选择下载安装一个编辑器</a></strong><br> - <em>在这篇文章中，我们强调一些事情关于下载安装编译器用于网站开发。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">8</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">创建一个基本的工作环境</a></strong><br> - <em>这篇文章让你用工作站建立你的网站</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">9</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">用HTML写一个简单的网页</a></strong><br> - <em>学习如何创造一个简单的网页。</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Open_a_file_in_a_browser">打开文件在你的浏览器中r</a></strong><br> - <em>这篇文章讲解了在浏览器中通过各种方式接入文件，以及这种正确的方式为什么如此重要。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">10</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/HTML_tags">什么是HTML标签&如何使用它们</a></strong><br> - <em>这篇文章包含了 <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: The HyperText Markup Language (HTML) is a descriptive language specifically designed to structure web pages.">HTML</a> 基础:什么是标签以及如何使用它们。</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">上传文件到服务器</a></strong><br> - <em>本文介绍了如何使用FTP工具发布你的网站</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">11</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> - <p><strong><a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">检查你的网站是否工作正常</a></strong><br> - <em>本指南概述了一些找到并修复常见错误的策略</em></p> - </td> - </tr> - </tbody> -</table> - -<p>这些是都是你需要的第一个网站学习的基本知识，但如果你想做出更高端更专业的网站，请继续往下读：</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="text-align: center;"> </th> - <th scope="col" style="text-align: center;">理论<br> - 知识</th> - <th scope="col" style="text-align: center;">技术<br> - 知识</th> - <th scope="col" style="text-align: center;">实践<br> - 知识</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="text-align: center;">12</th> - <td><a href="/en-US/docs/Learn/What_do_people_need_for_viewing_my_website">人们需要什么才能查看你的网站</a></td> - <td> </td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">13</th> - <td> </td> - <td><strong><a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">在你的网页中使用CSS</a></strong><br> - <em>本文将介绍如何使用CSS样式表来改变你的网页样式</em></td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">14</th> - <td><strong><a href="/en-US/docs/Learn/What_is_accessibility">什么是无障碍性网页</a></strong><br> - <em>本文介绍了无障碍性网页背后的基本概念。</em></td> - <td><strong><a href="/en-US/docs/Learn/CSS/CSS_properties">什么是CSS属性以及该如何使用它们</a></strong><br> - <em>CSS特性应该如何使用。本文介绍了图和使用CSS属性选择器应用HTML元素</em></td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">15</th> - <td><strong><a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">为各类用户设计101</a></strong><br> - <em>本文提供了基本的无障碍性网站技巧</em></td> - <td> - <p><strong><a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">CSS基本的文字排版</a></strong><br> - <em>最常见的CSS属性概述</em></p> - </td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">16</th> - <td> </td> - <td><a href="/en-US/docs/Learn/Using_images">使用图片</a></td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">17</th> - <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">避开在网页设计中的常见陷阱</a></td> - <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">用户体验（UX）基础</a></td> - <td><a href="/en-US/docs/Learn/Design_of_navigation_menus">设计导航菜单</a></td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html deleted file mode 100644 index 91b8d79a01..0000000000 --- a/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: JavaScript 与 CSS -slug: conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript -original_slug: Web/Guide/CSS/Getting_started/JavaScript ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>本文是 <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">CSS tutorial</a> 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 </p> - -<p>第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。</p> - -<p>换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。</p> - -<p>上一章 (Part I)： <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br> - 下一章： <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p> - -<h3 id="Information:_JavaScript" name="Information:_JavaScript">相关知识： JavaScript</h3> - -<p>JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。</p> - -<p>JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 </p> - -<p>有三种方法可以实现这样的效果：</p> - -<ul> - <li>控制样式表—可以添加、删除、修改样式表。</li> - <li>控制样式规则—可以添加、删除、修改样式规则。</li> - <li>控制DOM中的单个元素—可以不依赖样式表来修改元素样式。</li> -</ul> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> - <caption>更多细节</caption> - <tbody> - <tr> - <td>要了解 JavaScript的更多细节，可以到这个wiki <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 。</td> - </tr> - </tbody> -</table> - -<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">范例： 一个JavaScript的实例</h3> - -<p>新建一个<code>doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：</code></p> - -<div style="width: 48em;"> -<pre class="brush:html;"><!DOCTYPE html> -<html> - -<head> -<title>Mozilla CSS Getting Started - JavaScript demonstration</title> -<link rel="stylesheet" type="text/css" href="style5.css" /> -<script type="text/javascript" src="script5.js"></script> -</head> - -<body> -<h1>JavaScript sample</h1> -<div id="square"></div> -<button>Click Me</button> - -</body> -</html> -</pre> -</div> - -<p>新建一个CSS文件<code>style5.css</code>，复制粘贴下面的样式代码到文件中：</p> - -<div style="width: 48em;"> -<pre class="brush:css;"> #square { - - width: 20em; - - height: 20em; - - border: 2px inset gray; - - margin-bottom: 1em; - - } - - button { - - padding: .5em 2em; - - }</pre> -</div> - -<p>新建一个JavaScript文件<code>script5.js</code>，复制粘贴下面的代码到文件中：</p> - -<div style="width: 48em;"> -<pre class="brush: js">// JavaScript demonstration -var changeBg = function (event) { - console.log("method called"); - var me = event.target - , square = document.getElementById("square"); - square.style.backgroundColor = "#ffaa44"; - me.setAttribute("disabled", "disabled"); - setTimeout(function () { clearDemo(me) }, 2000); -} - -function clearDemo(button) { - var square = document.getElementById("square"); - square.style.backgroundColor = "transparent"; - button.removeAttribute("disabled"); -} - -window.onload = function() { - var button = document.querySelector("button"); - button.addEventListener("click", changeBg); - console.log(button); -}</pre> -</div> - -<p>用浏览器打开HTML文件并点击按钮。</p> - -<p>这里有在线的示例：<a href="http://jsfiddle.net/diwanshi/Y4VPK/4/embedded/result/">Here is the Live Example</a></p> - -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript demonstration</strong></p> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript demonstration</strong></p> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<div class="note"><strong>重要提示</strong> ： - -<ul> - <li>HTML文档中外链了CSS文件和JavaScript文件。</li> - <li>脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。</li> - <li>在JavaScript中<code>document.getElementById("square")</code> 在功能上同 CSS 选择器 <code>#square的功能是类似的。</code></li> - <li>在 JavaScript代码中, <code>backgroundColor</code> 对应于CSS 属性<code>background-color</code>。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。</li> - <li>浏览器针对button有内置的CSS规则 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> ，这会导致按钮在不可点击状态下的显示样式跟预期有出入。</li> -</ul> -</div> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;"> - <caption>挑战</caption> - <tbody> - <tr> - <td>修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。</td> - </tr> - </tbody> -</table> - -<p>这里有一个解决方案示例：<a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">See a solution to this challenge.</a></p> - -<h3 id="下一步做什么呢？">下一步做什么呢？</h3> - -<p>如果你对本页内容有疑问，或者有其他想法，欢迎到 <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Discussion</a> 页面进行讨论。</p> - -<p>在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： <strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/zh-cn/conflicting/learn/javascript/objects/index.html b/files/zh-cn/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index 9ae0bde819..0000000000 --- a/files/zh-cn/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: JavaScript面向对象简介 -slug: conflicting/Learn/JavaScript/Objects -tags: - - JavaScript - - OOP - - 命名空间 - - 对象 - - 封装 - - 成员 - - 构造函数 - - 继承 - - 面向对象 -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<div>{{jsSidebar("Introductory")}}</div> - -<div> </div> - -<p>JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索 JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。</p> - -<h2 id="JavaScript_Review" name="JavaScript_Review">JavaScript回顾</h2> - -<p>如果您对 JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在<a href="/zh-CN/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A_re-introduction_to_JavaScript">重新介绍 JavaScript</a> 这篇文章里学习这些概念。您也可以查阅这篇 <a href="/zh-CN/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript 1.5 核心指南</a>。</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">面向对象编程</h2> - -<p>面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby和Objective-C）都支持面向对象编程（OOP）。</p> - -<p>相对于「一个程序只是一些函数的集合，或简单的计算机指令列表。」的传统软件设计观念而言，面向对象编程可以看作是使用一系列对象相互协作的软件设计。 在 OOP 中，每个对象能够接收消息，处理数据和发送消息给其他对象。每个对象都可以被看作是一个拥有清晰角色或责任的独立小机器。</p> - -<p>面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性，在大型软件工程中广为流行。凭借其对模块化的重视，面向对象的代码开发更简单，更容易理解，相比非模块化编程方法 <a href="#cite-1"><sup>1</sup></a>, 它能更直接地分析, 编码和理解复杂的情况和过程。</p> - -<h2 id="Terminology" name="Terminology">术语</h2> - -<dl> - <dt>Namespace 命名空间</dt> - <dd>允许开发人员在一个独特，应用相关的名字的名称下捆绑所有功能的容器。</dd> - <dt>Class 类</dt> - <dd>定义对象的特征。它是对象的属性和方法的模板定义。</dd> - <dt>Object 对象</dt> - <dd>类的一个实例。</dd> - <dt>Property 属性</dt> - <dd>对象的特征，比如颜色。</dd> - <dt>Method 方法</dt> - <dd>对象的能力，比如行走。</dd> - <dt>Constructor 构造函数</dt> - <dd>对象初始化的瞬间，被调用的方法。通常它的名字与包含它的类一致。</dd> - <dt>Inheritance 继承</dt> - <dd>一个类可以继承另一个类的特征。</dd> - <dt>Encapsulation 封装</dt> - <dd>一种把数据和相关的方法绑定在一起使用的方法。</dd> - <dt>Abstraction 抽象</dt> - <dd>结合复杂的继承，方法，属性的对象能够模拟现实的模型。</dd> - <dt>Polymorphism 多态</dt> - <dd>多意为「许多」，态意为「形态」。不同类可以定义相同的方法或属性。</dd> -</dl> - -<p>更多关于面向对象编程的描述，请参照维基百科的 <a class="external" href="http://zh.wikipedia.org/wiki/面向对象程序设计">面向对象编程</a> 。</p> - -<h2 id="原型编程">原型编程</h2> - -<p>基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。</p> - -<p>原始的（也是最典型的）基于原型语言的例子是由大卫·安格尔和兰德尔·史密斯开发的。然而，弱类化的编程风格近来变得越来越流行，并已被诸如JavaScript，Cecil，NewtonScript，IO，MOO，REBOL，Kevo，Squeak（使用框架操纵Morphic组件），和其他几种编程语言采用。<a href="#cite-1"><sup>1</sup></a></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">JavaScript面向对象编程</h2> - -<h3 id="命名空间">命名空间</h3> - -<p>命名空间是一个容器，它允许开发人员在一个独特的，特定于应用程序的名称下捆绑所有的功能。 <strong>在JavaScript中，命名空间只是另一个包含方法，属性，对象的对象。</strong></p> - -<div class="note"> -<p><span style="font-size: 14px; line-height: 1.5;"><strong>注意：</strong>需要认识到重要的一点是：与其他面向对象编程语言不同的是，Javascript中的普通对象和命名空间在语言层面上没有区别。这点可能会让JavaScript初学者感到迷惑。</span></p> -</div> - -<p>创造的JavaScript命名空间背后的想法很简单：一个全局对象被创建，所有的变量，方法和功能成为该对象的属性。使用命名空间也最大程度地减少应用程序的名称冲突的可能性。</p> - -<p>我们来创建一个全局变量叫做 MYAPP</p> - -<pre class="brush: js">// 全局命名空间 -var MYAPP = MYAPP || {};</pre> - -<p>在上面的代码示例中，我们首先检查MYAPP是否已经被定义（是否在同一文件中或在另一文件）。如果是的话，那么使用现有的MYAPP全局对象，否则，创建一个名为MYAPP的空对象用来封装方法，函数，变量和对象。</p> - -<p>我们也可以创建子命名空间：</p> - -<pre class="brush: js">// 子命名空间 -MYAPP.event = {};</pre> - -<p>下面是用于创建命名空间和添加变量，函数和方法的代码写法：</p> - -<pre class="brush: js">// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器 -MYAPP.commonMethod = { - regExForName: "", // 定义名字的正则验证 - regExForPhone: "", // 定义电话的正则验证 - validateName: function(name){ - // 对名字name做些操作，你可以通过使用“this.regExForname” - // 访问regExForName变量 - }, - - validatePhoneNo: function(phoneNo){ - // 对电话号码做操作 - } -} - -// 对象和方法一起申明 -MYAPP.event = { - addListener: function(el, type, fn) { - // 代码 - }, - removeListener: function(el, type, fn) { - // 代码 - }, - getEvent: function(e) { - // 代码 - } - - // 还可以添加其他的属性和方法 -} - -//使用addListener方法的写法: -MYAPP.event.addListener("yourel", "type", callback);</pre> - -<h3 id="Core_Objects" name="Core_Objects">标准内置对象</h3> - -<p>JavaScript有包括在其核心的几个对象，例如，Math，Object，Array和String对象。下面的例子演示了如何使用Math对象的random()方法来获得一个随机数。</p> - -<pre class="brush: js">console.log(Math.random()); -</pre> - -<div class="note"><strong>注意：</strong>这里和接下来的例子都假设名为 <code>console.log</code> 的方法全局有定义。<code>console.log</code> 实际上不是 JavaScript 自带的。</div> - -<p>查看 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 参考：全局对象</a> 了解 JavaScript 内置对象的列表。</p> - -<p>JavaScript 中的每个对象都是 <code>Object</code> 对象的实例且继承它所有的属性和方法。</p> - -<h3 id="Custom_Objects" name="Custom_Objects">自定义对象</h3> - -<h4 id="The_Class" name="The_Class">类</h4> - -<p>JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。</p> - -<pre class="brush: js">function Person() { } -// 或 -var Person = function(){ } -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">对象（类的实例）</h4> - -<p>我们使用 <code>new <em>obj </em></code><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">创建对象 </span><em><code>obj</code></em><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"> 的新实例</span><span style="font-size: 14px; line-height: 1.5;">, 将结果（</span><em><code>obj 类型</code></em><span style="font-size: 14px; line-height: 1.5;">）</span><span style="font-size: 14px; line-height: 1.5;">赋值给一个变量方便稍后调用。</span></p> - -<p>在下面的示例中，我们定义了一个名为<code>Person</code>的类，然后我们创建了两个<code>Person</code>的实例(<code>person1</code> and <code>person2</code>).</p> - -<pre class="brush: js">function Person() { } -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<div class="note"><strong>注意：</strong>有一种新增的创建未初始化实例的实例化方法，请参考 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 。</div> - -<h4 id="The_Constructor" name="The_Constructor">构造器</h4> - -<p>在实例化时构造器被调用 (也就是对象实例被创建时)。构造器是对象中的一个方法。 在JavaScript中函数就可以作为构造器使用，因此不需要特别地定义一个构造器方法，每个声明的函数都可以在实例化后被调用执行。</p> - -<p>构造器常用于给对象的属性赋值或者为调用函数做准备。 在本文的后面描述了类中方法既可以在定义时添加，也可以在使用前添加。</p> - -<p>在下面的示例中, <code>Person类实例化时构造器调用一个</code> alert函数。</p> - -<pre class="brush: js">function Person() { - alert('Person instantiated'); -} - -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">属性 (对象属性)</h4> - -<p>属性就是 类中包含的变量;每一个对象实例有若干个属性. 为了正确的继承，属性应该被定义在类的原型属性 (函数)中。</p> - -<p>可以使用 关键字 <code>this</code>调用类中的属性, this是对当前对象的引用。 从外部存取(读/写)其属性的语法是: <code>InstanceName.Property</code>; 这与C++，Java或者许多其他语言中的语法是一样的 (在类中语法 <code>this.Property</code> 常用于set和get属性值)</p> - -<p>在下面的示例中，我们为定义<code>Person类定义了一个属性</code> <code>firstName</code> 并在实例化时赋初值。</p> - -<pre class="brush: js">function Person(firstName) { - this.firstName = firstName; - alert('Person instantiated'); -} - -var person1 = new Person('Alice'); -var person2 = new Person('Bob'); - -// Show the firstName properties of the objects -alert('person1 is ' + person1.firstName); // alerts "person1 is Alice" -alert('person2 is ' + person2.firstName); // alerts "person2 is Bob" -</pre> - -<h4 id="The_methods" name="The_methods">方法（对象属性）</h4> - -<p>方法与属性很相似， 不同的是：一个是函数，另一个可以被定义为函数。 调用方法很像存取一个属性, 不同的是add <code>()</code> 在方法名后面很可能带着参数. 为定义一个方法, 需要将一个函数赋值给类的 <code>prototype</code> 属性; 这个赋值给函数的名称就是用来给对象在外部调用它使用的。</p> - -<p>在下面的示例中，我们给<code>Person类</code>定义了方法 <code>sayHello()</code>，并调用了它.</p> - -<pre class="brush: js">function Person(firstName) { - this.firstName = firstName; -} - -Person.prototype.sayHello = function() { - alert("Hello, I'm " + this.firstName); -}; - -var person1 = new Person("Alice"); -var person2 = new Person("Bob"); - -// call the Person sayHello method. -person1.sayHello(); // alerts "Hello, I'm Alice" -person2.sayHello(); // alerts "Hello, I'm Bob" -</pre> - -<p>在JavaScript中方法通常是一个绑定到对象中的普通函数, 这意味着方法可以在其所在context之外被调用。 思考下面示例中的代码:</p> - -<pre class="brush: js">function Person(firstName) { - this.firstName = firstName; -} - -Person.prototype.sayHello = function() { - alert("Hello, I'm " + this.firstName); -}; - -var person1 = new Person("Alice"); -var person2 = new Person("Bob"); -var helloFunction = person1.sayHello; - -person1.sayHello(); // alerts "Hello, I'm Alice" -person2.sayHello(); // alerts "Hello, I'm Bob" -helloFunction(); // alerts "Hello, I'm undefined" (or fails - // with a TypeError in strict mode) -console.log(helloFunction === person1.sayHello); // logs true -console.log(helloFunction === Person.prototype.sayHello); // logs true -helloFunction.call(person1); // logs "Hello, I'm Alice" -</pre> - -<p>如上例所示, 所有指向<code>sayHello函数的引用</code> ，包括 <code>person1</code>, <code>Person.prototype</code>, 和 <code>helloFunction</code> 等， 均引用了<em>相同的函数</em>.</p> - -<p>在调用函数的过程中，<span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">this的值</span><span style="line-height: 1.5;">取决于我们怎么样调用函数. </span><span style="line-height: 1.5;"> 在通常情况下，我们通过一个表达式</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">person1.sayHello()</span><span style="line-height: 1.5;">来调用函数：即从一个对象的属性中得到所调用的函数</span><span style="line-height: 1.5;">。此时this被设置为我们取得函数的对象（即</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">person1</span><span style="line-height: 1.5;">）。这就是为什么</span><code style="font-style: normal; line-height: 1.5;">person1.sayHello()</code><span style="line-height: 1.5;"> 使用了姓名“Alice”而</span><code style="font-style: normal; line-height: 1.5;">person2.sayHello()使用了姓名“bob”的原因。</code><span style="line-height: 1.5;"> </span></p> - -<p><span style="line-height: 1.5;">然而我们使用不同的调用方法时, </span><code style="font-style: normal; line-height: 1.5;">this的值也就不同了</code><span style="line-height: 1.5;">。当从变量 </span><code style="font-style: normal; line-height: 1.5;">helloFunction()中调用的时候，</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">this</code><span style="line-height: 1.5;">就被设置成了全局对象 (在浏览器中即</span><code style="font-style: normal; line-height: 1.5;">window</code><span style="line-height: 1.5;">)。由于该对象 (非常可能地) 没有</span><code style="font-style: normal; line-height: 1.5;">firstName</code><span style="line-height: 1.5;"> 属性, 我们得到的结果便是"Hello, I'm undefined". (这是松散模式下的结果， 在 </span><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">严格模式</a>中，结果将不同（此时会产生一个error）。<span style="line-height: 1.5;"> 但是为了避免混淆，我们在这里不涉及细节) 。另外，我们可以像上例末尾那样，使用</span><code style="font-style: normal; line-height: 1.5;">Function#call</code><span style="line-height: 1.5;"> (或者</span><code style="font-style: normal; line-height: 1.5;">Function#apply</code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;">显式的设置</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">this的值。</span></p> - -<div class="note">更多有关信息请参考 <a href="/zh-CN/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> and <a href="/zh-CN/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div> - -<h4 id="Inheritance" name="Inheritance">继承</h4> - -<p>创建一个或多个类的专门版本类方式称为继承（Javascript只支持单继承）。 创建的专门版本的类通常叫做子类，另外的类通常叫做父类。 在<span style="line-height: 1.5;">Javascript中，继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中你可以使用 </span><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" style="line-height: 1.5;" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a><span style="line-height: 1.5;"> 实现继承.</span></p> - -<div class="note"> -<p>JavaScript 并不检测子类的 <code>prototype.constructor</code> (见 <a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), 所以我们必须手动申明它.</p> -</div> - -<p>在下面的例子中, 我们定义了 <code>Student类作为</code> <code>Person类的子类</code>. 之后我们重定义了<code>sayHello()</code> 方法并添加了 <code>sayGoodBye() 方法</code>.</p> - -<pre class="brush: js">// 定义Person构造器 -function Person(firstName) { - this.firstName = firstName; -} - -// 在Person.prototype中加入方法 -Person.prototype.walk = function(){ - alert("I am walking!"); -}; -Person.prototype.sayHello = function(){ - alert("Hello, I'm " + this.firstName); -}; - -// 定义Student构造器 -function Student(firstName, subject) { - // 调用父类构造器, 确保(使用Function#call)"this" 在调用过程中设置正确 - Person.call(this, firstName); - - // 初始化Student类特有属性 - this.subject = subject; -}; - -// 建立一个由Person.prototype继承而来的Student.prototype对象. -// 注意: 常见的错误是使用 "new Person()"来建立Student.prototype. -// 这样做的错误之处有很多, 最重要的一点是我们在实例化时 -// 不能赋予Person类任何的FirstName参数 -// 调用Person的正确位置如下，我们从Student中来调用它 -Student.prototype = Object.create(Person.prototype); // See note below - -// 设置"constructor" 属性指向Student -Student.prototype.constructor = Student; - -// 更换"sayHello" 方法 -Student.prototype.sayHello = function(){ - console.log("Hello, I'm " + this.firstName + ". I'm studying " + this.subject + "."); -}; - -// 加入"sayGoodBye" 方法 -Student.prototype.sayGoodBye = function(){ - console.log("Goodbye!"); -}; - -// 测试实例: -var student1 = new Student("Janet", "Applied Physics"); -student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." -student1.walk(); // "I am walking!" -student1.sayGoodBye(); // "Goodbye!" - -// Check that instanceof works correctly -console.log(student1 instanceof Person); // true -console.log(student1 instanceof Student); // true -</pre> - -<p>对于“<span style="font-family: consolas,monaco,andale mono,monospace;">Student.prototype = Object.create(Person.prototype);</span>”这一行，在不支持 <code><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>方法的老JavaScript引擎中，可以使用一个</code>"polyfill"（又名"shim"，查看文章链接），或者使用一个function来获得相同的返回值，就像下面：</p> - -<pre class="brush: js">function createObject(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// Usage: -Student.prototype = createObject(Person.prototype); -</pre> - -<div class="note">更多相关信息请参考<em> </em><a href="/en/JavaScript/Reference/Global_Objects/Object/create" style="font-style: italic;" title="Object.create">Object.create</a>，连接中还有一个老JavaScript引擎的兼容方案（shim）。</div> - -<h4 id="Encapsulation" name="Encapsulation">封装</h4> - -<p>在上一个例子中，Student类虽然不需要知道Person类的walk()方法是如何实现的，但是仍然可以使用这个方法；Student类不需要明确地定义这个方法，除非我们想改变它。 这就叫做<strong>封装</strong>，对于所有继承自父类的方法，只需要在子类中定义那些你想改变的即可。</p> - -<h4 id="Abstraction" name="Abstraction">抽象</h4> - -<p>抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。<br> - JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。</p> - -<p>JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。</p> - -<pre class="brush: js">var foo = function(){}; -console.log( 'foo is a Function: ' + (foo instanceof Function) ); <span style="font-size: 1rem;">// logs "</span><span style="font-size: 1rem;">foo is a Function: true</span><span style="font-size: 1rem;">"</span> -console.log( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); // logs "<span style="font-size: 1rem;">foo.prototype is an Object: true</span><span style="font-size: 1rem;">"</span></pre> - -<h4 id="Polymorphism" name="Polymorphism">多态</h4> - -<p>就像所有定义在原型属性内部的方法和属性一样，不同的类可以定义具有相同名称的方法;方法是作用于所在的类中。并且这仅在两个类不是父子关系时成立（继承链中，一个类不是继承自其他类）。</p> - -<h2 id="Notes" name="Notes">注意</h2> - -<p>本文中所展示的面向对象编程技术不是唯一的实现方式，在JavaScript中面向对象的实现是非常灵活的。</p> - -<p>同样的，文中展示的技术没有使用任何语言hacks，它们也没有模仿其他语言的对象理论实现。</p> - -<p>JavaScript中还有其他一些更加先进的面向对象技术，但这些都超出了本文的介绍范围。</p> - -<h2 id="References" name="References">参考</h2> - -<ol> - <li><span style="line-height: 1.5;"><a name="cite-1"></a>维基百科。「</span>面向对象程序设计」，<a href="http://zh.wikipedia.org/wiki/面向对象程序设计">http://zh.wikipedia.org/wiki/面向对象程序设计</a></li> - <li>维基百科。“<a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">Encapsulation (object-oriented programming)</a>”</li> -</ol> diff --git a/files/zh-cn/conflicting/learn/server-side/django/index.html b/files/zh-cn/conflicting/learn/server-side/django/index.html deleted file mode 100644 index 86ecd5bb6c..0000000000 --- a/files/zh-cn/conflicting/learn/server-side/django/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Python -slug: conflicting/Learn/Server-side/Django -tags: - - Python - - Services -translation_of: Learn/Server-side/Django -translation_of_original: Python -original_slug: Python ---- -<p><a class="external" href="http://www.python.org">Python</a> 是一款直译式脚本语言，支持包括 Linux、Mac OS X 和 Microsoft Windows 在内的多种平台。</p> - -<h2 id="Learning_Python" name="Learning_Python">学习 Python</h2> - -<h3 id="免费的电子书">免费的电子书</h3> - -<p> 如果你是个初学者，可以考虑看看 <a class="external" href="http://www.diveintopython.net/toc/index.html">Dive Into Python</a> 。虽然它<span id="result_box" lang="zh-CN"><span title="如果是初學Python，可以考慮看Dive Into Python，雖然他最後是更新的時間是2004年，但依然是一部免費而且很棒的教程。">最后更新的时间是2004年，但依然是一部免费而且很棒的教程。</span></span> <span id="result_box" lang="zh-CN"><span title="它含括了幾乎所有Python 的基本元素，還有一些平常使用Python 可以執行什麼任務，像是網頁的請求，檔案的處理。">它含括了几乎所有Python 的基本元素，还有一些平常使用 Python 可以执行什么任务，像是对 Web 请求和文件的处理。</span><span title="如果對於Python 基礎已經基礎的概念，就可以參考">如果对于 Python 已经有了基本的概念，就可以考虑看看</span></span> <a class="external" href="http://gnosis.cx/TPiP/">Text Processing In Python</a>，这本书对于 Python 有着更进阶的介绍。</p> - -<p>还有其他免费的电子书和在线资源可供参考：</p> - -<ul style="margin-left: 40px;"> - <li><a class="external" href="http://docs.python.org/tutorial/index.html" title="http://docs.python.org/tutorial/index.html">Python 教程</a>（托管于 <a href="http://docs.python.org" title="http://docs.python.org">docs.python.org</a>） >> 教程已被网友翻译成中文版：<a href="http://www.pythondoc.com/">http://www.pythondoc.com/</a> <strong><span style="color: #ff0000;">推荐</span></strong></li> - <li><a href="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6" title="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6">为非程序员编写的 Python 2.6 教程</a>（托管于 <a href="http://en.wikibooks.org/wiki/Main_Page" title="http://en.wikibooks.org/wiki/Main_Page">Wikibooks</a>）</li> - <li><a href="http://www.greenteapress.com/thinkpython/" title="http://www.greenteapress.com/thinkpython/">Think Python</a>: How to Think Like a Computer Scientist by Allen B. Downey (free <a href="http://www.greenteapress.com/thinkpython/thinkpython.pdf" title="http://www.greenteapress.com/thinkpython/thinkpython.pdf">PDF</a> & <a href="http://www.greenteapress.com/thinkpython/html/index.html" title="http://www.greenteapress.com/thinkpython/html/index.html">HTML</a> versions). - <ul> - <li><a href="http://greenteapress.com/complexity/index.html" title="http://greenteapress.com/complexity/index.html">Think Complexity</a> by Allen B. Downey "picks up where Think Python leaves off" (free <a href="http://greenteapress.com/complexity/thinkcomplexity.pdf" title="http://greenteapress.com/complexity/thinkcomplexity.pdf">PDF</a> & <a href="http://greenteapress.com/complexity/html/index.html" title="http://greenteapress.com/complexity/html/index.html">HTML</a> versions)</li> - </ul> - </li> - <li><a href="http://learnpythonthehardway.org" title="http://learnpythonthehardway.org">Learn Python The Hard Way</a> by Zed Shaw （<a href="http://learnpythonthehardway.org/book/" title="http://learnpythonthehardway.org/book/">免费的 HTML 版）</a></li> - <li><a href="http://www.itmaybeahack.com/book/python-2.6/html/index.html" title="http://www.itmaybeahack.com/book/python-2.6/html/index.html">Building Skills in Python</a> by Steven F. Lott （<a href="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf" title="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf">也有 PDF 版</a>）</li> -</ul> - -<p><em>译者注：如果有发现其他中文教程，欢迎编写本页来分享</em>。</p> - -<p>当你对这款语言有了基础的认识后， <a href="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html" title="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html">Code Like a Pythonista: Idiomatic Python</a> 将帮你了解 Python 的一些特别之处，以及和其他语言的区别。</p> - -<h3 id="免费在线课程">免费在线课程</h3> - -<ul style="margin-left: 40px;"> - <li><a href="https://developers.google.com/edu/python/" title="http://code.google.com/edu/languages/google-python-class/">Google's Python Class</a></li> - <li>Learnstreet's Free <a href="http://www.learnstreet.com/lessons/languages/python" title="http://www.learnstreet.com/lessons/languages/python">Python Courses and Videos</a></li> - <li><a href="http://www.codecademy.com/tracks/python" title="http://www.codecademy.com/tracks/python">Python</a> at Codecademy</li> - <li><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/" title="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/">A Gentle Introduction to Programming Using Python</a> at MIT</li> - <li><a href="http://www.fireboxtraining.com" title="http://www.fireboxtraining.com">Firebox Training's</a> <a href="http://www.fireboxtraining.com/blog/python-tutorials/" title="http://www.fireboxtraining.com/blog/python-tutorials/">Free Python course video tutorial blog</a></li> -</ul> - -<h2 id="Python_in_Mozilla" name="Python_in_Mozilla">Python 也用在了基于 Mozilla 的应用程序中</h2> - -<p><a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> 在 Mozilla 中用于支持跨语言通信（inter-language communication）。它仅原生支持 C++ <-> JavaScript 的交流。 <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">Python 的 XPCOM 组件</a>（也叫做 PyXPCOM）是将 Python 和 Mozilla 粘合在一块的低级别胶水（the low-level glue），使得用 JavaScript 或 C++ 编写的 XPCOM 组件既可以通过 Python 使用，反之亦然。PyXPCOM <strong>并不</strong>默认包含在 Firefox 构建版本中，因此你须要使用第三方构建版本或自己构建一个版本来使用它。PyXPCOM中最知名的消费者是<a href="https://www.activestate.com/komodo-ide">Komodo</a>系列的产品。 </p> - -<p>从Mozilla 1.9版本开始就已经支持 (<a href="/en-US/docs/PyDOM" title="PyDOM">PyDOM</a>) 。 这也让<a href="/en-US/docs/Chrome" title="Chrome">chrome</a> 的XUL 和 HTML 作者在他们的 <script> 标签中使用python（再一次声明，官方版本的Firefox和Thunderbird版本还不支持）。</p> - -<h2 id="Mozilla中基于Python的开发者工具">Mozilla中基于Python的开发者工具</h2> - -<p>Python已经被众多Mozilla开发者应用于大量的app和框架中。更多信息请参考<a href="/en-US/docs/Python_Environment_and_Tools_for_Mozilla" title="Python_Environment_and_Tools_for_Mozilla">Python Environment and Tools for Mozilla</a>.</p> - -<p>工具列表在这里: <a class="external" href="http://k0s.org/toolbox/?language=python">http://k0s.org/toolbox/?language=python</a></p> - -<h2 id="Mozilla中Python的使用">Mozilla中Python的使用</h2> - -<p>Mozilla有大量的基于python的框架，包括:</p> - -<ul> - <li>django for <a class="external" href="http://blog.mozilla.com/webdev/" title="http://blog.mozilla.com/webdev/">webdev</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/Buildbot" title="https://wiki.mozilla.org/Buildbot">buildbot</a> 连续集成工具</li> - <li>测试工具 <a href="/en-US/docs/Mozilla_automated_testing" title="Mozilla automated testing">test harnesses</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/MozBase">mozbase</a> : 测试工具，其他框架和工具的构建模块</li> -</ul> - -<h2 id="Mozilla-Central的Python身影">Mozilla-Central的Python身影</h2> - -<p>[参考网址://bugzilla.mozilla.org/show_bug.cgi?id=835553]</p> - -<p>在Mozilla-Central很多的正式版本，测试版本以及其他的框架和工具都是使用的python</p> - -<ul> - <li><a href="http://mxr.mozilla.org/mozilla-central/source/python/" title="http://mxr.mozilla.org/mozilla-central/source/python/"><code>python/</code></a> 包含了通用的python代码，包括第三方镜像打包文件比如：pypi.python.org</li> - <li><a href="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/" title="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/"><code>testing/mozbase/</code></a> 包含了<a href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase"><code>Mozbase</code></a> 中用于mozilla-central的镜像打包文件</li> -</ul> - -<p>一个虚拟化环境(<a href="/en-US/docs/Python/Virtualenv" title="/en-US/docs/Python/Virtualenv">virtualenv</a>)包含在调用<code>$OBJDIR/_virtualenv</code> 版本的<a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations"><code>objdir</code></a> 时 . 为了封装到虚拟环境中, 可编辑<a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv_packages.txt" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt">build/virtualenv_packages.txt </a>. 这里有安装好了的版本 <a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py">build/virtualenv/populate_virtualenv.py</a> .</p> - -<h2 id="Python的封装">Python的封装</h2> - -<p>Python使用<a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">setup.py</a> 来记录元数据和python包（<a class="external" href="http://docs.python.org/tutorial/modules.html#packages" title="http://docs.python.org/tutorial/modules.html#packages">python packages</a>）的安装。运行 (e.g.) <code>python setup.py install</code> 将安装打包文件以及使<a class="external" href="http://docs.python.org/tutorial/modules.html#the-module-search-path" title="http://docs.python.org/tutorial/modules.html#the-module-search-path">python's import path</a>中的模块可用。对python 2.x来说， 有几种不同的分布式或安装式模块存在，<code><a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">distutils</a></code> 只在python标准库( <a class="external" href="http://docs.python.org/library/" title="http://docs.python.org/library/">python's standard library</a>)的分布式封装中可用， <code>distutils</code> 可以上传到python封装索引<a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">python package index</a> 并且安装python包。详情请参阅<a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">Python documentation on <code>distutils</code></a></p> - -<p>当 <code>distutils</code> 已经被加入python标准库中后, 初始化工具 <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools" title="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a>是一个为封装和分发的第三方的特设标准。它几乎完全兼容<code>distutils</code>,但是却非常关键的使封装文件具有“依赖关系”<a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies" title="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies">include dependencies</a> 的能力，可以在<code>setup.py</code> 被调用的时候作为预置条件安装，同时也有了在开发者模式<a class="external" href="http://packages.python.org/distribute/setuptools.html#development-mode" title="http://packages.python.org/distribute/setuptools.html#development-mode">development mode</a>下安装python包的能力. 这使得文件能通过 <a class="external" href="http://docs.python.org/library/site.html" title="http://docs.python.org/library/site.html">.pth files</a>来编辑，这对于积极工作的人来说非常容易上手。 <code>setuptools</code> 也提供了一个通过 <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a>来快速安装打包文件和依赖关系的脚本<code><a class="external" href="http://packages.python.org/distribute/easy_install.html" title="http://packages.python.org/distribute/easy_install.html">easy_install</a></code> 。比如安装 <a class="external" href="http://pyyaml.org/wiki/PyYAML" title="http://pyyaml.org/wiki/PyYAML">PyYAML</a>包，运行</p> - -<pre>easy_install PyYAML -</pre> - -<p>因为 <code>setuptools</code> 没有被包含在python中，你需要对其进行安装，你可以去到PyPI主页去下载<code>setuptools</code>i，然后解压，在目录下运行<code>python setup.py install</code> ，你也可以使用快速安装脚本<code><a class="external" href="http://peak.telecommunity.com/dist/ez_setup.py" title="http://peak.telecommunity.com/dist/ez_setup.py">ez_setup.py</a></code>来进行安装，你可以在拥有root权限或管理员权限的python环境中下载和安装，或者在 <a class="external" href="http://www.gnu.org/s/bash/" title="http://www.gnu.org/s/bash/">bash shell</a>中运行</p> - -<pre>sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py) -</pre> - -<p><code>setuptools</code> 也提供了一个虚拟环境<a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>, 所以如果你想使用虚拟环境来开发，你不需要全局安装<code>setuptools</code> ，<a class="external" href="http://packages.python.org/distribute/" title="http://packages.python.org/distribute/">distribute</a>是一个Mozilla大佬 <a class="external" href="http://ziade.org/" title="http://ziade.org/">Tarek Ziade</a> 在<code>setuptools</code> 的一个，它完全兼容<code>setuptools</code>，并修复了一些bug。</p> - -<div class="note"><strong>注意:</strong> 非常建议你使用虚拟环境<a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>来开发</div> - -<p>python包索引<a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">Python Package Index (PyPI)</a> 是一个标准的python打包文件的分发点。如果你需要查找一些python的功能，这是一个很好的查询的地方。</p> - -<p>参阅: <a class="external" href="http://k0s.org/portfolio/packaging.html">http://k0s.org/portfolio/packaging.html</a></p> - -<h2 id="参阅：">参阅：</h2> - -<ul> - <li><a class="external" href="http://docs.services.mozilla.com/server-devguide/release.html" title="http://docs.services.mozilla.com/server-devguide/release.html">Releasing an application</a> (Mozilla Services documentation)</li> - <li>http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy</li> - <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Python101">https://wiki.mozilla.org/Auto-tools/Python101</a></li> - <li><a href="http://www.learnstreet.com/cg/simple/projects/python" title="http://www.learnstreet.com/cg/simple/projects/python">Python Projects </a>at Code Garage</li> -</ul> diff --git a/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html b/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html deleted file mode 100644 index 757accbc32..0000000000 --- a/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Tutorials -slug: conflicting/Learn_30ccce5e65b5ce795fc2e288fe9d012b -tags: - - Index - - NeedsTranslation - - TopicStub -translation_of: Learn -translation_of_original: Learn/tutorial -original_slug: Learn/tutorial ---- -<p>It's great to know about Web technologies and the concepts behind them, but at some point it's time to turn theory into practice. We've set up some pathways that will help you get results with Web technology and enjoy the power you unlock as you learn!</p> - -<div class="row topicpage-table"> -<div class="section" style="width: 568px;"> -<h2 id="The_basics" style="line-height: 30px; font-size: 2.14285714285714rem;">The basics</h2> - -<p>These are the essentials to follow if you're starting out with Web development.</p> - -<dl> - <dt><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a website</a></dt> - <dd>This tutorial leads you through all the steps to building a website from scratch.</dd> - <dt><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information Security Basics</a></dt> - <dd>This tutorial explains the basic principles of information security and how to apply them, especially in cryptography.</dd> -</dl> -</div> - -<div class="section" style="width: 593px;"> -<h2 id="In_depth" style="line-height: 30px; font-size: 2.14285714285714rem;">In depth</h2> - -<p>The following provides more advanced use cases for seasoned web developers.</p> - -<dl> - <dt><a href="/en-US/Apps/Quickstart/Build">Building Web Apps</a></dt> - <dd>Web Apps are applications that run in a web browser, and you need specific knowledge to become adept at building them. Find out everything you need to know here on MDN!</dd> -</dl> -</div> -</div> - -<p> </p> diff --git a/files/zh-cn/conflicting/mdn/contribute/index.html b/files/zh-cn/conflicting/mdn/contribute/index.html deleted file mode 100644 index 2bdaafa3d0..0000000000 --- a/files/zh-cn/conflicting/mdn/contribute/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: MDC:How to Help -slug: conflicting/MDN/Contribute -translation_of: MDN/Contribute -translation_of_original: MDC:How_to_Help -original_slug: MDC:怎样进行帮助 ---- -<p>你好，世界！</p> diff --git a/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html b/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html deleted file mode 100644 index 1398443c47..0000000000 --- a/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 内容块 -slug: conflicting/MDN/Guidelines/CSS_style_guide -translation_of: MDN/Guidelines/CSS_style_guide -translation_of_original: MDN/Structures/Content_blocks -original_slug: MDN/Guidelines/Content_blocks ---- -<div>{{MDNSidebar}}</div><div class="summary"> - <p>This pages lists reusable content blocks.</p> -</div> -<h2 id="Card-grid">Card-grid</h2> -<p>Allows to have a couple of cards next to each other to call out specific contents or can be used for a call to action. CSS class: <code>.card-grid </code>(L 751 - 824 in CustomCSS).</p> -<ul class="card-grid"> - <li><span>CSS Reference</span> - <p>An <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned Web developers</u> describing every property and concept of CSS.</p> - </li> - <li><span>CSS Tutorial</span> - <p>A <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">step-by-step introduction</a> to help <u>complete beginners</u> get started. It presents all the needed fundamentals.</p> - </li> - <li><span>CSS3 Demos</span> - <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p> - </li> -</ul> -<h2 id="Two_columns">Two columns</h2> -<p>Two columns seperated with a thick grey border. Often used on landing pages. CSS class: <code>.topicpage-table</code> (L 830 - 837 & 82-93 in CustomCSS).</p> -<div class="row topicpage-table"> - <div class="section"> - Column 1</div> - <div class="section"> - Column 2</div> -</div> -<p> </p> -<h2 id="Equal_column_heights">Equal column heights</h2> -<p>Used on the <a href="/en-US/Firefox_OS">Firefox OS</a> landing page to wrap columns that should all be the same height. CSS class <code>.equalColumnHeights</code> (L 25 - 38 in CustomCSS).</p> -<div class="equalColumnHeights"> - <div class="zone-callout"> - Some text<br> - And a new line<br> - </div> - <div class="zone-callout"> - Some more text<br> - <br> - <br> - here</div> -</div> -<p> </p> diff --git a/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html b/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html deleted file mode 100644 index afd1b849ca..0000000000 --- a/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: 用户界面元素 -slug: conflicting/Mozilla/Add-ons/WebExtensions/user_interface -translation_of: Mozilla/Add-ons/WebExtensions/user_interface -translation_of_original: Mozilla/Add-ons/WebExtensions/User_interface_components -original_slug: Mozilla/Add-ons/WebExtensions/用户界面元素 ---- -<div>{{AddonSidebar}}</div> - -<p>该主题概括了所有你能用来创建你扩展的用户界面的组件。</p> - -<h2 id="浏览器行为">浏览器行为</h2> - -<p>浏览器行为是一个你能添加至浏览器工具栏的按钮，用户可以点击该按钮来与你的扩展交互。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12966/browser-action.png" style="display: block; height: 387px; margin-left: auto; margin-right: auto; width: 782px;"></p> - -<p>有两种方式定义一个浏览器行为: 有一个 <a href="#Popups">弹出菜单</a>, 或者没有弹出菜单。</p> - -<p>当你没有定义一个弹出菜单时，用户点击按钮会导致一个消息被分发至扩展，而你可以使用 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a> 来监听它:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>如果你定义了弹出菜单，点击事件就不会被分发取而代之的是弹出菜单会显示出来。用户可以跟弹出菜单交互而当用户点击菜单外的区域时它会自动关闭。</p> - -<p>值得注意的是你的扩展只能拥有一个浏览器行为。</p> - -<h3 id="定义浏览器行为">定义浏览器行为</h3> - -<p>你通过使用在manifest.json 文件中使用 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> 关键字定义浏览器行为的属性 - 图标, 标题, 弹出菜单 :</p> - -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"browser_action":</span> <span class="punctuation token">{</span> - <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> - <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> - <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span><span class="punctuation token">,</span> - <span class="key token">"default_popup":</span> <span class="string token">"popup/geo.html"</span> -<span class="punctuation token">}</span></code></pre> - -<p>唯一必要的关键字是 <code>default_icon</code>.你可以使用 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API 修改任何属性.</p> - -<h3 id="例子">例子</h3> - -<p>在GITHUB上的 <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> 资源包含了以下使用浏览行为的例子:</p> - -<ul> - <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> 使用了没有弹出菜单的浏览器行为</li> - <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> 使用了由弹出菜单的浏览器行为</li> -</ul> - -<h2 id="页面行为">页面行为</h2> - -<p>页面行为在很多方面类似于 <a href="#Browser_actions">browser actions</a> , 除了:</p> - -<ul> - <li>浏览器行为按钮会一直显现，并且一直可用。</li> - <li>页面行为只会在几个页面并且该页面处于活动标签时显示。</li> -</ul> - -<p>为了强调页面行为只跟部分页面有联系，他们将其显示在地址栏内而不是工具栏:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p> - -<p>不像浏览器行为，页面行为默认是关闭的, 调用 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> 和<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> 可以显示或隐藏页面行为。</p> - -<h3 id="定义页面行为">定义页面行为</h3> - -<p>通过在manifest.json中使用<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> 关键字来定义页面行为的属性 —— 图标, 标题, 弹出菜单:</p> - -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> - <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> - <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> - <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> - <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span><span class="punctuation token">,</span> - <span class="key token">"default_popup":</span> <span class="string token">"popup/geo.html"</span> -<span class="punctuation token">}</span></code></pre> - -<p><code>default_icon 是唯一强制要求的关键字</code>. 你可以使用 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">pageAction</a></code> API 修改所有的属性或现实或隐藏页面行为。</p> - -<h3 id="例子_2">例子</h3> - -<p> <a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a> 例子使用了一个页面行为。</p> - -<h2 id="弹出菜单">弹出菜单</h2> - -<p>一个弹出菜单是一个绑定至 <a href="#Browser_actions">browser action</a> 或者 <a href="#Page_actions">page action</a> 的对话框。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14039/popup-shadow.png" style="display: block; height: 545px; margin-left: auto; margin-right: auto; width: 700px;"></p> - -<p>当用户点击按钮弹出菜单显示，当用户点击弹出菜单外的任何区域弹出菜单关闭。可以使用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/close">window.close()</a></code> 来关闭弹出菜单。</p> - -<p>你可以使用专门的在manifest.json中使用"_execute_browser_action" 和 "_execute_page_action" 来定义一个快捷键打开浏览器行为或页面行为. 详情请看 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code> manifest.json 关键字。不过你不能在你的扩展脚本中通过编程打开弹出菜单 : 他只能通过用户的行为的被打开。</p> - -<p>弹出菜单像普通网页一样通过HTML文件被定义，你当然也可以在里面包含CSS 和 javascript文件。 而且不像普通网页, 其包含的javascript可以使用所有的已经通过<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>获取了使用权限的 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> 。</p> - -<p>你可以要求浏览器在你的弹出菜单中包含一个样式表以使其看起来与浏览器UI一致。为了达成这一目的，在你的 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> 或 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> 关键字中包含<code> "browser_style": true</code> 。</p> - -<p>弹出菜单存在一个限制其可以加载资源的源地址的安全机制， 同时不允许类似 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> 的做法的使用 查看 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> 获取更多细节。</p> - -<p>你可以使用Add-on Debugger来调试弹出菜单标记和脚本，但是你需要一些技巧来设置让弹出菜单不在自动关闭。<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#Debugging_popups"> 阅读关于调试弹出菜单</a>。</p> - -<h3 id="弹出菜单尺寸重新计算">弹出菜单尺寸重新计算</h3> - -<p>弹出菜单自动根据其内容调整尺寸。其适应算法可能因浏览器而不同。</p> - -<p>在火狐, 尺寸只再弹出菜单显示前被计算，而且在内容变化后至多进行每秒十次的计算。严格来说， 尺寸受 <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> 元素放置尺寸决定。 一种怪异的说法是, 他由 <code><a href="/en-US/docs/Web/HTML/Element/html"><html></a></code> 决定， Firefox 计算该元素的推荐宽度, 重新调整弹出菜单至其宽度， 然后完成尺寸调整所以这里没有上下滚动。 如果适应用户的屏幕他可能会增长到800X600px的尺寸。 如果用户 <a href="https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars#w_customize-the-menu-or-the-toolbar">移动弹出菜单对应按钮到菜单面板</a> ，而后弹出菜单会在菜单栏内显示并具有合适的尺寸。</p> - -<h2 id="设置页面">设置页面</h2> - -<p>设置页面允许你定义你的扩展可以被用户修改的选项。 用户从浏览器扩展管理器中访问设置页面:</p> - -<p>{{EmbedYouTube("02oXAcbUv-s")}}</p> - -<p>每个浏览器访问该页面的方法存在区别。</p> - -<ul> -</ul> - -<p>你可以通过调用 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a> 打开设置页面</p> - -<p>设置页面存在一个限制其可以加载资源的源地址的安全机制， 同时不允许类似 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> 的做法的使用 查看 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> 获取更多细节。</p> - -<h3 id="定义一个设置页面：">定义一个设置页面：</h3> - -<p>创建一个设置页面有以下流程：</p> - -<ul> - <li>写一个HTML文件定义页面。该文件像普通网页一样可以包含CSS和Javascript 文件而且可以使用所有 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> ，特别的你可以使用 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Storage" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>storage</code></a> API 来保存设置。</li> - <li>将这些文件打包至你的扩展。</li> - <li>在manifest.json 文件包含 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> 关键字， 并给予设置页面的URL。</li> -</ul> - -<h3 id="例子_3">例子</h3> - -<p> <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> 使用了设置页面。</p> - -<h2 id="上下文菜单项">上下文菜单项</h2> - -<p>使用 {{WebExtAPIRef("contextMenus")}} API, 你可以按你指定的情况向浏览器上下文菜单添加项目, 比如，你可以只在用户点击图片时显示一项，或者在一个可编辑的元素上，或者被选择的页面的一部份。</p> - -<h3 id="指定一个上下文菜单项">指定一个上下文菜单项</h3> - -<p>您可以使用{{WebExtAPIRef("contextMenus")}} API来 程序化地管理上下文菜单项。</p> - -<h3 id="例子_4">例子</h3> - -<p> <a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo">context-menu-demo</a> 创建了几种不同的上下文菜单项。</p> - -<h2 id="通知">通知</h2> - -<p>使用 {{WebExtAPIRef("notifications")}} API，你通过使用操作系统的通知系统可以创建短时通知:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14043/notify-shadowed.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 700px;"></p> - -<h3 id="定义一个通知">定义一个通知</h3> - -<p>使用{{WebExtAPIRef("notifications")}} API 可以程序化地管理通知。</p> - -<h3 id="Examples">Examples</h3> - -<p><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> 创建了通知。</p> diff --git a/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html b/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html deleted file mode 100644 index 35b8010d0e..0000000000 --- a/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: 使用源代码编辑器 -slug: conflicting/tools/Keyboard_shortcuts -translation_of: tools/Keyboard_shortcuts#Source_editor -translation_of_original: Tools/Using_the_Source_Editor -original_slug: Tools/Using_the_Source_Editor ---- -<div>{{ToolsSidebar}}</div><p>源代码编辑器是一个编辑器组件,由源editor.jsm的Java Script代码模块的提供,这是共享的几个开发工具,包括暂存器和样式编辑器。它也可以被使用的Firefox扩展。本文说明如何使用编辑器来编辑文本。.</p> -<h2 id="Keyboard_commands" name="Keyboard_commands">键盘命令</h2> -<p>这些都是标准命令的快捷键;注意，某些附加产品，他们可能会有所不同。但火狐使用的总是这些。.</p> -<div class="note"> - <strong>注：</strong>在Mac OS X,使用Command键来代替控制键.</div> -<table class="standard-table"> - <thead> - <tr> - <th class="header">功能</th> - <th class="header">键盘</th> - </tr> - </thead> - <tbody> - <tr> - <td>选择所有</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>A</kbd></kbd></td> - </tr> - <tr> - <td>复制</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>C</kbd></kbd></td> - </tr> - <tr> - <td>查找</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>F</kbd></kbd></td> - </tr> - <tr> - <td>查找下一个</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>G</kbd></kbd></td> - </tr> - <tr> - <td>跳转行</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>L</kbd></kbd></td> - </tr> - <tr> - <td>重做</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>Shift</kbd>-<kbd>Z</kbd></kbd></td> - </tr> - <tr> - <td>粘贴</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>V</kbd></kbd></td> - </tr> - <tr> - <td>剪切</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>X</kbd></kbd></td> - </tr> - <tr> - <td>恢复</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>Z</kbd></kbd></td> - </tr> - <tr> - <td>行缩进(s)</td> - <td><kbd>Tab</kbd></td> - </tr> - <tr> - <td>取消行缩进</td> - <td><kbd><kbd>Shift</kbd>-<kbd>Tab</kbd></kbd></td> - </tr> - <tr> - <td>移动行(s) 上</td> - <td><kbd><kbd>Alt</kbd>-<kbd>↑</kbd></kbd><br> - (<kbd><kbd>Ctrl</kbd>-<kbd>Option</kbd>-<kbd>↑</kbd></kbd> on Mac OS X)</td> - </tr> - <tr> - <td>移动行(s) 下</td> - <td><kbd><kbd>Alt</kbd>-<kbd>↓</kbd></kbd><br> - (<kbd><kbd>Ctrl</kbd>-<kbd>Option</kbd>-<kbd>↓</kbd></kbd> on Mac OS X)</td> - </tr> - <tr> - <td>切换注释选择</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>/</kbd></kbd></td> - </tr> - <tr> - <td>Move to bracket opening</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>[</kbd></kbd></td> - </tr> - <tr> - <td>Move to bracket closing</td> - <td><kbd><kbd>Ctlr</kbd>-<kbd>]</kbd></kbd></td> - </tr> - </tbody> -</table> -<h2 id="See_also" name="See_also">参阅</h2> -<ul> - <li><a href="/en-US/docs/Tools">工具</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad">暂存</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor">编辑样式</a></li> -</ul> diff --git a/files/zh-cn/conflicting/tools/performance/index.html b/files/zh-cn/conflicting/tools/performance/index.html deleted file mode 100644 index a6187179d2..0000000000 --- a/files/zh-cn/conflicting/tools/performance/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: JavaScript Profiler -slug: conflicting/Tools/Performance -translation_of: Tools/Performance -translation_of_original: Tools/Profiler -original_slug: Tools/Profiler ---- -<div>{{ToolsSidebar}}</div><p>使用Profiler工具找到你的JavaScript代码的瓶颈. Profiler会定期统计JavaScript样本的堆栈信息.</p> - -<p>你可以通过在Web Developer菜单下选择Profiler来启动它. 在Linux和OS X下，你可以在Tools菜单下找到Web Developer，而在windows下，Web Developer则在FIrefox菜单下.</p> - -<p>当Profiler被选择后，工具箱就会被打开.</p> - -<h2 id="抽样分析器"><a name="sampling-profilers">抽样分析器</a></h2> - -<p>JavaScript Profiler是一个抽样分析器. 这意味着它会定期对JavaScript引擎的状态取样， 并且记录取样时代码运行的堆栈信息. 统计学上, 我们运行可接受样本数量的函数，花费的时间相当于浏览器运行它的时间，所以你可以很好的从你的代码里找到瓶颈。<br> - <br> - <a name="profiling-example">例如，考虑这样一个程序:</a></p> - -<pre class="brush: js">function doSomething() { - var x = getTheValue(); - x = x + 1; // -> sample A - logTheValue(x); -} - -function getTheValue() { - return 5; -} - -function logTheValue(x) { - console.log(x); // -> sample B, sample C -} - -doSomething();</pre> - -<p>Suppose we run this program with the profiler active, and in the time it takes to run, the profiler takes three samples, as indicated in the inline comments above.</p> - -<p>They're all taken from inside <code>doSomething()</code>, but the second two are inside the <code>logTheValue()</code> function called by <code>doSomething()</code>. So the profile would consist of three stack traces, like this:</p> - -<pre>Sample A: doSomething() -Sample B: doSomething() > logTheValue() -Sample C: doSomething() > logTheValue()</pre> - -<p>This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that <code>logTheValue()</code> is the bottleneck in our code.</p> - -<h2 id="Creating_a_profile">Creating a profile</h2> - -<p>点击探查器中的秒表按钮来开始记录。当探查器正在记录时，秒表按钮是高亮状态。当我们再一次点击秒表按钮时，记录将停止并保存为一个新的Profile:</p> - -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> - -<p>Once you've clicked "Stop", the new profile will open automatically:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>This pane's divided into two parts:</p> - -<ul> - <li>The left-hand side lists all the profiles you've captured and allows you to load each one. Just above this there are two buttons: the <em>stopwatch</em> button allows you to record a new profile while the <em>Import...</em> button allows you to import previously saved data. When profile is selected, you can save its data as a JSON file by clicking the <em>Save</em> button.</li> - <li>The right-hand side displays the currently loaded profile.</li> -</ul> - -<h2 id="Analyzing_a_profile">Analyzing a profile</h2> - -<p>The profile is split into two parts:</p> - -<ul> - <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li> - <li>the <a href="#profile-details" title="#profile-details">profile details</a></li> -</ul> - -<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3> - -<p>The profile timeline occupies the top part of the profile display:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.</p> - -<p>Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p> - -<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:</p> - -<p><br> - <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3> - -<p>The profile details occupy the bottom part of the profile display:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> - -<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the <code>detectImage()</code> function.</p> - -<p><strong>Self</strong> shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p> - -<p>The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.</p> - -<h3 id="Expanding_the_call_tree">Expanding the call tree</h3> - -<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p> - -<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p> - -<table class="standard-table" style="height: 100px; width: 378px;"> - <tbody> - <tr> - <td style="text-align: center;"><strong>Running Time</strong></td> - <td style="text-align: center;"><strong>Self</strong></td> - <td style="text-align: center;"> </td> - </tr> - <tr> - <td style="text-align: center;">3 100%</td> - <td style="text-align: center;">1</td> - <td style="text-align: center;">doSomething()</td> - </tr> - <tr> - <td style="text-align: center;">2 67%</td> - <td style="text-align: center;">2</td> - <td style="text-align: center;">logTheValue()</td> - </tr> - </tbody> -</table> - -<p>To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p> - -<h2 id="Footnotes">Footnotes</h2> - -<ol> - <li><a name="footnote-1">If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like <code>forEach</code> will appear multiple times in the call tree.</a></li> -</ol> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/accessibility/index.html b/files/zh-cn/conflicting/web/accessibility/index.html deleted file mode 100644 index 061aae9a6e..0000000000 --- a/files/zh-cn/conflicting/web/accessibility/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Web Development -slug: conflicting/Web/Accessibility -tags: - - 网页无障碍访问 -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development -original_slug: Web/Accessibility/Web_Development ---- -<p class="summary"><span class="seoSummary">本篇文档为开发者提供了有关网站无障碍访问以及XUL无障碍开发的更多信息。</span></p> - -<table> - <tbody> - <tr> - <td style="vertical-align: top;"> - <h2 id="网页无障碍访问">网页无障碍访问</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA">ARIA - 针对开发者</a></dt> - <dd>ARIA的应用，使得动态HTML的页面内容具有了无障碍的可访问性。在许多的示例中我们都使用了ARIA应用，例如：在线内容区域以及Javascript小组件等。</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">Javascript 组件之键盘导航</a></dt> - <dd>到现在为止，那些想让基于固有组件的<DIV>和<span>拥有特定样式的Web开发人员，在技术层面都略欠火候。键盘辅助的可用性，同样是必要需求之一，需要开发人员引起足够的重视。</dd> - </dl> - - <h2 id="XUL_可访问性">XUL 可访问性</h2> - - <dl> - <dt> </dt> - <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Building_accessible_custom_components_in_XUL">在XUL中构建可访问的自定义组件</a></dt> - <dd>使用DHTML无障碍访问技术，来为自定义的XUL组件添加可访问属性。</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/XUL_accessibility_guidelines">可访问性XUL使用指南</a></dt> - <dd>当根据使用指南编写完成的同时, XUL有能力自行整合出无障碍用户界面。程序员、核查者、设计师以及质量监管工程师都应该对使用指南保持一定的熟悉程度。</dd> - </dl> - </td> - <td style="vertical-align: top;"> - <h2 id="外部资源">外部资源</h2> - - <dl> - <dt><a href="http://diveintoaccessibility.info/">深入探寻无障碍访问</a></dt> - <dd>这本书回答了两个问题。第一个问题是：“为什么我要让我的网站更具无障碍访问性？”第二个问题是“如何使我的网站做到这一点？”</dd> - <dt><a href="http://www-03.ibm.com/able/guidelines/web/accessweb.html">无障碍访问网页的编写</a></dt> - <dd>这是一本来自于IBM的便携式无障碍访问列表。</dd> - </dl> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/beacon_api/index.html b/files/zh-cn/conflicting/web/api/beacon_api/index.html deleted file mode 100644 index c208786a53..0000000000 --- a/files/zh-cn/conflicting/web/api/beacon_api/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 使用 Beacon API -slug: conflicting/Web/API/Beacon_API -tags: - - Web 性能 - - 指南 -translation_of: Web/API/Beacon_API/Using_the_Beacon_API -original_slug: Web/API/Beacon_API/Using_the_Beacon_API ---- -<div>{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}</div> - -<p><strong><code>Beacon</code></strong> 接口用来调度向 Web 服务器发送的异步非阻塞请求。</p> - -<ul> - <li>Beacon 请求使用 HTTP <code>POST</code> 方法，并且不需要有响应。</li> - <li>Beacon 请求能确保在页面触发 unload 之前完成初始化。</li> -</ul> - -<p>这篇文档包含了 Beacon 接口的一些例子，可以在 {{domxref("Beacon_API","Beacon API")}} 查阅对应的 API。</p> - -<h2 id="Navigator.sendBeacon">Navigator.sendBeacon()</h2> - -<p>Beacon API 的 {{domxref("Navigator.sendBeacon()")}} ，会在<em>全局上下文</em>中向服务器发起一个 <em>beacon</em> 请求。这个方法需要两个参数: <code>URL</code> 以及要发送的数据 <code>data</code> 。其中 <code>data</code> 参数是可选的，它的类型可以为 {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, 或者 {{domxref("FormData")}}.</p> - -<p>如果浏览器成功地将 beacon 请求加入到待发送的队列里，这个方法将会返回 <code>true</code> ，否则将会返回 <code>false</code> 。</p> - -<p>下面的例子注册了 {{event("load")}} 事件和 {{event("beforeunload")}} 事件的回调函数， 并且在回调函数里面调用了 <code>sendBeacon()</code> 方法。</p> - -<pre class="brush: js">window.onload = window.onunload = function analytics(event) { - if (!navigator.sendBeacon) return; - - var url = "https://example.com/analytics"; - // 创建待发送数据 - var data = "state=" + event.type + "&location=" + location.href; - - // 发送beacon请求 - var status = navigator.sendBeacon(url, data); - - // 打印数据以及结果 - console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status); -}; -</pre> - -<p>接下来的例子创建了一个 {{event("submit")}} 事件的回调函数，并且当submit事件触发时，调用 <code>sendBeacon()</code>方法。</p> - -<pre class="brush: js">window.onsubmit = function send_analytics() { - var data = JSON.stringify({ - location: location.href, - time: Date() - }); - - navigator.sendBeacon('/analytics', data); -}; -</pre> - -<h2 id="WorkerNavigator.sendBeacon">WorkerNavigator.sendBeacon()</h2> - -<p>Beacon API 的 {{domxref("WorkerNavigator.sendBeacon()")}} 的使用方法，跟平常的使用方法完全相同，区别仅在与这个方法存在 <em>{{domxref("WorkerGlobalScope","worker 全局作用域")}} </em>中</p> - -<p>接下来的例子展示了，使用 {{domxref("Worker")}} 发送了一个 beacon 请求，使用了全局上下文的 URL 和数据。</p> - -<p>这是全局上下文的代码片段:</p> - -<pre class="brush: js">function worker_send(url, data) { - // 创建 worker 对象 - var myWorker = new Worker("worker-using.js"); - - // 向 worker 发送 URL 以及 data - myWorker.postMessage([url, data]); - - // 注册回调函数接收来自 worker 的成功或失败信息 - myWorker.onmessage = function(event) { - var msg = event.data; - // 打印 worker 的发送状态 - console.log("Worker reply: sendBeacon() status = " + msg); - }; -} -</pre> - -<p>这是 worker 中的代码片段 (<code>worker-using.js</code>):</p> - -<pre class="brush: js">onmessage = function(event) { - var msg = event.data; - // 从 msg 中分离 URL 和 data - var url = msg[0]; - var data = msg[1]; - - // 如果浏览器支持在 worker 里面调用 sendBeacon()， 那就发送beacon请求 - // 否则返回失败信息给全局上下文 - if (self.navigator.sendBeacon) { - var status = self.navigator.sendBeacon(url, data); - postMessage(status ? "success" : "fail"); - } else { - postMessage("Worker: self.navigator.sendBeacon is unsupported"); - } -} -</pre> - -<h2 id="查看更多">查看更多</h2> - -<ul> - <li>{{domxref("Beacon_API","Beacon API")}} (概览)</li> - <li><a href="https://w3c.github.io/beacon/">Beacon 标准</a></li> - <li><a href="http://caniuse.com/#search=beacon">Beacon CanIUse 数据</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html b/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index f81a2be43c..0000000000 --- a/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Drawing graphics with canvas -slug: conflicting/Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas -original_slug: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -<div class="note"> - <p>本文大部分（但不包括关于绘制窗体部分的文档）已经被包含到更详尽的Canvas教程中，该页面因为现在已经显得多余可能会被链接到那里，但是某些信息可能仍然是十分有用的。</p> - <p> </p> -</div> -<h2 id="Introduction" name="Introduction">Introduction</h2> -<p>With <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code><canvas></code> is based on the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code><canvas></code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p> -<p><code><canvas></code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p> -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h3> -<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> -<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p> -<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p> -<h3 id="Using_Paths" name="Using_Paths">Using Paths</h3> -<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> - ctx.lineTo(30, 30); - ctx.fill(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> -<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p> -<h3 id="Graphics_State" name="Graphics_State">Graphics State</h3> -<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h3> -<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p> -<pre class="brush: js">function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); -} - -function dot(ctx) { - ctx.save(); - ctx.fillStyle = "yellow"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // note that all other translates are relative to this one - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // unnecessary - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> -<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p> -<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple <canvas></h2> -<p>For the most part, <code><canvas></code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p> -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code></canvas></code> tag</h3> -<p>In the Apple Safari implementation, <code><canvas></code> is an element implemented in much the same way <code><img></code> is; it does not have an end tag. However, for <code><canvas></code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p> -<p>If fallback content is not needed, a simple <code><canvas id="foo" ...></canvas></code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p> -<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p> -<pre>canvas { - font-size: 0.00001px !ie; -}</pre> -<h2 id="Additional_Features" name="Additional_Features">Additional Features</h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h3> -<div class="note"> - This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div> -<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p> -<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p> -<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p> -<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p> -<div class="note"> - <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/en-US/docs/tag/canvas">And more...</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html b/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html deleted file mode 100644 index 3fd5c0018d..0000000000 --- a/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: RandomSource -slug: conflicting/Web/API/Crypto/getRandomValues -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource -original_slug: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> 代表密码学安全随机数的来源。它可以通过全局对象的 {{domxref("Crypto")}} 获取：网页中的 {{domxref("Window.crypto")}}，Workrt 里面的 {{domxref("WorkerGlobalScope.crypto")}}。</p> - -<p><code>RandomSource</code> 不是一个接口，这个类型的对象不可以被创建。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>RandomSource</code> 既没有定义也没有属性。</em></p> - -<dl> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>使用密码学可靠的随机值填充传递过来的 {{ domxref("ArrayBufferView") }}。</dd> -</dl> - -<h2 id="Specification" name="Specification">标准</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('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>通过 {{ domxref("Window.crypto") }} 获取一个 {{domxref("Crypto")}} 对象。</li> - <li>{{jsxref("Math.random")}}，一个非密码学安全来源的随机数。</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/document/characterset/index.html b/files/zh-cn/conflicting/web/api/document/characterset/index.html deleted file mode 100644 index ce06fbc644..0000000000 --- a/files/zh-cn/conflicting/web/api/document/characterset/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: document.inputEncoding -slug: conflicting/Web/API/Document/characterSet -translation_of: Web/API/Document/characterSet -translation_of_original: Web/API/Document/inputEncoding -original_slug: Web/API/Document/inputEncoding ---- -<p>{{ ApiRef() }} {{ deprecated_header() }}</p> -<h3 id="概述">概述</h3> -<p>返回一个字符串,代表当前文档渲染时所使用的编码.(比如<code>utf-8</code>).</p> -<div class="warning"> - <strong>警告:</strong> 不要再使用该属性.该属性在DOM 4 规范(草案)中已经被废弃. Gecko 在未来的版本中将会删除它.</div> -<h3 id="语法">语法</h3> -<pre class="eval"><var>encoding</var> = <code>document.inputEncoding;</code> -</pre> -<p><code>inputEncoding</code> 是个只读属性.</p> -<h3 id="规范">规范</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> - <li>This has been removed from {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> -</ul> -<p>{{ languages( {"en": "en/DOM/document.inputEncoding" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/document/createevent/index.html b/files/zh-cn/conflicting/web/api/document/createevent/index.html deleted file mode 100644 index 84d91c4dec..0000000000 --- a/files/zh-cn/conflicting/web/api/document/createevent/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Event.createEvent() -slug: conflicting/Web/API/Document/createEvent -tags: - - DOM - - Event - - JavaScript - - Method -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent -original_slug: Web/API/Event/createEvent ---- -<p>{{APIRef("DOM")}}</p> - -<p>创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。</p> - -<h3 id="语法">语法</h3> - -<pre><code>document.createEvent(type) </code></pre> - -<dl> - <dt><code>type</code></dt> - <dd>指明待创建事件对象的类型的字符串</dd> -</dl> - -<p>此方法返回一个新的特定类型的 DOM {{ domxref("Event") }} 对象，此对象在使用前必须经过初始化（init）。</p> - -<h3 id="示例">示例</h3> - -<pre>var newEvent = document.createEvent("UIEvents");</pre> - -<h3 id="规范">规范</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/document/hasfocus/index.html b/files/zh-cn/conflicting/web/api/document/hasfocus/index.html deleted file mode 100644 index db40737695..0000000000 --- a/files/zh-cn/conflicting/web/api/document/hasfocus/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: HTML 焦点管理 -slug: conflicting/Web/API/Document/hasFocus -tags: - - DOM - - HTML - - HTML5 - - 焦点 -translation_of: Web/API/Document/hasFocus -translation_of_original: Web/HTML/Focus_management_in_HTML -original_slug: Web/HTML/Focus_management_in_HTML ---- -<p>重定向 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></p> - -<p> </p> - -<p>在 HTML5 工作草案中，DOM 属性 <code><a href="/cn/DOM/document.activeElement" title="en/DOM/document.activeElement">activeElement</a></code> 与方法 <code><a href="/cn/DOM/document.hasFocus" title="en/DOM/document.hasFocus">hasFocus()</a></code> 为程序员提供了更好的控制页面交互的能力，特别是对于用户行为引发的交互。例如，它们都可以用于统计使用目的，跟踪页面特定链接的点击次数，计算元素获得焦点的次数等等。此外，当与 AJAX 技术结合以后，将会减少向服务器请求的数目，这取决于用户的活跃程度和页面的布局。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="浏览器相关注释">浏览器相关注释</h3> - -<h4 id="Gecko_notes">Gecko notes</h4> - -<p>[1] Gecko 8.0 {{geckoRelease("8.0")}} 开始，Firefox 会在任意 <code>tabindex</code> 值大于 0 的元素周围绘制一个焦点框，而不只是一小部分元素。一部分元素例外： {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}} 和 {{HTMLElement("html")}}。</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>{{domxref("document.activeElement")}}</li> - <li>{{domxref("document.hasFocus")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/document_object_model/index.html b/files/zh-cn/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index d7a4164ee9..0000000000 --- a/files/zh-cn/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 前言 -slug: conflicting/Web/API/Document_Object_Model -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface -original_slug: Web/API/Document_Object_Model/Preface ---- -<p>{{ ApiRef() }}</p> -<h3 id="About_This_Reference" name="About_This_Reference">关于此参考文档</h3> -<p>本节将描述与此向导本身相关的一些内容，内容包括它是做什么的，里面的信息是如何呈现的，以及怎样在你DOM开发中如何使用这份参考文档中的示例。</p> -<p>注意，这份文档尚在开发中，并没有完整包含Gecko中所有已经移植的DOM方法及其属性，但是，文档中的每一个小节（例如，DOM文件参考）中所描述的对象是完整的。今后当某个API库的成员的信息可用时，它将会被整合到此文档中。</p> -<h3 id="哪些人应该阅读这份指南">哪些人应该阅读这份指南</h3> -<p>这份Gecko DOM参考文档的读者应该是一位web开发人员或者是一位对网页制作有一定了解的熟练web用户。这份文档对读者对DOM、XML、web服务或者web标准，甚至JavaScript——DOM呈现给读者的语言——的熟练度都没有要求。但是，本文档假定读者至少对HTML、标签、网页的基本结构、浏览器以及样式表是熟悉的。</p> -<p>在这里，介绍性的资料在展示的同时伴随有许多示例，并且高等级的解释对没有经验的和经验丰富的web开发者都同样有用，并且也并不仅仅针对入门开发者。然而，这是一份正在不断改进中的API参考手册。</p> -<h3 id="什么是Gecko？">什么是Gecko？</h3> -<p>Mozilla，Firefox, Netscape 6以上版本，以及一些基于Mozilla的其他浏览器都有一个相同的对DOM的实现。这是因为它们使用的是相同的技术。</p> -<p>Gecko，即在上述各种浏览器中处理HTML的解析，页面的排版，文档对象模型，以及整个应用界面的渲染的软件组件，是一个快速的、兼容多种标准的渲染引擎。它移植了W3C的DOM标准以及出现在网页页面和应用界面（或者称为chrome）中的类DOM（但尚未标准化）的浏览器对象模型（即所谓window等的）。</p> -<p>尽管应用界面和页面内容在不同的浏览器里的呈现方式不一样，但是DOM期望它们统一地作为一种节点的分层结构。</p> -<h3 id="API语法">API语法</h3> -<p>API参考里的每个描述都包括语法、输入输出参数（包括返回类型），一个例子，额外的一些提示，以及指向对应参考文档的链接。</p> -<p>只读的属性只能被读取。因为它们无法被设置，所以通常以一个单独的一行语法表示。例如screen对象的只读属性availHeight使用的语法如下：</p> -<pre>iAvail = window.screen.availHeight -</pre> -<p>这意味着你只能把该只读属性放在等式的右边。</p> -<p>可读/写的属性，既能被读取也能被写入：</p> -<pre>msg = window.status -window.status = msg -</pre> -<p>一般来说，描述对象的成员时，对象的格式声明通常都带有一个简单的类型描述符，例如，对所有的元素使用element，对所有的顶层文档对象使用document，对所有的表对象使用table等（详见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types" title="zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types">重要的数据类型</a>）。</p> -<h3 id="Using_the_Examples" name="Using_the_Examples">如何使用示例</h3> -<p>本参考文档中的许多示例都是完整的文档，你可以把他们复制粘贴到一个新的文件，然后在浏览器中打开它。</p> -<p>其他的例子是一些代码片段。你可以把它们加入到JavaScript的回调函数中来执行。</p> -<p>例如，这个关于<a href="/zh-CN/DOM/window.document" title="zh-CN/DOM/window.document">window.document</a>属性的例子能通过一个函数来测试。这里，它通过一个按钮的<code>onclick </code>属性来调用。</p> -<pre class="brush: html"><html> -<head> -<title>Test Page</title> -<script type="text/javascript"> -function testWinDoc() { - - var doc= window.document; - - alert(doc.title); - -} -</script> -</head> - -<body> - <button onclick="testWinDoc();">test document property</button> -</body> -</html> -</pre> -<p>其他一些尚未完整打包的对象成员也采用与此类似的函数和页面。参见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" title="zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">测试DOM API</a>，可以一次对各种API的做一次“无害测试”。</p> diff --git a/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html b/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html deleted file mode 100644 index 285ced6f96..0000000000 --- a/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: DOM 开发者指南 -slug: conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM -original_slug: Web/Guide/API/DOM ---- -<p>{{draft}}</p> - -<p><a href="https://developer.mozilla.org/docs/DOM">文档对象模型</a>（ <a href="/docs/DOM">Document Object Model</a>） 是为 <a href="/en-US/docs/HTML">HTML</a> 和<a href="/en-US/docs/XML">XML</a> 文档编写的应用程序接口。它为文档提供了结构化的描述, 使得开发者能够修改它们的内容和展现方式. 更重要的是, 它可以将网页与脚本或编程语言连接起来。</p> - -<p>开发者能用来修改和创建网页的所有性质、方法和事件都被组织到<a href="/en-US/docs/Gecko_DOM_Reference">对象</a>( <a href="/en-US/docs/Gecko_DOM_Reference">objects</a>)中， (例如, document 对象代表着文档本身，table 对象代表 一个 HTML 表格元素等等)。在较新的网络浏览器中，这些对象都可以用脚本语言获取。</p> - -<p>DOM模型常被用来与 <a href="/en-US/docs/JavaScript">JavaScript</a>交互。然而，DOM是独立于任何编程语言之外而设计的，这使得文档的结构化描述可以从一个<a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference">单个、兼容的接口</a>获取，尽管我们青睐于Javascript,但我们可以为任何语言创建DOM的引用接口。</p> - -<p><a href="http://www.w3.org/">万维网联盟组织</a>（ <a href="http://www.w3.org/">World Wide Web Consortium</a> ）为DOM建立了一套标准， 叫做<a href="http://www.w3.org/DOM/"> W3C DOM</a>。它被如今大多数主流浏览器所支持，使得可以开发出强大的跨浏览器应用。</p> - -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">为什么DOM很重要？</h2> - -<p>"动态超文本链接语言" (<a href="/en-US/docs/DHTML">DHTML</a>) 是一个被一些开发者们用来描述结合HTML、样式表、脚本而使文档富有动态效果技术的名词。 W3C DOM工作组致力于开发可操作的、不受语言限制并被大家所认同的解决方案 (可参见 <a href="http://www.w3.org/DOM/faq.html">W3C 问答</a>).</p> - -<p>正如 Mozilla 的标题"网络应用程序平台”所强调的, 对DOM的支持是核心的特点，也是Mozilla能取代其它浏览器所必需的特点。更为重要的事实是--Mozilla（包括Firefox和Thunderbird）的用户界面都是用<a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a>创建的，并且用DOM<a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">修改自己的用户界面</a>。</p> - -<h2 id="更多关于DOM的内容">更多关于DOM的内容</h2> - -<p>{{LandingPageListSubpages}}</p> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html deleted file mode 100644 index c33269a9d3..0000000000 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Document.elementFromPoint() -slug: conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint -original_slug: Web/API/Document/elementFromPoint ---- -<div> - {{APIRef()}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p>返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.</p> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre><em>var element</em> = document.elementFromPoint(<em>x</em>, <em>y</em>);</pre> -<ul> - <li><code>element</code> 是返回的DOM<a href="/en-US/docs/DOM/element" title="DOM/element">元素</a>.</li> - <li><code>x</code> 和 <code>y</code> 是坐标数值, 不需要单位比如px.</li> -</ul> -<h2 id="Example" name="Example">示例</h2> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>elementFromPoint example</title> - -<script> -function changeColor(newColor) { - elem = document.elementFromPoint(2, 2); - elem.style.color = newColor; -} -</script> -</head> - -<body> -<p id="para1">Some text here</p> -<button onclick="changeColor('blue');">blue</button> -<button onclick="changeColor('red');">red</button> -</body> -</html> -</pre> -<h2 id="Notes" name="Notes">附注</h2> -<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the DOM of the document the method is called on (in the iframe case, the iframe itself) is returned. If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.</p> -<p>If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is <code>null</code>.</p> -<p>{{Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.")}}</p> -<h2 id="Specification" name="Specification">规范</h2> -<ul> - <li>Preliminary specification: <code><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint">elementFromPoint</a></code></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html deleted file mode 100644 index 3b1043f630..0000000000 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Document.elementsFromPoint() -slug: conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint -translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint -translation_of_original: Web/API/Document/elementsFromPoint -original_slug: Web/API/Document/elementsFromPoint ---- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> - -<p><code><strong>elementsFromPoint()</strong></code> 方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var<em> elements</em> = <em>document</em>.elementsFromPoint(<em>x</em>, <em>y</em>);</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个包含多个元素的数组</p> - -<h3 id="参数">参数</h3> - -<dl> - <dt>x</dt> - <dd>当前视口内某一点的横坐标</dd> - <dt>y</dt> - <dd>当前视口内某一点的纵坐标</dd> -</dl> - -<h2 id="Example" name="Example">示例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p>Some text</p> -</div> -<p>Elements at point 30, 20:</p> -<div id="output"></div> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); -if (document.elementsFromPoint) { - var elements = document.elementsFromPoint(30, 20); - for(var i = 0; i < elements.length; i++) { - output.textContent += elements[i].localName; - if (i < elements.length - 1) { - output.textContent += " < "; - } - } -} else { - output.innerHTML = "<span style=\"color: red;\">" + - "您的浏览器不支持 <code>document.elementsFromPoint()</code>" + - "</span>"; -}</pre> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<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('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> {{CompatChrome(43.0)}}</td> - <td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td> - <td>10.0 {{property_prefix("ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(11)}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatGeckoMobile("46.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(11)}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html deleted file mode 100644 index dce4bc9c58..0000000000 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: document.getSelection -slug: conflicting/Web/API/DocumentOrShadowRoot/getSelection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection -original_slug: Web/API/Document/getSelection ---- -<article class="approved text-content" style="padding-right: 10px; width: 652px; float: left;"> -<div class="boxed translate-rendered" style=""> -<p>{{APIRef("DOM")}}</p> - -<p>该方法的功能等价于 {{domxref("Window.getSelection()")}} 方法；其返回一个 {{domxref("Selection")}} 对象，表示文档中当前被选择的文本。</p> -</div> -</article> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html deleted file mode 100644 index 088be5bd6b..0000000000 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Document.styleSheets -slug: conflicting/Web/API/DocumentOrShadowRoot/styleSheets -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets -original_slug: Web/API/Document/styleSheets ---- -<div>{{APIRef}}</div> - -<p><strong><code>Document.styleSheets</code></strong> 只读属性，返回一个由 {{domxref("StyleSheet ")}} 对象组成的 {{domxref("StyleSheetList")}}，每个 {{domxref("StyleSheet ")}} 对象都是一个文档中链接或嵌入的样式表。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox">let <var>styleSheetList</var> = <em>document</em>.styleSheets; -</pre> - -<p>返回的对象是一个 {{domxref("StyleSheetList")}}。</p> - -<p>它是一个 {{domxref("StyleSheet")}} 对象的有序集合。<code><em>styleSheetList</em>.item(<em>index</em>)</code> 或 <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> 根据它的索引（索引基于0）返回一个单独的样式表对象。</p> - -<pre class="syntaxbox"> </pre> - -<h2 id="Specification" name="Specification">规范</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/dommatrix/index.html b/files/zh-cn/conflicting/web/api/dommatrix/index.html deleted file mode 100644 index 364ba0709c..0000000000 --- a/files/zh-cn/conflicting/web/api/dommatrix/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: CSSMatrix -slug: conflicting/Web/API/DOMMatrix -translation_of: Web/API/DOMMatrix -translation_of_original: Web/API/CSSMatrix -original_slug: Web/API/CSSMatrix ---- -<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div> - -<p><strong><code>CSSMatrix</code></strong> 代表可以用于2D或3D变换的4x4齐次矩阵。据说这个类曾经是 CSS Transitions Module Level 3 的一部分，但在现在的工作草案里不存在 。请使用 <a href="/en-US/docs/Web/API/DOMMatrix"><code>DOMMatrix</code></a> 。</p> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#webkitcssmatrix-interface', 'WebKitCSSMatrix')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>Initial standardization of the WebKit-prefixed version, <code>WebKitCSSMatrix</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>10<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>11<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 将此 API<code>实现为MSCSSMatrix</code>。在版本11中，加入了别名<code>WebKitCSSMatrix</code>。</p> - -<p>[2] WebKit 将此 API<code>实现为WebKitCSSMatrix</code>。</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx"><code>MSCSSMatrix</code> documentation on MSDN</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html"><code>WebKitCSSMatrix</code> documentation at Safari Developer Library</a></li> - <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla bug 717722: implement <code>(WebKit)CSSMatrix()</code></a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/element/index.html b/files/zh-cn/conflicting/web/api/element/index.html deleted file mode 100644 index 51c660e9ce..0000000000 --- a/files/zh-cn/conflicting/web/api/element/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Slotable -slug: conflicting/Web/API/Element -tags: - - API - - Web Components - - 参考 - - 接口 -translation_of: Web/API/Slottable -translation_of_original: Web/API/Slotable -original_slug: Web/API/Slotable ---- -<p>{{APIRef("Shadow DOM")}}</p> - -<p><code>Slotable</code> mixin 定义了允许节点成为 {{htmlelement("slot")}} 元素的内容的特性——下面的特性被包含在 {{domxref("Element")}} 和 {{domxref("Text")}} API 之中。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> - <dd>返回节点所插入的 {{htmlelement("slot")}} 元素。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<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('DOM WHATWG','#slotable','Slotable')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Slotable")}}</p> diff --git a/files/zh-cn/conflicting/web/api/element/localname/index.html b/files/zh-cn/conflicting/web/api/element/localname/index.html deleted file mode 100644 index 6d5f5f26b6..0000000000 --- a/files/zh-cn/conflicting/web/api/element/localname/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Node.localName -slug: conflicting/Web/API/Element/localName -translation_of: Web/API/Node/localName -original_slug: Web/API/Node/localName ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">Summary</h2> -<p>Returns the local part of the qualified name of this node.</p> -<h2 id="Syntax" name="Syntax">Syntax</h2> -<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName -</pre> -<ul> - <li><code>name</code> is the local name as a string (see {{Anch("Notes")}} below for details)</li> -</ul> -<h2 id="Example" name="Example">Example</h2> -<p>(Must be served with XML content type, such as <code>text/xml</code> or <code>application/xhtml+xml</code>.)</p> -<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" - xmlns:svg="http://www.w3.org/2000/svg"> -<head> - <script type="application/javascript"><![CDATA[ - function test() { - var text = document.getElementById('text'); - var circle = document.getElementById('circle'); - - text.value = "<svg:circle> has:\n" + - "localName = '" + circle.localName + "'\n" + - "namespaceURI = '" + circle.namespaceURI + "'"; - } - ]]></script> -</head> -<body onload="test()"> - <svg:svg version="1.1" - width="100px" height="100px" - viewBox="0 0 100 100"> - <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> - </svg:svg> - <textarea id="text" rows="4" cols="55"/> -</body> -</html> -</pre> -<h2 id="Notes" name="Notes">Notes</h2> -<p>The local name of a node is that part of the node's qualified name that comes after the colon. Qualified names are typically used in XML as part of the namespace(s) of the particular XML documents. For example, in the qualified name <code>ecomm:partners</code>, <code>partners</code> is the local name and <code>ecomm</code> is the prefix:</p> -<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> - <ecomm:partners> - <ecomm:partner id="1001">Tony's Syrup Warehouse - </ecomm:partner> - </ecomm:partner> -</ecomm:business> -</pre> - -<div class="note"> - <p><strong>Note:</strong> In {{Gecko("1.9.2")}} and earlier, the property returns the upper-cased version of the local name for HTML elements in HTML DOMs (as opposed to XHTML elements in XML DOMs). In later versions, in compliance with HTML5, the property returns in the case of the internal DOM storage, which is lower case for both HTML elements in HTML DOMs and XHTML elements in XML DOMs. The {{domxref("element.tagName","tagName")}} property continues to return in the upper case for HTML elements in HTML DOMs.</p> -</div> -<p>For nodes of any <a href="/zh-CN/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">type</a> other than <code>ELEMENT_NODE</code> and <code>ATTRIBUTE_NODE</code> <code>localName</code> is always <code>null</code>.</p> -<h2 id="Specification" name="Specification">Specification</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSLocalN">DOM Level 2 Core: Node.localName</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-NodeNSLocalN">DOM Level 3 Core: Node.localName</a></li> -</ul> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li>{{domxref("Node.namespaceURI")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/element/namespaceuri/index.html b/files/zh-cn/conflicting/web/api/element/namespaceuri/index.html deleted file mode 100644 index b2f0fa1e38..0000000000 --- a/files/zh-cn/conflicting/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Node.namespaceURI -slug: conflicting/Web/API/Element/namespaceURI -translation_of: Web/API/Node/namespaceURI -original_slug: Web/API/Node/namespaceURI ---- -<div>{{APIRef("DOM")}}{{obsolete_header}}</div> - -<p><code><strong>Node.namespaceURI</strong></code> 是一个只读属性，返回节点的命名空间URI（namespace URI），如果节点不在一个命名空间中，则返回 <code>null</code>。当节点是文档节点时，返回当前文档的 XML 命名空间（namespace）。</p> - -<div class="warning"> -<p>在 DOM4 中, 此接口从<code>Node</code> 被移入 {{domxref("Element")}} 和 {{domxref("Attr")}}接口.</p> -</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><em>namespace</em> = <em>node</em>.namespaceURI</pre> - -<h2 id="Example" name="Example">示例</h2> - -<p>在这个示例中, 使用 <a href="/en-US/docs/DOM/Node.localName" title="DOM/Node.localName">localName</a> 和 <code>namespaceURI来检查这个node</code>. 如果 <code>namespaceURI</code> 返回 XUL 命名空间并且 <code>localName</code> 返回 "browser", 说明这个节点属于 XUL <code><browser/></code>.</p> - -<pre class="brush:js">if (node.localName == "browser" && - node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { - // this is a XUL browser -}</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p>这不是一个计算值，它是基于检查范围内的命名空间声明的名称空间查找的结果。节点的命名空间URI在节点创建时被固定。</p> - -<p>在Firefox 3.5或更早的版本中，HTML文档中HTML元素的名称空间URI是<code>null</code>。在之后的版本中，由<code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> 作为XHTML,符合HTML5. {{gecko_minversion_inline("1.9.2")}}</p> - -<p>除了<code>ELEMENT_NODE</code> a和 <code>ATTRIBUTE_NODE</code> 以外的 <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node/NodeType/Node.nodeType">nodeType</a> 中 node 的 <code>namespaceURI</code> 永远是<code>null</code>.</p> - -<p>你可以使用DOM2的方法 <a href="/en-US/docs/DOM/document.createElementNS" title="DOM/document.createElementNS">document.createElementNS</a> 来创建一个有特殊 <code>namespaceURI</code> 的元素.</p> - -<p>在<a class="external" href="http://www.w3.org/TR/xml-names11/">XML的命名空间</a>中，属性不会从它附加到的元素继承它的命名空间。如果属性未显式地给出命名空间，则它没有命名空间.</p> - -<p>DOM本身不处理或执行命名空间验证, 因此应该有由DOM应用程序进行必要的验证。请注意，命名空间前缀一旦与特定节点关联，则不能更改.</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>当设置为 <code>null</code> 是指定动作.</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>初始化</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>是否支持</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}}46.0<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> - {{CompatNo}} {{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>是否支持</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> - {{CompatNo}} {{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 从DOM4标准开始, 此接口被移入{{domxref("Element")}} 和 {{domxref("Attr")}} 接口.</p> - -<p>[2] 在 Gecko 5.0 之前 {{geckoRelease("5.0")}}, 这是一个读写属性; 从 Gecko 5.0 起,这是一个只读属性, 符合标准.</p> - -<h2 id="参考">参考</h2> - -<ul> - <li>{{domxref("Node.localName")}}</li> - <li>{{domxref("Node.prefix")}}</li> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Attr.namespaceURI")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/element/prefix/index.html b/files/zh-cn/conflicting/web/api/element/prefix/index.html deleted file mode 100644 index 06c46e0ad9..0000000000 --- a/files/zh-cn/conflicting/web/api/element/prefix/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Node.prefix -slug: conflicting/Web/API/Element/prefix -translation_of: Web/API/Node/prefix -original_slug: Web/API/Node/prefix ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p><code>prefix属性会</code>返回当前节点的命名空间前缀,如果没有指定命名空间前缀,则返回<code>null</code>,该属性只读.</p> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre class="syntaxbox"><var>string</var> = element.prefix -</pre> -<h2 id="Examples" name="Examples">示例</h2> -<p>下面的代码将弹出"x".</p> -<pre class="brush:xml"><x:div onclick="alert(this.prefix)"/> -</pre> -<h2 id="Notes" name="Notes">附注</h2> -<p>该属性只在一个解析命名空间前缀的文档中可用,也就是说,只有在文档的MIME类型为XML,XHTML,XUL时可用,在HTML文档中不可用.</p> -<h2 id="Specification" name="Specification">规范</h2> -<ul> - <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (introduced in DOM2)</li> -</ul> -<h2 id="浏览器兼容性">浏览器兼容性</h2> -<div> - {{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - <p>在Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)之前,该属性是可写的; 之后,是只读的.</p> - </td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - <p>P在Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)之前,该属性是可写的; 之后,是只读的.</p> - </td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<p></p> diff --git a/files/zh-cn/conflicting/web/api/element_861159909c20acebf8e506c3bb0e2f7e/index.html b/files/zh-cn/conflicting/web/api/element_861159909c20acebf8e506c3bb0e2f7e/index.html deleted file mode 100644 index 54ae327dd2..0000000000 --- a/files/zh-cn/conflicting/web/api/element_861159909c20acebf8e506c3bb0e2f7e/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: NonDocumentTypeChildNode -slug: conflicting/Web/API/Element_861159909c20acebf8e506c3bb0e2f7e -tags: - - API - - DOM - - NonDocumentTypeChildNode - - 参考 - - 接口 -translation_of: Web/API/NonDocumentTypeChildNode -original_slug: Web/API/NonDocumentTypeChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>NonDocumentTypeChildNode</strong></code> 接口包含专属于某些（特殊） {{domxref("Node")}} 对象的方法，这些对象可以拥有父对象，但不适用于 {{domxref("DocumentType")}} 接口。</p> - -<p><code>NonDocumentTypeChildNode</code> 是一个裸接口（raw interface），无法创建拥有此类型的对象；它是由 {{domxref("Element")}}，和 {{domxref("CharacterData")}} 对象实现的。</p> - -<h2 id="属性">属性</h2> - -<p class="syntaxbox"><em>此接口没有继承属性。</em></p> - -<dl> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p class="syntaxbox"><em>此接口既没有继承方法，又没有专有方法。</em></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('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br> - The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NonDocumentTypeChildNode")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div> - </li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/event/composedpath/index.html b/files/zh-cn/conflicting/web/api/event/composedpath/index.html deleted file mode 100644 index 525b27f4b8..0000000000 --- a/files/zh-cn/conflicting/web/api/event/composedpath/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Event.deepPath -slug: conflicting/Web/API/Event/composedPath -translation_of: Web/API/Event/composedPath -translation_of_original: Web/API/Event/deepPath -original_slug: Web/API/Event/deepPath ---- -<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p> - -<p><span class="seoSummary">{{domxref("Event")}}的<strong><code>deepPath</code></strong> 属性返回事件冒泡过程所有经过的节点所构成的{{jsxref("Array")}}数组</span></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">var <em>nodes</em>[] = Event.deepPath</pre> - -<h3 id="返回值">返回值</h3> - -<p>一组节点 构成的{{jsxref("Array")}}数组</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('Shadow DOM','#widl-Event-deepPath-sequence-EventTarget','deepPath')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(53.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(53.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(53.0)}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html b/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html deleted file mode 100644 index 0d43c26ea1..0000000000 --- a/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 为这个EventTarget附加事件. -slug: conflicting/Web/API/EventTarget/addEventListener -tags: - - Junk -translation_of: Web/API/EventTarget/addEventListener -translation_of_original: Web/API/EventTarget/attachEvent -original_slug: Web/API/EventTarget/attachEvent ---- -<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html b/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html deleted file mode 100644 index f28ce6bc9a..0000000000 --- a/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: EventTarget.fireEvent() -slug: conflicting/Web/API/EventTarget/dispatchEvent -translation_of: Web/API/EventTarget/dispatchEvent -translation_of_original: Web/API/EventTarget/fireEvent -original_slug: Web/API/EventTarget/fireEvent ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="概述">概述</h2> - -<p>这是微软IE浏览器用以替代{{domxref("EventTarget.dispatchEvent()")}}的私有方法，与{{domxref("EventTarget.dispatchEvent()")}}不同的是通过<code>fireEvent()</code> 触发的事件不会触发事件的默认行为，例如，通过fireEvent()触发<input type="checkbox">的点击事件并不会切换checkbox的选中状态</p> - -<p>语法</p> - -<pre class="syntaxbox"><em>cancelled</em> = <em>target</em>.fireEvent(<em>eventNameWithOn</em>, <em>event</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>要触发事件的元素</dd> - <dt>eventNameWithOn</dt> - <dd>要触发事件的名字，前缀为“on”，例如，可以用过"onclick"来触发点击事件</dd> - <dt>event</dt> - <dd>要触发的事件对象</dd> - <dt>cancelled</dt> - <dd>布尔值，事件是否被事件句柄取消</dd> -</dl> - -<h2 id="规范">规范</h2> - -<p>无此部分的规范</p> - -<p>微软的描述： <a href="https://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx">has a description on MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 到 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: fireEvent()在IE11+已经不再支持，{{domxref("EventTarget.dispatchEvent()")}}在IE9+已经支持</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="http://help.dottoro.com/ljvtddtm.php">Dottoro Web Reference article</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html b/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html deleted file mode 100644 index 4331abb35c..0000000000 --- a/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: EventTarget.detachEvent() -slug: conflicting/Web/API/EventTarget/removeEventListener -tags: - - API - - DOM - - Method - - Non-standard -translation_of: Web/API/EventTarget/removeEventListener -translation_of_original: Web/API/EventTarget/detachEvent -original_slug: Web/API/EventTarget/detachEvent ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="简介">简介</h2> - -<p>这是Microsoft Internet Explorer专有的用于替代标准的 {{domxref("EventTarget.removeEventListener()")}} 的方法。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>将要移除事件的DOM节点</dd> - <dt>eventNameWithOn</dt> - <dd>将要移除的事件名，以“on”为前缀（例如它是一个事件处理程序）。 例如，您可以使用“onclick”移除点击事件的事件处理程序。</dd> - <dt>callback</dt> - <dd>注销事件后的回调函数</dd> -</dl> - -<h2 id="详细">详细</h2> - -<p>任何规范没有此部分。</p> - -<p>微软在 <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">MSDN</a> 上有相关描述。</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 至 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>detachEvent()</code> 在 IE11+ 中不再支持。 {{domxref("EventTarget.removeEventListener()")}} 在 IE9+ 中支持。</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ domxref("EventTarget.attachEvent()") }}</li> - <li>{{ domxref("EventTarget.fireEvent()") }}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html b/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html deleted file mode 100644 index 8322c91998..0000000000 --- a/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: File System API guide -slug: conflicting/Web/API/File_and_Directory_Entries_API/Introduction -translation_of: Web/API/File_and_Directory_Entries_API/Introduction -translation_of_original: WebGuide/API/File_System -original_slug: WebGuide/API/File_System ---- -<p>{{ SeeCompatTable() }}</p> -<p>The File System API simulates a local file system that web apps can navigate around. You can develop apps that can read, write, and create files and directories in a virtual, sandboxed file system.</p> -<p>The asynchronous API methods return without blocking the calling thread. The asynchronous API doesn't give you data by returning values; instead, you have to pass a callback function. The synchronous API is intended to be used inside <a href="/en/DOM/Worker" title="Worker">WebWorkers</a>.</p> -<p>For an overview of the File System API, see the following articles:</p> -<p>{{ListSubpages}}</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Asynchronous API</td> - <td>13 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>15 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>Synchronous API</td> - <td>13 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>15 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Asynchronous API</td> - <td>{{ CompatNo() }}</td> - <td>0.16{{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>14 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>Synchronous API</td> - <td>{{ CompatNo() }}</td> - <td>0.16{{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>14 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> - </table> -</div> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/Web/Reference/File_System_API" title="/en-US/docs/Web/Reference/File_System_API">File System API reference</a></li> - <li>Specification: {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/geolocation/index.html b/files/zh-cn/conflicting/web/api/geolocation/index.html deleted file mode 100644 index e38bc3e6b7..0000000000 --- a/files/zh-cn/conflicting/web/api/geolocation/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: NavigatorGeolocation -slug: conflicting/Web/API/Geolocation -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation -original_slug: Web/API/NavigatorGeolocation ---- -<p>{{APIRef("Geolocation API")}}</p> - -<p><code><strong>NavigatorGeolocation</strong></code> contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p> - -<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation. </a></li> -</ul> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html deleted file mode 100644 index d12e49345d..0000000000 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Element.ongotpointercapture -slug: conflicting/Web/API/GlobalEventHandlers/ongotpointercapture -tags: - - API - - DOM - - Element - - Event Handler - - Pointer Events - - Property - - Reference - - 事件句柄 - - 元素 - - 属性 - - 引用 - - 指针事件 -translation_of: Web/API/GlobalEventHandlers/ongotpointercapture -translation_of_original: Web/API/Element/ongotpointercapture -original_slug: Web/API/Element/ongotpointercapture ---- -<p>{{ ApiRef("DOM") }}</p> - -<p><code>ongotpointercapture</code> 是一个{{domxref("Element")}} 接口的{{event("Event_handlers", "event handler")}} 属性，返回一个{{event("gotpointercapture")}} 事件类型的事件句柄 (function) .</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">var gotCaptureHandler = target.ongotpointercapture; -</pre> - -<h3 id="Return_Value" name="Return_Value">Return value</h3> - -<dl> - <dt><code>gotCaptureHandler</code></dt> - <dd>元素 <code>target</code> 的gotpointercapture 事件句柄。 .</dd> -</dl> - -<h2 id="Example">Example</h2> - -<pre class="brush: js"><html> -<script> -function overHandler(ev) { - // Determine the target event's gotpointercapture handler - var gotCaptureHandler = ev.target.ongotpointercapture; -} -function init() { - var el=document.getElementById("target"); - el.onpointerover = overHandler; -} -</script> -<body onload="init();"> -<div id="target"> Touch me ... </div> -</body> -</html> -</pre> - -<h2 id="Specifications" name="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('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>无稳定版</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> - <td>{{CompatIE("10")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatIE("10")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementation withdrawn. See {{Bug("1166347")}}.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{ event("gotpointercapture") }}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html deleted file mode 100644 index 2a1afdf2ac..0000000000 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: window.onmouseup -slug: conflicting/Web/API/GlobalEventHandlers/onmouseup -translation_of: Web/API/GlobalEventHandlers/onmouseup -translation_of_original: Web/API/Window/onmouseup -original_slug: Web/API/Window/onmouseup ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>当前窗口的mouseup事件的事件句柄.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">window.onmouseup = <em>funcRef</em>; -</pre> -<h3 id="Parameters" name="Parameters">参数</h3> -<ul> - <li><code>funcRef</code> 是个函数引用</li> -</ul> -<h3 id="Example" name="Example">例子</h3> -<pre>window.onmouseup = doFunc; -</pre> -<pre><html> -<head> - -<title>onmouseup测试</title> - -<script type="text/javascript"> - -window.onmouseup = mouseup; - -function mouseup() -{ - alert("检测到mouseup事件!"); -} -</script> -</head> - -<body> -<p>在页面上按下鼠标中某个键,保持几秒后松开.mouseup事件会在你松开鼠标时触发</p> -</body> -</html> -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p>没有任何公开的标准</p> -<p>{{ languages( { "ja": "ja/DOM/window.onmouseup" ,"en": "en/DOM/window.onmouseup" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html deleted file mode 100644 index 9bd58ff3f5..0000000000 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: window.onscroll -slug: conflicting/Web/API/GlobalEventHandlers/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: Web/API/Window/onscroll -original_slug: Web/API/Window/onscroll ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>为当前页面的页面滚动事件添加事件处理函数.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">window.onscroll = <em>funcRef</em>; -</pre> -<ul> - <li><code>funcRef</code> 是个函数类型的对象引用或者匿名函数.</li> -</ul> -<h3 id="Example" name="Example">例子</h3> -<pre class="brush: js">window.onscroll = function (e) { - // 当页面的滚动条滚动时,会执行这里的代码 -} -</pre> -<pre class="brush: html"><html> -<head> - -<title>onscroll test</title> - -<script type="text/javascript"> - -window.onscroll = scroll; - -function scroll() -{ - alert("检测到页面滚动事件:"+window.pageXOffset+" "+window.pageYOffset); - // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高. -} -</script> -</head> - -<body> -<p>Resize the window</p> -<p>to a very small size,</p> -<p>and use the scrollbars</p> -<p>to move around the page content</p> -<p>in the window.</p> -</body> -</html> -</pre> -<h3 id="Notes" name="Notes">备注</h3> -<p>{{ Bug("189308") }}, 在旧版本的Gecko中(Gecko 1.8/Firefox 1.5之前), scroll 事件只会在用户拖动滚动条时发生,使用方向键和鼠标滚轮滚动页面则不会触发该事件.</p> -<p>当 window.scrollX/scrollY 不为 0时,意味着用户或者网页脚本已经执行了窗口的滚动行为.</p> -<h3 id="Specification" name="Specification">规范</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> -</ul> -<p>{{ languages( { "en": "en/DOM/window.onscroll"} ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html deleted file mode 100644 index 7579ce0d36..0000000000 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: GlobalEventHandlers.ontouchmove -slug: conflicting/Web/API/GlobalEventHandlers/ontouchmove -translation_of: Web/API/GlobalEventHandlers/ontouchmove -translation_of_original: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove -original_slug: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</p> - -<div class="note"> -<p><strong>注意：这个属性还没有正式的标准。它在 </strong>{{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 说明书里被规定且不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性没有被广泛应用。</p> -</div> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="eval">var moveHandler = someElement.ontouchmove; -</pre> - -<h3 id="Return_Value" name="Return_Value">Return value</h3> - -<dl> - <dt><code>moveHandler</code></dt> - <dd>The <em>touchmove</em> event handler for element <code>someElement</code>.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>This example shows two ways to use <em>ontouchmove</em> to set an element's <em>touchmove</em> event handler.</p> - -<pre class="brush: js"><html> -<script> -function moveTouch(ev) { - // Process the event -} -function init() { - var el=document.getElementById("target1"); - el.ontouchmove = moveTouch; -} -</script> -<body onload="init();"> -<div id="target1"> Touch me ... </div> -<div id="target2" ontouchmove="moveTouch(event)"> Touch me ... </div> -</body> -</html> -</pre> - -<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('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}</td> - <td>{{Spec2('Touch Events 2')}}</td> - <td>Non-stable version.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ event("touchmove") }}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html b/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html deleted file mode 100644 index 54458e93a2..0000000000 --- a/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Node.outerText -slug: conflicting/Web/API/HTMLElement/outerText -tags: - - Node.outerText -translation_of: Web/API/HTMLElement/outerText -translation_of_original: Web/API/Node/outerText -original_slug: Web/API/Node/outerText ---- -<p>请参阅 {{domxref("HTMLElement.outerText")}}</p> diff --git a/files/zh-cn/conflicting/web/api/htmlinputelement/index.html b/files/zh-cn/conflicting/web/api/htmlinputelement/index.html deleted file mode 100644 index 82a91a1271..0000000000 --- a/files/zh-cn/conflicting/web/api/htmlinputelement/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: HTMLInputElement.mozSetFileNameArray -slug: conflicting/Web/API/HTMLInputElement -translation_of: Web/API/HTMLInputElement -translation_of_original: Web/API/HTMLInputElement/mozSetFileNameArray -original_slug: Web/API/HTMLInputElement/mozSetFileNameArray ---- -<div> -<div> -<div> -<div>{{APIRef("HTML DOM")}}</div> -</div> -</div> -{{gecko_minversion_header("1.9.2")}}</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>设置一个HTML <code>input</code>元素中选中的若干文件的路径以及文件名.</p> - -<div class="note"><strong>注:</strong> 该方法是Gecko私有的方法,在其他浏览器中不可用,且是个特权方法,不能在普通网页中使用.</div> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">inputElement.mozSetFileNameArray(<em>aFileNames, </em><em>aLength</em>); -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>aFileNames</code> 指定给该元素的若干个文件的文件名路径以及文件名.</li> - <li><code>aLength </code>需要指定文件的个数(<code>通常是</code>数组<code>aFileNames</code>的长度).</li> -</ul> - -<h3 id="Example" name="Example">示例</h3> - -<pre class="brush: js">var fileArray = {"/foo/bar.txt", "/foo/foosball.txt"}; - -inputElement.mozSetFileNameArray(fileArray, fileArray.length); -</pre> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>非标准,Mozilla私有方法.</p> - -<h3 id="相关链接">相关链接</h3> - -<ul> - <li><a href="/zh-CN/DOM/Input" title="zh-CN/DOM/Input"><code>Input</code></a></li> - <li><a href="/zh-CN/DOM/Input.mozGetFileNameArray" title="zh-CN/DOM/Input.mozGetFileNameArray"><code>Input.mozGetFileNameArray</code></a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html deleted file mode 100644 index 1b77441e5e..0000000000 --- a/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: abort -slug: conflicting/Web/API/HTMLMediaElement/abort_event -tags: - - abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort -original_slug: Web/Events/abort ---- -<p>当一个资源的加载已中止时，将触发 <strong>abort</strong>事件。</p> - -<div class="note"> -<p>译者注：这个事件只在 IE 支持，试了最新的 Chrome、FireFox、Safari 都不支持。</p> -</div> - -<h2 id="常规信息">常规信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">从UI组件产生为UIEvent , 否则为Event .</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> - <dd style="margin: 0 0 0 120px;">元素（Element）</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">属性</th> - <th scope="col">类型</th> - <th scope="col">描述</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否冒泡.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否可取消默认行为.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/zh-CN/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/zh-CN/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (该文档的<code>window</code>对象 )</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/conflicting/web/api/index.html b/files/zh-cn/conflicting/web/api/index.html deleted file mode 100644 index 333f98f0a4..0000000000 --- a/files/zh-cn/conflicting/web/api/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Element.name -slug: conflicting/Web/API -translation_of: Web/API -translation_of_original: Web/API/Element/name -original_slug: Web/API/Element/name ---- -<p>{{ APIRef() }}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><strong>name</strong> 获取或设置一个 DOM 对象的 <code>name</code> 属性；它只能应用于下列元素：{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p>需要注意的是，<code>name</code> 属性在其他类型元素上不存在。它不是 {{domxref("Element")}} 或 {{domxref("HTMLElement")}} 接口的一个属性。</p> -</div> - -<p>Name 可被使用于 {{ domxref("document.getElementsByName()") }} 方法，<a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> 以及 the form <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elements</a> collection。当使用于表单（form）或表单元素（form elements collection）时，可能返回一个单独的元素或一个元素集合。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // 获取表单中第一个元素的引用 - var formElement = document.forms['formA'].elements[0]; - - // 设置一个 name - formElement.name = 'inputA'; - - // 显示 input 的 value 值 - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p>在 IE6 中，使用 {{domxref("document.createElement()")}} 方法创建的 DOM 对象的 name 属性不能被更改。</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<p>W3C DOM 2 HTML Specification:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html deleted file mode 100644 index 382f62201d..0000000000 --- a/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: event.altKey -slug: conflicting/Web/API/MouseEvent/altKey -translation_of: Web/API/MouseEvent/altKey -translation_of_original: Web/API/event.altKey -original_slug: Web/API/event.altKey ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>表明当事件触发时,ALT键是否处于按下的状态.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">event.altKey -</pre> -<h3 id="例子">例子</h3> -<pre><code><em>var bool</em> = event.altKey;</code> -</pre> -<p>如果当事件触发时,ALT键处于按下的状态,<code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">则bool</code>的值为<code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">true,否则为</code><code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">false</code>.</p> -<pre class="brush: html"><html> -<head> -<title>altKey 示例</title> - -<script type="text/javascript"> - -function showChar(e){ - alert( - "按下的键: " + String.fromCharCode(e.charCode) + "\n" - + "charCode: " + e.charCode + "\n" - + "是否按下ALT键: " + e.altKey + "\n" - ); -} - -</script> -</head> - -<body onkeypress="showChar(event);"> -<p> -按下一个字符键,尝试同时按下ALT键.<br /> -你也可以同时按下SHIFT键和ALT键. -</p> -</body> -</html> -</pre> -<h3 id="规范">规范</h3> -<p>DOM Level 2 Events - property of MouseEvent object</p> -<p>{{ languages( { "ja": "ja/DOM/event.altKey", "pl": "pl/DOM/event.altKey", "en": "en/DOM/event.altKey" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/button/index.html b/files/zh-cn/conflicting/web/api/mouseevent/button/index.html deleted file mode 100644 index 1a3142e74e..0000000000 --- a/files/zh-cn/conflicting/web/api/mouseevent/button/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: event.button -slug: conflicting/Web/API/MouseEvent/button -translation_of: Web/API/MouseEvent/button -translation_of_original: Web/API/event.button -original_slug: Web/API/event.button ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>表明当前事件是由鼠标的哪个按键触发的.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre>event.button -</pre> -<h3 id="例子">例子</h3> -<pre>var buttonCode = event.button; -</pre> -<p>该属性返回一个整数值,代表触发当前事件的鼠标按键.在通常情况下,对应关系如下:</p> -<ul> - <li>0 为 左键点击.</li> - <li>1 为 中键点击.</li> - <li>2 为 右键点击.</li> -</ul> -<div class="note"> - <strong>注意:</strong> IE不遵守 See <a class="external" href="http://www.quirksmode.org/js/events_properties.html#button" title="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</div> -<p>The order of buttons may be different depending on how the pointing device has been configured.</p> -<h3 id="Example" name="Example">例子</h3> -<pre class="brush: html"><script> -var whichButton = function (e) { - // 处理不同的事件模型 - var e = e || window.event; - var btnCode; - - if ('object' === typeof e) { - btnCode = e.button; - - switch (btnCode) { - case 0: - alert('你按了左键.'); - break; - case 1: - alert('你按了中键.'); - break; - case 2: - alert('你按了右键.'); - break; - default: - alert('未知按键: ' + btnCode); - } - } -} -</script> - -<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">请点击鼠标...</button> -</pre> -<h3 id="Notes" name="Notes">备注</h3> -<p>Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.</p> -<p>Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.</p> -<h3 id="Specification" name="Specification">规范</h3> -<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> -<h3 id="浏览器兼容性">浏览器兼容性</h3> -<p>Based on Jan Wolter's <a class="external" href="http://unixpapa.com/js/mouse.html">JavaScript Madness: Mouse Events</a>.</p> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Gecko</th> - <th>Webkit</th> - <th>Internet Explorer</th> - <th>Opera</th> - </tr> - <tr> - <td>Basic support</td> - <td>1</td> - <td>523</td> - <td>9</td> - <td>8</td> - </tr> - </tbody> - </table> -</div> -<p>{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" ,"en": "en/DOM/event.button" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html b/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html deleted file mode 100644 index aed477e044..0000000000 --- a/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: event.relatedTarget -slug: conflicting/Web/API/MouseEvent/relatedTarget -translation_of: Web/API/MouseEvent/relatedTarget -translation_of_original: Web/API/event.relatedTarget -original_slug: Web/API/event.relatedTarget ---- -<h2 id="Summary" name="Summary"> </h2> - -<p>{{APIRef("DOM")}}</p> - -<h2 id="Summary" name="Summary">简要</h2> - -<p>为事件标识第二目标</p> - -<h2 id="Summary" name="Summary">描述</h2> - -<p><code>relatedTarget</code> 属性用于在一个事件中查找另外一个元素。有些事件比如 <code>mouseover</code> 通常侧重处理一个特定的目标，而有些有也可能会涉及到第二目标，比如当目标退出第一目标的 <code>mouseover</code> 事件.</p> - -<h2 id="事件">事件</h2> - -<p>只有 <code>MouseEvent</code>s 有这个属性，而且这些些只在特定的 <code>MouseEvent</code>s 事件中有效：</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">事件名</td> - <td class="header"><code>relatedTarget</code> role</td> - </tr> - <tr> - <td>focusin</td> - <td>哪个 {{domxref("EventTarget")}} 失去焦点</td> - </tr> - <tr> - <td>focusout</td> - <td>哪个 {{domxref("EventTarget")}} 获得焦点</td> - </tr> - <tr> - <td>mouseenter</td> - <td>鼠标从哪个 {{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>mouseleave</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - <tr> - <td>mouseout</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - <tr> - <td>mouseover</td> - <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>dragenter</td> - <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>dragexit</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - </tbody> -</table> - -<h2 id="Example" name="Example">示例</h2> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - -<style> -div > div { - height: 128px; - width: 128px; -} -#top { background-color: red; } -#bottom { background-color: blue; } -</style> - -<script> -function outListener(event) { - console.log("exited " + event.target.id + " for " + event.relatedTarget.id); -} - -function overListener(event) { - console.log("entered " + event.target.id + " from " + event.relatedTarget.id); -} - -function loadListener() { - var top = document.getElementById("top"), - bottom = document.getElementById("bottom"); - - top.addEventListener("mouseover", overListener); - top.addEventListener("mouseout", outListener); - bottom.addEventListener("mouseover", overListener); - bottom.addEventListener("mouseout", outListener); -} -</script> - -</head> - -<body onload="loadListener();"> - -<div id="outer"> - <div id="top"></div> - <div id="bottom"></div> -</div> - -</body> -</html> -</pre> - -<p><a href="https://jsfiddle.net/uTe99">在JSFiddle中查看</a></p> - -<h2 id="Specification" name="Specification">Specification</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-relatedTarget">DOM Level 2 Events: MouseEvent.relatedTarget</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/DOM/event/Comparison_of_Event_Targets" title="DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html deleted file mode 100644 index d61d354b15..0000000000 --- a/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: event.shiftKey -slug: conflicting/Web/API/MouseEvent/shiftKey -translation_of: Web/API/MouseEvent/shiftKey -translation_of_original: Web/API/event.shiftKey -original_slug: Web/API/event.shiftKey ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>表明当事件触发时,SHIFT键是否处于按下状态.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval"><em>var bool</em> = event.shiftKey; -</pre> -<p><code>bool</code> 的值为 <code>true</code> 或 <code>false</code></p> -<h3 id="Example" name="Example">例子</h3> -<pre><html> -<head> -<title>shiftKey example</title> - -<script type="text/javascript"> - -function showChar(e){ - alert( - "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" - + "charCode: " + e.charCode + "\n" - + "SHIFT key pressed: " + e.shiftKey + "\n" - + "ALT key pressed: " + e.altKey + "\n" - ); -} - -</script> -</head> - -<body onkeypress="showChar(event);"> -<p><span>按下一个字符键,尝试同时按下</span>SHIFT<span>键.</span><br /> -<span>你也可以同时按下SHIFT键和ALT键.</span></p> -</body> -</html> -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p> -<p>{{ languages( { "pl": "pl/DOM/event.shiftKey" ,"en": "en/DOM/event.shiftKey" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/api/node/getrootnode/index.html b/files/zh-cn/conflicting/web/api/node/getrootnode/index.html deleted file mode 100644 index ea5deb0b98..0000000000 --- a/files/zh-cn/conflicting/web/api/node/getrootnode/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Node.rootNode -slug: conflicting/Web/API/Node/getRootNode -tags: - - API - - DOM - - Node - - Property - - Reference - - rootNode -translation_of: Web/API/Node/getRootNode -translation_of_original: Web/API/Node/rootNode -original_slug: Web/API/Node/rootNode ---- -<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> - -<p><code><strong>Node.rootNode</strong></code> 是 {{domxref("Node")}} 的一个只读属性, 返回该节点所在 DOM 数的根节点(最高节点). 此属性是通过 {{domxref("Node.parentNode")}} 属性循环查找直到找到根节点.</p> - -<div class="warning"> -<p><strong>注意</strong>: 由于某种原因, 此属性已经被 {{domxref("Node.getRootNode()")}} 方法替代.</p> -</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre><var>rootNode</var> = <em>node</em>.rootNode; -</pre> - -<h3 id="返回值"> 返回值</h3> - -<p>返回 {{domxref("Node")}} 对象.</p> - -<h2 id="Example" name="Example">样例</h2> - -<p>下面是输出<code>body</code>的根节点样例:</p> - -<pre class="brush: js">console.log(document.body.rootNode);</pre> - -<h2 id="Notes" name="Notes">参考</h2> - -<p></p><p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 - <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, - 而不是使用者所预期得到的节点.</p> - - <p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> - 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p><p></p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 此属性已经废弃, 使用{{domxref("Node.getRootNode()")}} 方法替代.</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">样式</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/conflicting/web/api/node/index.html b/files/zh-cn/conflicting/web/api/node/index.html deleted file mode 100644 index d9d33ab197..0000000000 --- a/files/zh-cn/conflicting/web/api/node/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Node.baseURIObject -slug: conflicting/Web/API/Node -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject -original_slug: Web/API/Node/baseURIObject ---- -<div> - {{ApiRef}} {{Non-standard_header}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p><code>baseURIObject</code>属性返回一个代表当前节点(通常是文档节点或元素节点)的基URL的{{Interface("nsIURI")}}对象.该属性类似与{{domxref("Node.baseURI")}},只是它返回的是一个包含更多信息的nsIURI对象,而不只是一个URL字符串.</p> -<p>该属性在所有类型的节点上都可用(HTML,XUL,SVG,MathML等),但脚本本身必须要有 UniversalXPConnect权限(XUL默认有这个权限,HTML没有).</p> -<p>查看{{domxref("Node.baseURI")}}了解基URL(base URL)是什么.</p> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject -</pre> -<h2 id="Notes" name="Notes">附注</h2> -<p>该属性只读,尝试为它赋值会抛出异常. 此外,这个属性只能从特权代码中访问.</p> -<h2 id="Specification" name="Specification">规范</h2> -<p>不属于任何规范,mozilla私有属性.</p> diff --git a/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html deleted file mode 100644 index 09b744dc95..0000000000 --- a/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Node.nodePrincipal -slug: conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal -original_slug: Web/API/Node/nodePrincipal ---- -<div> - {{APIRef}}{{Non-standard_header}} - <p>The <code><strong>Node.nodePrincipal</strong></code> read-only property returns the {{Interface("nsIPrincipal")}} object representing current security context of the node.</p> - <p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> - <h2 id="Syntax" name="Syntax">Syntax</h2> - <pre class="syntaxbox"><i>principalObj</i> = element.nodePrincipal -</pre> - <h2 id="Notes" name="Notes">Notes</h2> - <p>This property is read-only; attempting to write to it will throw an exception. In addition, this property may only be accessed from privileged code.</p> - <h2 id="Specification" name="Specification">Specification</h2> - <p>Not in any specification.</p> -</div> -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/push_api/index.html b/files/zh-cn/conflicting/web/api/push_api/index.html deleted file mode 100644 index 6f6f75ce4f..0000000000 --- a/files/zh-cn/conflicting/web/api/push_api/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Using the Push API -slug: conflicting/Web/API/Push_API -tags: - - Push - - Push API - - Service Workers - - Using the Push API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API -original_slug: Web/API/Push_API/Using_the_Push_API ---- -<p class="summary"><span>W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> </span>为开发人员在Web应用程序中提供了一些令人兴奋的新功能：本文提供了一个简单的演示，以获取Push通知的设置和运行。</p> - -<p>在任何时候——不论这一应用是否处于激活状态——从服务器向客户端推送消息或者通知的能力，是一种原生应用已经享受了一段时间的能力。现在 Web 应用也拥有了这一能力。桌面系统上的 Firefox 43+ 和 Chrome 42+ 已经支持 Push 的大部分功能，移动平台也很可能在不久的将来提供支持。 {{domxref("PushMessageData")}} 当前只在 Firefox Nightly (44+) 中提供实验性的支持，并且这一实现也可能会变更。</p> - -<div class="note"> -<p><strong>Note</strong>: Firefox OS 的早期版本使用了这一 API 的一个 proprietary 版本，叫做 <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a> ，现在已经被 Push API 标准废弃。</p> -</div> - -<h2 id="Demo_the_basis_of_a_simple_chat_server_app">Demo: the basis of a simple chat server app</h2> - -<p>我们创建的这一 demo 是一个简单的聊天应用。它提供了一个表单，用来输入聊天内容，还有一个按钮，用来订阅（subscribe）推送的消息。按下按钮后，你将订阅这一消息推送服务，服务器会记录你的信息，同时当前所有的订阅者会收到一个推送消息，告诉他们有人订阅。</p> - -<p>此时，新订阅者的名字会出现在订阅者列表上，同时界面上会出现一个文本域和一个提交按钮，允许订阅者发送消息。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>要运行这一 demo，请参阅 <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>。请注意，想要在 Chrome 中使用这一应用并且以一个更合理的方式运行，服务器端还需要大量的工作。然而，推送的细节解释起来特别麻烦，我们先概览这个推送接口是怎么运作的，然后再回来详细了解。</p> - -<h2 id="Technology_overview">Technology overview</h2> - -<p>这一部分提供了这一例子中用到的技术的概览。</p> - -<p>Web Push 消息是 <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> 技术族的一部分；特别的，一个service worker想要接收消息，就必须在一个页面上被激活。 在 service worker 接收到推送的消息后，你可以决定如何显示这一消息。你可以：</p> - -<ul> - <li>发送一个 <a href="/en-US/docs/Web/API/Notifications_API">Web notification</a> ，弹出一个系统通知提醒用户。这一操作需要发送推送消息的权限。</li> - <li>通过 {{domxref("MessageChannel")}} 将消息送回主页面。</li> -</ul> - -<p>通常这两者可以结合使用，下面的 demo 显示了两者的特点。</p> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>注：</strong>你需要在服务器端部署某种形式的代码来处理endpoint数据的加密和发送推送消息的请求。</span> 在我们的Demo里，我们把那些代码放进了一个快速、劣质的服务器代码（a quick-and-dirty server ）里，部署在 <a href="https://nodejs.org/">NodeJS</a> 上。</p> -</div> - -<p>service worker 需要订阅推送消息服务。在订阅服务时，每一个会话会有一个独立的端点（endpoint）。订阅对象的属性({{domxref("PushSubscription.endpoint")}}) 即为端点值。将端点发送给服务器后，服务器用这一值来发送消息给会话的激活的 service worker。不同浏览器需要用不同的推送消息服务器。</p> - -<h3 id="加密（Encryption）">加密（Encryption）</h3> - -<div class="note"> -<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>在通过推送消息发送数据时，数据需要进行加密。数据加密需要通过 {{domxref("PushSubscription.getKey()")}} 方法产生的一个公钥。这一方法在服务器端运行，通过复杂的密码学机制来生成公钥，详情可参阅 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 。以后可能会有更多用于处理推送消息加密的库出现，在这一 demo 中，我们使用 Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Push_workflow_summary">Push workflow summary</h3> - -<p>这里我们总结一下推送消息的实现。在之后的章节中你可以找到这一 demo 代码的更多细节。</p> - -<ol> - <li>请求 web 通知及你所使用的其他功能的权限。</li> - <li>调用 {{domxref("ServiceWorkerContainer.register()")}} ，注册一个 service worker。</li> - <li>使用 {{domxref("PushManager.subscribe()")}} 订阅推送消息。</li> - <li>取得与订阅相关联的 endpoint （{{domxref("PushSubscription.endpoint")}}），并且生成一个客户公钥（{{domxref("PushSubscription.getKey()")}}） 。注意 <code>getKey()</code> 是试验性的，只在 Firefox 有效。</li> - <li>将详细信息发送给服务器，服务器可以用这些信息来发送推送消息。这一 demo 使用 {{domxref("XMLHttpRequest")}} ，但你也可以使用 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 。</li> - <li>如果你使用 <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> 来和 service worker 通信，则创建一个新的 message channel ({{domxref("MessageChannel.MessageChannel()")}}) ，并且在 service worker 调用 {{domxref("Worker.postMessage()")}} ，将 <code>port2</code> 发送给 service worker ，以建立 communication channel 。你应该设置一个 listener 来响应从 service worker 发来的消息。</li> - <li>在服务器端，存储端点以及其他在发送推送消息给订阅者时需要的信息（我们使用一个简单的文本文件，但你可以使用数据库，或者其他你喜欢的方式）。在生产环境中，请保护好这些信息，以防恶意的攻击者用这些信息给订阅者推送垃圾消息。</li> - <li>要发送一个推送消息，你需要向端点 URL 发送一个 HTTP <code>POST</code> 。这一请求需要包括一个 TTL 头，用来规定用户离线时消息队列的最大长度。要在请求中包括数据，你需要使用客户公钥进行加密。在我们的 demo 中，我们使用 <a href="https://github.com/marco-c/web-push">web-push</a> 模块来处理困难的部分。</li> - <li>在你的 service worker 中，设置一个 <code>push</code> 事件句柄来响应接收到的推送消息。 - <ol> - <li>如果你想要将一个信道消息发送回主 context（看第6步），你需要先取得之前发送给 service worker 的 <code>port2</code> 的引用 ({{domxref("MessagePort")}}) 。这个可以通过传给 <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}) 的{{domxref("MessageEvent")}} 对象取得。 具体地说，是 <code>ports</code> 属性的索引 0 。 之后你可以用 {{domxref("MessagePort.postMessage()")}} 来向 <code>port1</code> 发送消息 。</li> - <li>如果你想要使用系统通知，可以调用 {{domxref("ServiceWorkerRegistration.showNotification()")}} 。注意，在我们的代码中，我们将其运行在一个 {{domxref("ExtendableEvent.waitUntil()")}} 方法中——这样做将事件的 生命周期（lifetime）扩展到了通知被处理后，使得我们可以确认事情像我们期望的那样进行。<span id="cke_bm_307E" class="hidden"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Building_up_the_demo">Building up the demo</h2> - -<p>让我们浏览一下 demo 的代码，理解一下它是如何工作的。</p> - -<h3 id="The_HTML_and_CSS">The HTML and CSS</h3> - -<p>这个 demo 的 HTML 和 CSS 没有什么需要特别留意的地方。初始化时，HTML包含一个简单的表单、一个按钮和两个列表。按钮用来订阅，两个列表分别显示订阅者和聊天消息。订阅之后，会出现用来输入聊天消息的控件。</p> - -<p>为了对不干扰 Push API 的理解，CSS被设计得非常简单。</p> - -<h3 id="The_main_JavaScript_file">The main JavaScript file</h3> - -<p>JavaScript 明显更加重要。让我们看看主 JS 文件。</p> - -<h4 id="Variables_and_initial_setup">Variables and initial setup</h4> - -<p>开始时，我们声明一些需要使用的变量：</p> - -<pre class="brush: js">var isPushEnabled = false; -var useNotifications = false; - -var subBtn = document.querySelector('.subscribe'); -var sendBtn; -var sendInput; - -var controlsBlock = document.querySelector('.controls'); -var subscribersList = document.querySelector('.subscribers ul'); -var messagesList = document.querySelector('.messages ul'); - -var nameForm = document.querySelector('#form'); -var nameInput = document.querySelector('#name-input'); -nameForm.onsubmit = function(e) { - e.preventDefault() -}; -nameInput.value = 'Bob';</pre> - -<p>首先，是两个布尔变量，一个用来记录 Push 是否被订阅，一个用来记录是否有通知的权限。</p> - -<p>其次，是订阅/取消订阅 {{htmlelement("button")}} 的引用，以及发送消息按钮的引用和输入的引用（订阅成功之后按钮和输入才会创建）。</p> - -<p>接下来，是页面上的三个{{htmlelement("div")}} 元素的引用，在需要插入元素时会用到（比如创建 <em>Send Chat Message</em> 按钮，或者 <em>Messages </em>列表中增加聊天消息时）。</p> - -<p>最后，是 name selection 表单和 {{htmlelement("input")}} 元素的引用。我们给 input 一个默认值，并且使用 <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 方法，让按下回车时不会自动提交表单。</p> - -<p>之后，我们通过 {{domxref("Notification.requestPermission","requestPermission()")}} 请求发送web通知的权限：</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>在 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> 时我们运行一段代码，让应用开始初次加载时的初始化过程。首先我们给 subscribe/unsubscribe 按钮添加 click event listener ，让这一按钮在已经订阅（<code>isPushEnabled为真）</code>时执行 <code>unsubscribe()</code> 函数，否则执行 <code>subscribe()</code> ：</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>之后，我们检查 service workers 是否被支持。如果支持，则用 {{domxref("ServiceWorkerContainer.register()")}} 注册一个 service worker 并且运行 <code>initialiseState()</code> 函数。若不支持，则向控制台输出一条错误信息。</p> - -<pre class="brush: js"> // Check that service workers are supported, if so, progressively - // enhance and add push messaging support, otherwise continue without it. - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('sw.js').then(function(reg) { - if(reg.installing) { - console.log('Service worker installing'); - } else if(reg.waiting) { - console.log('Service worker installed'); - } else if(reg.active) { - console.log('Service worker active'); - } - - initialiseState(reg); - }); - } else { - console.log('Service workers aren\'t supported in this browser.'); - } -}); -</pre> - -<p>接下来是 <code>initialiseState()</code> 函数。查看 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> 可获得有注释的完整源码（简洁起见，此处省略）。</p> - -<p><code>initialiseState()</code> 首先检查 service workers 是否支持 notifications ，如果支持则将 <code>useNotifications</code> 变量设为真。之后检查用户是否允许 said notifications ， push messages 是否支持，并分别进行设置。</p> - -<p>最后，使用 {{domxref("ServiceWorkerContainer.ready()")}} 来检测 service worker 是否被激活并开始运行，会返回一个Promise对象。当这一 promise 对象 resolve 时，我们访问 {{domxref("ServiceWorkerRegistration.pushManager")}} 属性，得到一个 {{domxref("PushManager")}} 对象，再调用该对象的 {{domxref("PushManager.getSubscription()")}}方法，最终获得用来推送消息的订阅对象。当第二个 promise 对象 resolve 时，我们启用 subscribe/unsubscribe 按钮（<code>subBtn.disabled = false;）</code>，并确认订阅对象。</p> - -<p>这样做了之后，订阅的准备工作已经完成了。即使这一应用并没有在浏览器中打开， service worker 也依然可能在后台处于激活状态。如果我们已经订阅，则对UI进行更新，修改按钮的标签，之后将 <code>isPushEnabled 设为真，通过 </code>{{domxref("PushSubscription.endpoint")}} 取得订阅的端点，通过 {{domxref("PushSubscription.getKey()")}} 生成一个公钥，调用<code> updateStatus()</code> 方法与服务器进行通信。</p> - -<p>此外，我们通过 {{domxref("MessageChannel.MessageChannel()")}} 得到一个新的 {{domxref("MessageChannel")}} 对象，并通过 {{domxref("ServiceworkerRegistration.active")}} 得到一个激活的 service worker 的引用，然后通过 {{domxref("Worker.postMessage()")}} 在主浏览器 context 和 service worker 间建立起一个信道。浏览器 context 接收 {{domxref("MessageChannel.port1")}} 中的消息。当有消息到来时，我们使用 <code>handleChannelMessage()</code> 方法来决定如何处理数据（参阅{{anch("Handling channel messages sent from the service worker")}}）。</p> - -<h4 id="订阅和取消订阅（Subscribing_and_unsubscribing）">订阅和取消订阅（Subscribing and unsubscribing）</h4> - -<p>现在把我们的注意力转到 <code>subscribe()</code> 和 <code>unsubscribe()</code> 函数上，它们用来订阅或取消订阅 来自服务器的通知。</p> - -<p>在订阅的时候，我们使用 {{domxref("ServiceWorkerContainer.ready()")}}方法再一次确认service worker处于激活状态并且可以使用了。当 promise 成功执行，我们用{{domxref("PushManager.subscribe()")}}方法订阅服务。如果订阅成功，我们会得到一个 {{domxref("PushSubscription")}} 对象，它携带了endpoint信息 ，并且可以产生（generate）一个公钥的方法 (再多说一点，{{domxref("PushSubscription.endpoint")}}属性和{{domxref("PushSubscription.getKey()")}}方法)，我们要把这两个信息传递给<code>updateStatus()</code> 函数，同时还要传递第三个信息——更新状态的类型（订阅还是不订阅），让它能够把这些必要的细节传递给服务器。</p> - -<p>我们也需要更新我们应用的状态 (设置 <code>isPushEnabled</code> 为<code>true</code>) 和 UI (激活<strong>订阅</strong>或者不订阅的按钮，同时改变标签的显示状态，让用户下一次点击按钮的时候变成<strong>不订阅</strong>的状态或者订阅的状态。)</p> - -<p><code><font face="Open Sans, Arial, sans-serif">不订阅 </font>unsubscribe()</code> 函数在结构上和订阅函数相识，然而基本上它们做的是完全相反的事； 最值得注意的不同是得到当前订阅对象是使用{{domxref("PushManager.getSubscription()")}}方法，而且使用{{domxref("PushSubscription.unsubscribe()")}}方法获得的promise对象。</p> - -<p>在两个函数中也提供了适当的错误处理函数。</p> - -<p><code><font face="Open Sans, Arial, sans-serif">为了节省时间，我们只在下面展示</font>subscribe()的代码；</code>查看全部请点击 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">function subscribe() { - // Disable the button so it can't be changed while - // we process the permission request - - subBtn.disabled = true; - - navigator.serviceWorker.ready.then(function(reg) { - reg.pushManager.subscribe({userVisibleOnly: true}) - .then(function(subscription) { - // The subscription was successful - isPushEnabled = true; - subBtn.textContent = 'Unsubscribe from Push Messaging'; - subBtn.disabled = false; - - // Update status to subscribe current user on server, and to let - // other users know this user has subscribed - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); - updateStatus(endpoint,key,'subscribe'); - }) - .catch(function(e) { - if (Notification.permission === 'denied') { - // The user denied the notification permission which - // means we failed to subscribe and the user will need - // to manually change the notification permission to - // subscribe to push messages - console.log('Permission for Notifications was denied'); - - } else { - // A problem occurred with the subscription, this can - // often be down to an issue or lack of the gcm_sender_id - // and / or gcm_user_visible_only - console.log('Unable to subscribe to push.', e); - subBtn.disabled = false; - subBtn.textContent = 'Subscribe to Push Messaging'; - } - }); - }); -}</pre> - -<h4 id="更新应用和服务器的状态">更新应用和服务器的状态</h4> - -<p><code><font face="Open Sans, Arial, sans-serif">接下来的一个主要的JavaScript函数就是</font>updateStatus()，当订阅和取消订阅的时候，它负责更新UI中与服务器沟通的信息并发送状态更新的请求给服务器。</code></p> - -<p>这个函数做了三件事当中的哪一件事，取决于下面赋值给statusType的类型：</p> - -<ul> - <li><code>subscribe</code>: 一个按钮和和一个聊天信息的input输入框被创建后，就被插入到UI界面里面，然后通过XHR请求发送了一个包含状态信息的字面量对象给服务器，包含了statusType（subscribe）、订阅者的名字（ username of the subscriber）、订阅终端（subscription endpoint）和客户端公钥（client public key）。</li> - <li><code>unsubscribe</code>: 这个和订阅基本上是相反的——聊天的按钮和输入框被移除，同时又一个字面量对象被发送给服务器，告诉它取消订阅。</li> - <li><code>init</code>: 当应用被第一次载入或者安装的时候会运行——它创建与服务器沟通的UI,并且发送一个对象告诉服务器是哪一个用户初始化（重新载入）了。</li> -</ul> - -<p>再多说一句，为了简介这里不会展示全部的代码。检查全部代码点击： <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="处理在service_worker中发送过来的channel_message">处理在service worker中发送过来的channel message</h4> - -<p>正如刚才我们提到的，当我们接收到从service worker发送的<a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> 时，我们的 <code>handleChannelMessage()</code> 函数才会去执行它。 我们用{{domxref("channel.port1.onmessage")}}事件处理函数去处理{{event("message")}} event, :</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>这个函数会在service worker中发送信息给页面的时候在页面中执行（This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>）。</p> - -<p> <code>handleChannelMessage()</code> 函数如下：</p> - -<pre class="brush: js">function handleChannelMessage(data) { - if(data.action === 'subscribe' || data.action === 'init') { - var listItem = document.createElement('li'); - listItem.textContent = data.name; - subscribersList.appendChild(listItem); - } else if(data.action === 'unsubscribe') { - for(i = 0; i < subscribersList.children.length; i++) { - if(subscribersList.children[i].textContent === data.name) { - subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); - } - } - nameInput.disabled = false; - } else if(data.action === 'chatMsg') { - var listItem = document.createElement('li'); - listItem.textContent = data.name + ": " + data.msg; - messagesList.appendChild(listItem); - sendInput.value = ''; - } -}</pre> - -<p>这个函数会做什么取决于传入的action参数的赋值：</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (在启动和重启的时候,我们需要在这个示例中做同样的事情):一个{{htmlelement("li")}} 元素被创建，它的text content 被设置为 <code>data.name</code> (订阅者的名字),然后它被添加到订阅者的列表里(一个简单的 {{htmlelement("ul")}}元素里)，所以这里是订阅者（再次）加入聊天的一个视觉反馈。</li> - <li><code>unsubscribe</code>: 我们循环遍历订阅者的列表，查找谁的 text content 和<code>data.name</code> (取消订阅者的名字)相同，然后删除这个节点以提供一个视觉反馈表示有人取消订阅了。</li> - <li><code>chatMsg</code>: 和第一个表现的形式类似, 一个 {{htmlelement("li")}}被创建，它的text content设置为<code>data.name + ": " + data.msg</code> (例如： "Chris: This is my message"), 然后它被添加到每一个用户UI的聊天列表里。</li> -</ul> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>注: </strong></span> 我们需要在更新DOM之前传递需要的数据给主页面（main context）， 因为service worker不能操作DOM。你在使用前一定要知道service worker的一些限制。阅读 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> 获取更多细节.</p> -</div> - -<h4 id="发送聊天信息">发送聊天信息</h4> - -<p>当‘<em>Send Chat Message‘ </em>按钮被点击后，相关联的文本域的内容就作为聊天内容被发送出去。这个由 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> </a>函数处理(再多说一句,为了简洁就不展示了). 这个和 <code>updateStatus()</code> 的不同之处也是差不多的。 (查看 {{anch("Updating the status in the app and server")}}) — 我们获得 endpoint 和 public key 是来自一个 {{domxref("PushSubscription")}} 对象, 这个对象又是来自于 {{domxref("ServiceWorkerContainer.ready()")}} 方法和{{domxref("PushManager.subscribe()")}}方法。它们（endpoint、public key）被传递进一个字面量对象里面（ in a message object），同时含有订阅用户的名字，聊天信息，和chatMsg的statusType，然后通过{{domxref("XMLHttpRequest")}}对象发送出去的，。</p> - -<h3 id="服务端（The_Server）">服务端（The Server）</h3> - -<p>正如我们上面提到的，我们需要一个服务端的容器去存储订阅者的信息，并且还要在状态更新时发送推送消息给客户端。 我们已经用一种hack的方式把一些需要的东西放到了一个快速-劣质(quick-and-dirty)的<a href="http://nodejs.org/">NodeJS</a> 服务端上(<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>)，用于处理来自客户端JavaScript的异步请求。</p> - -<p>它用一个文本文件 (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>)去存储订阅者的信息；这个文件一开始是空的(empty)。 有四种不同类型的请求，分别由被传输过来的对象中的statusType决定；这些在客户端通俗易懂的的状态类型同样也适用于服务端，因为服务端也有相同的状态。下面是这四个个状态在服务端代表的各自的含义。</p> - -<ul> - <li><code>subscribe</code>: 服务器将会添加订阅者的信息到存储的容器里 (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>)，包括endpoint等，然后会推送给所有已经订阅了的订阅者一条消息，告诉每一个订阅者有新的订阅者加入了聊天。</li> - <li><code>unsubscribe</code>: 服务器在存储订阅信息的容器里找到发送该类型请求的订阅者的详情，并移除这个订阅者的信息，然后推送一条消息给所有依然订阅的用户，告诉他们这个人取消订阅了。</li> - <li><code>init</code>: 服务器从那个存储信息的文本中读取所有订阅者的信息，然后告诉他们有人初始化或者再次加入了这个聊天。</li> - <li><code>chatMsg</code>: 推送一条订阅者想发送的信息给所有的订阅者；服务器从存储容器里读取现在订阅者的信息，然后服务器给每一个人推送一条包含聊天信息的消息。</li> -</ul> - -<p>其他需要注意的东西：</p> - -<ul> - <li>我们使用的是Node.js的 <a href="https://nodejs.org/api/https.html">https 模块 </a> 去创建的服务器，因为出于安全考虑，service worker只允许工作在一个安全的连接里(https only)。这也就是为什么我们要在应用里包含了<code>.pfx</code> 安全证书，然后在Node代码里引用这个证书。</li> - <li>当你发送一条没有数据的推送消息的时候，只需要把它用http的post请求发送给对应订阅者的endpoint的URL。然而，当推送消息里包含数据的时候，你需要加密它，这个加密过程往往很复杂。随着时间的推移，一些出现的库文件（libraries）帮你做了这部分的工作。在这个demo里面我们用了 Marco Castelluccio的NodeJS库文件（<a href="https://github.com/marco-c/web-push">web-push library</a>)。查阅这些源代码了解更多加密过程是怎么完成的 (查阅 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 获取更多细节)。库文件让发送一条推送消息变得简单（ The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>）。</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>现在让我们来看看服务工作者代码（sw.js），它响应由{{Event("push")}}事件表示的推送消息。 这些通过（{{domxref("ServiceWorkerGlobalScope.onpush")}}）事件处理程序在服务工作人员的范围内处理; 它的工作就是为每个收到的消息做出回应。 我们首先通过调用{{domxref("PushMessageData.json()")}}将收到的消息转换回对象。然后，通过查看这个对象的action属性，就能知道这个推送消息的类型：</p> - -<ul> - <li><code>subscribe</code> 或者 <code>unsubscribe</code>: 我们发送一个系统通知是通过 <code>fireNotification()</code> 函数，但同时，也通过{{domxref("MessageChannel")}}把这个消息发送回函数的上下文环境（main context），以便我们相应地更新订阅者列表（subscriber list） (查看 {{anch("Handling channel messages sent from the service worker")}} 了解详细).</li> - <li><code>init</code> 或者 <code>chatMsg</code>: 我们只是发送一个消息回主要的上下文（main context）来处理 <code>init</code> 和 <code>chatMsg</code> 情况（这些不需要系统通知）.</li> -</ul> - -<pre class="brush: js">self.addEventListener('push', function(event) { - var obj = event.data.json(); - - if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { - fireNotification(obj, event); - port.postMessage(obj); - } else if(obj.action === 'init' || obj.action === 'chatMsg') { - port.postMessage(obj); - } -});</pre> - -<p>下一步， 让我们看看 <code>fireNotification()</code> 函数的代码 (它真的太他妈简单了).</p> - -<pre class="brush: js">function fireNotification(obj, event) { - var title = 'Subscription change'; - var body = obj.name + ' has ' + obj.action + 'd.'; - var icon = 'push-icon.png'; - var tag = 'push'; - - event.waitUntil(self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - })); -}</pre> - -<p>我们先在这里列出通知消息框所需要的资源：标题、主体内容、图标。然后我们通过 {{domxref("ServiceWorkerRegistration.showNotification()")}} 方法把这个通知发送出去，同时提供一个"push"给tag属性，表示这是一个推送消息，以便我们能够在全部的通知消息中找到（identify）这个推送消息。 当我们成功发送一条推送消息，它可能会在用户对应的电脑或者设备上展示一个系统通知对话框，在不同的设备上通知对话框的外观可能是不一样的（下面的这张图片展示的是Mac OSX系统上的通知对话框）。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>注意，我们做的这些都包裹在{{domxref("ExtendableEvent.waitUntil()")}} 方法里；这是为了让ServiceWorker在发送通知消息的过程中依然保持活动，知道消息发送完成。 <code>waitUntil()</code> 会延长service worker的生命周期至（这个周期里）所有活动都已经完成。</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="处理推送订阅过早失效（Handling_premature_subscription_expiration）">处理推送订阅过早失效（Handling premature subscription expiration）</h2> - -<p>有时候，推送订阅会过早失效，而不会调用{{domxref("PushSubscription.unsubscribe()")}} 。例如，当服务器过载或长时间处于脱机状态时，可能会发生这种情况。这是高度依赖于服务器的，所以确切的行为很难预测。 在任何情况下，您都可以通过查看{{Event("pushsubscriptionchange")}} 事件来处理此问题，您可以通过提供{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} 事件处理程序来侦听此事件；这个事件只会在这种情况下才会被触发。</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something,一般来说都会在这里重新订阅， - // 并通过XHR或者Fetch发送新的订阅信息回服务器</span><span class="comment token"> -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>注意，我们在demo里没有覆盖这种情况，因为订阅端点（subscription ending）作为一个简单的聊天服务器并不是什么难事。但是对于更复杂的示例，您可能需要重新订阅（resubscribe ）用户。</p> - -<h2 id="（让Chrome支持的额外步骤）Extra_steps_for_Chrome_support">（让Chrome支持的额外步骤）Extra steps for Chrome support</h2> - -<p>为了让应用也能够在Chrome上面运行，我们需要一些额外的步骤，因为在Chrome上，现在需要依赖谷歌云消息推送（Google's Cloud Messaging） 服务才能正常工作。</p> - -<h3 id="配置谷歌云消息推送（Setting_up_Google_Cloud_Messaging）">配置谷歌云消息推送（Setting up Google Cloud Messaging）</h3> - -<p>按照以下步骤配置:</p> - -<ol> - <li>跳转到 <a href="https://console.developers.google.com">Google Developers Console</a> 然后创建一个新项目。</li> - <li>进入你项目主页(例如：我们的示例是在 <code>https://console.developers.google.com/project/push-project-978</code>), 然后 - <ol> - <li>在你的应用选项里打开<em> Google APIs </em>。</li> - <li>在下一屏，在移动API那一部分下面点击“<em>Cloud Messaging for Android</em>” 。</li> - <li>点击开启API按钮。</li> - </ol> - </li> - <li>现在你需要记下你的项目编号和API key,因为待会儿你会用到他们。 它们在这些地方: - <ol> - <li><strong>项目编号</strong>: 点击左侧的主页；项目编号在你的项目主页上方很容易看见的位置。</li> - <li><strong>API key</strong>: 点击左边菜单里的证书（<em>Credentials</em> ）；API key 能够在这个页面找到。</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>你需要在你的应用里包含Google应用风格的 <code>manifest.json</code> ，这里面的 <code>gcm_sender_id</code> 参数需要设置为你的项目编号。下面是一个简单的示例（<a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>）:</p> - -<pre class="brush: js">{ - "name": "Push Demo", - "short_name": "Push Demo", - "icons": [{ - "src": "push-icon.png", - "sizes": "111x111", - "type": "image/png" - }], - "start_url": "/index.html", - "display": "standalone", - "gcm_sender_id": "224273183921" -}</pre> - -<p>同时，你也需要在HTML文档用一个{{HTMLElement("link")}} 标签里指向你的manifest文件:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly参数">userVisibleOnly参数</h3> - -<p>Chrome 要求你在订阅推送服务的时候设置 <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly 参数</code></a> 为 <code>true</code> , 表示我们承诺每当收到推送通知时都会显示通知。这可以在我们的<a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127"> <code>subscribe()</code> 函数</a> 中看到。</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> diff --git a/files/zh-cn/conflicting/web/api/url/index.html b/files/zh-cn/conflicting/web/api/url/index.html deleted file mode 100644 index 3245250d9c..0000000000 --- a/files/zh-cn/conflicting/web/api/url/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Window.URL -slug: conflicting/Web/API/URL -tags: - - Window.URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL -original_slug: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p><strong>Window.URL</strong> 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 {{domxref("URL")}} 对象。</p> - -<div class="note"> -<p>Note: 此功能在Web Workers中可用。</p> -</div> - -<h2 id="语法">语法</h2> - -<p>调用一个静态方法：</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>构造一个新对象：</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></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('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 从 Gecko 2 (Firefox 4) 到 包括Gecko 18, Gecko 返回一个不标准的nsIDOMMozURLProperty内部类型. 在实践中, 这是没有意义的.</p> - -<p>[2] 在非标准名称webkitURL下实现。</p> - -<h2 id="也可以看看">也可以看看</h2> - -<ul> - <li>{{domxref("URL")}} API.</li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/web_storage_api/index.html b/files/zh-cn/conflicting/web/api/web_storage_api/index.html deleted file mode 100644 index c5bde57455..0000000000 --- a/files/zh-cn/conflicting/web/api/web_storage_api/index.html +++ /dev/null @@ -1,543 +0,0 @@ ---- -title: Storage -slug: conflicting/Web/API/Web_Storage_API -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage -original_slug: Web/Guide/API/DOM/Storage ---- -<h3 id="概述"> - 概述</h3> -<p> - DOM存储是一套在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> 规范中首次引入的与<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关的特性</a>的总称, 现在已经分离出来,单独发展成为独立的<a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web存储</a>规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在<a href="/zh-cn/Firefox_2_for_developers" title="zh-cn/Firefox_2_for_developers">Firefox 2</a> 和 <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>中首次引入.</p> -<div class="note"> - <strong>注意:</strong> DOM存储有别于<a href="/zh-cn/Storage" title="zh-cn/Storage">mozStorage</a> (Mozilla的XPCOM接口,用来访问SQLite) 也有别于<a href="/zh-cn/Session_store_API" title="zh-cn/Session_store_API">Session store API</a> (一个<a href="/zh-cn/XPCOM" title="zh-cn/XPCOM">XPCOM</a> 存储工具,主要为扩展程序使用).</div> -<h3 id="描述"> - 描述</h3> -<p> - DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).</p> -<p> - 基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"<a class="external" href="http://msdn.microsoft.com/zh-cn/library/ms531424%28VS.85%29.aspx">userData behavior</a>",它允许你在多重浏览器会话中永久地保存数据.)</p> -<p> - DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器<a href="http://en.wikipedia.org/wiki/HTTP_cookie">cookie</a>的能力有限，而且不支持组织持久数据，其他方法（如<a href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">flash本地存储</a>）需要外部插件支持。</p> -<p> - 由<a href="http://aaronboodman.com/">Aaron Boodman</a>编写的<a href="http://aaronboodman.com/halfnote/">halfnote</a>（笔记类应用程序）是第一批使用新的DOM存储功能（不包括internet explorer的userData behavior）开发的公开应用程序之一。在这个应用里，Aaron同时将笔记保存到服务器（当网络可用时）和本地，这允许使用者即使在不稳定的网络环境下也能安全的记录备注事项。</p> -<p> - 虽然halfnote的理念和实现比较简单，但是halfnote的创新展示了一种在线上和线下都可用的新型web应用的可能性。</p> -<h3 id="参考"> - 参考</h3> -<p> - 以下所提到的对象都是全局对象，作为 <a href="/zh-cn/DOM/window" title="/zh-cn/DOM/window">window 对象</a> 的属性存在。这意味着可以以 <code>sessionStorage</code> 或者 <code>window.sessionStorage 的形式访问这些对象。</code>(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)</p> -<h4 id="Storage"> - <code>Storage</code></h4> -<p> - 它是所有Storage实例（<code>sessionStorage</code>和<code>globalStorage[location.hostname]</code>）的构造函数，设置<code>Storage.prototype.removeKey = function(key) { this.removeItem(this.key(key)) }</code>，可通过<code>localStorage.removeKey</code> 和 <code>sessionStorage.removeKey</code>访问到。</p> -<p> - <code>globalStorage</code>对象不是<code>Storage</code>的实例，而是<code>StorageObsolete</code>的一个实例。</p> -<p> - <code>Storage</code>被定义在WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> 中,如下:</p> -<pre class="eval">interface <dfn>Storage</dfn> { - readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; - [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); - [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); - [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); - [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); - void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); -}; -</pre> -<div class="note"> - <strong>注意：</strong>虽然可以直接通过标准的 JavaScript 属性访问方法来设置和读取值，但是推荐的做法是使用 getItem 和 setItem 方法。</div> -<div class="note"> - <strong>注意：</strong>需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 <code>.toString</code> 方法被转换成字符串。所以一个普通对象将会被存储为 <code>"[object Object]"</code>，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。</div> -<h4 id="sessionStorage_2"> - <code>sessionStorage</code></h4> -<p> - <code>sessionStorage</code> 是个全局对象，它维护着<span style="line-height: inherit;">在页面会话(page session)期间有效的</span><span style="line-height: inherit;">存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。</span><span style="line-height: inherit;"> </span></p> -<pre class="brush: js">// 保存数据到当前会话的存储空间 -sessionStorage.setItem("username", "John"); - -// 访问数据 -alert( "username = " + sessionStorage.getItem("username")); -</pre> -<p> - 当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。<code>sessionStorage</code> 对象在处理这种情况的时候是最有用的。</p> -<p> - {{ fx_minversion_note("3.5", "在Firefox 3.5之前的版本中,如果浏览器意外崩溃,则在重启后,sessionStorage中保存的数据不会被恢复.之后的版本中,会恢复上次崩溃前的sessionStorage数据.") }}</p> -<p> - <strong>例子:</strong></p> -<p> - 自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。</p> -<pre class="brush: js"> // 获取到我们要循环保存的文本域 - var field = document.getElementById("field"); - - // 查看是否有一个自动保存的值 - // (只在浏览器被意外刷新时) - if ( sessionStorage.getItem("autosave")) { - // 恢复文本域中的内容 - field.value = sessionStorage.getItem("autosave"); - } - - // 每隔一秒检查文本域中的内容 - setInterval(function(){ - // 并将文本域的值保存到session storage对象中 - sessionStorage.setItem("autosave", field.value); - }, 1000); -</pre> -<p> - <strong>更多信息:</strong></p> -<ul> - <li> - <a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> -</ul> -<h4 id="localStorage"> - <code>localStorage</code></h4> -<p> - <code>localStorage</code> is the same as sessionStorage with same same-origin rules applied but it is persistent. <code>localStorage</code> was introduced in Firefox 3.5.</p> -<div class="note"> - <strong>注意：</strong>当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。</div> -<h4 id="兼容性"> - 兼容性</h4> -<p> - 这些<code> Storage</code> 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。如果你想在没有原生支持 <code>localStorage</code> 对象的浏览器中使用它，可以在你编写的 JavaScript 代码的首部插入下面两段代码中的任意一段。</p> -<p> - This algorithm is an exact imitation of the <code>localStorage</code> object, but making use of cookies.</p> -<pre class="brush: js">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - var sExpDate = new Date(); - sExpDate.setDate(sExpDate.getDate() - 1); - document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) { - iCouple = aCouples[iCouplId].split(/\s*=\s*/); - if (iCouple.length > 1) { - oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> -<div class="note"> - <strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> -<p> - Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8. It also makes use of cookies.</p> -<pre class="brush: js">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - var sExpDate = new Date(); - sExpDate.setDate(sExpDate.getDate() - 1); - document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> -<div class="note"> - <strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to get, add, change or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> -<h5 id="与_globalStorage_的关系的兼容性"> - 与 globalStorage 的关系的兼容性</h5> -<p class="note"> - <code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. 例如，在 <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 中不能访问 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 中的 <code>localStorage</code> 对象，但是它们都可以访问同一个 <code>globalStorage。</code> <code>localStorage</code> 是个标准接口，但 <code>globalStorage</code> 是非标准的。所以你的代码最好不要依赖这些关系。</p> -<p> - Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items, only extending <code>StorageObsolete.prototype</code> does.</p> -<h4 id="globalStorage_2"> - <code>globalStorage</code></h4> -<p> - {{ Non-standard_header() }}{{ obsolete_header("13.0") }}<code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML 5 has been removed from the HTML 5 specification in favor of <code>localStorage</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).</p> -<div class="warning"> - Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div> -<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access -globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); -</pre> -<p> - Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p> -<ul> - <li> - <code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li> -</ul> -<p> - <strong>例子:</strong></p> -<p> - All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p> -<p> - Remember a user's username for the particular sub-domain that is being visited:</p> -<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); -</pre> -<p> - Keep track of the number of times that a user visits all pages of your domain:</p> -<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string - globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); -</pre> -<h3 id="存储位置以及清除数据"> - 存储位置以及清除数据</h3> -<p> - In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p> -<ul> - <li> - DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll) - <ul> - <li> - But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> - <li> - Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> - </ul> - </li> - <li> - DOM Storage is <strong>not</strong> cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> - <li> - Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/zh-cn/HTML/Using_the_application_cache" title="zh-cn/Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li> -</ul> -<p> - See also <a href="/zh-cn/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="zh-cn/Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> -<h3 id="更多信息"> - 更多信息</h3> -<ul> - <li> - <a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> - <li> - <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> -<h3 id="例子"> - 例子</h3> -<ul> - <li> - <a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial describing how to use the Web Storage API by creating a simple address book application</li> - <li> - <a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> - <li> - <a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li> - <li> - <a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li> - <li> - <a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML 5 localStorage example</a>. Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li> - <li> - <a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li> - <li> - <a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> - <li> - <a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> -</ul> -<h3 id="浏览器兼容性"> - 浏览器兼容性</h3> -<p> - {{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th> - Feature</th> - <th> - Chrome</th> - <th> - Firefox (Gecko)</th> - <th> - Internet Explorer</th> - <th> - Opera</th> - <th> - Safari (WebKit)</th> - </tr> - <tr> - <td> - localStorage</td> - <td> - 4</td> - <td> - 3.5</td> - <td> - 8</td> - <td> - 10.50</td> - <td> - 4</td> - </tr> - <tr> - <td> - sessionStorage</td> - <td> - 5</td> - <td> - 2</td> - <td> - 8</td> - <td> - 10.50</td> - <td> - 4</td> - </tr> - <tr> - <td> - globalStorage</td> - <td> - {{ CompatNo() }}</td> - <td> - 2-13</td> - <td> - {{ CompatNo() }}</td> - <td> - {{ CompatNo() }}</td> - <td> - {{ CompatNo() }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th> - Feature</th> - <th> - Android</th> - <th> - Firefox Mobile (Gecko)</th> - <th> - IE Phone</th> - <th> - Opera Mobile</th> - <th> - Safari Mobile</th> - </tr> - <tr> - <td> - Basic support</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - <td> - {{ CompatUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<p> - All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> -<p> - </p> -<h3 id="相关链接"> - 相关链接</h3> -<ul> - <li> - <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/zh-cn/DOM/document.cookie" title="zh-cn/DOM/document.cookie">document.cookie</a></code>)</li> - <li> - <a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li> - <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> - <li> - <a href="/zh-cn/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="zh-cn/XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> - <li> - <a href="/zh-cn/DOM/event/StorageEvent" title="zh-cn/DOM/Event/StorageEvent">StorageEvent</a></li> -</ul> -<p> - {{ HTML5ArticleTOC() }}</p> -<p> - {{ languages( { "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "en": "en/DOM/Storage" } ) }}</p> -<p> - ---------------------------------</p> -<p> - </p> -<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81"> - 摘要</h3> -<p> - DOM Storage，就是在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a> specification中介绍的那些<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">存储相关特性</a>集合的名称。相比较在cookies中存储信息来说，DOM Stroage更大、更安全、更易于使用的。目前支持的浏览器包括Mozilla Firefox 2+, Google Chrome, Apple Safari, Opera和Microsoft IE9+,在移动设备上也包括iPhone & iPad Safari。</p> -<div class="note"> - <strong>Note:</strong> DOM Storage 与 <a href="/cn/Storage" title="cn/Storage">mozStorage</a> （Mozilla对于SQLite的XPCOM接口）和<a href="/cn/Session_store_API" title="cn/Session_store_API">Session store API</a>(扩展使用的一个<a href="/cn/XPCOM" title="cn/XPCOM">XPCOM</a>存储).不同</div> -<h3 id=".E6.8F.8F.E8.BF.B0" name=".E6.8F.8F.E8.BF.B0"> - 描述</h3> -<p> - DOM Storage机制是一种通过字符串形式的名／值对来安全地存储和使用的方法。这个附加功能的目标是提供一个更全面的、可以创建交互式应用程序的方法（包括那些高级功能，例如可以离线工作一段时间）。</p> -<p> - 目前，只有基于Mozilla的浏览器提供了DOM Storage的实现。不过，Internet Explorer也有一个类似的特性，叫做"<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>"，他允许你在多重浏览器会话中永久地保存数据。</p> -<p> - DOM Storage 是很有用的，因为在任何一段时期都没有一个很好的、只通过浏览器来永久存储合理大小的数据的方法。<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">浏览器cookies</a> 限制了存储容量，而且并没有为组织永久性的数据提供支持，并且其他的方法还需要外部插件来实现（例如<a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a>）。</p> -<p> - 第一个使用了新的DOM Storage功能(除了Internet Explorer 的 userData Behavior之外)的公共应用程序是由 <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a> 写的 <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a>(一个便签应用程序) 。在他的程序中，Aaron同时把便签内容保存到服务器上（当Internet连接可用时）和一个本地数据存储中。这就允许用户即便是在不定式发生internet连接中断时，也可以安全的写一些有备份的便签。</p> -<p> - 不过，在halfnote中表现出来的概念和实现，都还是相对简单的。它的诞生揭示了一种新的、可以在线或离线使用的网络应用程序。</p> -<h3 id=".E5.8F.82.E8.80.83" name=".E5.8F.82.E8.80.83"> - 参考</h3> -<p> - 下面的内容都是作为每个<a href="/cn/DOM/window" title="cn/DOM/window"><code>window</code> 对象</a>的属性存在的全局对象。这也就是说，可以通过<code>sessionStorage</code> 或者 <code>window.sessionStorage</code> 来访问它们。（这很重要，因为随后你可以使用iframe来存储、访问、添加那些并不是立刻就包含在你页面中的数据。）</p> -<h4 id="sessionStorage" name="sessionStorage"> - <code>sessionStorage</code></h4> -<p> - 这是一个全局对象（<code>sessionStorage</code>），它含有一个在页面会话有效期内可用的存储区域。只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。打开一个新的标签页或新窗口都会初始化新的会话。</p> -<pre class="eval">// 将数据存入当前会话的一个存储中 -sessionStorage.username = "John"; - -// 访问某些已存储的数据 -alert( "username = " + sessionStorage.username ); -</pre> -<p> - <code>sessionStorage</code> 对象是最有用的，它持有那些应该保存的临时数据，而且一旦浏览器突然被刷新时，要恢复的那些数据，</p> -<div class="bug"> - <strong>Note:</strong> <code>sessionStorage</code> 还应该有在浏览器崩溃后存储和恢复数据的功能，不过由于{{ Bug(339445) }}的原因，这个功能到现在还没有在Firefox中实现。这个功能实现之后，<code>sessionStorage</code>的防御功能就十分有用了。</div> -<p> - <strong>举例:</strong></p> -<p> - 自动保存文本字段的内容，如果浏览器突然被刷新，就恢复字段内容，这样就不会丢失任何输入了。</p> -<pre class="eval"> // 获得我们要跟踪的那个文本字段 - var field = document.getElementById("field"); - - // 看看我们是否有一个autosave的值 - // (这将只会在页面被突然刷新时发生) - if ( sessionStorage.autosave ) { - // 恢复文本字段中的内容 - field.value = sessionStorage.autosave; - } - - // 每秒钟检查一次文本字段的内容 - setInterval(function(){ - // 并把结果保存到会话存储对象中 - sessionStorage.autosave = field.value; - }, 1000); -</pre> -<p> - <strong>更多信息:</strong></p> -<ul> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">sessionStorage specification</a></li> -</ul> -<h4 id="globalStorage" name="globalStorage"> - <code>globalStorage</code></h4> -<p> - 这是一个全局对象(<code>globalStorage</code>)，它维护着各种公共的或者私有的，可以用来长时期保存数据的存储空间（例如，在多重的页面和浏览器会话之间）。</p> -<pre class="eval">// 可以这样访问那些仅对mozilla.org域上的脚本保存的数据 -globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?"; - -// 可以这样访问为任何网页任何域存储的数据 -globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox"; -</pre> -<p> - 特别地，<code>globalStorage</code>对象，提供了访问一些不同的可以保存数据的存储对象的方法。例如，如果我们要建立一个可以在域(developer.mozilla.org)下面可以使用<code>globalStorage</code>的网页，我们有下面这些存储对象可以使用：</p> -<ul> - <li> - <code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。</li> - <li> - <code>globalStorage{{ mediawiki.external('\'mozilla.org\'') }}</code> - 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li> - <li> - <code>globalStorage{{ mediawiki.external('\'org\'') }}</code> - 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。</li> - <li> - <code>globalStorage{{ mediawiki.external('') }}</code> - 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。</li> -</ul> -<div class="bug"> - <strong>注意:</strong> firefox目前还没有实现<code>globalStorage{{ mediawiki.external('tld') }}</code> 和 <code>globalStorage{{ mediawiki.external('') }}</code> （会抛出一个安全错误），这是由于对于这些名字空间可以进行随意读写的话是有安全漏洞的 <a class="external" href="http://ejohn.org/blog/dom-storage-answers/">更多信息</a></div> -<p> - <strong>示例:</strong></p> -<p> - 下面这些示例，需要你在所有想看到效果的页面中都插入脚本（包括如下所有的代码）。</p> -<p> - 记录某个指定子域名下面正在访问的用户的username：</p> -<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; -</pre> -<p> - 跟踪一个用户在你的域名下所访问的所有页面的次数：</p> -<pre class="eval"> // 由于所有数据都是被当作一个字符串来保存的，所以这里必须使用parseInt - globalStorage['mozilla.org'].visits = - parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; -</pre> -<p> - 记录所有你访问的网站：</p> -<pre class="eval"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname; -</pre> -<p> - <strong>更多信息:</strong></p> -<ul> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">globalStorage specification</a></li> -</ul> -<h3 id="More_information" name="More_information"> - More information</h3> -<ul> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0 Specification</a></li> - <li> - <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Web Applications 1.0 Storage Specification</a></li> - <li> - <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> -<h3 id="Examples" name="Examples"> - Examples</h3> -<ul> - <li> - <a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a></li> - <li> - <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - Note writing application that uses DOM Storage.</li> -</ul> -<h3 id="Related" name="Related"> - Related</h3> -<ul> - <li> - <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/cn/DOM/document.cookie" title="cn/DOM/document.cookie">document.cookie</a></code>)</li> - <li> - <a class="external" href="http://www.macromedia.com/support/documentation/zh-cn/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li> - <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Internet Explorer userData behavior</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/index.html deleted file mode 100644 index bfc9b851dc..0000000000 --- a/files/zh-cn/conflicting/web/api/webrtc_api/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: WebRTC API overview -slug: conflicting/Web/API/WebRTC_API -translation_of: Web/API/WebRTC_API#WebRTC_concepts_and_usage -translation_of_original: Web/API/WebRTC_API/Overview -original_slug: Web/API/WebRTC_API/Overview ---- -<p>{{WebRTCSidebar}}</p> - -<p><span class="seoSummary">WebRTC是由一些关联的API和协议一起协作，支持两个或多个终端之间交换数据和媒体信息的技术。这篇文章提供了这些APIs的介绍和提供的功能。</span></p> - -<h2 id="RTCPeerConnection">RTCPeerConnection</h2> - -<p>在媒体能够交换，或者数据通道建立之前，你需要把两个终端连接起来。这个连接过程的完成就是使用{{domxref("RTCPeerConnection")}} 接口。</p> - -<h2 id="MediaStream">MediaStream</h2> - -<p>{{domxref("MediaStream")}}接口描述了终端之间传输的媒体流。这个流由一个或多个媒体通道信息；通常这是一个音频通道或者视频通道信息。一个媒体流能够传输实时的媒体（例如音频通话或者视频会议等）或者已存的媒体（例如网上电影）。</p> - -<h2 id="RTCDataChannel">RTCDataChannel</h2> - -<p>WebRTC支持在建立连接的两个终端之间相互的传输二进制数据。这个过程通过{{domxref("RTCDataChannel")}}接口。</p> - -<p>这个接口可以作为数据的反向通道，甚至作为主要的数据通道去交换各种数据。例如在游戏应用中，通过这个接口可以实现多玩家支持，相互传送玩家的动作更新之类的数据。</p> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html deleted file mode 100644 index 7aa818b5d5..0000000000 --- a/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: WebRTC 架构概览 -slug: conflicting/Web/API/WebRTC_API/Protocols -tags: - - WebRTC 架构概览 -translation_of: Web/API/WebRTC_API/Protocols -translation_of_original: Web/API/WebRTC_API/Architecture -original_slug: Web/API/WebRTC_API/Architecture ---- -<p>{{WebRTCSidebar}}</p> - -<p>用来创建WebRTC连接的API底层使用了一系列的网络协议和连接标准。这篇文章涵盖了这些标准。</p> - -<p>为了让WebRTC正常工作，需要的协议、标准和API比较繁多。因此对于初学者来说可能会比较难以理解。当你一旦上手，你会惊喜地发现原来这一切都是如此的优雅和简单易懂。至于你信不信，反正我是信了。</p> - - - - -<p>重定向 <a class="redirect" href="/zh-Hans/docs/Web/API/WebRTC_API/Protocols">WebRTC 协议介绍</a></p> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html deleted file mode 100644 index d3ca2eb29c..0000000000 --- a/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: WebRTC basics -slug: conflicting/Web/API/WebRTC_API/Signaling_and_video_calling -translation_of: Web/API/WebRTC_API/Signaling_and_video_calling -translation_of_original: Web/API/WebRTC_API/WebRTC_basics -original_slug: Web/API/WebRTC_API/WebRTC_basics ---- -<p>{{WebRTCSidebar}}</p> - -<div class="summary"> -<p>当你理解 <a href="/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC 架构</a>之后, 你就可以阅读本篇文章了。本篇文章将带领你贯穿整个跨浏览器 RTC 应用的创建过程。到本章结束的时候，你就拥有了一个可以运行的点对点的数据通道和媒体通道。</p> -</div> - -<div class="note"> -<p><strong>本页的案例过期了! 不要再尝试他们了。</strong></p> -</div> - -<h2 id="注意">注意</h2> - -<p>由于近期 API 做了一些修改，一些比较老的案例需要修复，暂时不可用。</p> - -<ul> - <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li> - <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li> -</ul> - -<p>当前可以正常工作的的案例是:</p> - -<ul> - <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li> -</ul> - -<p>正确的实现方式或许可以从<a href="http://w3c.github.io/webrtc-pc/">标准</a>中推断出来。</p> - -<p>本页包含的其余的过期的信息，在 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">bugzilla</a>。</p> - -<h2 id="Shims">Shims</h2> - -<p>就像你想的那样，这样前卫的 API 肯定需要浏览器前缀才可以，然后再将它转换成通用的变量。</p> - -<pre class="brush: js">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; -var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; -var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; -navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> - -<h2 id="RTCPeerConnection">RTCPeerConnection</h2> - -<p>这是使用 peer 创建连接的起始点。它接收一个配置选项，其中配置了用来创建连接的 ICE 服务器信息。</p> - -<pre class="brush: js">var pc = new RTCPeerConnection(configuration);</pre> - -<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> - -<p> {{domxref("RTCConfiguration")}} 对象包含了一些信息，这些信息是关于用来做 ICE 的 TURN 和 / 或 STUN 服务器的。这是用来确保大多数用户可以避免因 NAT 和防火墙导致的无法建立连接。</p> - -<pre class="brush: js">var configuration = { - iceServers: [ - {urls: "stun:23.21.150.121"}, - {urls: "stun:stun.l.google.com:19302"}, - {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} - ] -}</pre> - -<p>Google 运行了一个我们可以使用的<a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">公共 STUN 服务器</a>。我也在 http://numb.viagenie.ca/ 创建了一个免费的可以访问 TURN 服务器的账户。可能你也想这么做，你只要替换到你自己的许可证书就可以了。</p> - - - -<h2 id="ICECandidate">ICECandidate</h2> - - - -<p>创建好 PeerConnection 并传入可用的 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> 之后，当 ICE 框架找到可以使用 Peer 创建连接的 “候选者”，会立即触发一个事件（onicecandidate）。这些 “候选者” 就是 ICECandidate, 而且他们会在 <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a> 事件中执行一个回调函数。</p> - -<pre class="brush: js" lang="javascript">pc.onicecandidate = function (e) { - // candidate exists in e.candidate - if (!e.candidate) return; - send("icecandidate", JSON.stringify(e.candidate)); -};</pre> - -<p>回调函数执行之后，我们必须使用信令通道 (signal channel) 将候选发送到其他的点。在 Chrome 中，ICE 框架一般会找到重复的候选者，所以，我一般只发送第一个，然后将处理函数删除。Firfox 中将候选者包含在了 Offer SDP 中。</p> - -<h2 id="Signal_Channel">Signal Channel</h2> - -<p>现在我们有了 ICE 候选，然后需要将它发送到我们的另一端，以让它知道如何跟我们建立连接。然而，现在有一个先有鸡还是先有蛋的问题。我们想要 PeerConnection 发送数据到另一端，但是在那之前我们需要先把元数据发送过去……</p> - -<p>现在就是用到信令通道（Signal Channel）的时候了。它的任何一个数据传输方法都允许两个端点之间交换信息。在本文中，我们将使用 <a href="http://firebase.com">FireBase</a>。因为它设置起来灰常简单，并且不需要任何主机或者服务器端的代码编写。</p> - -<p>现在我们想象只有两个两个方法：send()， 它将使用一个键，然后将数据赋值给它；recv() ，当一个键有值的时候会调用一个处理函数。</p> - -<p>数据库的结构就像下面这样：</p> - -<pre class="brush: js" lang="json">{ - "": { - "candidate:": … - "offer": … - "answer": … - } -}</pre> - -<p>连接会被 roomId 分割，然后会保存四条信息：发起者 (oferer) 的 ICE 候选、应答者 (answerer) 的 ICE 候选、offer SDP 和 answer SDP.</p> - -<h2 id="Offer">Offer</h2> - -<p>Offer SDP 是用来向另一端描述期望格式（视频, 格式, 解编码, 加密, 解析度, 尺寸 等等）的元数据。</p> - -<p>一次信息的交换需要从一端拿到 offer，然后另外一端接受这个 offer 然后返回一个 answer。</p> - -<pre class="brush: js" lang="javascript">pc.createOffer(function (offer) { - pc.setLocalDescription(offer, function() { - send("offer", JSON.stringify(pc.localDescription)); - }, errorHandler); -}, errorHandler, options);</pre> - -<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3> - -<p>创建 offer 的过程如果出现问题，就会执行这个函数，并且将错误的详细信息作为第一个参数。</p> - -<pre class="brush: js" lang="javascript">var errorHandler = function (err) { - console.error(err); -};</pre> - -<h3 id="options"><strong><code>options</code></strong></h3> - -<p>Offer SDP 的选项.</p> - -<pre class="brush: js" lang="javascript">var options = { - offerToReceiveAudio: true, - offerToReceiveVideo: true -};</pre> - -<p><code>offerToReceiveAudio/Video</code> 告诉另一端，你想接收视频还是音频。对于 DataChannel 来说，这些是不需要的。</p> - -<p>offer 创建好之后，我们必须将本地 SDP 设置进去，然后通过信令通道将它发送到另一端，之久就静静地等待另一端的 Answer SDP 吧.</p> - -<h2 id="Answer">Answer</h2> - -<p>Answer SDP 跟 offer 是差不多的，只不过它是作为相应的。有点像接电话一样。我们只能在接收到 offer 的时候创建一次 Answer.</p> - -<pre class="brush: js" lang="javascript">recv("offer", function (offer) { - offer = new SessionDescription(JSON.parse(offer)) - pc.setRemoteDescription(offer); - - pc.createAnswer(function (answer) { - pc.setLocalDescription(answer, function() { - send("answer", JSON.stringify(pc.localDescription)); - }, errorHandler); - }, errorHandler); -});</pre> - -<h2 id="DataChannel">DataChannel</h2> - -<p>我将首先阐述如何将 PeerConnection 用在 DataChannels API 上，并且如何在 peers 之间传输任意数据。</p> - -<p><em>注意：撰写这篇文章的时候，DataChannels 在 Chrome 和 Firefox 之间是无法互用的。Chrome 支持了一个类似的私有协议，这个协议将在不久被标准协议支持。</em></p> - -<pre class="brush: js" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> - -<p>offer 的创建者和 channel 的创建者应该是同一个 peer。 answer 的创建者将在 PeerConnection 的 ondatachannel 回调中接收到 这个 channel。你必须在创建了这个 offer 之后立即调用 createDataChannel()。</p> - -<h3 id="channelName"><strong><code>channelName</code></strong></h3> - -<p>这个字符串会作为 channel 名字的标签。注意：确保你 Channel 的名字中没有空格，否则在 Chrome 中调用 createAnswer() 将会失败。</p> - -<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3> - -<pre class="brush: js" lang="javascript">var channelOptions = {};</pre> - -<p>当前 Chrome 还不支持这些选项，所以你可以将这些选项留空。检查 RFC 以获取更多关于这些选项的信息。</p> - -<h3 id="Channel_事件和方法">Channel 事件和方法</h3> - -<h4 id="onopen"><strong><code>onopen</code></strong></h4> - -<p>当连接建立的时候会被执行。</p> - -<h4 id="onerror"><strong><code>onerror</code></strong></h4> - -<p>连接创建出错时执行。第一个参数是一个 error 对象。</p> - -<pre class="brush: js" lang="javascript">channel.onerror = function (err) { - console.error("Channel Error:", err); -};</pre> - -<h4 id="onmessage"><strong><code>onmessage</code></strong></h4> - -<pre class="brush: js" lang="javascript">channel.onmessage = function (e) { - console.log("Got message:", e.data); -}</pre> - -<p>这是连接的核心。当你接收到消息的时候，这个方法会执行。第一个参数是一个包含了数据、接收时间和其它信息的 event 对象。</p> - -<h4 id="onclose"><strong><code>onclose</code></strong></h4> - -<p>当连接关闭的时候执行。</p> - -<h3 id="绑定事件"><strong>绑定事件</strong></h3> - -<p>如果你是这个 channel 的创建者（offerer）, 你可以直接在通过 createChannel 创建的 DataChannel 上绑定事件。如果你是 answerer 你必须使用 PeerConnection 的 ondatachannel 回调去访问这个 channel。</p> - -<pre class="brush: js" lang="javascript">pc.ondatachannel = function (e) { - e.channel.onmessage = function () { … }; -};</pre> - -<p>这个 channel 可以在传递到回调函数中的 event 对象中以 e.channel 的方式访问。</p> - -<h4 id="send()"><strong><code>send()</code></strong></h4> - -<pre class="brush: js" lang="javascript">channel.send("Hi Peer!");</pre> - -<p>这个方法允许你直接传递数据到 peer！令人惊奇。你必须传递确保传递的数据是 String, Blob, ArrayBuffer 或者 ArrayBufferView 中的一种类型，所以，确保字符串化对象。</p> - -<h4 id="close()"><strong><code>close()</code></strong></h4> - -<p>在连接应该中止的时候关闭 channel。推荐在页面卸载的时候调用。</p> - -<h2 id="Media">Media</h2> - -<p>现在我们将会涉及到如何传递诸如音视频的媒体的话题。要显示音视频，你必须在文档中加入包含 autoplay 属性的 <video> 标签。</p> - -<h3 id="Get_User_Media">Get User Media</h3> - -<pre class="brush: js"><video id="preview" autoplay></video> - -var video = document.getElementById("preview"); -navigator.getUserMedia(constraints, function (stream) { - video.src = URL.createObjectURL(stream); -}, errorHandler);</pre> - -<p><strong><code>constraints</code></strong></p> - -<p>约定你想从用户获取到的媒体类型。</p> - -<pre class="brush: js" lang="javascript">var constraints = { - video: true, - audio: true -};</pre> - -<p>如果你只想进行音频聊天，移除 video 成员。</p> - -<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4> - -<p>当返回请求的媒体错误时被调用</p> - -<h3 id="Media_Events_and_Methods">Media Events and Methods</h3> - -<h4 id="addStream"><strong><code>addStream</code></strong></h4> - -<p>将从 getUserMedia 返回的流加入 PeerConnection。</p> - -<pre class="brush: js" lang="javascript">pc.addStream(stream);</pre> - -<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4> - -<pre class="brush: js"><video id="otherPeer" autoplay></video> - -var otherPeer = document.getElementById("otherPeer"); -pc.onaddstream = function (e) { - otherPeer.src = URL.createObjectURL(e.stream); -};</pre> - -<p>当连接建立并且其它的 peer 通过 addStream 将流加入到了连接中时会被调用。你需要另外的 <video> 标签去显示其它 peer 的媒体。</p> - -<p>第一个参数是包含了其它 peer 流媒体的 event 对象。</p> diff --git a/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html b/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html deleted file mode 100644 index 4f15dae53e..0000000000 --- a/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WebRTC -slug: conflicting/Web/API/WebRTC_API_d8621144cbc61520339c3b10c61731f0 -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC -original_slug: WebRTC ---- -<p>WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。</p> - -<p>WebRTC组件是通过JavaScript APIs获得的。目前正在开发中的APIs包括：网络流API(能够提供音频和视频)，点对点连接API(允许两个或更多用户通过浏览器进行联系)。同样在开发中的还有数据API，能够让浏览器在实时游戏，文字聊天，文件传输和其他应用中与其他类型数据进行交流。</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">关于Webrtc的文档</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/Introduction" title="https://developer.mozilla.org/en-US/docs/WebRTC/Introduction">介绍WebRTC</a></dt> - <dd>关于什么是WebRTC以及它是如何工作的一个介绍性指南。</dd> - <dt><a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">使用网络流 API</a></dt> - <dd>使用网络流API传输音频和视频的指南。</dd> - <dt><a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">使用网络流API</a></dt> - <dd>指导如何使用网络流API创建音频流和视频流。</dd> - <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">运用WebRTC进行点对点通信</a></dt> - <dd>如何使用 WebRTC 的API进行对等通信。</dd> - <dt>使用WebRTC进行点对点通信</dt> - <dd>如何使用WebRTC APTs进行点对点通信交流的指导。</dd> - <dt><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="taking webcam photos">从网络相机获取图像</a></dt> - <dd>介绍 WebRTC 是什么并如何工作。</dd> - <dt>从网络摄像头获得图像</dt> - <dd>介绍如何利用 WebRTC 通过网络摄像头获得图像。</dd> - <dt><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a></dt> - <dd>这个API支持媒体流对象的生成和操作。</dd> - <dt>多媒体API</dt> - <dd>这个API支持通用多媒体对象。</dd> - <dt><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> - <dd>这个函数能获取系统媒体设备。</dd> - </dl> - - <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">查看全部...</a></span></p> - </td> - <td> - <h2 class="Community" id="Community" name="Community">从社区获取帮助</h2> - - <p> </p> - - <p>在开发利用WebRTC技术的网站和Web应用程序时，与其他人进行对话可能会很有用。</p> - - <ul> - <li>咨询媒体主题论坛: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> - </ul> - - <ul> - <li>Mozilla's Media IRC 通道提出你的问题: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> - </ul> - - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">不要忘记网络礼节...</a></span></p> - - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关话题</h2> - - <ul> - <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">使用 HTML5 音频 和 </a>视频</li> - </ul> - - <h2 class="Tools" id="相关资源">相关资源</h2> - - <ul> - <li>{{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/api/window/localstorage/index.html b/files/zh-cn/conflicting/web/api/window/localstorage/index.html deleted file mode 100644 index eab3bf85fe..0000000000 --- a/files/zh-cn/conflicting/web/api/window/localstorage/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: LocalStorage -slug: conflicting/Web/API/Window/localStorage -tags: - - 存储API - - 离线 -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage -original_slug: Web/API/Storage/LocalStorage ---- -<p><code>localStorage</code> 与<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code> 一样，都遵循同源策略，但是它是持续存在的。<code>localStorage</code> 首次出现于 Firefox 3.5。</p> - -<div class="note"><strong>Note:</strong> 当浏览器进入隐私浏览模式，会创建一个新的、临时的数据库来存储local storage的数据；当关闭隐私浏览模式时，该数据库将被清空并丢弃。</div> - -<pre class="brush:js" style="font-size: 14px;">// Save data to the current local store -localStorage.setItem("username", "John"); - -// Access some stored data -alert( "username = " + localStorage.getItem("username"));</pre> - -<p class="note">本地存储（<code>localStorage</code>）的持续存在对许多事情都有帮助，包括这个示例<a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>所演示的记录页面查看次数。</p> - -<h4 id="兼容性" style="line-height: 18px; font-size: 1.28571428571429rem;">兼容性</h4> - -<p><code>Storage</code> 对象最近才加入标准，因此可能并不被所有浏览器支持。你可以通过在你的scripts代码前加入以下两段代码中某一段来规避在不能原生支持的执行环境使用<code>localStorage</code>对象的问题。</p> - -<p>该算法借助于cookies，对localStorage对象进行了严谨的实现。</p> - -<pre class="brush: js" style="font-size: 14px;">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>注意：</strong>数据的最大大小是通过cookies来严格限制的。可以使用这样的算法实现，使用<code>localStorage.setItem()</code>和<code>localStorage.removeItem()</code>这两个函数进行添加、改变或删除一个键。使用方法为<code>localStorage.yourKey = yourValue;和delete localStorage.yourKey;</code>进行设置和删除一个键<strong>并不是安全的做法</strong>。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管<code>localStorage </code>这个对象。</div> - -<div class="note"><strong>注意：</strong>通过将字符串<code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> 改成<code style="background: rgb(204, 204, 204);">"; path=/"</code>（并且改变对象的名字），可以使得这个 <code>localStorage</code>的实现变为<code>sessionStorage</code>的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的<code>sessionStorage</code>实现会将储存键值访问权限限定在当前浏览上下文。</div> - -<p>下面是另一个，并不那么严谨的<code>localStorage</code>对象的实现。相比上一个方法，它更简单且能与旧的浏览器良好兼容，如Internet Explorer < 8 (甚至能在<strong> Internet Explorer 6 上正常工作</strong>)。它同样是使用cookies来实现的。</p> - -<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>注意：</strong>数据量的最大值是通过cookies来严格限制的。可以使用<code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>和<code>localStorage.removeItem()</code>等方法获取、设置或删除一个键。使用方法<code>localStorage.yourKey = yourValue;</code>获取、添加、改变或者删除一个键<strong>并不是安全的做法</strong>。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管<code>localStorage </code>这个对象。</div> - -<div class="note"><strong>注意：</strong>通过将字符串<code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> 改成<code style="background: rgb(204, 204, 204);">"; path=/"</code>（并且改变对象的名字），可以使得这个 <code>localStorage</code>的实现变为<code>sessionStorage</code>的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的sessionStorage实现会将储存键值限定在当前浏览环境上下文。</div> - -<h4 id="与globalStorage的兼容性及关系" style="line-height: 18px; font-size: 1.28571428571429rem;">与globalStorage的兼容性及关系</h4> - -<p class="note"><code>localStorage</code> 和 <code>globalStorage[location.hostname]</code> 是一样的, 除了作用域是在 HTML5 origin (结构 + 主机名 + 非标准的端口)， 并且 <code>localStorage</code> 是一个 <code>Storage</code> 实例 ，而<code>globalStorage[location.hostname]</code> 是一个 <code>StorageObsolete</code> 实例，下面将要讨论这个。 例如, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 无法访问与 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 相同的 <code>localStorage</code> 对象 ，但是它们可以访问同一个 <code>globalStorage</code>. <code>localStorage</code> 是标准的接口，<code>globalStorage</code> 不是， 所以不要依赖于 <code>globalStorage</code> 。 </p> - -<p>请注意，给globalStorage[location.hostname]设置一个属性并不会影响到localStorage。拓展<code>Storage.prototype</code>也不会影响<code>globalStorage</code>对象，只有拓展<code>StorageObsolete.prototype</code>才会影响。</p> - -<h4 id="存储格式">存储格式</h4> - -<p><code>Storage</code>的键和值都是以每个字符占2个字节的UTF-16字符串(<a href="/zh-CN/docs/Web/API/DOMString">DOMString</a>)格式存储的。</p> diff --git a/files/zh-cn/conflicting/web/api/window/moveto/index.html b/files/zh-cn/conflicting/web/api/window/moveto/index.html deleted file mode 100644 index 066314234c..0000000000 --- a/files/zh-cn/conflicting/web/api/window/moveto/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Window.restore() -slug: conflicting/Web/API/Window/moveTo -translation_of: Web/API/Window/moveTo -translation_of_original: Web/API/Window/restore -original_slug: Web/API/Window/restore ---- -<p>{{APIRef}}</p> - -<p>这个方法现在已经失效，不过可以使用下面的方法代替：</p> - -<p>{{domxref("window.moveTo")}}({{domxref("window.screenX")}}, {{domxref("window.screenY")}});</p> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - - - -<p>{{Compat("api.Window.restore")}}</p> diff --git a/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html deleted file mode 100644 index 4a7bcf7366..0000000000 --- a/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WebAPI -slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 -translation_of: Web/API -translation_of_original: WebAPI -original_slug: WebAPI ---- -<p><strong>WebAPI</strong>指一组设备兼容套件和访问接口，它允许Web应用及其内容访问设备硬件（比如电池状态或设备振动器），同时也可以获取设备上的数据（比如日历或联系人等信息）。通过这些API，我们希望对Web应用进行扩展，实现过去只有专有平台才可以实现的功能。</p> - -<div class="note"> -<p><strong>注意:</strong> 可以从<a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">packaged apps</a>获取每一个标记的简要说明。</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">通信接口</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">网络信息接口（Network Information API）</a></dt> - <dd>提供当前网络连接的基本信息，如网速。</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">蓝牙（Bluetooth）</a></dt> - <dd>提供了对设备蓝牙的底层访问。</dd> - <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">移动连接接口（Mobile Connection API）</a>{{NonStandardBadge}}</dt> - <dd>提供设备的无线连接信息，如信号强度、操作者信息等。</dd> - <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">网络状态接口（Network Stats API）</a>{{NonStandardBadge}}</dt> - <dd>监控数据使用并将这些信息提供给授权应用。</dd> - <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">电话（Telephony）</a> {{NonStandardBadge}}</dt> - <dd>允许应用处理和回应呼叫和使用内建的电话页面。</dd> - <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">短信（WebSMS）</a>{{NonStandardBadge}}</dt> - <dd>允许应用发送和接收短信，也能访问和管理存储在设备上的短信。</dd> - <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">无线连接信息接口（WiFi Information API）</a>{{NonStandardBadge}}</dt> - <dd>提供信号强度、当前连接网络的名称及可用的WIFI网络等信息。</dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">硬件访问接口</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">环境光传感器接口（Ambient Light Sensor API）</a></dt> - <dd>提供对环境光传感器的访问，使应用可以分辨设备周围环境光的等级。</dd> - <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">电池状态接口（</a><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">）</a></dt> - <dd>提供设备的电量信息，和设备是否在充电的信息。</dd> - <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">相机接口（</a><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">）</a>{{NonStandardBadge}}</dt> - <dd>允许应用使用内置摄像头拍摄照片、录制视频。</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">地理位置接口（</a><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">）</a></dt> - <dd>提供设备的物理位置信息。</dd> - <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">指针锁定接口（Pointer Lock API）</a></dt> - <dd>使应用锁定鼠标位置，并且获取鼠标的移动而不是绝对坐标，常用于游戏中。</dd> - <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">电量管理接口（Power Management API）</a>{{NonStandardBadge}}</dt> - <dd>使应用可以点亮或关闭屏幕、CPU、设备供电等，也提供了对资源锁定事件的侦听和检查。</dd> - <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">附近接口（Proximity API）</a></dt> - <dd>允许查看设备附近的物体，比如用户的面部。</dd> - <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">设备朝向接口（Device Orientation API）</a></dt> - <dd>当设备的朝向改变（横向或纵向）时提供通知。</dd> - <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">屏幕朝向接口（Screen Orientation API）</a></dt> - <dd>当屏幕的朝向改变时提供通知。也可以用来指定朝向。</dd> - <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">振动器接口（Vibration API）</a></dt> - <dd>允许应用在必要的时候访问设备震动器（比如游戏的触感反馈）。不推荐用于通知类的事件。通知类的事件情使用<a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a>。</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">查看全部...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">数据管理接口</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">文件句柄接口（FileHandle API）</a></dt> - <dd>提供对可写文件的支持。</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">索引数据库（IndexedDB）</a></dt> - <dd>结构化数据的客户端存储，并实现高效搜索。</dd> - <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">设置接口（Settings API）</a> {{NonStandardBadge}}</dt> - <dd>允许设备检查、更新存储在设备上的系统设置选项。</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">其他接口</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">闹钟接口（Alarm API）</a></dt> - <dd>允许应用安排通知。也支持在特定时间自动启动应用。</dd> - <dt><a href="/en-US/docs/Apps" title="Apps">应用接口（Apps API）</a>{{NonStandardBadge}}</dt> - <dd>开放网络应用接口提供对安装和管理网络应用的支持。也允许网络应用查询付款信息。</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>浏览器接口（Browser API）</strong></a>{{NonStandardBadge}}</dt> - <dd>提供完全使用Web技术构建Web浏览器的支持。实质就是，浏览器中的浏览器。</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">闲置接口（Idle API）</a></dt> - <dd>允许应用在用户未使用设备的时候接收通知。</dd> - <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">授权接口（Permissions API）</a>{{NonStandardBadge}}</dt> - <dd>集中管理应用授权，用于“设置”应用。</dd> - <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">单纯推送接口（Simple Push API）</a></dt> - <dd>允许平台发送提醒信息到特定应用。</dd> - <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">时间／时钟接口（Time/Clock API）</a>{{NonStandardBadge}}</dt> - <dd>允许设置当前时间。另外，需要使用<a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>来设置时区。</dd> - <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">网络活动（Web Activities）</a>{{NonStandardBadge}}</dt> - <dd>允许应用将一项任务委托给另外的应用。比如一个应用可以请求另外的应用来选择或创建照片。通常情况下，应当允许用户选择被委托的应用。</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">WebAPI社区</h2> - -<p>如果在这些接口的使用上需要帮助，这里有几种联系其他开发者的方式：</p> - -<ul> - <li>在论坛资讯：{{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>访问WebAPI IRC频道：<a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">注意网络礼仪...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关主题</h2> - -<ul> - <li><a href="/en-US/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">文档对象模型（DOM）</a>是将HTML文档描述为一棵树</li> - <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> - <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>：WebAPI主题及文档状态的列表</li> -</ul> -</div> -</div> diff --git a/files/zh-cn/conflicting/web/css/@viewport/index.html b/files/zh-cn/conflicting/web/css/@viewport/index.html deleted file mode 100644 index c4cf323178..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: height -slug: conflicting/Web/CSS/@viewport -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height -original_slug: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<div><code><strong>height</strong></code><strong> </strong>CSS 属性是同时设置可视区 {{cssxref("@viewport/min-height", "min-height")}} and {{cssxref("@viewport/max-height", "max-height")}} 的简写。当你设置一个值的时候，最小高度（minimum height）和最大高度（maximum height）会被同时设置。</div> - -<p>如果提供两个值，第一个值会被设置为最小高度，第二个值将会被设置为最大高度。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: css notranslate">/* One value */ -height: auto; -height: 320px; -height: 15em; - -/* Two values */ -height: 320px 200px; -</pre> - -<h3 id="合法值">合法值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>真实生效的高度值将根据其他 CSS 属性计算得出。</dd> - <dt><code><length></code></dt> - <dd>一个非负的绝对或相对值。</dd> - <dt><code><percentage></code></dt> - <dd>一个相对于缩放因子是 1.0 的初始可视区宽高的百分比值，水平和垂直方向的长度分别计算。不能是负值。</dd> -</dl> - -<h2 id="正式定义">正式定义</h2> - -<p>{{cssinfo}}</p> - -<h2 id="正式语法">正式语法</h2> - -{{csssyntax}} - -<h2 id="示例">示例</h2> - -<h3 id="设置最小和最大高度">设置最小和最大高度</h3> - -<pre class="brush: css notranslate">@viewport { - height: 500px; -}</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("css.at-rules.viewport.height")}}</p> - -<h2 id="同时查看">同时查看</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html deleted file mode 100644 index f7fd64d116..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: orientation -slug: conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a -tags: - - CSS - - CSS Description -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/orientation -original_slug: Web/CSS/@viewport/orientation ---- -<div>{{CSSRef}}</div> - -<h2 id="摘要">摘要</h2> - -<p>此 <strong><code>orientation</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 描述符控制由{{cssxref("@viewport")}}定义文档的方向。</p> - -<p><span style="line-height: 1.5;">通过设备的倾斜摆动情况来决定文档显示的方向，作者可以通过设置这个描述符来抑制方向的变化{{cssinfo}}</span></p> - -<h2 id="语法">语法</h2> - -<pre class="brush:css">/* Keyword values */ -orientation: auto; -orientation: portrait;/*锁定为纵向*/ -orientation: landscape;/* 锁定为横向*/ -</pre> - -<h3 id="取值">取值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>用户代理将文档的方向设置为自动，通常基于设备的定位由加速度传感器 （如果设备具有这种硬件传感器），但是用户控制，OS 级别的"锁方向"往往会优先于加速度传感器的设置。</dd> - <dt><code>portrait</code></dt> - <dd>文档被锁定为纵向。</dd> - <dt><code>landscape</code></dt> - <dd>文档被锁定为横向。</dd> -</dl> - -<h3 id="标准语法">标准语法</h3> - -{{csssyntax}} - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">标准</th> - <th scope="col">注释</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>8 {{property_prefix("-o")}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html deleted file mode 100644 index a68fbedc8d..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: viewport-fit -slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit -original_slug: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}} {{Draft}} {{SeeCompatTable}}</div> - -<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "descriptor")}} 是为了控制文档是如何填充满屏幕的。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: css; no-line-numbers">/* 关键值*/ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="属性值">属性值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>此值不影响初始布局视图端口，并且整个web页面都是可查看的。</dd> - <dt><code>contain</code></dt> - <dd>视图端口按比例缩放，以适合显示内嵌的最大矩形。</dd> - <dt><code>cover</code></dt> - <dd>视图端口被缩放以填充设备显示。强烈建议使用 <a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>，以确保重要内容不会出现在显示之外。</dd> -</dl> - -<h3 id="形式语法">形式语法</h3> - -<pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, <strong>viewport-fit=cover</strong>"</span><span style="color: #0000ff;">></span></pre> - -<h2 id="注意">注意</h2> - -<p>在使用 <code>viewport-fit</code> 描述符时，必须记住并不是所有的设备显示都是矩形的，因此应该使用<a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>。</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="另请参见">另请参见</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html deleted file mode 100644 index 709a42b3d1..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: width -slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width -original_slug: Web/CSS/@viewport/width ---- -<div>{{CSSRef}}</div> - -<p>The <strong>width</strong> CSS descriptor is shorthand for setting both the <a href="/zh-CN/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a> and the <a href="/zh-CN/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a> descriptors of the viewport. By providing one viewport length value, that value will determine both the <code>min-width</code> and the <code>max-width</code> to the value provided.</p> - -<p>If two viewport values are provided the first value will be set to the <code>min-width</code> and the second value will be set <code>max-width</code>.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="brush: css">/* An example with one viewport value: */ -@viewport { - width: 320px; -} - -/* An example with two viewport values: */ -@viewport { - width: 320px, 120px; -} - -</pre> - - - -<h3 id="Values" name="Values">Values</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>The used value is calculated from the other CSS descriptors' values.</dd> - <dt><code><length></code></dt> - <dd>A non-negative absolute or relative length.</dd> - <dt><code><percentage></code></dt> - <dd>A percentage value relative to the width or height of the <span class="css">initial viewport</span> at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a> <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title=""><percentage></a></pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table" style="height: 93px; width: 950px;"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>29 (behind a flag)</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>11.10<br> - Removed in 15<br> - Reintroduced behind a flag in 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="height: 93px; width: 948px;"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <table class="compat-table"> - <tbody> - <tr> - <td>4.4</td> - </tr> - </tbody> - </table> - </td> - <td> - <table class="compat-table"> - <tbody> - <tr> - <td>29</td> - </tr> - </tbody> - </table> - </td> - <td>{{CompatNo}}</td> - <td>10{{property_prefix("-ms")}}</td> - <td>11.10<br> - Removed in 15<br> - Reintroduced behind a flag in 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html deleted file mode 100644 index 3ba2f5579c..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: zoom -slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 -tags: - - CSS - - CSS Descriptor -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom -original_slug: Web/CSS/@viewport/zoom ---- -<div>{{ CSSRef }}</div> - -<p><strong><code>zoom</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 属性会根据 {{cssxref("@viewport")}} 来初始化一个缩放因数。</p> - -<p>当设置<code>1.0</code> 或 <code>100%</code>时表示不缩放。更大的值放大，更小的值缩小。</p> - -<p>{{cssinfo}}</p> - -<h2 id="语法">语法</h2> - -<pre class="brush:css">/* Keyword value */ -zoom: auto; - -/* <number> values */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> values */ -zoom: 150%; -</pre> - -<h3 id="值">值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>根据`viewport`来既定当前标签的缩放。</dd> - <dt><code><number></code></dt> - <dd>必须是一个非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。</dd> - <dt><code><percentage></code></dt> - <dd>必须是一个非负的百分比。以100%为基础进行缩放。</dd> -</dl> - -<h3 id="形式语法">形式语法</h3> - -{{csssyntax}} - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - - - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/zh-cn/conflicting/web/css/_colon_is/index.html b/files/zh-cn/conflicting/web/css/_colon_is/index.html deleted file mode 100644 index 5ffedac0bc..0000000000 --- a/files/zh-cn/conflicting/web/css/_colon_is/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: ':any' -slug: conflicting/Web/CSS/:is -tags: - - CSS - - 伪类选择器 - - 实验性 -translation_of: Web/CSS/:is -translation_of_original: Web/CSS/:any -original_slug: Web/CSS/:any ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>The <code>:any()</code> <a href="/en-US/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-class</a> lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.</p> - -<p>译文：any()伪类可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。这是另一种选择，它必须重复整个选择器，因为其中一个项目是不同的。</p> - -<div class="note"><strong>Note : </strong>This pseudo-class is in progress to be standardized in <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> under the name <code>:matches()</code>. It is likely that the syntax and name of <code>:-<em>vendor</em>-any()</code> will be changed to reflect it in the near future.</div> - -<div class="note">注意:这个伪类正在CSS选择器第4级按照名称:matches()进行标准化。很可能的语法和名称:- vendor-any()将在不久的将来被更改以反映它。</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -{{csssyntax}} - -<h3 id="Values" name="Values">值</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>选择器。这可以是由 <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 简单选择器</a> 组成的简单选择器或多重选择器，并且可以包含后代组合器。</dd> -</dl> - -<div class="note"><strong>注意：</strong>选择器可以<strong>不</strong>包含伪元素，并且仅允许的组合器是后代组合器。</div> - -<h2 id="Examples" name="Examples">例子</h2> - -<p>举个例子，如以下 CSS：</p> - -<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>可以写成这样：</p> - -<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>但是，不能写成这样（详见<a href="#Issues_with_performance_and_specificity">the section on performance</a>）：</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>译文： 这个伪类选择器会在处理 HTML5 的 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections and headings</a> 中尤其有用。因为 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, 和 {{HTMLElement("nav")}} 可以被嵌套，如果不使用 <code>:any()</code> ，为了去匹配这些标签来给予样式会变得困难。</p> - -<p>举个例子，当不使用 <code>:any()</code> ，给予不同的 DOM 结点层次深度下的所有的 {{HTMLElement("h1")}} 的元素样式时，将会变得特别的复杂。</p> - -<pre class="brush: css">/* Level 0 */ -h1 { - font-size: 30px; -} -/* Level 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Level 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Level 3 */ -/* ... don't even think about it*/ -</pre> - -<p>然而，通过使用 <code>:any()</code> ，这将变得很简单：</p> - -<pre class="brush: css">/* Level 0 */ -h1 { - font-size: 30px; -} -/* Level 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -/* Level 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} -/* Level 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">性能与特异性问题</h3> - -<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> 追踪了一个关于 Gecko 作为内核的浏览器在使用 <code>:-moz-any()</code> 不正确的问题。在最新的浏览器(从 Firefox 12) 实现 <code>:-moz-any()</code> 有一个通用的规则，在使用这个伪类选择器时，当使用它作为最右边的选择器会比使用 ID, Class, 标签选择器作为最右边的选择器要来的慢。</p> - -<p>例如:</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>会比下面的表达式慢</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>而下面的表达式将会是最快的</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> - <td>12.0 (534.30){{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html deleted file mode 100644 index af8a706fa9..0000000000 --- a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: conflicting/Web/CSS/:placeholder-shown -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: Web/CSS/:placeholder-shown -translation_of_original: Web/CSS/:-moz-placeholder -original_slug: Web/CSS/:-moz-placeholder ---- -<p> </p> - -<div class="note"><strong>提示:</strong> <code><em>在Firefox 19+版本中</em> :-moz-placeholder</code> 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.</div> - -<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> - -<p>{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}</p> - -<h2 id="Summary" name="Summary">摘要</h2> - -<p><code> :-moz-placeholder</code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>控制元素所显示的文字占位符<a href="/en/HTML/Forms_in_HTML#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">文字占位符</a>. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> - -<h2 id="示例">示例</h2> - -<p>这个示例将文字占位符改变为了绿色.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <title>Placeholder demo</title> - <style type="text/css"> - input:-moz-placeholder { - color: green; - } - </style> -</head> -<body> - <input id="test" placeholder="Placeholder text!"> -</body> -</html> -</pre> - -<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">查看这个示例</a>.</p> - -<h2 id="溢出">溢出</h2> - -<p>在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS <code>text-overflow: ellipsis;</code> 来省略一中间部分文字.</p> - -<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } -::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ -input:-moz-placeholder { text-overflow: ellipsis; } -</pre> - -<p>It was David Walsh, the man on fire who introduced this to a lot of designers. <a class="external" href="http://davidwalsh.name/placeholder-overflow" title="Placeholders and Overflow">Placeholders and Overflow</a>.</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(457801) }}</p> - -<h2 id="SeeAlso" name="SeeAlso">See also</h2> - -<ul> - <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("textarea") }}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html deleted file mode 100644 index b66dc3a6ef..0000000000 --- a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: conflicting/Web/CSS/::placeholder -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: Web/CSS/::placeholder -translation_of_original: Web/CSS/::-moz-placeholder -original_slug: Web/CSS/::-moz-placeholder ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<div class="note"><strong>提示:</strong> {{cssxref('::-moz-placeholder')}} 伪元素在Firefox 19+替代了之前的 <code>:-moz-placeholder </code>伪类.</div> - -<div>{{gecko_minversion_header("19.0")}}</div> - -<h2 id="摘要">摘要</h2> - -<p> <code>::-moz-placeholder</code> 伪元素控制元素所显示的文字占位符.它允许开发者/设计师改变文字占位符的样式.默认的文字占位符为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> - -<h2 id="示例">示例</h2> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html"><input id="test" placeholder="Placeholder text!"></pre> - -<h3 id="CSS_内容">CSS 内容</h3> - -<pre class="brush: css">input::-moz-placeholder { - color: green; -}</pre> - -<p>{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}</p> - -<p> </p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<p>[1] Firefox 对placeholder文本默认应用<code>{{cssxref("opacity")}}:0.54。详见</code>{{Bug("556145")}}。大多数主流浏览器目前不会对placeholder文本伪元素或者伪类应用默认样式。</p> - -<p>Gecko 此前将本属性视为 {{cssxref(":-moz-placeholder")}}。详见 {{Bug("737786")}}.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML">Forms in HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html deleted file mode 100644 index 8fe764c269..0000000000 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: CSS Background and Borders -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders -original_slug: Web/CSS/CSS_Background_and_Borders ---- -<p>{{CSSRef}}</p> - -<p><strong>CSS 背景与边框</strong> 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。</p> - -<h2 id="参考">参考</h2> - -<h3 id="CSS_属性">CSS 属性</h3> - -<div class="index"> -<ul> - <li>{{cssxref("background")}}</li> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-left-radius")}}</li> - <li>{{cssxref("border-bottom-right-radius")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-collapse")}}</li> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-image")}}</li> - <li>{{cssxref("border-image-outset")}}</li> - <li>{{cssxref("border-image-repeat")}}</li> - <li>{{cssxref("border-image-slice")}}</li> - <li>{{cssxref("border-image-source")}}</li> - <li>{{cssxref("border-image-width")}}</li> - <li>{{cssxref("border-left")}}</li> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-radius")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-left-radius")}}</li> - <li>{{cssxref("border-top-right-radius")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-width")}}</li> -</ul> -</div> - -<h2 id="导航">导航</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">应用CSS多重背景</a></dt> - <dd>阐述设置元素背景方法以及背景、元素之间的交互方式</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">缩放背景图片</a></dt> - <dd>阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Backgrounds') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器支持">浏览器支持</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html deleted file mode 100644 index 8d64addd68..0000000000 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 缩放背景图像 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -tags: - - Advanced - - CSS - - CSS Background - - Graphics - - Guide - - Web - - 背景图片 -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images -original_slug: Web/Guide/CSS/Scaling_background_images ---- -<div>{{cssref}}</div> - -<p><span style="line-height: 1.5;">CSS 的 </span> {{ cssxref("background-size") }}<span style="line-height: 1.5;"> 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。</span></p> - -<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">拼一张大图</h2> - -<p><span style="line-height: 1.5;">来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里</span>（出于某种原因，很可能是某个非常糟糕的网站设计）<span style="line-height: 1.5;">，最终的效果如下：</span></p> - -<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> - -<p>用下面的 CSS 可以实现这种效果：</p> - -<pre class="brush: css; highlight:[8]">.square { - width: 300px; - height: 300px; - background-image: url(fxlogo.png); - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; - background-size: 150px; -} </pre> - -<div>没必要再用带前缀的 background-size 了，<span style="line-height: 1.5;">尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。</span></div> - -<h2 id="Stretching_an_image" name="Stretching_an_image">拉伸图片</h2> - -<p>你可以同时指定图片纵向和横向的大小，如下：</p> - -<pre class="brush:css">background-size: 300px 150px; -</pre> - -<p>结果会是这样的：<br> - <img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> - -<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">放大图片</h2> - -<p>另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：</p> - -<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> - -<pre class="brush: css; highlight:[5]">.square2 { - width: 300px; - height: 300px; - background-image: url(favicon.png); - background-size: 300px; - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; -} -</pre> - -<p>正如你所看到的，CSS 的写法实际上是基本相同的。</p> - -<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊值: "contain" 和 "cover"</h2> - -<p>除了{{cssxref("<length>")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。</p> - -<h3 id="contain" name="contain"><code>contain</code></h3> - -<p><span style="line-height: 1.5;">contain 值指定可以不用考虑容器的大小，</span><span style="line-height: 1.5;">把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域</span><span style="line-height: 1.5;">。</span><span style="line-height: 1.5;">在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，</span><span style="line-height: 1.5;">来看看下方这个例子。</span></p> - -<pre class="brush:html"><div class="bgSizeContain"> - <p>Try resizing this window.<code>Right-click->This Frame->Open Frame in New Tab</code></p> -</div></pre> - -<pre class="brush:css;highlight:[4]">.bgSizeContain { - height: 200px; - background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); - background-size: contain; - border: 2px solid darkgray; - color: #000; text-shadow: 1px 1px 0 #fff; -}</pre> - -<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p> - -<h3 id="cover" name="cover"><code>cover</code></h3> - -<p><span style="line-height: 1.5;">cover 属性指定背景图可以被调整到任意大小，</span><span style="line-height: 1.5;">以使背景图完全覆盖背景区域</span><span style="line-height: 1.5;">。</span></p> - -<pre class="brush:html"><div class="bgSizeCover"> - <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p> -</div></pre> - -<pre class="brush:css;highlight:[4]">.bgSizeCover { - height: 200px; - background-image: url('/files/2917/fxlogo.png'); - background-size: cover; - border: 2px solid darkgray; - color: #000; - text-shadow: 1px 1px 0 #fff; -}</pre> - -<p>{{ EmbedLiveSample("cover", "100%", "220") }}</p> - -<h2 id="See_also" name="See_also">另请参阅</h2> - -<ul> - <li>{{ cssxref("background-size") }}</li> - <li>{{ cssxref("background") }}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index b1d5ee045e..0000000000 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 使用CSS的多背景 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -<p>{{CSSRef}}</p> - -<p><span class="seoSummary">通过使用 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>，你可以向元素应用<strong>多个背景</strong>。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。</span> 仅最后一个背景允许拥有背景色。</p> - -<p>指定多个背景很简单：</p> - -<pre class="brush: css">.myclass { - background: background1, background 2, ..., backgroundN; -} -</pre> - -<p>你既可以使用简写属性 {{ cssxref("background") }} 来设置多个背景，也可以使用除 {{ cssxref("background-color") }} 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： {{ cssxref("background") }}，{{ cssxref("background-attachment") }}，{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}，{{ cssxref("background-origin") }}，{{ cssxref("background-position") }}， {{ cssxref("background-repeat") }}， {{ cssxref("background-size") }}。</p> - -<h2 id="示例">示例</h2> - -<p>该例中，三个背景进行堆叠：火狐标志,一个<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">线性渐变</a>， 和一张带有花的图片：</p> - -<pre class="brush: css">.multi_bg_example { - background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), - linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), - url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); - background-repeat: no-repeat, no-repeat, repeat; - background-position: bottom right, left, right; -} -</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">结果</td> - </tr> - <tr> - <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> - </tr> - </tbody> -</table> - -<p>如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个（最前面）的背景，依次可推。</p> - -<h2 id="其它">其它</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用CSS渐变</a></li> -</ul> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> diff --git a/files/zh-cn/conflicting/web/css/css_color/index.html b/files/zh-cn/conflicting/web/css/css_color/index.html deleted file mode 100644 index 65153a61df..0000000000 --- a/files/zh-cn/conflicting/web/css/css_color/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: CSS Colors -slug: conflicting/Web/CSS/CSS_Color -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors -original_slug: Web/CSS/CSS_Colors ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS Colors</strong> 是 CSS 的一个模块，用于处理颜色、颜色类型和透明度。</p> - -<h2 id="参考_(Reference)">参考 (Reference)</h2> - -<h3 id="属性">属性</h3> - -<div class="index"> -<ul> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("opacity")}}</li> -</ul> -</div> - -<h3 id="CSS_数据类型">CSS 数据类型</h3> - -<p>{{cssxref("<color>")}}</p> - -<h2 id="指南_(Guides)">指南 (Guides)</h2> - -<p><em>None.</em></p> - -<h2 id="规范_(Specifications)">规范 (Specifications)</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Colors')}}</td> - <td>{{Spec2('CSS3 Colors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性_(Browser_compatibility)">浏览器兼容性 (Browser compatibility)</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="另请阅读">另请阅读</h2> - -<ul> - <li>在 CSS 中， gradient 渐变色并非颜色，其实质是 <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>。</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html deleted file mode 100644 index 64120aad99..0000000000 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: 使用弹性盒子进行高级布局 -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox -tags: - - CSS3布局模型 - - Flexible_Box - - Flexible_Box_Layout - - Layout - - 弹性盒子 - - 弹性盒子模型 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -<p>使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。</p> - -<h3 id="浮动布局的问题">浮动布局的问题</h3> - -<ul> - <li><strong>难以控制。</strong>如果站点上存在一些不可预知的内容，那么布局将变的难以维护。</li> - <li><strong>源码顺序依赖</strong>。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。</li> - <li><strong>列等高问题</strong>。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。</li> - <li><strong>内容居中</strong>。使用浮动布局难以将内容水平且垂直居中。</li> -</ul> - -<h3 id="弹性盒子如何处理">弹性盒子如何处理</h3> - -<ul> - <li>通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。</li> - <li>给予弹性元素成比例的尺寸。</li> - <li>弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。</li> -</ul> - -<h3 id="弹性盒子属性">弹性盒子属性</h3> - -<p><img alt="placeholder" src="http://saki007ster.github.io/public/images/flex-container.png" title="Flexbox properties"></p> - -<ul> - <li><strong>主轴(main axis)，主轴区域(main dimension)</strong>。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。</li> - <li><strong>主轴起点(main-Start)，主轴终点(main-end)</strong>。弹性元素被放置于容器中从主轴起点到主轴终点放置。</li> - <li><strong>主轴尺寸(main size)，主轴尺寸属性(main size property)</strong>。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。</li> - <li><strong>侧轴(cross axis)，侧轴区域(cross dimension)</strong>。侧轴垂直于主轴。它在侧轴区域中延伸。</li> - <li><strong>侧轴起点(cross-Start)，侧轴终点(cross-end)</strong>。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。</li> - <li><strong>侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)</strong>。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性</li> -</ul> - -<h4 id="弹性容器属性">弹性容器属性</h4> - -<ul> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-direction">flex-direction</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-wrap">flex-wrap</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-flow">flex-flow</a></li> - <li><a href="https://css-tricks.com/almanac/properties/j/justify-content/">justify-content</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a></li> -</ul> - -<h4 id="弹性元素属性">弹性元素属性</h4> - -<ul> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-order">order</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-grow">flex-grow</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink">flex-shrink</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-basis">flex-basis</a></li> -</ul> - -<h2 id="弹性盒子混合">弹性盒子混合</h2> - -<p>对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：<a href="http://caniuse.com/flexbox" style="line-height: 1.5;">http://caniuse.com/flexbox</a></p> - -<p>将会使用：</p> - -<ul> - <li>后备、陈旧的语法（IE10，移动端WebKit内核浏览器－无包裹)</li> - <li>最终标准的语法（FF、Safari、Chrome、IE11、Opera）</li> -</ul> - -<p>启发于：</p> - -<ul> - <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> -</ul> - -<p>可以从这些地方获取帮助：</p> - -<ul> - <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> - <li><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> - <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> - <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> - <li><a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes">https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes</a></li> -</ul> - -<h3 id="弹性容器">弹性容器</h3> - -<p>“flex”值会引起一个元素生成一个盒级的弹性盒子。</p> - -<p>“inline-flex”会生成一个行内弹性盒子。</p> - -<p>display: flex | inline-flex <a href="http://w3.org/tr/css3-flexbox/#flex-containers">http://w3.org/tr/css3-flexbox/#flex-containers</a></p> - -<div> -<pre>@mixin flexbox { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; -} - -// 使用这样的混合模式 -%flexbox { @include flexbox; }</pre> -</div> - -<div> -<pre>@mixin inline-flex { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -moz-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -%inline-flex { @include inline-flex; }</pre> -</div> - -<h3 id="弹性盒子方向">弹性盒子方向</h3> - -<p>“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。</p> - -<p>值：row | row-reverse | column | column-reverse</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-direction-property">http://w3.org/tr/css3-flexbox/#flex-direction-property</a></p> - -<div> -<pre>@mixin flex-direction($value: row) { - @if $value == row-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: horizontal; - } @else if $value == column { - -webkit-box-direction: normal; - -webkit-box-orient: vertical; - } @else if $value == column-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: vertical; - } @else { - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - } - -webkit-flex-direction: $value; - -moz-flex-direction: $value; - -ms-flex-direction: $value; - flex-direction: $value; -} - -// 简短版本： -@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> -</div> - -<h3 id="弹性盒子换行">弹性盒子换行</h3> - -<p>“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。</p> - -<p>值：nowrap | wrap | wrap-reverse</p> - -<p>默认：nowrap</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-wrap-property">http://w3.org/tr/css3-flexbox/#flex-wrap-property</a></p> - -<div> -<pre>@mixin flex-wrap($value: nowrap) { - // No Webkit Box fallback. - -webkit-flex-wrap: $value; - -moz-flex-wrap: $value; - @if $value == nowrap { - -ms-flex-wrap: none; - } @else { - -ms-flex-wrap: $value; - } - flex-wrap: $value; -}</pre> -</div> - -<h3 id="弹性盒子流（简写）">弹性盒子流（简写）</h3> - -<p>“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。</p> - -<p>默认值：row nowrap</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-flow-property">http://w3.org/tr/css3-flexbox/#flex-flow-property</a></p> - -<div> -<pre>@mixin flex-flow($values: (row nowrap)) { - // No Webkit Box fallback. - -webkit-flex-flow: $values; - -moz-flex-flow: $values; - -ms-flex-flow: $values; - flex-flow: $values; -}</pre> -</div> - -<h3 id="弹性盒子顺序">弹性盒子顺序</h3> - -<p>“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。</p> - -<p>默认值：0</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#order-property">http://w3.org/tr/css3-flexbox/#order-property</a></p> - -<div> -<pre>@mixin order($int: 0) { - -webkit-box-ordinal-group: $int + 1; - -webkit-order: $int; - -moz-order: $int; - -ms-flex-order: $int; - order: $int; -}</pre> -</div> - -<h3 id="弹性盒子增长">弹性盒子增长</h3> - -<p>“flex-grow”属性设置增长因数，不接受负值。</p> - -<p>默认值：0</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-grow-property">http://w3.org/tr/css3-flexbox/#flex-grow-property</a></p> - -<div> -<pre>@mixin flex-grow($int: 0) { - -webkit-box-flex: $int; - -webkit-flex-grow: $int; - -moz-flex-grow: $int; - -ms-flex-positive: $int; - flex-grow: $int; -}</pre> -</div> - -<h3 id="弹性盒子收缩">弹性盒子收缩</h3> - -<p>“flex-shrink”属性设置了收缩因数，不接受负值。</p> - -<p>默认值：1</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-shrink-property">http://w3.org/tr/css3-flexbox/#flex-shrink-property</a></p> - -<div> -<pre>@mixin flex-shrink($int: 1) { - -webkit-flex-shrink: $int; - -moz-flex-shrink: $int; - -ms-flex-negative: $int; - flex-shrink: $int; -}</pre> -</div> - -<h3 id="弹性盒子伸缩">弹性盒子伸缩</h3> - -<p id="“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。"><span style="font-size: 14px; line-height: 1.5;">“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。</span></p> - -<p>值：类似“width”，默认值：<code>auto</code></p> - -<p><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">http://www.w3.org/TR/css3-flexbox/#flex-basis-property</a></p> - -<div> -<pre>@mixin flex-basis($value: auto) { - -webkit-flex-basis: $value; - -moz-flex-basis: $value; - -ms-flex-preferred-size: $value; - flex-basis: $value; -}</pre> -</div> - -<h3 id="弹性盒子“Flex”属性（简写）">弹性盒子“Flex”属性（简写）</h3> - -<p>“<code>flex</code>”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“<code>flex</code>”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。</p> - -<p>值：<code>none</code> | ||</p> - -<p>默认值：见独立属性（1 1 0）</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-property">http://w3.org/tr/css3-flexbox/#flex-property</a></p> - -<div> -<pre>@mixin flex($fg: 1, $fs: null, $fb: null) { - - // Set a variable to be used by box-flex properties - $fg-boxflex: $fg; - - // Box-Flex only supports a flex-grow value so lets grab the - // first item in the list and just return that. - @if type-of($fg) == 'list' { - $fg-boxflex: nth($fg, 1); - } - - -webkit-box-flex: $fg-boxflex; - -webkit-flex: $fg $fs $fb; - -moz-box-flex: $fg-boxflex; - -moz-flex: $fg $fs $fb; - -ms-flex: $fg $fs $fb; - flex: $fg $fs $fb; -}</pre> -</div> - -<h3 id="弹性盒子对齐方式">弹性盒子对齐方式</h3> - -<p>“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。</p> - -<p>提示：以前版本的语法不支持“space-*”值。</p> - -<p>值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#justify-content-property">http://w3.org/tr/css3-flexbox/#justify-content-property</a></p> - -<div> -<pre>@mixin justify-content($value: flex-start) { - @if $value == flex-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - } @else if $value == flex-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - } @else if $value == space-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - } @else if $value == space-around { - -ms-flex-pack: distribute; - } @else { - -webkit-box-pack: $value; - -ms-flex-pack: $value; - } - -webkit-justify-content: $value; - -moz-justify-content: $value; - justify-content: $value; -} - // Shorter version: - @mixin flex-just($args...) { @include justify-content($args...); }</pre> -</div> - -<h3 id="弹性元素对齐">弹性元素对齐</h3> - -<p>可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）</p> - -<p>值：flex-start | flex-end | center | baseline | stretch 默认值：stretch</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#align-items-property">http://w3.org/tr/css3-flexbox/#align-items-property</a></p> - -<div> -<pre>@mixin align-items($value: stretch) { - @if $value == flex-start { - -webkit-box-align: start; - -ms-flex-align: start; - } @else if $value == flex-end { - -webkit-box-align: end; - -ms-flex-align: end; - } @else { - -webkit-box-align: $value; - -ms-flex-align: $value; - } - -webkit-align-items: $value; - -moz-align-items: $value; - align-items: $value; -}</pre> -</div> - -<h3 id="弹性元素自对齐">弹性元素自对齐</h3> - -<p>用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。</p> - -<p>值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto</p> - -<div> -<pre>@mixin align-self($value: auto) { - // No Webkit Box Fallback. - -webkit-align-self: $value; - -moz-align-self: $value; - @if $value == flex-start { - -ms-flex-item-align: start; - } @else if $value == flex-end { - -ms-flex-item-align: end; - } @else { - -ms-flex-item-align: $value; - } - align-self: $value; -}</pre> -</div> - -<h3 id="弹性元素内容对齐">弹性元素内容对齐</h3> - -<p>“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。</p> - -<p>值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#align-content-property">http://w3.org/tr/css3-flexbox/#align-content-property</a></p> - -<div> -<pre>@mixin align-content($value: stretch) { - // No Webkit Box Fallback. - -webkit-align-content: $value; - -moz-align-content: $value; - @if $value == flex-start { - -ms-flex-line-pack: start; - } @else if $value == flex-end { - -ms-flex-line-pack: end; - } @else { - -ms-flex-line-pack: $value; - } - align-content: $value; -}</pre> -</div> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index 5a26114225..0000000000 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: 使用 CSS 弹性盒子 -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -tags: - - CSS - - CSS Flexible Boxes - - Flex - - Web - - flexbox - - 弹性 - - 弹性容器 - - 弹性盒子 - - 弹性项目 - - 指南 - - 盒子模型 - - 范例 - - 进阶 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -<div>{{CSSRef}}</div> - -<p><span>CSS3 <strong>弹性盒子</strong>(<strong>Flexible Box</strong> 或 <strong>Flexbox</strong>)，是一种</span>用于在页面上布置元素的<span><a href="/zh-CN/docs/Web/CSS/Layout_mode">布局模式</a>，</span>使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，<span>弹性</span>盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。</p> - -<p>许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。</p> - -<div class="note"><strong>注意：</strong> 虽然 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 弹性盒子布局规范</a> 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见<a href="http://dev.w3.org/csswg/css-flexbox/">最新编辑草案</a>），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的<a href="/zh-CN/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">兼容性表格</a>获取。</div> - -<h2 id="弹性盒布局概念">弹性盒布局概念</h2> - -<p>在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。</p> - -<p>块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。</p> - -<h2 id="弹性盒布局相关词汇">弹性盒布局相关词汇</h2> - -<p>关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 <code>flex-direction</code> 属性为 <code>row</code>的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。</p> - -<p><img alt="弹性布局相关名词" src="https://mdn.mozillademos.org/files/12998/flexbox.png" style="height: 333px; width: 563px;"></p> - -<dl> - <dt>弹性容器(Flex container)</dt> - <dd>包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 <code>flex</code> 或 <code>inline-flex</code> 来定义弹性容器。</dd> - <dt>弹性项目(Flex item)</dt> - <dd> - <p>弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。</p> - </dd> - <dt>轴(Axis)</dt> - <dd> - <p>每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为<strong>主轴(main axis)</strong>。垂直于<strong>主轴</strong>的那根轴称为<strong>侧轴(cross axis)</strong>。</p> - - <ul> - <li><code><a href="/zh-CN/docs/Web/CSS/flex-direction">flex-direction</a></code> 确立主轴。</li> - <li><a href="/zh-CN/docs/Web/CSS/justify-content"><code>justify-content</code></a> 定义了在当前行上，弹性项目沿主轴如何排布。</li> - <li><a href="/zh-CN/docs/Web/CSS/align-items"><code>align-items</code></a> 定义了在当前行上，弹性项目沿侧轴默认如何排布。</li> - <li><a href="/zh-CN/docs/Web/CSS/align-self"><code>align-self</code></a> 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 <code>align-items</code> 所确立的默认值。</li> - </ul> - </dd> - <dt>方向(Direction)</dt> - <dd> - <p>弹性容器的<strong>主轴起点(main start)</strong>/<strong>主轴终点(main end)</strong>和<strong>侧轴起点(cross start)</strong>/<strong>侧轴终点(cross end)</strong>描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 <code>writing-mode</code> 确立的方向（从左到右、从右到左，等等）。</p> - - <ul> - <li><a href="/zh-CN/docs/Web/CSS/order"><code>order</code></a> 属性将元素与序号关联起来，以此决定哪些元素先出现。</li> - <li><a href="/zh-CN/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性的简写，决定弹性项目如何排布。</li> - </ul> - </dd> - <dt>行(Line)</dt> - <dd> - <p>根据 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。</p> - </dd> - <dt>尺寸(Dimension)</dt> - <dd> - <p>根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为<strong>主轴尺寸(main size)</strong> ，对应侧轴的称为 <strong>侧轴尺寸(cross size)</strong>。</p> - - <ul> - <li><code><a href="/zh-CN/docs/Web/CSS/min-height">min-height</a></code> 与 <code><a href="/zh-CN/docs/Web/CSS/min-width">min-width</a></code> 属性初始值将为 0。</li> - <li><a href="/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>、<a href="/zh-CN/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> 属性的简写，描述弹性项目的整体的伸缩性。</li> - </ul> - </dd> -</dl> - -<h2 id="定义一个弹性盒子">定义一个弹性盒子</h2> - -<p>为要使用此样式的元素指派 CSS，需按以下方式设置 <a href="/zh-CN/docs/Web/CSS/display">display</a> 属性：</p> - -<pre class="brush: css">display : flex</pre> - -<p>或者</p> - -<pre class="brush: css">display : inline-flex</pre> - -<p>这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 <code>flex</code> 使弹性容器成为块级元素。值 <code>inline-flex</code> 使弹性容器成为单个不可分的行内级元素。</p> - -<div class="note"><strong>注意：</strong>厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：<code>display : -webkit-flex</code>。</div> - -<h2 id="弹性项目须知">弹性项目须知</h2> - -<p>弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 <code>display: none</code>。</p> - -<p>对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。</p> - -<p>相邻的弹性元素其外边距不会互相合并。使用 <code>auto</code> 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a>。</p> - -<p>不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 <code>align-</code> 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 <code>justify-</code> 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 <code>justify-content</code>，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 <code>justify-content</code> 属性了。</p> - -<p>再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。</p> - -<h2 id="弹性盒子相关属性">弹性盒子相关属性</h2> - -<h3 id="不影响弹性盒子的属性">不影响弹性盒子的属性</h3> - -<p>由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：</p> - -<ul> - <li><a href="/zh-CN/docs/Web/CSS/Using_CSS_multi-column_layouts">多栏布局模块</a>的 <code>column-*</code> 属性对弹性项目无效。</li> - <li>{{cssxref("float")}} 与 {{cssxref("clear")}} 对弹性项目无效。使用 <code>float</code> 将使元素的 <code>display</code> 属性计为<code>block</code>。</li> - <li>{{cssxref("vertical-align")}} 对弹性项目的对齐无效。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="基本的弹性布局示例">基本的弹性布局示例</h3> - -<p>这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> - - <span class="selector token"><span class="class token">.flex</span> - </span><span class="punctuation token">{</span> - <span class="comment token">/* 基本样式 */</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">350</span>px<span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#555</span><span class="punctuation token">;</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">14</span>px Arial<span class="punctuation token">;</span> - - <span class="comment token">/* 建立弹性框 */</span> - <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> - <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - - <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> - <span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="class token">.flex</span> > div - </span><span class="punctuation token">{</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> - - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30</span>px<span class="punctuation token">;</span> <span class="comment token">/* 让过渡表现良好。（从/到"width:auto"的过渡 - 至少在 Gecko 和 Webkit 上是有 bug 的。 - 更多信息参见 http://bugzil.la/731886 ） */</span> - - <span class="property token">-webkit-transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> - <span class="property token">transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/* colors */</span> - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(1)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#009246</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(2)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#F1F2F1</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(3)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#CE2B37</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:hover</span> - </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Flexbox nuovo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>uno<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>due<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>tre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h3 id="圣杯布局示例">圣杯布局示例</h3> - -<p>此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> - - <span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">24</span>px Helvetica<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#999999</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> </span><span class="punctuation token">{</span> - <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> - <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - <span class="property token">flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > article </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#cccc33</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#dddd88</span><span class="punctuation token">;</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > nav </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token">header, footer </span><span class="punctuation token">{</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#eebb55</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ffeebb</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/* 窄到已不足以支持三栏 */</span> - <span class="atrule token"><span class="rule token">@media</span> all and <span class="punctuation token">(</span><span class="property token">max-width</span><span class="punctuation token">:</span> 640px<span class="punctuation token">)</span></span> <span class="punctuation token">{</span> - - <span class="selector token"><span class="id token">#main</span>, <span class="id token">#page</span> </span><span class="punctuation token">{</span> - <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> - <span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > article, <span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> - <span class="comment token">/* 恢复到文档内的自然顺序 */</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside, header, footer </span><span class="punctuation token">{</span> - <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> - <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>header</span><span class="punctuation token">></span></span>header<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>header</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>main<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>article</span><span class="punctuation token">></span></span>article<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>article</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>nav</span><span class="punctuation token">></span></span>nav<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>nav</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>aside</span><span class="punctuation token">></span></span>aside<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>aside</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>footer</span><span class="punctuation token">></span></span>footer<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>footer</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="试验场地">试验场地</h2> - -<p>有几个在线弹性盒子试验场地可供进行各种实验：</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> - <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> -</ul> - -<h2 id="务必牢记">务必牢记</h2> - -<p>描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。</p> - -<p>弹性盒子的排布与<a href="https://developer.mozilla.org/zh-CN/docs/CSS/writing-mode">书写模式</a>是一致的，这意味着排布的<strong>主轴起点</strong>和<strong>主轴终点</strong>根据的是<strong>开始</strong>与<strong>结束</strong>的位置。</p> - -<p><strong>侧轴起点</strong>与<strong>侧轴终点</strong>依赖于<strong>开始</strong>或<strong>前面（before）</strong>的位置定义，而这个“<strong>前面”</strong>依赖于 <a href="/zh-CN/docs/Web/CSS/direction"><code>direction</code></a> 的值。</p> - -<p>只要 <code>break-</code> 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 <code>break-after</code>、<code>break-before</code> 和 <code>break-inside</code>，以及 CSS 2.1 中的 <code>page-break-before</code>、<code>page-break-after</code> 和 <code>page-break-inside</code> 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基础支持（单行弹性框）</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoDesktop("22.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>多行弹性框</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10<sup>[5]</sup><br> - 15 {{property_prefix("-webkit")}}</td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基础支持（单行弹性框）</td> - <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoMobile("22.0")}}</td> - <td> - <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> - 1.1</p> - </td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>多行弹性框</td> - <td>{{CompatGeckoMobile("28.0")}}</td> - <td>1.3</td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。</p> - -<p>[2] 直到 Firefox 22 为止，用户必须修改 <code>about:config</code> 设置，将 <code>layout.css.flexbox.enabled</code> 改为 <code>true</code> 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 <code>true</code>，而 Firefox 28 中取消了此设置项。</p> - -<p>[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 <a href="http://msdn.microsoft.com/zh-CN/library/ie/dn265027%28v=vs.85%29.aspx"> 已更新为 </a> 支持最终版本。</p> - -<p>[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。</p> - -<p>[5] 在 Opera 12.10 的<code>弹性盒子</code>初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。</p> - -<p>[6] 直到 Firefox 29 为止，在弹性项目上指定 <code>visibility: collapse</code> 将使其被视为 <code>display: none</code> 处理，而预期的行为是被视为 <code>visibility: hidden</code>。建议的处理方式是在弹性项目上使用 <code>visibility:hidden</code>，这样其行为应当与指派了 <code>visibility:collapse</code> 一致。更多信息，参考 {{bug(783470)}}.</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>各浏览器对弹性盒子的实现中的 bug 的信息，请参考 <a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a>。</li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html deleted file mode 100644 index 416b96e007..0000000000 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: 使用flexbox来布局web应用 -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -tags: - - CSS - - 弹性盒子 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -<p>{{CSSRef}}</p> - -<p>使用 <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、<a href="/en-US/docs/Web/CSS/position#Absolute_positioning">绝对定位</a> 和一些JavaScript hacks, 使用仅仅几行 <a href="/en-US/docs/Web/CSS">CSS</a> 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：</p> - -<ul> - <li>你想要将一个元素放在页面的中间</li> - <li>你想要一组在垂直方向可以一个紧挨一个的布局容器</li> - <li>你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠</li> -</ul> - -<p>这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 <em>flexbox</em> 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">the more general guide to using CSS flexible boxes</a>.</p> - -<h2 id="基础">基础</h2> - -<p>如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} <font face="Consolas, Liberation Mono, Courier, monospace">属性</font>, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。</p> - -<p>接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：</p> - -<ul> - <li>如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 <code>flex: none</code>，none 将会被解释为 <code>0 0 auto</code>.</li> - <li>如果想要一个固定大小的元素，则设置 <code>flex: 0 0 <em>size。</em></code>如：<code>flex 0 0 60px。</code></li> - <li>如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 <code>flex: auto，它代表</code> <code>1 1 auto</code>.</li> -</ul> - -<p>有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。</p> - -<h2 id="示例_1_在页面中把一个元素居中">示例 1: 在页面中把一个元素居中</h2> - -<p>在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。</p> - -<h3 id="CSS_内容">CSS 内容</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="结果">结果</h3> - -<p>{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}</p> - -<h2 id="示例2_垂直放置一系列的容器">示例2: 垂直放置一系列的容器</h2> - -<p>假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。</p> - -<h3 id="CSS_内容_2">CSS 内容</h3> - -<pre class="brush: css;highlight:[8,14,18]">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="HTML_内容_2">HTML 内容</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Increase container size</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> -</div> -</pre> - -<h3 id="Javascript_内容">Javascript 内容</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="结果_2">结果</h3> - -<p>{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}</p> - -<p>这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。</p> - -<h2 id="示例3_创建一个水平折叠的容器">示例3: 创建一个水平折叠的容器</h2> - -<p>在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。</p> - -<h3 id="CSS_内容_3">CSS 内容</h3> - -<pre class="brush: css;highlight:[4]">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="HTML_内容_3">HTML 内容</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Element 1</div> - <div class="fixed-size">Element 2</div> - <div class="fixed-size">Element 3</div> -</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> -</pre> - -<h3 id="Javascript_内容_2">Javascript 内容</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="结果_3">结果</h3> - -<p>{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}</p> - -<h2 id="参考">参考</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html deleted file mode 100644 index 1e53f47c6d..0000000000 --- a/files/zh-cn/conflicting/web/css/easing-function/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: <timing-function> -slug: conflicting/Web/CSS/easing-function -tags: - - CSS - - timing-function -translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function -original_slug: Web/CSS/timing-function ---- -<p>{{ CSSRef() }}</p> - -<p><span style="font-family: consolas,monaco,andale mono,monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><code><strong><timing-function></strong></code> </span><a href="/zh-CN/CSS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;" title="CSS">CSS</a> 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。</p> - -<p>这是一个表示时间输出比率的函数，表示为{{cssxref("<number>")}}，<code>0, 0</code> 代表初始状态，<code>1, 1 </code>代表终止状态。</p> - -<p><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 171px; width: 129px;"><img alt="" src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">走的</span>更远的，然后再回到最终状态。</p> - -<p>不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。</p> - -<h2 class="cleared" id="定时函数">定时函数</h2> - -<div style="width: 100%;"> -<p>CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。</p> - -<h3 id="cubic-bezier_定时函数"><code>cubic-bezier()</code> 定时函数</h3> - -<table class="withoutBorder"> - <tbody> - <tr> - <td> - <p><img alt="" class="internal lwrap" src="/files/3433/cubic-bezier,%20example.png" style="float: left;"></p> - </td> - <td> - <p><code>cubic-bezier()</code> 定义了一条 <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">立方贝塞尔曲线（cubic Bézier curve）</a>。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（<em>easing functions</em>）。</p> - - <p>一条立方贝塞尔曲线需要四个点来定义，P<sub>0</sub> 、P<sub>1</sub> 、P<sub>2</sub> 和 P<sub>3</sub>。P<sub>0</sub> 和 P<sub>3</sub> 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P<sub>0</sub> 是 <code>(0, 0)，表示初始时间和初始状态。</code>P<sub>3</sub> 是 <code>(1, 1)</code> ，表示终止时间和终止状态。</p> - - <p>并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。</p> - - <p>三次贝塞尔曲线的 P<sub>1</sub>或 P<sub>2</sub>坐标超出<code>[0, 1]</code> 范围可能会产生弹跳效果。</p> - - <p>当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h4 id="语法">语法</h4> - -<pre><code>cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)</code> -</pre> - -<p>其中，</p> - -<dl> - <dt style="margin-left: 40px;"><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的</sub></em></strong>P<sub>1</sub> 和 P<sub>2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。</sub></dt> - <dd style="margin-left: 40px;">Are {{cssxref("<number>")}} values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic Bézier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid.</dd> -</dl> - -<h4 id="示例">示例</h4> - -<p><code>CSS</code> 中允许使用这些贝塞尔曲线：</p> - -<pre><code>cubic-bezier(0.1, 0.7, 1.0, 0.1) </code>The canonical Bézier curve with four <number> in the [0,1] range. -cubic-bezier(0, 0, 1, 1) Using <integer> is valid as any <integer> is also a <number>. -cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects. -cubic-bezier(0.1, 4, 0.6, 2.45) Values > 1.0 for ordinates are also valid.</pre> - -<p>像这些贝塞尔曲线的定义是无效的：</p> - -<pre>cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios. -cubic-bezier(-0.2, 0.6, -0.1, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. -cubic-bezier(0.3, 2.1) The two points must be defined, there is no default value. -cubic-bezier(1.1, 0, 4, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. -</pre> - -<h3 id="The_steps_class_of_timing-functions">The <code>steps()</code> class of timing-functions</h3> - -<table class="withoutBorder"> - <tbody> - <tr> - <td><img alt="" src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></td> - <td><img alt="" src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"> - <table class="withoutBorder"> - <tbody> - <tr> - <td></td> - <td rowspan="2"> - <p><code>steps()</code> 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。</p> - </td> - </tr> - </tbody> - </table> - </td> - <td rowspan="2"></td> - </tr> - <tr style="text-align: center;"> - <td style="white-space: nowrap;"><code>steps(2, start)</code></td> - <td><code>steps(4, end)</code></td> - </tr> - </tbody> -</table> - -<h4 id="Syntax">Syntax</h4> - -<pre><code>steps(<em>number_of_steps</em>, <em>direction</em>)</code> -</pre> - -<p>where :</p> - -<dl> - <dt style="margin-left: 40px;"><strong><em>number_of_steps</em></strong></dt> - <dd style="margin-left: 40px;">Is a strictly positive {{cssxref("<integer>")}} representing the amount of equidistant treads composing the stepping function.</dd> - <dt style="margin-left: 40px;"><strong><em>direction</em></strong></dt> - <dd style="margin-left: 40px;">Is a keyword indicating if it the function is <a class="external" href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity" title="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">left- or right-continuous</a>: - <ul> - <li style="margin-left: 40px;"><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li> - <li style="margin-left: 40px;"><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li> - </ul> - </dd> -</dl> - -<h4 id="Examples">Examples</h4> - -<p>These timing functions are valid :</p> - -<pre>steps(5, end) There is 5 treads, the last one happens right before the end of the animation. -steps(2, start) A two-step staircase, the first one happening at the start of the animation. -</pre> - -<p>These timing function are invalid :</p> - -<pre>steps(2.0, end) The first parameter must be an <a title="integer"><integer></a> and cannot be a real value, even if it is equal to one. -steps(-3, start) The amount of steps must be non-negative. -steps(0, end) There must be at least one step. -steps(2) The second parameter is not optional. -steps(start, 3) Though of different types, the order of parameter is important. -step(1, end) Even if there is one step, the function name is steps, with the plural 's' -steps(3 end) The two parameters must be separated with a comma; one or several spaces is not enough. -</pre> - -<h3 id="常用定时函数关键字">常用定时函数关键字</h3> - -<h4 id="linear"><code>linear</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3425/cubic-bezier,linear.png" style="height: 332px; width: 249px;"></td> - <td> - <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="ease"><code>ease</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></td> - <td>此关键字表示定时函数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>。 这个函数类似于 <a href="/zh-CN/CSS/timing-function#ease-in-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in-out"><code>ease-in-out</code></a>， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。</td> - </tr> - </tbody> -</table> - -<h4 id="ease-in"><code>ease-in</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3426/cubic-bezier,ease-in.png" style="height: 332px; width: 249px;"></td> - <td> - <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.42, 0.0, 1.0, 1.0</code><code>)</code>。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="ease-in-out"><code>ease-in-out</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></td> - <td> - <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>。使用这个定时函数，动画开始的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-in" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in"><code>ease-in</code></a> 函数，动画结束时的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-out"><code>ease-out</code></a>函数。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="ease-out"><code>ease-out</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3427/cubic-bezer,ease-out.png" style="height: 332px; width: 249px;"></td> - <td> - <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>。动画开始很快，然后逐渐减慢，直到最终状态。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="step-start"><code>step-start</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr> - <td><img alt="" src="/files/3423/steps(1,start).png" style="height: 332px; width: 248px;">此关键字表示定时函数 <code>steps(1, start)</code>。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。</td> - <td></td> - </tr> - </tbody> -</table> - -<h4 id="step-end"><code>step-end</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3424/steps(1,end).png" style="height: 332px; width: 248px;"></td> - <td> - <p>此关键字表示定时函数 <code>steps(1, end)</code>。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>') }}</td> - <td>{{ Spec2('CSS3 Transitions') }}</td> - <td>Defined anonymously</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td>Defined anonymously, says to see definition in the CSS Transitions Module</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("css.types.timing-function", 2)}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li> - <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/guide/html/html5/index.html b/files/zh-cn/conflicting/web/guide/html/html5/index.html deleted file mode 100644 index ec94a52452..0000000000 --- a/files/zh-cn/conflicting/web/guide/html/html5/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: HTML5 & friends thematic classification -slug: conflicting/Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 -translation_of_original: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification -original_slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification ---- -<p>这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。</p> -<h2 id="HTML"><span class="author-g-lqfq0qqpckp8p3co">HTML</span></h2> -<h3 id="Audio_和_video"><span class="author-g-lqfq0qqpckp8p3co">Audio</span><span class="author-g-101xw018h73xu61x"> 和 video</span></h3> -<div class="ace-line"> - Firefox 3.5引入对HTML5<audio>和<video>元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：<span class="author-g-101xw018h73xu61x url"><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">在 Firefox 中使用audio和video</a></span></div> -<div class="ace-line"> - </div> -<h3 id="Canvas"><span class="author-g-101xw018h73xu61x">Canvas</span></h3> -<p><Canvas>是HTML新元素，可以用于通过脚本（常用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。</p> -<p>参考：</p> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></span> 元素</li> - <li><a href="/en/Canvas_tutorial" title="en/Canvas tutorial">Canvas 教程</a></li> -</ul> -<h3 id="WebGL_(独立规范)"><span class="author-g-101xw018h73xu61x">WebGL </span>(独立规范)</h3> -<div class="ace-line"> - webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 {{ HTMLElement("canvas") }} elements.</div> -<div class="ace-line" id="magicdomid483"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/WebGL" title="en/WebGL">WebGL</a></span></div> -<h3 id="Inline_SVG_and_MathML"><span class="author-g-101xw018h73xu61x">Inline SVG and MathML</span></h3> -<div class="ace-line"> - HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.</div> -<div class="ace-line" id="magicdomid543"> - <span class="author-g-101xw018h73xu61x">Reference: </span></div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/SVG" title="en/SVG">SVG</a></span></li> - <li><a href="/en/MathML" title="en/MathML">MathML</a></li> -</ul> -<h3 id="New_link_relations"><span class="author-g-101xw018h73xu61x">New link relations</span></h3> -<div class="ace-line" id="magicdomid407"> - Link relations complement the <a> tag and specify why you're pointing to another page.</div> -<div class="ace-line"> - Reference:</div> -<h3 id="Web_forms"><span class="author-g-101xw018h73xu61x">Web forms</span></h3> -<div class="ace-line"> - Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.</div> -<div class="ace-line" id="magicdomid169"> - <span class="author-g-101xw018h73xu61x">Reference:</span></div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a></span></li> -</ul> -<h3 id="Microformats_(separate_specification)"><span class="author-g-101xw018h73xu61x">Microformats (separate specification)</span></h3> -<div class="ace-line" id="magicdomid448"> - Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.</div> -<div class="ace-line"> - Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Using_microformats" title="en/Using_microformats">Using microformats</a></span></div> -<div class="ace-line"> - See also: <a class="external" href="http://www.microformats.org" title="http://www.microformats.org">http://www.microformats.org</a></div> -<h3 id="Semantic_tags"><span class="author-g-101xw018h73xu61x">Semantic tags</span></h3> -<div class="ace-line"> - The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.</div> -<div class="ace-line"> - Reference:</div> -<ul> - <li><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and Outlines of an HTML5 document</a></li> - <li>{{ HTMLElement("article") }}</li> - <li>{{ HTMLElement("aside") }}</li> - <li>{{ HTMLElement("figcaption") }}</li> - <li>{{ HTMLElement("figure") }}</li> - <li>{{ HTMLElement("footer") }}</li> - <li>{{ HTMLElement("header") }}</li> - <li>{{ HTMLElement("mark") }}</li> - <li>{{ HTMLElement("nav") }}</li> - <li>{{ HTMLElement("section") }}</li> - <li>{{ HTMLElement("time") }}</li> -</ul> -<h2 id="JavaScript_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">JavaScript </span>(separate specifications)</h2> -<h3 id="Client-Side_Storage"><span class="author-g-101xw018h73xu61x">Client-Side Storage</span></h3> -<div class="ace-line"> - Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.</div> -<div class="ace-line"> - Reference:</div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_the_Application_Cache" title="en/Using_the_Application_Cache">Offline resources in Firefox</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/DOM/Storage" title="en/DOM/Storage">DOM Storage</a></span></li> -</ul> -<h3 id="IndexedDB"><span class="author-g-101xw018h73xu61x">IndexedDB</span></h3> -<div class="ace-line" id="magicdomid361"> - <a class="external" href="http://dev.w3.org/2006/webapi/IndexedDB/">IndexedDB</a> is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</div> -<div class="ace-line"> - Reference: <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a></div> -<h3 id="Web_workers_(separate_specification)"><span class="author-g-101xw018h73xu61x">Web workers </span><span class="author-g-101xw018h73xu61x">(separate specification)</span></h3> -<div class="ace-line"> - Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.</div> -<div class="ace-line" id="magicdomid143"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/DOM/Using_web_workers" title="En/Using_web_workers">Using web workers</a></span></div> -<h3 id="New_events"><span class="author-g-101xw018h73xu61x">New events</span></h3> -<div class="ace-line"> - In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</div> -<div class="ace-line" id="magicdomid161"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></span></div> -<h3 id="Drag_and_drop"><span class="author-g-101xw018h73xu61x">Drag and drop</span></h3> -<div class="ace-line"> - Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</div> -<div class="ace-line"> - Reference: <span class="author-g-101xw018h73xu61x url"><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and Drop</a></span></div> -<h3 id="Protocol_handler"><span class="author-g-101xw018h73xu61x">Protocol handler</span></h3> -<div class="ace-line"> - <p>It's fairly common to find web pages link to resources using non-<code>http</code> protocols. You can think of this as a <em>desktop-based</em> protocol handler.</p> - <p>Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handler</a></span></p> - <h3 id="Geolocation">Geolocation</h3> -</div> -<div class="ace-line"> - The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked to confirm permission to report location information.</div> -<div class="ace-line" id="magicdomid294"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/Using_geolocation" title="En/Using_geolocation">Using geolocation</a></span></div> -<div class="ace-line"> - <span class="author-g-101xw018h73xu61x url">See also: <a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="Geolocation Spec">Geolocation Specification</a></span></div> -<div class="ace-line"> - <h3 id="Focus_attributes"><span class="author-g-101xw018h73xu61x">Focus attributes</span></h3> - <div class="ace-line"> - The focus atributes let a script understand if an element has the focus of the user and then act accordingly.</div> - <div class="ace-line" id="magicdomid231"> - <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></span></div> - <span class="author-g-101xw018h73xu61x"> </span></div> -<h2 id="CSS_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">CSS</span> (separate specifications)</h2> -<h3 id="New_CSS_selectors"><span class="author-g-101xw018h73xu61x">New CSS selectors</span></h3> -<div class="ace-line"> - The following page shows the CSS3 support in Firefox and the new elements for HTML5.</div> -<div class="ace-line" id="magicdomid759"> - <span class="author-g-101xw018h73xu61x">Ref</span><span class="author-g-101xw018h73xu61x">erence: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Mozilla_CSS_support_chart" title="en/Mozilla_CSS_support_chart">Mozilla CSS support chart</a></span></div> -<h3 id="Typography">Typography</h3> -<p>The following pages show some of the typography attributes introduced by CSS3.</p> -<div class="ace-line"> - Text wrap:</div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Word-wrap" title="en/CSS/word-wrap">Word-wrap</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-overflow" title="en/CSS/text-overflow">Text-overflow</a></span></li> - <li><a href="/en/CSS/@font-face" title="En/CSS/@font-face"><span class="author-g-101xw018h73xu61x url">@font-face</span></a></li> -</ul> -<h3 id="Layout"><span class="author-g-101xw018h73xu61x url">Layout</span></h3> -<div class="ace-line" id="magicdomid656"> - <span class="author-g-101xw018h73xu61x">Columns:</span></div> -<ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/CSS3_Columns">CSS3 Multi-columns</a></span></li> - <li><a href="/en/Using_flexbox" title="en/Using_flexbox">Flexbox</a></li> -</ul> -<h3 id="Visual">Visual</h3> -<div class="ace-line"> - The following pages show some of the visual attributes introduced by CSS3.</div> -<ul> - <li><span class="author-g-101xw018h73xu61x">Opacity:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/opacity" title="en/CSS/opacity">opacity</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Hue Saturation Color:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/color" title="en/CSS/color">color</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Rounded Corners:</span> <a href="/en/CSS/border-radius" title="En/CSS/Border-radius">border-radius</a></li> - <li><span class="author-g-101xw018h73xu61x">Gradients:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_gradients" title="en/Using_gradients">Using gradients</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Shadows:</span> - <ul> - <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-shadow" title="en/CSS/text-shadow">text-shadow</a></span></li> - <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">box-shadow</a></span></li> - </ul> - </li> - <li><span class="author-g-101xw018h73xu61x">Background:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/background" title="en/CSS/background">background</a></span></li> -</ul> -<h3 id="Dynamic_effects">Dynamic effects</h3> -<div class="ace-line"> - CSS also introduces dynamic effects:</div> -<ul> - <li><span class="author-g-101xw018h73xu61x">Transitions:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">CSS transitions</a></span></li> - <li><span class="author-g-101xw018h73xu61x">Animations:</span> <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li> - <li><span class="author-g-101xw018h73xu61x">Transforms:</span> <span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></span></li> -</ul> -<p>{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}</p> diff --git a/files/zh-cn/conflicting/web/guide/index.html b/files/zh-cn/conflicting/web/guide/index.html deleted file mode 100644 index 48ed6873e3..0000000000 --- a/files/zh-cn/conflicting/web/guide/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Web 开发 -slug: conflicting/Web/Guide -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: Web_Development ---- -<p><strong>Web 开发</strong> 包括开发网站和Web应用程序的方方面面。</p> -<p>在本文中，您将学到创建从简单到复杂的Web站点、使用最新Web技术的高度互动的网站。</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="文档主题">文档主题</h2> - <h3 id="技术">技术</h3> - <dl> - <dt> - <a class="internal" href="/zh-CN/docs/Web_Development/Introduction_to_Web_development" title="zh-CN/docs/Web Development/Introduction to Web development">Web 开发介绍</a></dt> - <dd> - 一份介绍怎样开发进行Web开发的指南。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/HTML" rel="internal">HTML</a></dt> - <dd> - 超文本标记语言是创建网页和其他显示在浏览器的文档的基础语言。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/CSS" rel="internal">CSS</a></dt> - <dd> - 层叠样式表的强大功能能使您在 Web 上安排布局和页面设计。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/JavaScript" rel="internal">JavaScript</a></dt> - <dd> - JavaScript 是最常用的 Web 应用程序开发的脚本语言；它也用于开发基于 Mozilla 的软件。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/DOM" rel="internal">DOM</a></dt> - <dd> - 文档对象模型是一个 HTML 和 XML 文档的 API，其提供了一个结构化的文档表示以供修改它的可见表示。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/AJAX" rel="internal">AJAX</a></dt> - <dd> - AJAX（异步的 JavaScript 与 XML 技术）并非一种技术，而是这两种技术的组合应用；通过 JavaScript 和其他时髦的 Web 技术共同创建动态 Web 应用程序。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/XHTML" title="zh-CN/docs/XHTML">XHTML</a></dt> - <dd> - 可扩展的超文本标记语言是一个基于 XML 的类 HTML 语言，同 HTML 相比其语法更加严格。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/SVG" rel="internal">SVG</a></dt> - <dd> - 可缩放矢量图形是一个描述二维矢量图形的 XML 标记语言。</dd> - </dl> - <h3 id="策略">策略</h3> - <dl> - <dt> - <a class="internal" href="/zh-CN/docs/Web_Standards" title="en-US/docs/Web Standards">Web 标准</a></dt> - <dd> - 了解如何使你的网站或者应用程序通过开放 Web 标准，兼容最大多数用户的访问。</dd> - <dt> - <a href="/zh-CN/docs/Web_Development/Responsive_Web_design" title="zh-CN/docs/Web development/Responsive Web design">响应性 Web 设计</a></dt> - <dd> - 使用 CSS 在所有硬件平台上呈现相同内容，从手机到宽屏、高分辨率的桌面显示器。</dd> - <dt> - <a href="/zh-CN/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">编写向前兼容的网站</a></dt> - <dd> - 建立即使浏览器更新也不会出现问题的网站的最佳实践。</dd> - <dt> - <a href="/zh-CN/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">移动 Web 开发</a></dt> - <dd> - 通过一些与面向桌面浏览器开发完全不同的独特方法，来开发面向移动设备的网站。</dd> - <dt> - <a class="internal" href="/zh-CN/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web 开发者常见问题解答</a></dt> - <dd> - Web开发者经常提的一些问题。当然还有答案喽！</dd> - </dl> - <p><span class="alllinks"><a href="/zh-CN/docs/tag/Web_Development" title="zh-CN/docs/tag/Web_Development">查看更多...</a></span></p> - </td> - <td> - <h2 class="Community" id="社区">社区</h2> - <ul> - <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks 博客（英文）</a></li> - <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT 工作组</a></li> - <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse（英文）</a></li> - </ul> - <h2 class="Tools" id="工具">工具</h2> - <ul> - <li><a href="/zh-CN/docs/Tools" title="zh-CN/docs/Tools">主要工具</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/zh-CN/firefox/addon/1843">Firebug 扩展</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/zh-CN/firefox/addon/60">Web Developer 扩展</a></li> - <li><a href="/zh-CN/docs/Venkman" rel="internal">Venkman</a>，一款 JavaScript 调试器</li> - <li><a href="/zh-CN/docs/DOM_Inspector" rel="internal" title="zh-CN/docs/DOM Inspector">DOM 查看器</a></li> - <li><a href="/zh-CN/docs/Tools/Scratchpad" title="zh-CN/docs/Tools/Scratchpad">暂存器</a></li> - </ul> - <p><span class="alllinks"><a href="/zh-CN/docs/tag/Web_Development:Tools" title="zh-CN/docs/tag/Web_Development:Tools">查看更多...</a></span></p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<p>{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development","es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/guide/mobile/index.html b/files/zh-cn/conflicting/web/guide/mobile/index.html deleted file mode 100644 index 47137e29a0..0000000000 --- a/files/zh-cn/conflicting/web/guide/mobile/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: 移动 Web 开发 -slug: conflicting/Web/Guide/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -<p>开发能在移动设备上浏览的网站需要一些方法来确保网站在移动设备上可以如同在桌面浏览器上一样正常运作。以下的文章介绍了部分方法：</p> -<ul> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">什么是 mobile-friendliness?</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">响应式设计</a></li> - <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/html/element/index.html b/files/zh-cn/conflicting/web/html/element/index.html deleted file mode 100644 index 4deec7c2ee..0000000000 --- a/files/zh-cn/conflicting/web/html/element/index.html +++ /dev/null @@ -1,592 +0,0 @@ ---- -title: HTML5 标签列表 -slug: conflicting/Web/HTML/Element -tags: - - HTML - - HTML5 - - Web - - 初学者 - - 指南 -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list -original_slug: Web/Guide/HTML/HTML5/HTML5_element_list ---- -<p>这里列出了所有<strong>标准化的 HTML5 元素</strong>，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 <a href="/zh-CN/docs/HTML/Element" title="HTML/Element">HTML 元素索引</a> 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。</p> - -<p>符号 <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a> 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。</p> - -<h2 id="根元素">根元素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("html")}}</td> - <td>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。</td> - </tr> - </tbody> -</table> - -<h2 id="文档元数据">文档元数据</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("head")}}</td> - <td>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。</td> - </tr> - <tr> - <td>{{HTMLElement("title")}}</td> - <td>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</td> - </tr> - <tr> - <td>{{HTMLElement("base")}}</td> - <td>定义页面上相对 URL 的基准 URL。</td> - </tr> - <tr> - <td>{{HTMLElement("link")}}</td> - <td>用于链接外部资源到该文档。</td> - </tr> - <tr> - <td>{{HTMLElement("meta")}}</td> - <td>定义其他 HTML 元素无法描述的元数据。</td> - </tr> - <tr> - <td>{{HTMLElement("style")}}</td> - <td>用于内联 CSS。</td> - </tr> - </tbody> -</table> - -<h2 id="脚本">脚本</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("script")}}</td> - <td>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。</td> - </tr> - <tr> - <td>{{HTMLElement("noscript")}}</td> - <td>定义当浏览器不支持脚本时显示的替代文字。</td> - </tr> - <tr> - <td>{{HTMLElement("template")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>通过 JavaScript 在运行时实例化内容的容器。</td> - </tr> - </tbody> -</table> - -<h2 id="章节">章节</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("body")}}</td> - <td> - <div>代表 HTML 文档的内容。在文档中只能有一个 <code><body></code> 元素。</div> - </td> - </tr> - <tr> - <td>{{HTMLElement("section")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义文档中的一个章节。</td> - </tr> - <tr> - <td>{{HTMLElement("nav")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义只包含导航链接的章节。</td> - </tr> - <tr> - <td>{{HTMLElement("article")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义可以独立于内容其余部分的完整独立内容块。</td> - </tr> - <tr> - <td>{{HTMLElement("aside")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</td> - </tr> - <tr> - <td><a href="/zh-CN/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> - <td>标题元素实现了六层文档标题，<code><h1></code> 是最大的标题，<code><h6></code> 是最小的标题。标题元素简要地描述章节的主题。</td> - </tr> - <tr> - <td>{{HTMLElement("header")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</td> - </tr> - <tr> - <td>{{HTMLElement("footer")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</td> - </tr> - <tr> - <td>{{HTMLElement("address")}}</td> - <td>定义包含联系信息的一个章节。</td> - </tr> - <tr> - <td>{{HTMLElement("main")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义文档中主要或重要的内容。</td> - </tr> - </tbody> -</table> - -<h2 id="组织内容">组织内容</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("p")}}</td> - <td>定义一个段落。</td> - </tr> - <tr> - <td>{{HTMLElement("hr")}}</td> - <td>代表章节、文章或其他长内容中段落之间的分隔符。</td> - </tr> - <tr> - <td>{{HTMLElement("pre")}}</td> - <td>代表其内容已经预先排版过，格式应当保留 。</td> - </tr> - <tr> - <td>{{HTMLElement("blockquote")}}</td> - <td>代表引用自其他来源的内容。</td> - </tr> - <tr> - <td>{{HTMLElement("ol")}}</td> - <td>定义一个有序列表。</td> - </tr> - <tr> - <td>{{HTMLElement("ul")}}</td> - <td>定义一个无序列表。</td> - </tr> - <tr> - <td>{{HTMLElement("li")}}</td> - <td>定义列表中的一个列表项。</td> - </tr> - <tr> - <td>{{HTMLElement("dl")}}</td> - <td>定义一个定义列表（一系列术语和其定义）。</td> - </tr> - <tr> - <td>{{HTMLElement("dt")}}</td> - <td>代表一个由下一个 <code><dd></code> 定义的术语。</td> - </tr> - <tr> - <td>{{HTMLElement("dd")}}</td> - <td>代表出现在它之前术语的定义。</td> - </tr> - <tr> - <td>{{HTMLElement("figure")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个和文档有关的图例。</td> - </tr> - <tr> - <td>{{HTMLElement("figcaption")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个图例的说明。</td> - </tr> - <tr> - <td>{{HTMLElement("div")}}</td> - <td>代表一个通用的容器，没有特殊含义。</td> - </tr> - </tbody> -</table> - -<h2 id="文字形式">文字形式</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("a")}}</td> - <td>代表一个链接到其他资源的<em>超链接</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("em")}}</td> - <td>代表<em>强调</em> 文字。</td> - </tr> - <tr> - <td>{{HTMLElement("strong")}}</td> - <td>代表<em>特别重要</em> 文字。</td> - </tr> - <tr> - <td>{{HTMLElement("small")}}</td> - <td>代表<em>注释</em> ，如免责声明、版权声明等，对理解文档不重要。</td> - </tr> - <tr> - <td>{{HTMLElement("s")}}</td> - <td>代表<em>不准确或不相关</em> 的内容。</td> - </tr> - <tr> - <td>{{HTMLElement("cite")}}</td> - <td>代表<em>作品标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("q")}}</td> - <td>代表内联的<em>引用</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("dfn")}}</td> - <td>代表一个术语包含在其最近祖先内容中的<em>定义</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("abbr")}}</td> - <td>代表<em>省略</em> 或<em>缩写</em> ，其完整内容在 <code>title</code> 属性中。</td> - </tr> - <tr> - <td>{{HTMLElement("data")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>关联一个内容的<em>机器可读的等价形式</em> （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</td> - </tr> - <tr> - <td>{{HTMLElement("time")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>日期</em> 和<em>时间</em> 值；机器可读的等价形式通过 <code>datetime</code> 属性指定。</td> - </tr> - <tr> - <td>{{HTMLElement("code")}}</td> - <td>代表<em>计算机代码</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("var")}}</td> - <td>代表<em>代码中的变量</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("samp")}}</td> - <td>代表程序或电脑的<em>输出</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("kbd")}}</td> - <td>代表<em>用户输入</em> ，一般从键盘输出，但也可以代表其他输入，如语音输入。</td> - </tr> - <tr> - <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> - <td>分别代表<em>下标</em> 和<em>上标</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("i")}}</td> - <td>代表一段<em>不同性质</em> 的文字，如技术术语、外文短语等。</td> - </tr> - <tr> - <td>{{HTMLElement("b")}}</td> - <td>代表一段<em>需要被关注</em> 的文字。</td> - </tr> - <tr> - <td>{{HTMLElement("u")}}</td> - <td>代表一段需要<em>下划线</em>呈现的文本注释，如标记出拼写错误的文字等。</td> - </tr> - <tr> - <td>{{HTMLElement("mark")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一段需要被高亮的<em>引用</em> 文字。</td> - </tr> - <tr> - <td>{{HTMLElement("ruby")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表被<em>ruby 注释</em> 标记的文本，如中文汉字和它的拼音。</td> - </tr> - <tr> - <td>{{HTMLElement("rt")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>ruby 注释</em> ，如中文拼音。</td> - </tr> - <tr> - <td>{{HTMLElement("rp")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表 ruby 注释两边的<em>额外插入文本</em> ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</td> - </tr> - <tr> - <td>{{HTMLElement("bdi")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表需要<em>脱离</em> 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</td> - </tr> - <tr> - <td>{{HTMLElement("bdo")}}</td> - <td>指定子元素的<em>文本方向</em> ，显式地覆盖默认的文本方向。</td> - </tr> - <tr> - <td>{{HTMLElement("span")}}</td> - <td>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</td> - </tr> - <tr> - <td>{{HTMLElement("br")}}</td> - <td>代表<em>换行</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("wbr")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>建议换行 (Word Break Opportunity)</em> ，当文本太长需要换行时将会在此处添加换行符。</td> - </tr> - </tbody> -</table> - -<h2 id="编辑">编辑</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("ins")}}</td> - <td>定义<em>增加</em> 到文档的内容。</td> - </tr> - <tr> - <td>{{HTMLElement("del")}}</td> - <td>定义从文档<em>移除</em> 的内容。</td> - </tr> - </tbody> -</table> - -<h2 id="嵌入内容">嵌入内容</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("img")}}</td> - <td>代表一张<em>图片</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("iframe")}}</td> - <td>代表一个<em>内联的框架</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("embed")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个<em>嵌入</em> 的外部资源，如应用程序或交互内容。</td> - </tr> - <tr> - <td>{{HTMLElement("object")}}</td> - <td>代表一个<em>外部资源</em> ，如图片、HTML 子文档、插件等。</td> - </tr> - <tr> - <td>{{HTMLElement("param")}}</td> - <td>代表 <code><object></code> 元素所指定的插件的<em>参数</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("video")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一段<em>视频</em> 及其视频文件和字幕，并提供了播放视频的用户界面。</td> - </tr> - <tr> - <td>{{HTMLElement("audio")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一段<em>声音</em> ，或<em>音频流</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("source")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>媒体源</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("track")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>文本轨道（字幕）</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("canvas")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>位图区域</em> ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</td> - </tr> - <tr> - <td>{{HTMLElement("map")}}</td> - <td>与 <code><area></code> 元素共同定义<em>图像映射</em> 区域。</td> - </tr> - <tr> - <td>{{HTMLElement("area")}}</td> - <td>与 <code><map></code> 元素共同定义<em>图像映射</em> 区域。</td> - </tr> - <tr> - <td>{{SVGElement("svg")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义一个嵌入式<em>矢量图</em> 。</td> - </tr> - <tr> - <td>{{MathMLElement("math")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>定义一段<em>数学公式</em> 。</td> - </tr> - </tbody> -</table> - -<h2 id="表格">表格</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("table")}}</td> - <td>定义<em>多维数据</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("caption")}}</td> - <td>代表<em>表格的标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("colgroup")}}</td> - <td>代表表格中一组<em>单列或多列</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("col")}}</td> - <td>代表表格中的<em>列</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("tbody")}}</td> - <td>代表表格中一块<em>具体数据</em> （表格主体）。</td> - </tr> - <tr> - <td>{{HTMLElement("thead")}}</td> - <td>代表表格中一块<em>列标签</em> （表头）。</td> - </tr> - <tr> - <td>{{HTMLElement("tfoot")}}</td> - <td>代表表格中一块<em>列摘要</em> （表尾）。</td> - </tr> - <tr> - <td>{{HTMLElement("tr")}}</td> - <td>代表表格中的<em>行</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("td")}}</td> - <td>代表表格中的<em>单元格</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("th")}}</td> - <td>代表表格中的<em>头部单元格</em> 。</td> - </tr> - </tbody> -</table> - -<h2 id="表单">表单</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("form")}}</td> - <td>代表一个<em>表单</em> ，由控件组成。</td> - </tr> - <tr> - <td>{{HTMLElement("fieldset")}}</td> - <td>代表<em>控件组</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("legend")}}</td> - <td>代表 <code><fieldset></code> 控件组的<em>标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("label")}}</td> - <td>代表表单控件的<em>标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}</td> - <td>代表允许用户编辑数据的<em>数据区</em> （文本框、单选框、复选框等）。</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>代表<em>按钮</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td>代表<em>下拉框</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("datalist")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表提供给其他控件的<em>一组预定义选项</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>代表一个<em>选项分组</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>代表一个 <code><select></code> 元素或 <code><datalist></code> 元素中的一个<em>选项</em></td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>代表<em>多行文本框</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("keygen")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个<em>密钥对生成器</em> 控件。</td> - </tr> - <tr> - <td>{{HTMLElement("output")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>计算值</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("progress")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>进度条</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表<em>滑动条</em> 。</td> - </tr> - </tbody> -</table> - -<h2 id="交互元素">交互元素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("details")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个用户可以(点击)获取额外信息或控件的<em>小部件</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("summary")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表 <code><details></code> 元素的<em>综述</em> 或<em>标题</em> 。</td> - </tr> - <tr> - <td>{{HTMLElement("menuitem")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表一个用户可以点击的菜单项。</td> - </tr> - <tr> - <td>{{HTMLElement("menu")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> - <td>代表菜单。</td> - </tr> - </tbody> -</table> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li><a href="/zh-CN/docs/HTML/HTML5" title="HTML/HTML5">一系列 HTML5 文档</a>。</li> - <li><a href="/zh-CN/docs/HTML/Element" title="HTML/Element">所有 HTML 标签的参考</a>，包括 HTML5 中不再有效的元素。</li> -</ul> diff --git a/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html deleted file mode 100644 index b18bccd87b..0000000000 --- a/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Quirks Mode and Standards Mode -slug: conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode -original_slug: Quirks_Mode_and_Standards_Mode ---- -<p>在web产生初期, <span class="long_text short_text" id="result_box" lang="zh-CN"><span>网页</span><span>通常被</span><span>写</span><span>成</span><span>两个版本</span></span>: 其中一个是为网景公司的 Netscape Navigator浏览器而写, 另外一个是为微软公司的 Internet Explorer浏览器而写. 随后,当W3C组织制定了web标准,各浏览器并不能立即的严格按标准执行,因为这样做会让一些已经存在的不符合新标准的网页无法正常显示.为此<span class="long_text short_text" id="result_box" lang="zh-CN"><span>,</span><span>浏览器</span><span>推出</span><span>了</span><span>两种</span><span>模式来</span><span>分别对待</span><span>新</span><span>的</span><span>符合标准的</span><span>网也与</span><span>旧的标准指定之前遗留的</span><span>网页</span><span>.</span></span></p> -<p>如今,浏览器的渲染引擎已发展成为拥有三种渲染模式:quirks mode, almost standards mode, 和full standards mode. 在<strong>quirks mode(</strong>混杂模式<strong>)</strong>中,渲染引擎会模拟Navigator 4 和 Internet Explorer 5这些古老浏览器的不标准的渲染行为来渲染网页,以防止现代浏览器不能正常渲染已经存在的一些古老网页.在<strong>full standards mode(标准规范模式)</strong>中,渲染引擎会尽量使用HTML 和 CSS 规范规定的行为来渲染网页.在<strong>almost standards mode(接近标准模式)</strong>中,渲染引擎有极少数行为不遵循标准.</p> -<h3 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">浏览器如何决定使用何种模式?</h3> -<p>对于HTML文档,浏览器使用该文档开头定义的DOCTYPE来决定是否使用quirks mode还是standards mode来渲染. 为了让你的网页完全按照full standards mode被渲染, 请确保页面开始处包含如下例子中的DOCTYPE:</p> -<pre><!DOCTYPE html> -<html> - <head> - <meta charset=UTF-8> - <title>Hello World!</title> - </head> - <body> - </body> -</html> -</pre> -<p>例子中的DOCTYPE是这样定义的:<code><!DOCTYPE html></code>,这是有史以来最简洁的DOCTYPE了,而且也是HTML5规范所推荐的写法.早起版本的HTML标准还推荐了其他的一些DOCTYPE写法,不过.<code>只有在<!DOCTYPE html>这样的</code>DOCTYPE定义下,才可以很好的保证所有浏览器都会按照full standards mode去渲染网页,即使是老掉牙的Internet Explorer 6也会如此.再没有什么理由去使用更复杂的DOCTYPE了,因为使用它们可能让你的网页触发一些浏览器的almost standards mode 或者 quirks mode.</p> -<p>确保你已经将DOCTYPE 放在HTML文档的最开始处,如果DOCTYPE前面放置了注释或XML声明等其他元素,Internet Explorer 9或更低版本将会按照quirks mode渲染该网页.</p> -<p>在HTML5中，使用DOCTYPE的唯一目的就是要激活full standards mode.旧版本的HTML标准给DOCTYPE添加了额外的意义，但是除了在quirks mode 和 standards mode之间切换,没有浏览器使用DOCTYPE做过其他的任何事情.</p> -<h4 id="XHTML">XHTML</h4> -<p>如果你将自己的网页 <code>Content-Type</code> HTTP头的值设定为 <code>application/xhtml+xml</code> MIME类型,你不需要在网页文档内部定义任何DOCTYPE就可以开启standards mode渲染网页.这是由于<code>Content-Type</code> HTTP头的优先级是最高的.但是这样的设置会导致Internet Explorer 8及其以下版本因不认识如上的MIME类型而显示下载文件的窗口,Internet Explorer 9及其以上版本解决了这个问题.</p> -<p>如果你将自己的XHML网页的<code>Content-Type</code> HTTP头设定为<code>text/html的</code>MIME类型,浏览器将会按照HTML文件去读取它,如果想使用standards mode,你必须指定DOCTYPE.</p><h3 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">不同模式之间的差别</h3> -<p>查看 <a href="/en/Mozilla_Quirks_Mode_Behavior" title="en/Mozilla_Quirks_Mode_Behavior">list of quirks</a> 和 <a href="/en/Gecko's_"Almost_Standards"_Mode" title="en/Gecko%27s_%22Almost_Standards%22_Mode">almost standards mode</a> 了解不同模式之间的差别.</p> -<p>{{ languages( { "en": "en/Quirks_Mode_and_Standards_Mode" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/http/cors/index.html b/files/zh-cn/conflicting/web/http/cors/index.html deleted file mode 100644 index eb37a40e1d..0000000000 --- a/files/zh-cn/conflicting/web/http/cors/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Server-Side Access Control -slug: conflicting/Web/HTTP/CORS -tags: - - AJAX - - CORS - - HTTP - - PHP -translation_of: Web/HTTP/CORS -translation_of_original: Web/HTTP/Server-Side_Access_Control -original_slug: Web/HTTP/Server-Side_Access_Control ---- -<p>{{HTTPSidebar}}</p> - -<p>浏览器会针对从 {{domxref("XMLHttpRequest")}} 或<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>中发起的跨网站请求发送特定的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP标头</a>。它还希望看到使用跨站点响应发送回的特定HTTP标头。这些标头的概述，包括启动请求和处理来自服务器的响应的示例JavaScript代码, 以及每个头的讨论，可以在HTTP访问控制（<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>）文章中找到，应该作为本文的配套文章阅读。</p> - -<p>HTTP访问控制文章是很好的使用指南。本文介绍利用PHP处理访问控制请求和制定访问控制响应。本文的目标读者是服务器程序员或管理员。虽然在PHP代码示例所示,类似的概念适用于ASP.net,Perl、Python、Java等;一般来说,这些概念可以应用于任何服务器端编程环境处理HTTP请求和动态制定的HTTP响应。</p> - -<h3 id="讨论HTTP标头"><strong>讨论HTTP标头</strong></h3> - -<p>了解HTTP 头部信息, 建议先阅读这篇文章 <a href="https://developer.mozilla.org/En/HTTP_access_control">covering the HTTP headers used by both clients (such as Firefox 3.5 and beyond) and servers</a></p> - -<div> </div> - -<h3 id="工作代码示例"><strong>工作代码示例</strong></h3> - -<p>随后的章节中PHP代码（和JavaScript调用服务器）可查看<a href="http://arunranga.com/examples/access-control/">相关代码</a>，这些代码在实现了XMLHttpRequest的浏览器上都可运行，像Firefox 3.5及以上。</p> - -<div> </div> - -<h3 id="简单的跨站请求"><strong>简单的跨站请求</strong></h3> - -<p><a class="internal" href="/En/HTTP_access_control#Simple_requests" title="En/HTTP access control#Simple requests">简单的访问控制请求</a> 在下列情况下会被发起：</p> - -<ul> - <li>请求方式为 HTTP/1.1 <code style="font-style: normal;">GET </code>或者<code style="font-style: normal;"> POST</code>，如果是<code style="font-style: normal;">POST</code>，则请求的Content-Type为以下之一： <code style="font-style: normal;">application/x-www-form-urlencoded</code>, <code style="font-style: normal;">multipart/form-data</code>, 或<code style="font-style: normal;">text/plain</code></li> - <li>在请求中，不会发送自定义的头部（如X-Modified）</li> -</ul> - -<p>以下情况，请求会返回相关响应信息</p> - -<ul> - <li>如果资源是允许公开访问的(就像任何允许GET访问的 HTTP资源),返回Access-Control-Allow-Origin:*头信息就足够了,除非是一些需要Cookies和HTTP身份验证信息的请求。</li> - <li> - <div class="tran-result">如果资源访问被限制基于相同的域名,或者如果要访问的资源需要凭证(或设置凭证),那么就有必要对请求头信息中的ORIGIN进行过滤,或者至少响应请求的来源(例如Access-Control-Allow-Origin:http://arunranga.com)。另外,将发送Access-Control-Allow-Credentials:TRUE头信息，这在后续部分将进行讨论。</div> - </li> -</ul> - -<p> <a class="internal" href="/En/HTTP_access_control#Simple_requests" title="En/HTTP access control#Simple requests">简单的访问控制请求</a> 介绍了在客户端和服务端进行信息交换的HEADER. 下面是一段用来处理简单请求的PHP代码。</p> - -<pre class="brush: php"><?php - -// 我们将只授予 arunranga.com 域的访问权限，因为我们认为它通过 application/xml 方式来访问这些资源是安全的。 - -if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") -{ - - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Content-type: application/xml'); - readfile('arunerDotNetResource.xml'); -} -else -{ -header('Content-Type: text/html'); -echo "<html>"; -echo "<head>"; -echo " <title>Another Resource</title>"; -echo "</head>"; -echo "<body>", - "<p>This resource behaves two-fold:"; -echo "<ul>", - "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>"; -echo " <li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,"; -echo "you get this HTML document</li>", - "</ul>", -"</body>", -"</html>"; -} -?> -</pre> - -<p>上面的代码通过检查浏览器发送的 <code>ORIGIN</code> 头部信息（通过<code> $_SERVER['HTTP_ORIGIN']</code> ) 是否匹配 '<a class="external" href="http://arunranga.com" rel="freelink" style="font-size: 14px; line-height: 1.5;">http://arunranga.com</a>' 得知，如果是，返回 Access-Control-Allow-Origin: <a class="external" href="http://arunranga.com" rel="freelink" style='font-size: 14px; line-height: 1.5; font-family: "Courier New","Andale Mono",monospace;'>http://arunranga.com</a> 。如果你的浏览器支持访问控制<span style="font-size: 14px; line-height: 1.5;">，你可以访问 <a class="external" href="http://arunranga.com/examples/access-control/" style="font-size: 14px; line-height: 1.5;" title="http://arunranga.com/examples/access-control/">这里 .</a></span></p> - -<h3 id="预请求"><strong>预请求</strong></h3> - -<p><a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">预请求</a> 发生在下列情况中：</p> - -<ul> - <li>使用GET或POST以外的方法；利用POST发送<code style="font-style: normal;">application/x-www-form-urlencoded</code>, <code style="font-style: normal;">multipart/form-data</code>, or <code style="font-style: normal;">text/plain</code>之外的Content-Type；例如，post body的Content-type为<code style="font-style: normal;">application/xml</code></li> - <li>发送自定义的头信息，如x-pingaruner</li> -</ul> - -<p><a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">预请求访问控制</a> 这篇文章介绍了在客户端和服务器间进行交换的<span style="font-size: 14px; line-height: 1.5;">头信息，响应preflight requests请求的服务器资源会有这些动作：</span></p> - -<ul> - <li> 基于 <code>ORIGIN </code>进行过滤</li> - <li> preflight请求的响应内容，包括必要的 <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> (保证系统正常运行)，如果需要凭据的话，也会包括 <code>Access-Control-Allow-Credentials </code>头信息</li> - <li>响应实际请求，包括处理 POST数据等。</li> -</ul> - -<p>下面是相关的PHP内容， <a class="internal" href="/En/HTTP_access_control#Preflighted_requests" title="En/HTTP access control#Preflighted requests">preflighted request</a>:</p> - -<pre class="brush: php"><?php -if($_SERVER['REQUEST_METHOD'] == "GET") -{ - header('Content-Type: text/plain'); - echo "This HTTP resource is designed to handle POSTed XML input from arunranga.com and not be retrieved with GET"; - -} -elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") -{ - // 告诉客户端我们支持来自 arunranga.com 的请求并且预请求有效期将仅有20天 - if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") - { - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); - header('Access-Control-Allow-Headers: X-PINGARUNER'); - header('Access-Control-Max-Age: 1728000'); - header("Content-Length: 0"); - header("Content-Type: text/plain"); - //exit(0); - } - else - { - header("HTTP/1.1 403 Access Forbidden"); - header("Content-Type: text/plain"); - echo "You cannot repeat this request"; - - } -} -elseif($_SERVER['REQUEST_METHOD'] == "POST") -{ - /* 通过首先获得XML传送过来的blob来处理POST请求，然后做一些处理, 最后将结果返回客户端 - */ - if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") - { - $postData = file_get_contents('php://input'); - $document = simplexml_load_string($postData); - - // 对POST过来的数据进行一些处理 - - $ping = $_SERVER['HTTP_X_PINGARUNER']; - - - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Content-Type: text/plain'); - echo // 处理之后的一些响应 - } - else - die("POSTing Only Allowed from arunranga.com"); -} -else - die("No Other Methods Allowed"); - -?> -</pre> - -<p>可以看到，就像POST一样，针对OPTIONS preflight请求，同样返回对应的头信息。这样 以来，处理preflight就像处理普通的request请求一样，在针对OPTIONS请求的响应信息中，服务器通过客户端，实际的请求可以用POST的形式发送，同时可附加X-PINGARUNERP这样的头信息。如果浏览器支持的话，可访问<a class="external" href="http://arunranga.com/examples/access-control/" style="line-height: 1.5;" title="http://arunranga.com/examples/access-control/"> 这里</a></p> - -<h3 id="凭证请求"><strong>凭证请求</strong></h3> - -<p>带凭据的请求，将Cookies和HTTP认证信息一起发送出去的跨域请求，根据请求方式，可以是<span style="line-height: 1.5;"> </span><a class="internal" href="/En/HTTP_access_control#Simple_requests" style="line-height: 1.5;" title="En/HTTP access control#Simple requests">Simple</a><span style="line-height: 1.5;"> 或 </span><a class="internal" href="/En/HTTP_access_control#Preflighted_requests" style="line-height: 1.5;" title="En/HTTP access control#Preflighted requests">Preflighted</a><span style="line-height: 1.5;">,</span></p> - -<p>发送 <a class="internal" href="/En/HTTP_access_control#Simple%20requests" title="En/HTTP access control#Simple requests">简单请求</a> 时, Firefox 3.5 (或以上)会发送带Cookies信息的请求， (如果<code>withCredentials</code> 设以true). 如果服务器响应真的是可信任的, 客户端接受并进行输出。 在 <a class="internal" href="/En/HTTP_access_control#Preflighted%20requests" title="En/HTTP access control#Preflighted requests">预请求</a> 中,服务器可以<span style="line-height: 1.5;">针对</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">OPTIONS</code><span style="line-height: 1.5;"> 请求，返回</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">Access-Control-Allow-Credentials: true</code><span style="line-height: 1.5;"> 信息</span></p> - -<p>下面是处理请求的PHP内容:</p> - -<pre class="brush: php"><?php - -if($_SERVER['REQUEST_METHOD'] == "GET") -{ - - // First See if There Is a Cookie - //$pageAccess = $_COOKIE['pageAccess']; - if (!isset($_COOKIE["pageAccess"])) { - - setcookie("pageAccess", 1, time()+2592000); - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Cache-Control: no-cache'); - header('Pragma: no-cache'); - header('Access-Control-Allow-Credentials: true'); - header('Content-Type: text/plain'); - echo 'I do not know you or anyone like you so I am going to mark you with a Cookie :-)'; - - } - else - { - - $accesses = $_COOKIE['pageAccess']; - setcookie('pageAccess', ++$accesses, time()+2592000); - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Access-Control-Allow-Credentials: true'); - header('Cache-Control: no-cache'); - header('Pragma: no-cache'); - header('Content-Type: text/plain'); - echo 'Hello -- I know you or something a lot like you! You have been to ', $_SERVER['SERVER_NAME'], ' at least ', $accesses-1, ' time(s) before!'; - } - -} -elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") -{ - // Tell the Client this preflight holds good for only 20 days - if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") - { - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Access-Control-Allow-Methods: GET, OPTIONS'); - header('Access-Control-Allow-Credentials: true'); - header('Access-Control-Max-Age: 1728000'); - header("Content-Length: 0"); - header("Content-Type: text/plain"); - //exit(0); - } - else - { - header("HTTP/1.1 403 Access Forbidden"); - header("Content-Type: text/plain"); - echo "You cannot repeat this request"; - - } -} -else - die("This HTTP Resource can ONLY be accessed with GET or OPTIONS"); - - - -?> -</pre> - -<p>需要注意的是，在带凭据请求中， <code>Access-Control-Allow-Origin:</code> 头不能是通配符 "*"，必须是一个有效的域名。 可参考这里 <a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">running here</a></p> - -<h3 id="Apache示例"><strong>Apache示例</strong></h3> - -<h4 id="限制对某些URI的访问"><strong>限制对某些URI的访问</strong></h4> - -<p>最有效的方法之一，利用Apache rewrite, 环境变量，还有headers使<code style="font-style: normal; line-height: 1.5;">Access-Control-Allow-*</code><span style="line-height: 1.5;"> 对某些特定的URI生效，比如，以无认证信息形式利用GET跨域请求api(.*).json。</span></p> - -<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True] -Header set Access-Control-Allow-Origin "*" env=CORS -Header set Access-Control-Allow-Methods "GET" env=CORS -Header set Access-Control-Allow-Credentials "false" env=CORS -</pre> - -<h3 id="参见"><strong>参见</strong></h3> - -<ul> - <li><a class="external" href="http://arunranga.com/examples/access-control/" title="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li> - <li><a class="internal" href="/En/HTTP_access_control" title="En/HTTP Access Control">HTTP Access Control covering the HTTP Headers</a></li> - <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></li> - <li><a class="external" href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox" title="http://www.webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox">Web Fonts</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/http/csp/index.html b/files/zh-cn/conflicting/web/http/csp/index.html deleted file mode 100644 index c9e88056a9..0000000000 --- a/files/zh-cn/conflicting/web/http/csp/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 内容安全策略 (CSP) -slug: conflicting/Web/HTTP/CSP -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP -original_slug: Web/Security/CSP ---- -<div>{{gecko_minversion_header("2.0")}}</div> - -<p><b>内容安全策略</b> (CSP, Content Security Policy) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。 这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。</p> - -<p>尽管内容安全策略在 Firefox 4 中已经包含，使用 <code>X-Content-Security-Policy</code> 头部来实现，但它使用的是过时的 CSP 标准。Firefox 23 包含了更新的 CSP 实现，使用的是 W3C CSP 1.0 标准中描述的没有前缀的 <code>Content-Security-Policy</code> 头部和指令。</p> - -<h2 id="内容安全策略主题">内容安全策略主题</h2> - -<dl> - <dt><a href="/zh-CN/docs/Security/CSP/Introducing_Content_Security_Policy">介绍内容安全策略</a></dt> - <dd>概述什么是 CSP，以及它如何让你的网站变得更安全。</dd> - <dt><a href="/zh-CN/docs/Security/CSP/CSP_policy_directives">CSP 策略指令</a></dt> - <dd>CSP 策略指令参考。</dd> - <dt><a href="/zh-CN/docs/Security/CSP/Using_Content_Security_Policy">使用内容安全策略</a></dt> - <dd>你可以通过配置策略集调整 CSP 的行为。这让你可以按需对个别类型的资源使用宽松或严格的安全策略。这篇文章讲述了如何建立 CSP 和如何激活你网站的 CSP。</dd> - <dt><a href="/zh-CN/docs/Security/CSP/Using_CSP_violation_reports">使用 CSP 违规报告</a></dt> - <dd>如何使用 CSP 违规报告来监视攻击你网站的尝试和攻击者。</dd> - <dt><a href="/zh-CN/docs/Security/CSP/Default_CSP_restrictions">默认 CSP 限制 </a>{{obsolete_inline("15.0")}}</dt> - <dd>CSP 强制实施的默认限制的细节</dd> -</dl> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li><a href="/zh-CN/docs/Security">Security</a></li> - <li><a href="/zh-CN/docs/HTTP_access_control">HTTP access control</a></li> - <li><a class="link-https" href="http://www.w3.org/TR/CSP/">CSP 1.0 specification</a></li> - <li><a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html">CSP 1.1 specification</a></li> - <li><a href="/docs/Apps/CSP">CSP restrictions for Open Web Apps</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html b/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html deleted file mode 100644 index aad26533cd..0000000000 --- a/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Using CSP violation reports -slug: conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP/Using_CSP_violation_reports -original_slug: Web/Security/CSP/Using_CSP_violation_reports ---- -<p>{{ gecko_minversion_header("2.0") }}{{ draft() }}</p> - -<p>CSP其中的一个强大的特性是它为web站点管理员提供了生成和报告详细的站点攻击的描述信息。这些报告通过HTTP的POST请求发送到预先你指定的一个或多个服务器上，这些服务器可以通过 <a href="/en/Security/CSP/CSP_policy_directives#report-uri" title="en/Security/CSP/CSP policy directives#report-uri"><code>report-uri</code></a> 策略来制定。发送的报告是JSON格式的，对于非ASCII字符，其使用了默认的JSON UTF-8编码。本文将向你展示如何在你的站点上配置报告，以及报告的格式。</p> - -<p>对于支持CSP的浏览器，只要你制定了合法的 <a href="/en/Security/CSP/CSP_policy_directives#report-uri" style="text-decoration: underline;" title="en/Security/CSP/CSP policy directives#report-uri"><code>report-uri</code></a> 指令，任何违背该策略的攻击操作都会被浏览器所报告。</p> - -<h2 id="开启报告">开启报告</h2> - -<p>默认情况下，攻击是不会被报告的。要开启报告模式，你要指定 <a href="/en/Security/CSP/CSP_policy_directives#report-uri" title="en/Security/CSP/CSP policy directives#report-uri"><code>report-uri</code></a> 指令，这个指令包含了至少一个用于接收报告的URI:</p> - -<pre>Content-Security-Policy: default-src self; report-uri http://reportcollector.example.com/collector.cgi -</pre> - -<p>然后，你要搭建接受报告的服务器；它可以对报告进行存储和并进行适时的处理。</p> - -<p>注意：Firefox 23以前的版本所使用的报告头为 X-Content-Security-Policy。这个头在将来将被废弃。</p> - -<h2 id="攻击报告的语法">攻击报告的语法</h2> - -<p>报告的JSON对象包含了以下的数据:</p> - -<dl> - <dt><code>document-uri</code></dt> - <dd>当前攻击所发生的文档的URI。</dd> - <dt><code>referrer</code></dt> - <dd>当前攻击所发生的文档的来源页面的URI。</dd> - <dt><code>blocked-uri</code></dt> - <dd>被CSP策略所拦截的资源的URI。如果被拦截资源的URI属于与当前文档不同的来源，则所拦截的资源URI会被削减至只剩scheme,host和port三部分。</dd> - <dt><code>violated-directive</code></dt> - <dd>攻击所针对的策略部分的名称</dd> - <dt><code>original-policy</code></dt> - <dd>由X-Content-Security-Policy头指定的原始策略。</dd> -</dl> - -<h2 id="Sample_violation_report">Sample violation report</h2> - -<h2 id="攻击报告的样例">攻击报告的样例</h2> - -<div>在CSP规范中，已经有一个样例展示攻击报告。这里我们来看另一个例子。</div> - -<div> </div> - -<div>假设有一个页面叫做<a class="external" href="http://example.com/signup.html" rel="freelink" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">http://example.com/signup.html</a>. 它使用了一下的策略，它禁止从除cdn.example.com以外的域加载样式表。</div> - -<div> -<pre>Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports -</pre> -</div> - -<div>signup.html的HTML则像下面这样：</div> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Sign Up</title> - <link rel="stylesheet" href="css/style.css"> - </head> - <body> - ... Content ... - </body> -</html> -</pre> - -<div><span style="line-height: 22.0080013275147px;">看到问题了么？在策略中指明样式表只能从cdn.example.com加载，而这个页面则试图从它本域（http://example.com）下载样式表. 浏览器基于强制CSP的开启，在这个页面被访问时，将以下的报告通过POST请求发送到 </span><a href="http://example.com/_/csp-reports" rel="freelink" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">http://example.com/_/csp-reports</a><span style="line-height: 22.0080013275147px;"> 下</span></div> - -<pre>{ - "csp-report": { - "document-uri": "http://example.com/signup.html", - "referrer": "", - "blocked-uri": "http://example.com/css/style.css", - "violated-directive": "style-src cdn.example.com", - "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports" - } -} -</pre> - -<p><span style="line-height: 22.0080013275147px;">我们可以看到，这个报告在blocked-uri中包含了错误资源的整个路径。而这并非总是这样。例如，当signup.html试图从</span><a href="http://anothercdn.example.com/stylesheet.css" style="text-decoration: underline;"><code>http://anothercdn.example.com/stylesheet.css</code></a><span style="line-height: 22.0080013275147px;">加载css的时候，浏览器只会记录来源(http://anothercdn.example.com)而不会记录完整的路径。CSP规范中对这一行为进行了</span><a href="http://www.w3.org/TR/CSP/#violation-reports">解释</a>。总结一下<span style="line-height: 22.0080013275147px;">，CSP的作用是放置跨域信息的泄露。值得注意的是，规范中的</span> <a href="http://www.w3.org/TR/CSP/#sample-violation-report">攻击报告范例</a> 有一处错误(其中blocked-uri应该是"http://evil.example.com")。</p> - -<h2 id="更多参考">更多参考</h2> - -<ul> - <li><a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Introducing Content Security Policy</a></li> - <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li> - <li><a href="/en/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">CSP policy directives</a></li> -</ul> - -<div class="noinclude"> -<p>{{ languages( { "ja": "ja/Security/CSP/Using_CSP_violation_reports" } ) }}</p> -</div> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html b/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html deleted file mode 100644 index 8b035b39df..0000000000 --- a/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 内容安全策略介绍 -slug: conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 -tags: - - 介绍 - - 内容安全策略 - - 安全 -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy -original_slug: Web/Security/CSP/Introducing_Content_Security_Policy ---- -<p>{{ gecko_minversion_header("2") }}</p> - -<p><strong>内容安全策略</strong> (CSP) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。 这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。</p> - -<p>CSP被设计成向后兼容；不支持的浏览器依然可以运行使用了它的服务器页面，反之亦然。不支持CSP的浏览器会忽略它，像平常一样运行，默认对网页内容使用标准的同源策略。如果网站不提供CSP头部，浏览器同样会使用标准的<a href="/zh-CN/docs/Same_origin_policy_for_JavaScript">同源策略</a>。</p> - -<p>开启CSP就如配置您的页面服务来返回<code>Content-Security-Policy</code> HTTP 头部一样简单. (Firefox 23之前的版本使用的是<code>X-Content-Security-Policy</code> ). 查看 <a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a> 获取如何配置和开启CSP的细节</p> - -<div class="note"><strong>提示：</strong> 内容安全策略<a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element">标准特点</a> 是一种能被 {{ HTMLElement("meta") }}元素来配置的一种协议，但这种做法仍未被Firefox支持， 支持这种做法是被添加在<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=663570" title="https://bugzilla.mozilla.org/show_bug.cgi?id=663570">bug 663570</a>.</div> - -<h2 id="减少跨域脚本">减少跨域脚本</h2> - -<p>CSP的主要目标是减少和报告XSS攻击. XSS攻击利用浏览器对从服务器接受的内容的信任。恶意的脚本在受害的浏览器被执行, 因为浏览器相信内容源，甚至当内容源并不是从它应该来的地方过来的。</p> - -<p>CSP使服务器管理员能够通过制定浏览器能够执行的可信赖脚本的域名来减少或者消除由XSS可能出现的矢量。 一个兼容CSP的浏览器将只会执行加载与白名单域名的源文件的脚本，忽略那些其他的脚本（包括内联脚本和事件操控HTML属性）</p> - -<p>作为一种最终的保护，想要禁止脚本的站点可以选择全局禁止脚本执行</p> - -<h2 id="减少数据包监听攻击">减少数据包监听攻击</h2> - -<p>为了重新约束内容被下载的域名, 服务端能够制定那种协议能够被使用；例如（理论上，从安全的立足点来看），一个服务制定所有的内容都通过HTTPS协议来加载</p> - -<div class="note"><strong>提示：</strong>一个完整地数据传输安全策略不单单包括通HTTPS加强数据的传输，还可以使所有cookie带上安全标志并且提供从HTTP页面到对应HTTPS页面的自动重定向。</div> - -<div class="note"><strong>提示：</strong>站点可能也会使用 <a href="/en/Security/HTTP_Strict_Transport_Security" title="/en/Security/HTTP_Strict_Transport_Security">Strict-Transport-Security</a> HTTP头部来确保浏览器只通过一个加密渠道来连接他们</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li> - <li><a href="/en/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">CSP policy directives</a></li> - <li><a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a></li> -</ul> - -<h2 id="Specification">Specification</h2> - -<ul> - <li>{{ spec("https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/latest.html", "Content Security Policy 1.1 (Editor's Draft)") }}</li> - <li>{{ spec("http://www.w3.org/TR/CSP/", "Content Security Policy 1.0 (Candidate Recommendation)") }}</li> -</ul> - -<div class="noinclude"> -<p>{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}</p> -</div> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/http/status/index.html b/files/zh-cn/conflicting/web/http/status/index.html deleted file mode 100644 index cb0c385f77..0000000000 --- a/files/zh-cn/conflicting/web/http/status/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: HTTP response codes -slug: conflicting/Web/HTTP/Status -translation_of: Web/HTTP/Status -translation_of_original: Web/HTTP/HTTP_response_codes -original_slug: Web/HTTP/HTTP_response_codes ---- -<p>HTTP状态码(响应码)用来表明这个<a href="/zh-cn/HTTP" title="zh-cn/HTTP">HTTP</a> 请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误.</p> -<p> </p> -<p><span class="long_text short_text" id="result_box" lang="zh-CN"><span>下表列出了</span><span>所有HTTP</span></span><span class="long_text short_text" lang="zh-CN"><span>状态码</span><span>,以及他们</span><span>各自所代表的含义</span><span>:</span></span></p> -<table class="standard-table" style="width: 100%;"> <thead> <tr> <th scope="col">状态码 </th> <th scope="col">原因短语</th> <th scope="col">代表含义</th> <th scope="col">HTTP 版本 </th> </tr> </thead> <tbody> <tr> <th colspan="4">消息响应</th> </tr> <tr> <td id="100">100 </td> <td>Continue<br> (继续)</td> <td>客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在请求完成后向客户端发送一个最终响应.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="101">101</td> <td>Switching Protocol<br> (切换协议)</td> <td>服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到 在Upgrade消息头中定义的那些协议。: 只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP版本比旧版本更有优势，或者切换到一个实时且同步的协议以传送利用此类特 性的资源。</td> <td>HTTP/1.1 可用</td> </tr> <tr> <th colspan="4">成功响应</th> </tr> <tr> <td id="200">200</td> <td>OK<br> (成功)</td> <td>请求成功.成功的意义根据请求所使用的方法不同而不同. <ul> <li>GET: 资源已被提取,并作为响应体传回客户端.</li> <li>HEAD: <span class="long_text short_text" id="result_box" lang="zh-CN"><span>实体</span><span>头</span><span>已作为响应头传回客户端</span></span></li> <li>POST: 经过服务器处理客户端传来的数据,适合的资源作为响应体传回客户端.</li> <li>TRACE: <span class="long_text short_text" id="result_box" lang="zh-CN"><span>服务器</span><span>收到</span><span>请求消息</span></span>作为响应体传回客户端.</li> </ul> PUT, DELETE, 和 OPTIONS 方法永远不会返回 200 状态码.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="201">201</td> <td>Created<br> (已创建)</td> <td>请求成功，而且有一个新的资源已经依据请求的需要而建立，通常这是 PUT 方法得到的响应码.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="202">202</td> <td>Accepted<br> (已创建)</td> <td>服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行。在异步操作的场合下，没有比发送这个状态码更方便的做法了。:返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），而不必让客户端一直保持与服务器的连接直到批处理操作全部完成。在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息，以及指向处理状态监视器或状态预测的指针，以便用户能够估计操作是否已经完成。</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="203">203</td> <td>Non-Authoritative Information<br> (未授权信息)</td> <td> <p>服务器已成功处理了请求,但返回的实体头部元信息不是在原始服务器上有效的确定集合，而是来自本地或者第三方的拷贝,如果不是上述情况,使用200状态码才是最合适的.</p> </td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> <td id="204">204</td> <td>No Content<br> (无内容)</td> <td>该响应没有响应内容,只有响应头,响应头也可能是有用的.用户代理可以根据新的响应头来更新对应资源的缓存信息.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="205">205</td> <td>Reset Content<br> (重置内容)</td> <td>告诉用户代理去重置发送该请求的窗口的文档视图.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="206">206</td> <td>Partial Content<br> (部分内容)</td> <td>当客户端通过使用range头字段进行文件分段下载时使用该状态码</td> <td>HTTP/1.1 可用</td> </tr> <tr> <th colspan="4">重定向</th> </tr> <tr> <td id="300">300</td> <td>Multiple Choice<br> (多种选择)</td> <td>该请求有多种可能的响应,用户代理或者用户必须选择它们其中的一个.服务器没有任何标准可以遵循去代替用户来进行选择.</td> <td>HTTP/1.0 and later</td> </tr> <tr> <td id="301">301</td> <td>Moved Permanently<br> (永久移动)</td> <td>该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的<code>Location</code>:头字段里找到.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="302">302</td> <td>Found<br> (临时移动)</td> <td>该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的<code>Location:</code>头字段里找到.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="303">303</td> <td>See Other<br> (查看其他位置)</td> <td>服务器发送该响应用来引导客户端使用GET方法访问另外一个URI.</td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> <td id="304">304</td> <td>Not Modified<br> (未修改)</td> <td>告诉客户端,所请求的内容距离上次访问并没有变化. 客户端可以直接从浏览器缓存里获取该资源.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="305">305</td> <td>Use Proxy<br> (使用代理)</td> <td>所请求的资源必须统过代理才能访问到.由于安全原因,该状态码并未受到广泛支持.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="306">306</td> <td><em>unused</em><br> (未使用)</td> <td><span class="long_text short_text" id="result_box" lang="zh-CN"><span>这个</span><span>状态码</span><span>已经不再被使用</span><span>,</span><span>当初它被用</span><span>在</span><span>HTTP 1.1规范</span><span>的</span><span>旧版本</span><span>中.</span></span></td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="307">307</td> <td>Temporary Redirect<br> (临时重定向)</td> <td> <p>服务器发送该响应用来引导客户端使用相同的方法访问另外一个URI来获取想要获取的资源.新的URL会在响应的<code>Location:</code>头字段里找到.与302状态码有相同的语义,且前后两次访问必须使用相同的方法(GET POST).</p> </td> <td>HTTP/1.1 可用</td> </tr> <tr> <td>308</td> <td>Permanent Redirect<br> (永久重定向)</td> <td> <p>所请求的资源将永久的位于另外一个URI上.新的URL会在响应的<code>Location:</code>头字段里找到.与301状态码有相同的语义,且前后两次访问必须使用相同的方法(GET POST).</p> <div class="note"><strong>注意:</strong> 这是个试验性的状态码,这里是<a class="external" href="http://greenbytes.de/tech/webdav/#draft-reschke-http-status-308" title="http://greenbytes.de/tech/webdav/#draft-reschke-http-status-308">规范草案</a>. <a href="/en/Firefox_14_for_developers" title="en/Firefox_14_for_developers">Firefox14</a>已经实现对该状态码的支持.</div> </td> <td> <p>HTTPbis <a class="external" href="http://greenbytes.de/tech/webdav/draft-reschke-http-status-308-05.html" title="http://greenbytes.de/tech/webdav/draft-reschke-http-status-308-05.html"></a><br> (试验草案)</p> </td> </tr> <tr> <th colspan="4">客户端错误</th> </tr> <tr> <td id="400">400</td> <td>Bad Request<br> (错误请求)</td> <td>因发送的请求语法错误,服务器无法正常读取.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="401">401</td> <td>Unauthorized<br> (未授权)</td> <td>需要身份验证后才能获取所请求的内容,类似于403错误.不同点是.401错误后,只要正确输入帐号密码,验证即可通过.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="402">402</td> <td>Payment Required<br> (需要付款)</td> <td><span class="long_text" id="result_box" lang="zh-CN"><span>该状态</span><span>码</span><span>被保留以</span><span>供将来使用.</span><span>创建此代码</span><span>最初的目的是</span><span>为</span><span>数字</span><span>支付系统而用</span><span>,</span><span>然而,到现在也没投入使用</span><span>.</span></span></td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> <td id="403">403</td> <td>Forbidden<br> (禁止访问)</td> <td>客户端没有权利访问所请求内容,服务器拒绝本次请求.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="404">404</td> <td>Not Found<br> (未找到)</td> <td>服务器找不到所请求的资源.由于经常发生此种情况,所以该状态码在上网时是非常常见的.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="405">405</td> <td>Method Not Allowed<br> (不允许使用该方法)</td> <td>该请求使用的方法被服务器端禁止使用,RFC2616中规定, <code>GET</code> 和 <code>HEAD</code> 方法不能被禁止.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="406">406</td> <td>Not Acceptable<br> (无法接受)</td> <td>在进行<a href="/zh-cn/HTTP/Content_negotiation#Server-driven_negotiation" title="https://developer.mozilla.org/zh-cn/HTTP/Content_negotiation#Server-driven_negotiation"><span class="st">服务器驱动内容协商</span></a>后,没有发现合适的内容传回给客户端.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="407">407</td> <td>Proxy Authentication Required<br> (要求代理身份验证)</td> <td> <p>类似于状态码 401,不过需要通过代理才能进行验证.</p> </td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="408">408</td> <td>Request Timeout<br> (请求超时)</td> <td>客户端没有在服务器预备等待的时间内完成一个请求的发送.这意味着服务器将会切断和客户端的连接. 在其他浏览器中,这种响应更常见一些, 例如Chrome 和 IE9, 目的是为了使用 <a class="external" href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/" title="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP 预连机制</a> <span class="long_text short_text" id="result_box" lang="zh-CN"><span>加快浏览速度</span></span> (查看{{ bug("634278") }}, Firefox在未来版本中会实现这种机制). 同时注意,一些服务器不发送此种响应就直接切断连接.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="409">409</td> <td>Conflict<br> (冲突)</td> <td>该请求与服务器的当前状态所冲突.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="410">410</td> <td>Gone<br> (已失效)</td> <td>所请求的资源已经被删除.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="411">411</td> <td>Length Required<br> (需要内容长度头)</td> <td>因服务器在本次请求中需要 <code>Content-Length</code> 头字段,而客户端没有发送.所以,服务器拒绝了该请求.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="412">412</td> <td>Precondition Failed<br> (预处理失败)</td> <td>服务器没能满足客户端在获取资源时在请求头字段中设置的先决条件.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="413">413</td> <td>Request Entity Too Large<br> (请求实体过长)</td> <td>请求实体大小超过服务器的设置的最大限制,服务器可能会关闭HTTP链接并返回<code>Retry-After</code> 头字段.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="414">414</td> <td>Request-URI Too Long<br> (请求网址过长)</td> <td>客户端请求所包含的URI地址太长,以至于服务器无法处理.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="415">415</td> <td>Unsupported Media Type<br> (媒体类型不支持)</td> <td>服务器不支持客户端所请求的媒体类型,因此拒绝该请求.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="416">416</td> <td>Requested Range Not Satisfiable<br> (请求范围不合要求)</td> <td>请求中包含的<code>Range</code>头字段无法被满足,通常是因为<code>Range</code>中的数字范围超出所请求资源的大小.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="417">417</td> <td>Expectation Failed<br> (预期结果失败)</td> <td>在请求头<code> Expect</code> 中指定的预期内容无法被服务器满足.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <th colspan="4">服务器端错误</th> </tr> <tr> <td id="500">500</td> <td>Internal Server Error<br> (内部服务器错误)</td> <td>服务器遇到未知的无法解决的问题.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="501">501</td> <td>Implemented<br> (未实现)</td> <td>服务器不支持该请求中使用的方法,比如<code>POST</code> 和 <code>PUT.只有</code><code>GET</code> 和 <code>HEAD</code> 是RFC2616规范中规定服务器必须实现的方法.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="502">502</td> <td>Bad Gateway<br> (网关错误)</td> <td>服务器作为网关且从上游<span class="st">服务器获取到了一个无效的HTTP响应</span>.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="503">503</td> <td>Service Unavailable<br> (服务不可用)</td> <td>由于临时的服务器维护或者过载,服务器当前无法处理请求.这个状况是临时的,并且将在一段时间以后恢复.如果能够预计延迟时间,那么响应中可以包含一个<code>Retry-After:</code>头用以标明这个延迟时间.如果没有给出这个<code>Retry-After:</code>信息，那么客户端应当以处理500响应的方式处理它.同时,这种情况下,一个友好的用于解释服务器出现问题的页面应当被返回,并且,缓存相关的HTTP头信息也应该包含,因为通常这种错误提示网页不应当被客户端缓存.</td> <td>HTTP/0.9 可用</td> </tr> <tr> <td id="504">504</td> <td>Gateway Timeout <br> (网关超时)</td> <td>服务器作为网关且不能从上游<span class="st">服务器</span>及时的得到响应返回给客户端.</td> <td>HTTP/1.1 可用</td> </tr> <tr> <td id="505">505</td> <td>HTTP Version Not Supported<br> (HTTP版本不受支持)</td> <td>服务器不支持客户端发送的HTTP请求中所使用的HTTP协议版本.</td> <td>HTTP/1.1 可用 </td> </tr> </tbody> -</table> -<p> </p> -<p>{{ languages( { "en": "en/HTTP/HTTP_response_codes"} ) }}</p> diff --git a/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html b/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html deleted file mode 100644 index cfe969feee..0000000000 --- a/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 关于本指南 -slug: conflicting/Web/JavaScript/Guide/Introduction -tags: - - JavaScript - - 初学者 - - 指南 -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About -original_slug: Web/JavaScript/Guide/About ---- -<p>JavaScript 是一种跨平台的，基于对象的脚本语言。本指南介绍了所有您使用 JavaScript 所需要了解的事情。</p> - -<h2 id="JavaScript_各版本中的新特性">JavaScript 各版本中的新特性</h2> - - -<p></p><ul> -<li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.8">New in JavaScript 1.8</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1 的新特性</a></li><li><a href="/zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5 的新特性</a></li> -</ul><p></p> - -<h2 id="您应该已经了解的事情">您应该已经了解的事情</h2> - -<p>本指南假设您具有以下背景：</p> - -<ul> - <li>对互联网和万维网（WWW）有基本的理解。</li> - <li>对于超文本标记语言（HTML）的较好认知。</li> - <li>一些编程经验。如果你刚开始接触编程，请学习<a href="https://developer.mozilla.org/zh-CN/docs/JavaScript">JavaScript</a>页面所链接的教程</li> -</ul> - -<h2 id="JavaScript_版本">JavaScript 版本</h2> - -<table class="standard-table"> - <caption>表格 1 JavaScript 和 Navigator 版本对照</caption> - <thead> - <tr> - <th scope="col">JavaScript 版本</th> - <th scope="col">Navigator 版本</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.0</td> - <td>Navigator 2.0</td> - </tr> - <tr> - <td>JavaScript 1.1</td> - <td>Navigator 3.0</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td>Navigator 4.0-4.05</td> - </tr> - <tr> - <td>JavaScript 1.3</td> - <td>Navigator 4.06-4.7x</td> - </tr> - <tr> - <td>JavaScript 1.4</td> - <td> </td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>Navigator 6.0<br> - Mozilla （开源浏览器）</td> - </tr> - <tr> - <td>JavaScript 1.6</td> - <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>，及其它基于 Mozilla 1.8 的产品</td> - </tr> - <tr> - <td>JavaScript 1.7</td> - <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>，及其它基于 Mozilla 1.8.1 的产品</td> - </tr> - <tr> - <td>JavaScript 1.8</td> - <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>，及其它基于 Gecko 1.9 的产品</td> - </tr> - </tbody> -</table> - -<h2 id="哪里可以找到_JavaScript_的信息">哪里可以找到 JavaScript 的信息</h2> - -<p>JavaScript 文档包括以下书目：</p> - -<ul> - <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript 指南</a> （即本指南）提供了关于 JavaScript 语言及其对象的有关信息。</li> - <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript 参考</a> 提供 有关JavaScript 语言的参考资料。</li> -</ul> - -<p>如果您刚刚开始接触 JavaScript，可以从<a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"> JavaScript 指南</a> 开始。一旦掌握了基础知识，您可以从 <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript 参考</a> 中获得更多关于特定的对象和语句的细节。</p> - -<h2 id="学习_JavaScript_的窍门">学习 JavaScript 的窍门</h2> - -<p>开始学习 JavaScript 很容易：您只需要一个流行的 Web 浏览器即可。这本指南中包含了一些仅在 Firefox（以及其它基于 Gecko 的浏览器）的近期版本中才有的特性，因此，建议您使用最新的 Firefox 浏览器。</p> - -<p>在Firefox中内嵌了两个用于测验JavaScript非常有效的工具： Web终端和Scratchpad。</p> - -<h3 id="Web终端">Web终端</h3> - -<p><a href="/en-US/docs/Tools/Web_Console">web终端</a>会显示有关当前装载网页的信息，并且还包含<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#The_command_line_interpreter">命令行</a>，您可以用它在当前的网页中执行 JavaScript 语句。</p> - -<p>要打开 web 终端，请在 Firefox 中的“工具”菜单中选择 “Web Developer“ 中的 "Web Console"。它显示在浏览器窗口的底部。在终端的底部是一个命令行，你可以输入 JavaScript, 而在上面的面板中可以看到输出。</p> - -<p><img alt="Image:ErrorConsole.png" class="internal" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="height: 589px; width: 878px;"></p> - -<h3 id="Scratchpad">Scratchpad</h3> - -<p>Web Console 在执行 JavaScript 的单个命令行时是非常好的，但是在执行多行命令时就没那么方便了，而且你也不可能在 Web Console 中保存你的代码。因此对于更复杂的例子， <a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a> 是一个更好的工具。</p> - -<p> </p> - -<p>要打开 Scratchpad, 可以在 "Web Developer" 菜单下选择 "Scratchpad" , 它在 Firefox 中也位于 "Tools" 菜单下。它是一个单独的窗口以及编辑器，你可以使用它来写和执行浏览器中的代码。你也同样可以将脚本保存在硬盘，并且从硬盘装载。</p> - -<p>如果你选择了 "Inspect", pad 中的代码会在浏览器中执行，其结果也会以 comment 的形式插入到 pad 中： </p> - -<p><img src="https://mdn.mozillademos.org/files/7365/scratchpad.png"></p> - -<h2 id="文档约定">文档约定</h2> - -<p>JavaScript 应用可以运行在许多操作系统之上；本书中所给出的信息适用于所有这些系统。文件和目录的路径将以 Windows 的形式给出（反斜线用于分隔目录名）。对于 Unix 系统，目录的路径是相同的，只是将反斜线换成斜线即可。</p> - -<p>本指南使用如下形式的统一资源定位符（URL）：</p> - -<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> - -<p>在这些 URL 中，<em>server</em> 表示您的应用所运行的服务器的名称，比如 <code>research1</code> 或者 <code>www</code>；<em>domain</em> 表示您的互联网域名，比如 <code>netscape.com</code> 或者 <code>uiuc.edu</code>； <em>path</em> 表示在服务器中的目录结构；而 <em>file</em><code>.html</code> 则表示特定的文件名。一般来讲，URL 中的斜体部分为占位符，而其中的等宽字体则为原文。如果您的服务器启用了安全套接字层（SSL），则需要将 URL 中的 <code>http</code> 换成 <code>https。</code></p> - -<p>本指南使用如下字体约定：</p> - -<ul> - <li>等宽字体用于示例代码，代码罗列，API 以及语言元素（比如方法名或者属性名），文件名，路径名，目录名，HTML 标签，以及其它任何必需键入到屏幕中的文本。（等宽斜体字用于代码中的占位符）</li> - <li><em>斜体字</em> 用于本书的标题，强调，变量和占位符以及其它直接字面上的词汇。</li> - <li><strong>粗体</strong> 用于词汇表。</li> -</ul> - -<div>{{ PreviousNext("JavaScript/Guide", "JavaScript/Guide/JavaScript_Overview") }}</div> diff --git a/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html b/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html deleted file mode 100644 index 31077692d4..0000000000 --- a/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: JavaScript 概述 -slug: conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b -tags: - - ECMAScript -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/JavaScript_Overview -original_slug: Web/JavaScript/Guide/JavaScript_Overview ---- -<p>本节将介绍并讨论 JavaScript 的基本概念。</p> - -<h2 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">什么是 JavaScript？</h2> - -<p>JavaScript 是一种跨平台，面向对象的脚本语言。作为一种小巧且轻量级的语言，JavaScript 无意于独立运行，而是被设计为可以轻易嵌入到其它的产品和应用中，比如 Web 浏览器。在宿主环境中，JavaScript 可以被连接到环境中的对象之上，以提供对其的编程控制。</p> - -<p>核心的 JavaScript 中包含有一组核心的对象，包括 <code>Array，</code><code>Date</code> 和 <code>Math</code>，以及一组核心的语言要素，包括操作符，控制结构和语句。出于多种目的，可以通过为其增补附加的对象，对核心 JavaScript 加以扩展；例如：</p> - -<ul> - <li><em>客户端 JavaScript</em> 提供了用于控制浏览器（Navigator 或者其它浏览器）以及其中的文档对象模型（DOM）的对象，从而扩展了核心 JavaScript。例如，客户端扩展允许应用程序在 HTML 的表单中加入元素，以便响应用户事件，比如鼠标点击，表单输入和页面导航。</li> - <li><em>服务器端 JavaScript</em> 提供了服务于在服务器上运行 JavaScript 的对象，从而扩展了核心 JavaScript。例如，服务器端扩展可以允许应用程序访问关系型数据库，在应用程序的不同调用间提供信息的连续性，甚至于处理服务器之上的文件。</li> -</ul> - -<p>借由 JavaScript 的 LiveConnect 功能，您可以让 Java 和 JavaScript 间实现通讯。从 JavaScript 中，您可以创建 Java 对象并访问它们的公共方法和域。从 Java 中，也可以访问 JavaScript 的对象，属性和方法。</p> - -<p>Netscape 发明了 JavaScript 并将 JavaScript 首先用于 Netscape 浏览器中。</p> - -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript 和 Java</h2> - -<p>JavaScript 和 Java 虽然在某些方面相似，但在另外一些方面确有着本质的不同。JavaScript 语言类似于 Java 语言，但是没有 Java 的类型静态化和强类型检查。JavaScript 大部分的表达式语法，命名规范以及基本的控制流构成都和 Java 相同。正是由于这个原因，JavaScript 才从 LiveScript 改名得来。</p> - -<p>不同于 Java 的通过声明而形成的编译时的类系统，JavaScript 支持基于少量数据类型的运行时系统，这些数据类型用以表示数值、布尔值和字符串。JavaScript 使用基于原型的对象模型，而不是更常见的基于类的对象模型。基于原型的对象模型提供了动态的继承能力，实际上，究竟什么得到继承，对于每个对象都可能不同。JavaScript 还支持无需任何特殊的声明要求的函数。函数可以作为对象的属性，当成松散类型方法（loosely typed method）来执行。</p> - -<p>相比 Java 而言，JavaScript 是一种格式相当自由的语言。无需声明所有的变量，类和方法。无需关心方法是公共的，私有的或者是保护的，也无需实现接口。变量，参数，以及返回值都无需显式的类型声明。</p> - -<p>Java 是基于类的编程语言，目标在于快速的执行和类型安全。这里的类型安全，可以是比如，你不能将 Java 的整数强制转换为对象引用，或者通过篡改 Java 字节码来达到访问私有内存区域的目的。Java 基于类的模型意味着程序完全由类及其方法构成。这些类的继承以及强类型通常需要紧密耦合的对象层级结构。这些需求使得 Java 编程远比 JavaScript 编程要复杂。</p> - -<p>相比之下，JavaScript 的设计理念源于一系列更小巧的动态类型语言，比如 HyperTalk 和 dBASE。这些脚本语言以其更为简单的语法，更专业化的内建功能，以及最小化的对象创建需求，提供了更为大众化的编程工具。</p> - -<table class="standard-table"> - <caption>表 1.1 JavaScript 与 Java 的对比</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>面向对象的。对象的类型间没有区别。继承是基于原型机制实现的，且属性和方法可以动态地添加到任何对象之上。</td> - <td>基于类的。对象被划分为类和实例，且所有的继承是通过类的层级结构实现的。类或者实例不能动态地添加属性或方法。</td> - </tr> - <tr> - <td>变量的数据类型无需声明（动态化类型）。</td> - <td>变量的数据类型必需声明（静态化类型）。</td> - </tr> - <tr> - <td>不能自动地写入硬盘</td> - <td>不能自动地写入硬盘</td> - </tr> - </tbody> -</table> - -<p>有关 JavaScript 和 Java 之间区别的更多信息，参见 <a href="/zh-CN/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">对象模型的细节</a>。</p> - -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript 和 ECMAScript 规范</h2> - -<p>Netscape 发明了 JavaScript 并将 JavaScript 首先用于 Netscape 浏览器中。不过， Netscape 正在与 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — 欧洲信息和通讯标准化协会（ECMA 曾是 European Computer Manufacturers Association，既欧洲计算机制造商协会的缩写）一道致力于交付一个基于核心 JavaScript 的，标准化的，国际化的编程语言，既 ECMAScript。ECMAScript 在所有支持该标准的应用程序中具有相同的特性。其它公司可以使用开放的标准语言来开发它们的 JavaScript 实现。ECMAScript 标准在 ECMA-262 规范中加以记述。</p> - -<p>ECMA-262 标准由 <a class="external" href="http://www.iso.ch/">ISO</a>（International Organization for Standardization，既国际化标准化组织）批准为 ISO-16262。在 Mozilla 网站上可以找到 <a class="external" href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">PDF 版本的 ECMA-262</a> （过时的版本）。在 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International 的网站</a> 上也可以找到该规范。ECMAScript 规范没有描述文档对象模型（DOM）。该模型由 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> 完成标准化。DOM 定义了 HTML 文档对象呈现在脚本中的方式。</p> - -<h3 id="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions" name="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions">JavaScript 版本和 ECMAScript 版本之间的关系</h3> - -<p>Netscape 与 Ecma International 的紧密合作形成了 ECMAScript 规范（ECMA-262）。下面的表格描述了 JavaScript 版本和 ECMAScript 版本之间的关系。</p> - -<table class="standard-table"> - <caption>表 1.2 JavaScript 版本和 ECMAScript 版本</caption> - <thead> - <tr> - <th scope="row">JavaScript 版本</th> - <th scope="col">与 ECMAScript 版本的关系</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.1</td> - <td>ECMA-262，第 1 版 基于 JavaScript 1.1.</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td>ECMA-262 在 JavaScript 1.2 发布时尚未完成。由于以下原因，JavaScript 1.2 并不与 ECMA-262，第 1 版完全兼容： - <ul> - <li>Netscape 在 JavaScript 1.2 开发了一些新的特性尚未被 ECMA-262 采纳。</li> - <li>ECMA-262 添加了两项新特性：基于 Unicode 的国际化，以及跨平台的一致行为。而 JavaScript 1.2 的某些特性，例如 <code>Date</code> 对象，是依赖于平台的，且具有特定于平台的行为。</li> - </ul> - </td> - </tr> - <tr> - <td>JavaScript 1.3</td> - <td>JavaScript 1.3 完全兼容于 ECMA-262，第 1 版。<br> - JavaScript 1.3 解决了 JavaScript 1.2 与 ECMA-262 之间的不一致性，同时保留了 JavaScript 1.2 中的附加特性，除了 <code>==</code> 和 <code>!= 被修改以便顺应于</code> ECMA-262 之外。</td> - </tr> - <tr> - <td>JavaScript 1.4</td> - <td>JavaScript 1.4 完全兼容于 ECMA-262，第 1 版。<br> - ECMAScript 规范的第三版在 JavaScript 1.4 发布时尚未最终完成。</td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>JavaScript 1.5 完全兼容于 ECMA-262，第 3 版。</td> - </tr> - </tbody> -</table> - -<div class="note"><strong>注：</strong>ECMA-262，第 2 版仅包含对第 1 版规范的细微的编辑性的改动和错误修正。由 Ecma International 的 TC39 工作组发布的最新版本为 ECMAScript 版本 5.1</div> - -<p><a href="/en-US/docs/JavaScript/Reference" title="JavaScript/Reference">JavaScript 参考</a> 中标明了语言中的哪些特性兼容于 ECMAScript。</p> - -<p>JavaScript 将总会包含某些 ECMAScript 规范中所没有的特性；JavaScript 兼容于 ECMAScript，同时提供附加特性。</p> - -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 文档相较于 ECMAScript 规范</h3> - -<p>ECMAScript 规范了实现 ECMAScript 的一组需求；它有助于您确定某项 JavaScript 特性是否也为其它 ECMAScript 的实现所支持。如果您想编写仅仅使用 ECMAScript 所支持的特性的代码，那么您可能需要参考 ECMAScript 规范。</p> - -<p>ECMAScript 文档的目的不在于帮助脚本程序员；关于脚本编写的信息，请参考 JavaScript 文档。</p> - -<h3 id="JavaScript_and_ECMAScript_Terminology" name="JavaScript_and_ECMAScript_Terminology">JavaScript 和 ECMAScript 术语</h3> - -<p>ECMAScript 规范使用的术语和语法对于 JavaScript 程序员而言，可能会有点陌生。尽管对语言的描述方式在 ECMAScript 中可能不尽相同，但是语言本身还是相同的。JavaScript 支持 ECMAScript 规范中所勾勒出的全部功能。</p> - -<p>JavaScript 文档描述了语言中适合于 JavaScript 程序员的方面。例如：</p> - -<ul> - <li>JavaScript 文档中没有描述全局对象，因为不会直接用到它。全局对象的属性和方法在 JavaScript 文档中被称为顶层函数和属性。</li> - <li>JavaScript 文档中没有讨论 <code>Number</code> 和 <code>String</code> 对象的无参（零个参数）构造器，因为几乎不会用到其生成的对象。无参的 <code>Number</code> 构造器返回 +0，而无参的 <code>String</code> 构造器返回 "" （空的字符串）。</li> -</ul> - -<div>{{ PreviousNext("JavaScript/Guide/About", "JavaScript/Guide/Values,_variables,_and_literals") }}</div> diff --git a/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html b/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html deleted file mode 100644 index 107bb6888f..0000000000 --- a/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Boundaries -slug: conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions -translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions -translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries -original_slug: Web/JavaScript/Guide/Regular_Expressions/Boundaries ---- -<p>重定向至 <a class="redirect" href="/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">断言</a></p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html deleted file mode 100644 index 494ec5dcf7..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: ArrayBuffer.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer -tags: - - ArrayBuffer -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>ArrayBuffer.prototype</code></strong><code>属性表示</code>{{jsxref("ArrayBuffer")}}对象的原型。</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<div> </div> - -<h2 id="描述">描述</h2> - -<p>ArrayBuffer 实例继承自<code>ArrayBuffer.prototype。对所有的构造函数来说，你可以通过改变构造函数的原型对象来改变所有的ArrayBuffer实例。</code></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>ArrayBuffer.prototype.constructor</dt> - <dd>指定函数，它创建一个对象的原型。其初始值是标准ArrayBuffer内置构造函数。</dd> - <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>数组的字节大小。在数组创建时确定，并且不可变更。<strong>只读</strong>。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> - <dd>返回一个新的 <code>ArrayBuffer</code> ，它的内容是这个 <code>ArrayBuffer</code> 的字节副本，从begin（包括），到end（不包括）。如果begin或end是负数，则指的是从数组末尾开始的索引，而不是从头开始。</dd> -</dl> - -<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('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("ArrayBuffer")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index c835071fad..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -tags: - - Boolean - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<p>{{JSRef}}</p> - -<p><strong><code>Boolean.prototype</code></strong> 属性表示{{jsxref("Boolean")}} 构造函数的原型。</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description" style="margin-bottom: 20px; line-height: 30px;">描述</h2> - -<p>{{jsxref("Boolean")}}实例继承自<code>Boolean.prototype</code>。你可以使用构造函数的原型对象向所有{{jsxref("Boolean")}}实例添加属性或方法。</p> - -<h2 id="属性" style="margin-bottom: 20px; line-height: 30px;">属性</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>返回创建了实例原型的函数。默认为{{jsxref("Boolean")}}函数。</dd> -</dl> - -<h2 id="方法" style="margin-bottom: 20px; line-height: 30px;">方法</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>返回包含{{jsxref("Boolean")}}对象源码的字符串；你可以使用这个字符串来创建一个等价的对象。覆盖了{{jsxref("Object.prototype.toSource()")}} 方法。</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>根据对象的值来返回一个字符串：<code>"true"</code> 或 <code>"false"</code>。覆盖了 {{jsxref("Object.prototype.toString()")}} 方法。</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>返回{{jsxref("Boolean")}}对象的原始值。覆盖了 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> -</dl> - -<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容" style="margin-bottom: 20px; line-height: 30px;">浏览器兼容</h2> - -<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html deleted file mode 100644 index 30e15c989e..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: DataView.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/DataView -tags: - - DataView属性 -translation_of: Web/JavaScript/Reference/Global_Objects/DataView -translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>DataView</strong></code><strong><code>.prototype</code></strong> 表示{{jsxref("DataView")}}的原型</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="描述">描述</h2> - -<p><code>DataView</code> 的实例从<font face="Consolas, Liberation Mono, Courier, monospace">DataView.prototype</font>继承。就像所有的构造器，你可以修改原型来改变生成的<code>DataView</code>实例。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{jsxref("DataView.prototype.constructor")}}</dt> - <dd>指定用来生成原型的构造函数.初始化值是标准内置DataView构造器.</dd> - <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>被视图引入的{{jsxref("ArrayBuffer")}}.创建实例的时候已固化因此是只读的.</dd> - <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>从 {{jsxref("ArrayBuffer")}}中读取的字节长度. 创建实例的时候已固化因此是只读的.</dd> - <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>从 {{jsxref("ArrayBuffer")}}读取时的偏移字节长度. 创建实例的时候已固化因此是只读的.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<h3 id="读">读</h3> - -<dl> - <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个8-bit数(一个字节).</dd> - <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个8-bit数(无符号字节).</dd> - <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个16-bit数(短整型).</dd> - <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个16-bit数(无符号短整型).</dd> - <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(长整型).</dd> - <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(无符号长整型).</dd> - <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(浮点型).</dd> - <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处获取一个64-bit数(双精度浮点型).</dd> -</dl> - -<h3 id="写">写</h3> - -<dl> - <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个8-bit数(一个字节).</dd> - <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个8-bit数(无符号字节).</dd> - <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个16-bit数(短整型).</dd> - <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个16-bit数(无符号短整型).</dd> - <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(长整型).</dd> - <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(无符号长整型).</dd> - <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(浮点型).</dd> - <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt> - <dd><code>从</code>{{jsxref("DataView")}}起始位置以byte为计数的指定偏移量(byteOffset)处储存一个64-bit数(双精度浮点型).</dd> -</dl> - -<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('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器支持">浏览器支持</h2> - - - -<p>{{Compat("javascript.builtins.DataView.prototype")}}</p> - -<h2 id="另见">另见</h2> - -<ul> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html deleted file mode 100644 index f43b83c11d..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Date.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date -tags: - - Date - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Date.prototype</code></strong> 属性表示{{jsxref("Date")}}构造函数的原型。</p> - -<div>{{js_property_attributes(0,0,1)}}</div> - -<h2 id="Description" name="Description">描述</h2> - -<p>{{jsxref("Date")}}实例继承自<code>Date.prototype</code>。可以通过修改构造函数的原型对象来影响 {{jsxref("Date")}}实例继承的属性和方法。</p> - -<p>为了兼容千禧年计算（也即考虑到 2000 年），应该总是指定完整的年份，例如，使用 1998，而不是 98。为了方便以完整的格式指定年份， JavaScript 包含了相应的方法{{jsxref("Global_Objects/Date/getFullYear", "getFullYear()")}}，{{jsxref("Global_Objects/Date/setFullYear", "setFullYear()")}}， {{jsxref("Global_Objects/Date/getUTCFullYear", "getUTCFullYear()")}} 和{{jsxref("Global_Objects/Date/setUTCFullYear", "setUTCFullYear()")}}。</p> - -<p>从 ECMAScript 6 开始，<code>Date.prototype</code>本身就是一个普通的对象。不是{{jsxref("Date")}}的实例。</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt><code>Date.prototype.constructor</code></dt> - <dd>返回创建该实例的函数。默认是<code>Date</code>构造函数。</dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<h3 id="Getter">Getter</h3> - -<dl> - <dt>{{jsxref("Date.prototype.getDate()")}}</dt> - <dd>根据本地时间返回指定日期对象的月份中的第几天（1-31）。</dd> - <dt>{{jsxref("Date.prototype.getDay()")}}</dt> - <dd>根据本地时间返回指定日期对象的星期中的第几天（0-6）。</dd> - <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> - <dd>根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）。</dd> - <dt>{{jsxref("Date.prototype.getHours()")}}</dt> - <dd>根据本地时间返回指定日期对象的小时（0-23）。</dd> - <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> - <dd>根据本地时间返回指定日期对象的毫秒（0-999）。</dd> - <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> - <dd>根据本地时间返回指定日期对象的分钟（0-59）。</dd> - <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> - <dd>根据本地时间返回指定日期对象的月份（0-11）。</dd> - <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> - <dd>根据本地时间返回指定日期对象的秒数（0-59）。</dd> - <dt>{{jsxref("Date.prototype.getTime()")}}</dt> - <dd>返回从1970-1-1 00:00:00 UTC（协调世界时）到该日期经过的毫秒数，对于1970-1-1 00:00:00 UTC之前的时间返回负值。</dd> - <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> - <dd>返回当前时区的时区偏移。</dd> - <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> - <dd>根据世界时返回特定日期对象一个月的第几天（1-31）.</dd> - <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> - <dd>根据世界时返回特定日期对象一个星期的第几天（0-6）.</dd> - <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> - <dd>根据世界时返回特定日期对象所在的年份（4位数）.</dd> - <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> - <dd>根据世界时返回特定日期对象当前的小时（0-23）.</dd> - <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> - <dd>根据世界时返回特定日期对象的毫秒数（0-999）.</dd> - <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> - <dd>根据世界时返回特定日期对象的分钟数（0-59）.</dd> - <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> - <dd>根据世界时返回特定日期对象的月份（0-11）.</dd> - <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> - <dd>根据世界时返回特定日期对象的秒数（0-59）.</dd> - <dt>{{jsxref("Date.prototype.getYear()")}}{{deprecated_inline}}</dt> - <dd>根据特定日期返回年份 (通常 2-3 位数). 使用 {{jsxref("Global_Objects/Date/getFullYear", "getFullYear()")}} .</dd> -</dl> - -<h3 id="Setter">Setter</h3> - -<dl> - <dt>{{jsxref("Date.prototype.setDate()")}}</dt> - <dd>根据本地时间为指定的日期对象设置月份中的第几天。</dd> - <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> - <dd>根据本地时间为指定日期对象设置完整年份（四位数年份是四个数字）。</dd> - <dt>{{jsxref("Date.prototype.setHours()")}}</dt> - <dd>根据本地时间为指定日期对象设置小时数。</dd> - <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> - <dd>根据本地时间为指定日期对象设置毫秒数。</dd> - <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> - <dd>根据本地时间为指定日期对象设置分钟数。</dd> - <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> - <dd>根据本地时间为指定日期对象设置月份。</dd> - <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> - <dd>根据本地时间为指定日期对象设置秒数。</dd> - <dt>{{jsxref("Date.prototype.setTime()")}}</dt> - <dd>通过指定从 1970-1-1 00:00:00 UTC 开始经过的毫秒数来设置日期对象的时间，对于早于 1970-1-1 00:00:00 UTC的时间可使用负值。</dd> - <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> - <dd>根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。</dd> - <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> - <dd>根据世界时设置 Date 对象中的年份（四位数字）。</dd> - <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> - <dd>根据世界时设置 Date 对象中的小时 (0 ~ 23)。</dd> - <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> - <dd>根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。</dd> - <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> - <dd>根据世界时设置 Date 对象中的分钟 (0 ~ 59)。</dd> - <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> - <dd>根据世界时设置 Date 对象中的月份 (0 ~ 11)。</dd> - <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> - <dd>根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。</dd> - <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> - <dd>setYear() 方法用于设置年份。请使用 {{jsxref("Global_Objects/Date/setFullYear", "setFullYear()")}} 方法代替。</dd> -</dl> - -<h3 id="Conversion_getter">Conversion getter</h3> - -<dl> - <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> - <dd>以人类易读（human-readable）的形式返回该日期对象日期部分的字符串。</dd> - <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> - <dd>把一个日期转换为符合 ISO 8601 扩展格式的字符串。</dd> - <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> - <dd>使用 {{jsxref("Global_Objects/Date/toISOString", "toISOString()")}} 返回一个表示该日期的字符串。为了在 {{jsxref("JSON.stringify()")}} 方法中使用。</dd> - <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> - <dd>返回一个基于 GMT (UT) 时区的字符串来表示该日期。请使用 {{jsxref("Global_Objects/Date/toUTCString", "toUTCString()")}} 方法代替。</dd> - <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> - <dd>返回一个表示该日期对象日期部分的字符串，该字符串格式与系统设置的地区关联（locality sensitive）。</dd> - <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> - <dd>使用格式字符串将日期转换为字符串。</dd> - <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> - <dd>返回一个表示该日期对象的字符串，该字符串与系统设置的地区关联（locality sensitive）。覆盖了 {{jsxref("Global_Objects/Object/toLocaleString", "Object.prototype.toLocaleString()")}} 方法。</dd> - <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> - <dd>返回一个表示该日期对象时间部分的字符串，该字符串格式与系统设置的地区关联（locality sensitive）。</dd> - <dt>{{jsxref("Date.prototype.toSource()")}}{{non-standard_inline}}</dt> - <dd>返回一个与{{jsxref("Date")}}等价的原始字符串对象，你可以使用这个值去生成一个新的对象。重写了 {{jsxref("Object.prototype.toSource()")}} 这个方法。</dd> - <dt>{{jsxref("Date.prototype.toString()")}}</dt> - <dd>返回一个表示该日期对象的字符串。覆盖了{{jsxref("Object.prototype.toString()")}} 方法。</dd> - <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> - <dd>以人类易读格式返回日期对象时间部分的字符串。</dd> - <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> - <dd>把一个日期对象转换为一个以UTC时区计时的字符串。</dd> - <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> - <dd>返回一个日期对象的原始值。覆盖了 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> -</dl> - -<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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.builtins.Date.prototype")}}</p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html deleted file mode 100644 index 86c93dcc85..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Error.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error -tags: - - Error - - JavaScript - - Property - - 参考 - - 属性 -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -<div> -<p>{{JSRef}}</p> - -<p><code><strong>Error.prototype</strong></code> 属性代表 {{jsxref("Error")}} 的构造器。</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> -</div> - -<h2 id="Description" name="Description">描述</h2> - -<p>所有 {{jsxref("Global_Objects/Error", "Error")}} 与 {{jsxref("Global_Objects/Error", "非标准Error", "#Error_types", 1)}} 的实例都继承自 <code>Error.prototype。同所有构造器函数一样，你可以在构造器的 </code>prototype 上添加属性或者方法，使其在所有该构造器的实例上生效。</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<h3 id="Standard_properties" name="Standard_properties">标准属性</h3> - -<dl> - <dt><code>Error.prototype.constructor</code></dt> - <dd>实例原型的构造函数。</dd> - <dt>{{jsxref("Error.prototype.message")}}</dt> - <dd>错误信息。</dd> - <dt>{{jsxref("Error.prototype.name")}}</dt> - <dd>错误名。</dd> -</dl> - -<h3 id="Vendor-specific_extensions" name="Vendor-specific_extensions">厂商特定扩展属性</h3> - -<div>{{non-standard_header}}</div> - -<h4 id="Microsoft" name="Microsoft">Microsoft</h4> - -<dl> - <dt>{{jsxref("Error.prototype.description")}}</dt> - <dd>错误描述，与 {{jsxref("Error.prototype.message", "message")}} 相似。</dd> - <dt>{{jsxref("Error.prototype.number")}}</dt> - <dd>错误码。</dd> -</dl> - -<h4 id="Mozilla" name="Mozilla">Mozilla</h4> - -<dl> - <dt>{{jsxref("Error.prototype.fileName")}}</dt> - <dd>产生该错误的文件名。</dd> - <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> - <dd>产生该错误的行号。</dd> - <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> - <dd>产生该错误的列号。</dd> - <dt>{{jsxref("Error.prototype.stack")}}</dt> - <dd>错误堆栈。</dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<dl> - <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>返回一个包含特定 {{jsxref("Error")}} 对象的源代码字符串，你可以用该值新建一个新的对象，重写自 {{jsxref("Object.prototype.toSource()")}} 方法。</dd> - <dt>{{jsxref("Error.prototype.toString()")}}</dt> - <dd>返回一个表示该对象的字符串，重写自 {{jsxref("Object.prototype.toString()")}} 方法。</dd> -</dl> - -<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>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">参见</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html deleted file mode 100644 index 7fe73a4749..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: EvalError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/EvalError -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>EvalError.prototype</strong></code> 属性是 {{jsxref("EvalError")}} 原型构造函数.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description">Description</h2> - -<p>{{jsxref("EvalError")}} 全部实例都继承自<code>EvalError.prototype</code>. 你可以通过prototype去添加方法和属性.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>EvalError.prototype.constructor</code></dt> - <dd>指定创建实例原型的函数.</dd> - <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> - <dd>错误信息. 从 ECMA-262 开始 {{jsxref("EvalError")}} 提供 <code>message</code> （继承自{{jsxref("Error.prototype.message")}}）属性, 详见 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>.</dd> - <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> - <dd>错误名称.继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> - <dd>引发错误的文件路径. 继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> - <dd>引发错误所在行.继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> - <dd>引发错误所在的列. 继承自{{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> - <dd>堆栈.继承自 {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p>虽然 {{jsxref("EvalError")}} 自己的属性方法较少, 但是通过原型链继承了很多有用的方法.</p> - -<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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>初代.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>定义为<code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>定义为<code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>定义为<code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.EvalError")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index b2d20b8cbd..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Function.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function -tags: - - JavaScript - - 函数 - - 原型 - - 原型属性 -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Function.prototype</strong></code> 属性存储了 {{jsxref("Function")}} 的原型对象。</p> - -<h2 id="Description" name="Description">描述</h2> - -<p>{{jsxref("Function")}}<code>对象继承自 Function.prototype 属性</code><code>。因此，Function.prototype</code> 不能被修改。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{jsxref("Function.arguments")}} {{deprecated_inline()}}</dt> - <dd>以数组形式获取传入函数的所有参数。此属性已被{{jsxref("Functions_and_function_scope/arguments", "arguments")}}替代。</dd> - <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline() }}</s></dt> - <dd><s class="obsoleteElement">用于指定的函数的参数的个数，但已被删除。使用{{jsxref("Function.length","length")}}属性代替。</s></dd> - <dt>{{jsxref("Function.caller")}} {{ Non-standard_inline() }}</dt> - <dd>获取调用函数的具体对象。</dd> - <dt>{{jsxref("Function.length")}}</dt> - <dd>获取函数的接收参数个数。</dd> - <dt>{{jsxref("Function.name")}} {{ Non-standard_inline() }}</dt> - <dd>获取函数的名称。</dd> - <dt>{{jsxref("Function.displayName")}} {{ Non-standard_inline() }}</dt> - <dd>获取函数的display name。</dd> - <dt><code>Function.prototype.constructor</code></dt> - <dd>声明函数的原型构造方法，详细请参考 {{jsxref("Object.constructor")}} 。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。</dd> - <dt>{{jsxref("Function.prototype.bind()")}}</dt> - <dd><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">bind()</span>方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 <span style="font-family: courier new,andale mono,monospace;">bind()</span>方法的第一个参数作为 <span style="font-family: courier new,andale mono,monospace;">this</span>,传入 <span style="font-family: courier new,andale mono,monospace;">bind()</span>方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>在一个对象的上下文中应用另一个对象的方法；参数能够以列表形式传入。</dd> - <dt>{{jsxref("Function.prototype.isGenerator()")}} {{ Non-standard_inline() }}</dt> - <dd><code>若函数对象为</code><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators">generator</a>，返回true，反之返回 <code>false</code>。</dd> - <dt>{{jsxref("Function.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>获取函数的实现源码的字符串。 覆盖了 {{jsxref("Object.prototype.toSource")}} 方法。</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>获取函数的实现源码的字符串。覆盖了 {{jsxref("Object.prototype.toString")}} 方法。</dd> -</dl> - -<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>Initial definition.Implemented in JavaScript 1.1</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参考">参考</h2> - -<ul> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html deleted file mode 100644 index 5b5759e3c0..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: GeneratorFunction.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -tags: - - ECMAScript 2015 - - GeneratorFunction - - Iterator - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction -translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>GeneratorFunction.prototype</strong></code>属性是{{jsxref("GeneratorFunction")}}的原型对象。</p> - -<h2 id="Description" name="Description">描述</h2> - -<p>{{jsxref("GeneratorFunction")}} 的实例对象都继承于 <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> 不能被修改。</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> - <dd>初始值是 {{jsxref("GeneratorFunction")}}.</dd> - <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> - <dd>值是 <code>%GeneratorPrototype%</code>.</dd> -</dl> - -<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('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html deleted file mode 100644 index 9608a00425..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat.prototype</code></strong>表示 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}构造函数的原型对象。</p> - -<p>{{js_property_attributes(0, 0, 0)}} </p> - -<h2 id="描述">描述</h2> - -<p>参见 {{jsxref("DateTimeFormat")}}来看<code>Intl.DateTimeFormat实例的一个描述。</code></p> - -<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 实例继承自<code>Intl.DateTimeFormat.prototype</code>. 对原型对象的修改都继承自{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}实例。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> - <dd>请参考 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</dd> - <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt> - <dd>Getter; 返回一个{{jsxref("DateTimeFormat", "DateTimeFormat")}}对象的根据locale和格式化参数格式化日期的函数。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> - <dd>Returns an {{jsxref("Array")}} of objects representing the date string in parts that can be used for custom locale-aware formatting.</dd> - <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>返回一个新的属性对象，反射出在对象初始化过程中计算出的locale和options的各个值。</dd> -</dl> - -<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('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>初始定义</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index c05822ebf3..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> 属性表示 {{jsxref("Map")}}构造函数的原型对象。</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="描述">描述</h2> - -<p>{{jsxref("Map")}} 实例继承自{{jsxref("Map.prototype")}}。你可以使用这个构造函数的原型对象来给所有的Map实例添加属性或者方法。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>返回一个函数，它创建了实例的原型。默认是{{jsxref("Map")}}函数。</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd>返回Map对象的键/值对的数量。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>移除Map对象的所有键/值对 。</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd>如果 <code>Map</code> 对象中存在该元素，则移除它并返回<em> <code>true</code></em>；否则如果该元素不存在则返回 <code><em>false</em></code>。随后调用 <code>Map.prototype.has(key)</code> 将返回 <code>false</code> 。</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>返回一个新的 <code>Iterator</code> 对象，它按插入顺序包含了Map对象中每个元素的 <strong><code>[key, value]</code></strong> <code><strong>数组</strong></code>。</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>按插入顺序，为 <code>Map</code>对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd>返回键对应的值，如果不存在，则返回undefined。</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd>返回一个布尔值，表示Map实例是否包含键对应的值。</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd>返回一个新的 <code>Iterator</code>对象， 它按插入顺序包含了Map对象中每个元素的<strong>键 </strong>。</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd>设置Map对象中键的值。返回该Map对象。</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd>返回一个新的<code>Iterator</code>对象，它按插入顺序包含了Map对象中每个元素的<strong>值</strong> 。</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>返回一个新的<code>Iterator</code>对象，它按插入顺序包含了Map对象中每个元素的 <strong><code>[key, value]</code></strong> <code><strong>数组</strong></code>。</dd> -</dl> - -<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('ES6', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("13") }}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td> - <p>8</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html deleted file mode 100644 index 883a45707c..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Number.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<div> - {{JSRef("Global_Objects", "Number")}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p><strong><code>Number.prototype</code></strong> 属性表示 {{jsxref("Global_Objects/Number", "Number")}} 构造函数的原型。</p> -<div> - {{js_property_attributes(0,0,0)}}</div> -<h2 id="Description" name="Description">描述</h2> -<p>所有 <code>Number</code> 实例都继承自 <code>Number.prototype</code>。修改 {{jsxref("Global_Objects/Number", "Number")}} 构造函数的原型对象会影响到所有 <code>Number</code> 实例。.</p> -<h2 id="属性">属性</h2> -<dl> - <dt> - constructor</dt> - <dd> - 返回创建该实例对象的构造函数。默认为 {{jsxref("Global_Objects/Number", "Number")}} 对象。</dd> -</dl> -<div> - {{ jsOverrides("Object", "properties", "constructor") }}</div> -<h2 id="方法">方法</h2> -<dl> - <dt> - {{jsxref("Number.prototype.toExponential()")}}</dt> - <dd> - 返回一个使用指数表示法表示的该数值的字符串表示。</dd> - <dt> - {{jsxref("Number.prototype.toFixed()")}}</dt> - <dd> - 返回一个使用定点表示法表示的该数值的字符串表示。</dd> - <dt> - {{jsxref("Number.prototype.toLocaleString()")}}</dt> - <dd> - 返回一个与语言相关的该数值对象的字符串表示。覆盖了{{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd> - <dt> - {{jsxref("Number.prototype.toPrecision()")}}</dt> - <dd> - 使用定点表示法或指数表示法来表示的指定显示位数的该数值对象的字符串表示。</dd> - <dt> - {{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd> - Returns an object literal representing the specified Number object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> - <dt> - {{jsxref("Number.prototype.toString()")}}</dt> - <dd> - 返回一个表示该数值对象的字符串。覆盖了 {{jsxref("Object.prototype.toString()")}} 方法。</dd> - <dt> - {{jsxref("Number.prototype.valueOf()")}}</dt> - <dd> - 返回该数值对象的原始值。覆盖了 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> -</dl> -<div> - {{ jsOverrides("Object", "methods", "toExponential", "toFixed", "toLocaleString", "toPrecision", "toSource", "toString", "valueOf") }}</div> -<div> - </div> -<h2 id="规范">规范</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范版本</th> - <th scope="col">规范状态</th> - <th scope="col">注解</th> - </tr> - <tr> - <td>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<p> </p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html deleted file mode 100644 index 157e63ddf6..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Object.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object -tags: - - JavaScript - - Object - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Object.prototype</strong></code> 属性表示 {{jsxref("Object")}} 的原型对象。</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description" name="Description">描述</h2> - -<p>几乎所有的 JavaScript 对象都是 {{jsxref("Object")}} 的实例；一个典型的对象继承了<code>Object.prototype</code>的属性（包括方法），尽管这些属性可能被遮蔽（亦称为覆盖）。但是有时候可能故意创建不具有典型原型链继承的对象，比如通过{{jsxref("Object.create", "Object.create(null)")}}创建的对象，或者通过{{jsxref("Object.setPrototypeOf")}}方法改变原型链。</p> - -<p>改变<code>Object</code>原型，会通过原型链改变<strong>所有</strong>对象；除非在原型链中进一步覆盖受这些变化影响的属性和方法。这提供了一个非常强大的、但有潜在危险的机制来覆盖或扩展对象行为。</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>特定的函数，用于创建一个对象的原型。</dd> - <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> - <dd>指向当对象被实例化的时候，用作原型的对象。</dd> - <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> - <dd>当未定义的对象成员被调用作方法的时候，允许定义并执行的函数。</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">用于直接返回用户定义的对象中可数的属性的数量。已被废除。</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">用于指向对象的内容。已被废除。</s></dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<dl> - <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>关联一个函数到一个属性。访问该函数时，执行该函数并返回其返回值。</dd> - <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>关联一个函数到一个属性。设置该函数时，执行该修改属性的函数。</dd> - <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>返回使用 {{jsxref("Object.defineGetter", "__defineGetter__")}} 定义的方法函数 。</dd> - <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>返回使用 {{jsxref("Object.defineSetter", "__defineSetter__")}} 定义的方法函数。</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>返回一个布尔值 ，表示某个对象是否含有指定的属性，而且此属性非原型链继承的。</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>返回一个布尔值，表示指定的对象是否在本对象的原型链中。</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>判断指定属性是否可枚举，内部属性设置参见 <a href="/zh-CN/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a> 。</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>返回字符串表示此对象的源代码形式，可以使用此字符串生成一个新的相同的对象。</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>直接调用 {{jsxref("Object.toString", "toString()")}}方法。</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>返回对象的字符串表示。</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> - <dd>移除对象某个属性的监听。</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>返回指定对象的原始值。</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> - <dd>给对象的某个属性增加监听。</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">在指定对象为上下文情况下执行javascript字符串代码，已经废弃。</s></dd> -</dl> - -<h2 id="Examples" name="Examples">示例</h2> - -<p>当改变现有的 Object.prototype method(方法)的行为时，考虑在现有逻辑之前或之后通过封装你的扩展来注入代码。例如,此(未测试的)代码将在内置逻辑或其他人的扩展执行之前 pre-conditionally（预条件地）执行自定义逻辑。</p> - -<p>当一个函数被调用时,调用的参数被保留在类似数组 "变量" 的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">参数</a>中。例如, 在调用 "myFn (a、b、c)"时, 在myFn 的主体内的参数将包含 3个类似数组的元素对应于 (a、b、c)。 使用钩子修改原型时,只需通过调用该函数的 apply ()，将 this 与参数 (调用状态) 传递给当前行为。这种模式可以用于任何原型，如 Node.prototype、 Function.prototype 等.</p> - -<pre class="brush: js">var current = Object.prototype.valueOf; - -// 由于我的属性 "-prop-value"是交叉性的, 并不总是 -// 在同一个原型链上，我想要修改 Object.prototype: -Object.prototype.valueOf = function() { - if (this.hasOwnProperty('-prop-value')) { - return this['-prop-value']; - } else { - // <code>它看起来不像我的对象之一，因此，让我们退回到</code> - // <code>默认行为，通过尽可能地复制当前行为来实现.</code> - // <code>此apply的行为类似于其他语言中的"super"</code>. - // <code>即使 valueOf() 不带参数, 其他的钩子可能会带有.</code> - return current.apply(this, arguments); - } -}</pre> - -<p>由于 JavaScript 并不完全具有子类对象, 所以原型是一种有用的变通方法, 可以使用某些函数的 "基类" 对象来充当对象。例如:</p> - -<pre class="brush: js">var Person = function(name) { - this.name = name; - this.canTalk = true; -}; - -Person.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name); - } -}; - -var Employee = function(name, title) { - Person.call(this, name); - this.title = title; -}; - -Employee.prototype = Object.create(Person.prototype); - -Employee.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name + ', the ' + this.title); - } -}; - -var Customer = function(name) { - Person.call(this, name); -}; - -Customer.prototype = Object.create(Person.prototype); - -var Mime = function(name) { - Person.call(this, name); - this.canTalk = false; -}; - -Mime.prototype = Object.create(Person.prototype); - -var bob = new Employee('Bob', 'Builder'); -var joe = new Customer('Joe'); -var rg = new Employee('Red Green', 'Handyman'); -var mike = new Customer('Mike'); -var mime = new Mime('Mime'); - -bob.greet(); -// Hi, I am Bob, the Builder - -joe.greet(); -// Hi, I am Joe - -rg.greet(); -// Hi, I am Red Green, the Handyman - -mike.greet(); -// Hi, I am Mike - -mime.greet(); -</pre> - -<h2 id="Specifications" name="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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> - -<p>{{Compat("javascript.builtins.Object.prototype")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html deleted file mode 100644 index 034a88bd0c..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Promise.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef("Global_Objects", "Promise")}}</div> - -<h2 id="Summary" name="Summary">总结</h2> - -<p><code><strong>Promise</strong></code><strong><code>.prototype</code></strong> 属性表示 {{jsxref("Promise")}} 构造器的原型.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description">描述</h2> - -<p>{{jsxref("Promise")}} 实例继承自 {{jsxref("Promise.prototype")}}. 你可以在构造器的原型对象添加属性或方法到所有 <code>Promise</code> 实例上.</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>返回被创建的实例函数. 默认为 {{jsxref("Promise")}} 函数.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> - <dd>添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。当这个回调函数被调用，新 promise 将以它的返回值来resolve，否则如果当前promise 进入fulfilled状态，则以当前promise的完成结果作为新promise的完成结果.</dd> - <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> - <dd>添加解决(fulfillment)和拒绝(rejection)回调到当前 promise, 返回一个新的 promise, 将以回调的返回值来resolve.</dd> - <dt>{{jsxref("Promise.finally", "Promise.prototype.finally(onFinally)")}}</dt> - <dd>添加一个事件处理回调于当前promise对象，并且在原promise对象解析完毕后，返回一个新的promise对象。回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败(rejected)</dd> -</dl> - -<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('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>32</td> - <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br> - {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br> - {{CompatGeckoDesktop(29.0)}} by default</td> - <td>{{CompatNo}}</td> - <td>19</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br> - {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br> - {{CompatGeckoMobile(29.0)}} by default</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - <td>32</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> - -<h2 id="另见">另见</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html deleted file mode 100644 index ccc2299f1e..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Proxy handler -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy -tags: - - ECMAScript 2015 - - JavaScript - - Proxy -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy -translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler -original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---- -<div>{{JSRef}}</div> - -<div>Proxy 的 handler 对象是一个占位符对象，它包含了用于 {{jsxref("Proxy")}} 的陷阱（Trap）函数。</div> - -<div>此处可以理解为由Proxy所暴露出的钩子函数，handler作为挂载钩子函数的对象存在，不同的操作会触发不同的钩子函数</div> - -<div>，handler提供了覆写钩子函数的方法。</div> - -<h2 id="方法">方法</h2> - -<p>所有的陷阱是可选的。如果某个陷阱没有定义，那么就会保留默认行为。</p> - -<dl> - <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> - <dd>在读取代理对象的原型时触发该操作，比如在执行 <code>{{jsxref("Object.getPrototypeOf")}}(proxy)</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> - <dd>在设置代理对象的原型时触发该操作，比如在执行 <code>{{jsxref("Object.setPrototypeOf")}}(proxy, null)</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> - <dd>在判断一个代理对象是否是可扩展时触发该操作，比如在执行 <code>{{jsxref("Object.isExtensible")}}(proxy)</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> - <dd>在让一个代理对象不可扩展时触发该操作，比如在执行 <code>{{jsxref("Object.preventExtensions")}}(proxy)</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> - <dd>在获取代理对象某个属性的属性描述时触发该操作，比如在执行 <code>{{jsxref("Object.getOwnPropertyDescriptor")}}(proxy, "foo")</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> - <dd>在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 <code>{{jsxref("Object.defineProperty")}}(proxy, "foo", {})</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> - <dd>在判断代理对象是否拥有某个属性时触发该操作，比如在执行 <code>"foo" {{jsxref("Operators/in", "in")}} proxy</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> - <dd>在读取代理对象的某个属性时触发该操作，比如在执行 <code>proxy.foo</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> - <dd>在给代理对象的某个属性赋值时触发该操作，比如在执行 <code>proxy.foo = 1</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> - <dd>在删除代理对象的某个属性时触发该操作，即使用 {{jsxref("Operators/delete", "delete")}} 运算符，比如在执行 <code>delete proxy.foo</code> 时。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> - <dd>{{jsxref("Object.getOwnPropertyNames")}} 和{{jsxref("Object.getOwnPropertySymbols")}} 的陷阱。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> - <dd>函数调用操作的陷阱。</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> - <dd>{{jsxref("Operators/new", "new")}} 运算符的陷阱。</dd> -</dl> - -<p>一些不标准的陷阱已经<a href="/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">废弃并且被移除了</a></p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.Proxy.handler")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{JSxRef("Proxy")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html deleted file mode 100644 index efe5781a05..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: RangeError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef}}</div> - -<div> </div> - -<div><code><strong>RangeError.prototype</strong></code> 属性表示 {{jsxref("RangeError")}} 构造函数的原型。</div> - -<div> </div> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="描述">描述</h2> - -<p>所有 {{jsxref("RangeError")}} 的实例都继承自 <code>RangeError.prototype</code> ，所以你可以使用这个属性来为所有的实例添加属性或方法。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>指定了创建实例原型的函数</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>错误信息。尽管 ECMA-262 规定了 {{jsxref("RangeError")}} 应该拥有一个 <code>message</code> 属性，但在 <a href="/zh-CN/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中，该属性继承自 {{jsxref("Error.prototype.message")}}。</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>错误名字，继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>引起该错误的文件路径，继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>引起该错误的行号，继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>引起该错误的列号，继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>堆栈跟踪记录，继承自 {{jsxref("Error")}}。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p>尽管 {{jsxref("RangeError")}} 原型对象自身没有包含任何方法，但是 {{jsxref("RangeError")}} 实例却通过原型链继承到了一些方法。</p> - -<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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.RangeError")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html deleted file mode 100644 index 09306f2862..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ReferenceError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError -tags: - - Error - - JavaScript - - Property - - Prototype - - ReferenceError -translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError -translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>ReferenceError.prototype</strong></code> 表示 {{jsxref("ReferenceError")}} 的原型构造器。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="描述">描述</h2> - -<p>所有{{jsxref("ReferenceError")}} 实例都继承自 <code>ReferenceError.prototype</code>. 你可以使用原型来为所有实例添加属性和方法。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>ReferenceError.prototype.constructor</code></dt> - <dd>创建一个实例原型的函数。</dd> - <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> - <dd>错误信息。尽管ECMA-262 曾表示 {{jsxref("ReferenceError")}} 应该提供自己的 <code>message</code> 属性, 在 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中, 它继承自{{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> - <dd>错误名称. 继承自{{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> - <dd>出现这个错误的路径. 继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> - <dd>出现这个错误的行号. 继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> - <dd>出现这个错误的列号. 继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> - <dd>堆栈追踪. 继承自 {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p>尽管 {{jsxref("ReferenceError")}} 原型对象自身没有包括任何方法, {{jsxref("ReferenceError")}} 实例确实从原型链中继承了一些方法。</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>初始定义</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Defined as <code><em>NativeError</em>.prototype</code>.</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> - - -<p>{{Compat("javascript.builtins.ReferenceError")}}</p> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html deleted file mode 100644 index 740b32604b..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: RegExp.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/RegExp -tags: - - JavaScript - - Property - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp -translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype ---- -<p>{{JSRef("Global_Objects", "RegExp")}}</p> -<h2 id="Summary" name="Summary">概述</h2> -<p><font face="Courier New, Andale Mono, monospace">RegExp.prototype 属性表示 </font><span style="line-height: 1.5;">{{jsxref("Global_Objects/RegExp", "RegExp")}} </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">构造函数的原型对象。</span></p> -<h2 id="Description" name="Description">描述</h2> -<p>查看<font face="Courier New, Andale Mono, monospace"> </font><span style="line-height: 1.5;">{{jsxref("Global_Objects/RegExp", "RegExp")}} </span><span style="line-height: 1.5;">了解更多关于 </span><code style="font-style: normal; line-height: 1.5;">RegExp</code> <code style="font-style: normal; line-height: 1.5;">实例的说明。</code></p> -<p><code>RegExp</code> 实例继承 <code>RegExp.prototype</code>。修改该原型对象上的属性或方法会影响到所有的 <code>RegExp</code> <code>实例。</code></p> -<h2 id="Properties" name="Properties">属性</h2> -<p>查看<a href="/zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Properties" title="zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Properties">已废弃的RegExp属性</a></p> -<p>注意，<code>RegExp</code> 对象的几个属性既有完整的长属性名，也有对应的类 Perl 的短属性名。两个属性都有着同样的值。JavaScript 的正则语法就是基于 Perl 的。</p> -<dl> - <dt> - <code style="font-style: normal; font-weight: bold;">RegExp.prototype.</code><code style="font-style: normal; font-weight: bold;">constructor</code></dt> - <dd> - 创建该正则对象的构造函数。</dd> - <dt> - {{jsxref("RegExp.prototype.global")}}</dt> - <dd> - 是否开启全局匹配，也就是匹配目标字符串中所有可能的匹配项，而不是只进行第一次匹配。</dd> - <dt> - {{jsxref("RegExp.prototype.ignoreCase")}}</dt> - <dd> - 在匹配字符串时是否要忽略字符的大小写。</dd> - <dt> - {{jsxref("RegExp.prototype.lastIndex")}}</dt> - <dd> - 下次匹配开始的字符串索引位置。</dd> - <dt> - {{jsxref("RegExp.prototype.multiline")}}</dt> - <dd> - 是否开启多行模式匹配（影响 ^ 和 $ 的行为）。</dd> - <dt> - {{jsxref("RegExp.prototype.source")}}</dt> - <dd> - 正则对象的源模式文本。</dd> - <dt> - {{jsxref("RegExp.prototype.sticky")}} {{experimental_inline}}</dt> - <dd> - 是否开启粘滞匹配。</dd> -</dl> -<div> - {{ jsOverrides("Object", "properties", "constructor", "global", "ignoreCase", "lastIndex", "multiline", "source", "sticky") }}</div> -<h2 id="Methods" name="Methods">方法</h2> -<p>查看<a href="/zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Methods" title="zh-CN/docs/JavaScript/Reference/Deprecated_Features#RegExp_Methods">已废弃的RegExp方法</a></p> -<dl> - <dt> - {{jsxref("RegExp.prototype.exec()")}}</dt> - <dd> - 在目标字符串中执行一次正则匹配操作。</dd> - <dt> - {{jsxref("RegExp.prototype.test()")}}</dt> - <dd> - 测试当前正则是否能匹配目标字符串。</dd> - <dt> - {{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd> - 返回一个字符串，其值为该正则对象的字面量形式。覆盖了<code>Object.prototype.toSource</code> 方法.</dd> - <dt> - {{jsxref("RegExp.prototype.toString()")}}</dt> - <dd> - 返回一个字符串，其值为该正则对象的字面量形式。覆盖了{{jsxref("Object.prototype.toString()")}} 方法。</dd> -</dl> -<div> - {{ jsOverrides("Object", "Methods", "exec", "test", "toSource", "toString") }}</div> -<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</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>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px;">浏览器兼容性</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Chrome for Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Mobile</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px;">相关链接</h2> -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript Guide</a></li> - <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> -<p> </p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html deleted file mode 100644 index 41da127b42..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: SharedArrayBuffer.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -tags: - - Prototype - - SharedArrayBuffer -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>SharedArrayBuffer.prototype</code></strong> 属性表示 {{jsxref("SharedArrayBuffer")}} 对象的原型。</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="描述">描述</h2> - -<p><code>SharedArrayBuffer</code>实例继承自<code>SharedArrayBuffer.prototype</code>。 与所有构造函数一样，您可以更改构造函数的原型对象以对所有<code>SharedArrayBuffer</code>实例进行更改。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>SharedArrayBuffer.prototype.constructor</dt> - <dd>指定创建对象原型的函数。 初始值为标准的内置<code>SharedArrayBuffer</code>构造函数。</dd> - <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>数组的大小（以字节为单位）。 这是在数组初始化时建立的，并且无法被更改。<strong> 只读</strong>。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt> - <dd>返回一个新的<code>SharedArrayBuffer</code>，其内容是此<code>SharedArrayBuffer</code>字节从<code>beigin</code>开始（包括<code>begin</code>）到<code>end</code>结束（不包括<code>end</code>）的副本。 如果<code>begin</code>或<code>end</code>为负，则它是指数组末尾的索引，而不是开头的索引。</dd> -</dl> - -<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('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Initial definition in ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("SharedArrayBuffer")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index cbfdf0580b..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: String.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/String -tags: - - JavaScript - - 原型 - - 参考 - - 字符串 - - 属性 -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<div>{{JSRef}}</div> - -<p> <code><strong>String.prototype</strong></code> 属性表示 {{jsxref("String")}}原型对象。</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description">描述</h2> - -<p>所有 {{jsxref("String")}} 的实例都继承自 <code>String.prototype</code>. 任何String.prototype上的改变都会影响到所有的 {{jsxref("String")}} <code>实例。</code></p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>用于创造对象的原型对象的特定的函数。</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>返回了字符串的长度。</dd> - <dt><em>N</em></dt> - <dd>用于访问第N个位置的字符，其中N是小于 {{jsxref("String.length", "length")}} 和 0之间的正整数。这些属性都是“只读”性质，不能编辑。</dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">跟HTML无关的方法</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>返回特定位置的字符。</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>返回表示给定索引的字符的Unicode的值。</dd> - <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> - <dd>返回使用UTF-16编码的给定位置的值的非负整数。</dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>连接两个字符串文本，并返回一个新的字符串。</dd> - <dt>{{jsxref("String.prototype.includes()")}}</dt> - <dd>判断一个字符串里是否包含其他字符串。</dd> - <dt>{{jsxref("String.prototype.endsWith()")}}</dt> - <dd>判断一个字符串的是否以给定字符串结尾，结果返回布尔值。</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>从字符串对象中返回首个被发现的给定值的索引值，如果没有找到则返回-1。</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd>从字符串对象中返回最后一个被发现的给定值的索引值，如果没有找到则返回-1。</dd> - <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> - <dd>返回一个数字表示是否引用字符串在排序中位于比较字符串的前面，后面，或者二者相同。</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>使用正则表达式与字符串相比较。</dd> - <dt>{{jsxref("String.prototype.normalize()")}}</dt> - <dd>返回调用字符串值的Unicode标准化形式。</dd> - <dt>{{jsxref("String.prototype.padEnd()")}}</dt> - <dd>在当前字符串尾部填充指定的字符串， 直到达到指定的长度。 返回一个新的字符串。</dd> - <dt>{{jsxref("String.prototype.padStart()")}}</dt> - <dd> - <p>在当前字符串头部填充指定的字符串， 直到达到指定的长度。 返回一个新的字符串。</p> - </dd> - <dt>{{jsxref("String.prototype.quote()")}} {{ obsolete_inline }}</dt> - <dd>设置嵌入引用的引号类型。</dd> - <dt>{{jsxref("String.prototype.repeat()")}}</dt> - <dd>返回指定重复次数的由元素组成的字符串对象。</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>被用来在正则表达式和字符串直接比较，然后用新的子串来替换被匹配的子串。</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>对正则表达式和指定字符串进行匹配搜索，返回第一个出现的匹配项的下标。</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>摘取一个字符串区域，返回一个新的字符串。</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>通过分离字符串成字串，将字符串对象分割成字符串数组。</dd> - <dt>{{jsxref("String.prototype.startsWith()")}}</dt> - <dd>判断字符串的起始位置是否匹配其他字符串中的字符。</dd> - <dt>{{jsxref("String.prototype.substr()")}}</dt> - <dd>通过指定字符数返回在指定位置开始的字符串中的字符。</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>返回在字符串中指定两个下标之间的字符。</dd> - <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> - <dd>根据当前区域设置，将符串中的字符转换成小写。对于大多数语言来说，{{jsxref("String.toLowerCase", "toLowerCase")}}的返回值是一致的。</dd> - <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> - <dd>根据当前区域设置，将字符串中的字符转换成大写，对于大多数语言来说，{{jsxref("String.toUpperCase", "toUpperCase")}}的返回值是一致的。</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>将字符串转换成小写并返回。</dd> - <dt>{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> - <dd>返回一个对象文字代表着特定的对象。你可以使用这个返回值来创建新的对象。重写 {{jsxref("Object.prototype.toSource")}} 方法。</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>返回用字符串表示的特定对象。重写 {{jsxref("Object.prototype.toString")}} 方法。</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>将字符串转换成大写并返回。</dd> - <dt>{{jsxref("String.prototype.trim()")}}</dt> - <dd>从字符串的开始和结尾去除空格。参照部分 ECMAScript 5 标准。</dd> - <dt>{{jsxref("String.prototype.trimStart()")}}</dt> - <dt>{{jsxref("String.prototype.trimLeft()")}} {{ Non-standard_inline() }}</dt> - <dd>从字符串的左侧去除空格。</dd> - <dt>{{jsxref("String.prototype.trimEnd()")}}</dt> - <dt>{{jsxref("String.prototype.trimRight()")}} {{ Non-standard_inline() }}</dt> - <dd>从字符串的右侧去除空格。</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>返回特定对象的原始值。重写 {{jsxref("Object.prototype.valueOf")}} 方法。</dd> - <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt> - <dd>返回一个新的迭代器对象，该对象遍历字符串值的索引位置，将每个索引值作为字符串值返回。</dd> -</dl> - -<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">HTML wrapper methods</h3> - -<p>下面的方法被限制使用，因为只对可用的HTML标签和属性提供部分支持。</p> - -<dl> - <dt>{{jsxref("String.prototype.anchor()")}}</dt> - <dd><code><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-name"><a name="name"></a></code> (hypertext target)</dd> - <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> - <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/font#attr-color"><code><font color="<em>color</em>"></code></a></dd> - <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> - <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/font#attr-size"><code><font size="<em>size</em>"></code></a></dd> - <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}}</dt> - <dd><a class="external" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-href"><code><a href="<em>url</em>"></code></a> (link to URL)</dd> - <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.builtins.String.prototype")}}</p> - -<h2 id="更多">更多</h2> - -<ul> - <li>{{jsxref("Global_Objects/String", "String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html deleted file mode 100644 index b9ec4f2381..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Symbol.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol -translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> 表示 {{jsxref("Symbol")}} 构造函数的原型。.</p> - -<div>{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}</div> - -<h2 id="Description">Description</h2> - -<p>{{jsxref("Symbol")}} 继承自 {{jsxref("Symbol.prototype")}}. 你可以使用构造函数的原型对象来给所有Symbol实例添加属性或者方法。</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>Symbol.prototype.constructor</code></dt> - <dd>返回创建实例原型的函数. 默认为 {{jsxref("Symbol")}} 函数。</dd> - <dt>{{jsxref("Symbol.prototype.description")}}</dt> - <dd>一个包含symbol描述的只读字符串。</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt> - <dd>返回包含{{jsxref("Global_Objects/Symbol", "Symbol")}} 对象源码的字符串。覆盖{{jsxref("Object.prototype.toSource()")}} 方法。</dd> - <dt>{{jsxref("Symbol.prototype.toString()")}}</dt> - <dd>返回包含Symbol描述符的字符串。 覆盖{{jsxref("Object.prototype.toString()")}} 方法。</dd> - <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt> - <dd>返回 {{jsxref("Symbol")}} 对象的初始值.。覆盖 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> - <dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt> - <dd> 返回{{jsxref("Symbol")}}对象的初始值。</dd> -</dl> - -<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('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{Compat("javascript.builtins.Symbol.prototype")}}</p> - -<div id="compat-mobile"></div> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html deleted file mode 100644 index 9b7eb11a66..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: SyntaxError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError -tags: - - Error - - JavaScript - - Property - - Prototype - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>SyntaxError.prototype</strong></code> 属性表示{{jsxref("SyntaxError")}} 构造器的原型.</p> - -<h2 id="Description" name="Description">描述</h2> - -<p>所有 {{jsxref("SyntaxError")}} 实例继承自 <code>SyntaxError.prototype</code>. 你可以使用该原型给所有实例添加属性和方法.</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>创建实例的构造函数.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>错误信息. 尽管 ECMA-262 指出, {{jsxref("SyntaxError")}} 应该提供其子什么的信息属性,但在 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中, 仍是继承自{{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd><span style="line-height: 19.0909080505371px;">错误的名称.继承自</span> {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>抛出该异常的文件路径.继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd><span style="line-height: 19.0909080505371px;">抛出该异常的文件的行号</span>. 继承自 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd><span style="line-height: 19.0909080505371px;">抛出该异常的文件的列数</span>. <span style="line-height: 19.0909080505371px;">继承自</span> {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>栈追踪信息. <span style="line-height: 19.0909080505371px;">继承自</span> {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p>尽管 {{jsxref("SyntaxError")}} 原型对象自身不包含任何方法,但 {{jsxref("SyntaxError")}} 实例从原型链中继承了一些方法.</p> - -<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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">相关链接</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html deleted file mode 100644 index 61824a9cfe..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: TypedArray.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong>属性表示{{jsxref("TypedArray")}}构造器的原型.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="描述">描述</h2> - -<p>{{jsxref("TypedArray")}} 实例继承自 {{jsxref("TypedArray.prototype")}}. 你可以通过该原型对象为所有的类型化数组(<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array types</a>)实例添加属性和方法.</p> - -<p>关于继承的更多的信息请参见关于<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Description"><em>TypedArray</em></a> 的描述.</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>TypedArray.prototype.constructor</code></dt> - <dd>返回创建实例原型的构造函数.这是相应的<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array type</a>的默认的构造函数.</dd> - <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>返回被格式化数组引用的{{jsxref("ArrayBuffer")}}. 创建时已被固化,因此是只读的.</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>返回从{{jsxref("ArrayBuffer")}}读取的字节长度. 创建时已被固化,因此是只读的.</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>返回从{{jsxref("ArrayBuffer")}}读取时的字节偏移量<strong>.</strong>创建时已被固化,因此是只读的.</dd> - <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> - <dd>返回在类型化数组中的元素的数量<strong>.</strong>创建时已被固化,因此是只读的.</dd> -</dl> - -<h2 id="methods">methods</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> - <dd>浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组. 参见 {{jsxref("Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> - <dd>返回一个 <code><strong>Array Iterator</strong></code> 对象，该对象包含数组中每一个索引的键值对.参见 {{jsxref("Array.prototype.entries()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> - <dd>测试数组的所有元素是否都通过了指定函数的测试. 参见{{jsxref("Array.prototype.every()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> - <dd>将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值. 参见 {{jsxref("Array.prototype.fill()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> - <dd>使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组. 参见 {{jsxref("Array.prototype.filter()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> - <dd>返回一个满足提供的函数的测试的元素,若是没有满足的元素则返回<code>undefined</code> . 参见 {{jsxref("Array.prototype.find()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> - <dd>查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1. 参见 {{jsxref("Array.prototype.findIndex()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> - <dd>对数组的每个元素执行一次提供的函数(回调函数). 参见 {{jsxref("Array.prototype.forEach()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>确定一个类型化数组是否包括了某个元素,包含就返回true,不包含就返回false.参见 {{jsxref("Array.prototype.includes()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> - <dd>返回数组中第一个等于指定值得元素的索引,如果找不到则返回-1. 参见 {{jsxref("Array.prototype.indexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> - <dd>将数组中的所有元素连接成一个字符串. 参见 {{jsxref("Array.prototype.join()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> - <dd>返回一个新的包含数组索引的数组迭代器. 参见 {{jsxref("Array.prototype.keys()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> - <dd>返回数组中最后一个等于指定值得元素的索引,如果找不到则返回-1.参见 {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> - <dd>创建一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组.参见 {{jsxref("Array.prototype.map()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> - <dd>以前的不标准版本的 {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> - <dd>接收一个函数作为累加器（accumulator),数组中的每个值（从左到右）开始合并，最终为一个值. 参见{{jsxref("Array.prototype.reduce()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> - <dd>接受一个函数作为累加器（accumulator）,让每个值（从右到左，亦即从尾到头）缩减为一个值.（与 <code>reduce()</code> 的执行方向相反）. 参见{{jsxref("Array.prototype.reduceRight()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> - <dd>颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个. 参见 {{jsxref("Array.prototype.reverse()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> - <dd>读取一个指定数组中的元素保存到格式化数组中.</dd> - <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> - <dd>浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组. 参见 {{jsxref("Array.prototype.slice()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> - <dd>数组中只要有一个元素满足提供的测试函数的测试就返回true,否则返回false. 参见 {{jsxref("Array.prototype.some()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> - <dd>对数组进行排序,并返回原数组(是改变原数组). 参见 {{jsxref("Array.prototype.sort()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> - <dd>返回给定的起始和结束索引之间的元素组成的新的类型化数组.</dd> - <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> - <dd>返回有数组中的元素组成的新的数组迭代对象. 参见 {{jsxref("Array.prototype.values()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> - <dd>返回一个将数组中的每个元素本地化后组成的字符串. 参见 {{jsxref("Array.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> - <dd>返回一个由数组中的每个元素字符串化后组成的字符串. 参见 {{jsxref("Array.prototype.toString()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> - <dd>返回一个包含数组中每个元素的新的数组迭代对象.</dd> -</dl> - -<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('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>7.0</td> - <td>{{ CompatGeckoDesktop("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("2") }}</td> - <td>10</td> - <td>11.6</td> - <td>4.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("TypedArray")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html deleted file mode 100644 index 3395910e90..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: TypeError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypeError -tags: - - Error - - JavaScript - - TypeError - - 原型 - - 错误 -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>TypeError.prototype</strong></code> 属性表示 {{jsxref("TypeError")}}构造函数的原型。</p> - -<p> </p> - -<h2 id="描述">描述</h2> - -<p>所有{{jsxref("TypeError")}}实例都继承自TypeError.prototype。您可以使用原型向所有实例添加属性或方法</p> - -<p> </p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>TypeError.prototype.constructor</code></dt> - <dd>声明创建实例原型 (prototype) 的方法。</dd> - <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> - <dd>错误信息。虽然 ECMA-262 规范指出 {{jsxref("TypeError")}} 应该实现其自身的 <code>message</code> 属性，但是在 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中，该属性继承自 {{jsxref("Error.prototype.message")}}。</dd> - <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> - <dd>错误名称。继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> - <dd>引起该错误的代码所在文件的路径。继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> - <dd>引起错误的代码所在行的行号。继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> - <dd>引起错误的代码所在列的列号。继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> - <dd>堆栈跟踪记录。 继承自 {{jsxref("Error")}}。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p>尽管 {{jsxref("TypeError")}} 不包含任何自己的方法, 但{{jsxref("TypeError")}}的实例通过原型链继承了一些方法。</p> - -<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('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> 定义为 <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> 定义为 <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> 初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.builtins.TypeError")}}</p> - -<div id="compat-desktop"> </div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html deleted file mode 100644 index a3d35fa68c..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: URIError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/URIError -translation_of: Web/JavaScript/Reference/Global_Objects/URIError -translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype ---- -<div>{{JSRef}}</div> - -<div><code><strong>URIError.prototype</strong></code> 属性表示 {{jsxref("URIError")}} 构造器的原型。</div> - -<h2 id="描述">描述</h2> - -<p>所有的 {{jsxref("URIError")}} 实例都继承自 <code>URIError.prototype</code>。 可以通过原型(prototype) 给所有的实例添加属性或者方法。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>URIError.prototype.constructor</code></dt> - <dd>声明创建实例原型 (prototype) 的方法。</dd> - <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> - <dd>错误信息。虽然 ECMA-262 规范指出 {{jsxref("URIError")}} 应该提供其自己专属的 <code><strong>message</strong></code><strong> </strong>属性，但是在 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 中，该属性继承自 {{jsxref("Error.prototype.message")}}</dd> - <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> - <dd>错误名称。继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> - <dd>产生该错误的代码所在文件的路径。 继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> - <dd>产生该错误的代码所在行的行号。继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> - <dd>产生该错误的代码所在列的列号。 继承自 {{jsxref("Error")}}。</dd> - <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> - <dd>堆栈记录。继承自 {{jsxref("Error")}}。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p>虽然 {{jsxref("URIError")}} 的原型对象自身不包含任何方法，但是 {{jsxref("URIError")}} 的实例通过原型链(prototype chain)继承了一些方法。</p> - -<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('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> 初始定义</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> 定义为 <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.15);"> 定义为</span></font><code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.25);"> 定义为</span></font><code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> - - -<p>{{Compat("javascript.builtins.URIError")}}</p> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html deleted file mode 100644 index 4e5be33f06..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: WeakMap.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong>属性表现为 {{jsxref("WeakMap")}}的构造器。</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="描述">描述</h2> - -<p>{{jsxref("WeakMap")}} 实例从 {{jsxref("WeakMap.prototype")}}继承了所有属性。你可以在<code>WeakMap构造器中添加属性和方法，从而使得所有</code>实例中都有效。</p> - -<p><code>WeakMap.prototype</code> 本身只是一个普通的对象：</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>返回创建WeakMap实例的原型函数。 {{jsxref("WeakMap")}}函数是默认的。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd>移除key的关联对象。执行后 <code>WeakMap.prototype.has(key)返回</code><code>false。</code></dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> - <dd>返回<code>key关联对象</code>, 或者 <code>undefined</code>(没有key关联对象时)。</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd>根据是否有key关联对象返回一个Boolean值。</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> - <dd>在WeakMap中设置一组key关联对象，返回这个 <code>WeakMap</code>对象。</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">从<code>WeakMap中移除所有的</code> key/value 。 注意，该方法已弃用,但可以通过创建一个空的WeakMap并替换原对象来实现 (参看 {{jsxref("WeakMap")}}的后半部分)</s></dd> -</dl> - -<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('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>36</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>11</td> - <td>23</td> - <td>7.1</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html deleted file mode 100644 index d06fca34dc..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: WeakSet.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -<div>{{JSRef("Global_Objects", "WeakSet")}}</div> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p>The <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> property represents the prototype for the {{jsxref("WeakSet")}} constructor.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description">Description</h2> - -<p>{{jsxref("WeakSet")}} instances inherit from {{jsxref("WeakSet.prototype")}}. You can use the constructor's prototype object to add properties or methods to all <code>WeakSet</code> instances.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>WeakSet.prototype.constructor</code></dt> - <dd>返回构造函数即 {{jsxref("WeakSet")}} 本身.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt> - <dd> 在<span style="line-height: 1.5;">该 </span><code style="font-size: 14px;">WeakSet</code><span style="line-height: 1.5;"> 对象中添加一个新元素 <code>value</code>.</span></dd> - <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt> - <dd>从<span style="line-height: 1.5;">该 </span><code style="font-size: 14px;">WeakSet</code><span style="line-height: 1.5;"> 对象中删除</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">value </code><span style="line-height: 1.5;">这个元素, 之后 </span><code style="font-size: 14px;">WeakSet.prototype.has(value)</code><span style="line-height: 1.5;"> 方法便会返回 </span><code style="font-size: 14px;">false</code><span style="line-height: 1.5;">.</span></dd> - <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt> - <dd>返回一个布尔值, 表示给定的值 <code>value</code> 是否存在于这个 <code>WeakSet</code> 中.</dd> -</dl> - -<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('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatNo() }} {{bug(792439)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }} {{bug(792439)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Chrome-specific_notes">Chrome-specific notes</h3> - -<ul> - <li>This feature is available behind a preference. In <code style="font-size: 14px;">chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> - <li>{{jsxref("WeakMap.prototype")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html deleted file mode 100644 index e3cd47f9ab..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Reserved Words -slug: conflicting/Web/JavaScript/Reference/Lexical_grammar -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words -original_slug: Web/JavaScript/Reference/Reserved_words ---- -<p> </p> - -<p>以下这些是ECMAScript规范已经规定的关键字，不能用作变量、函数名、过程、和对象名：</p> - -<ul> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/break">break</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/switch">case</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/try...catch">catch</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/continue">continue</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/switch">default</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/do...while">do</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/if...else">else</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/try...catch">finally</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/for">for</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/function">function</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/for...in">in</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/return">return</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/switch">switch</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/throw">throw</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/try...catch">try</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/typeof_Operator">typeof</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/var">var</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Operators/Special_Operators/void_Operator">void</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/while">while</a></li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/with">with</a></li> -</ul> - -<p>以下是ECMAScript规定的保留字：</p> - -<ul> - <li>abstract</li> - <li>boolean</li> - <li>byte</li> - <li>char</li> - <li>class</li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/const">const</a></li> - <li>debugger</li> - <li>double</li> - <li>enum</li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/export">export</a></li> - <li>extends</li> - <li>final</li> - <li>float</li> - <li>goto</li> - <li>implements</li> - <li><a href="cn/Core_JavaScript_1.5_Reference/Statements/import">import</a></li> - <li>int</li> - <li>interface</li> - <li>long</li> - <li>native</li> - <li>package</li> - <li>private</li> - <li>protected</li> - <li>public</li> - <li>short</li> - <li>static</li> - <li>super</li> - <li>synchronized</li> - <li>throws</li> - <li>transient</li> - <li>volatile</li> -</ul> - -<p>请注意，虽然ECMA-262还没有正式规定，但是在Mozilla中const,export和import已经被作为保留字对待。</p> - -<div class="noinclude"><a href="cn/Cn/Core_JavaScript_1.5_Reference/Reserved_Words">cn:Core JavaScript 1.5 Reference:Reserved Words</a> - -<p> </p> -</div> - -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Reserved_Words" } ) }}</p> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index 3978a30a08..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: 算术运算符 -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>算术运算符</strong>以数值（字面量或变量）作为其操作数，并返回一个单个数值。标准算术运算符是加法（+），减法（-），乘法（*）和除法（/）。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> - - - -<h2 id="加法">加法 (+)</h2> - -<p>加法运算符的作用是数值求和，或者字符串拼接。</p> - -<h3 id="语法">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> x + y -</pre> - -<h3 id="示例">示例</h3> - -<pre class="brush: js notranslate">// Number + Number -> 数字相加 -1 + 2 // 3 - -// Boolean + Number -> 数字相加 -true + 1 // 2 - -// Boolean + Boolean -> 数字相加 -false + false // 0 - -// Number + String -> 字符串连接 -5 + "foo" // "5foo" - -// String + Boolean -> 字符串连接 -"foo" + false // "foofalse" - -// String + String -> 字符串连接 -"foo" + "bar" // "foobar" -</pre> - -<h2 id="减法_-">减法 (-)</h2> - -<p>减法运算符使两个操作数相减，结果是它们的差值。</p> - -<h3 id="语法_2">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> x - y -</pre> - -<h3 id="示例_2">示例</h3> - -<pre class="brush: js notranslate">5 - 3 // 2 -3 - 5 // -2 -"foo" - 3 // NaN</pre> - -<h2 id="除法">除法 (/)</h2> - -<p>除法运算符的结果是操作数的商 ，左操作数是被除数，右操作数是除数。</p> - -<h3 id="语法_3">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> x / y -</pre> - -<h3 id="示例_3">示例</h3> - -<pre class="brush: js notranslate">1 / 2 // 在 JavaScript 中返回 0.5 -1 / 2 // 在 Java 中返回 0 -// （不需要数字是明确的浮点数） - -1.0 / 2.0 // 在 JavaScript 或 Java 中都返回 0.5 - -2.0 / 0 // 在 JavaScript 中返回 Infinity -2.0 / 0.0 // 同样返回 Infinity -2.0 / -0.0 // 在 JavaScript 中返回 -Infinity</pre> - -<h2 id="乘法_*">乘法 (*)</h2> - -<p>乘法运算符的结果是操作数的乘积。</p> - -<h3 id="语法_4">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> x * y -</pre> - -<h3 id="示例_4">示例</h3> - -<pre class="brush: js notranslate">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -"foo" * 2 // NaN -</pre> - -<h2 id="求余">求余 (%)</h2> - -<p>求余运算符返回第一个操作数对第二个操作数的模，即 <code>var1</code> 对 <code>var2</code> 取模，其中 <code>var1</code> 和 <code>var2</code> 是变量。取模功能就是 <code>var1</code> 除以 <code>var2</code> 的整型余数。</p> - -<h3 id="语法_5">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> var1 % var2 -</pre> - -<h3 id="示例_5">示例</h3> - -<pre class="brush: js notranslate">12 % 5 // 2 --1 % 2 // -1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5 -</pre> - -<h2 id="幂_**">幂 (**)</h2> - -<p>幂运算符返回第一个操作数做底数，第二个操作数做指数的乘方。即，<code>var1</code><sup><code>var2</code></sup>，其中 <code>var1</code> 和 <code>var2</code> 是其两个操作数。幂运算符是右结合的。<code>a ** b ** c</code> 等同于 <code>a ** (b ** c)</code>。</p> - -<h3 id="语法_6">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> var1 ** var2 -</pre> - -<h3 id="注解">注解</h3> - -<p>包括 PHP 或 Python 等的大多数语言中，都包含幂运算符（一般来说符号是 ^ 或者 **）。这些语言中的幂运算符有着比其他的单目运算符（如一元 + 或一元 - ）更高的优先级。但是作为例外，在 Bash 中，** 运算符被设计为比单目运算符优先级更低。在最新的 JavaScript（ES2016） 中，禁止使用带歧义的幂运算表达式。比如，底数前不能紧跟一元运算符（<code>+/-/~/!/delete/void/typeof</code>）。</p> - -<pre class="brush: js notranslate">-2 ** 2; -// 在 Bash 中等于 4 ，而在其他语言中一般等于 -4 -// 在 JavaScript 中是错误的，因为这会有歧义 - --(2 ** 2); -// -4 在 JavaScript 中能够明显体现出作者的意图</pre> - -<h3 id="示例_6">示例</h3> - -<pre class="brush: js notranslate">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 -</pre> - -<p>如果要反转求幂表达式结果的符号，你可以采用这样的方式：</p> - -<pre class="brush: js notranslate">-(2 ** 2) // -4</pre> - -<p>强制求幂表达式的基数为负数：</p> - -<pre class="brush: js notranslate">(-2) ** 2 // 4</pre> - -<h2 id="递增">递增 (++)</h2> - -<p>递增运算符为其操作数增加1，返回一个数值。</p> - -<ul> - <li>如果使用后置（postfix），即运算符位于操作数的后面（如 x++），那么将会在递增前返回数值。</li> - <li>如果使用前置（prefix），即运算符位于操作数的前面（如 ++x），那么将会在递增后返回数值。</li> -</ul> - -<h3 id="语法_7">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> x++ 或者 ++x -</pre> - -<h3 id="示例_7">示例</h3> - -<pre class="brush: js notranslate">// 后置 -var x = 3; -y = x++; -// y = 3, x = 4 - -// 前置 -var a = 2; -b = ++a; -// a = 3, b = 3 -</pre> - -<h2 id="递减_--">递减 (--)</h2> - -<p>递减运算符将其操作数减去1，并返回一个数值。</p> - -<ul> - <li>如果后置使用（如 x--），则在递减前返回数值。</li> - <li>如果前置使用（如 --x），则在递减后返回数值。</li> -</ul> - -<h3 id="语法_8">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> x-- or --x -</pre> - -<h3 id="示例_8">示例</h3> - -<pre class="brush: js notranslate">// 后置 -var x = 3; -y = x--; // y = 3, x = 2 - -// 前置 -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="一元负号_-">一元负号 (-)</h2> - -<p>一元负号运算符位于操作数前面，并转换操作数的符号。</p> - -<h3 id="语法_9">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> -x -</pre> - -<h3 id="示例_9">示例</h3> - -<pre class="brush: js notranslate">var x = 3; -y = -x; // y = -3, x = 3 -</pre> - -<h2 id="一元正号">一元正号 (+)</h2> - -<p>一元正号运算符位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。它可以将字符串转换成整数和浮点数形式，也可以转换非字符串值 <code>true</code>，<code>false</code> <code>和</code> <code>null</code>。小数和十六进制格式字符串也可以转换成数值。负数形式字符串也可以转换成数值（对于十六进制不适用）。如果它不能解析一个值，则计算结果为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>。</p> - -<h3 id="语法_10">语法</h3> - -<pre class="syntaxbox notranslate"><strong>运算符:</strong> +x -</pre> - -<h3 id="示例_10">示例</h3> - -<pre class="brush: js notranslate">+3 // 3 -+"3" // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val;} //NaN</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td>Added <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">赋值运算符</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html deleted file mode 100644 index ae8635cf42..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html +++ /dev/null @@ -1,280 +0,0 @@ ---- -title: 比较操作符 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 -tags: - - 严格比较操作符 - - 比较操作符 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript 有两种比较方式：严格比较运算符和转换类型比较运算符。对于严格比较运算符（===）来说，仅当两个操作数的类型相同且值相等为 true，而对于被广泛使用的比较运算符（==）来说，会在进行比较之前，将两个操作数转换成相同的类型。对于关系运算符（比如 <=）来说，会先将操作数转为原始值，使它们类型相同，再进行比较运算。</p> - -<p>字符串比较则是使用基于标准字典的 Unicode 值来进行比较的。</p> - -<p>比较的特点:</p> - -<ul> - <li>对于两个拥有相同字符顺序，相同长度，并且每个字符的位置都匹配的字符串，应该使用严格比较运算符。</li> - <li><span style="line-height: 1.5;"> 对于两个数值相同的数字应该使用严格比较运算符，NaN和任何值不相等，包括其自身，正数零等于负数零。</span></li> - <li>对于两个同为true或同为false的布尔操作数，应使用严格比较运算符。</li> - <li>不要使用严格比较运算符或比较运算符来比较两个不相等的对象。</li> - <li>当比较一个表达式和一个对象时，仅当两个操作数引用相同的对象（指针指向相同对象）。</li> - <li>对于Null 和 Undefined 类型而言，应使用严格比较运算符比较其自身，使用比较运算符进行互相比较。</li> -</ul> - -<h2 id="相等运算符">相等运算符</h2> - -<h3 id="相等()">相等(==)</h3> - -<p>比较操作符会为两个不同类型的操作数转换类型，然后进行严格比较。当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。</p> - -<h4 id="语法">语法</h4> - -<pre class="syntaxbox">x == y -</pre> - -<h4 id="例子">例子</h4> - -<pre class="brush: js"> 1 == 1 // true -"1" == 1 // true - 1 == '1' // true - 0 == false // true -</pre> - -<h3 id="不相等_(!)"><a name="Inequality">不相等 (!=)</a></h3> - -<p>不等操作符仅当操作数不相等时返回true，如果两操作数不是同一类型，JavaScript会尝试将其转为一个合适的类型，然后进行比较。如果两操作数为对象类型，JavaScript会比较其内部引用地址，仅当他们在内存中引用不同对象时不相等。</p> - -<h4 id="语法_2">语法</h4> - -<pre class="syntaxbox">x != y</pre> - -<h4 id="例子_2">例子</h4> - -<pre class="brush: js">1 != 2 // true -1 != "1" // false -1 != '1' // false -1 != true // false -0 != false // false -</pre> - -<h3 id="一致严格相等_()"><a name="Identity">一致/严格相等 (===)</a></h3> - -<p>一致运算符不会进行类型转换，仅当操作数严格相等时返回true</p> - -<h4 id="语法_3">语法</h4> - -<pre class="syntaxbox">x === y</pre> - -<h4 id="例子_3">例子</h4> - -<pre class="brush: js ">3 === 3 // true -3 === '3' // false -var object1 = {"value":"key"}, object2={"value":"key"}; -object1 === object2 //false</pre> - -<h3 id="不一致严格不相等_(!)"><a name="Nonidentity">不一致/严格不相等 (!==)</a></h3> - -<p>不一致运算符当操作数不相等或不同类型时返回true</p> - -<h4 id="语法_4">语法</h4> - -<pre class="syntaxbox">x !== y</pre> - -<h4 id="例子_4">例子</h4> - -<pre class="brush: js">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="关系运算符">关系运算符</h2> - -<h3 id="大于运算符_(>)"><a name="Greater_than_operator">大于运算符 (>)</a></h3> - -<p>大于运算符仅当左操作数大于右操作数时返回true</p> - -<h4 id="语法_5">语法</h4> - -<pre class="syntaxbox">x > y</pre> - -<h4 id="例子_5">例子</h4> - -<pre class="brush: js">4 > 3 // true -</pre> - -<h3 id="大于等于运算符_(>)"><a name="Greater_than_or_equal_operator">大于等于运算符 (>=)</a></h3> - -<p>大于等于运算符当左操作数大于或等于右操作数时返回true</p> - -<h4 id="语法_6">语法</h4> - -<pre class="syntaxbox"> x >= y</pre> - -<h4 id="例子_6">例子</h4> - -<pre class="brush: js">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="小于运算符_(<)"><a name="Less_than_operator">小于运算符 (<)</a></h3> - -<p>小于运算符仅当左操作数小于右操作数时返回true</p> - -<h4 id="语法_7">语法</h4> - -<pre class="syntaxbox"> x < y</pre> - -<h4 id="例子_7">例子</h4> - -<pre class="brush: js">3 < 4 // true -</pre> - -<h3 id="小于等于运算符_(<)"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">小于等于运算符 (<=)</a></h3> - -<p>小于等于运算符当左操作数小于或等于右操作数时返回true</p> - -<h4 id="语法_8">语法</h4> - -<pre class="syntaxbox"> x <= y</pre> - -<h4 id="例子_8">例子</h4> - -<pre class="brush: js">3 <= 4 // true -</pre> - -<h2 id="使用比较操作符">使用比较操作符</h2> - -<p>标准相等操作符(<code>==</code> and <code>!=</code>) 使用 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a> 去比较两个操作数。当两个操作数类型不相等时，会在比较前尝试将其转换为相同类型。 e.g., 对于表达式 <code>5 == '5'</code>, 在比较前会先将右边字符串类型的操作数 5 转换为数字。</p> - -<p>严格相等操作符 (<code>===</code> and <code>!==</code>) 使用 Strict Equality Comparison Algorithm 并尝试对两个相同操作数进行相等比较，如果它们的类型不相等，那么永远会返回false 所以 <code>5 !== '5'。</code></p> - -<p>当需要明确操作数的类型和值的时候，或者操作数的确切类型非常重要时，应使用严格相等操作符。否则，当你允许操作数在比较前进行类型转换时，可以使用标准相等操作符来比较。</p> - -<p>当比较运算涉及类型转换时 (i.e., non–strict comparison), JavaScript 会按以下规则对字符串，数字，布尔或对象类型的操作数进行操作:</p> - -<ul> - <li>当比较数字和字符串时，字符串会转换成数字值。 JavaScript 尝试将数字字面量转换为数字类型的值。 首先, 一个数学上的值会从数字字面量中衍生出来，然后这个值将被转为一个最接近的<code>Number</code>类型的值。</li> - <li>如果其中一个操作数为布尔类型，那么布尔操作数如果为true，那么会转换为1，如果为false，会转换为整数0，即0。</li> - <li>如果一个对象与数字或字符串相比较，JavaScript会尝试返回对象的默认值。操作符会尝试通过方法valueOf和toString将对象转换为其原始值（一个字符串或数字类型的值）。如果尝试转换失败，会产生一个运行时错误。</li> - <li>注意：当且仅当与原始值比较时，对象会被转换为原始值。当两个操作数均为对象时，它们作为对象进行比较，仅当它们引用相同对象时返回true。</li> -</ul> - -<div class="note"><strong>注意:</strong> 字符串对象的类型是对象，不是字符串！字符串对象很少被使用，所以下面的结果也许会让你惊讶：</div> - -<pre class="brush:js">// true as both operands are Type String (i.e. string primitives): -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// false as a and b are Type Object and reference different objects -a == b - -// false as a and b are Type Object and reference different objects -a === b - -// true as a and 'foo' are of different type and, the Object (a) -// is converted to String 'foo' before comparison -a == 'foo' </pre> - -<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>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition. Implemented in JavaScript 1.0</td> - </tr> - <tr> - <td>ECMAScript 3rd Edition.</td> - <td>Standard</td> - <td>Adds <code>===</code> and <code>!==</code> operators. Implemented in JavaScript 1.3</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8', 'Relational Operators')}}<br> - {{SpecName('ES5.1', '#sec-11.9', 'Equality Operators')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Equality Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}<br> - {{SpecName('ES6', '#sec-equality-operators', 'Equality Operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Equality Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Relational Operators</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Equality Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html deleted file mode 100644 index 63e6b408a0..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ /dev/null @@ -1,758 +0,0 @@ ---- -title: 按位操作符 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -tags: - - js ^ & Bitwise Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><strong>按位操作符（Bitwise operators）</strong> 将其操作数（operands）当作32位的比特序列（由0和1组成），而不是十进制、十六进制或八进制<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">数值</a>。例如，十进制数9，用二进制表示则为1001。按位操作符操作数字的二进制形式，但是返回值依然是标准的JavaScript数值。</p> - -<p>下面的表格总结了JavaScript中的按位操作符：</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>运算符</th> - <th>用法</th> - <th>描述</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">按位与（ AND）</a></td> - <td style="white-space: nowrap;"><code>a & b</code></td> - <td>对于每一个比特位，只有两个操作数相应的比特位都是1时，结果才为1，否则为0。</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">按位或（OR）</a></td> - <td style="white-space: nowrap;"><code>a | b</code></td> - <td>对于每一个比特位，当两个操作数相应的比特位至少有一个1时，结果为1，否则为0。</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">按位异或（XOR）</a></td> - <td style="white-space: nowrap;"><code>a ^ b</code></td> - <td>对于每一个比特位，当两个操作数相应的比特位有且只有一个1时，结果为1，否则为0。</td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">按位非（NOT）</a></td> - <td style="white-space: nowrap;"><code>~ a</code></td> - <td>反转操作数的比特位，即0变成1，1变成0。</td> - </tr> - <tr> - <td><a href="#Left_shift">左移（L</a><a href="#Left_shift" style="line-height: 1.5;">eft shift）</a></td> - <td style="white-space: nowrap;"><code>a << b</code></td> - <td>将 <code>a</code> 的二进制形式向左移 <code>b</code> (< 32) 比特位，右边用0填充。</td> - </tr> - <tr> - <td><a href="#Right_shift">有符号右移</a></td> - <td style="white-space: nowrap;"><code>a >> b</code></td> - <td>将 a 的二进制表示向右移<code> b </code>(< 32) 位，丢弃被移出的位。</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">无符号右移</a></td> - <td style="white-space: nowrap;"><code>a >>> b</code></td> - <td>将 a 的二进制表示向右移<code> b </code>(< 32) 位，丢弃被移出的位，并使用 0 在左侧填充。</td> - </tr> - </tbody> -</table> - -<h2 id="有符号32位整数">有符号32位整数</h2> - -<p>所有的按位操作符的操作数都会被转成补码（two's complement）形式的有符号32位整数。补码形式是指一个数的负对应值（negative counterpart）（如 5和-5）为数值的所有比特位反转后，再加1。反转比特位即该数值进行’非‘位运算，也即该数值的反码。例如下面为整数314的二进制编码：</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>下面编码 <code>~314</code>，即 <code>314</code> 的反码：</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>最后，下面编码 <code>-314</code>，即 <code>314</code> 的反码再加1：</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>补码保证了当一个数是正数时，其最左的比特位是0，当一个数是负数时，其最左的比特位是1。因此，最左边的比特位被称为符号位（<em>sign bit</em>）。</p> - -<p><code>0</code> 是所有比特数字0组成的整数。</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) -</pre> - -<p><code>-1</code> 是所有比特数字1组成的整数。</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p><code>-2147483648</code>（十六进制形式：<code>-0x80000000</code>）是除了最左边为1外，其他比特位都为0的整数。</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p><code>2147483647</code>（十六进制形式：<code>0x7fffffff</code>）是除了最左边为0外，其他比特位都为1的整数。</p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>数字<code>-2147483648</code> 和 <code>2147483647</code> 是32位有符号数字所能表示的最小和最大整数。</p> - -<h2 id="按位逻辑操作符">按位逻辑操作符</h2> - -<p>从概念上讲，按位逻辑操作符按遵守下面规则：</p> - -<ul> - <li>操作数被转换成32位整数，用比特序列（0和1组成）表示。超过32位的数字会被丢弃。<br> - 例如, 以下具有32位以上的整数将转换为32位整数:</li> - <li> - <pre>转换前: 11100110111110100000000000000110000000000001 -转换后: 10100000000000000110000000000001</pre> - </li> - <li>第一个操作数的每个比特位与第二个操作数的相应比特位匹配：第一位对应第一位，第二位对应第二位，以此类推。</li> - <li>位运算符应用到每对比特位，结果是新的比特值。</li> -</ul> - -<h3 id="(按位与)"><a name="Bitwise_AND">& (按位与)</a></h3> - -<p>对每对比特位执行<strong>与（AND）操作</strong>。只有 a 和 b 都是 1 时，a AND b 才是 1。<strong>与操作</strong>的真值表如下：</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>将任一数值 x 与 0 执行按位与操作，其结果都为 0。将任一数值 x 与 -1 执行按位与操作，其结果都为 x。</p> - -<h3 id="(按位或)"><a name="Bitwise_OR">| (按位或)</a></h3> - -<p>对每一对比特位执行<strong>或（OR）操作</strong>。如果 a 或 b 为 1，则 <code>a</code> OR <code>b</code> 结果为 1。<strong>或操作</strong>的真值表：</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>将任一数值 x 与 0 进行按位或操作，其结果都是 x。将任一数值 x 与 -1 进行按位或操作，其结果都为 -1。</p> - -<p>补充一些例子：</p> - -<pre class="brush: js">1 | 0 ; // 1 - -1.1 | 0 ; // 1 - -'asfdasfda' | 0 ; // 0 - -0 | 0 ; // 0 - -(-1) | 0 ; // -1 - -(-1.5646) | 0 ; // -1 - -[] | 0 ; // 0 - -({}) | 0 ; // 0 - -"123456" | 0 ; // 123456 - -1.23E2 | 0; // 123 - -1.23E12 | 0; // 1639353344 - --1.23E2 | 0; // -123 - --1.23E12 | 0; // -1639353344</pre> - -<h3 id="(按位异或)"><a name="Bitwise_XOR">^ (按位异或)</a></h3> - -<p>对每一对比特位执行<strong>异或（XOR）操作</strong>。当 a 和 b 不相同时，<code>a</code> XOR <code>b</code> 的结果为 1。<strong>异或操作</strong>真值表：</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>将任一数值 x 与 0 进行异或操作，其结果为 x。将任一数值 x 与 -1 进行异或操作，其结果为 ~x。</p> - -<h3 id="(按位非)"><a name="Bitwise_NOT">~ (按位非)</a></h3> - -<p>对每一个比特位执行<strong>非（NOT）操作</strong>。NOT <code>a</code> 结果为 a 的反转（即反码）。<strong>非操作</strong>的真值表：</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>对任一数值 x 进行按位非操作的结果为 -(x + 1)。例如，~5 结果为 -6。</p> - -<p>与 indexOf 一起使用示例：</p> - -<pre class="brush: js">var str = 'rawr'; -var searchFor = 'a'; - -// 这是 if (-1*str.indexOf('a') <= 0) 条件判断的另一种方法 -if (~str.indexOf(searchFor)) { - // searchFor 包含在字符串中 -} else { - // searchFor 不包含在字符串中 -} - -// (~str.indexOf(searchFor))的返回值 -// r == -1 -// a == -2 -// w == -3 -</pre> - -<h2 id="按位移动操作符">按位移动操作符</h2> - -<p>按位移动操作符有两个操作数：第一个是要被移动的数字，而第二个是要移动的长度。移动的方向根据操作符的不同而不同。</p> - -<p>按位移动会先将操作数转换为大端字节序顺序(big-endian order)的32位整数,并返回与左操作数相同类型的结果。右操作数应小于 32位，否则只有最低 5 个字节会被使用。</p> - -<pre>注：Big-Endian:高位字节排放在内存的低地址端，低位字节排放在内存的高地址端， -又称为"高位编址"。 -Big-Endian是最直观的字节序： -①把内存地址从左到右按照由低到高的顺序写出； -②把值按照通常的高位到低位的顺序写出； -③两者对照，一个字节一个字节的填充进去。</pre> - -<h3 id="<<_(左移)"><a name="Left_shift"><< (左移)</a></h3> - -<p>该操作符会将第一个操作数向左移动指定的位数。向左被移出的位被丢弃，右侧用 0 补充。</p> - -<p>For example, <code>9 << 2</code> yields 36:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>在数字 <strong>x</strong> 上左移 <strong>y</strong> 比特得到 <strong>x * 2<sup>y</sup></strong>.</p> - -<h3 id=">>_(有符号右移)"><a name="Right_shift">>> (有符号右移)</a></h3> - -<p>该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，拷贝最左侧的位以填充左侧。由于新的最左侧的位总是和以前相同，符号位没有被改变。所以被称作“符号传播”。</p> - -<p>例如， <code>9 >> 2</code> 得到 2:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>相比之下， <code>-9 >> 2</code> 得到 -3，因为符号被保留了。</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(无符号右移)"><a name="Unsigned_right_shift">>>> (无符号右移)</a></h3> - -<p>该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，左侧用0填充。因为符号位变成了 0，所以结果总是非负的。（译注：即便右移 0 个比特，结果也是非负的。）</p> - -<p>对于非负数，有符号右移和无符号右移总是返回相同的结果。例如 <code>9 >>> 2</code> 和 <code>9 >> 2</code> 一样返回 2：</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>但是对于负数却不尽相同。 <code>-9 >>> 2</code> 产生 1073741821 这和 <code>-9 >> 2</code> 不同：</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="示例">示例</h2> - -<h3 id="例子：标志位与掩码">例子：标志位与掩码</h3> - -<p>位运算经常被用来创建、处理以及读取标志位序列——一种类似二进制的变量。虽然可以使用变量代替标志位序列，但是这样可以节省内存（1/32）。</p> - -<p>例如，有 4 个标志位：</p> - -<ul> - <li>标志位 A：我们有 ant</li> - <li>标志位 B：我们有 bat</li> - <li>标志位 C：我们有 cat</li> - <li>标志位 D：我们有 duck</li> -</ul> - -<p>标志位通过位序列 DCBA 来表示。当一个位被置位 (set) 时，它的值为 1 。当被清除 (clear) 时，它的值为 0 。例如一个变量 <code>flags</code> 的二进制值为 0101：</p> - -<pre class="brush: js">var flags = 5; // 二进制 0101 -</pre> - -<p>这个值表示：</p> - -<ul> - <li>标志位 A 是 true （我们有 ant）；</li> - <li>标志位 B 是 false （我们没有 bat）；</li> - <li>标志位 C 是 true （我们有 cat）；</li> - <li>标志位 D 是 false （我们没有 duck）；</li> -</ul> - -<p>因为位运算是 32 位的， 0101 实际上是 00000000000000000000000000000101。因为前面多余的 0 没有任何意义，所以他们可以被忽略。</p> - -<p>掩码 (bitmask) 是一个通过与/或来读取标志位的位序列。典型的定义每个标志位的原语掩码如下：</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>新的掩码可以在以上掩码上使用逻辑运算创建。例如，掩码 1011 可以通过 FLAG_A、FLAG_B 和 FLAG_D 逻辑或得到：</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>某个特定的位可以通过与掩码做逻辑与运算得到，通过与掩码的与运算可以去掉无关的位，得到特定的位。例如，掩码 0100 可以用来检查标志位 C 是否被置位：</p> - -<pre class="brush: js">// 如果我们有 cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>一个有多个位被置位的掩码表达任一/或者的含义。例如，以下两个表达是等价的：</p> - -<pre class="brush: js">// 如果我们有 bat 或者 cat 至少一个 -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // do stuff -} -</pre> - -<pre class="brush: js">// 如果我们有 bat 或者 cat 至少一个 -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>可以通过与掩码做或运算设置标志位，掩码中为 1 的位可以设置对应的位。例如掩码 1100 可用来设置位 C 和 D：</p> - -<pre class="brush: js">// 我们有 cat 和 duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>可以通过与掩码做与运算清除标志位，掩码中为 0 的位可以设置对应的位。掩码可以通过对原语掩码做非运算得到。例如，掩码 1010 可以用来清除标志位 A 和 C ：</p> - -<pre class="brush: js">// 我们没有 ant 也没有 cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>如上的掩码同样可以通过 <code>~FLAG_A & ~FLAG_C</code> 得到（德摩根定律）：</p> - -<pre class="brush: js">// 我们没有 ant 也没有 cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>标志位可以使用异或运算切换。所有值为 1 的位可以切换对应的位。例如，掩码 0110 可以用来切换标志位 B 和 C：</p> - -<pre class="brush: js">// 如果我们以前没有 bat ，那么我们现在有 bat -// 但是如果我们已经有了一个，那么现在没有了 -// 对 cat 也是相同的情况 -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>最后，所有标志位可以通过非运算翻转:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="转换片段">转换片段</h3> - -<p>将一个二进制数的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> 转换为十进制的 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = "1011"; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // 打印 11 -</pre> - -<p>将一个十进制的 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> 转换为二进制数的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // 打印 1011 -</pre> - -<h3 id="自动化掩码创建">自动化掩码创建</h3> - -<p>如果你需要从一系列的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> 值创建一个掩码，你可以：</p> - -<pre class="brush: js">function createMask () { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // 打印 11 -</pre> - -<h3 id="逆算法：从掩码得到布尔数组">逆算法：从掩码得到布尔数组</h3> - -<p>如果你希望从掩码得到得到 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> ：</p> - -<pre class="brush: js">function arrayFromMask (nMask) { - // nMask 必须介于 -2147483648 和 2147483647 之间 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError("arrayFromMask - out of range"); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert("[" + array1.join(", ") + "]"); -// 打印 "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>你可以同时测试以上两个算法……</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>仅仅由于教学目的 （因为有 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> 方法），我们展示如何修改 arrayFromMask 算法通过 Number 返回二进制的 String，而非 Boolean Array：</p> - -<pre class="brush: js">function createBinaryString (nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// 打印 00000000000000000000000000001011, i.e. 11 -</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>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.8', 'Bitwise NOT operator')}}<br> - {{SpecName('ES5.1', '#sec-11.7', 'Bitwise shift operators')}}<br> - {{SpecName('ES5.1', '#sec-11.10', 'Binary bitwise operators')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-not-operator', 'Bitwise NOT operator')}}<br> - {{SpecName('ES6', '#sec-bitwise-shift-operators', 'Bitwise shift operators')}}<br> - {{SpecName('ES6', '#sec-binary-bitwise-operators', 'Binary bitwise operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">相关链接</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> - <li> - <p><strong>js ^</strong> & <strong>Bitwise Operators</strong></p> - </li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html deleted file mode 100644 index 1c3328e8a8..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html +++ /dev/null @@ -1,413 +0,0 @@ ---- -title: 赋值运算符 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e -tags: - - JavaScript - - 运算符 -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators -original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>赋值运算符（<strong>assignment operator</strong>）基于右值（right operand）的值，给左值（left operand）赋值。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - -<p class="hidden">本文的交互示例的源代码存储在GithHub仓库。如果你愿意贡献更多交互示例，请克隆仓库 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并提交 pull request.</p> - -<h2 id="概述">概述</h2> - -<p>基本的赋值运算符是等号（<code>=</code>），该运算符把它右边的运算值赋给左边。即，<code>x = y</code> 把 <code>y</code> 的值赋给 <code>x</code>。 其他的赋值运算符通常是标准运算符的简写形式，如下面的定义与示例。 </p> - -<table class="standard-table"> - <tbody> - <tr> - <th>名称</th> - <th>简写形式</th> - <th>含义</th> - </tr> - <tr> - <td><a href="#Assignment">赋值（Assignment）</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">加赋值（Addition assignment）</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">减赋值（Subtraction assignment）</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Multiplication_assignment">乘赋值（Multiplication assigment）</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Division_assignment">除赋值（Division assignment）</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">模赋值（Remainder assignment）</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Exponentiation_assignment">指数赋值（Exponentiation assignment）</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">左移赋值（Left shift assignment）</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Right_shift_assignment">右移赋值（Right shift assignment）</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">无符号右移赋值（Unsigned right shift assignment）</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">按位与赋值（Bitwise AND assignment）</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">按位异或赋值（Bitwise XOR assignment）</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_OR_assignment">按位或赋值（Bitwise OR assignment）</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="赋值"><a name="Assignment">赋值</a></h2> - -<p>简单的赋值运算符，把一个值赋给一个变量。为了把一个值赋给多个变量，可以以链式使用赋值运算符。参考下例：</p> - -<h4 id="语法">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x = y -</pre> - -<h4 id="示例">示例</h4> - -<pre class="brush: js">// Assuming the following variables -// x = 5 -// y = 10 -// z = 25 - -x = y // x is 10 -x = y = z // x, y and z are all 25 -</pre> - -<h3 id="加赋值（Addition_assignment）"><a name="Addition_assignment">加赋值（Addition assignment）</a></h3> - -<p>加赋值运算符把一个右值与一个变量相加，然后把相加的结果赋给该变量。两个操作数的类型决定了加赋值运算符的行为。算术相加或字符串连接都有可能。更多细节参考 {{jsxref("Operators/Arithmetic_Operators", "addition operator", "#Addition", 1)}}。</p> - -<h4 id="语法_2">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x += y -<strong>Meaning:</strong> x = x + y -</pre> - -<h4 id="示例_2">示例</h4> - -<pre class="brush: js">// 定义下列变量 -// foo = 'foo' -// bar = 5 -// baz = true - - -// Number + Number -> addition -bar += 2 // 7 - -// Boolean + Number -> addition -baz += 1 // 2 - -// Boolean + Boolean -> addition -baz += false // 1 - -// Number + String -> concatenation -bar += 'foo' // "5foo" - -// String + Boolean -> concatenation -foo += false // "foofalse" - -// String + String -> concatenation -foo += 'bar' // "foobar" -</pre> - -<h3 id="减赋值（Subtraction_assignment）"><a name="Subtraction_assignment">减赋值（Subtraction assignment）</a></h3> - -<p>减赋值运算符使一个变量减去右值，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "subtraction operator", "#Subtraction", 1)}} 。</p> - -<h4 id="语法_3">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x -= y -<strong>Meaning:</strong> x = x - y -</pre> - -<h4 id="示例_3">示例</h4> - -<pre class="brush: js">// 假定已定义了下面的变量 -// bar = 5 - -bar -= 2 // 3 -bar -= "foo" // NaN -</pre> - -<h3 id="乘赋值（Multiplication_assignment）"><a name="Multiplication_assignment">乘赋值（Multiplication assignment）</a></h3> - -<p>乘赋值运算符使一个变量乘以右值，然后把相成的结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "multiplication operator", "#Multiplication", 1)}}。</p> - -<h4 id="语法_4">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x *= y -<strong>Meaning:</strong> x = x * y -</pre> - -<h4 id="示例_4">示例</h4> - -<pre class="brush: js">// 假定已定义了下面的变量 -// bar = 5 - -bar *= 2 // 10 -bar *= 'foo' // NaN -</pre> - -<h3 id="除赋值（Division_assignment）"><a name="Division_assignment">除赋值（Division assignment）</a></h3> - -<p>除赋值运算符使一个变量除以右值，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "division operator", "#Division", 1)}}。</p> - -<h4 id="语法_5">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x /= y -<strong>Meaning:</strong> x = x / y -</pre> - -<h4 id="示例_5">示例</h4> - -<pre class="brush: js">// 假定已定义了下面的变量 -// bar = 5 - -bar /= 2 // 2.5 -bar /= "foo" // NaN -bar /= 0 // Infinity -</pre> - -<h3 id="模赋值（Remainder_assignment）"><a name="Remainder_assignment">模赋值（Remainder assignment）</a></h3> - -<p>模赋值运算符使一个变量除以右值，然后把余数赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "remainder operator", "#Remainder", 1)}}。</p> - -<h4 id="语法_6">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x %= y -<strong>Meaning:</strong> x = x % y -</pre> - -<h4 id="示例_6">示例</h4> - -<pre class="brush: js">// Assuming the following variable -// bar = 5 - -bar %= 2 // 1 -bar %= 'foo' // NaN -bar %= 0 // NaN -</pre> - -<h3 id="指数赋值（Exponentiation_assignment）"><a id="Exponentiation_assignment" name="Exponentiation_assignment">指数赋值（Exponentiation assignment）</a></h3> - -<p>指数赋值运算符使一个变量为底数、以右值为指数的指数运算（乘方）结果赋给该变量。更多细节查看 {{jsxref("Operators/Arithmetic_Operators", "算术运算符", "#Exponentiation", 1)}}。</p> - -<h4 id="语法_7">语法</h4> - -<pre class="syntaxbox"><strong>语法:</strong> x **= y -<strong>含义:</strong> x = x ** y -</pre> - -<h4 id="示例_7">示例</h4> - -<pre class="brush: js">// Assuming the following variable -// bar = 5 - -bar **= 2 // 25 -bar **= 'foo' // NaN</pre> - -<h3 id="左移赋值（Left_shift_assignment）"><a name="Left_shift_assignment">左移赋值（Left shift assignment）</a></h3> - -<p>左移赋值运算符使变量向左移动指定位数的比特位，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}。</p> - -<h4 id="语法_8">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x <<= y -<strong>Meaning:</strong> x = x << y -</pre> - -<h4 id="示例_8">示例</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h3 id="右移赋值（Right_shift_assignment）"><a name="Right_shift_assignment">右移赋值（Right shift assignment）</a></h3> - -<p>右移赋值运算符使变量向右移指定位数的比特位，然后把结果赋给该变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}。</p> - -<h4 id="语法_9">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x >>= y -<strong>Meaning:</strong> x = x >> y -</pre> - -<h4 id="示例_9">示例</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h3 id="无符号右移赋值（Unsigned_right_shift_assignment）"><a name="Unsigned_right_shift_assignment">无符号右移赋值（Unsigned right shift assignment）</a></h3> - -<p>无符号右移赋值运算符向右移动指定数量的比特位，然后把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}。</p> - -<h4 id="语法_10">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x >>>= y -<strong>Meaning:</strong> x = x >>> y -</pre> - -<h4 id="示例_10">示例</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h3 id="按位与赋值（Bitwise_AND_assignment）"><a name="Bitwise_AND_assignment">按位与赋值（Bitwise AND assignment）</a></h3> - -<p>按位与赋值运算符使用两个操作值的二进制表示，执行按位与运算，并把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}。</p> - -<h4 id="语法_11">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x &= y -<strong>Meaning:</strong> x = x & y -</pre> - -<h4 id="示例_11">示例</h4> - -<pre class="brush: js">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h3 id="按位异或赋值（Bitwise_XOR_assignment）"><a name="Bitwise_XOR_assignment">按位异或赋值（Bitwise XOR assignment）</a></h3> - -<p>按位异或赋值运算符使用两个操作值的二进制表示，执行二进制异或运算，并把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}。</p> - -<h4 id="语法_12">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x ^= y -<strong>Meaning:</strong> x = x ^ y -</pre> - -<h4 id="示例_12">示例</h4> - -<pre class="brush: js">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h3 id="按位或赋值（Bitwise_OR_assignment）"><a name="Bitwise_OR_assignment">按位或赋值（Bitwise OR assignment）</a></h3> - -<p>按位或赋值运算符使用两个操作值的二进制表示，执行按位或运算，并把结果赋给变量。更多细节查看 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}。</p> - -<h4 id="语法_13">语法</h4> - -<pre class="syntaxbox"><strong>Operator:</strong> x |= y -<strong>Meaning:</strong> x = x | y -</pre> - -<h4 id="示例_13">示例</h4> - -<pre class="brush: js">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="示例_14">示例</h2> - -<h3 id="带有赋值运算符的左值（Left_operand）">带有赋值运算符的左值（Left operand）</h3> - -<p>在某些不常见的情况下，赋值运算符（如<code> x += y</code>）并不等同于表达式（ <code>x = x + y</code>）。当一个赋值运算符的左值包含有一个赋值运算符时，左值只会被求值一次。例如：</p> - -<pre class="brush: js">a[i++] += 5 // i 执行一次求值 -a[i++] = a[i++] + 5 // i 执行两次求值 -</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('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">算术运算符</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html deleted file mode 100644 index 82b19641ea..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: 逻辑运算符 -slug: >- - conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca -tags: - - JavaScript - - 操作符 - - 逻辑 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>逻辑运算符通常用于{{jsxref("Boolean","布尔")}}型（逻辑）值。这种情况下，它们返回一个布尔值。然而，<code>&&</code> 和 <code>||</code> 运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。这时，它们也就会返回一个非布尔型值。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> - - - -<h2 id="描述">描述</h2> - -<p>逻辑运算符如下表所示 (其中<code><em>expr</em></code>可能是任何一种<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Data_structure">类型</a>, 不一定是布尔值):</p> - -<table class="fullwidth-table syntaxbox"> - <tbody> - <tr> - <th>运算符</th> - <th>语法</th> - <th>说明</th> - </tr> - <tr> - <td>逻辑与，AND（<code>&&</code>）</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>若 <code>expr<strong>1</strong></code> 可转换为 <code>true</code>，则返回 <code>expr<strong>2</strong></code>；否则，返回 <code>expr<strong>1</strong></code>。</td> - </tr> - <tr> - <td>逻辑或，OR（<code>||</code>）</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td>若 <code>expr<strong>1</strong></code> 可转换为 <code>true</code>，则返回 <code>expr<strong>1</strong></code>；否则，返回 <code>expr<strong>2</strong></code>。</td> - </tr> - <tr> - <td>逻辑非，NOT（<code>!</code>）</td> - <td><code>!<em>expr</em></code></td> - <td>若 <code>expr</code> 可转换为 <code>true</code>，则返回 <code>false</code>；否则，返回 <code>true</code>。</td> - </tr> - </tbody> -</table> - -<p>如果一个值可以被转换为 <code>true</code>，那么这个值就是所谓的 {{Glossary("truthy")}}，如果可以被转换为 <code>false</code>，那么这个值就是所谓的 {{Glossary("falsy")}}。</p> - -<p>会被转换为 <code>false</code> 的表达式有：</p> - -<ul> - <li><code>null</code>；</li> - <li><code>NaN</code>；</li> - <li><code>0</code>；</li> - <li>空字符串（<code>""</code> or <code>''</code> or <code>``</code>）；</li> - <li><code>undefined</code>。</li> -</ul> - -<p>尽管 <code>&&</code> 和 <code>||</code> 运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值（或者表达式）转换为布尔值，请使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#%E9%80%BB%E8%BE%91%E9%9D%9E%EF%BC%88!%EF%BC%89">双重非运算符</a>（即<code>!!</code>）或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>构造函数。</p> - -<h3 id="短路计算">短路计算</h3> - -<p>由于逻辑表达式的运算顺序是从左到右，也可以用以下规则进行"短路"计算：</p> - -<ul> - <li><code>(some falsy expression) && (<em>expr)</em></code> 短路计算的结果为假。</li> - <li><code>(some truthy expression) || <em>(expr)</em></code> 短路计算的结果为真。</li> -</ul> - -<p>短路意味着上述表达式中的expr部分<strong>不会被执行</strong>，因此expr的任何副作用都不会生效（举个例子，如果expr是一次函数调用，这次调用就不会发生）。造成这种现象的原因是，整个表达式的值在第一个操作数被计算后已经确定了。看一个例子：</p> - -<pre class="brush: js">function A(){ console.log('called A'); return false; } -function B(){ console.log('called B'); return true; } - -console.log( A() && B() ); -// logs "called A" due to the function call, -// then logs false (which is the resulting value of the operator) - -console.log( B() || A() ); -// logs "called B" due to the function call, -// then logs true (which is the resulting value of the operator) -</pre> - -<h3 id="Operators_precedence">Operators precedence</h3> - -<p>请注意，由于<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">运算符优先级</a>的存在，下面的表达式的结果却不相同。右侧被小括号括起来的操作变成了独立的表达式。</p> - -<pre class="brush: js">false && true || true // 结果为 true -false && (true || true) // 结果为 false -</pre> - -<h3 id="逻辑与（）">逻辑与（<code>&&</code>）</h3> - -<p>下面的代码是 && (逻辑与) 运算符的示例.</p> - -<pre class="brush: js">a1 = true && true // t && t 返回 true -a2 = true && false // t && f 返回 false -a3 = false && true // f && t 返回 false -a4 = false && (3 == 4) // f && f 返回 false -a5 = "Cat" && "Dog" // t && t 返回 "Dog" -a6 = false && "Cat" // f && t 返回 false -a7 = "Cat" && false // t && f 返回 false -a8 = '' && false // f && f 返回 "" -a9 = false && '' // f && f 返回 false -</pre> - -<h3 id="逻辑或（）">逻辑或（<code>||</code>）</h3> - -<p>下面的代码是 || (逻辑或) 运算符的示例。</p> - -<pre class="brush: js">o1 = true || true // t || t 返回 true -o2 = false || true // f || t 返回 true -o3 = true || false // t || f 返回 true -o4 = false || (3 == 4) // f || f 返回 false -o5 = "Cat" || "Dog" // t || t 返回 "Cat" -o6 = false || "Cat" // f || t 返回 "Cat" -o7 = "Cat" || false // t || f 返回 "Cat" -o8 = '' || false // f || f 返回 false -o9 = false || '' // f || f 返回 "" -</pre> - -<h3 id="逻辑非（!）">逻辑非（<code>!</code>）</h3> - -<p>下面的代码是 <code>!</code> (逻辑非) 运算符的示例.</p> - -<pre class="brush: js">n1 = !true // !t 返回 false -n2 = !false // !f 返回 true -n3 = !'' // !f 返回 true -n4 = !'Cat' // !t 返回 false -</pre> - -<h4 id="双重非（!!）运算符">双重非（<code>!!</code>）运算符</h4> - -<p>可能使用双重非运算符的一个场景，是显式地将任意值强制转换为其对应的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B">布尔值</a>。这种转换是基于被转换值的 "truthyness" 和 "falsyness"的（参见 {{Glossary("truthy")}} 和 {{Glossary("falsy")}}）。</p> - -<p>同样的转换可以通过 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> 函数完成。</p> - -<pre class="brush: js syntaxbox">n1 = !!true // !!truthy 返回 true -n2 = !!{} // !!truthy 返回 true: <strong>任何</strong> 对象都是 truthy 的… -n3 = !!(new Boolean(false)) // …甚至 <em>.valueOf()</em> 返回 false 的布尔值对象也是！ -n4 = !!false // !!falsy 返回 false -n5 = !!"" // !!falsy 返回 false -n6 = !!Boolean(false) // !!falsy 返回 false -</pre> - -<h3 id="布尔值转换规则">布尔值转换规则</h3> - -<h4 id="将_AND_转换为_OR">将 AND 转换为 OR</h4> - -<p>以下涉及<strong>布尔</strong>运算的操作：</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>总是等于：</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="将_OR_转换为_AND">将 OR 转换为 AND</h4> - -<p>以下涉及<strong>布尔</strong>运算的操作：</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>总是等于：</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h3 id="删除嵌套的小括号">删除嵌套的小括号</h3> - -<p>由于逻辑表达式是从左往右计算的，所以，通常可以按照下面的规则删除小括号。</p> - -<h4 id="删除嵌套的_AND">删除嵌套的 AND</h4> - -<p>以下涉及<strong>布尔</strong>运算的操作：</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>总是等于：</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="删除嵌套的_OR">删除嵌套的 OR</h4> - -<p>以下涉及<strong>布尔</strong>运算的操作：</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>总是等于：</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.operators.logical")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">按位操作符</a></li> - <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">布尔值</a></li> - <li><a href="/zh-CN/docs/Glossary/Truthy">Truthy</a></li> - <li><a href="/zh-CN/docs/Glossary/Falsy">Falsy</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html b/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html deleted file mode 100644 index 0a02cdb146..0000000000 --- a/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: default -slug: conflicting/Web/JavaScript/Reference/Statements/switch -tags: - - JavaScript - - Keyword -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default -original_slug: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Statements")}}</div> - -<div></div> - -<p><strong>default 关键字</strong>可以在 JavaScript 的两种情况下使用：在 {{jsxref("Statements/switch", "switch")}} ，或 {{jsxref("Statements/export", "export")}} 中。</p> - -<h2 id="语法">语法</h2> - -<p>在{{jsxref("Statements/switch", "switch")}} 语句中使用:</p> - -<pre class="syntaxbox">switch (expression) { - case value1: - //当表达式的值和value1匹配执行这里的语句 - [break;] - default: - //当表达式的值没有匹配，执行这里的语句 - [break;] -}</pre> - -<p>在{{jsxref("Statements/export", "export")}} 中使用：</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="描述">描述</h2> - -<p>更多细节，参见</p> - -<ul> - <li>{{jsxref("Statements/switch", "switch")}} 语句和</li> - <li>{{jsxref("Statements/export", "export")}} 语句页面。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="在switch语句中使用default">在<code>switch</code>语句中使用<code>default</code></h3> - -<p>在以下示例中，如果<code>expr</code>为“Oranges”或“Apples”，程序将匹配“Oranges”或“Apples”的值并执行相应的声明。在任何其它情况下，<code>default</code>关键字将执行关联的语句。</p> - -<pre class="brush: js">switch (expr) { - case "Oranges": - console.log("Oranges are $0.59 a pound."); - break; - case "Apples": - console.log("Apples are $0.32 a pound."); - break; - default: - console.log("Sorry, we are out of " + expr + "."); -}</pre> - -<h3 id="在export语句中使用default">在<code>export</code>语句中使用<code>default</code></h3> - -<p>如果要导出单个值或需要模块的回调值，则可以使用默认导出： </p> - -<pre class="brush: js">// module "my-module.js" -let cube = function cube(x) { - return x * x * x; -} -export default cube; -</pre> - -<p>然后，在另一个脚本中，默认导出将直接被导入：</p> - -<pre class="brush: js">// module "my-module.js" -import myFunction from 'my-module'; -console.log(myFunction(3)); // 27 -</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('ES6', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/export", "export")}}</li> - <li>{{jsxref("Statements/switch", "switch")}}</li> -</ul> diff --git a/files/zh-cn/conflicting/web/media/formats/index.html b/files/zh-cn/conflicting/web/media/formats/index.html deleted file mode 100644 index db84bd92bd..0000000000 --- a/files/zh-cn/conflicting/web/media/formats/index.html +++ /dev/null @@ -1,564 +0,0 @@ ---- -title: HTML的媒体支持:audio和video元素 -slug: conflicting/Web/Media/Formats -tags: - - HTML Media Video Audio -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats -original_slug: Web/HTML/Supported_media_formats ---- -<p><span class="seoSummary"> {{HTMLElement("audio")}} 和 {{HTMLElement("video")}}是浏览器内置的播放音频或视频的元素;</span>视频和音频编解码器用来处理视频和音频，不同的编解码器提供不同级别的压缩率和分辨率；一个容器封装格式（多媒体容器格式）用来存储和传输编码后的视频和音频（如果视频带有音轨则同时；编解码器和多媒体容器格式有非常多的组合；尽管只有很少部分和WEB相关；<br> - <br> - 由于专利的问题，不同的浏览器对HTML5的video和audio有不同的规范和实现；WEB上的媒体格式领域受到在包括美国、欧盟在内的许多国家的专利法的保护和制约；本文将讨论了不同的编解码器和封装格式在WEB上的各种组合，包括在桌面设备和其他设备上的浏览器的支持情况。</p> - -<p> 想要在HTML5中播放视频，并且主流浏览器的最新版本中支持良好；可以使用WebM 和 MPEG H.264 AAC 编码格式；像下面一样使用{{HTMLElement("source")}}元素</p> - -<pre class="brush: html"><video controls> - <source src="somevideo.webm" type="video/webm"> - <source src="somevideo.mp4" type="video/mp4"> - I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264. - <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> -</video> -</pre> - -<h2 id="sect1"></h2> - -<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> - -<p>Ogg容器格式使用Theora视频编解码器和 Vorbis音频编解码器。在的桌面和移动端的Gecko(Firefox)，Chrome和Opera；Safari（非IOS）可以通过添加扩展支持；但是不支持IE</p> - -<p>WebM在可选的情况下是优选项；因为它能提供更高的压缩比，并且被更多的浏览器所支持；而Ogg容器格式主要用于支持低版本的浏览器（比如： Firefox 3.5/3.6就不支持WebM，但是支持Ogg）</p> - -<p>Ogg的授权情况和WebM类似</p> - -<p>Gecko提供下面3种Ogg文件格式的MIME type：</p> - -<p><strong>audio/ogg</strong></p> - -<p>一个只包含音频的Ogg文件</p> - -<p><strong>video/ogg</strong></p> - -<p>一个包含视频或音频的Ogg文件</p> - -<p><strong>application/ogg</strong></p> - -<p>一个不指定内容的Ogg文件，当你不知道内容的时候可以选择</p> - -<h2 id="Ogg_Opus">Ogg Opus</h2> - -<p>Ogg容器可以通过使用<a href="http://www.opus-codec.org/">Opus codec</a>包含音频编解码器；用来支持Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) 或更新的版本</p> - -<h2 id="Ogg_FLAC">Ogg FLAC</h2> - -<p>Ogg容器可以通过使用<a href="https://xiph.org/flac/index.html">FLAC codec</a>包含音频编解码器；用来支持Gecko 51.0 {{geckoRelease("51.0")}} 或更新的版本, 但只适用于桌面浏览器</p> - -<h2 id="MP4_FLAC">MP4 FLAC</h2> - -<p>从Firefox 51开始，你就可以使用FLAC编解码器播放MP4了，不管你有没有安装 <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">MediaSource Extensions</a>和DRM 扩展支持。</p> - -<h2 id="MP3">MP3</h2> - -<p>MP3 audio 编码对应浏览器<audio>的支持。其中Firefox/Firefox for Android/Firefox OS需要操作系统本身提供了MP3的解码器；而IE，Chrome，Safari则原生支持</p> - -<h2 id="WAVE_PCM">WAVE PCM</h2> - -<p>WAVE容器使用PCM音频编解码器；桌面和移动Gecko (Firefox) a、 Safari都支持，WAVE容器中的文件后缀为 ".wav"。</p> - -<div class="note">See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> - -<p>Gecko提供下面4种WAVE文件格式的MIME type：</p> - -<ul> - <li><code>audio/wave</code> (preferred; does not work in Chrome)</li> - <li><code>audio/wav</code></li> - <li><code>audio/x-wav</code></li> - <li><code>audio/x-pn-wav</code></li> -</ul> - -<h2 id="FLAC">FLAC</h2> - -<p>FLAC容器格式使用 FLAC 音频编解码器 (<a href="https://xiph.org/flac/index.html">FLAC codec</a>)；桌面端受到Gecko Firefox 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48)的支持，文件后缀为 “.flac”</p> - -<p>Gecko提供下面4种FLAC文件格式的MIME type：</p> - -<ul> - <li><code>audio/flac</code> (preferred)</li> - <li><code>audio/x-flac</code></li> -</ul> - -<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2> - -<p>媒体源扩展(MSE)是一个W3C工作草案，计划扩展{{domxref("HTMLMediaElement")}}以允许JavaScript生成用于重放的媒体流。 允许JavaScript生成流以适应各种应用场景，如自适应流和时移实时流。 MSE支持仅限于MP4和WebM容器，但编解码器支持因底层平台而异。</p> - -<p>例如：可以使用JavaScript实现MPEG-DASH，同时将解码解压缩到MSE。<br> - <br> - For example, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE</a>.</p> - -<div class="note"> -<p><strong>时间位移(Time shifting)</strong> 功能主要是将即时内容，录制在存储器上，可以暂时离开，一定时间回来后，可以从离开的时间通过内部的重播。</p> -</div> - -<h2 id="浏览器兼容情况">浏览器兼容情况</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: PCM in WAVE</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>{{CompatNo}}</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in WebM</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>{{CompatNo}}</td> - <td>10.60</td> - <td>3.1<sup>[1]</sup></td> - </tr> - <tr> - <td><code><audio></code>: Streaming Vorbis/Opus in WebM via MSE</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("36.0")}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in Ogg</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>{{CompatNo}}</td> - <td>10.50</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><audio></code>: MP3</td> - <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> - <td>9.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: MP3 in MP4</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code><audio></code>: AAC in MP4</td> - <td>{{CompatVersionUnknown}}<sup>[6]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[7]</sup></td> - <td>9.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Opus in Ogg</td> - <td>27.0</td> - <td>{{CompatGeckoDesktop("15.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><audio></code>: FLAC</td> - <td>56.0</td> - <td>{{CompatGeckoDesktop("51")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>11</td> - </tr> - <tr> - <td><code><audio></code>: FLAC in Ogg</td> - <td>56.0</td> - <td>{{CompatGeckoDesktop("51")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><video></code>: VP8 and Vorbis in WebM</td> - <td>6.0</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>9.0<sup>[8]</sup></td> - <td>10.60</td> - <td>3.1<sup>[9]</sup></td> - </tr> - <tr> - <td><code><video></code>: VP9 and Opus in WebM</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("28.0")}}<sup>[36]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><video></code>: Streaming WebM via MSE</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("42.0")}}<sup>[35]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><video></code>: Theora and Vorbis in Ogg</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>{{CompatNo}}</td> - <td>10.50</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and MP3 in MP4</td> - <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[10]</sup></td> - <td>9.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and AAC in MP4</td> - <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[11]</sup></td> - <td>9.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><video></code>: FLAC in MP4</td> - <td>62.0</td> - <td>{{CompatGeckoDesktop(51)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>any other format</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>3.1<sup>[12]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Opera Mini</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatChrome(29)}}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>10.0</td> - <td>11.0</td> - <td>{{CompatVersionUnknown}}<sup>[13]</sup></td> - <td>3.2</td> - </tr> - <tr> - <td><code><audio></code>: PCM in WAVE</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}<sup>[14]</sup></td> - <td>3.2</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in WebM</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>11.0</td> - <td>{{CompatVersionUnknown}}<sup>[15]</sup></td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><audio></code>: Streaming Vorbis in WebM via MSE</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in Ogg</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>11.0</td> - <td>{{CompatVersionUnknown}}<sup>[16]</sup></td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><audio></code>: MP3</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[17]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[18]</sup></td> - <td>10.0</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[19]</sup></td> - <td>3.2</td> - </tr> - <tr> - <td><code><audio></code>: MP3 in MP4</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code><audio></code>: AAC in MP4</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[20]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[21]</sup></td> - <td>10.0</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[22]</sup></td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code><audio></code>: Opus in Ogg</td> - <td>{{CompatNo}}</td> - <td>71.0</td> - <td>24.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><video></code>: VP8 and Vorbis in WebM</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatChrome(29)}}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatVersionUnknown}}<sup>[24]</sup></td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><video></code>: VP9 and Opus in WebM</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><video></code>: Streaming WebM via MSE</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("42.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code><video></code>: Theora and Vorbis in Ogg</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}<sup>[25]</sup></td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and MP3 in MP4</td> - <td>{{CompatVersionUnknown}}<sup>[26]</sup></td> - <td>{{CompatChrome(29)}}</td> - <td>24.0<sup>[33]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> - <td>10.0</td> - <td>16.0<sup>[28]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[29]</sup></td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and AAC in MP4</td> - <td>{{CompatVersionUnknown}}<sup>[30]</sup></td> - <td>{{CompatChrome(29)}}</td> - <td>24.0<sup>[34]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[31]</sup></td> - <td>10.0</td> - <td>16.0<sup>[28]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[32]</sup></td> - <td>3.2</td> - </tr> - <tr> - <td><code><video></code>: FLAC in MP4</td> - <td>{{CompatUnknown}}</td> - <td>62.0</td> - <td>{{CompatGeckoMobile(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>any other format</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Must be installed separately.</p> - -<p>[2] In Nightly/Dev Edition only.</p> - -<p>[3] Only on platforms that don't support H.264.</p> - -<p>[4] AAC is only supported in the MP4 container. Not in Chromium.</p> - -<p>[5] To avoid patent issues, support for MP3 is not built directly into Firefox. Instead it relies on support from the OS. Firefox supports this format on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> - -<p>[6] Main only. Not in Chromium. AAC is only supported in the MP4 container.</p> - -<p>[7] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox supports these formats on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> - -<p>[8] <a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/">WebM MF</a>.</p> - -<p>[9] Must be installed separately, e.g. <a class="external" href="http://perian.org/">Perian</a>.</p> - -<p>[10] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox supports these formats on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> - -<p>[11] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4, H.264 and AAC is not built directly into Firefox. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox supports these formats on the following platforms: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+ since Firefox 22.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a> since Firefox 20.0, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a> since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7</a> since Firefox 35.0.</p> - -<p>[12] Plays all formats available via QuickTime.</p> - -<p>[13] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[14] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[15] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[16] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[17] To avoid patent issues, support for MP3 is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware.</p> - -<p>[18] To avoid patent issues, support for MP3 is not built directly into Firefox OS. Instead it relies on support from the OS or hardware.</p> - -<p>[19] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[20] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> - -<p>[21] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox OS. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> - -<p>[22] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats. AAC is only supported in the MP4 container.</p> - -<p>[23] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[24] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[25] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[26] To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</p> - -<p>[27] In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.<br> - To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox Mobile (Android) and Firefox OS. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> - -<p>[28] Partial since 11.0. AAC is only supported in the MP4 container.</p> - -<p>[29] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</p> - -<p>[30] AAC is only supported in the MP4 container. To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</p> - -<p>[31] In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed. AAC is only supported in the MP4 container.<br> - To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into Firefox OS. Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> - -<p>[32] Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats. AAC is only supported in the MP4 container.</p> - -<p>[33] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> - -<p>[34] To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).</p> - -<p>[35] VP8/VP9 video codecs are only available in MSE when H.264 hardware decoders are not available. Checking for availability via MediaSource.isTypeSupported() is recommended.</p> - -<p>[36] Starting in Firefox 46, when attempting to initiate a WebRTC call using {{domxref("RTCPeerConnection.createOffer()")}} uses VP9 by default; in the past, VP8 was the default video format.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="internal" href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Using audio and video in Firefox</a></li> - <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> - <li>{{HTMLElement("video")}}</li> - <li>{{HTMLElement("audio")}}</li> - <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> - <li><a href="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> -</ul> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/index.html deleted file mode 100644 index aa326758ce..0000000000 --- a/files/zh-cn/conflicting/web/progressive_web_apps/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: 响应式设计 -slug: conflicting/Web/Progressive_web_apps -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design -original_slug: Web_Development/Mobile/Responsive_design ---- -<p>在解决对桌面和移动环境开发网站这个问题上，与<a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">分离网站</a>的方法相反，一种相对较新（其实相当<a class="external" href="http://www.alistapart.com/articles/dao/">古老</a>）的方法渐渐流行起来：摒弃用户代理检测，而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为<a class="external" href="http://www.alistapart.com/">A List Apart</a>所写的文章中提出的，也就是我们所熟知的<a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">响应式设计</a>。和分离网站设计方式一样，响应式设计也有自己的优势和弊端。</p> -<h2 id="优势">优势</h2> -<p>尽管一开始这种方法并不是为了创建移动端网站而提出的，但在近一段时间以来，作为分离式移动端网站的替代者，响应式设计作为一种向移动端友好的方向迈进的方式而备受关注。</p> -<ol> - <li>因为无需为不同的设备维护不同的网站，这种方式节省了时间和金钱。</li> - <li>响应式设计为每一个页面提供了一个单独且独有的URL。</li> - <li>社会化分享统计（Facebook Likes, Tweets, +1 on Google plus）也不会割离开，因为移动端和桌面端使用的都是一个唯一的URL。</li> - <li>响应式设计无需考虑用户代理的检测。</li> -</ol> -<p>这一方法有着许多非常好的方面。因为其不需要进行用户代理检测，相比于分离式网站方法，响应式设计更加具有韧性并经得起未来发展的考验。</p> -<h2 id="弊端">弊端</h2> -<p>当然，这一方法并非没有其局限性。因为内容必须在客户端使用Javascript进行调整，所以变化的内容要尽可能的最少。一般来说，当你尝试编写两组不同的Javascript来操作同一个DOM时，事情就会变得很麻烦。这也是为什么网络应用往往不采用这种方法的一个很重要的原因。</p> -<p>如果你的网站还没有支持<a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">弹性布局</a>，那么将你的一个已有网站重新做响应式设计就必须重写你的样式。但是，这也有可能因祸得福。让你的网站成为响应式的设计，可能是一个升级和整理网站CSS的好机会。</p> -<p>最后，由于增加了脚本和样式的代码量，响应式的网站的性能可能会比分离式网站要差。尽管通过将脚本和样式进行合理的重构能够节省出一些资源，但性能的下降是无法避免的。</p> -<h2 id="何时选择响应式设计">何时选择响应式设计</h2> -<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>正如上面所提到的，因为内容的改变很困难，当你使用响应式设计的时候，你无法给予用户一个有着显著区别的移动端体验，除非你大幅地增加代码的复杂度。也就是说，如果网站的桌面端和移动端内容非常相似，那么响应式设计就是一个很好的选择。那些以文档为中心的网站，他们在不同的设备上的主要用途都不会改变，比如一个产品页面，对于这种网站响应式的设计就非常的适合。你会注意到下面的例子全都是博客和宣传页面！</p> -<h2 id="举例">举例</h2> -<p>尽管它还没有像分离式网站那么流行，但每天都有很多网站开始应用这项技术。幸运的是，因为所有的代码都是在客户端的，如果你想了解一个网站是如何实现这项技术的，只需要简单地访问该网站并查看他的页面源代码即可。下面是一些网站的例子：</p> -<ul> - <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – 我最喜欢的一个自适应设计，在上面也有图片展示！</li> - <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 另一篇很好的文章，上面有各种例子的链接。</li> - <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> - <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li> - <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> -</ul> -<p>尽管是一个相对较新的方法，响应式设计也逐渐积累了许多良好的经验。如果你正打算设计一个响应式网站，通常值得<a class="external" href="http://www.lukew.com/ff/entry.asp?1117">先创建一个小屏幕的设计</a>，使得移动端的限制因素在一开始设计的时候就被考虑到。并且，这样更利于为你的样式使用渐进增强的技术，而不是使用Media Queries来隐藏已有网站中的元素。这样的话，那些老的不支持Media Queries的浏览器依旧能显示正确的布局。根据这一方法来设计的出色示范可以看<a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">这里</a>。</p> -<h2 id="开发移动网站的途径">开发移动网站的途径</h2> -<p>想了解移动平台开发的相关背景和其他方法，请参看以下文章。</p> -<ul> - <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">友好型移动设计是什么概念?</a></li> - <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Hybrid approach">独立网站</a></li> - <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">复合方法</a></li> - <li><a href="/en/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design" title="en/Web development/Mobile/Hybrid approach">响应式设计 VS. 自适应设计</a></li> -</ul> -<h2 id="参考">参考</h2> -<ul> - <li>其他<a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">自适应网站设计</a>相关资料</li> -</ul> -<div class="originaldocinfo"> - <font face="Georgia, Times, Times New Roman, serif" size="3"><b>原稿信息</b></font><br> - <p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p> -</div> -<p> </p> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html deleted file mode 100644 index a84a3e5421..0000000000 --- a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 渐进式webApp优势 -slug: conflicting/Web/Progressive_web_apps/Introduction -translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications -translation_of_original: Web/Progressive_web_apps/Advantages -original_slug: Web/Progressive_web_apps/优势 ---- -<p class="summary">以下是渐进式webApp所有的优势清单</p> - -<h2 id="Discoverable">Discoverable<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>The eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.</p> - -<p>Some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like <a href="http://ogp.me/">Open Graph</a>, which provides a format for specifying similar metadata in the HTML <code><head></code> using meta tags.</p> - -<p>The relevant web standard here is the <a href="/en-US/docs/Web/Manifest">Web app manifest</a>, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.</p> - -<ul> -</ul> - -<h2 id="Installable">Installable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.</p> - -<p>Modern web apps can have this native app feel via properties set inside the Web app manifest, and via a feature available in modern smartphone browsers called <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen</a>.</p> - -<h2 id="Linkable">Linkable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process. This is how it has always been.</p> - -<h2 id="Network_independent">Network independent<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Modern web apps can work when the network is unreliable, or even non-existent. The basic ideas behind network independence are to be able to:</p> - -<ul> - <li>Revisit a site and get its contents even if no network is available.</li> - <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li> - <li>Control what is shown to the user in situations where there is no connectivity.</li> -</ul> - -<p>This is achieved by a combination of technologies — <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> to control page requests (for example storing them offline), the <a href="/en-US/docs/Web/API/Cache">Cache API</a> for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store application data offline.</p> - -<h2 id="Progressive">Progressive<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers. We've been doing this for years with best practices such as <a href="/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>.</p> - -<h2 id="Re-engageable">Re-engageable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren't looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> for controlling pages, the <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> for sending updates straight from server to app via a service worker, and the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> for generating system notifications to help engage users when they're not in the browser.</p> - -<h2 id="Responsive">Responsive<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.</p> - -<h2 id="Safe">Safe<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> - -<p>The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another (<a href="https://twitter.com/andreasbovens/status/926965095296651264">example</a>).</p> - -<p> </p> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html deleted file mode 100644 index be5d77a388..0000000000 --- a/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Responsive design -slug: >- - conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -tags: - - Media Queries - - PWA - - Progressive web apps - - Responsive web design - - viewport -translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -translation_of_original: Web/Progressive_web_apps/Responsive -original_slug: Web/Progressive_web_apps/Responsive ---- -<div class="column-container summary"> -<div class="column-11"><span class="seoSummary">响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。</span></div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div> -</div> - -<h2 id="核心指南">核心指南</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a></dt> - <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a></dt> - <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd> -</dl> - -<h2 id="技术">技术</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technology</th> - <th scope="col">Description</th> - <th scope="col">Support summary</th> - <th scope="col">Latest spec</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td> - <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td> - <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td> - <td>Controls viewport settings, primarily on mobile devices.</td> - <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br> - Viewport meta tag: Widespread across modern mobile devices</td> - <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - <td>A very useful CSS feature for creating flexible, responsive layouts.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td> - <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td> - </tr> - </tbody> -</table> - -<h2 id="工具">工具</h2> - -<dl> - <dt><a href="https://modernizr.com/">Modernizr</a></dt> - <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd> - <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt> - <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd> -</dl> - -<h2 id="参见">参见</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt> - <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Responsive_navigation_patterns">Responsive navigation patterns</a></dt> - <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd> -</dl> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html b/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html deleted file mode 100644 index 5c0b464a8c..0000000000 --- a/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: 网络独立 -slug: conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f -tags: - - Application Shell - - IndexedDB - - PWA - - Progressive web apps - - Service Workers - - Web Storage - - localStorage -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Network_independent -original_slug: Web/Progressive_web_apps/Network_independent ---- -<div class="column-container summary"> -<div class="column-11">当网络不可靠，甚至不存在时，现代网络应用程序仍可以工作。没有更多的空白连接错误页面或恐龙穿过沙漠。除了离线高速缓存和服务工作者之外，UI和内容之间的一个明确的分隔可让您存储应用程序的数据和核心资产，以备将来使用。</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div> -</div> - -<p>The basic ideas behind network independence are to be able to:</p> - -<ul> - <li>Revisit a site and get its contents even if no network is available.</li> - <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li> - <li>Control what is shown to the user in situations where there is no connectivity.</li> -</ul> - -<h2 id="核心指南">核心指南</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt> - <dd>A simple guide for those new to the Service Worker API.</dd> - <dt><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></dt> - <dd>The basics of IndexedDB, explained in detail.</dd> - <dt><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></dt> - <dd>The Web storage API made simple.</dd> - <dt><a href="https://developers.google.com/web/updates/2015/11/app-shell">Instant Loading Web Apps with An Application Shell Architecture</a></dt> - <dd>A guide to using the App Shell coding pattern to create apps that load quickly.</dd> -</dl> - -<h2 id="技术">技术</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">技术</th> - <th scope="col">描述</th> - <th scope="col">支持概览</th> - <th scope="col">最新规范</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td> - <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td> - <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td> - <td>{{SpecName('Service Workers')}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></td> - <td>A transactional database system that allows complex client-side data storage to be controlled via JavaScript.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/API/IndexedDB_API#Browser_compatibility">more detail</a>)</td> - <td>{{SpecName('IndexedDB')}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a></td> - <td>A simple API for storing name-value pairs on the client-side.</td> - <td>Widespread (<a href="/en-US/docs/Web/API/Web_Storage_API#Browser_compatibility">more detail</a>)</td> - <td>{{SpecName('Web Storage')}}</td> - </tr> - </tbody> -</table> - -<h2 id="工具">工具</h2> - -<dl> - <dt><a href="http://mozilla.github.io/localForage/">localForage</a></dt> - <dd>A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.</dd> - <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> - <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd> - <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt> - <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd> - <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt> - <dd>A node module to generate service worker code that will precache specific resources.</dd> - <dt><a href="https://www.talater.com/upup/">upup</a></dt> - <dd>A tiny script that makes sure your site is always there for your users.</dd> -</dl> - -<h2 id="参见">参见</h2> - -<dl> - <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt> - <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd> -</dl> diff --git a/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html b/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html deleted file mode 100644 index 8e7ebe12ef..0000000000 --- a/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Re-engageable -slug: conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 -tags: - - Modern web apps - - Notifications API - - Progressive web apps - - Push API - - Service Workers -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Re-engageable -original_slug: Web/Progressive_web_apps/Re-engageable ---- -<div class="column-container summary"> -<div class="column-11">原生平台一个主要优势是，用户可以轻松通过更新或加载新内容，即使用户没有正在查看应用程序或者使用他们的设备。现在的Web应用程序现在也可以使用Web Push API等技术实现这样的功能。</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div> -</div> - -<h2 id="核心指南">核心指南</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt> - <dd>A simple guide for those new to the Service Worker API.</dd> - <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></dt> - <dd>Learn the essentials behind the Web Push API.</dd> - <dt><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></dt> - <dd>Web notifications in a nutshell.</dd> -</dl> - -<h2 id="技术">技术</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">技术</th> - <th scope="col">描述</th> - <th scope="col">浏览器支持</th> - <th scope="col">最新规范</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td> - <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td> - <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td> - <td>{{SpecName('Service Workers')}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/Push_API">Push API</a></td> - <td>When subscribed to, the push service provides an endpoint that can be used by a server to send a push message to a web app under the control of a particular service worker.</td> - <td>Experimental: chrome and Firefox (<a href="/en-US/docs/Web/API/Push_API#Browser_Compatibility">more detail</a>)</td> - <td>{{SpecName("Push API")}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></td> - <td>Fires system notifications directly from web applications.</td> - <td>Widespreadin modern browsers (<a href="/en-US/docs/Web/API/Notifications_API#Browser_compatibility">more detail</a>)</td> - <td>{{SpecName('Web Notifications')}}</td> - </tr> - </tbody> -</table> - -<h2 id="工具">工具</h2> - -<dl> - <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> - <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd> - <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt> - <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd> - <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt> - <dd>A node module to generate service worker code that will precache specific resources.</dd> -</dl> - -<h2 id="参见">参见</h2> - -<dl> - <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt> - <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd> -</dl> diff --git a/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html deleted file mode 100644 index 2037b78ce1..0000000000 --- a/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 影子DOM（Shadow DOM） -slug: conflicting/Web/Web_Components/Using_shadow_DOM -tags: - - DocumentFragment - - React - - Virtual DOM - - Web Components - - shadow dom -translation_of: Web/Web_Components/Using_shadow_DOM -translation_of_original: Web/Web_Components/Shadow_DOM -original_slug: Web/Web_Components/影子_DOM ---- -<p>{{ draft }}</p> - -<p><strong>Shadow DOM </strong>为<a href="/zh-CN/docs/Web/Web_Components">Web组件</a>中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。</p> - -<p>为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。</p> - -<h2 id="Shadow_DOM基础">Shadow DOM基础</h2> - -<p>Shadow DOM 必须附加在一个元素上，可以是HTML文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素，如<div>、<p>；也可以是<a href="/en-US/docs/Web/Web_Components/Custom_Elements">自定义元素</a>如 <code><my-element>。</code> 如下例所示，使用 {{domxref("Element.<code>attachShadow</code>()")}} 来附加影子DOM：</p> - -<pre class="brush: html"><html> - <head></head> - <body> - <p id="hostElement"></p> - <script> - // create shadow DOM on the <p> element above - var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>; - </script> - </body> -</html></pre> - -<p>上例中给一个没有内容的 <p> 元素添加了影子DOM。显示没有变化。接下来，同样在上例中加入下列代码，可以在影子DOM中插入文字，并将在浏览器中显示：</p> - -<pre class="brush: js" style="font-size: 14px;">shadow.innerHTML = '<p>Here is some new text</p>';</pre> - -<h3 id="Shadow_DOM_样式化">Shadow DOM 样式化</h3> - -<p><code><style></code> 元素可用来给影子DOM添加样式。 同样是上例，下列代码会将影子DOM中的文字变为红色：</p> - -<pre class="brush: html"><script> - // 创建 shadow DOM - var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>; - // 给 shadow DOM 添加文字 - shadow.innerHTML = '<p>Here is some new text</p>'; - // 添加CSS，将文字变红 - shadow.innerHTML += '<style>p { color: red; }</style>'; -</script> -</pre> - -<h3 id="Shadow_DOM_的组成部分：">Shadow DOM 的组成部分：</h3> - -<p>影子DOM由下列部分组成：</p> - -<ul> - <li>{{domxref("Element.attachShadow()")}}</li> - <li>{{domxref("Element.getDestinationInsertionPoints()")}}</li> - <li>{{domxref("Element.shadowRoot")}}</li> - <li><a href="/en-US/docs/Web/HTML/Element/Content"><content> 元素</a></li> - <li><a href="/en-US/docs/Web/HTML/Element/Shadow"><shadow> 元素</a></li> - <li>这些元素已从规范中移除： <content>, <element> 和<decorator></li> - <li>相关API接口：{{domxref("ShadowRoot")}}, {{domxref("HTMLTemplateElement")}} and {{domxref("HTMLSlotElement")}}</li> - <li>CSS 选择器： - <ul> - <li>伪类：{{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}</li> - <li>伪元素：{{cssxref("::shadow")}} and {{cssxref("::content")}}</li> - <li>组合器：<code>>>></code> (formerly <code>/deep/</code>)*</li> - </ul> - </li> -</ul> - -<p>* 将来<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=489954">子组合器有可能被弃用</a></p> - -<h2 id="Interfaces">Interfaces</h2> - -<p>{{domxref("ShadowRoot")}}</p> - -<p>DOM子树的根节点，和文档的主要DOM树分开渲染。</p> - -<p>{{domxref("HTMLTemplateElement")}}</p> - -<p>允许访问HTML元素的内容。</p> - -<p>{{domxref("HTMLSlotElement")}}</p> - -<p>定义一个槽的位置。</p> - -<p>{{domxref("DocumentOrShadowRoot")}}</p> - -<p>提供在文档和 Shadow 树之间共享的API。</p> diff --git a/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index 4225c159b8..0000000000 --- a/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Using XPath -slug: conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript -tags: - - AJAX - - Code snippets - - DOM - - Extensions - - Transforming_XML_with_XSLT - - XPath - - 所有分类 -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript -translation_of_original: Using_XPath -original_slug: Using_XPath ---- -<p> -</p><p><a href="cn/XPath">XPath</a> is a language for addressing parts of an XML document. It is a <a class="external" href="http://www.w3.org/TR/xpath">W3C recommendation</a>. -</p><p>This article describes Mozilla interfaces exposing XPath functionality to JavaScript code. These are described in <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath</a> (which is W3C Working Group Note at this moment). -</p><p>This article does not attempt teach XPath itself. If you're unfamiliar with this technology, please refer to <a class="external" href="http://www.w3schools.com/xpath/">W3Schools XPath tutorial</a>. -</p><p>For a very simple XPath usage example, see: <a href="cn/Code_snippets/HTML_to_DOM#Using_a_hidden_XUL_iframe_.28complete_example.29">Code_snippets:HTML_to_DOM#Using_a_hidden_XUL_iframe_.28complete_example.29</a> -</p> -<h3 id="Node-specific_evaluator_function">Node-specific evaluator function</h3> -<p>The following function can be used to evaluate XPath expressions on given XML nodes. The first argument is a DOM node or Document object, while the second is a string defining an XPath expression. -</p> -<pre>// Evaluate an XPath expression aExpression against a given DOM node -// or Document object (aNode), returning the results as an array -// thanks wanderingstan at morethanwarm dot mail dot com for the -// initial work. -function evaluateXPath(aNode, aExpr) { - var xpe = new XPathEvaluator(); - var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? - aNode.documentElement : aNode.ownerDocument.documentElement); - var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); - var found = []; - var res; - while (res = result.iterateNext()) - found.push(res); - return found; -} -</pre> -<p>This function uses <code>new XPathEvaluator()</code>. That constructor is specific to Mozilla. Scripts used on a webpage which might be used by other browsers should instead replace the call to <code>new XPathEvaluator()</code> with the following fragment: -</p> -<pre> // XPathEvaluator is implemented on objects that implement Document - var xpe = aNode.ownerDocument || aNode; -</pre> -<p>In that case the creation of the <a href="cn/DOM/document.createNSResolver">XPathNSResolver</a> can be simplified as: -</p> -<pre> var nsResolver = xpe.createNSResolver(xpe.documentElement); -</pre> -<p>Note however that <code>createNSResolver</code> should only be used if you are sure the namespace prefixes in the XPath expression match those in the document you want to query (and that no default namespace is being used (though see <a href="cn/DOM/document.createNSResolver">DOM:document.createNSResolver</a> for a workaround)). Otherwise, you have to provide your own implementation of XPathNSResolver. -</p><p>If you are using <a href="cn/XMLHttpRequest">XMLHttpRequest</a> to read a local or remote XML file into a DOM tree (as described in <a href="cn/Parsing_and_serializing_XML">Parsing and serializing XML</a>), the first argument to <code>evaluateXPath()</code> should be <code>req.responseXML</code>. -</p> -<h4 id="Sample_usage">Sample usage</h4> -<p>Assume we have the following XML document (see also <a href="cn/How_to_Create_a_DOM_tree">How to Create a DOM tree</a> and <a href="cn/Parsing_and_serializing_XML">Parsing and serializing XML</a>): -</p> -<pre><?xml version="1.0"?> -<people> - <person first-name="eric" middle-initial="H" last-name="jung"> - <address street="321 south st" city="denver" state="co" country="usa"/> - <address street="123 main st" city="arlington" state="ma" country="usa"/> - </person> - - <person first-name="jed" last-name="brown"> - <address street="321 north st" city="atlanta" state="ga" country="usa"/> - <address street="123 west st" city="seattle" state="wa" country="usa"/> - <address street="321 south avenue" city="denver" state="co" country="usa"/> - </person> -</people> -</pre> -<p>You can now "query" the document with XPath expressions. Although walking the DOM tree can achieve similar results, using XPath expressions is much quicker and more powerful. If you can rely on <code>id</code> attributes, <code>document.getElementById()</code> is still powerful, but it's not nearly as powerful as XPath. Here are some examples. -</p> -<pre>// display the last names of all people in the doc -var results = evaluateXPath(people, "//person/@last-name"); -for (var i in results) - alert("Person #" + i + " has the last name " + results[i].value); - -// get the 2nd person node -results = evaluateXPath(people, "/people/person[2]"); - -// get all the person nodes that have addresses in denver -results = evaluateXPath(people, "//person[address/@city='denver']"); - -// get all the addresses that have "south" in the street name -results = evaluateXPath(people, "//address[contains(@street, 'south')]"); -alert(results.length); -</pre> -<h3 id="docEvaluateArray">docEvaluateArray</h3> -<p>The following is a simple utility function to get (ordered) XPath results into an array, when there is no special need for namespace resolvers, etc. It avoids the more complex syntax of <code><a href="cn/DOM/document.evaluate">document.evaluate()</a></code> for cases when it is not required as well as the need to use the special iterators on <code><a href="cn/XPathResult">XPathResult</a></code> (by returning an array instead). -</p> -<pre>// Example usage: -// var els = docEvaluateArray('//a'); -// alert(els[0].nodeName); // gives 'A' in HTML document with at least one link - -function docEvaluateArray (expr, doc, resolver) { - if (!doc) { - doc = document; - } - if (!resolver) { - resolver = null; - } - var result = doc.evaluate(expr, doc, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); - var a = []; - for(var i = 0; i < result.snapshotLength; i++) { - a[i] = result.snapshotItem(i); - } - return a; -} -</pre> -<h3 id="getXPathForElement">getXPathForElement</h3> -<p>The following function allows one to pass an element and an XML document to find a unique string XPath expression leading back to that element. -</p> -<pre>function getXPathForElement(el, xml) { - var xpath = ''; - var pos, tempitem2; - - while(el !== xml.documentElement) { - pos = 0; - tempitem2 = el; - while(tempitem2) { - if (tempitem2.nodeType === 1 && tempitem2.nodeName === el.nodeName) { // If it is ELEMENT_NODE of the same name - pos += 1; - } - tempitem2 = tempitem2.previousSibling; - } - - xpath = "*[name()='"+el.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']["+pos+']'+'/'+xpath; - - el = el.parentNode; - } - xpath = '/*'+"[name()='"+xml.documentElement.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']"+'/'+xpath; - xpath = xpath.replace(/\/$/, ''); - return xpath; -}</pre> -<h3 id="Resources">Resources</h3> -<ul><li> <a href="cn/XPath">XPath</a> -</li><li> <a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">XPath Visualizer for Mozilla and Firefox</a> -</li><li> <a class="external" href="http://www.w3schools.com/xpath/">XPath tutorial</a> -</li><li> <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">Forum discussion on this topic</a> -</li><li> <a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Using the Mozilla JavaScript Interface to XPath</a> - draft tutorial on using XPath from javascript -</li><li> <a class="link-https" href="https://sourceforge.net/projects/sarissa/">Sarissa</a> - Sarissa is a cross-browser ECMAScript library for client side XML manipulation, including loading XML from URLs or strings, performing XSLT transformations, XPath queries and more. Supported: Gecko (Mozilla, Firefox etc), IE, KHTML (Konqueror, Safari). If you're writing JavaScript that is used in both XUL applications and HTML pages, and the HTML pages may be viewed in non-Gecko-based applications (such as Internet Explorer, Opera, Konqueror, Safari), you should consider using Sarissa to parse and/or serialize XML. <i>Note:</i> Do not create a DOM object using <code>document.implementation.createDocument()</code> and then use Sarissa classes and methods to manipulate that object. It will not work. You must use Sarissa to create the initial DOM object. -</li></ul> -<h2 id="See_also">See also</h2> -<ul><li> <a href="cn/Introduction_to_using_XPath_in_JavaScript">Introduction to using XPath in JavaScript</a> -</li></ul> -<div class="noinclude"> -</div> -{{ languages( { "fr": "fr/Utilisation_de_XPath", "ja": "ja/Using_XPath", "en": "en/Using_XPath", "ko": "ko/Using_XPath" } ) }} diff --git a/files/zh-cn/orphaned/example_2_-_using_ul/index.html b/files/zh-cn/orphaned/example_2_-_using_ul/index.html deleted file mode 100644 index 15623cd7c3..0000000000 --- a/files/zh-cn/orphaned/example_2_-_using_ul/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Please Delete this doc 请删除本页 -slug: orphaned/Example_2_-_Using_UL -original_slug: Example_2_-_Using_UL ---- -<p>Please Delete this doc</p> - -<p>请删除本页</p> diff --git a/files/zh-cn/orphaned/games/tools/engines_and_tools/index.html b/files/zh-cn/orphaned/games/tools/engines_and_tools/index.html deleted file mode 100644 index 8ed014d795..0000000000 --- a/files/zh-cn/orphaned/games/tools/engines_and_tools/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 游戏引擎和工具 -slug: orphaned/Games/Tools/Engines_and_tools -translation_of: Games/Tools/Engines_and_tools -original_slug: Games/Tools/引擎和工具 ---- -<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> - -<h2 id="HTML5_游戏引擎">HTML5 游戏引擎</h2> - -<p>下面是用HTML5和JavaScript实现的游戏引擎：</p> - -<ul> - <li><a href="https://aframe.io">A-Frame</a>: 一个用于构建3D和虚拟现实体验的web框架。使用HTML和实体组件生态系统。HTC Vive、Oculus Rift、桌面端和移动平台都可以使用。来自Mozilla虚拟现实团队。</li> - <li><a class="external" href="http://www.canvace.com/">Canvace</a>: 一个用于创建2D和2.5 D游戏的HTML5游戏平台。</li> - <li><a class="external" href="http://craftyjs.com/">Crafty</a>: 一个基于javascript的2D游戏框架。</li> - <li><a class="external" href="http://cocos2d-x.org/wiki/Cocos2d-js">Cocos2D JS</a>: 为您想要发布的任何平台提供一致的开发经验，无论是web还是本地平台。“一套代码，可在任何地方运行”在Cocos2D JS中是非常容易和自然的。用一个独立的JavaScript代码库，你就可以在web浏览器和本地平台上运行你的游戏，包括Mac OS X、Windows、iOS和Android。你的游戏可以在所有主流应用商店和其他分销渠道上发布。</li> - <li><a class="external" href="http://www.scirra.com/">Construct 2</a>: 它是第一个支持HTML5的HTML5游戏引擎，它只支持HTML5和JavaScript。只使用Canvas，并且通过JavaScript插件可扩展。</li> - <li><a class="external" href="http://www.divgo.net/">Div GO</a>: 基于Div游戏工作室开发的2D和3D游戏的开发引擎。它包含了新的函数和变量来增强HTML5和canvas。Div GO还提供了一个集成开发环境，其中包括代码编辑器、进程和函数列表、图形编辑器、运行过程列表、编译器和生成器/包装器项目。</li> - <li><a class="external" href="http://enchantjs.com/">EnchantJS</a>: 一个简单的用于创建2D和3D HTML5游戏的JavaScript框架。它有良好的文档和易于遵循的入门教程。</li> - <li><a class="external" href="http://www.compilgames.net">GDevelop</a>: 一个面向本地和HTML5的游戏开发平台。它用基于WebGL/canvas的Pixi.js渲染项目。</li> - <li><a class="external" href="http://www.isogenicengine.com/">Isogenic Engine</a>: 目前最有前途的游戏引擎之一。内置大规模的多人联网，在服务器端使用Node.js和MongoDB，并且可以输出canvas或dom节点的图形。</li> - <li><a class="external" href="http://impactjs.com/">Impact</a>: 一个带有编辑器和其他工具的JavaScript游戏引擎，会产生各种各样的游戏风格(例如2D和3D)，并且可以发布到web、Android和iOS。</li> - <li><a href="http://jawa.games">Jawa</a> : A browser based point'n'click adventure game engine, with a built-in very easy to use authoring tool. Games are exportable as HTML5 objects. Free for personal and educational purposes</li> - <li><a href="http://Lance.gg">Lance.gg</a>: A game engine suitable for multiplayer games. Handles networking code (authoritative server), implements real-time extrapolation of game object positions, a.k.a. client-side prediction. Supports 2D and 3D game worlds. Works with either simplified physics or full-featured physics engine <a href="http://www.cannonjs.org/">cannon.js</a>. Supported renderers: <a href="http://www.pixijs.com/">PIXI.js</a>, plain HTML, canvas / Three.js, and <a href="https://aframe.io">A-Frame</a>.</li> - <li><a class="external" href="http://melonjs.org/">melonJS</a>: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.</li> - <li><a class="external" href="http://mightyfingers.com/">MightyEngine</a>: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.</li> - <li><a class="external" href="http://phaser.io">Phaser</a>: A 2D game engine supporting Web, Android, and IOS platforms.</li> - <li><a class="external" href="http://playcanvas.com/">PlayCanvas</a>: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.</li> - <li><a class="external" href="http://piqnt.com/stage.js/">Stage.js</a>: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.</li> - <li><a class="external" href="http://superpowers-html5.com/index.en.html">Superpowers</a>: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.</li> - <li><a class="external" href="http://www.wimi5.com">WiMi5</a>: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration. </li> - <li><a class="external" href="http://www.rpgmakerweb.com/products/programs/rpg-maker-mv">RPG Maker MV: </a>This particular version from the "RPG Maker" series is built on JavaScript. You can add custom code or addons, and deploy projects as Windows, Mac and web application. In addition, anime and manga–style models are included to make use of.</li> - <li><a href="https://bitbucket.org/nikola_l/visual-js/">visual-js</a>: This is JavaScript game engine canvas 2d (native js) / 3d( three.js) . Server part works on node.js. Windows users can use GUI editor (game instance creator) with gui tools (encript , multilanguage , build engine library , build resourse). Try <a href="https://jsfiddle.net/user/zlatnaspirala/fiddles/">Api examples on jsfiddle</a>. You can create game objects direct on web page (editor mode). Build images resource object with node.js tool. Any app created in this game engine works on all modern browsers. </li> -</ul> - -<h2 id="HTML5_game_tools">HTML5 game tools</h2> - -<ul> - <li><a class="external" href="http://clay.io/development-tools">Clay.io</a>: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc.</li> - <li><a class="external" href="https://github.com/mrdoob/stats.js">stat.js</a>: Simple JavaScript performance monitor.</li> - <li><a href="http://phasereditor.boniatillo.com">Phaser Editor</a>: an IDE to build Phaser based games. Provides several built-in tools like a scene builder, texture packer, asset manager and an improved JavaScript editor.</li> - <li><a href="https://github.com/shakiba/planck.js">Planck.js</a>: 2D JavaScript physics engine for cross-platform game development, rewrite of Box2D.</li> -</ul> - -<h2 id="Useful_technologies">Useful technologies</h2> - -<p>The following can be useful when developing games based on Web technologies.</p> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Element/canvas">Canvas</a>: 2D graphics.</li> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a>: 3D graphics.</li> - <li>Audio: {{htmlelement("audio")}} element, <a href="/en-US/docs/Web_Audio_API">Web Audio API.</a></li> - <li><a href="/en-US/docs/WebSockets">WebSockets</a>: Can be used for real-time communication between a player and the game server, to support multi-player games.</li> - <li><a class="external" href="http://nodejs.org/">Node.js</a>: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a>: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a> : Allows you to expand any HTML element to fill the user's screen, even if the browser isn’t running full-screen itself.</li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>: Traditionally one of the main differences between Web apps and native apps was that unlike web apps, native apps could be run offline. This has changed — technologies such as Service Workers allow for a website or web app to cache necessary assets so it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like localStorage will allow your game to continue working even if the Internet connection goes down. You just need to sync up all the changes when it gets connected again.</li> - <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>: Allows you to control web–based games via a gamepad. This might be just what finally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?</li> - <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer version below 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. While supported in the latest versions of every other browser, WebGL in Internet Explorer requires at least version 11.</p> -</div> - -<h2 id="Game_template">Game template</h2> - -<p>You can use the <a href="https://github.com/mozilla/mortar-game-stub">Mortar Game Stub</a> template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.</p> diff --git a/files/zh-cn/orphaned/glossary_of_translation/index.html b/files/zh-cn/orphaned/glossary_of_translation/index.html deleted file mode 100644 index 97b6b2226e..0000000000 --- a/files/zh-cn/orphaned/glossary_of_translation/index.html +++ /dev/null @@ -1,573 +0,0 @@ ---- -title: 翻译术语表和翻译规范 -slug: orphaned/Glossary_of_translation -tags: - - Translation - - localize -original_slug: Glossary_of_translation ---- -<p>为了规范 MDN 上的术语、用语及规范，在此建立一个供编者、译者参考的术语表和翻译规范。如需查阅其他 Web 开发术语，请参见<a href="/zh-CN/docs/Glossary" title="/zh-CN/docs/Glossary">词汇表</a>（有待翻译）。</p> - -<h2 id="术语表">术语表</h2> - -<table class="standard-table" style="height: 506px; width: 980px;"> - <tbody> - <tr> - <td style="text-align: center; width: 25%;">原文</td> - <td style="text-align: center; width: 25%;">译文</td> - <td style="text-align: center;">注释</td> - </tr> - <tr> - <td style="text-align: center;">Creative Commons License</td> - <td style="text-align: center;">知识共享许可协议</td> - <td style="text-align: center;">有些空间不足等原因可能简称CC协议</td> - </tr> - <tr> - <td style="text-align: center;">best practices</td> - <td style="text-align: center;">最佳实践</td> - <td style="text-align: center;"> 最佳实践，是一个管理学概念，认为存在某种技术、方法、过程、活动或机制可以使生产或管理实践的结果达到最优，并减少出错的可能性。（参考 <a href="http://zh.wikipedia.org/wiki/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">维基百科</a>）</td> - </tr> - <tr> - <td style="text-align: center;">Mozilla Demo Studio</td> - <td style="text-align: center;">Mozilla 演示室</td> - <td style="text-align: center;"> </td> - </tr> - <tr> - <td style="text-align: center;">Demo</td> - <td style="text-align: center;">演示</td> - <td style="text-align: center;">如果会产生歧义或需特别注明，可以译为“演示（Demo）”</td> - </tr> - <tr> - <td style="text-align: center;">Kuma</td> - <td style="text-align: center;">Kuma</td> - <td style="text-align: center;">这里特指用于 MDN 的 wiki （维基知识库）软件系统本身，不译</td> - </tr> - <tr> - <td colspan="1" rowspan="2" style="text-align: center;">Mozilla</td> - <td style="text-align: center;">Mozilla</td> - <td style="text-align: center;">指 Mozilla 基金会时，不译</td> - </tr> - <tr> - <td style="text-align: center;">谋智</td> - <td style="text-align: center;">特指谋智网络（Mozilla 中国全资子公司）时</td> - </tr> - <tr> - <td style="text-align: center;">Firefox</td> - <td style="text-align: center;">Firefox</td> - <td style="text-align: center;">虽然“谋智网络”网页等处翻译为火狐，但软件目前仍显示为 Firefox，且 MDN 访者皆可了解，故暂不译。</td> - </tr> - <tr> - <td style="text-align: center;">Add-on|Addons</td> - <td style="text-align: center;">附加组件</td> - <td style="text-align: center;"> - <p>扩展、插件、外观（主题）的总称</p> - </td> - </tr> - <tr> - <td style="text-align: center;">Extension</td> - <td style="text-align: center;">扩展</td> - <td style="text-align: center;"> - <p>本体 .xpi</p> - </td> - </tr> - <tr> - <td style="text-align: center;">Plug-in|Plugin</td> - <td style="text-align: center;">插件</td> - <td style="text-align: center;"> - <p>本体 DLL</p> - </td> - </tr> - <tr> - <td style="text-align: center;">Appearance</td> - <td style="text-align: center;">外观</td> - <td style="text-align: center;"> - <p>原称为主题（Theme），后某个版本开始在附加组件管理器中已改为外观。</p> - </td> - </tr> - <tr> - <td style="text-align: center;">Web</td> - <td style="text-align: center;">Web</td> - <td style="text-align: center;"> - <p>准确的翻译的话，应该对应中文的“网络”，然而感觉太容易有歧义了。不如不译。</p> - </td> - </tr> - <tr> - <td style="text-align: center;">World Wide Web</td> - <td style="text-align: center;">万维网</td> - <td style="text-align: center;"> - <p>虽然说这样翻译最好，但翻译后可能有些人不懂（还真有这样的），所以可以引注万维网的具体释义：<span class="st">一个由许多互相链接的超文本组成的系统，通过互联网访问。</span></p> - </td> - </tr> - <tr> - <td style="text-align: center;"> </td> - <td style="text-align: center;"> </td> - <td style="text-align: center;"> - <p> </p> - </td> - </tr> - </tbody> -</table> - -<h2 id="翻译规范">翻译规范</h2> - -<p>这里列出了一些在翻译工作中经常会遇到的一些问题，并给出一些参考意见和建议。</p> - -<p>MDN 是开放性的，每个人都可根据自己的兴趣和能力为其做出贡献。而无论你做出的贡献是大是小，都有可能会让很多的人从中受益，所以请不要吝惜自己的才华。</p> - -<p>但是，开放并不代表毫无约束和规范。MDN 中有几篇与风格和规范有关的文章可供参考（本文即为其中之一）。我们建议你认真阅读并尽量遵守，这会使你的文章与其他人保持一致，而一致的风格会让读者阅读起来更加轻松和惬意。</p> - -<p>本规范主要给你在翻译 MDN 上的英文文章时提供参考。其中的内容绝大部分都不是强制的（强调一下，MDN 是开放性的，我们更关注内容本身的价值，其次才是样式和风格），但是如果每个人都能注意这些并遵守，必然会让 MDN 变得更加美好。因此，何乐而不为呢？</p> - -<p>另外还有几篇与此有关的文章。如果你正准备为 MDN 添加一篇新的文章，可以参考 <a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Content/Style_guide">MDN Web 文档写作规范</a>，这篇文章是从英文翻译过来的，其中的部分内容并不适合中文写作，但这并不妨碍你从中受益。而如果你对 MDN 编辑器（就是在 MDN 中撰写或编辑文章时使用的在线所见即所得编辑器）还不熟悉，可以参考<a href="https://developer.mozilla.org/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide">这里</a>的说明。</p> - -<p>最后，感谢你能够耐心阅读本文。Let‘s get started.</p> - -<h3 id="意译优于直译">意译优于直译</h3> - -<p>技术文档的翻译不比文学作品的翻译，因为一般来说，技术类文章都是采用直述方式来撰写的，因此翻译相对简单，即使是完全的直译也不会导致读者无法理解的问题。</p> - -<p>但是由于中英文的语法、表述习惯、以及思维方式上的差异等诸多客观因素，如果只是机械化地对原文的每一句话进行直译，仍然可能会影响翻译质量。因此就我个人的经验来看，在翻译的时候把握原文的意思，然后适当采用意译的方式来翻译，是一种比较好的技术类文章的翻译实践。</p> - -<h4 id="避免逐句翻译">避免逐句翻译</h4> - -<p>一般来说，我们拿到一篇英文文章，在翻译的时候都会采用边阅读边翻译的方式，也就是逐句翻译。这种方式有点类似于计算机处理指令。优点是简单直观，比较流程化；而缺点则是容易导致翻译较为生硬，并且容易产生理解偏差甚至错误。</p> - -<p>翻译生硬是因为当你把注意力集中在某条句子上面时，就容易被其英文表达方式所影响，从而由逐句翻译变为逐词翻译，翻译出来的中文经常带有明显的“翻译腔”（想了解什么是<a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%BF%BB%E8%AF%91%E8%85%94">翻译腔</a>？）。</p> - -<p>容易产生理解偏差和理解错误，是因为逐句翻译时容易忽略它们与上下文中其他内容之间的联系，从而导致对原文的意思把握不够全面，有时候就会产生理解上的偏差，甚至是完全曲解原文的意思。</p> - -<p>对于不是专业从事翻译工作的人来说（我想大多数志愿者应该都不是专业的翻译人员），很难避免逐句翻译的习惯，但是我们在这里给出几点建议，可以帮助你提高翻译质量。</p> - -<ul> - <li>翻译前先通读原文</li> -</ul> - -<p>我们鼓励你在翻译之前先将英文版的原文通读一遍，至少应该通读一下当前准备翻译的小节，这样可以减少对原文的理解偏差。</p> - -<ul> - <li>先逐句翻译，再重构优化</li> -</ul> - -<p>写作文的时候，老师会强调修改的必要性；写代码的时候，我们也会强调重构的好处。翻译也是一样，不要想着一次成功，想要一遍就得到高质量的成果是很难的。我们可以先采用逐句翻译的方式，得到译文的第一稿，然后再通过重构去修正和优化它。重构可能会重复好几轮最终才能得到一篇高质量的的译文。</p> - -<p>不要担心过程繁琐或重构会占用你太多时间。记住，宁缺毋滥，不准确甚至错误的翻译只会误导他人，而我们的理想是给他人带来帮助。</p> - -<h4 id="误解：100_翻译_准确">误解：100% 翻译 = 准确</h4> - -<p>可能有些人会有这样的误解：我必须把英文原文中的每一句话都翻译出来，不能遗漏，只有这样才是准确的翻译。</p> - -<p>这种观念是错误的。首先，由于英文和中文在表述习惯上的差异，有些句子在英文中比较自然，但如果直接翻译为中文就会显得有些啰嗦。此时我们可以选择将其精简一下，把冗余的部分去掉。不要担心丢掉了这些内容之后会让译文不准确，必要的删减只会让译文更加简洁，阅读起来也更加流畅。</p> - -<p>比如英文中经常会见到“he/she”、“and/or”这样的表达方式。看起来比较严谨，但是在中文中并没有类似的习惯，因此简单将其翻译为“他”、“和”（也可以是“或”）即可。如果非要追求“准确”而将其翻译为“他/她”、“和/或”反而有画蛇添足之感（并且翻译腔也比较浓）。</p> - -<p>表述习惯上的差异还包括语序、句式、时态、词性等，关于中英文两种语言在表述习惯上的差异，可以参考下面的小节。</p> - -<p>其次，英文原文也不一定是 100% 正确的。MDN 上的英文文档虽然质量很高，但它也是由人维护的，是人就会有疏忽和犯错的时候，因此我们所翻译的原文并不一定是完全正确的。而作为翻译者，我们不应该只满足于翻译活动本身，还应该在翻译过程中勇于发现和改正原文的错误之处。</p> - -<h4 id="准确表述原文意思">准确表述原文意思</h4> - -<p>这一点并不是一条具体的规范，因为我不会、也无法解释如何才能做到“准确表述原文的原意”。将这一点列在这里主要是为了强调我们应该努力提高翻译的准确性。</p> - -<div class="note"> -<p>我们要对翻译的每一句话负责。如果你的翻译中有错误，就可能会让读者产生误解，而这比不给他们提供译文更糟糕（没有译文时，读者可以阅读英文原文，或去其他地方查找相关资料）。注意，这里所说的错误特指严重的概念性错误或原则性错误，而不是由于疏忽而导致的排版错误、打字错误等小的失误。</p> -</div> - -<p>下面这个例子是我之前翻译过的一篇文章里面的一段内容。原文是这样的：</p> - -<pre>The term "global objects" (or standard built-in objects) here is not to be -confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in -the global scope</strong>. The <strong>global object </strong>itself can be accessed using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" title="A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode."><code>this -</code></a>operator in the global scope (but only if ECMAScript 5 strict mode is not -used; in that case it returns <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="The global undefined property represents the primitive value undefined. It is one of JavaScript's primitive types."><code>undefined</code></a>). In fact, the global scope <strong>consists -of</strong> the properties of the global object, including inherited properties, if -any.</pre> - -<p>这段话中有两个微妙的词“global objects”和“global object”，一个是复数一个是单数。但我们知道，中文的名词并没有单复数的变化，因此直译过来都是“全局对象”，然而原文却恰恰需要对两者的不同进行解释，但是同一个名词怎么会有两种不同的解释呢？如何在中文中表达原文的意思呢？</p> - -<p>我们先来看之前的翻译，它采用的是直译，即将两个词都翻译为”全局对象“（将这个作为反例列在这里并没有贬低或指责的意思，仅仅是想通过这个例子让大家理解本小节所要表达的意思）：</p> - -<pre>“全局对象（global objects）”（或标准的内置对象）与<strong>全局对象（global object）</strong>不同。 -这里的全局对象（global objects）指的是全局<em>作用域</em>中的对象。而<strong>全局对象（global -object）</strong>本身可以……实际上，全局<em>作用域</em>由全局对象（global object）的属性组成，包括 -继承属性（如果有的话）。</pre> - -<p>”全局对象与全局对象不同“，显然会让读者犯糊涂。虽然译者在两个”全局对象“后面加上了它们的英文名称，但是收效甚微，读者仍然会被这段话搞晕，因为它们的英文名称也是很相似的。因此，这里必然不能采用直译的方式，而应该选择符合原文意思，但是中文名称又有明显不同的名词来翻译。下面是我对这段译文的重新翻译：</p> - -<pre>标准内置对象也称为<code>全局对象（global objects）</code>。注意这里的全局对象指的是具有全局作用域 -的“一组”对象，而全局对象这个词还有一层意思，用来指代当前环境中的顶层对象，该对象在…… -事实上，全局作用域就是由顶层对象的属性组成的，包括继承而来的属性（如果有的话）。</pre> - -<p>我选择把第二个全局对象（即单数形式的 global object）翻译为”顶层对象“，这样就把两个全局对象从中文名称上区别开了。同时，我还对整段译文进行了较大的调整，因为如果仅仅是将“global object”替换为“顶层对象”仍然不是很好，可能会让读者感到困扰。请将上面的译文与下面的这段对比一下：</p> - -<pre>“全局对象”（或标准的内置对象）与<strong>顶层对象</strong>不同。这里的全局对象指的是全局<em>作用域</em>中的对象。 -而<strong>顶层对象</strong>本身可以……实际上，全局<em>作用域</em>由顶层对象的属性组成，包括继承属性（如果有的话）。 -</pre> - -<p>一个读者在初次读到这段话的时候，可能会产生以下疑问：</p> - -<ol> - <li>全局对象当然与顶层对象不同了，它们的名称就不一样啊，为什么要强调这一点？</li> - <li>为什么要将两者放到一起比较？就像你说月亮和犀牛是不一样的，我肯定会感到奇怪。</li> -</ol> - -<p>所以，追求意思准确的同时还要尽量让中文表述更合理、自然。</p> - -<h4 id="认识英文和中文在表述习惯上的不同">认识英文和中文在表述习惯上的不同</h4> - -<p>由于思维方式、表述习惯、语言语法/句法等方面的差异，同样的意思，中文和英文在表述形式上经常会有差异。而我们在翻译的时候应当注意并尽量抹平这种差异，以符合中文读者的阅读习惯。这可以有效提高你的翻译质量。</p> - -<p>下面是我所想到的一些中文和英文在表述习惯上的差异。欢迎补充。</p> - -<h5 id="英文中主语很少省略">英文中主语很少省略</h5> - -<p>英文强调格式严谨，一个句子里面主语谓语通常是必须有的，但中文则注重表意，只要意思表达清楚就行。对于这样的句子，多数时候我们都不需要把其中的主语翻译出来。</p> - -<div class="example-good"> -<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which <strong>they</strong> are passed.</p> -</div> - -<p>这句话中的“they”就是一个不太重要的主语（虽然是在从句中），翻译时去掉也不会有什么影响：</p> - -<div class="example-bad"> -<p>传递给函数的所有参数都会以函数的参数列表中的标识符名称来对待，并以<strong>它们</strong>传递时的顺序来匹配。</p> -</div> - -<h5 id="万能动词">万能动词</h5> - -<p>英语中有很多万能动词：do、make / take、get、have 等，遇到这些万能动词的时候最好留意一下，尽量将其替换成其原本所要指代的动作。</p> - -<div class="note"> -<p>可能是受英文的影响，中文中也越来越多地出现了一些万能动词，比如“作为”、“进行”等。个人认为这是一种不好的现象，应该尽量避免滥用这些词。</p> -</div> - -<h5 id="被动句式">被动句式</h5> - -<p>英语中经常喜欢用被动句式来表达一种被动关系。但其实在中文里面我们一般只有在需要强调物和人之间存在被动关系的时候才会使用被动句式，其他时候一般不会刻意使用被动句式。如果将文章中出现的每个被动句式都翻译成“被……”可能会让译文看起来略显生硬且翻译腔浓重。因此应该仅在必要的时候才采用被动句式来翻译，其他时候直接忽略原文中的被动关系即可。</p> - -<p>这种情况在英文中很常见，随便找一下就能找到不少。比如：</p> - -<div class="example-good"> -<p>Strings are useful for holding data that can be represented in text form. </p> -</div> - -<p>如果直接翻译，可能会翻译成：</p> - -<div class="example-bad"> -<p>字符串在用来保存那些可以被表示成文本形式的数据时很有用。</p> -</div> - -<p>这样翻译虽然也能正确表达原文的意思，但是中文在这种情况下一般不会刻意使用被动句式，所以完全可以去掉“被”字：</p> - -<div class="example-good"> -<p>字符串在用来保存那些可以表示成文本形式的数据时很有用。</p> -</div> - -<p>其实这句话还可以进一步简化：</p> - -<div class="example-good"> -<p>字符串在保存文本数据时很有用。</p> -</div> - -<p>原文最后的整个从句仅仅用来说明“data”是“文本数据”而已，“can be represented in”和最后的“form"都是次要的，在中文里面完全可以省略。你甚至可以将这句话翻译成下面这样：</p> - -<div class="example-good"> -<p>字符串可以用来保存文本数据。</p> -</div> - -<p>完全不会影响读者的理解！</p> - -<h5 id="将来句式">将来句式</h5> - -<p>和被动句式一样，英文中也经常使用将来句式来表达这是一个可能发生的动作或者将来会发生的动作。然而，同被动句式一样，翻译的时候我们通常都不需要将其翻译成“将……”。</p> - -<p>这种情况同样有很多，随便举一例：</p> - -<div class="example-good">For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. </div> - -<p>很多人会把这句话翻译成：</p> - -<div class="example-bad"> -<p>尽管可以使用方括号的方式来访问字符，但是试图删除或为其赋值将不会成功。</p> -</div> - -<p>这样翻译会带有明显的翻译腔，实际上并不需要把原文中的“will”翻译出来，直接忽略即可：</p> - -<div class="example-good"> -<p>尽管可以使用方括号的方式来访问字符，但是试图删除或为其赋值是无法成功的。</p> -</div> - -<h5 id="一个……">一个……</h5> - -<p>英文中的名词有单复数变化，在遇到复数名词的时候，我们一般都知道并不需要刻意把这种复数翻译出来。但是还有一种情况我们却往往会忽略，那就是单数可数名词前面有“a”或“an”的时候，我们经常会翻译成“一个……”。实际上，多数时候并不需要加上这个数量词。</p> - -<p>比如下面这个例子：</p> - -<div class="example-good"> -<p>It's possible to use String as a more reliable toString() alternative, as it ...</p> -</div> - -<p>当然，你可以按照原样来翻译，将“a”翻译为“一种”或“一个”：</p> - -<div class="example-bad"> -<p>将 String 函数作为 toString() 方法的一种更可靠的替代是可行的，因为它……</p> -</div> - -<p>虽然看起来没什么问题，但是这里的“一种”、“一个”是完全多余的，去掉之后不但不会影响翻译效果，而且还会显得更加简洁。其实这个翻译还犯了一个前面所说过的万能动词的问题，“作为”在这里并不是太好，另外把“possible”翻译为“可行”、“可能”也不是很好，因为“possible”在这里只是用来说明“可以”这么做。</p> - -<p>总之，这个翻译的翻译腔还是浓了点，仍然有改进的空间：</p> - -<div class="example-good"> -<p>可以用 String 函数代替 toString() 方法，并且这样更可靠一些，因为它……</p> -</div> - -<h5 id="当……的时候">当……的时候</h5> - -<p>英文中经常会使用”when“来表示一种状态，或某种条件，而在中文里面我们不会经常用“当……的时候”这种表述方式来表达这种状态和条件。所以不要一遇到“when”、“while”，就把它翻译成“当……的时候”，应该先判断一下这里的“when”和“while”确实是用来表示时间，还是仅仅用来表示状态或条件。</p> - -<p>看下面这个例子：</p> - -<div class="example-good">When memory is shared, multiple threads can read and write the same data in memory. </div> - -<p>这里的“when”所表示的就是一种条件，所以最好不要将其翻译为“当内存是共享的时候”。下面是我的翻译：</p> - -<div class="example-good"> -<p>多个共享内存的线程能够同时读写同一位置上的数据。</p> -</div> - -<h4 id="翻译中的标点符号">翻译中的标点符号</h4> - -<p>英语有一个比较死板的规则，一个句子中包含了主谓宾的时候，就应该用句号把这个句子结束掉，然后再另起一句。但是中文却没有这种限制，因此在翻译的时候，我们不要总是把英语的句号当做一个句子的结束，有时候把逻辑关系比较强的几句英文合并为一句中文会更好。</p> - -<h3 id="排版和风格">排版和风格</h3> - -<p>这一节介绍了一些在页面排版、样式、风格等方面可能会遇到的一些问题，并给出指导建议。</p> - -<h4 id="关于英文单词两边的空格">关于英文单词两边的空格</h4> - -<p>首先，这是一个见仁见智的问题，不同的人可能有不同的喜好。这里建议你加上空格（因为我喜欢 :-p），当然你完全可以按照自己的喜好来。</p> - -<p>但是，<strong>请在同一篇文章中保持风格统一</strong>。如果你正在编辑别人之前翻译过的文章，也请尽量与文章原有风格保持一致（或者如果你不嫌麻烦，可以将整篇文章全部改成你喜欢的风格）。整齐划一的风格会使阅读时如沐春风，从而有利于读者从你的文章中获益。</p> - -<h4 id="标点符号">标点符号</h4> - -<p><strong>请在译文中使用中文标点</strong>。在中文中夹杂着英文标点是很不严谨的做法，并且不利于读者的阅读体验。</p> - -<div class="note"> -<p>这里所说的标点不包括代码中的标点。但如果选择翻译代码中的注释，则注释中的标点也应该一并翻译为中文。</p> -</div> - -<p>这里不再强调一般的标点对应关系，仅列举几种特殊情况：</p> - -<ul> - <li>英文中没有顿号，应该使用顿号的地方在英文中一般使用的是逗号，在翻译时应注意将其翻译为顿号。比如“JavaScript, HTML, CSS”应翻译为“JavaScript、HTML、CSS”。</li> - <li>如果遇到引号，分两种情况：一种是表达普通的引用或强调，如果是这种情况，直接翻译为中文引号即可；而如果是第二种情况，即为了表示代码中的字符串、属性等值时所使用的引号（也就是说，它表示的是字符串或属性在代码中原本应该具有的形式），这时候就不要机械地将其翻译成中文引号了，应仍保留英文引号。</li> -</ul> - -<h3 id="小节标题的翻译">小节标题的翻译</h3> - -<p>MDN 上的很多文章都具有类似的结构，比如很多文章都包含“Specifications”和“Browser compatibility”两个小节。为了保证文章间的统一性，常见小节的标题翻译应尽量保持一致。下面就给出一些文章中常见的小节及其推荐翻译方法。此表欢迎补充。</p> - -<table class="standard-table" id="normal_section_heading"> - <caption>常见小节的标题翻译</caption> - <thead> - <tr> - <th scope="col">英文标题</th> - <th scope="col">推荐翻译方法</th> - <th scope="col">不推荐翻译方法</th> - <th scope="col">示例</th> - </tr> - </thead> - <tbody> - <tr> - <td>Examples</td> - <td>示例</td> - <td>例子、举例</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Examples">示例</a>一节</td> - </tr> - <tr> - <td>Specifications</td> - <td>规范</td> - <td>标准、规范文档</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E8%A7%84%E8%8C%83">规范</a>一节</td> - </tr> - <tr> - <td>Browser compatibility</td> - <td>浏览器兼容性</td> - <td>浏览器的兼容性、浏览器兼容</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7">浏览器兼容性</a>一节</td> - </tr> - <tr> - <td>See also</td> - <td>相关链接</td> - <td>参考、参见、更多内容</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5">相关链接</a>一节</td> - </tr> - <tr> - <td>Obsolete</td> - <td>已过时</td> - <td>已废弃、作废、淘汰</td> - <td><code><a></code> 标签的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#%E8%BF%87%E6%97%B6%E7%9A%84">已过时</a>一节</td> - </tr> - <tr> - <td>Syntax</td> - <td>语法</td> - <td>句法</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Syntax">语法</a>一节</td> - </tr> - <tr> - <td>Description</td> - <td>描述</td> - <td>说明</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E6%8F%8F%E8%BF%B0">描述</a>一节</td> - </tr> - <tr> - <td>Properties</td> - <td>属性</td> - <td>属性列表</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Properties">属性</a>一节</td> - </tr> - <tr> - <td>Methods</td> - <td>方法</td> - <td>方法列表</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods">方法</a>一节</td> - </tr> - <tr> - <td>…… instances</td> - <td>……实例</td> - <td>……对象、……实例化</td> - <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B">数组实例</a>一节</td> - </tr> - <tr> - <td>Attributes</td> - <td>属性</td> - <td> </td> - <td><code><a></code> 标签的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#%E5%B1%9E%E6%80%A7">属性</a>一节</td> - </tr> - </tbody> -</table> - -<h3 id="缩写的展开">缩写的展开</h3> - -<p>展开缩写时使用中文括号，括号中首先给出缩写的完整英文表达，后面跟着逗号和中文翻译。例如：</p> - -<div class="example-good">HTML（HyperText Markup Language，超文本标记语言）</div> - -<div class="example-bad"> -<p>HTML（超文本标记语言，HyperText Markup Language）</p> -</div> - -<div class="example-bad"> -<p>HTML（超文本标记语言——HyperText Markup Language）</p> -</div> - -<div class="example-bad"> -<p>HTML (HyperText Markup Language，超文本标记语言) （注：使用了英文括号）</p> -</div> - -<h3 id="选择题">选择题</h3> - -<p>有时候，我们会在翻译过程中面临某个单词或某段内容是译还是不译、哪种翻译方法更好的选择。本小节总结了翻译中的一些常见问题，并给出一些意见和建议，供参考。</p> - -<h4 id="长句还是短句？">长句还是短句？</h4> - -<p>没有人会乐意阅读复杂和很长的句子。但是有时候由于所要表达的内容本身的逻辑复杂性，而导致无法进一步压缩句子的长度和复杂度。但是这时候我们可以通过调整顺序和拆分句子来降低它的理解难度。</p> - -<h4 id="“你”还是“您”？">“你”还是“您”？</h4> - -<p>对于非严谨的地方，一般用“你”即可，这样亲切些，没必要冷冰冰的。当然必要的时候（一般是警告的地方，如“您即将从演示室移除xxx”）可以使用“您”来称呼。</p> - -<h4 id="译还是不译？">译还是不译？</h4> - -<ul> - <li>部分被广为接受的英文专有名词、缩略语等不推荐刻意翻译为中文。例如 Web 不需要翻译成“网络”（注意不是 web，这里的 W 是大写的，为专有名词）、HTTP 不需要翻译成”超文本传输协议“。</li> - <li>部分被广为接受的英文人名、公司名等不推荐刻意翻译成中文。例如 Adobe 不需要翻译成“阿道比”、MDN 不需要翻译成”Mozilla 开发者网络“。</li> - <li>代码中的属性名、方法名、对象名、类名、标签名等不译。例如 length property 不需要翻译成“长度属性”，而是应为“length 属性”。</li> - <li>网址、域名不译。</li> -</ul> - -<h4 id="示例代码及注释">示例代码及注释</h4> - -<p>MDN 上面的很多文章中都包含示例代码。一般来说，你可以将这些代码及注释原封不动地复制过来，并不需要刻意去翻译。示例代码不同于正式工作中所写的代码，示例代码主要是说明概念和用法，因此通常会设计的很简单，并且主要的解释都已经在前面的文章内容里面了，注释大多数时候只是起到辅助说明的作用，所以多数时候，即使读者完全不看注释也不妨碍他们对示例的理解。</p> - -<p>但是有几种情况还是建议最好能对其中的注释做一下翻译。</p> - -<h5 id="1._示例中涉及到其他知识，而注释正是为了解释这部分知识而添加的">1. 示例中涉及到其他知识，而注释正是为了解释这部分知识而添加的</h5> - -<p>在这种情况下，确保读者已完全理解了注释就是相当必要的了，否则可能会影响对整个示例的理解。因此这种情况最好能对这部分注释做一下翻译。</p> - -<p>比如下面是摘自 JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Creating_an_array_using_the_result_of_a_match">Array</a> 对象中的例子。该示例涉及到正则表达式的应用，而对于初学者来说，他可能还不太了解什么是正则表达式，以及这段代码的结果是什么，这会使他产生迷惑（而且原文中本段代码后面还配有一个详细解释了代码执行结果的表格，如果读者无法理解这段代码，他很可能也看不懂那个表格中的内容）。</p> - -<pre><code>// Match one d followed by one or more b's followed by one d -// Remember matched b's and the following d -// Ignore case - -var myRe = /d(b+)(d)/i; -var myArray = myRe.exec('cdbBdbsbz');</code></pre> - -<p>所以我选择对其进行<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Creating_an_array_using_the_result_of_a_match">翻译</a>：</p> - -<pre><code>// 匹配1个 d 后面紧跟着至少1个 b，再后面又跟着1个 d 的子串， -// 并且需要记住子串中匹配到的 b 和最后的 d （通过正则表达式中的分组）， -// 同时在匹配时忽略大小写 - -myRe = /d(b+)(d)/i; -myArray = myRe.exec("cdbBdbsbz");</code></pre> - -<h5 id="2._注释的内容是对原文的补充">2. 注释的内容是对原文的补充</h5> - -<p>有些示例是对原文的补充说明，而不是单纯的演示和举例。这时候，示例和注释相当于是原文的一部分，因此这种情况下最好能将注释翻译出来。</p> - -<h5 id="3._惯用语的翻译">3. 惯用语的翻译</h5> - -<p>这一点不太容易解释，并且我个人觉得还存在争议，列在这里供参考。</p> - -<p>有些注释中使用了一些我们平时的惯用语，而这些惯用语我们已经习惯了中文化的表达，对英文并不熟悉。这种情况下，可以适当对其进行翻译。</p> - -<p>一个常见的例子，我们经常会在示例中使用打印语句来打印信息，以此说明程序的运行结果。这种时候，英文文档中经常会用“// print 100”或”// log 100“来对打印语句做注释。如果我们将其翻译为”// 打印 100“可能看起来会更加亲切一些。</p> - -<h4 id="标签">标签</h4> - -<p>页面底部的标签大部分情况下并不需要翻译。</p> - -<h4 id="URL_slug">URL slug</h4> - -<p>slug 就是网页地址后面的那一串，用来标识每一篇文章。如果你正面临是否需要翻译 slug 的选择，请选择 No！保留 slug 为英文可以保证链接的可读性，也可以避免翻错的情况（这个一旦确定好像就不能修改了）。</p> - -<h3 id="保存和恢复翻译进度">保存和恢复翻译进度</h3> - -<p>翻译一篇文章可能无法一次完成，尤其是比较长的文章。幸好 MDN 的编辑器可以将进度自动保存在你的本地电脑中，在你不小心关闭了浏览器，或者不小心点击了一个链接而离开了当前页面的时候，自动保存的内容会在你重新打开编辑页面的时候自动恢复，从而避免丢失之前的劳动成果。</p> - -<p>但是，请不要百分百依赖编辑器的自动保存功能，偶尔它也有失效的时候，而一旦发生就可能会造成严重后果。</p> - -<p>如果因为文章内容较多而导致翻译时间很长，可以在取得阶段性成果之后先将内容提交，并在提交时勾选“版本备注” -> “本地化标志” -> "本地化进行中 - 还没完全翻译呢"，这样提交后用户看到的页面上会显示“翻译正在进行中”的提示信息。</p> - -<p>最后，如果你在翻译过程中存在一些拿不准的地方，或者自我感觉译文中可能存在错误或需要改进的地方，那么你可以在提交时勾选“版本备注” -> “需要复核吗？”中的“技术复核”或“文法复核”选项。这样其他志愿者就可以看到并帮助你复核译文。</p> - -<h3 id="其他">其他</h3> - -<p>这一小节列出了翻译过程中可能会遇到的其他一些问题。</p> - -<h4 id="Firefox_UI_控件名称">Firefox UI 控件名称</h4> - -<p>除非中文版 UI 控件的翻译有明显错误，否则控件名称（如操作步骤中描述的窗口、菜单、按钮等）都应尽量参照所描述版本或最新版 Firefox 中的翻译，以保证可对应。</p> - -<p>若最新版 Firefox 的 UI 仍有错误的翻译或你有改善建议，请到 <a href="http://g.mozest.com/forum-78-1" title="http://g.mozest.com/forum-78-1">mozest 本地化板块</a>反馈或邮件通知<a href="https://wiki.mozilla.org/L10n:Teams:zh-CN" title="https://wiki.mozilla.org/L10n:Teams:zh-CN">简体中文本地化成员</a>。</p> - -<h4 id="引用链接">引用链接</h4> - -<p>英文版文章中可能会包含引用 MDN 中其他文章的绝对链接，此时要注意将链接修改为中文版的 URL。</p> - -<p>修改方法很简单，一般是把其中的 <code>en-US</code> 改为 <code>zh-CN</code> 即可。比如下面是 JavaScript 文档中对全局对象的介绍，分别对应英文版和中文版：</p> - -<p>https://developer.mozilla.org/<code>en-US</code>/docs/Web/JavaScript/Reference/Global_Objects</p> - -<p>https://developer.mozilla.org/<code>zh-CN</code>/docs/Web/JavaScript/Reference/Global_Objects</p> - -<h3 id="待完善">待完善</h3> - -<p id="如果你有什么好的想法，欢迎随时编辑本页面，当然到MDNzh论坛来讨论更方便。">本规范还有很多不完善的地方，如果你有什么好的意见和建议，欢迎编辑本页面，当然也可以到<a href="https://groups.google.com/d/forum/mdnzh" title="MDN中文化社区">MDNzh论坛</a>来讨论。</p> - -<p> </p> - -<p> </p> diff --git a/files/zh-cn/orphaned/learn/how_to_contribute/index.html b/files/zh-cn/orphaned/learn/how_to_contribute/index.html deleted file mode 100644 index 6b36cfc838..0000000000 --- a/files/zh-cn/orphaned/learn/how_to_contribute/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 如何向MDN的学习区做贡献 -slug: orphaned/Learn/How_to_contribute -tags: - - MDN 元信息 - - 初学者 - - 学习 - - 引导 - - 指南 - - 文档 - - 贡献 -translation_of: Learn/How_to_contribute -original_slug: learn/How_to_contribute ---- -<div>{{LearnSidebar}}</div> - -<p>可能您是第一次看到这个页面，也可能您经过层层搜索而来。我们猜测您找到这里，是希望向 MDN 学习区做贡献——棒极了！</p> - -<p><span class="seoSummary">这篇文档将告诉您如何提高 MDN 学习区资料的质量。您可以做的事情各种各样，取决于您有多少时间，以及您的身份：<a href="/zh_CN/Learn/How_to_contribute#I'm_a_beginner">初学者</a>、<a href="/zh_CN/Learn/How_to_contribute#I'm_a_web_developer">Web 开发者</a>，还是<a href="/zh_CN/Learn/How_to_contribute#I'm_a_teacher">教师</a>。</span></p> - -<div class="note"> -<p><strong>注意</strong>：这篇指南会告诉您<a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">如何撰写文章来帮助他人学习 Web</a>。</p> -</div> - -<h2 id="寻找特定任务">寻找特定任务</h2> - -<p><strong>贡献者向学习区做出贡献的方法通常是阅读文章、修复排版错误并提出改进。我们同时欢迎您向我们的 <a href="https://github.com/mdn/learning-area/">GitHub 源 </a>添加示例。若您还想了解需要做的其他事项，请与我们联系。</strong></p> - -<p>在学习新知识的同时做出贡献是一件乐趣无穷的事。如果您感到迷茫或者有疑问，不用犹豫，通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们（本页底部有更详细的信息）。<a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> 是学习区的主题发布人——您也可以直接和他联系。</p> - -<p>以下章节为您的任务提供概要思路。</p> - -<h2 id="我是初学者">我是初学者</h2> - -<p>好极了！对于创建学习资源和提供反馈，初学者们至关重要。作为目标受众，您对这些文章具有独特的视角，这让您成为我们团队中的无价之宝。真的，如果您正在通过某篇文章学习知识却卡住了，或者您觉得这篇文章看起来有点令人费解，您既可以自行改正，也可以把问题告诉我们以便我们去改正它。</p> - -<p>下面是几种建议的贡献方式：</p> - -<dl> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Tag">为文章添加标签</a>（<em>5 分钟</em>）</dt> - <dd>为文章添加标签是最简单的贡献方式。利用标签来呈现信息是我们的特色之一，因此添加标签对我们来说是非常有价值的贡献方式。您可以先从还没有标签的<a href="/zh-CN/docs/MDN/Doc_status/Glossary#No_tags">词汇条目</a>和<a href="/zh-CN/docs/MDN/Doc_status/Learn#No_tags">学习文章</a>开始。</dd> - <dt><a href="/zh_CN/docs/Glossary">阅读并复核词汇条目</a>（<em>5 分钟</em>）</dt> - <dd>我们希望，作为初学者的您能用您的视角来审视我们所写的内容。如果您感到某个词汇条目难以理解，这说明该条目需要改进。您可以做任何觉得有必要的修改。如果您感到自己的技能不足以修改词汇条目，也可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>告诉我们。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a>（<em>20 分钟</em>）</dt> - <dd>这是学习新知识的最有效的方式了。挑选一个想要深入了解的概念，根据您所学的，撰写关于这个概念的词汇条目。“向他人解释”，这是巩固已学知识的最佳方式之一，既帮助您深入理解，同时也帮助了他人。这就是共赢！</dd> - <dt><a href="/zh_CN/docs/Learn/Index">阅读并复核学习文章</a>（<em>2 小时</em>）</dt> - <dd>这与上述“复核词汇条目”非常类似，只是由于文章更长，因此要花更多时间。</dd> -</dl> - -<h2 id="我是_Web_开发者">我是 Web 开发者</h2> - -<p>太棒了！我们太需要您的专业技能了，这确保我们向初学者提供的内容技术准确。考虑到这部分内容用于供他人学习，我们希望您提供的解释尽可能表述简单，但又不至于无用。我们首先考虑易于理解，而非过度精确。</p> - -<dl> - <dt><a href="/zh_CN/docs/Glossary">阅读并复核词汇条目</a>（<em>5 分钟</em>）</dt> - <dd>我们希望作为 Web 开发者的您，能让我们的文章内容技术准确而又不至于太学究气息。您可以做任何认为有必要的修改。如果您想在编辑前讨论内容，可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们。</dd> - <dt><a href="/zh_CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a>（<em>20 分钟</em>）</dt> - <dd>阐述技术词汇是一种很好的学习方法，它能帮助您用准确而简单的方式把握技术细节。初学者非常需要准确清晰的术语定义。我们有许多<a href="/zh-CN/docs/Glossary#Contribute">缺乏定义的术语</a>需要您来完善，请放手去做吧！</dd> - <dt><a href="/zh-CN/Learn/Index">阅读并复核学习文章</a> (<em>2 小时</em>)</dt> - <dd>这与上述“复核词汇条目”一样，只是由于文章更长，因此要花更多时间。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰写学习文章</a> (<em>4 小时或者更多</em>)</dt> - <dd>MDN 缺少朴素直白的文章以介绍如何使用 Web 技术（<a href="/zh-CN/docs/Learn/CSS">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a>、<a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 等等）。我们还有很多陈旧的文档内容，需要复核或重构。发挥您的聪明才智，造福 Web 技术初学者吧！</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">创建练习、代码样例或交互式学习工具</a> (<em>? 小时</em>)</dt> - <dd>亲自实践的学习效果更佳，因此我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户熟练运用文章中详述的概念。制作“主动学习”材料的方式很多，比如使用 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> 或类似工具创建代码样例，或者使用 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a> 构建可解析的交互式内容。总而言之，释放您的创造力吧！</dd> -</dl> - -<h2 id="我是教师">我是教师</h2> - -<p>MDN 长期以来都拥有卓越的技术，但对于传授知识的最佳方法，我们仍然缺乏深刻的见解。我们需要教育工作者的参与，从而确保我们的材料为读者提供良好而实用的教育方法。</p> - -<dl> - <dt><a href="/zh-CN/docs/Glossary">阅读并复核词汇条目</a> (<em>15 分钟</em>)</dt> - <dd>检查词汇条目，并对任何您认为有必要的地方进行修改。如果您想在编辑前讨论内容，可以通过可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a> (<em>1 小时</em>)</dt> - <dd>为了满足初学者的需求，在词汇表中对术语进行清晰简明的定义、对概念进行基本总体的描述至关重要。您的教育经验对于创建优秀的词汇条目大有裨益；我们有许多<a href="/zh-CN/docs/Glossary#Contribute">缺乏定义的术语</a>需要您来完善，请放手去做吧！</dd> - <dt><a href="/zh-CN/docs/tag/needsSchema">向文章中添加插图或图表</a> (<em>1 小时</em>)</dt> - <dd>您一定了解图表在学习材料中的价值。我们的文章内容总是缺乏图表，而您正好可以大展身手。您可以从<a href="/zh-CN/docs/tag/needsSchema">缺少图表内容的文章</a>中选择一些，为其创建插图。</dd> - <dt><a href="/zh-CN/Learn/Index">阅读并复核学习文章</a> (<em>2 小时</em>)</dt> - <dd>这与上述“复核词汇条目”类似，只是由于文章更长，因此要花更多时间。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰写学习文章</a> (<em>4 小时</em>)</dt> - <dd>我们需要朴素直白的文章，介绍 Web 生态体系以及其他相关的功能主题。这些文章的目标是教育性，而非领域百科。文章应当涉及什么、如何表述，您在这方面的丰富经验大有帮助。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">创建练习、测验或者交互式学习工具</a> (<em>? 小时</em>)</dt> - <dd>我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户学习并拓展理解文章中详述的概念。您可以做很多事情——创建测验、用 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a> 构建可解析的交互式内容——总之，释放您的创造力吧！</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_learning_pathways">创建学习路线</a> (<em>? 小时</em>)</dt> - <dd>为了提供循序渐进、易于理解的教程，我们需要把学习材料组织成体系化的路线。这个过程将收集已有的材料，并找出缺失的内容，然后用新文章填补空缺。</dd> -</dl> diff --git a/files/zh-cn/orphaned/learn/html/forms/html5_updates/index.html b/files/zh-cn/orphaned/learn/html/forms/html5_updates/index.html deleted file mode 100644 index 5d96e5faff..0000000000 --- a/files/zh-cn/orphaned/learn/html/forms/html5_updates/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: HTML 中的表单 -slug: orphaned/Learn/HTML/Forms/HTML5_updates -tags: - - HTML5 - - HTML5 form updates - - form -translation_of: Learn/HTML/Forms/HTML5_updates -original_slug: Web/Guide/HTML/Forms_in_HTML ---- -<div>HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。</div> - -<div> </div> - -<div>本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML表单指南</a>。</div> - -<div> </div> - -<h2 id="The_input_element" name="The_input_element"><code><input></code> 元素</h2> - -<p><code>{{HTMLElement("input")}}</code> 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）</p> - -<ul> - <li><code>search</code>: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。</li> - <li><code>tel</code>: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如 {{htmlattrxref("pattern", "input")}} 与 {{htmlattrxref("maxlength", "input")}} 等属性来限制输入到控件中的值。</li> - <li><code>url</code>: 这个元素呈现为一个编辑<a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a> 的输入控件。换行符与首尾的空格将会被自动去除。</li> - <li> - <p><code>email</code>: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在<span style="font-family: Arial; font-size: medium; line-height: 26px;">扩展的巴科斯范式(ABNF)中的规范：</span><code style="font-size: 14px;">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code><span style="line-height: 1.5em;"> 其中</span><code style="font-size: 14px;">atext</code><span style="line-height: 1.5em;"> 在规范</span><a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3" style="line-height: 1.5em;">RFC 5322 section 3.2.3</a> 中被定义<span style="line-height: 1.5em;">,而</span><code style="font-size: 14px;">ldh-str在规范</code><a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5" style="line-height: 1.5em;">RFC 1034 section 3.5</a> 中被定义。<span style="line-height: 1.5em;">.</span></p> - - <div class="note"><strong>注意:</strong> 若设置{{htmlattrxref("multiple", "input")}}属性，{{HTMLElement("input")}} 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持.</div> - </li> -</ul> - -<p> {{HTMLElement("input")}} 元素也拥有一些新的特性。</p> - -<ul> - <li>{{htmlattrxref("list", "input")}}： {{HTMLElement("datalist")}} 元素的 ID，该元素的内容，{{HTMLElement("option")}} 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。</li> - <li>{{htmlattrxref("pattern", "input")}}： 一个正则表达式，用于检查控件的值，能够作用于 {{htmlattrxref("type", "input")}} 值是 <code>text，</code> <code>tel，</code> <code>search，</code> <code>url，</code> 和 <code>email 的 input 元素。</code></li> - <li>{{htmlattrxref("form", "input")}}： 一个字符串，用于表明该 input 属于哪个 {{HTMLElement("form")}} 元素。一个 input 只能存在于一个表单中。</li> - <li>{{htmlattrxref("formmethod", "input")}}：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("method", "form")}} 特性。只有当 {{htmlattrxref("type", "input")}} 值为 <code>image</code> 或 <code>submit，并且 </code>{{htmlattrxref("form", "input")}} 特性被设置的情况下， {{htmlattrxref("formmethod", "input")}} 才能生效。</li> - <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。</li> -</ul> - -<h2 id="text_input">text input</h2> - -<dl> - <dt> </dt> -</dl> - -<p>这个程序段段定义了一个用户可以输入的一行input。</p> - -<pre><code><form> - Enter your Name <input type="text" name="name"> -</form></code></pre> - -<h2 id="checkboxes"><strong>checkboxes</strong></h2> - -<p>这个程序段允许用户选择多个选项。</p> - -<pre><code><input type="checkbox" name="chk" value="" checked> Do you want the newsletter</code></pre> - -<h2 id="The_form_element" name="The_form_element">Radio < input> element</h2> - -<pre><code><form> - <input type="radio" name="frequency" value="daily">Daily<br> - <input type="radio" name="frequency" value="weekly">Weekly<br> - <input type="radio" name="frequency" value="monthly">Monthly<br> - <input type="radio" name="frequency" value="yearly">Yearly -</form></code></pre> - -<h2 id="The_form_element" name="The_form_element"><code><form></code> 元素</h2> - -<p>{{HTMLElement("form")}} 元素有了一个新特性：</p> - -<ul> - <li>{{htmlattrxref("novalidate", "form")}}：设置了该特性不会在表单提交之前对其进行验证。</li> -</ul> - -<h2 id="The_datalist_element" name="The_datalist_element"><code><datalist> 元素</code></h2> - -<p>{{HTMLElement("datalist")}} 元素会在填写 <span style="line-height: inherit;">{{HTMLElement("input")}} 字段时，显示一列</span><span style="line-height: inherit;"> {{HTMLElement("option")}} 作为提示。</span></p> - -<p>你可以使用 {{HTMLElement("input")}} 元素上的<span style="line-height: inherit;"> {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的</span><span style="line-height: inherit;"> {{HTMLElement("datalist")}} 元素做关联。</span></p> - -<h2 id="The_output_element" name="The_output_element"><code><output></code> 元素</h2> - -<p><code>{{HTMLElement("output")}}</code> 元素表示计算的结果。</p> - -<p>你可以使用 {{htmlattrxref("for", "output")}} 特性来在 <code>{{HTMLElement("output")}}</code> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。</p> - -<p>{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 <span style="line-height: inherit;">{{HTMLElement("output")}} 元素自定义有效性约束(</span><span style="line-height: 21px;">validity constraints</span><span style="line-height: inherit;">)与错误信息，可以对其使用如下 CSS 伪类：</span><span style="line-height: inherit;">{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，</span><span style="line-height: inherit;">「百分比总数不能超过100</span><span style="line-height: inherit;">」</span><span style="line-height: inherit;">)。</span></p> - -<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder 特性</h2> - -<p>{{htmlattrxref("placeholder", "input")}} 特性作用于 <code>{{HTMLElement("input")}}</code> 与 <code>{{HTMLElement("textarea")}}</code> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p> - -<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus 特性</h2> - -<p>{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 <code>autofocus</code> 特性，它是一个 Boolean 值。这个特性适用于 <code>{{HTMLElement("input")}}，</code> <code>{{HTMLElement("button")}}，</code> <code>{{HTMLElement("select")}}，与<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"> </font></code><code>{{HTMLElement("textarea")}}</code> 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 <code>hidden，则</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">autofocus</code><span style="line-height: inherit;"> 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</span></p> - -<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM 属性</h2> - -<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 接口除了为 <code>{{HTMLElement("label")}}</code> 元素提供了对应的特性外，还提供了一个额外的属性。 <strong>control</strong> 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。</p> - -<h2 id="Constraint_Validation" name="Constraint_Validation">约束验证</h2> - -<p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，<span style="line-height: inherit;">出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</span></p> - -<p>如果 {{HTMLElement("input")}} 元素设置了<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title 特性，当验证失败时，特性值会显示在提示信息中。如果</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 设置为空字符串，则不会显示提示信息。如果没有设置 </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 </span><code style="font-size: 14px; line-height: inherit;">setCustomValidity()</code><span style="line-height: inherit;"> 方法) 代为显示。</span></p> - -<div class="note"><strong>注意：</strong> 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。</div> - -<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">约束验证的 HTML 语法</h3> - -<p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p> - -<ul> - <li>{{HTMLElement("input")}}, {{HTMLElement("select")}}， 和 {{HTMLElement("textarea")}} 元素上的 {{htmlattrxref("required", "input")}} 特性，指定必须提供该元素的值。(在 {{HTMLElement("input")}} 元素上， {{htmlattrxref("required", "input")}} 只能与特定的 {{htmlattrxref("type", "input")}} 特性值结合起来生效。)</li> - <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("pattern", "input")}} 特性用于限定元素值必须匹配一个特定的正则表达式。</li> - <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性限定了能够输入元素的最大与最小值。</li> - <li>{{HTMLElement("input")}} 元素的 {{htmlattrxref("step", "input")}} 特性(与 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</li> - <li>{{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素的 {{htmlattrxref("maxlength", "input")}} 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</li> - <li>{{htmlattrxref("type", "input")}} 的 <code>url</code> 与 <code>email</code> 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</li> -</ul> - -<p>此外，若要阻止对表单进行约束验证，你可以在 <span style="line-height: inherit;">{{HTMLElement("form")}} 上设置</span><span style="line-height: inherit;"> </span><span style="line-height: inherit;">{{htmlattrxref("novalidate", "form")}} 特性，或在 </span><span style="line-height: inherit;">{{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 </span><span style="line-height: inherit;">{{htmlattrxref("type", "input")}} 是 </span><code style="font-size: 14px; line-height: inherit;">submit</code><span style="line-height: inherit;"> 或 </span><code style="font-size: 14px; line-height: inherit;">image</code><span style="line-height: inherit;">)上设置 </span><span style="line-height: inherit;">{{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。</span></p> - -<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">约束验证 API</h3> - -<p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p> - -<ul> - <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> 对象上的 <code>checkValidity()</code> 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</li> - <li>在 <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">表单相关元素</a>上： - <ul> - <li><code>willValidate</code> 属性，如果元素的约束没有被符合则值为 false。</li> - <li><code>validity</code> 属性，是一个 <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</li> - <li><code>validationMessage</code> 属性，用于描述与元素相关约束的失败信息。</li> - <li><code>checkValidity()</code> 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</li> - <li><code>setCustomValidity()</code> 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</li> - </ul> - </li> -</ul> - -<div>{{HTML5ArticleTOC}}</div> diff --git a/files/zh-cn/orphaned/learn/html/forms_and_buttons/index.html b/files/zh-cn/orphaned/learn/html/forms_and_buttons/index.html deleted file mode 100644 index 443876e6a3..0000000000 --- a/files/zh-cn/orphaned/learn/html/forms_and_buttons/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: 表单和按钮 -slug: orphaned/Learn/HTML/Forms_and_buttons -tags: - - 初学者 - - 指引 - - 文章 - - 表单 -translation_of: Learn/HTML/Forms_and_buttons -original_slug: learn/HTML/Forms_and_buttons ---- -<p>{{draft}}{{LearnSidebar}}</p> - -<p class="summary">表单和按钮是Web的一个非常重要的部分 - 这些允许您的站点访问者输入数据并将其发送给您（例如注册，登录和反馈表单），并且您可以实现控制以控制复杂功能（例如提交表单） 到服务器，或暂停播放视频。）这个模块可以帮助您入门。</p> - -<h2 id="先决条件">先决条件</h2> - -<p>在开始本单元之前，您应该对<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML的基础知识</a>有一定的了解，如HTML简介中所述。 如果你没有通过这个模块（或类似的东西），先完成它，然后再回来！</p> - -<div class="note"> -<p><strong>Note</strong>: 如果你是在计算机/平板电脑等其他你无法创建文件的设备上的话，你可以尝试在在线代码编辑平台上运行代码例如 <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p> -</div> - -<h2 id="向导">向导</h2> - -<p>本模块包含以下的文章</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms_and_buttons/Basics">表单和按钮基础知识</a>（Form and button basics）</dt> - <dd> 在本文中，我们将向您介绍HTML表单的基础知识，包括它们的用途，基本功能和常用表单控件。 我们还将了解HTML按钮以及如何使用它们。</dd> - <dt>形成语义和结构</dt> - <dd> 存在许多元素，允许我们将表单结构化为更易于使用和访问 - 其中一些是专门的表单元素，其中一些是通用HTML容器。 在本文中，我们将介绍创建表单结构的最佳实践。</dd> - <dt>高级表单功能</dt> - <dd> 在这里，我们将介绍HTML表单中可用的一些更高级的功能，例如数据列表，进度条，滑块以及最小值和最大值。</dd> - <dt>表格验证</dt> - <dd> 在我们的最终表单文章中，我们将讨论表单验证，讨论为什么有必要，并查看HTML选项卡提供的一些功能，以便客户端验证表单数据。</dd> -</dl> - -<h2 id="练习">练习</h2> - -<dl> - <dt>表单练习</dt> - <dd>等待完成（to be done）</dd> -</dl> diff --git a/files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html deleted file mode 100644 index 125d31931d..0000000000 --- a/files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: 在 PWS/Cloud Foundry 上，安装 LocalLibrary -slug: orphaned/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -original_slug: learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">本文提供了如何在 <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud </a>云上安装 LocalLibrary的实际演示 - 这是 Heroku 的全功能，开源替代品，Heroku 是我们<a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment">教程第 7 部分</a>中使用的 PaaS 云服务。如果您正在寻找 Heroku（或其他 PaaS 云服务）的替代方案，或者只是想尝试不同的东西，PWS / Cloud Foundry 绝对值得一试。</p> - -<h2 id="为什么是_PWS">为什么是 PWS?</h2> - -<p>Pivotal Web Services 是<a href="https://www.cloudfoundry.org/">开源云代工平台</a>的公共实例。它是一个多语言平台，支持许多不同的语言，包括Node.js，Java，PHP，Python，Staticfiles 和 Ruby。它有一个免费试用版，对于运行 Node 应用程序非常有效！由于 Node 和 Express 是开源项目，因此与使用 Cloud Foundry 等开放式部署平台保持一致。您可以<a href="https://github.com/cloudfoundry">深入了解</a>应用程序的托管方式。</p> - -<p>使用PWS有多种原因！</p> - -<ul> - <li>PWS具有<a href="https://run.pivotla.io/pricing">灵活的定价</a>，可以很好地适应 node 等小型运行。你可以用每月不到 5 美元的价格，运行一对冗余的应用程序。这包括备用故障转移系统，如果主服务器在任何时候出现故障，它将接管运行您的应用程序。</li> - <li>作为PaaS，PWS为我们提供了大量的 Web 基础设施。这使得入门更加容易，因为您不必担心服务器、负载平衡器、反向代理、崩溃时重新启动网站，或者PWS 为我们提供的任何其他 Web 基础结构。</li> - <li>因为 PWS 使用的是 Cloud Foundry，一个开放的平台。因此，您可以轻松地将应用程序，部署到其他 Cloud Foundry 提供商，例如 <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM BlueMix</a>, <a href="https://www.anynines.com/">AnyNines</a> 和 <a href="https://www.swisscom.ch/en/business/enterprise/offer/cloud-data-center-services/paas/application-cloud.html">Swisscomm Application Cloud</a>。以下说明，适用于任何标准的 Cloud Foundry 部署，只需稍加修改即可。</li> - <li>虽然它确实有一些限制，但这些不会影响这个特定的应用程序。例如： - <ul> - <li>PWS 和 Cloud Foundry 仅提供短期存储，因此用户上载的文件，无法安全地长期存储在 PWS 本身上。</li> - <li>免费试用一年有效，限制最高 87美元的应用程序使用量。对于典型的 Node 应用程序，这意味着您可以运行一整年的应用程序。</li> - </ul> - </li> - <li>大多数情况下它只是可以工作，如果你最终喜欢它，并希望升级，那么扩展你的应用程序非常容易。</li> - <li>PWS 和其他 Cloud Foundry 应用程序，可用于生产级别的应用程序。</li> -</ul> - -<h2 id="PWS_是如何工作的？">PWS 是如何工作的？</h2> - -<p>PWS通过容器来运行网站和应用已经有些年头了。Cloud Foundry一开始采用的容器技术名为Warden，现在使用的是名为Garden的容器系统。这些技术与流行的Docker容器很相似，而且事实上Cloud Foundry云平台的很多设施都支持部署Docker容器。</p> - -<p>使用Cloud Foundry云平台的好处之一是您不需要创建容器规范，因为Cloud Foundry的构建包会基于最新的组件来生成它们。由于容器是临时部署的，而且可能随时被清理并部署到云中的其他位置，所以Cloud Foundry云平台上的应用需要遵循<a href="https://12factor.net/zh_cn/">十二要素准则</a>。如此可以确保您的应用和平台使用最新的软件。一个应用程序可以包含多个实例，在这些实例中，应用程序被放置到冗余容器中，从而实现应用程序的高可用性。Cloud Foundry会自动处理相同实例之间的所有负载平衡。这允许您扩展应用程序的性能和可用性。</p> - -<p>由于文件系统是临时的，所以任何临时存储或服务都应该使用备份服务放置到其他地方。这可以通过使用不同提供商提供的市场服务或通过<a href="https://docs.run.pivotal.io/devguide/services/user-provided.html">用户自己提供的服务</a>来实现。</p> - -<h2 id="What_do_we_cover_below">What do we cover below?</h2> - -<p>This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.</p> - -<ul> - <li>Configuring the package.json file to run with the engines available on PWS.</li> - <li>Adding and installing the<a href="https://github.com/cloudfoundry-community/node-cfenv"> 'cfenv' node module</a> to make working with services easier.</li> - <li>Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.</li> - <li>Using the <a href="https://github.com/cloudfoundry/cli">cf CLI</a> tool to create a new mongoDB service instance and bind it to the local library application.</li> - <li>How to set environment variables for Node using the cf CLI.</li> - <li>How to look at logs, again using the cf CLI tool.</li> -</ul> - -<p>So let's get started. You have two options, you can go through the tutorial from the <a href="<https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website>">beginning</a> or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:</p> - -<pre class="brush: bash notranslate"><code>git clone https://github.com/mdn/express-locallibrary-tutorial</code></pre> - -<p>You'll then need to follow the preparation steps listed in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Getting_your_website_ready_to_publish">Getting your website ready to publish</a> section of <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a>, before then following the steps listed below.</p> - -<div class="note"> -<p><strong>Note</strong>: This work flow is based on the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Example_Installing_LocalLibrary_on_Heroku">Mozilla Heroku work flow in the main Express/Node tutorial series</a> for consistency, to help readers compare and contrast. </p> -</div> - -<h2 id="Modifying_the_LocalLibrary_for_PWS">Modifying the LocalLibrary for PWS</h2> - -<p id="How_does_PWS_work">Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.</p> - -<p>This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's <a href="http://docs.run.pivotal.io/buildpacks/node/">nodejs buildpack</a>. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see <a href="https://docs.run.pivotal.io">Getting Started on Pivotal Web Services</a> for a more comprehensive guide). Let's start making the changes so you'll need to deploy the <em>LocalLibrary</em> application to PWS.</p> - -<h3 id="Set_node_version">Set node version</h3> - -<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p> - -<pre class="brush: bash notranslate">node --version -# <em>will return version e.g. v6.10.3</em></pre> - -<p>Open <strong>package.json</strong> with a text editor, and add this information as an <strong>engines > node</strong> section as shown (using the version number retrieved above).</p> - -<pre class="brush: json notranslate">{ - "name": "express-locallibrary-tutorial", - "version": "0.0.0", -<strong> "engines": { - "node": "6.10.3" - },</strong> - "private": true, - ... -</pre> - -<h3 id="Database_configuration">Database configuration</h3> - -<p>So far in this tutorial we've used a single database that is hard coded into the <strong>app.js </strong>file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called <code>VCAP_SERVICES</code>. A typical <code>VCAP_SERVICES</code> variable looks like this:</p> - -<pre class="brush: json notranslate">{ - "VCAP_SERVICES": { - "mlab": [ - { - "credentials": { - "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname" - }, - "label": "mlab", - "name": "node-express-tutorial-mongodb", - "plan": "sandbox", - "provider": null, - "syslog_drain_url": null, - "tags": [ - "Cloud Databases", - "Developer Tools", - "Web-based", - "Data Store", - ], - "volume_mounts": [] - } - ] - } -} - -</pre> - -<p>Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called <a href="https://github.com/cloudfoundry-community/node-cfenv"><em>cfenv</em></a>.</p> - -<p>This will download the cfenv module and its dependencies, and modify the package.json file as required. Open <strong>app.js</strong> and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:</p> - -<pre class="brush: js notranslate">var expressValidator = require('express-validator');</pre> - -<p>If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:</p> - -<pre class="brush: js notranslate">var cfenv = require('cfenv');</pre> - -<ol> - <li> - <p>To install the package, go to your terminal and make sure you are in the directory where the <code>package.json</code> file for LocalLibrary is. From the command line, type:</p> - - <pre class="brush: bash notranslate">npm install cfenv</pre> - </li> - <li> - <p>Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains <code>app.use(helmet());</code></p> - - <pre class="brush: js notranslate">// Set up CF environment variables -var appEnv = cfenv.getAppEnv(); -</pre> - - <p>When this line executes, all the Cloud Foundry application environment information will become available to the application in the <code>appEnv</code> object.</p> - </li> - <li> - <p>Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:</p> - - <pre class="brush: js notranslate">var mongoDB = process.env.MONGODB_URI || dev_db_url;</pre> - </li> - <li> - <p>You will now modify the line with the following code <code>appEnv.getServiceURL('node-express-tutorial-mongodb')</code> to get the connection string from an environment variable that is being managed by the <code>cfenv</code> module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:</p> - - <pre class="brush: js notranslate">var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url; -</pre> - </li> - <li> - <p>Now run the site locally (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.</p> - </li> -</ol> - -<h2 id="Get_a_Pivotal_Web_Services_account">Get a Pivotal Web Services account</h2> - -<p>To start using Pivotal Web Services you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and have already installed the PWS cf CLI client).</p> - -<ul> - <li>Go to <a href="https://run.pivotal.io">https://run.pivotal.io</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li> - <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your email for a sign-up email.</li> - <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.</li> - <li>You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.</li> - <li>Go to <a href="https://login.run.pivotal.io">https://console.run.pivotal.io</a> and login in. You'll then be logged in and taken to the PWS dashboard: <a href="https://console.run.pivotal.io">https://console.run.pivotal.io</a>.</li> -</ul> - -<h2 id="Install_the_cf_CLI_client">Install the cf CLI client</h2> - -<p>The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the <a href="https://console.run.pivotal.io/tools">instructions on Pivotal Web Services</a> or downloading directly from <a href="https://github.com/cloudfoundry/cli">GIthub</a>. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:</p> - -<pre class="brush: bash notranslate">cf help -</pre> - -<p>We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.</p> - -<h2 id="Create_and_upload_the_website">Create and upload the website</h2> - -<p>To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:</p> - -<pre class="brush: bash notranslate">cf api api.run.pivotal.io</pre> - -<p>Next login using the following command (enter your email and password when prompted):</p> - -<pre class="brush: bash notranslate">cf login -Email: enter your email -Password: enter your password</pre> - -<p>We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used <em>mozilla-express-tutorial-xyzzy</em>. You should use something else.</p> - -<pre class="brush: bash notranslate">cf push some-unique-name -m 256MB</pre> - -<p>Note the <code>-m</code> flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL <code>https://some-unique-name.cfapps.io</code>. Open your browser and run the new website by going to that URL.</p> - -<div class="note"><strong>Note</strong>: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.</div> - -<h2 id="Setting_configuration_variables">Setting configuration variables</h2> - -<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages.</p> - -<ol> - <li> - <p>Do this by entering the following command:</p> - - <pre class="brush: bash notranslate">cf set-env some-unique-name NODE_ENV production -</pre> - </li> - <li> - <p>We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:</p> - - <pre class="brush: bash notranslate">cf create-service mlab sandbox node-express-tutorial-mongodb -cf bind-service some-unique-name node-express-tutorial-mongodb -</pre> - </li> - <li> - <p>You can inspect your configuration variables at any time using the <code>cf env some-unique-name</code> command — try this now:</p> - - <pre class="brush: bash notranslate">cf env some-unique-name -</pre> - </li> - <li> - <p>In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:</p> - - <pre class="brush: bash notranslate">cf restage some-unique-name -</pre> - </li> - <li> - <p>If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p> - </li> -</ol> - -<h2 id="Debugging">Debugging</h2> - -<p>The PWS cf client provides a few tools for debugging:</p> - -<pre class="brush: bash notranslate">>cf logs some-unique-name --recent # Show current logs ->cf logs some-unique-name # Show current logs and keep updating with any new results</pre> - -<h2 id="Summary">Summary</h2> - -<p>If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.</p> diff --git a/files/zh-cn/orphaned/mdn/community/conversations/index.html b/files/zh-cn/orphaned/mdn/community/conversations/index.html deleted file mode 100644 index 30d6d2d4a2..0000000000 --- a/files/zh-cn/orphaned/mdn/community/conversations/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: MDN 社区对话 -slug: orphaned/MDN/Community/Conversations -tags: - - 不完善的 - - 后期还需要改善 - - 社区相关 - - 经过一次润色的 -translation_of: MDN/Community/Conversations -original_slug: MDN/Community/Conversations ---- -<div>{{MDNSidebar}}</div> - -<p class="summary">MDN的“工作”在MDN网站开展，但“社区”也通过（异步）讨论以及（同步）在线聊天和会议开展。</p> - -<h2 id="异步讨论"><span class="short_text" id="result_box" lang="zh-CN"><span>异步讨论</span></span></h2> - -<p><span id="result_box" lang="zh-CN"><span>为了分享信息并进行持续的讨论，<a href="https://discourse.mozilla-community.org/c/mdn">MDN在Mozilla话语论坛中有自己的类别（“MDN”）</a>。</span> <span>将此类别用于与MDN相关的所有主题，包括文档内容的创建，翻译和维护;</span> <span>MDN平台开发;</span> <span>并进行规划，目标设定和进度跟踪。</span></span></p> - -<ul> - <li><span id="result_box" lang="zh-CN"><span>要加入Mozilla的话语，请参阅<a href="https://discourse.mozilla-community.org/t/signing-up-and-logging-in/16017">注册并登录</a>;</span> <span>如果您有Mozilla LDAP帐户，则可以使用该帐户，而不是“使用电子邮件登录”。</span></span></li> - <li><span class="short_text" id="result_box" lang="zh-CN"><span>要订阅MDN类别，请参阅<a href="https://discourse.mozilla-community.org/t/subscribing-to-categories-and-topics/16024">订阅类别和主题</a>。</span></span></li> - <li><span id="result_box" lang="zh-CN"><span>（可选）如果您希望主要通过电子邮件与话语进行交互，请参阅<a href="https://discourse.mozilla-community.org/t/mailman-mode/15279">为自己设置邮件列表体验</a>。</span> <span>您可以通过发送电子邮件至：<a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>，开始话语讨论。</span> <span>如果您通过电子邮件使用话语，您可以通过回复您收到的通知电子邮件来回复邮件。</span> <span>如果您想在回覆内插入意见，请在您的内联块之前和之后放置两个回车，以便话语解析正确。</span></span></li> -</ul> - -<h2 id="历史档案"><span class="short_text" id="result_box" lang="zh-CN"><span>历史档案</span></span></h2> - -<p><span id="result_box" lang="zh-CN"><span>在2017年6月之前，MDN相关的讨论发生在与Google群组关联并归档的邮件列表中。</span> <span>如果您想搜索这些过去的讨论，您可以查看与旧邮件列表相对应的Google网上论坛。</span> <span>（</span></span>是的，我们知道这些名字是重叠和混淆。历史的偶然性。对此我们感到很抱歉。<span lang="zh-CN"><span>）</span></span></p> - -<dl> - <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdc">mozilla.dev.mdc</a></dt> - <dd><span class="short_text" id="result_box" lang="zh-CN"><span>此列表用于讨论MDN上的文档内容。</span></span></dd> - <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.dev.mdn</a></dt> - <dd><span class="short_text" id="result_box" lang="zh-CN"><span>此列表涉及MDN底层Kuma平台的开发工作。</span></span></dd> - <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.mdn</a></dt> - <dd><span class="short_text" id="result_box" lang="zh-CN"><span>这个论坛是针对高层次的规划和优先级讨论，MDN网站和其他相关举措。</span></span></dd> -</dl> - - - -<h2 id="同步聊天">同步聊天</h2> - -<p>Mozilla实时的讨论平台是<a href="https://matrix.org">Matrix</a>，Mozilla自己拥有使用这个通讯协议的<a href="https://chat.mozilla.org/">服务器</a>。网页中即可加入讨论。</p> - -<p><a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web文档聊天室</a>是为讨论MDN内容的主要频道。我们探讨编写、内容编排等内容。我们也会进行“茶水间”讨论（摸鱼），这是我们的社群保持联系，或者仅仅用来消遣的方式。通常在北美和欧洲的工作日，这间聊天室最为活跃。</p> - -<p>你或许会想了解一下怎么使用<a href="https://wiki.mozilla.org/Matrix">Mozilla的Matrix</a>，然后呢，如果你真的很喜欢它的话，那么可以安个独立的Matrix应用，例如<a href="https://about.riot.im/">Riot.im</a>。</p> - -<h3 id="那么IRC呢？">那么IRC呢？</h3> - -<p>多年来，Mozilla用互联网中继聊天（IRC）来进行实时讨论。到了2020年初，Matrix已经把IRC淘汰了。你可能会在很多地方看到有人提到IRC的频道，包括MDN上。你可以帮忙更新MDN上你看到的IRC频道的链接，为指向对应Matrix聊天室的链接。如果你不确定这个话题对应的Matrix聊天室是哪间，那么可以来<a href="https://chat.mozilla.org/#/room/#general:mozilla.org">General</a>聊天室询问。不再活跃的项目和话题可能也不会有Matrix聊天室，如果是这样的话，把链接删掉即可。</p> - -<h2 id="参加我们的会议（和其他活动）">参加我们的会议（和其他活动）</h2> - -<p><br> - MDN团队会举行一些面向MDN社区的定期会议。查看 Mozilla维基上的<a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings</a> 页面获取关于日程、议程和笔记的细节，以及如何参加的信息。</p> - -<p>查看<a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com">MDN Events calendar</a>上的这些和其他会议、当地聚会和其他项目。在 <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings wiki page</a>上有定期会议</p> - -<p>如果你看到一个在Vidyo videoconferencing系统的“mdn”频道举行的会议，你可以在<a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">网上加入谈话</a>。</p> diff --git a/files/zh-cn/orphaned/mdn/community/doc_sprints/index.html b/files/zh-cn/orphaned/mdn/community/doc_sprints/index.html deleted file mode 100644 index 3587d14586..0000000000 --- a/files/zh-cn/orphaned/mdn/community/doc_sprints/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Doc sprints -slug: orphaned/MDN/Community/Doc_sprints -tags: - - NeedsUpdate -translation_of: MDN/Community/Doc_sprints -original_slug: MDN/Community/Doc_sprints ---- -<div>{{MDNSidebar}}</div> - -<p>{{ draft() }}</p> - -<div class="note"> -<p><strong>Note: </strong>MDN社区在2010 - 2013年期间经常举办文档迭代。 从2014年开始，这些事件的范围扩大到“<a href="https://blog.mozilla.org/community/2015/04/17/a-highly-productive-hack-on-mdn-weekend-in-berlin/">Hack on MDN</a>”事件，其中包括代码窃取以及文档项目。 下面的大部分建议同样适用于 "Hack" sprints和documentation sprints。</p> -</div> - -<p><span class="seoSummary">这是组织</span>documentation sprint<span class="seoSummary">的指南。 它包含来自组织</span>doc sprints<span class="seoSummary">的人的建议和提示，以帮助您更好的组织文档。 本指南还借鉴了<a href="http://write.flossmanuals.net/book-sprints/introduction/">FLOSS手册书籍</a>的书籍。</span></p> - -<h2 id="什么是_doc_sprint">什么是 doc sprint?</h2> - -<p>doc sprint 是一段时间，一群人像你一样可爱的人，合作撰写关于给定主题或相关主题的文档。</p> - -<h2 id="sprints_的分类">sprints 的分类</h2> - -<p>sprints可以是线上的，也可以是线下的，也可以线上线下一起进行。对于线上sprints而言，每个人都可以在不同的地区参与，只需要通过中间渠道进行沟通。对于线下sprints，参加者在sprints期间聚集在同一地区，以便他们可以面对面进行交流。线下sprints需要更多的后勤规划，确保会议地点，可以容纳所有参与者，并且在sprints期间需要提供食物与安置参与者。</p> - -<p>另一种分类sprints的方式是通过专题聚焦。例如sprint可能关注特定的主题，比如：Web开发，或翻译特定语言。</p> - -<h2 id="计划一次_sprint">计划一次 sprint</h2> - -<h3 id="设定目标">设定目标</h3> - -<p>明确这次 sprint的目标, 包括内容和社区效应。 这能够帮助你更好地计划低层次的细节。</p> - -<ul> - <li>你想要记录一个特定的主题区域吗?</li> - <li>你想要创建一种特定类型的文档或者资源吗? 比如说，教程，代码示例，或者特定语言的翻译。</li> - <li>你想要吸引更多人加入到MDN，做出贡献吗？</li> - <li>你想要增进社区成员的凝聚力吗?</li> -</ul> - -<h3 id="决定类型和范围">决定类型和范围</h3> - -<p>基于你的目标, 确定 sprint的类型 (线上的，也可以是线下的，或者是线上线下一起进行) 和范围 (这是参与者会关注的)。</p> - -<p>比如说，你想要吸引新的社区成员，你可以选择本地的线下sprint, 因为不需要长途旅行, 而且参加者还可以见面. 如果您想要专注于特定的主题领域，其中内容贡献者是地理上分离的，而且早就彼此认识，那么一个线上sprint就很合适。</p> - -<h3 id="选择日期和时间">选择日期和时间</h3> - -<p>对于需要长途交通的线下sprint， 我们已经发现了三天 (比如说两天周末和一天工作日) 就足够做到很多重要的工作。也不会占用大家日常生活的很多时间。对于公开，本地，线下的sprint，大部分人只能够付出一天的时间. 对于线上的sprint, 我们通常进行两天: 一个工作日外加周末的一天。 As an alternative example, in the past there has been mini-sprint for writing and translating docs, every Wednesday evening in the Mozilla Paris office; it was primarily in-person for locals, but also got remote participation from Montreal (where it was at lunch time).</p> - -<p>Attaching a sprint to the end of a conference that everyone attended worked well; trying to run a sprint <em>during</em> a conference that everyone attended did not work so well. Make sure that participants know about the sprint when they make their conference plans, so that they allow extra days for the sprint.</p> - -<p>Consider the time zones that virtual participants are in; be sure that you allow enough working time in each time zone, and have some overlap when multiple zones (such as Europe and Americas, or Americas and Asia) are awake. However, it's just reality that no one time is good for everyone everywhere.</p> - -<p>For virtual sprints, the dates can be set as little as 2-3 weeks in advance. For in-person sprints, you need to decide further in advance, in order to allow time for people to decide and make travel arrangements.</p> - -<h3 id="Promote_the_sprint">Promote the sprint</h3> - -<p>You can make the sprint open, and invite the world, but you should have a few key people that you know for sure will participate. Work with them when selecting dates, to ensure that they are available during the chosen dates. If the sprint is not open, then you need only extend invitations; make sure that each invitation is personal, explaining why that person has been specificallly invited.</p> - -<p>For public sprints, identify existing groups that have an interest in the topic, for example: local Web developer meetup groups for a local in-person sprint. Send an announcement through whatever channel is appropriate for that group. Be sure to provide a link to a web page with more details, and include a call-to-action for people to sign up for the sprint. <a href="https://www.eventbrite.com/" title="https://www.eventbrite.com/">Eventbrite </a>and <a href="http://lanyrd.com" title="http://lanyrd.com">Lanyrd</a> are two services that support sign-ups. For Mozilla developer events, we have found that about half the people who sign up actually show up.</p> - -<p>Use the social media channels that are appropriate to reach your target attendees. We have found that for Web developers, this means Twitter, followed by Google Plus, more than Facebook or LinkedIn. However, popular channels can vary geographically (such as Orkut in Brazil). Reach out to a few well-connected people who have a large following among your target audience, and ask them to re-share your posts.</p> - -<h3 id="Logistics_for_in-person_sprints">Logistics for in-person sprints</h3> - -<p>Logistics for in-person sprints are greater for longer sprints and those where sprinters travel to attend. A short or locals-only sprint need relatively little logistical support.</p> - -<h4 id="Budget_and_funding">Budget and funding</h4> - -<p>You need to figure out how much the event is going to cost, and where the money is going to come from.</p> - -<p>Costs to consider in your budget include:</p> - -<ul> - <li>Travel</li> - <li>Lodging</li> - <li>Food</li> - <li>Meeting space</li> -</ul> - -<p>Some of these costs can be self-funded by participants, meaning that they pay for their own costs. There are a variety of ways to save money, which are mentioned in the following sections.</p> - -<p>It may be possible to get sponsorship from Mozilla to fund some of the costs of your event. It helps to have a clear focus for your event, and a specific plan and budget. If there is a <a href="https://reps.mozilla.org/people/#/">Mozilla Rep</a> in your area, work with them to request budget and swag through the Reps program. Otherwise, you can submit a <a href="https://bugzilla.mozilla.org/form.dev-engagement-event">developer events request</a> in Bugzilla.</p> - -<dl> - <dt>Venue</dt> - <dd>There are lots of options for meeting space. If you are in a city with a Mozilla office, you can use the community space in that office. Elsewhere, options include meeting rooms in libraries, churches, coffee shops, or businesses where you have contacts. Many cities now have coworking spaces that rent their conference rooms for a reasonable fee.</dd> - <dt>Resources</dt> - <dd>Be sure that your venue has good chairs and tables, and reliable power and Internet access. Sitting all day on a bad chair is not just uncomfortable; it can lead to injury. Make sure that the number of sprinters and their computers and devices does not overwhelm the power supply and available Internet bandwidth. Be generous (but not dangerous) with extension cords, and if necessary, international plug adapters. A projector for shared viewing can be very helpful. Whiteboards and sticky notes are great for brainstorming and planning.</dd> - <dt>Travel</dt> - <dd>Travel is relevant only if the sprinters do not all live close to the sprint venue. The usual strategies for saving on travel apply, and are not specific to doc sprints.</dd> - <dt>Accommodations</dt> - <dd>Where sprinters stay should not be inconveniently far from the meeting venue. It can be cheaper (and possibly more fun) to split the cost of a vacation house or flat, rather than paying for individual hotel rooms. If you have a mix of visitors and (willing) locals, the visitors can stay in the homes of local community members.</dd> - <dt>Food</dt> - <dd>Sprinters need to eat! Make arrangements for food during the sprint, and inform sprinters if certain meals will not be arranged. If the group is staying in a home, you can save money by buying and cooking food rather than going out to eat. Even if food is self-funded, it can reduce hassle to pitch into a common fund for food, rather than splitting every restaurant bill. If your venue allows, have snacks (some healthy and some not) available between meals.</dd> - <dt>Fun</dt> - <dd>Make time for non-writing social activities. These can be informal, like going for a hike together, or more formal, like a tourist excursion. Going out for beer (at the end of the day, of course) is usually a winner. On the other hand, don't plan every hour of every day. Everybody needs some down time, especially introverts.</dd> -</dl> - -<h2 id="During_the_sprint">During the sprint</h2> - -<h3 id="Planning_the_work">Planning the work</h3> - -<p> </p> - -<h3 id="Tracking_tasks">Tracking tasks</h3> - -<p>Have a way to track what tasks need to be worked on, who is doing what, and what has been completed. For MDN doc sprints, we use a wiki page for advance planning, and an etherpad for tracking work during the sprint.</p> - -<p>Often, people want to help but don't know where to start, and deciding among many options takes too much mental effort. For any given participant, give them a couple of possible tasks ("you could do A, or B"); this simplifies their choice, without making them feel like they're being bossed around.</p> - -<h3 id="Collaborating">Collaborating</h3> - -<p>One of the benefits of in-person sprints is that people can work together in ways that they might not be able to when they're not in the same place, for example, by working out ideas together on a whiteboard or by brainstorming with sticky notes. Still, there are opportunities for collaboration and camaraderie in any type of sprint. Chatting via IRC is essential for virtual sprints, and still very helpful for in-person sprints (for example, for sharing links). For a greater sense of "virtual presence", consider using a video conferencing service, such as Google Hangout.</p> - -<p>As an organizer, look for common interests among the participants and for ways that they can work together.</p> - -<h3 id="Celebrating_accomplishments">Celebrating accomplishments</h3> - -<p>Be sure to take time to celebrate accomplishments at the end of the sprint. This gives participants a better feeling than when the sprint just ends without any summary. If possible, have people "demo" what they have done, even if it is just showing a new article page.</p> - -<p>Also, share the sprint accomplishments via a blog post, to celebrate publicly as well. This is important for any kind of sprint, but especially for virtual sprints, where the participants might not all be online at the official end of the sprint for a wrap-up session.</p> diff --git a/files/zh-cn/orphaned/mdn/community/index.html b/files/zh-cn/orphaned/mdn/community/index.html deleted file mode 100644 index 48cfb20d5b..0000000000 --- a/files/zh-cn/orphaned/mdn/community/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 加入 MDN 社区 -slug: orphaned/MDN/Community -tags: - - MDN Meta - - 引导 - - 社区 -translation_of: MDN/Community -original_slug: MDN/Community ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> - -<div class="summary"> -<p>MDN（Mozilla Developer Network）不仅仅是一个维基，而且是一个为使用开放 Web 技术的开发者而打造的社区。在这儿，开发者为了使 MDN 更加出色而共同努力。</p> -</div> - -<p>我们非常乐意您能给 MDN 贡献一份力量。当然我们更加希望您能加入 MDN 社区。只需简单的三步，即可加入我们：</p> - -<ol> - <li><a href="/zh-cn/docs/MDN/Contribute/Howto/Create_an_MDN_account">创建 MDN 账户</a></li> - <li><a href="/zh-cn/docs/MDN/Community/Conversations">参与交流</a></li> - <li><a href="/zh-cn/docs/MDN/Community/Whats_happening">关注正发生的一切</a></li> -</ol> - -<h2 id="社区是怎么运作的">社区是怎么运作的</h2> - -<p>下列文章详细地介绍了 MDN 社区。</p> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/zh-cn/docs/MDN/Community/Roles">社区参与者</a></dt> - <dd class="landingPageList">MDN 社区有许多负责任的参与者。</dd> - <dt class="landingPageList"><a href="/zh-cn/docs/MDN/Community/Doc_sprints">文档迭代</a></dt> - <dd class="landingPageList">这是一个有关组织文档迭代的指导。它包含组织过文档迭代的开发者的建议和技巧，这个指导的目的是为了帮助您更好地组织文档。</dd> - <dt class="landingPageList"><a href="/zh-cn/docs/MDN/Community/Whats_happening">关注正发生的一切</a></dt> - <dd class="landingPageList">MDN 是由 <a class="external" href="https://wiki.mozilla.org/MDN">Mozilla 开发者网络社区</a> 发起的。这里有一些有关我们正在做的事物信息。</dd> -</dl> - -<dl> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN 社区对话</a></dt> - <dd class="landingPageList">MDN 上的工作在 MDN 社区网站上进行。但社区也提供讨论，在线交流和线下会议等多种对话方式。</dd> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Working_in_community">社区工作</a></dt> - <dd class="landingPageList">了解如何作为 MDN 社区的一部分来为 MDN 文档作贡献是本文的主题。本文给出了一些技巧来帮助您和其他开发者、开发团队来进行更有效的交流。</dd> -</dl> -</div> -</div> diff --git a/files/zh-cn/orphaned/mdn/community/whats_happening/index.html b/files/zh-cn/orphaned/mdn/community/whats_happening/index.html deleted file mode 100644 index 8ef156347f..0000000000 --- a/files/zh-cn/orphaned/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: 跟随正在发生的事情 -slug: orphaned/MDN/Community/Whats_happening -tags: - - MDN Meta - - 初学者 - - 指南 - - 社区 -translation_of: MDN/Community/Whats_happening -original_slug: MDN/Community/Whats_happening ---- -<div>{{MDNSidebar}}</div> - -<p>MDN是由 <a href="https://wiki.mozilla.org/MDN">Mozilla开发者网络社区</a>带给你的。这里是关于我们正在做之事的共享信息的一些途径。</p> - -<h2 id="博客">博客</h2> - -<dl> - <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> - <dd>Web和Mozilla技术和功能的新闻深度报道。</dd> - <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Engaging Developers</a></dt> - <dd>促进社区参与Mozilla MDN活动和讨论。</dd> -</dl> - -<h2 id="信息流">信息流</h2> - -<ul> - <li><a href="http://twitter.com/MozDevNet">@MozDevNet</a>: 有趣的网页，教程，指南，提交要求，重大更新，以及其他有关Mozilla开发网络的消息。</li> - <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks">@MozHacks</a>: 关于新Web技术，很棒的HTML5应用程序和Firefox功能的推特。</li> - <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> -</ul> - -<h2 id="状态栏和仪表盘">状态栏和仪表盘</h2> - -<p>查看 <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Doc_status">文档状态</a> 页面，以了解整个MDN内容的动态。您将能够看到哪些文章需要书写或更新，哪些主题需要最大的帮助以及更多。</p> - -<h2 id="MDN会议">MDN会议</h2> - -<p>有一些跟踪和各种MDN相关的项目和进程共享进步定期会议，这些都描述了<a href="https://wiki.mozilla.org/MDN/Meetings">MDN会议的维基页面。</a></p> - -<p>想要了解最新动态，MDN社区会议是最佳渠道。MDN社区会议一般在美国太平洋时间周三上午10点举办（UTC-0800 十月——三月, UTC-0700 三月——十月）。会议每两周举办一次，会议采用 <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> 的方式举行。想要了解会议日程及往期会议记录，请查阅 <a href="https://wiki.mozilla.org/MDN/Meetings/Community" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN 社区会议</a> 维基页面。</p> - -<p><a class="external text" href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com" rel="nofollow">公共 MDN活动 </a> 日历包括MDN社区会议，文件分享，其他MDN相关活动。如果您在我们的Vidyo视频会议系统中遇到正在“mdn”频道中举办的会议，那么您可以 从<a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">从网站上加入会议对话</a>。</p> diff --git a/files/zh-cn/orphaned/mdn/community/working_in_community/index.html b/files/zh-cn/orphaned/mdn/community/working_in_community/index.html deleted file mode 100644 index a3a3d6190b..0000000000 --- a/files/zh-cn/orphaned/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 社区工作 -slug: orphaned/MDN/Community/Working_in_community -tags: - - 指南 - - 社区 -translation_of: MDN/Community/Working_in_community -original_slug: MDN/Community/在社区工作 ---- -<div>{{MDNSidebar}}</div> - -<p>在任何重大规模上为MDN文档作出贡献的主要部分是知道如何作为MDN社区的一部分工作。本文提供的技巧可帮助您充分利用与其他作者和开发团队的互动。</p> - -<h2 id="一般礼仪准则">一般礼仪准则</h2> - -<p>以下是在Mozilla社区工作时的一些通用指导原则。</p> - -<ul> - <li> 要有礼貌！即使意见不一致，我们都有相同的使命：网络的改善。 </li> - <li>问，不要求。当你礼貌地请求帮助而不是要求帮助时，人们更有可能会对他们有帮助和回应。尽管文档工作很重要，而且我们的开发团队知道它，但是如果不尊重它们，人类的本能往往会导致人们磨损和困难。 </li> - <li>平衡您对信息的需求和文档的紧迫性以及您讨论中的其他人必须致力于帮助您的时间。如果马上不是绝对必要的话，不要一直推动越来越多的细节，以至于让参与谈话的其他人变得疯狂。 </li> - <li>请记住，您的请求需要宝贵的时间从您联系的人，所以一定要充分利用他们的时间。 </li> - <li>体谅文化差异。 Mozilla是一个跨国和多元文化的团队，因此当与某个文化与自己或不同的人交谈时，务必在沟通时牢记这一点。 </li> - <li>开始一个新的谈话，而不是劫持现有的谈话。不要将你的问题注入无关的对话中，因为你需要与之交谈的人正在关注它。虽然对您很方便，但这可能会刺激您想要与之交谈的人，并导致不理想的结果。 </li> - <li>避免 {{interwiki("wikipedia", "bikeshedding")}}。不要让你的热情变得恼人的琐事。它使对话变得繁琐而不重要。</li> -</ul> - -<h2 id="委婉">委婉</h2> - -<p>与他人沟通时要时刻保持委婉和恭敬。</p> - -<h3 id="礼貌地指出错误">礼貌地指出错误</h3> - -<p>如果您在联系某人的目的是要求他们采取不同的做法，或者指出他们所犯的错误（特别是他们反复犯错的话），请以正面评论开始您的信息。这可以减轻打击，这可以说，它表明你试图帮助，而不是让你成为坏人。 例如，如果一个新的贡献者创建了大量没有标签的页面，并且您想要指出这个问题，那么您给他们的消息可能看起来像这样（您需要为每个个案更改的内容加下划线):</p> - -<blockquote> -<p>嗨，<u>MrBigglesworth</u>，我一直注意到你对<u>Wormhole API文档</u>的贡献，并且能够得到你的帮助真是太棒了！我特别喜欢<u>你通过可读性平衡细节水平的方式</u>。尽管如此，如果您<u>在页面中添加正确的标签</u>，您可以使这些文章更好，更有用。</p> - -<p><u>详细信息，请参阅MDN标记指南 (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) 。</u></p> -</blockquote> - -<h2 id="分享知识">分享知识</h2> - -<p>在您参与MDN项目时，了解发生了什么以及与我们社区的其他成员进行互动很有用。通过与我们社区中的其他人交谈，您可以获得并分享想法，状态更新等。我们还拥有工具和信息资源，可以帮助您了解由谁来完成的工作。</p> - -<h3 id="沟通渠道">沟通渠道</h3> - -<p>您可以通过多种方式与社区成员（开发人员或作者）进行交流，每种方式都有自己特定的礼仪规则。</p> - -<h4 id="Bugzilla">Bugzilla</h4> - -<p>在编写文档以涵盖由于Bugzilla中的错误而实施的更改时，您经常会与涉及这些错误的人员进行交互。请务必始终牢记Bugzilla礼仪指南！</p> - -<h4 id="电子邮件">电子邮件</h4> - -<p>有时候，如果你有他们的电子邮件地址，你和一个或多个其他人之间的私人电子邮件交换就是要走的路。</p> - -<div class="note"> -<p>注意：一般来说，如果有人在您要记录的技术文档上发布了他们的电子邮件地址，已经亲自给您发送了他们的电子邮件地址，或者通常有一个众所周知的电子邮件地址，则电子邮件是可接受的“第一次联系人”做法。如果你需要挖掘它，你可能应该首先尝试获得IRC或邮件列表的许可，除非你已经用尽了所有其他尝试取得联系的努力。</p> -</div> - -<h3 id="Content_status_tools">Content status tools</h3> - -<p>We have several useful tools that provide information about the status of documentation content.</p> - -<dl> - <dt><a href="/dashboards/revisions">Revision dashboard</a></dt> - <dd>The revision dashboard provides a fantastic tool to review changes made to MDN content. You can see recent history, choose a range of time to view, and filter based on things like locale, contributor's name, and topic. Once you're looking at a set of revisions, you can view the changes made in each revision, quickly open the page, see a full history, or even revert the changes (if you have those privileges).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Documentation status overview</a></dt> - <dd>Our <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">documentation status overview</a> page provides a list of all the areas of MDN that have been configured for status tracking, with information about how many pages therein need different types of work done. Click through to a particular topic area to see detailed lists of content that needs work, such as pages that have no tags, or are tagged with indicators that certain types of work need to be done. You can even see lists of pages that haven't been updated in a long time and may be out of date, as well as a list of bugs that have been flagged as impacting the documentation in that area.</dd> - <dt><a href="/en-US/docs/MDN/Plans">Documentation project plans</a></dt> - <dd>We have a number of writing projects that are in the planning stages, or are large and ongoing, for which we have written planning documents to help us keep track of what we need to get done.</dd> - <dt><a href="https://tree.taiga.io/project/viya-mdn-durable-team">MDN Taiga</a></dt> - <dd>The MDN staff writers use a tool called Taiga to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about the agile processes followed by the MDN team, see our <a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes">Process page on the Mozilla wiki</a>.</dd> -</dl> - -<h2 id="The_development_community">The development community</h2> - -<p>Possibly the most important relationships to develop and maintain, as a member of the MDN writing community, are those you develop and sustain with the developers. They create the software we're developing, but they're also the most useful source of information we have. It's crucial that we maintain good relations with developers—the more they like you, the more likely they are to answer your questions quickly, accurately, and thoroughly!</p> - -<p>In addition, you represent the MDN writing community. Please help ensure we keep our excellent working relationship with the dev team by making every interaction they have with the writing team be a good one.</p> - -<p>On a related note, a great way to find the right person to talk to is to look at the <a href="https://wiki.mozilla.org/Modules">module owners lists</a>.</p> - -<h2 id="The_writing_community">The writing community</h2> - -<p>The writing community is a large one. While the number of extremely frequent, or large-scale contributors is relatively small, there are many dozens or hundreds of people who contribute at least now and then. Fortunately, these are by and large awesome people with a genuine love of the Web, Mozilla, and/or documentation, and interacting with them is almost always pretty easy.</p> - -<p>See the article <a href="/en-US/docs/MDN/Community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Join the community</a> for more information about the MDN community.</p> - -<p>The most frequent place you'll directly interact with other writers is in the {{IRCLink("mdn")}} channel on IRC. This channel is specifically reserved for discussing documentation. For IRC-specific etiquette tips, see the Mozilla Support article "<a href="https://quality.mozilla.org/docs/misc/getting-started-with-irc/" title="https://quality.mozilla.org/docs/misc/getting-started-with-irc/">Getting Started with IRC</a>." You'll also have discussions with us on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>. In general, IRC tends to be used for quick, more in-person-like discussions, while the discussion forum is typically used for longer-duration conversation.</p> - -<p>By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually things go very smoothly.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contributing to MDN</a></li> - <li><a href="/en-US/docs/Project:MDN/Contributing/Join_the_community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">MDN community</a></li> - <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">How to send and reply to email</a></li> - <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">How to be a Mozillian</a></li> -</ul> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html deleted file mode 100644 index f9b6491da2..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 如何成为一名测试版试验员 -slug: orphaned/MDN/Contribute/Howto/Be_a_beta_tester -tags: - - MDN Meta -translation_of: MDN/Contribute/Howto/Be_a_beta_tester -original_slug: MDN/Contribute/Howto/成为一名测试版试验员 ---- -<div>{{MDNSidebar}}</div> - -<p>随着MDN Kuma平台的开发人员不断地对站点进行更改，我们为那些选择成为测试版测试人员提供对这些新特性的早期访问。与任何“beta”测试一样，在某些情况下，一些功能可能无法正常工作。</p> - -<h2 id="参与beta测试">参与beta测试</h2> - -<ol> - <li>登录MDN，在顶部导航栏点击你的用户名。<br> - <img alt="Shows location of the user's profile link in the top navigation" src="https://mdn.mozillademos.org/files/15099/profile_link.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 59px; width: 383px;"><br> - 随后跳转到你的资料页。</li> - <li>点击<strong>编辑</strong>按钮。<br> - <img alt="Shows location of the button to edit a user's profile (which may vary depending on window dimensions" src="https://mdn.mozillademos.org/files/15093/profile_edit_link.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 144px; width: 387px;"><br> - 随后在编辑模式下打开资料页。</li> - <li>勾选复选框成为 <strong>Beta 测试者</strong>。<br> - <img alt="Shows the location of the Beta Tester checkbox" src="https://mdn.mozillademos.org/files/15095/profile_beta_checkbox.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 139px; width: 305px;"></li> - <li>点击资料页底部的<strong>发布</strong>按钮<br> - <img alt="Shows the location of the Publish button on a user's profile page" src="https://mdn.mozillademos.org/files/15097/profile_publish_button.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 218px; width: 477px;"></li> -</ol> - -<h2 id="退出Beta测试">退出Beta测试</h2> - -<ol> - <li>登录MDN，在顶部导航栏点击你的用户名。随后会跳转到你的资料页。</li> - <li>点击<strong>编辑</strong>按钮。随后在编辑模式下打开资料页。</li> - <li>取消 <strong>Beta 测试者</strong>的复选框</li> - <li>点击<strong>发布</strong>按钮.</li> -</ol> - -<h2 id="对beta测试给予反馈">对beta测试给予反馈</h2> - -<p>你有两种方式可以对 beta 测试进行反馈:</p> - -<ul> - <li>在MDN讨论组里分享质量反馈. 在 <a href="https://discourse.mozilla-community.org/t/beta-redesign-feedback/16544">Beta feedback thread</a> 发布一个帖子. 或者,</li> - <li>按照下面的步骤提交 bug:</li> -</ul> - -<ol> - <li>如果你还没有账号，创建一个 <a href="https://bugzilla.mozilla.org/createaccount.cgi">Bugzilla</a> 账号.</li> - <li>打开 <a href="https://bugzilla.mozilla.org/form.mdn#h=detail%7Cbug">bug report in Bugzilla for MDN</a>.</li> - <li>在“摘要”字段中包含 “beta” 一词，帮助 MDN开发人员过滤和区分传入的 bug。.</li> - <li>尽你所能填写 bug 报告. 越详细越好.</li> - <li>点击<strong>提交</strong>按钮.</li> -</ol> - -<p> </p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 21664ab60e..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 如何创建 MDN 账号 -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - MDN - - 创建账户 - - 初学者指南 - - 新手上路 -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---- -<div>{{MDNSidebar}}</div> - -<p> <span class="seoSummary">要对MDN的内容进行任何更改，你需要一个<strong>MDN</strong>账户。别担心，如果你只是打算阅读或搜索MDN，就不需要一个账户！这个指南 将帮助你建立MDN账户。</span></p> - -<div class="pull-aside"> -<div class="moreinfo"> -<p><strong>为什么MDN需要我的电子邮件地址？</strong></p> - -<p>你的电子邮件地址用于帐户恢复；必要时，MDN管理员会通过它来联系您，讨论你的账户或在网站上的活动。</p> - -<p>此外，你可以选择订阅通知（例如，<a href="/zh-CN/docs/MDN/Contribute/Howto/Watch_a_page">当特定的页面被更改</a>）和消息（例如，如果你选择加入我们的beta测试团队，你可能会收到关于待测试新功能的邮件）。</p> - -<p>你的电子邮件地址永远不会显示在MDN，并只会按照我们的<a href="https://www.mozilla.org/privacy/websites/">隐私政策</a>使用。</p> - -<div class="note">如果你通过Github登录到MDN，并且你的Github账号使用了“noreply”的电子邮件地址，你将<em>不会</em>收到任何来自MDN的信息（包括你从页面订阅的通知）。</div> -</div> -</div> - -<ol> - <li>在每个MDN页面的顶部都有一个<strong>登录</strong>按钮。将鼠标指向它（如果你在移动设备上使用，轻触即可），以显示支持的登录到MDN的认证服务列表。</li> - <li>选择一项服务以登录。目前，我们只支持使用Github登录。值得注意的是如果你选择GitHub，你的MDN公开资料页上将显示一个链接，其指向你的GitHub个人资料页。</li> - <li>按照Github的提示，将你的GitHub帐户绑定到MDN。</li> - <li>从认证服务页面返回到MDN之后，MDN会提示你输入用户名和电子邮件地址。<em>你的用户名会公开显示，以便展示你做过的工作。请不要将你的电子邮件地址作为用户名</em>。</li> - <li>点击<strong>创建我的MDN个人资料</strong>。</li> - <li>如果你在步骤4中指定的电子邮件地址与认证服务所使用的不同，请检查<em>这个</em>邮箱，并点击我们发送的确认邮件中的链接。</li> -</ol> - -<p>一切就绪！你已经拥有一个MDN帐户，并可以立即编辑页面！</p> - -<p>你可以在任何MDN页面的顶部点击你的名字以查看账号的公开资料。从那里，你可以点击<strong>编辑</strong>按钮修改或更新你的个人资料。</p> - -<div class="note"> -<p>注：新用户名不能包含空格或“@”字符。请记住，你的用户名将会公开显示，以标识你做过的工作！</p> -</div> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 6befd2e313..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 如何进行技术审查 -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -tags: - - MDN Meta - - 复核 - - 如何做 - - 指南 - - 文档 -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: MDN/Contribute/Howto/Do_a_technical_review ---- -<div>{{MDNSidebar}}</div> - -<p class="summary">技术复核包括审查一篇文章的技术准确性和完整性，并在必要的时候予以纠正。 如果<span id="result_box" lang="zh-CN"><span>一篇文章</span></span>的作者需要其他人来对文章进行技术复核的话，就需要在编辑时勾选”技术复核“选项。<span id="result_box" lang="zh-CN"><span>通常情况下，作者会联系特定的工程师来执行技术审查，</span></span>但是任何具有此领域专业技能的人都可以完成技术复核。</p> - -<p><span id="result_box" lang="zh-CN"><span>本文介绍如何进行技术复核</span></span><span lang="zh-CN"><span>，从而帮助确保MDN的内容的正确性。</span></span></p> - -<h4 id="任务是什么？">任务是什么？</h4> - -<p> <span id="result_box" lang="zh-CN"><span>审查和纠正文章的技术准确性和完整性。</span></span></p> - -<h4 id="什么地方需要技术审核？">什么地方需要技术审核？</h4> - -<p> 在被标记为需要<a href="https://wiki.developer.mozilla.org/zh-CN/docs/needs-review/technical">技术审核</a>的特定文章中。</p> - -<h4 id="开始做任务前你需要了解什么？">开始做任务前你需要了解什么？</h4> - -<ul> - <li>在此篇文章技术领域的专业知识。如果你在阅读这篇文章的时候没有学到任何新知识，那么你就是这篇文章技术领域的专家。</li> - <li><span class="short_text" id="result_box" lang="zh-CN"><span>如何在MDN上编辑wiki文章</span></span></li> -</ul> - -<h4 id="完成任务的步骤是什么？">完成任务的步骤是什么？</h4> - -<ol> - <li>选取一篇需要复查的文章： - <ol> - <li>前往 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/needs-review/technical">technical reviews</a> 页面。这里列出了所有需要技术复核的文章。</li> - <li>选择一个你非常熟悉的领域的页面。</li> - <li>点击该页面。</li> - </ol> - </li> - <li>在阅读这篇文章的时候注意文章里的所有技术细节：这篇文章的内容正确吗？是否缺少了一些细节？如果你觉得这篇文章不适合你，那么请毫不犹豫地换一篇文章。</li> - <li>如果没有错误，你不需要重新编辑来把这篇文章标识为”已复核“，你只需要找到左边导航栏最下方的”快速复核“框。黄色背景的框里列出了所有等待复核的请求，像这样：<img alt="" src="https://mdn.mozillademos.org/files/13016/SidebarTechReviewRequested.png" style="height: 93px; width: 321px;"></li> - <li>去掉需要技术复核前面的勾，然后点保存。</li> - <li>如果你发现了需要被修正的错误，你可以在编辑器里修改这篇文章的审核请求状态。以下是操作步骤： - <ol> - <li>点击页面顶部的编辑按钮，进入 <a href="https://developer.mozilla.org/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide">MDN editor</a> 页面，来编辑该页面。</li> - <li>更正不正确的技术信息，还可以添加文章遗漏的任何重要信息。</li> - <li>在文章的底部输入修改注释。这个注释简要地描述你的修改工作，比如“完成技术审查。”如果你更正了某些信息，将它们写进你的注释，比如“技术审查以及修复参数的相关描述。”这将帮助其他贡献者和网站编辑人员知道你修改的部分以及原因。如果你认为文章中有些不必要被审查的部分，也可以在注释中提出来。</li> - <li>取消勾选“需要审查”下面的“技术”选项框了吗？它就在页面的审查注释区域。</li> - <li>点击发布按钮。</li> - </ol> - </li> -</ol> - -<p>祝贺你，你已经完成了你的第一篇技术复核，<span id="result_box" lang="zh-CN"><span>感谢您的帮助！</span></span></p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 63eb69ce96..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 如何进行编辑审核 -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -tags: - - 指导 - - 文档 - - 编辑审核 -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> - -<p class="summary"><strong>编辑审核</strong>的工作由修改文中排版错误，拼写、语法、用法等文本错误构成。并不是所有贡献者都是语言专家，但有了他们的共同努力，他们把那些需要编辑以及校对的文章转化为了极其有用的文章；这些都是在编辑审核的工作中完成的。</p> - -<p><span class="seoSummary">这篇文章描述了如何进行编辑审核，从而帮助实现 MDN 的内容精确。</span></p> - -<dl> - <dt>任务是什么？</dt> - <dd>编辑并审核那些被标记为需要编辑审核的文章。</dd> - <dt>应该在何处处理它？</dt> - <dd>在特定的文章中会有标记有需要编辑审核的地方。</dd> - <dt>开始做任务前你需要了解什么？</dt> - <dd>你需要有好的中文语法和词汇技能。文章复核是要确保语法、用词都是正确的并且有意义，同时遵循 <a href="/zh-CN/docs/MDN/Contribute/Content/Style_guide">MDN 样式指南</a>。</dd> - <dt>完成任务的步骤是什么？</dt> - <dd> - <ol> - <li>选择一篇文章来审核： - <ol> - <li>访问<a href="/zh-CN/docs/needs-review/editorial">需要复核的文章列表</a>。它陈列了所有请求编辑审核的页面。</li> - <li>点击文章链接进入页面。<br> - <strong>注意：</strong>这个列表是自动生成的，但更新并不频繁，所以列表中的一些文章是不再需要编辑审核的。如果你选择的文章<em>没有</em>显示“这篇文章需要复核”，跳过这一篇文章，再选择其他的文章。</li> - </ol> - </li> - <li id="core-steps">仔细阅读文章，特别注意其中可能出现的排版、错字、语法或者词语使用错误。如果你觉得这篇文章不适合你，随时可以换一篇其它文章。</li> - <li>如果文章中没有任何错误，你不需要进入编辑页面再把它标记为“已审核”。在页面的左侧边栏处可以找到“快速复核”对话框：<br> - <img alt="文法复核边栏屏幕截图" src="https://mdn.mozillademos.org/files/13164/editorial%20review%5Bzh-CN%5D.JPG" style="height: 99px; width: 284px;"></li> - <li>取消 <strong>文法</strong> 的勾选之后点击 <strong>保存</strong> 。</li> - <li>如果你发现了需要改正的错误： - <ol> - <li>点击右上角蓝色的 <code><strong>编辑</strong></code> 按钮；它将带你进入 <a href="/zh-CN/docs/Project:MDN/Contributing/Editor_guide">MDN 编辑器</a>。</li> - <li>更正所有你看到的的排版、错字、语法或者词语使用错误。你并不需要将所有问题都一次性改好，不过当完成整篇文章的时候你还觉得不确定是否完美，一定要保留文法复核的请求。</li> - <li>在文本底部输入一段<strong>修订注释</strong>；比如 <em>“文法符合：更改了排版，语法和用词错误。” </em>这有助于其他编辑者和网站管理员知道你更改了什么以及为什么做出更改。</li> - <li>在 <strong>需要复核吗？</strong> 下面取消 <strong>文法</strong> 的选择。这一项位于页面的 <strong>版本备注</strong> 当中。<br> - <img alt="文法复核编辑模式屏幕截图" src="https://mdn.mozillademos.org/files/13166/editorial%20review%20edit-mode%5Bzh-CN%5D.JPG" style="height: 246px; width: 259px;"></li> - <li>点击 <strong>发布</strong> 按钮。</li> - </ol> - </li> - </ol> - - <div class="note"> - <p>你所做出的更改在保存后不一定立即可见，页面保存和处理过程可能出现一些延迟。</p> - </div> - </dd> -</dl> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 8e83efb545..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 如何为页面编写概要 -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - 指南 -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -<div>{{MDNSidebar}}</div> - -<p>您可以在MDN的每一个页面上定义概要，它可以在很多方面起到作用，如包含在搜索引擎的搜索结果中，或者在其他MDN页面如热门话题页或者工具提示页。它应该概括的描述该页面的所有内容，并且当在其他页面显示时，不包含页面内容的无关部分。</p> - -<div class="blockIndicator warning"> -<p><strong>一个概要可以被明确的定在在一个页面中。如果概要没有被明确的定义，通常会使用该页面内容的第一句话作为概要，而它往往不是该页面最精确的描述。</strong></p> -</div> - -<table class="full-width-table"> - <tbody> - <tr> - <td><strong>任务是什么？</strong></td> - <td>标记应被用作其在其他情况下摘要页面中的文本;这项任务可能包括在需要写相应的文本。</td> - </tr> - <tr> - <td><strong>哪些地方需要它？</strong></td> - <td>在缺乏一个总结或总结不太好的页面。</td> - </tr> - <tr> - <td><strong>完成任务需要什么？</strong></td> - <td>能够使用MDN编辑器的能力;良好的英语写作能力;对网页的主题足够熟悉，以便于能写一个很好的总结。</td> - </tr> - <tr> - <td><strong>怎样完成任务？</strong></td> - <td> - <ol> - <li>选择一个页面来设置总结: - <ol> - <li>在<a href="/zh-CN/docs/MDN/Doc_status">MDN documentation status</a> 页面上的section中, 点击你所了解的话题。<img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png"></li> - <li>在主题的文档状态页面，单击汇总表中的页头。这需要你在该主题区段的所有网页的索引;它示出了在左侧列中的页面的链接，以及在右栏中的标签和摘要。<img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png"></li> - <li>挑选缺少一个总结页面，或者说有一个较差的总结的页面。<img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png"></li> - </ol> - </li> - </ol> - - <div class="blockIndicator warning"> - <p>点击链接进入该页面。</p> - </div> - - <ol> - <li>单击编辑在MDN编辑器中打开该页面。</li> - <li>找一两句话，作为一个总结。如果需要，可以编辑现有的内容来创建或修改的句子来做一个很好的总结。</li> - <li>选择要使用的摘要文本。</li> - <li>在样式插件的编辑器工具栏，选择搜索引擎优化摘要。 (In the page source, this creates a {{HTMLElement("span")}} element with <code>class="seoSummary"</code> around the selected text.)<img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png"></li> - <li>保存你的更改，并附上类似“设置页面总结”的修改意见。修改意见是可选的，但我们鼓励你添加一个。这样便于其他人了解变更的情况。</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p>完成这样的一份任务后，你就是MDN的一员。</p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index 9bd95d01ad..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 如何给JavaScript相关页面添加标签 -slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages -original_slug: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -<div>{{MDNSidebar}}</div><p class="summary"><strong>标记工作包括给页面添加元信息，使得这些页面的相关内容能被搜索工具等正确的分拣。</strong></p> - -<dl> - <dt>哪里需要做这件事<strong>?</strong></dt> - <dd>那些特定的<a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">没有标签的JavaScript相关的页面</a></dd> - <dt><strong>开始标记任务前你需要知道些什么？</strong></dt> - <dd>一些基本的JavaScript编程知识，比如javascript中的方法和属性都是些什么。</dd> - <dt><strong>你的工作有以下几个步骤</strong></dt> - <dd> - <ol> - <li>选择下面列举的某篇文章。</li> - <li>点击该文章所对应的链接，载入页面。</li> - <li>当页面载入完毕时，点击顶部附近的<strong>EDIT按钮，</strong>就会进入MDN编辑模式。</li> - <li>最后就是添加Javascript相关的标签了，我们提供了如下可选的标签。 - <table class="standard-table"> - <thead> - <tr> - <th scope="col">标签名</th> - <th scope="col">适用于含有哪些内容的页面</th> - </tr> - </thead> - <tbody> - <tr> - <td>Method</td> - <td>方法</td> - </tr> - <tr> - <td>Property</td> - <td>属性</td> - </tr> - <tr> - <td><font face="Consolas, Liberation Mono, Courier, monospace">Prototype</font></td> - <td>原型</td> - </tr> - <tr> - <td>Object type name</td> - <td>所述对象的名字，例如String.fromCharCode就应该有String标签</td> - </tr> - <tr> - <td><code>ECMAScript6 </code>and <code>Experimental</code></td> - <td>在新版ECMAScript标准中增加的特性</td> - </tr> - <tr> - <td><code>Deprecated</code></td> - <td>不赞成使用的特性（那些不鼓励使用但仍然被浏览器支持的特性）</td> - </tr> - <tr> - <td><code>Obsolete</code></td> - <td>被废弃的特性（那些不再被浏览器支持的特性）</td> - </tr> - <tr> - <td>others</td> - <td>查看 <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">MDN 标签规则</a> 中其他可选标签</td> - </tr> - </tbody> - </table> - </li> - <li>添加备注信息并保存你的修改。</li> - <li>你做到了！</li> - </ol> - </dd> -</dl> - -<p> </p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index c1adfb4eb9..0000000000 --- a/files/zh-cn/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: 如何写文章帮助人们了解 Web -slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - MDN元数据 - - 学习社区 - - 指导 - - 贡献指南 -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -original_slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -<div>{{MDNSidebar}}</div> - -<p>MDN 的<strong><a href="/zh-CN/docs/Learn">学习区</a></strong>是我们给新手开发者介绍 Web 概念的大本营。因为它的内容主要面对初学者，这是你分享知识，帮助新手逐渐了解 Web 的绝佳地点。确保新手开发者能够跟上这里的内容是很重要的，所以我们格外重视学习区。</p> - -<p><span class="seoSummary">这篇文章解释了如何给<a href="/zh-CN/docs/Learn">学习区</a>写文章。</span></p> - -<h2 id="如何写学习社区的文章">如何写学习社区的文章</h2> - -<p>要开始贡献你的知识，只需点击绿色大按钮，然后按照下面的五个步骤。如果你想找点子，请看一下我们的团队<a href="https://trello.com/b/LDggrYSV"> Trello </a>！</p> - -<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">写一篇新的学习文章</a> - -<div></div> -</div> - -<p>这篇文章可能不会在正确的地方出现，但至少是在MDN上。如果你需要找人谈谈把它搬到正确的地方，请<a href="/en-US/docs/Learn#Contact_us">联系我们</a>。</p> - -<h3 id="第一步：写两行">第一步：写两行</h3> - -<p>你文章的第一句话需要总结一下你将要涉及的主题，第二句话应该更详细地介绍你要放在文章中的内容（项目）。例如：</p> - -<div class="summary"> -<p> {{glossary("HTML")}} 文件包含的结构和内容, {{Glossary("CSS")}}以及其他主要的Web技术，使内容看起来像你想要的那样。在本文中，我们将介绍这项技术是如何工作的，以及如何编写你自己的基本示例。</p> -</div> - -<p>注意示例如何简要说明CSS是用于样式化页面的核心Web技术。 这足以使读者很好地了解本文所涵盖的内容。</p> - -<p>因为学习区域的文章主要是针对初学者的，所以每篇文章都应该涵盖一个简单的主题，以免给读者带来太多的新信息。如果你不能在一句话中总结这篇文章，那么你可能在一篇文章中做得太多了!</p> - -<h3 id="第二步：添加一个顶部框">第二步：添加一个顶部框</h3> - -<p>然后添加一个顶框，以帮助读者了解他们在学习过程中的位置。 这是“<a href="/en-US/docs/Learn/Understanding_URLs">了解URL及其结构</a> ”顶部框的示例。 您可以在编写自己的文章时将其用作模型。</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">必要条件:</th> - <td>您首先必须清楚Internet的工作方式，Web服务器是什么，与Web链接背后的所有概念。</td> - </tr> - <tr> - <th scope="row">目标:</th> - <td>您将了解什么是URL以及它如何在Web上工作</td> - </tr> - </tbody> -</table> - -<dl> - <dt>必要条件</dt> - <dd>读者首先必须知道什么东西才能读懂你的一篇文章?在有可能的状况下，让每一个前提条件链接到另一篇涵盖概念的学习领域的一篇文章(除了您写的是是一篇完全不需要首先先验知识的无比基础的文章)。</dd> - <dt>目标</dt> - <dd>这一章节粗略说明了您的读者在阅读学习这篇文章的过程中会学到（并学会）什么。这与一行程序有点不同;一行代码总结了文章的主题，而目标部分专门列出了读者在阅读文章过程中所希望完成的全部内容。</dd> -</dl> - -<div class="note"> -<p>注意:要创建此表，您可以复制并粘贴上面的示例表，或者使用MDN的编辑器 <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Tables">台式工具</a>。如果选择使用table工具，则需要在默认的standard-table类之外特别添加learn-box CSS类。为此，当您创建或编辑表的属性时，请转到“Advanced”面板并将样式表类字段设置为“standard-table learn-box”。</p> -</div> - -<h3 id="第三步写一个完整的描述">第三步:写一个完整的描述</h3> - -<p>接下来，写一个更长的描述，提供更全面的文章概述，突出最重要的概念。不要忘记解释为什么读者要花时间来学习这个主题并阅读你的文章！</p> - -<h3 id="第四步：更深一步">第四步：更深一步</h3> - -<div>当你完成了所有这些，你终于可以深入到主题。你可以根据自己的喜好来组织文章的这一部分(尽管您能够随时咨询我们的 <a href="/en-US/docs/MDN/Contribute/Style_guide">设计指南</a>)。这是你闪耀的机会!详细解释你要写的主题。提供指向完整参考文档的链接，详细解释该技术的工作原理，提供语法和用法细节，等等。由你决定 - -<div></div> -</div> - -<ul> - <li>专注于一个主题。如果你觉得你需要涵盖其他主题，这意味着要么你错过了一篇必备文章，要么你需要把你的文章分解成多个主题</li> - <li>使用简单的英语。尽可能避免使用技术术语，或者至少定义它们并在适用的情况下链接到它们的<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">术语表条目。</a></li> - <li>包括直接的例子，使理论概念更容易掌握。许多人以身作则学得最好。与写学术论文相比，我们希望初学者能容易地跟上文章的节奏</li> - <li>视觉辅助工具通常可以使内容更容易消化，并携带额外的信息，所以请随意使用图像、图表、视频和表格。如果您正在使用包含文本的图表，我们建议您使用{{Glossary("SVG")}}，这样我们的翻译团队就可以本地化文本。</li> -</ul> - -<p>看一看我们的函数的前几节<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">可重用代码块文章</a> ，有一些很好的描述部分。</p> - -<h3 id="第五步提供“主动学习”材料">第五步:提供“主动学习”材料</h3> - -<p>为了阐明本文并帮助读者更好地理解他们正在学习的内容，请确保提供练习、教程和需要完成的任务。通过让他们积极地、实际地使用和试验你文章中解释的概念，你可以帮助他们将信息“锁定”在大脑中。</p> - -<p>您可以选择在页面中直接包含这些示例作为 <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">实时实例</a>,或者<a href="/en-US/docs/MDN/Contribute/Editor/Links">直接链接到它们。</a> （如果它们不能作为实时实例。） 如果你有兴趣帮助创造这些有价值的东西 ，请参阅<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">《创建一个交互式的练习来帮助学习网络》</a></p> - -<p>如果您不能提供到现有活动学习材料的链接(您不知道或者没有时间创建它们)，那么您应该在文章中添加标记{{tag ("NeedsActiveLearning")}}。这样，其他贡献者就可以找到需要积极学习材料的文章，并可能帮助你找到它们。</p> - -<p dir="rtl">看看<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">《主动学习:选择不同的元素》</a>进行现场互动学习练习或者<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">《主动学习: 玩转范围》</a>或者另一种不同风格的练习，要求它们在本地下载模板并按照提供的步骤更改</p> - -<p dir="rtl"></p> - -<p dir="rtl"> </p> - -<h3 id="第六步：查看文章，并放入学习区域导航菜单">第六步：查看文章，并放入学习区域导航菜单</h3> - -<p>在你写完你的文章后，让我们知道，这样我们可以看一看，做一个回顾，并提出改进建议 。再次看看我们的 <a href="/en-US/docs/Learn#Contact_us">联系方式</a> 板块以寻找最好的联系方式。</p> - -<p>完成文章的另一部分是把它放在学习区主导航菜单中。这个菜单是 <a href="/en-US/docs/Template:LearnSidebar">LearnSidebar 宏</a>生成的。 你需要特殊的权限来编辑，所以，再一次，让我们团队中的一个人把它添加进去。</p> - -<p>您至少应该将其添加到您的页面中，这是通过在页面顶部的段落中添加宏调用\{{LearnSidebar}}来完成的。</p> - -<ul> -</ul> - -<h2 id="推荐文章">推荐文章</h2> - -<p>您想做出贡献，但是您不知道该写什么?</p> - -<p>学习社区维护了一个要写文章的<a href="https://trello.com/b/LDggrYSV">Trello看板</a>。随意挑选一个，然后开始去写吧！</p> diff --git a/files/zh-cn/orphaned/mdn/editor/basics/index.html b/files/zh-cn/orphaned/mdn/editor/basics/index.html deleted file mode 100644 index df07a8a2fc..0000000000 --- a/files/zh-cn/orphaned/mdn/editor/basics/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 编辑器 UI 元素 -slug: orphaned/MDN/Editor/Basics -tags: - - 指南 - - 新手 - - 编辑器 -translation_of: MDN/Editor/Basics -original_slug: MDN/Editor/Basics ---- -<p><span class="seoSummary">MDN内置 WYSIWYG（所见即所得）编辑器，目的就是让编辑工作变得更加轻松。你可以轻松地在网站各处创建、编辑、修改文章或其他页面。</span> 编辑器界面如下所示，包含八个关键区域。本指南将提供每个区域的介绍，以便您了解如何使用整个编辑环境。</p> - -<div class="note"> -<p>我们不断努力改进MDN，所以有时候本指南或下面的屏幕截图可能会稍微过时。不过，我们会定期更新此文档，以避免其无法使用。</p> -</div> - -<p><img alt="Screenshot of the editor UI (August 2017) with each section labeled" src="https://mdn.mozillademos.org/files/15261/edit-page-with-labels.png" style="border-style: solid; border-width: 2px; height: 723px; width: 808px;"></p> - -<p>上图所示的编辑器各个UI区域已罗列在下表中，点击下面的链接来了解每个部分。</p> - -<ul> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Page_info">页面信息（上图中的 Page info ）</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Page_controls">页面控制（Page controls）</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Toolbar">工具栏（Toolbar）</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Edit_box">编辑框（Edit box）</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Tags">标签（Tags）</a></li> - <li><a href="#修订意见">修订意见（Revision comment）</a></li> - <li><a href="#复核请求">复核请求（Review requests）</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Attachments">附件（Attachments）</a></li> -</ul> - -<h2 id="修订注释">修订注释</h2> - -<p>我们强烈建议你每次编辑完成后要附上对修改的注释（修订注释）。这些注释将被保存到页面的修订历史中，就像这个<a href="/zh-CN/dashboards/revisions" title="/zh-CN/dashboards/revisions">修订看板</a>。这将有助于向复核你修改的人提供解释说明。想要添加修订意见也很简单，只要在<strong>发布</strong>之前，在修订意见框中填入注释即可。</p> - -<p>这么做的好处：</p> - -<ul> - <li>如果你进行修改的原因不明显，你的注释可以向别人解释你的想法。</li> - <li>如果你的修改在技术上很复杂，注释可以向编辑者解释它背后的逻辑。甚至可以在注释中包含一个bug追踪号，以便向编辑者提供更多参考信息。</li> - <li>如果你的编辑涉及删除大量的内容，你的注释可以证明删除的合理性（例如，“我把这个内容移到第X条”）。</li> -</ul> - -<h2 id="复核请求">复核请求</h2> - -<p>MDN社区使用<strong>复核</strong>来追踪和提高MDN内容的质量。通过在文章页面上设置特定标志来表示这篇文章需要审查复核。你可以在 <a href="/zh-CN/docs/MDN/Contribute/Howto" title="/zh-CN/docs/Project:MDN/Contributing/How_to_help">MDN 使用指南</a>中了解更多关于<a href="/zh-CN/docs/MDN/Contribute/Howto/Do_a_technical_review" title="/zh-CN/docs/Project:MDN/Contributing/How_to_help#Content_reviews">技术复核</a>和<a href="/zh-CN/docs/MDN/Contribute/Howto/Do_an_editorial_review">文法复核</a>的知识。</p> - -<p>想要申请对你所做的文章进行复核，只需勾选对应复核类型前面的复选框即可。任何对技术方面的修改，都应申请技术复核，当然，如果你申请文法复核，想找个人来检查你的写作和样式，那也是极好的。</p> - -<p>当申请复核后，文章将会被添加到<a href="/zh-CN/docs/needs-review/technical">需要技术复核</a>或<a href="/zh-CN/docs/needs-review/editorial">需要文法复核</a>列表，但这并不能保证会立马有人来复核你的文章。对于技术复核，最好直接联系相关技术领域的<a href="/zh-CN/docs/MDN/Community/Roles/Subject-matter_experts">学科专家</a>。对于编辑评论，您可以在 <a href="https://discourse.mozilla.org/c/mdn">MDN 论坛</a>中发帖以请求其他人来复核你的更改。</p> - -<p> </p> - -<p>在勾选申请复核之后，请务必点击一下<strong>发布</strong>按钮，这样才能提交复核请求。</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li><a href="https://docs.ckeditor.com/">CKEditor User's Guide</a></li> -</ul> - -<h6 id="EditorGuideQuicklinks">{{EditorGuideQuicklinks}}<span id="cke_bm_73C" class="hidden"> </span></h6> diff --git a/files/zh-cn/orphaned/mdn/editor/basics/page_controls/index.html b/files/zh-cn/orphaned/mdn/editor/basics/page_controls/index.html deleted file mode 100644 index a810ef41cd..0000000000 --- a/files/zh-cn/orphaned/mdn/editor/basics/page_controls/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: MDN 编辑器页面控件 -slug: orphaned/MDN/Editor/Basics/Page_controls -tags: - - 指南 - - 编辑器 -translation_of: MDN/Editor/Basics/Page_controls -original_slug: MDN/Editor/Basics/Page_controls ---- -<div>{{MDNSidebar}}</div> - -<p>页面控件由对整个页面起作用的按钮组成，为了减少多余的滚动，页面控件在编辑器的顶部和底部都可见。一共有四个页面控制按钮：</p> - -<div class="note"> -<p>如果你编写的页面符合 MDN 的要求，而编辑器却不能保存成功，你可以<a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">电子邮件联系开发团队</a>寻求帮助。</p> -</div> - -<dl> - <dt>发布并继续编辑</dt> - <dd>点击这个按钮，会在不关闭编辑器的前提下保存并发布页面。这样你就可以定期保存编辑工作，在页面修订历史中创建存档，这些存档说不定以后会用到。在创建新页面时这个按钮是不可用。查看<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor/Basics#修订注释">修订注释框</a>以了解如何在保存文章时添加修订注释。</dd> - <dt>发布</dt> - <dd>点击该按钮，将保存并发布你的文章，同时关闭编辑器，浏览器跳转到标准模式下的页面。查看<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor/Basics#修订注释">修订注释框</a>以了解如何在保存文章时添加修订注释。</dd> - <dt>预览</dt> - <dd>点击这个按钮将打开新的页面或窗口，以发布的样式展示编辑器中的内容，其中的<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Macros">宏指令</a>和<a href="https://developer.mozilla.org/en-US/docs/MDN/Kuma/Introduction_to_KumaScript#Template_Syntax">模板</a>都如实展示。值得注意的是，此时你的文章并没有被保存。这个按钮的作用，就是在文章发布前检查实际页面效果的，如果出现脚本错误，请参阅<a href="/en-US/docs/MDN/Contribute/Troubleshooting#Scripting_error_while_previewing_a_page">预览页面时排除脚本错误</a>。</dd> - <dd> - <div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> Currently some macros and templates don't execute properly in Preview-mode, leaving the Preview page missing some of its content (such as sidebars), and thus with somewhat distorted page layout; i.e. not totally <abbr title="What You See Is What You Get">WYSIWYG</abbr>. Further, if <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#scayt"><abbr title="Spell-Check As You Type">SCAYT</abbr> is enabled</a> (and possibly if the page contains certain valid macros or templates), Preview mode may still give a scripting error.</p> - </div> - </dd> - <dt><br> - <a id="DiscardChanges" name="DiscardChanges">放弃</a></dt> - <dd>这个按钮的功能就是取消编辑，放弃所有未曾保存的更改。页面将会跳转回上个页面。</dd> - <dd> - <div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> Occasionally <strong>Discard</strong> can malfunction and start acting more like a partial "discard," undoing many of your changes without exiting the editor. If this happens to you, you should save, exit, and re-enter the editor.</p> - </div> - </dd> -</dl> diff --git a/files/zh-cn/orphaned/mdn/editor/basics/page_info/index.html b/files/zh-cn/orphaned/mdn/editor/basics/page_info/index.html deleted file mode 100644 index ee5a15811e..0000000000 --- a/files/zh-cn/orphaned/mdn/editor/basics/page_info/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 编辑器 UI 的页面信息区域 -slug: orphaned/MDN/Editor/Basics/Page_info -tags: - - 指南 - - 新手 - - 编辑器 -translation_of: MDN/Editor/Basics/Page_info -original_slug: MDN/Editor/Basics/Page_info ---- -<div>{{MDNSidebar}}</div> - -<p>页面信息区域包含了本页面的信息，但也可以扩展开来以提供额外的页面控件。</p> - -<h2 id="现有页面">现有页面</h2> - -<p>默认情况下，编辑现有页面时，页面信息区域会显示页面标题。</p> - -<p>你可以点击<strong>编辑标题和属性</strong>按钮来打开更多页面控件。如下图：</p> - -<p><img alt="Page info fields for an existing article" src="https://mdn.mozillademos.org/files/15263/Expanded-page-info.png" style="border-style: solid; border-width: 2px; height: 190px; width: 751px;"></p> - -<p>这里可以对下列内容进行设置：</p> - -<dl> - <dt>标题</dt> - <dd>标题会显示在浏览器的标题栏（或标签栏）、面包屑导航栏中，以及文章的顶部。但它不会出现在页面的URL中。</dd> - <dt>目录</dt> - <dd>指定文章中次级标题的级别深度，次级标题会自动生成目录展示在页面上。默认情况下，这里填的是从 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2" title="Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."><code><h2></code></a> 到 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4" title="Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."><h4></a></code> ，也就是有三级深度。当然，你也可以根据需要自由选择，比如，“没有目录”（不显示目录，如登陆页），或者“所有级别”。</dd> - <dt>最大渲染时长</dt> - <dd>确定页面自动刷新的频率。在绝大多数情况下，设置为零。</dd> - <dt>查找</dt> - <dd>对于已本地化的页面，这个字段可以帮助重新关联变成“孤儿”的页面（脱离英文原版的页面）。对于英语页面来讲，这个字段用处不大，因为，英语是 MDN 的官方语言。</dd> -</dl> - -<h2 id="新页面">新页面</h2> - -<p>如果你拥有<a href="/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permission">创建页面权限</a>，你就可以创建新的页面了。查看<a href="/en-US/docs//MDN/Contribute/Howto/Create_and_edit_pages#Creating_a_new_page">如何创建和编辑页面</a>你可以了解到更多这方面的知识。对于创建新页面，页面信息区域看起来如下图：</p> - -<p><img alt="Page info fields for a new page" src="https://mdn.mozillademos.org/files/15265/New-page-info.png" style="border-style: solid; border-width: 2px; height: 214px; width: 739px;"></p> - -<p>你同样可以设置<strong>标题</strong>和<strong>目录</strong>，还可以设置页面的<strong>别名</strong>，别名用于页面URL地址的最后一个部分。以只读状态显示的<strong>父地址</strong>是页面URL中网站根节点之后的部分。当你在标题输入框中输入文字的时候，别名输入框会自动生成对应的内容，其中会用下划线替代标题中的空格。</p> - -<div class="note"> -<p>值得注意的是，我们推荐使用更短的别名和描述更清晰的标题。举例来说，一个关于编辑器页面控件的页面，应该取一个例如：“MDN 编辑器页面控件”的标题，而它的 URL 应该写成“<code>MDN/Contribute/Editor/Basics/Page_controls</code>”，其中“<code>Page_controls</code>”正是这个页面的别名。</p> -</div> - -<p> </p> diff --git a/files/zh-cn/orphaned/mdn/editor/index.html b/files/zh-cn/orphaned/mdn/editor/index.html deleted file mode 100644 index fc1b1fcd9d..0000000000 --- a/files/zh-cn/orphaned/mdn/editor/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: MDN 编辑指南 -slug: orphaned/MDN/Editor -tags: - - MDN - - 指南 - - 文档 -translation_of: MDN/Editor -original_slug: MDN/Editor ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> - -<p><span class="seoSummary">MDN Web Docs wiki 文档系统的 WYSIWYG (所见即所得)编辑器让贡献新的内容变得简单。这篇指南将告诉你如何使用它，借此来提高你的生产力。在编辑或新建新的页面之前，请阅读并遵守 <a href="https://www.mozilla.org/zh-CN/about/legal/terms/mozilla/">Mozilla 条款</a>。 </span></p> - -<p><a href="/zh-CN/docs/MDN/Contribute/Content/Style_guide" title="Read the MDN style guide">MDN 样式指南</a> 除了告诉你如何进行格式化和样式化内容本身外，还包括我们推荐的语法和拼写规则。</p> - -<p>{{LandingPageListSubpages}}</p> - -<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/zh-cn/orphaned/mdn/editor/keyboard_shortcuts/index.html b/files/zh-cn/orphaned/mdn/editor/keyboard_shortcuts/index.html deleted file mode 100644 index 411b63892c..0000000000 --- a/files/zh-cn/orphaned/mdn/editor/keyboard_shortcuts/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: MDN 编辑器的编辑框 -slug: orphaned/MDN/Editor/Keyboard_shortcuts -tags: - - MDN - - 快捷键 - - 编辑器 - - 编辑框 -translation_of: MDN/Editor/Keyboard_shortcuts -original_slug: MDN/Editor/Edit_box ---- -<p>编辑框正是你写文章的地方，在编辑框中点击右键会根据你点击的位置打开对应的快捷菜单，比如：在表格中点击右键会弹出与编辑表格相关的菜单，在列表中右击就会弹出与列表相关的菜单。</p> - -<p>默认情况下，编辑器会用自己的右键菜单替代浏览器默认的菜单，如果你一定要打开浏览器的默认菜单（比如，使用火狐的拼写检查功能），你可以按住 <kbd>Shift</kbd> 或 <kbd>Control</kbd> 键（ Mac 的 <kbd>Command</kbd> 键），再点击右键。</p> - -<h2 id="快捷键">快捷键</h2> - -<p>丰富而便捷的键盘快捷键能让你在编辑时，手不离开键盘。此处所列的是 Windows 或 Linux 系统下的快捷键，如果是 Mac，只需将 <kbd>Control</kbd> 替换为 <kbd>Command</kbd> 即可。</p> - -<table class="standard-table"> - <colgroup> - <col style="width: 15em;"> - </colgroup> - <tbody> - <tr> - <th>快捷键</th> - <th>描述</th> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> - <td>全选</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> - <td>复制</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> - <td>粘贴</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td> - <td>粘贴为纯文本</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> - <td>剪切</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> - <td>撤销</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Y</kbd></td> - <td>重做</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>K</kbd></td> - <td>打开链接编辑器/添加新链接</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> - <td>移除光标所在位置的链接</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> - <td>加粗</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> - <td>斜体</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> - <td>切换 <code><code></code> 样式</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> - <td> - <p>切换源码编辑模式</p> - - <div class="note">使用源码编辑模式时请格外小心，你必须按照既定的格式来编辑。请仔细阅读<a href="/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide/Source_mode">编辑器源码模式指南</a>，该指南详细介绍了如何使用源码模式，以及各项注意事项。</div> - </td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> - <td>切换当前区域的 <code><pre></code> 样式</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>U</kbd></td> - <td>下划线</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> - <td>保存但不关闭编辑器</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> - <td>保存并关闭编辑器</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> - <td>移除选中区域的样式（此处是数字“0”，不是字母“O”）</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>2</kbd> 至 <kbd>Ctrl</kbd> + <kbd>6</kbd></td> - <td>切换标题的级别（从 2 到 6 ），一级标题仅可供文章头部的页面标题使用。</td> - </tr> - <tr> - <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></td> - <td>在无序列表、有序列表和普通段落格式之间切换。</td> - </tr> - <tr> - <td><kbd>Tab</kbd></td> - <td>在缩进模式下增加缩进级别，否则插入两个空格作为制表符。在表格内部，将光标移动到下一个单元格，或者在没有下一个单元格的情况下插入新行。如果光标当前位于页面标题或某个标题中，则光标跳转到下一段。</td> - </tr> - <tr> - <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> - <td>在缩进模式下降低缩进水平。在表格内部，跳到前一个单元格，如果前面没有单元格，则插入新行。如果光标当前位于页面标题或某个标题中，则光标跳转到下一段。</td> - </tr> - <tr> - <td><kbd>Shift</kbd> + <kbd>Space</kbd></td> - <td>插入空格(<code>&nbsp;</code>)</td> - </tr> - <tr> - <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> - <td> - <p>跳出当前区域。例如，如果你当前正在某个 <code><pre></code> 区域，按下 <kbd>Shift</kbd> + <kbd>Enter</kbd> ，你将跳出这个区域，回到文章正文。</p> - - <div class="note style-wrap"> - <p>当前不可用，详见：{{bug('780055')}}。</p> - </div> - </td> - </tr> - </tbody> -</table> - -<h2 id="参阅">参阅</h2> - -<ul> - <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics">编辑器 UI 元素</a></li> - <li><a href="/zh-CN/docs/MDN/Contribute">为 MDN 做贡献</a></li> - <li><a href="/zh-CN/docs/MDN/Getting_started">初识 MDN</a></li> -</ul> - -<div>{{MDNSidebar}}</div> diff --git a/files/zh-cn/orphaned/mdn/editor/source_mode/index.html b/files/zh-cn/orphaned/mdn/editor/source_mode/index.html deleted file mode 100644 index baa7b16739..0000000000 --- a/files/zh-cn/orphaned/mdn/editor/source_mode/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 源码模式 -slug: orphaned/MDN/Editor/Source_mode -translation_of: MDN/Editor/Source_mode -original_slug: MDN/Editor/Source_mode ---- -<div>{{MDNSidebar}}</div> - -<p class="summary">MDN 编辑器有个重要的按键，用来切换到源码编辑模式。此模式下，你可以看到正在编辑的文章的 HTML。<span class="seoSummary">这个指引使你了解 MDN wiki 源码编辑模式<strong>能</strong>做什么，什么<strong>应该</strong>做，但更为重要的是，什么是<strong>不应该</strong>做的。</span></p> - -<div class="warning"> -<p>在你考虑使用源码模式之前，请注意我们强烈建议你不要使用源码模式。如果您只是为了强行符合我们的样式规范，你不应该去使用源码模式。我们确实有一些需求不启用源码模式无法做到。记得查看{{anch("Warnings and caveats")}}。</p> -</div> - -<h2 id="启用源码模式">启用源码模式</h2> - -<p>启用源码模式很简单。在编辑器工具栏的左上角，点击“<strong>Source</strong>”或“<strong>原始碼</strong>”按钮。</p> - -<p><img alt="Partial screenshot of the editor toolbar, with the Source mode button highlighted" src="https://mdn.mozillademos.org/files/15295/Source%20mode%20button.png" style="height: 98px; width: 267px;"></p> - -<p>对于格式化、图片之类的功能，很可能源码模式没有 WYSIWYG (所见即所得)好用，因为你可能需要滚动很远才能找到编辑器中相关源码的位置。</p> - -<h2 id="警告">警告</h2> - -<p>综上所述，你应该极少会需要用到源码模式。只有一些极个别的事情才必须由修改源码实现。最终，我们会更新编辑器界面，为你展示你的修改。</p> - -<p><a href="/en-US/docs/MDN/Contribute">MDN贡献者指南</a>中未明确描述的所有内容均不应添加到源代码中。这意味着：</p> - -<ul> - <li>不要使用自定义字体和样式。若不是标准的一部分，请勿使用。</li> - <li>不要使用特殊颜色。若不是标准视觉样式，请修改为我们提供的样式。</li> -</ul> - -<h2 id="源码模式下编辑">源码模式下编辑</h2> - -<p>一旦启用源码模式，你将可以编辑 wiki 页面的原始 HTML。虽不受编辑器约束，您应竭尽所能保持您的工作与<a href="/en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">样式指南</a>一致，并且可以安全可靠的工作。</p> - -<div class="note"> -<p>通常，您应该是在源码模式中做一些短暂的调整，而不是长时间的撰写页面。</p> -</div> - -<p>不幸的是，<kbd>Tab</kbd> 键在源码模式中无法使用，请输入两个空格来代替。</p> - -<p>若您使用 MDN 不允许的 HTML 元素和属性，它们会在你保存时直接被移除。此外，文档还将重新被格式化，以使之符合预期。</p> - -<h2 id="合理使用源码模式">合理使用源码模式</h2> - -<p>在一些个别的情况下，使用源码是唯一能遵循MDN格式规范的方式。这一节涵盖了这些情况，并说明了如何在不破坏其他东西的前提下，正确使用这些功能。</p> - -<h3 id="在示例代码中高亮代码行">在示例代码中高亮代码行</h3> - -<p>在用<a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Toolbar#Blocks_group">工具栏的块组</a>中的<strong>PRE</strong>或<strong>Syntax Highlighter</strong>建立的示例代码片段块中，你会希望让某几行代码更引人注目一些。唯一实现这种事项的方式是开启源码模式，找到包含此部分代码的{{HTMLElement("pre")}}块，然后编辑<code><pre></code>标签的{{htmlattrxref("class")}}属性，加上一个<code>highlight</code>组件，像下面这种格式：</p> - -<ul> - <li><code>highlight[<em>lineNum1</em>, <em>lineNum2</em>, ..., <em>lineNumN</em>]</code></li> -</ul> - -<p>例如，如果现在的标签为<code><pre class="brush: js"></code>，然后你想往第4行和第7行加个高亮，你可把它改为<code><pre class="brush:js; highlight:[4,7]"></code>。</p> - -<p>我们看个更复杂的示例：</p> - -<table class="fullwidth-table"> - <thead> - <tr> - <th scope="col">高亮前</th> - <th scope="col">高亮后</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <pre class="brush: js notranslate"> -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); - -var path1 = new Path2D(); -path1.rect(10, 10, 100, 100); - -var path2 = new Path2D(path1); -path2.moveTo(220, 60); -path2.arc(170, 60, 50, 0, 2 * Math.PI); - -ctx.stroke(path2); -</pre> - - <p>这里的{{HTMLElement("pre")}}标签为：<code><pre class="brush: js"></code></p> - </td> - <td> - <pre class="brush: js; highlight:[4,7] notranslate"> -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); - -var path1 = new Path2D(); -path1.rect(10, 10, 100, 100); - -var path2 = new Path2D(path1); -path2.moveTo(220, 60); -path2.arc(170, 60, 50, 0, 2 * Math.PI); - -ctx.stroke(path2);</pre> - - <p>然后这里的<code><pre></code>标签已经改为了：<code><pre class="brush: js; highlight:[4,7]"></code></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="没有对应工具栏按钮的样式">没有对应工具栏按钮的样式</h3> - -<p>MDN上我们用的一些样式通过通常的用户界面是无法实现的。好消息是，这些不是很常见。示例如：</p> - -<ul> - <li>要应用“keyboard”样式于其上的话，你需要将{{HTMLElement("kbd")}}元素中的键名的文本括上。我们还没有实现这个功能的用户界面，所以调到源码模式，把键名括在<code><kbd></code>中。 例如，如果源码是： - - <pre class="brush: html notranslate"><p>Press the <kbd>Enter</kbd> key to start the countdown.</p></pre> - - <p>输出结果就是：</p> - - <p>Press the <kbd>Enter</kbd> key to start the countdown.</p> - </li> - <li>用于特定页面的一些很不常用的样式也需要手动加上，这尤其在一组盒子上常见。这就是我们用宏来帮助自动建立诸多入口页面组件的缘故。</li> -</ul> diff --git a/files/zh-cn/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html b/files/zh-cn/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html deleted file mode 100644 index 649d469f44..0000000000 --- a/files/zh-cn/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: A simple demo of a live code sample -slug: orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo -translation_of: MDN/Structures/Live_samples/Simple_live_sample_demo -original_slug: MDN/Structures/Live_samples/Simple_live_sample_demo ---- -<div>{{MDNSidebar}}</div><h2 id="The_example">The_example</h2> - -<p id="Simple_example_of_a_live_demo">This is a very simple example showing you how to do a live demo in MDN. For more information, see <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a>.</p> - -<pre class="brush: html notranslate"><form> - <label>Try me<input type="text" name="name"></label> - <input type="submit" value="go"> -</form></pre> - -<pre class="brush: css notranslate">form { - border-radius: 10px; - background: powderblue; -}</pre> - -<pre class="brush: js notranslate">var f = document.querySelector('form'); - -f.addEventListener('submit', function(ev) { - ev.preventDefault(); - document.querySelectorAll('input')[1].value = 'sending'; -}, false);</pre> - -<p>{{ EmbedLiveSample('The_example', '', '', '') }}</p> - -<p> </p> - -<p> </p> diff --git a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html deleted file mode 100644 index c757c92313..0000000000 --- a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 发布你的附加组件 -slug: orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ -original_slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension ---- -<div>{{AddonSidebar}}</div> - -<p>一般当你完成了基于WebExtension技术的附加组件的代码编写和测试, 你可能会想与其他人分享这成果(不管出于什么目的...). Mozilla旗下有一个网站: <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org</a> (简称AMO), 开发者们可以在这里发布附加组件, 而其他用户可以在这里找到这些附加组件并安装使用, 通过在AMO上发布你的附加组件, 你可以加入到我们的社区里来, 这里有一群用户和创造者, 说不准会发现几个使用你的附加组件的人哦.</p> - -<p>你编写的附加组件并不一定需要发布在AMO上， 但是、即使你不打算在AMO上发布你的附加组件, 你也必须提交你的附加组件到AMO上来进行审核以获得签名。因为火狐浏览器会拒绝安装没有AMO签名的附加组件。</p> - -<p>所以发布一个附加组件的流程, 可概述为:</p> - -<ol> - <li>压缩你所创建的附加组件文件</li> - <li>在<a href="https://addons.mozilla.org/zh-CN/">AMO</a>上创建一个属于你的账户</li> - <li>上传你的压缩文件到AMO来进行签名和审核, 并选择是否在AMO上进行发布</li> - <li>修复在审核中发现的任何问题</li> - <li>如果你选择不在AMO上发布, 可以恢复已签名的附件组件, 并自行发布</li> -</ol> - -<p>当你准备发布附加组件的新版本时, 你可以访问 <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org </a>的附加组件页来更新它, 并上传新的版本.<br> - 需要注意的是: 你必须在这个附加组件页进行更新, 否则AMO没法知道你是要更新一个已经存在的附加组件呢, 还是要上传一个全新的附加组件呢.</p> - -<p>如果你选择在AMO上发布你的附加组件, 之后火狐浏览器会自动检查更新. 如果你选择自行发布, 你需要在你的manifest.json中手动设置一个<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> 唯一标识, 并且需要手动设置<code>update_url属性指向你的</code><a href="/en-US/Add-ons/Updates">update manifest file</a>.</p> - -<div class="pull-aside"> -<div class="moreinfo"> -<p>火狐浏览器把附加组件包的后缀叫做或改为".xpi", 这只是".zip"的一个扩展.</p> - -<p>在上传附加组件到AMO的时候, 你不需要把压缩包的后缀改为".XPI".</p> -</div> -</div> - -<h2 id="1._使用zip压缩你的附加组件文件">1. 使用zip压缩你的附加组件文件</h2> - -<p>首先你的附加组件文件夹应该包含一个manifest.json和其他一些需要的文件 - javascript文件, icons文件, HTML文件等等. 你需要使用zip把它们压缩成一个文件以便上传到AMO.</p> - -<p>注意: 请将你的附加组件目录的的所有文件压缩为zip包,而 不要直接对附加组件根目录进行压缩(见下图所示).</p> - -<h3 id="Windows">Windows</h3> - -<ol> - <li>打开你的附加组件所在的文件夹.</li> - <li>选中所有文件.</li> - <li>右键并选择发送到 → 压缩到(zipped)文件夹.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<h3 id="Mac_OS_X">Mac OS X</h3> - -<ol> - <li>打开你的附加组件所在的文件夹.</li> - <li>选中所有文件.</li> - <li>右键并选择压缩<em>n项</em>.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3> - -<ol> - <li><code>cd path/to/my-addon/</code></li> - <li><code>zip -r ../my-addon.zip *</code></li> -</ol> - -<h2 id="2._在AMO上创建一个账户">2. 在AMO上创建一个账户</h2> - -<p>访问<a href="https://addons.mozilla.org/">https://addons.mozilla.org/</a>. 如果你已经有一个<a href="https://support.mozilla.org/zh-CN/kb/firefox-mozilla">火狐账户</a>, 你可以直接使用它来登录. 否则, 点击"注册"并按要求创建一个火狐账户.</p> - -<h2 id="3._上传你的zip压缩文件">3. 上传你的zip压缩文件</h2> - -<p>接下来, 上传压缩后的附加组件到AMO进行签名和审查, 并选择是否发布到AMO, 更多细节, 可查看<a href="/en-US/Add-ons/Distribution#Submitting_to_AMO">Submitting to AMO</a>.</p> - -<div class="note"> -<p>需要注意的是一旦你上传了你的附加组件(基于WebExtension技术)到AMO, 你不能使用Add-on SDK或过时的XUL/XPCOM技术来更新该附加组件. 如果你切换到了这些技术平台之一, 必须把它做为新的附加组件并重新提交.</p> - -<p>总而言之: 像Add-on SDK和XUL/XPCOM等过时的技术体系在不久的将来都将被淘汰, WebExtensions才是唯一.</p> - -<p>在上传你的附加组件之前，请再次检查你的zip包内没有包含其他不相关的文件.</p> -</div> - -<h2 id="4._修复审查中出现的问题">4. 修复审查中出现的问题</h2> - -<p>当你上传了附加组件, AMO服务器将运行一些基本的检查并立即通知你有关的一切问题. 这些问题分为2种类型: "错误"和"警告". 如果你有错误, 你必须修复它们并重新提交, 如果只是警告, 你最好也搞定它们(当可以也忽略警告): 然后可以继续提交.</p> - -<p>如果自动检查器没有报告任何错误, 该附件组件将进行更为详细的审核(复查). 你同样会收到审查结果并且需要修复所有问题, 然后重新提交.</p> - -<h2 id="5._发布你的附加组件">5. 发布你的附加组件</h2> - -<p>如果你选择了在AMO上托管你的附加组件, 这意味着发布过程的结束. AMO会对该附加组件进行签名和发布, 之后其他用户就能下载并安装使用了.</p> - -<p>如果你选择不在AMO上进行发布, 可以恢复已签名的附加组件, 并自行发布(比如把附件组件的压缩包直接发给别人).</p> - -<p> </p> diff --git a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html deleted file mode 100644 index d4a08ca5dd..0000000000 --- a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: 从 Google Chrome 移植 -slug: orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -original_slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome ---- -<div>{{AddonSidebar}}</div> - -<p>使用 WebExtension API 开发的扩展是专为跨浏览器兼容而设计的：很大程度上，该技术与 Google Chrome 和 Opera 支持的<a class="external external-icon" href="https://developer.chrome.com/extensions">扩展 API</a> 代码直接兼容。为这些浏览器编写的扩展，在大多数情况下，只需少数修改就能在 Firefox 中运行。几乎所有的<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API">扩展 API</a> 都支持使用 <code>chrome</code> 命名空间下的回调函数，跟 Chrome 一样。那些仅有的 <code>chrome</code> 命名空间不支持的 API 是故意不与 Chrome 兼容的。这些情况下，API 文档页将明确声明它仅在 <code>browser</code> 命名空间中受支持。从 Chrome 或者 Opera 移植一个扩展的过程大概这样：</p> - -<ol> - <li>检查你 manifest.json 使用的功能并了解 WebExtension API 对应的 <a href="/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome 不兼容参考表</a>。如果你在使用的功能或者 API 还未被 Firefox 支持，那你可能还不能移植你的扩展。Mozilla 提供了一个服务可助您自动执行此步：<a href="https://www.extensiontest.com/">https://www.extensiontest.com/</a>。</li> - <li><a href="/zh-CN/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">安装你的扩展至 Firefox</a> 并对其进行测试。</li> - <li>如有任何问题，可通过 <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons 邮件列表</a>或 <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a> 上的 <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> 联系我们。</li> - <li><a href="/zh-CN/Add-ons/WebExtensions/Publishing_your_WebExtension">提交您的附加组件至 AMO 以供签名及分发</a>。</li> -</ol> - -<p>如果您依赖 Chrome 命令行选项来加载解压的扩展，请参看 Firefox 中进行临时安装的 <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> 工具以便开发。</p> - -<ul> -</ul> diff --git a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html deleted file mode 100644 index 376c846784..0000000000 --- a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 打包和安装 -slug: orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -original_slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -<h2 id="打包你的扩展">打包你的扩展</h2> - -<p>Firefox 扩展应打包为 XPI 文件。它只是一个 ZIP 文件，但采用 <code>.xpi</code> 作为扩展名。</p> - -<p>最重要的一点，ZIP 文件必须是扩展文件的 ZIP 打包，<strong>不能</strong>包含一层根目录。</p> - -<h3 id="Windows">Windows</h3> - -<ol> - <li>打开你的扩展文件所在的文件夹。</li> - <li>选择所有文件。</li> - <li>右击并选择 发送到 → 压缩(zipped)文件夹。</li> - <li>将得到的文件从 <code>文件名.zip</code> 重命名为 <code>文件名.xpi</code>。</li> -</ol> - -<p><img alt="Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder" src="https://mdn.mozillademos.org/files/11717/pUF1vnr.png" style="height: 641px; width: 904px;"></p> - -<h3 id="Mac_OS_X">Mac OS X</h3> - -<ol> - <li>打开你的扩展文件所在的文件夹。</li> - <li>选择所有文件。</li> - <li>右击并选择 压缩 <em>n</em> 项。</li> - <li>将得到的文件从 <code>Archive.zip</code> 重命名为 <code>文件名.xpi</code>。</li> -</ol> - -<p><img alt="Screenshot of the Finder context menu showing the Compress 15 Items option" src="https://mdn.mozillademos.org/files/11715/Screen%20Shot%202015-10-08%20at%2016.19.02.png" style="height: 460px; width: 850px;"></p> - -<h3 id="Linux_Mac_OS_X_终端">Linux / Mac OS X 终端</h3> - -<ol> - <li><code>cd path/to/my-extension/</code></li> - <li><code>zip -r ../my-extension.xpi *</code></li> -</ol> - -<h2 id="安装你的扩展">安装你的扩展</h2> - -<ol> - <li>导航到 <code>about:addons</code></li> - <li>拖拽 XPI 到页面上，或者打开齿轮菜单，选择“从文件安装附加组件...”</li> - <li>点击弹出的对话框中的“安装”</li> -</ol> - -<h2 id="在_Firefox_OS_上安装你的扩展">在 Firefox OS 上安装你的扩展</h2> - -<p><code>你可以使用 WebIDE 提供的 USB 或者 Wifi 进行安装</code></p> - -<h2 id="故障排除">故障排除</h2> - -<p>下面是几种你可能会遇到的常见问题：</p> - -<h3 id="此附加组件无法安装，因为它未经验证。">"此附加组件无法安装，因为它未经验证。"</h3> - -<ul> - <li>确保你正在使用 <a href="https://nightly.mozilla.org/">Nightly</a> ，并且已在 <code>about:config </code>中将 <code>xpinstall.signatures.required</code> 切换为 <code>false</code>。</li> - <li>在 <a href="/en-US/docs/Mozilla/Add-ons/Distribution">附加组件签名与分发</a> 了解更多信息。</li> -</ul> - -<h3 id="该附加组件无法安装，因为它似乎已损坏。">"该附加组件无法安装，因为它似乎已损坏。"</h3> - -<ul> - <li>确保你是直接压缩你的附加组件文件，<strong>而不是</strong>压缩它们所在的文件夹。你的 manifest.json 文件必须在 zip 文件的根目录中。</li> - <li>确保你正在使用 <a href="https://nightly.mozilla.org/">Nightly</a> 版本的 Firefox。</li> -</ul> - -<h3 id="完全没反应">完全没反应</h3> - -<ul> - <li>确保你的文件名称以 <code>.xpi</code> 结尾，因为某些操作系统可能会隐藏真实的文件扩展名。 - - <ul> - <li>在 Windows 上，选中 查看 → 显示 / 隐藏：文件扩展名。</li> - <li>在 Mac OS X 上，选中 文件 → 获取信息 → 名称和扩展名。</li> - </ul> - </li> - <li>还有一种可能，你不小心点击并因此驳回了安装提示。在 Nightly 中的后退按钮旁边找到一个拼图图标。点击它将重获这个弹出提示。</li> -</ul> diff --git a/files/zh-cn/orphaned/mozilla/mozilla_persona/index.html b/files/zh-cn/orphaned/mozilla/mozilla_persona/index.html deleted file mode 100644 index f4958b28e5..0000000000 --- a/files/zh-cn/orphaned/mozilla/mozilla_persona/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Mozilla Persona -slug: orphaned/Mozilla/Mozilla_Persona -tags: - - Mozilla - - Persona -original_slug: Mozilla/Mozilla_Persona ---- -<div class="callout-box"> - <p><strong>保持联系或获取帮助！</strong></p> - <p>关注 <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">我们的 blog</a>，加入 <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">我们的邮件列表</a>，或在 <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC">IRC</a> 中的 <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> 找到我们。</p> -</div> -<p><a class="link-https" href="https://www.mozilla.org/zh-CN/persona/" title="https://www.mozilla.org/zh-CN/persona/">Mozilla Persona</a> 是一个用于 web 的完全去中心化且安全的验证系统，基于开放 BrowserID 协议。Mozilla 当前管理一个 Persona 相关的一个<a href="/zh-CN/docs/Persona/Bootstrapping_Persona" title="/zh-CN/docs/Persona/Bootstrapping_Persona">可选的、中心化服务</a>的一小组套件。</p> -<p>为什么你和你的站点应该使用 Persona？</p> -<ol> - <li><strong>Persona 完全消除了站点特定的密码，</strong> 把用户和网站从创建、管理和安全存放密码的责任中解放出来。</li> - <li><strong>Persona 易于使用。</strong>只需点击两次，一个 Persona 用户可以登入到一个诸如 <a href="http://voo.st" title="http://voo.st">Voost</a> 或 <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a> 的新站点，绕开了账户创建相关的摩擦。</li> - <li><strong>Persona 易于实现。</strong>开发人员在一个下午就可以把 Persona 添加到站点上。</li> - <li>最好的是，<strong>不会被锁定</strong>。 开发人员获取所有他们用户的验证过的邮件地址，而用户可以在 Persona 上使用任何邮件地址。</li> - <li><strong>Persona 基于 BrowserID 协议构建。</strong>一旦流行的浏览器供应商实现了 BrowserID<strong>，它们不再需要依赖于 Mozilla 来登入。</strong></li> -</ol> -<p>继续阅读来开始！</p> -<div class="note"> - <strong>注意：</strong>Persona 在活跃开发中。关注<a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">我们的 blog</a> 来了解新特性，或加入<a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">我们的邮件列表</a>来提供反馈！</div> -<h2 id="在你的站点上使用_Persona">在你的站点上使用 Persona</h2> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h3 id="准备开始">准备开始</h3> - <dl> - <dt> - <a href="/zh-CN/docs/Persona/Why_Persona" title="zh-CN/BrowserID/Why_BrowserID">为什么使用 Persona？</a></dt> - <dd> - 了解在你的站点上支持 Persona 的原因和它与其它身份验证系统的区别。</dd> - <dt> - <a href="/zh-CN/Persona/Quick_Setup" title="BrowserID/Quick setup">快速安装</a></dt> - <dd> - 一份快捷的攻略，展示了如何向你的网站中添加 Persona。</dd> - </dl> - </td> - <td> - <h3 id="Persona_API_参考">Persona API 参考</h3> - <dl> - <dt> - <a href="/zh-CN/DOM/navigator.id" title="navigator.id">navigator.id API 参考</a></dt> - <dd> - <code>navigator.id</code> 对象的参考，web 开发者可以用此来把 Persona 继承到站点中。</dd> - <dt> - <a href="/zh-CN/Persona/Remote_Verification_API" title="zh-CN/BrowserID/Remote_Verification_API">验证 API 参考</a></dt> - <dd> - 建立在 <code>https://verifier.login.persona.org/verify</code> 上的远程验证 API 的参考。</dd> - </dl> - </td> - </tr> - <tr> - <td> - <h3 id="指导">指导</h3> - <dl> - <dt> - <a href="/zh-CN/Persona/Security_Considerations" title="BrowserID/Security considerations">安全考虑</a></dt> - <dd> - 确保 Persona 部署安全的实践和技术。</dd> - <dt> - <a href="/zh-CN/Persona/Browser_compatibility" title="/Browser_compatibility">浏览器兼容性</a></dt> - <dd> - 准确获知哪些浏览器支持 Persona。</dd> - <dt> - <a href="/zh-CN/Persona/Internationalization" title="/Internationalization">国际化</a></dt> - <dd> - 了解 Persona 如何处理不同的语言。</dd> - </dl> - </td> - <td> - <h3 id="资源">资源</h3> - <dl> - <dt> - <a class="link-https" href="https://github.com/mozilla/browserid/wiki/Persona-Libraries" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">库和插件</a></dt> - <dd> - 寻找你偏好的编程语言、web 框架、博客或是内容管理系统（CMS）的即插库。</dd> - <dt> - <a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Persona cookbook</a></dt> - <dd> - Persona 站点的示例源代码。包括 PHP、Node.JS 等等的片段。</dd> - <dt> - <a href="/zh-CN/docs/persona/branding" title="/zh-CN/docs/persona/branding">品牌资源</a></dt> - <dd> - 登入按钮和其它向用户表现 Persona 的图形。</dd> - </dl> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 id="给身份提供者的信息">给身份提供者的信息</h2> - <p>如果你是一个电子邮件提供商或另一个身份提供服务，翻阅下面的链接来获知如何成为一个 Persona 身份提供者。</p> - <dl> - <dt> - <a href="/zh-CN/docs/Persona/Identity_Provider_Overview" title="IdP">IdP 概述</a></dt> - <dd> - Persona 身份提供者的高层视角。</dd> - <dt> - <a href="/zh-CN/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">实现一个 IdP</a></dt> - <dd> - 成为一个 IdP 的详细技术细节指导。</dd> - <dt> - <a href="/zh-CN/Persona/IdP_Development_tips" title="Developer tips">开发提示</a></dt> - <dd> - 开发一个新的身份提供者的一系列开发提示和技巧。</dd> - <dt> - <a href="/zh-CN/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/zh-CN/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> - <dd> - <code>.well-known/browserid</code> 文件的结构和用途概述，这个文件被 IdPs 用于通知它们支持这个协议。</dd> - </dl> - </td> - <td> - <h2 id="Persona_项目">Persona 项目</h2> - <dl> - <dt> - <a href="/zh-CN/Persona/Glossary" title="navigator.id">术语表</a></dt> - <dd> - BrowserID 和 Persona 定义的术语。</dd> - <dt> - <a href="/zh-CN/Persona/FAQ" title="zh-CN/BrowserID/FAQ">FAQ</a></dt> - <dd> - 常见问题的回答。</dd> - <dt> - <a href="/zh-CN/Persona/Protocol_Overview" title="BrowserID/Protocol overview">协议概述</a></dt> - <dd> - 底层 BrowserID 协议的中等技术概述。</dd> - <dt> - <a href="/zh-CN/persona/Crypto" title="MDN">加密</a></dt> - <dd> - 一瞥 Persona 和 BrowserID 背后的密码学概念。</dd> - <dt> - <a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">协议规范</a></dt> - <dd> - 这里是深层技术细节。</dd> - <dt> - <a href="/Persona/Bootstrapping_Persona" title="zh-CN/BrowserID/Bootstrapping_BrowserID">Persona 网站</a></dt> - <dd> - 要让 Persona 运作， 我们在<a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a> 建立了三个服务：一个备用身份提供者、一个可迁移的 {{ domxref("navigator.id") }} API 实现以及一个身份断言验证服务。</dd> - <dt> - <a href="https://github.com/mozilla/browserid">Persona 源码</a></dt> - <dd> - Persona 网站背后的源码托管在 GitHub 的一个仓库上。欢迎提交补丁！</dd> - </dl> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/zh-cn/orphaned/tools/add-ons/index.html b/files/zh-cn/orphaned/tools/add-ons/index.html deleted file mode 100644 index f39bf3acaf..0000000000 --- a/files/zh-cn/orphaned/tools/add-ons/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 组件 -slug: orphaned/Tools/Add-ons -translation_of: Tools/Add-ons -original_slug: Tools/Add-ons ---- -<div>{{ToolsSidebar}}</div><p>开发者工具没有内置到Firefox里面，而是作为组件的方式存在。</p> diff --git a/files/zh-cn/orphaned/tools/page_inspector/keyboard_shortcuts/index.html b/files/zh-cn/orphaned/tools/page_inspector/keyboard_shortcuts/index.html deleted file mode 100644 index 39eae25e7a..0000000000 --- a/files/zh-cn/orphaned/tools/page_inspector/keyboard_shortcuts/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 键盘快捷键 -slug: orphaned/Tools/Page_Inspector/Keyboard_shortcuts -translation_of: Tools/Page_Inspector/Keyboard_shortcuts -original_slug: Tools/Page_Inspector/Keyboard_shortcuts ---- -<div>{{ToolsSidebar}}</div> - -<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> - -<h3 id="通用快捷键">通用快捷键</h3> - -<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/zh-cn/orphaned/web/api/abstractworker/index.html b/files/zh-cn/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index b92de9c8ff..0000000000 --- a/files/zh-cn/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -tags: - - API - - AbstractWorker - - Interface - - Reference - - SharedWorker - - Web Workers - - Worker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<p> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> 的 <strong><code>AbstractWorker</code></strong> 接口是一个定义适用于所有类型 worker 属性和方法的抽象接口，包括基础的 {{domxref("Worker")}}，{{domxref("ServiceWorker")}} 以及 {{domxref("SharedWorker")}}。作为一个抽象类，你不能直接使用 <code>AbstractWorker</code>。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>AbstractWorker</code></em><em> 接口不会继承任何属性。</em></p> - -<h3 id="事件处理函数">事件处理函数</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>当 worker 中出现 {{domxref("ErrorEvent")}} 类型的错误时，{{ domxref("EventListener") }} 就会被调用。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>AbstractWorker</code></em><em> 接口不会实现或继承任何方法。</em></p> - -<h2 id="例子">例子</h2> - -<p>作为一个抽象类接口，你不应该在代码中直接使用 <code>AbstractWorker</code> 接口。取而代之，你应该使用 {{domxref("Worker")}} 或 {{domxref("SharedWorker")}}，这两者都继承了 <code>AbstractWorker</code> 的属性。</p> - -<p>下面的一小段代码是展示如何使用 {{domxref("Worker.Worker", "Worker()")}} 构造函数构造 {{domxref("Worker")}} 对象并使用它：</p> - -<pre class="notranslate"><code>var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -}</code></pre> - -<p>worker 的代码会从 <code>"worker.js"</code> 文件被加载。代码假设这里已经有一个现成的 {{HTMLElement("input")}} 元素且由 <code>first</code> 表示；设置了一个用于 {{event("change")}} 事件的事件处理函数，所以当用户更改 <code>first</code> 的值时，一个提示信息会被提交且通知到 worker。</p> - -<p>完整的例子，请看：</p> - -<ul> - <li><a href="https://github.com/mdn/simple-web-worker">专用worker的基本例子</a> ( <a href="http://mdn.github.io/simple-web-worker/">运行专用worker</a> )</li> - <li><a href="https://github.com/mdn/simple-shared-worker">共享worker的基本例子</a> ( <a href="http://mdn.github.io/simple-shared-worker/">运行共享worker</a> )</li> -</ul> - -<h2 id="相关规范">相关规范</h2> - -<table> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性"><br> - 浏览器兼容性</h2> - -<p>{{Compat("api.AbstractWorker")}}</p> - -<div id="compat-desktop"></div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("Worker")}}，{{domxref("ServiceWorker")}} 以及 {{domxref("SharedWorker")}} 接口，都基于 <code>AbstractWorker</code> 定义</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/abstractworker/onerror/index.html b/files/zh-cn/orphaned/web/api/abstractworker/onerror/index.html deleted file mode 100644 index fe50b2e767..0000000000 --- a/files/zh-cn/orphaned/web/api/abstractworker/onerror/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: AbstractWorker.onerror -slug: orphaned/Web/API/AbstractWorker/onerror -tags: - - API - - AbstractWorker - - EventHandler - - Property - - Reference - - Web Workers - - Workers - - onerror -translation_of: Web/API/AbstractWorker/onerror -original_slug: Web/API/AbstractWorker/onerror ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<h2 id="概述">概述</h2> - -<p>{{domxref("AbstractWorker")}}接口的<strong><code>onerror</code></strong>特性是一个事件句柄，在 {{domxref("Worker")}}的{{event("error")}}事件触发并冒泡时执行。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">myWorker.onerror = function() { ... };</pre> - -<h2 id="示例">示例</h2> - -<p>下面的代码片段展示了通过 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker.Worker" title="The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy."><code>Worker()</code></a> 创建 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Worker" title="Worker 是可以在后台运行的任务，它能够被轻松的创建，还能向它的创建者发送消息。 你只要调用 Worker() 构造函数，指定一个需要运行在 worker 线程内的脚本，就能够很容易的创建一个 worker。"><code>Worker</code></a> 对象的过程， 以及设置onerror回调函数：</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -myWorker.onerror = function() { - console.log('There is an error with your worker!'); -}</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('HTML WHATWG', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td> - <td>{{Spec2('Web Workers')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> -<p>{{Compat("api.AbstractWorker.onerror")}}</p> - -<h3 id="试图加载跨域_Worker_的错误差异">试图加载跨域 Worker 的错误差异</h3> - -<p>早期浏览器会抛出 <code>SecurityError</code>，在规范变更后，则是 {{event("error")}} 事件。具体见 <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p> -</div> - -<div id="compat-mobile"> </div> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>The {{domxref("AbstractWorker")}} interface it belongs to.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/ambient_light_events/index.html b/files/zh-cn/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 79a7ed9fbe..0000000000 --- a/files/zh-cn/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Using Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - WebAPI - - 事件 - - 环境光 -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>环境光线事件是一个易用的让网页或应用感知光强变化的方法。它使网页或应用能对光强变化做出反应，例如改变用户界面的颜色对比度，或为拍照而改变曝光度。</p> - -<h2 id="光线事件">光线事件</h2> - -<p>当设备的光线传感器检测到光强等级的变化时，它会向浏览器通知这个变化。当浏览器得到这个通知后，会发送（fire）一个提供光强信息的 {{domxref("DeviceLightEvent")}} 事件。</p> - -<p>想要捕获这个事件，可用 {{domxref("EventTarget.addEventListener","addEventListener")}} 方法把事件处理器绑定到 <code>window</code> 上（使用 {{event("devicelight")}} 事件名），或者直接把事件处理器赋值给 {{domxref("window.ondevicelight")}} 属性。</p> - -<p>该事件被捕捉后，可以从传入的事件对象上的 {{domxref("DeviceLightEvent.value")}} 属性获取光强（单位为 {{interwiki("wikipedia", "lux")}}）。</p> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">if ('ondevicelight' in window) { - window.addEventListener('devicelight', function(event) { - var body = document.querySelector('body'); - if (event.value < 50) { - body.classList.add('darklight'); - body.classList.remove('brightlight'); - } else { - body.classList.add('brightlight'); - body.classList.remove('darklight'); - } - }); -} else { - console.log('不支持 devicelight 事件'); -} -</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>首次定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h3 id="Gecko_备注">Gecko 备注</h3> - -<p>{{event("devicelight")}} 事件在 Firefox Mobile for Android (15.0) 和 Firefox OS (B2G) 上实现并默认可用。从Gecko 22.0 {{geckoRelease("22.0")}} 开始，Mac OS X桌面版也可使用该事件。</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/analysernode/fft/index.html b/files/zh-cn/orphaned/web/api/analysernode/fft/index.html deleted file mode 100644 index 77290a3c99..0000000000 --- a/files/zh-cn/orphaned/web/api/analysernode/fft/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Directory failure 目录失效 -slug: orphaned/Web/API/AnalyserNode/fft -original_slug: Web/API/AnalyserNode/fft ---- -<p>目录失效</p> - -<p dir="ltr" id="tw-target-text">Directory failure</p> diff --git a/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html b/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html deleted file mode 100644 index 91c65f922a..0000000000 --- a/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: AudioContext.mozAudioChannelType -slug: orphaned/Web/API/AudioContext/mozAudioChannelType -translation_of: Web/API/AudioContext/mozAudioChannelType -original_slug: Web/API/AudioContext/mozAudioChannelType ---- -<p>{{APIRef("Web Audio API")}} {{Non-standard_header}}</p> - -<p>{{domxref("AudioContext")}}的<code>mozAudioChannelType</code>属性是只读的，在Firefox OS设备上可以用来设置音频在audio context中播放的声道。</p> - -<p>该属性是<a href="/en-US/docs/Web/API/AudioChannels_API">AudioChannels API</a>中定义的非标准属性，更多信息请查看<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var audioCtx = new AudioContext(); -var myAudioChannelType = audioCtx.mozAudioChannelType; -</pre> - -<p>只能通过下面的构造器来设置AudioContext中音频的声道：</p> - -<pre class="brush: js">var audioCtx = new AudioContext('ringer');</pre> - -<h3 id="返回值">返回值</h3> - -<p>A {{domxref("DOMString")}} value.</p> - -<h2 id="例子">例子</h2> - -<p>TBD</p> - -<h2 id="规范">规范</h2> - -<p>AudioChannels API目前没有官方规范，实现细节请查看<a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a>、WebIDL等等</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>General support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>General support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="另见">另见</h2> - -<ul> - <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li> - <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li> - <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li> - <li>{{domxref("AudioContext")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html b/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html deleted file mode 100644 index 46011aa83e..0000000000 --- a/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: AudioNode.connect(AudioParam) -slug: orphaned/Web/API/AudioNode/connect(AudioParam) -translation_of: Web/API/AudioNode/connect(AudioParam) -original_slug: Web/API/AudioNode/connect(AudioParam) ---- -<p>{{ APIRef("Web Audio API") }}</p> - -<div> -<p>允许我们将当前节点的一个输出连接到音频参数的一个输入，并允许通过音频信号控制参数。<br> - 使AudioNode输出连接到多个AudioParam，并将多个AudioNode输出连接到单个 AudioParam，同时多次调用connect()。因此支持Fan-in and fan-out。<br> - AudioParam可以从连接到它的任何AudioNode输出获取渲染的音频数据，并通过下混合将其转换为单声道（如果本身不是单声道的话）。然后，它将其他这样的输出和固定参数混合（ AudioParam的值通常没有任何连接），包括为参数调度的任何时间的变化。<br> - 因此，可以通过将AudioParam的值设置为中心频率来选择AudioParam将要更改的范围，并使用音频源和AudioParam之间的GainNode来调整AudioParam更改的范围。</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: js;highlight[11]">var lfo = audioCtx.createOscillator(); -lfo.frequency.value = 2.0; // Hz, two times per second - -var lfoGain = audioCtx.createGain(); -lfoGain.gain.value = 0.5; - -// this is the parameter that is going to be modulated -var gain = audioCtx.createGain(); -gain.gain.value = 0.5; - -// Oscillators go from -1 to 1 -// Make it go from -0.5 to +0.5 by connecting it to a GainNode with a gain value of 0.5 -lfo.connect(lfoGain); - -// because the value of the gain.gain AudioParam is originaly 0.5, the value is added, and it will go from 0.0 to 1.0 -lfoGain.connect(gain.gain); - -lfo.connect(gain.gain);</pre> - -<div class="note"> -<p><strong>Note</strong>: There can only be one connection between an output from one specific <code>AudioNode</code> and an {{ domxref("AudioParam") }}. Multiple connections to the same termini are equivalent to a single such connection (the duplicates are ignored).</p> -</div> - -<h3 id="Description" name="Description">Returns</h3> - -<p>Void.</p> - -<h2 id="Examples" name="Examples">Example</h2> - -<p>In this example, we will be altering the gain value of a {{domxref("GainNode")}} using an {{domxref("OscillatorNode")}} with a slow frequency value. This technique is know as an <em>LFO</em>-controlled parameter.</p> - -<pre class="brush: js;highlight[8,9]">var AudioContext = window.AudioContext || window.webkitAudioContext; - -var audioCtx = new AudioContext(); - -// create an normal oscillator to make sound -var oscillator = audioCtx.createOscillator(); - -// create a second oscillator that will be used as an LFO (Low-frequency -// oscillator), and will control a parameter -var lfo = audioCtx.createOscillator(); - -// set the frequency of the second oscillator to a low number -lfo.frequency.value = 2.0; // 2Hz: two oscillations par second - -// create a gain whose gain AudioParam will be controlled by the LFO -var gain = audioCtx.createGain(); - -// connect the LFO to the gain AudioParam. This means the value of the LFO -// will not produce any audio, but will change the value of the gain instead -lfo.connect(gain.gain); - -// connect the oscillator that will produce audio to the gain -oscillator.connect(gain); - -// connect the gain to the destination so we hear sound -gain.connect(audioCtx.destination); - -// start the oscillator that will produce audio -oscillator.start(); - -// start the oscillator that will modify the gain value -lfo.start();</pre> - -<h2 id="Parameters" name="Parameters">Parameters</h2> - -<dl> - <dt>Destination</dt> - <dd>The {{ domxref("AudioParam") }} you are connecting to.</dd> - <dt>Output (optional)</dt> - <dd>An index describing which output of the current <code>AudioNode</code> you want to connect to the {{ domxref("AudioParam") }}. The index numbers are defined according to the number of output channels (see <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_channels">Audio channels</a>.) If this parameter is out-of-bound, an <code>INDEX_SIZE_ERR</code> exception is thrown.</dd> -</dl> - -<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('Web Audio API', '#widl-AudioNode-connect-void-AudioParam-destination-unsigned-long-output', 'connect(AudioParam)')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td><code>connect</code><code>(AudioParam)</code></td> - <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><code>connect</code><code>(AudioParam)</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/index.html b/files/zh-cn/orphaned/web/api/body/index.html deleted file mode 100644 index 0b12fa7259..0000000000 --- a/files/zh-cn/orphaned/web/api/body/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Fetch - - bolb() - - json() - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<p>{{ APIRef("Fetch") }}</p> - -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 中的 <strong><code>Body</code></strong> {{glossary("mixin")}} 代表响应/请求的正文，允许你声明其内容类型是什么以及应该如何处理。</p> - -<p><code>Body</code>被{{domxref("Request")}} 和{{domxref("Response")}}实现，并为这些对象提供了一个相关联的主体（字节流），一个已使用的标志（最初未设置）和一个MIME类型（最初为空字节序列）。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>一个简单的getter用于暴露一个{{domxref("ReadableStream")}}类型的主体内容。</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>一个{{domxref("Boolean")}} 值指示是否body已经被标记读取。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值，它返回一个{{domxref("Promise")}}对象，其resolve参数类型是{{domxref("ArrayBuffer")}}。此操作会将bodyUsed状态改为已使用（true）。</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值，它返回一个{{domxref("Promise")}}对象，其resolve参数类型是{{domxref("Blob")}}。此操作会将bodyUsed状态改为已使用（true）。</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值，它返回一个{{domxref("Promise")}}对象，其resolve参数类型是{{domxref("FormData")}}表单。此操作会将bodyUsed状态改为已使用（true）。</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值，它返回一个{{domxref("Promise")}}对象，其resolve参数类型是使用{{jsxref("JSON")}}解析body文本的结果。此操作会将bodyUsed状态改为已使用（true）。</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值，它返回一个{{domxref("Promise")}}对象，其resolve参数类型是{{domxref("USVString")}}（文本）。此操作会将bodyUsed状态改为已使用（true）。</dd> -</dl> - -<h2 id="范例">范例</h2> - -<p>在<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">基本 fetch 使用实例</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">查看运行效果</a>) 中，我们使用简单的 fetch 请求获取一张图片并将其使用 {{htmlelement("img")}} 标签展示。你可能注意到当我们请求一张图片，需要使用 {{domxref("Body.blob")}} ({{domxref("Response")}} 实现 body 接口以发送正确的MIME类型给服务器进行识别。</p> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_内容">JS 内容</h3> - -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('flowers.jpg').then(function(response) { - return response.blob(); -}).then(function(response) { - var objectURL = URL.createObjectURL(response); - myImage.src = objectURL; -});</pre> - -<p>你也可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/Response" title="The Response() constructor creates a new Response object."><code>Response.Response()</code></a> 构造函数创建自定义的 <code>Response</code> 对象。</p> - -<pre><code>const response = new Response();</code> -</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('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容情况">浏览器兼容情况</h2> - -<p>{{Compat("api.Body")}}</p> - -<h2 id="也可以看看">也可以看看</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/api/childnode/index.html b/files/zh-cn/orphaned/web/api/childnode/index.html deleted file mode 100644 index f223684bb2..0000000000 --- a/files/zh-cn/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - ChildNode - - DOM - - Node - - 接口 -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<p>{{APIRef("DOM")}}</p> - -<p><code><strong>ChildNode</strong></code> 混合了所有(拥有父对象) {{domxref("Node")}} 对象包含的公共方法和属性。其由 {{domxref("Element")}}、{{domxref("DocumentType")}} 和 {{domxref("CharacterData")}} 对象实现。</p> - -<h2 id="属性">属性</h2> - -<p>没有继承任何属性，也没有任何专有属性。</p> - -<h2 id="方法">方法</h2> - -<p>没有继承的方法。</p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>将 <code>ChildNode</code> 从其父节点的子节点列表中移除。</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为 <code>ChildNode</code> 之前。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>在其父节点的子节点列表中插入一些{{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为 <code>ChildNode</code> 之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>使用一组 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象替换 <code>ChildNode</code>。{{domxref("DOMString")}} 对象会以 {{domxref("Text")}} 的形式插入。</dd> -</dl> - -<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('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. 新增 <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replace()</code> 这四个方法。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>GitHub 上的外部资源：<a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> - <li> - <div class="syntaxbox">The {{domxref("NonDocumentTypeChildNode")}} interface.</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/devicelightevent/index.html b/files/zh-cn/orphaned/web/api/devicelightevent/index.html deleted file mode 100644 index e3e717c514..0000000000 --- a/files/zh-cn/orphaned/web/api/devicelightevent/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: DeviceLightEvent -slug: orphaned/Web/API/DeviceLightEvent -tags: - - API - - Ambient Light Events - - Experimental - - Interface - - NeedsBetterSpecLink - - NeedsMarkupWork - - 事件 -translation_of: Web/API/DeviceLightEvent -original_slug: Web/API/DeviceLightEvent ---- -<div>{{apiref("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p><code>DeviceLightEvent</code> 为 Web 开发人员提供来自光传感器或类似设备的、关于附近环境光水平的信息。例如，基于当前环境光水平调节屏幕的亮度，以便节省电量或提供更好的阅读性。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("DeviceLightEvent.value")}}</dt> - <dd>环境光的亮度，单位为 {{interwiki("wikipedia", "lux")}}。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">window.addEventListener('devicelight', function(event) { - console.log(event.value); -});</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{ event("devicelight") }}</li> - <li><a href="/zh-CN/docs/WebAPI/Using_Light_Events">使用环境光事件</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html b/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html deleted file mode 100644 index 4d9d62b831..0000000000 --- a/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: 简单的cookie框架 -slug: orphaned/Web/API/Document/cookie/Simple_document.cookie_framework -tags: - - Cookies - - cookie -translation_of: Web/API/Document/cookie/Simple_document.cookie_framework -original_slug: Web/API/Document/cookie/Simple_document.cookie_framework ---- -<h2 id="一个小型框架_一个完整的cookies读写器对Unicode充分支持">一个小型框架: 一个完整的cookies读/写器对Unicode充分支持</h2> - -<p>由于Cookie只是特殊格式的字符串，因此有时很难管理它们。 以下库旨在通过定义一个与一个<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#Storage"><code>Storage</code> </a>对象部分一致的对象(<code>docCookies</code>)来抽象对<code>document.cookie</code>的访问。</p> - -<p> 以下代码也<a href="https://github.com/madmurphy/cookies.js">在GitHub上获取</a>。它是基于GNU General Public License v3.0 许可 (<a href="https://github.com/madmurphy/cookies.js/blob/master/LICENSE">许可链接</a>)</p> - -<h5 id="库">库</h5> - -<pre class="brush: js">/*\ -|*| -|*| :: cookies.js :: -|*| -|*| A complete cookies reader/writer framework with full unicode support. -|*| -|*| Revision #1 - September 4, 2014 -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie -|*| https://developer.mozilla.org/User:fusionchess -|*| https://github.com/madmurphy/cookies.js -|*| -|*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html -|*| -|*| Syntaxes: -|*| -|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) -|*| * docCookies.getItem(name) -|*| * docCookies.removeItem(name[, path[, domain]]) -|*| * docCookies.hasItem(name) -|*| * docCookies.keys() -|*| -\*/ - -var docCookies = { - getItem: function (sKey) { - if (!sKey) { return null; } - return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; - }, - setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { - if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } - var sExpires = ""; - if (vEnd) { - switch (vEnd.constructor) { - case Number: - sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; - break; - case String: - sExpires = "; expires=" + vEnd; - break; - case Date: - sExpires = "; expires=" + vEnd.toUTCString(); - break; - } - } - document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); - return true; - }, - removeItem: function (sKey, sPath, sDomain) { - if (!this.hasItem(sKey)) { return false; } - document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); - return true; - }, - hasItem: function (sKey) { - if (!sKey) { return false; } - return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - }, - keys: function () { - var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); - for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } - return aKeys; - } -};</pre> - -<div class="note"><strong>Note:</strong> 对于<em>never-expire-cookies 我们使用一个随意的遥远日期</em><code>Fri, 31 Dec 9999 23:59:59 GMT</code>. 处于任何原因，你担心这样一个日期，使用 <em><a href="http://en.wikipedia.org/wiki/Year_2038_problem">惯例世界末日</a></em>Tue, 19 Jan 2038 03:14:07 GMT - 这是自1970年1月1日00:00:00 UTC以来使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators#Signed_32-bit_integers">有符号的32位二进制整数</a>表示的最大秒数。(i.e., <code>01111111111111111111111111111111</code> which is <code>new Date(0x7fffffff * 1e3)</code>).</div> - -<h3 id="cookie的写入">cookie的写入</h3> - -<h5 id="语法">语法</h5> - -<pre class="syntaxbox"><code>docCookies.setItem(<em>name</em>, <em>value</em>[, <em>end</em>[, <em>path</em>[, <em>domain</em>[, <em>secure</em>]]]])</code></pre> - -<h5 id="Description">Description</h5> - -<p>新增/重写一个 cookie.</p> - -<h5 id="参数">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>新增/重写一个 cookie的 <a href="#new-cookie_syntax">名字</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符传</code></a>).</dd> - <dt><code>value</code></dt> - <dd>cookie的<a href="#new-cookie_syntax">值</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符串</code></a>).</dd> - <dt><code>end</code> <font face="Helvetica, arial, sans-serif"><span style="background-color: #eeeeee; font-size: 14px; font-weight: 400;">可选</span></font></dt> - <dd><code><a href="#new-cookie_max-age">max-age</a>（最大有效时间）单位秒</code> (e.g. <code>31536e3</code> 表示一年, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code> </a> 表示永不过期的cookie), 或者以<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a></code> 格式或者<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> 的<a href="#new-cookie_expires"><code>expires</code></a> date（过期时间）; 如果没有，指定的cookie将在会话结束时到期 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number"><code>number</code></a> – finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> – <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). - <div class="note" id="max-age_note" style="margin-top: 1em;"> - <p><strong>Note:</strong> 尽管 <a href="https://tools.ietf.org/html/rfc6265#section-5.2.2">officially defined in rfc6265</a>, <code>max-age</code> 在 Internet Explorer, Edg和一些移动端浏览器上不兼容. 因此，将数字传递给<code>end</code>参数可能无法按预期工作. 可能的解决方案可能是将相对时间转换为绝对时间。例如，以下代码：</p> - - <pre class="brush: js">docCookies.setItem("mycookie", "Hello world!", 150);</pre> - - <p>可以使用绝对日期重写，如下例所示：</p> - - <pre class="brush: js"> maxAgeToGMT (nMaxAge) { - return nMaxAge === Infinity ? "Fri, 31 Dec 9999 23:59:59 GMT" : (new Date(nMaxAge * 1e3 + Date.now())).toUTCString(); -} - -docCookies.setItem("mycookie", "Hello world!", maxAgeToGMT(150));</pre> - - <p>在上面的代码中，函数<code> maxAgeToGMT() </code>用于从相对时间（即，从“age”）创建<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a>.</code></p> - </div> - </dd> - <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>可访问此cookie的路径. 例如，“/”，“/ mydir”;如果未指定，则默认为当前文档位置的当前路径(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> - <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>可访问此cookie的域名. 例如，<code>“example.com”</code>，<code>“.example.com”</code>（包括所有子域）或<code>“subdomain.example.com”</code>; 如果未指定，则默认为当前文档位置的主机端口(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> - <dt><code>secure</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>cookie将仅通过https安全协议传输 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean"><code>boolean</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> -</dl> - -<h3 id="获取一个cookie">获取一个cookie</h3> - -<h5 id="语法_2">语法</h5> - -<pre class="syntaxbox"><code>docCookies.getItem(<em>name</em>)</code></pre> - -<h5 id="描述">描述</h5> - -<p>读一个cookie。如果cookie不存在，则返回null值。Parameters</p> - -<h5 id="参数_2">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>读取cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> -</dl> - -<h3 id="移除一个cookie">移除一个cookie</h3> - -<h5 id="语法_3">语法</h5> - -<pre class="syntaxbox"><code>docCookies.removeItem(<em>name</em>[, <em>path</em>[, <em>domain</em>]])</code></pre> - -<h5 id="描述_2">描述</h5> - -<p>删除一个cookie.</p> - -<h5 id="参数_3">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>待移除cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> - <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>例如，"<code>/"</code>，"<code>/ </code><code>mydir"</code>;如果未指定，则默认为当前文档位置的当前路径 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> - <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>例如, <code>"example.com"</code>, 或者 <code>"subdomain.example.com"</code>; 如果未指定，则默认为当前文档位置的主机端口（字符串或null），但不包括子域。 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>), 但不包括子域名。与早期的规范相反，域名中的前置的点被忽略。如果指定了域，则始终包含子域。 - <div class="note"><strong>Note:</strong> 要删除跨子域的cookie，您需要想<code>setItem()样</code>在<code>removeItem()</code>中指定domain属性。</div> - </dd> -</dl> - -<h3 id="检查一个cookie（是否存在）">检查一个cookie（是否存在）</h3> - -<h5 id="语法_4">语法</h5> - -<pre class="syntaxbox"><code>docCookies.hasItem(<em>name</em>)</code></pre> - -<h5 id="描述_3">描述</h5> - -<p>检查当前位置是否存在cookie。</p> - -<h5 id="参数_4">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>待检查cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> -</dl> - -<h3 id="获取所有cookie列表">获取所有cookie列表</h3> - -<h5 id="Syntax">Syntax</h5> - -<pre class="syntaxbox"><code>docCookies.keys()</code></pre> - -<h5 id="Description_2">Description</h5> - -<p>返回此位置的所有可读cookie的数组。</p> - -<h3 id="Example_usage">Example usage:</h3> - -<pre class="brush: js">docCookies.setItem("test0", "Hello world!"); -docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity); -docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12)); -docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog"); -docCookies.setItem("test4", "Hello world!", "Wed, 19 Feb 2127 01:04:55 GMT"); -docCookies.setItem("test5", "Hello world!", "Fri, 20 Aug 88354 14:07:15 GMT", "/home"); -docCookies.setItem("test6", "Hello world!", 150); -docCookies.setItem("test7", "Hello world!", 245, "/content"); -docCookies.setItem("test8", "Hello world!", null, null, "example.com"); -docCookies.setItem("test9", "Hello world!", null, null, null, true); -docCookies.setItem("test1;=", "Safe character test;=", Infinity); - -alert(docCookies.keys().join("\n")); -alert(docCookies.getItem("test1")); -alert(docCookies.getItem("test5")); -docCookies.removeItem("test1"); -docCookies.removeItem("test5", "/home"); -alert(docCookies.getItem("test1")); -alert(docCookies.getItem("test5")); -alert(docCookies.getItem("unexistingCookie")); -alert(docCookies.getItem()); -alert(docCookies.getItem("test1;=")); -</pre> diff --git a/files/zh-cn/orphaned/web/api/document_object_model/events/index.html b/files/zh-cn/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 60ab48c450..0000000000 --- a/files/zh-cn/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: 事件及DOM -slug: orphaned/Web/API/Document_Object_Model/Events -tags: - - DOM - - events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<p>{{DefaultAPISidebar("DOM")}}</p> - -<h2 id="Introduction" name="Introduction">简介</h2> - -<p>这一章节介绍了DOM事件模型（DOM Event Model）。主要描述了<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">事件（Event）</a>接口本身以及DOM节点中的事件注册接口、<a href="/en-US/docs/Web/API/EventTarget.addEventListener">事件监听接口</a>，以及几个展示了多种事件接口之间相互关联的较长示例。</p> - -<p>这里有一张非常不错的图表清晰地解释了在<a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM3级事件草案（DOM Level 3 Events draft）</a>中通过DOM处理事件流的三个阶段。</p> - -<p>也可以通过示例章节的 <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">示例5：事件传递</a> 获取更多事件如何在DOM中流转的相关细节。</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">注册事件监听器</h2> - -<p>这里有3种方法来为一个DOM元素注册事件回调。</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js">// 假设 myButton 是一个按钮 -myButton.addEventListener('click', greet, false); -function greet(event) { - // 打印并查看event对象 - // 打印arguments，以防忽略了其他参数 - console.log('greet: ' + arguments); - alert('Hello world'); -} -</pre> - -<p>你应该在现代Web技术的页面中使用这个方法。</p> - -<p>备注：IE 6-8 不支持这一方法，但提供了类似的API即 {{domxref("EventTarget.attachEvent")}} 用以替代。考虑到跨浏览器兼容性问题请使用有效的JS代码库。</p> - -<p>更多细节可在 {{domxref("EventTarget.addEventListener")}} 参考页面中找到.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/zh-CN/docs/Web/Guide/HTML/Event_attributes">HTML 属性</a></h3> - -<pre class="brush: html"><button onclick="alert('Hello world!')"> -</pre> - -<p>属性中的JS代码触发时通过event参数将Event类型对象传递过去的。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理，已经在HTML规范中被描述</a>。</p> - -<p>应该尽量避免这种书写方式，这将使HTML变大并减少可读性。考虑到内容/结构及行为不能很好的分开，这将造成bug很难被找到。</p> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 元素属性</h3> - -<pre class="brush: js">// 假设 myButton 是一个按钮 -myButton.onclick = function(event){alert('Hello world');}; -</pre> - -<p>带有event参数的函数可以这样被定义。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理，已经在HTML规范中被描述。</a></p> - -<p>这种方式的问题是每个事件及每个元素只能被设置一个回调。</p> - -<h2 id="访问事件接口">访问事件接口</h2> - -<p>事件回调可以被绑定到包括DOM元素、文档、{{domxref("window")}} 等多种对象上。当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。</p> - -<p> {{domxref("Event")}} 接口可以在回调函数内被访问到，通过被传递进来做为第一个参数的事件对象。以下这个简单例子展示了如何将事件对象传递给事件回调函数，同时可以在这个函数中使用。</p> - -<pre class="brush: js">function foo(evt) { - // evt参数自动分配事件对象 - alert(evt); -} -table_el.onclick = foo; -</pre> - -<h2 id="下级页面导航">下级页面导航</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model">DOM相关参考</a></li> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Introduction">DOM介绍</a></li> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Events">事件及DOM</a></li> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Examples">样例</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html b/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html deleted file mode 100644 index cc18771f80..0000000000 --- a/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: DocumentOrShadowRoot -slug: orphaned/Web/API/DocumentOrShadowRoot -tags: - - API - - DocumentOrShadowRoot - - Interface - - NeedsTranslation - - Reference - - TopicStub - - shadow dom -translation_of: Web/API/DocumentOrShadowRoot -original_slug: Web/API/DocumentOrShadowRoot ---- -<div>{{APIRef("Web Components")}}</div> - -<p><span class="seoSummary"><a href="/zh-CN/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> 的 <strong><code>DocumentOrShadowRoot</code></strong> 接口提供了 documents 与 shadow roots 之间共享的 API。The following features are included in both {{DOMxRef("Document")}} and {{DOMxRef("ShadowRoot")}}.</span></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> - <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that has focus.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt> - <dd>Returns the {{DOMxRef('Element')}} that's currently in full screen mode for this document.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the element set as the target for mouse events while the pointer is locked. It returns <code>null</code> if lock is pending, the pointer is unlocked, or if the target is in another document.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef('StyleSheetList')}} of {{DOMxRef('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> - <dd>Returns a {{DOMxRef('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> - <dd>Returns the topmost element at the specified coordinates.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> - <dd>Returns an array of all elements at the specified coordinates.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> - <dd>Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}} {{non-standard_inline}}</dt> - <dd>Returns the topmost node at the specified coordinates.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}} {{non-standard_inline}}</dt> - <dd>Returns an array of all nodes at the specified coordinates.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Implementation in Shadow DOM.</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.DocumentOrShadowRoot")}}</p> - -<p>[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.</p> diff --git a/files/zh-cn/orphaned/web/api/documenttouch/index.html b/files/zh-cn/orphaned/web/api/documenttouch/index.html deleted file mode 100644 index 9dd10a6ba5..0000000000 --- a/files/zh-cn/orphaned/web/api/documenttouch/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: DocumentTouch -slug: orphaned/Web/API/DocumentTouch -translation_of: Web/API/DocumentTouch -original_slug: Web/API/DocumentTouch ---- -<p>{{ ApiRef("DOM") }}</p> - -<p>{{ obsolete_header(25) }}</p> - -<p><strong style="font-size: 12px; line-height: 18px; background-color: rgba(230, 96, 0, 0.45098);">从Gecko 25 (Firefox 25 / Thunderbird 25 / SeaMonkey 2.22)开始被废弃</strong></p> - -<p><span style="font-size: 12px; line-height: 18px; background-color: rgba(230, 96, 0, 0.45098);">本特性已经被废弃，虽然它仍然可以在一些浏览器中工作，它随时都可能被移除，我们不鼓励使用它，你应尽量避免使用它。</span></p> - -<p><code>DocumentTouch</code> 接口提供了一个便利的方法来创建 {{ domxref("Touch") }} 和 {{ domxref("TouchList") }} 对象, 可是它将被移除。 但这个方法将会继续在{{domxref("Document")}} 接口中存在.</p> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{ domxref("DocumentTouch.createTouch()") }}</dt> - <dd>创建一个新的 {{ domxref("Touch") }} 对象.</dd> - <dt>{{ domxref("DocumentTouch.createTouchList()") }}</dt> - <dd>创建一个新的 {{ domxref("TouchList") }} 对象.</dd> -</dl> - -<h2 id="更多">更多</h2> - -<ul> - <li><a href="/en/DOM/Touch_events" title="en/DOM/Touch events">Touch events</a></li> - <li>{{ domxref("Touch") }}</li> - <li>{{ domxref("TouchList") }}</li> - <li>{{ domxref("TouchEvent") }}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/element/currentstyle/index.html b/files/zh-cn/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index c2f23d78b4..0000000000 --- a/files/zh-cn/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="概述">概述</h2> - -<p><strong><code>Element.currentStyle</code></strong> 是一个与 {{domxref("window.getComputedStyle")}}方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.</p> - -<h2 id="规范">规范</h2> - -<p>没有相关规范。</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">在MSDN中对该属性进行了描述</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/element/runtimestyle/index.html b/files/zh-cn/orphaned/web/api/element/runtimestyle/index.html deleted file mode 100644 index 80aca7048a..0000000000 --- a/files/zh-cn/orphaned/web/api/element/runtimestyle/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Element.runtimeStyle -slug: orphaned/Web/API/Element/runtimeStyle -translation_of: Web/API/Element/runtimeStyle -original_slug: Web/API/Element/runtimeStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="概要">概要</h2> - -<p><span class="seoSummary"><strong><code>Element.runtimeStyle</code> </strong>是一个元素专有属性，和 {{domxref("HTMLElement.style")}} 相似，除了其中的样式属性外<strong>，</strong>{{domxref("HTMLElement.style")}} 具有更高的优先级和修改能力。<strong><code>runtimeStyle</code> </strong></span>不能修改 <code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> 中的<code>content</code>属性，其<span class="seoSummary">在旧版的IE浏览器上可用。</span></p> - -<h2 id="规范">规范</h2> - -<p>不属于任何规范的一部分。</p> - -<p>微软对此有一篇<a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">描述文档</a> <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">has a description on MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("Element.currentStyle")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/zh-cn/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index fae28c710d..0000000000 --- a/files/zh-cn/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: HTMLElement.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><code><strong>HTMLElement.style</strong></code> 属性返回一个 <a href="/zh-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象，表示元素的 内联<a href="/zh-CN/docs/Web/HTML/Global_attributes#style"><code>style</code> 属性（attribute）</a>，但忽略任何样式表应用的属性。 通过 <code>style</code> 可以访问的 CSS 属性列表，可以查看 <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a>。</p> - -<p>由于 <code>style</code> 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。</p> - -<h3 id="设置_style_属性">设置 <code>style</code> 属性</h3> - -<p>注意<strong>不能</strong>通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的<code><a href="https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration">CSSStyleDeclaration</a>对象是只读的。但是style属性本身的属性<strong>能</strong>够用来设置样式。此外，通过单独的样式属性（如</code>elt.style.color = '...'<code>）比用</code>elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。</p> - -<h2 id="例子">例子</h2> - -<pre class="brush:js">// 在单个语句中设置多个样式 -elt.style.cssText = "color: blue; border: 1px solid black"; -// 或者 -elt.setAttribute("style", "color:red; border: 1px solid blue;"); - -// 设置特定样式，同时保持其他内联样式值不变 -elt.style.color = "blue"; -</pre> - -<h3 id="获取元素样式信息">获取元素样式信息</h3> - -<p>通常，要了解元素样式的信息，仅仅使用 <code>style</code> 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 {{HTMLElement("head")}} 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 {{domxref("window.getComputedStyle()")}}。</p> - -<pre class="brush: html"><!DOCTYPE HTML> -<html> -<body style="font-weight:bold;"> - - <div style="color:red" id="myElement">..</div> - - </body> -</html></pre> - -<p>下面的代码输出 style 所有属性的名字，以及为元素 <code>elt</code> 显式设置的属性值和继承的计算值（computed value）：</p> - -<pre class="brush: js">var element = document.getElementById("myElement"); -var out = ""; -var elementStyle = element.style; -var computedStyle = window.getComputedStyle(element, null); - -for (prop in elementStyle) { - if (elementStyle.hasOwnProperty(prop)) { - out += " " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n"; - } -} -console.log(out)</pre> - -<p>输出结果如下:</p> - -<pre>... -fontWeight = '' > 'bold' -color = 'red' > 'rgb(255, 0, 0)' -... -</pre> - -<p>请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> - -<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> - -<h2 id="兼容性">兼容性</h2> - - - -<p>{{Compat("api.HTMLElement.style")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/entity/index.html b/files/zh-cn/orphaned/web/api/entity/index.html deleted file mode 100644 index bcece696c5..0000000000 --- a/files/zh-cn/orphaned/web/api/entity/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Entity -slug: orphaned/Web/API/Entity -translation_of: Web/API/Entity -original_slug: Web/API/Entity ---- -<p>{{APIRef("DOM")}} {{draft}} {{obsolete_header}}</p> - -<p>对DTD实体的只读引用. 也继承 {{domxref("Node")}} 的方法和属性。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td><code>inputEncoding</code>, <code>xmlEncoding</code>, and <code>xmlVersion</code> were added</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/fetchobserver/index.html b/files/zh-cn/orphaned/web/api/fetchobserver/index.html deleted file mode 100644 index aa930a2e4a..0000000000 --- a/files/zh-cn/orphaned/web/api/fetchobserver/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: FetchObserver -slug: orphaned/Web/API/FetchObserver -translation_of: Web/API/FetchObserver -original_slug: Web/API/FetchObserver ---- -<div>{{draft}}{{APIRef("Fetch API")}}{{SeeCompatTable}}</div> - -<p><font><font>在</font></font><strong><code>FetchObserver</code></strong><font><font>接口</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><font><font>提取API</font></font></a><font><font>表示观察者对象，它允许您检索关于为获取请求的状态信息。</font></font></p> - -<h2 id="Properties">Properties</h2> - -<p><em><font><font>FetchObserver接口从其父接口继承属性</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" title="EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们提供监听器。"><code>EventTarget</code></a><font><font>。</font></font></em></p> - -<dl> - <dt>{{domxref("FetchObserver.state")}} {{readonlyInline}}</dt> - <dd>Returns a <code>FetchState</code> enum value indicating the current state of the fetch request.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("FetchObserver.onstatechange")}}</dt> - <dd>Invoked when a {{event("statechange_(cancellable_fetch)", "statechange")}} event fires, i.e. when the state of the fetch request changes.</dd> - <dt>{{domxref("FetchObserver.onrequestprogress")}}</dt> - <dd>Invoked when a {{event("requestprogress")}} event fires, i.e. when the request progresses.</dd> - <dt>{{domxref("FetchObserver.onresponseprogress")}}</dt> - <dd>Invoked when a {{event("responseprogress")}} event fires, i.e. when the download of the response progresses.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The FetchSignal interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<h2 id="Examples">Examples</h2> - -<p>In the following snippet, we create a new {{domxref("FetchController")}} object, get its <code>signal</code>, and then give the signal to the <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> via the signal parameter of its <code>init</code> object so the controller can control it. Later on we specify an event listener on a cancel button so that when the button is clicked, we abort the fetch request using {{domxref("FetchController.abort()")}}.</p> - -<p>We also specify an observe property inside the fetch request <code>init</code> object — this contains a {{domxref("ObserverCallback")}} object, the sole purpose of which is to provide a callback function that runs when the fetch request runs. This returns a {{domxref("FetchObserver")}} object that can be used to retrieve information concerning the status of a fetch request.</p> - -<p>Here we use {{domxref("FetchController.responseprogress")}} and {{domxref("FetchController.onstatechange")}} event handlers to respectively fill up a progress bar as more of the reponse downloads, and to determine when the download has completed and display a message to let the user know.</p> - -<p><strong>Note that these event handlers are not yet supported anywhere.</strong></p> - -<pre class="brush: js">var controller = new FetchController(); -var signal = controller.signal; - -downloadBtn.addEventListener('click', function() { - fetch(url, { - signal, - observe(observer) { - observer.onresponseprogress = function(e) { - progress.max = e.total; - progress.value = e.loaded; - } - - observer.onstatechange = function() { - if (observer.state = 'complete') { - reports.textContent = 'Download complete'; - } - } - } - }).then( ... ) // do something with the response -}); - -cancelBtn.addEventListener('click', function() { - controller.abort(); -});</pre> - -<p>You can find a work-in-progress demo showing usage of <code>FetchObserver</code> on GitHub (see the <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-signal-controller-observer">source code</a> and the <a href="https://mdn.github.io/fetch-examples/fetch-signal-controller-observer/">live example</a>).</p> - -<h2 id="Specifications">Specifications</h2> - -<p>Not part of a specification yet.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatNo}}</p> - </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td> - <p>{{CompatNo}}</p> - </td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/fullscreenoptions/index.html b/files/zh-cn/orphaned/web/api/fullscreenoptions/index.html deleted file mode 100644 index c3328c99b2..0000000000 --- a/files/zh-cn/orphaned/web/api/fullscreenoptions/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: FullscreenOptions -slug: orphaned/Web/API/FullscreenOptions -translation_of: Web/API/FullscreenOptions -original_slug: Web/API/FullscreenOptions ---- -<p>{{APIRef("Fullscreen API")}}</p> - -<p><span class="seoSummary">当调用{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}} 元素以将该元素置于全屏模式时，使用 <strong><code>FullscreenOptions</code></strong> 字典提供配置选项。</span></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}</dt> - <dd>在元素处于全屏模式时，控制是否保持浏览器用户界面元素可见的字符串。默认的<code>“auto”</code>让浏览器做出这个决定。</dd> -</dl> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.FullscreenOptions")}}</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> - <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> - <li>{{DOMxRef("Element.requestFullscreen()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlelement/forcespellcheck/index.html b/files/zh-cn/orphaned/web/api/htmlelement/forcespellcheck/index.html deleted file mode 100644 index cde999ef48..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlelement/forcespellcheck/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: HTMLElement.forceSpellCheck() -slug: orphaned/Web/API/HTMLElement/forceSpellCheck -translation_of: Web/API/HTMLElement/forceSpellCheck -original_slug: Web/API/HTMLElement/forceSpellCheck ---- -<p>{{ APIRef("HTML DOM") }}{{SeeCompatTable}}</p> - -<p>强制对HTML元素进行拼写和语法检查，即使用户没有关注元素。此方法将覆盖浏览器的行为。检查的界面，例如是否出现红色下划线，由浏览器确定。</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox">element.forceSpellCheck()</pre> - -<h2 id="Specification" name="Specification">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>First W3C snapshot of {{SpecName('HTML WHATWG')}} with the method defined in it.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See Also" name="See Also">See Also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Controlling spell checking in HTML forms</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlhyperlinkelementutils/index.html b/files/zh-cn/orphaned/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index 399a1398da..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: URLUtils -slug: orphaned/Web/API/HTMLHyperlinkElementUtils -translation_of: Web/API/HTMLHyperlinkElementUtils -original_slug: Web/API/HTMLHyperlinkElementUtils ---- -<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> - -<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p> - -<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p> - -<h2 id="属性">属性</h2> - -<div class="note"> -<p><strong>注意：</strong>This interface doesn't inherit any property.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the whole URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the domain of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the port number of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the username specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the password specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).</dd> -</dl> - -<h2 id="方法">方法</h2> - -<div class="note"> -<p><strong>注意：</strong>This interface doesn't inherit any method.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/blur/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/blur/index.html deleted file mode 100644 index 98efb73c06..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/blur/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: HTMLElement.blur() -slug: orphaned/Web/API/HTMLOrForeignElement/blur -tags: - - API - - HTML DOM - - HTMLElement - - Method - - Reference -translation_of: Web/API/HTMLOrForeignElement/blur -original_slug: Web/API/HTMLOrForeignElement/blur ---- -<p>{{ APIRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p><strong>blur</strong>方法用来移除当前元素所获得的键盘焦点.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">element.blur() -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-28216144">blur</a></p> -<h3 id="相关链接">相关链接</h3> -<ul> - <li><a href="/zh-cn/DOM/element.focus" title="zh-cn/DOM/element.focus">DOM element focus</a></li> -</ul> -<p>{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 6607ae59b3..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -tags: - - HTMLElement.dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<p>{{ APIRef }}</p> - -<p><code><strong>HTMLElement.dataset</strong></code>属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有<a href="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">自定义数据属性</a>(<em>data-*</em>)集。</p> - -<p>它是一个<a href="/zh-CN/DOM/DOMStringMap">DOMString的映射</a>，每个自定义数据属性的一个条目。</p> - -<p>请注意，<strong>dataset </strong>属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。</p> - -<p>还要注意，一个HTML <code><strong>data-</strong></code><em>attribute </em>及其对应的DOM <code><strong>dataset.</strong></code><em>property</em> 不共享相同的名称，但它们总是相似的：</p> - -<ul> - <li>在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母，数字和以下字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) - 但不是任何ASCII大写字母（A到Z）。</li> - <li>JavaScript 中的一个自定义数据属性的名称是相同HTML属性的名称，但在 camelCase中，没有破折号，点等。</li> -</ul> - -<p> </p> - -<p>自定义的数据属性名称是以 <code>data- </code>开头的。 它必须要遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" rel="external nofollow" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>)。此外不应包含ASCII 码大写字母。</p> - -<p>自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：</p> - -<ul> - <li>前缀 <code>data-</code> 被去除(包括减号)；</li> - <li>对于每个在ASCII小写字母<span style="line-height: 1.5;"> </span><code style="font-style: normal;">a到</code><span style="line-height: 1.5;"> </span><code style="font-style: normal;">z前面</code>的减号 (<code>U+002D</code>)，减号会被去除，并且字母会转变成对应的大写字母。</li> - <li>其他字符（包含其他减号）都不发生变化</li> -</ul> - -<p>与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：</p> - -<ul> - <li>约束：减号在转变前一定不能紧跟一个ASCII小写字母 <code style="font-style: normal;">a</code> 到 <code style="font-style: normal;">z之间；</code></li> - <li>添加 <code>data-</code> 前缀;</li> - <li>任何ASCII大写字母 <code>A</code> 到 <code>Z</code> 将转化成一个减号紧跟对应的小写字母；</li> - <li>其他字符不会发生变化</li> -</ul> - -<p>上面规则的约束是为了保证这两种转换是正好相反的转换。</p> - -<p>例如，属性名称 <code>data-abc-def</code> 与键值 <code>abcDef 相对应。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>; -<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre> - -<h2 id="实例">实例</h2> - -<pre class="brush: js"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe -</div> - -var el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. - -// 'someDataAttr' in el.dataset === false - -el.dataset.someDataAttr = 'mydata'; -// 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8</td> - <td>{{ CompatGeckoDesktop("6.0") }}</td> - <td>11</td> - <td>11.10</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/focus/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/focus/index.html deleted file mode 100644 index 2e465a6b0a..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/focus/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: HTMLElement.focus() -slug: orphaned/Web/API/HTMLOrForeignElement/focus -tags: - - API - - 参考 - - 方法 - - 焦点 -translation_of: Web/API/HTMLOrForeignElement/focus -original_slug: Web/API/HTMLOrForeignElement/focus ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。</span></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><var>element</var>.focus(<var>options</var>); // Object parameter</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>An optional object providing options to control aspects of the focusing process. This object may contain the following property:</dd> - <dd> - <dl> - <dt><code>preventScroll</code> {{optional_inline}}</dt> - <dd>A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of <code>false</code> for <code>preventScroll</code> (the default) means that the browser will scroll the element into view after focusing it. If <code>preventScroll</code> is set to <code>true</code>, no scrolling will occur.</dd> - </dl> - </dd> -</dl> - -<h2 id="示例">示例</h2> - -<h3 id="将焦点设置到文本框上">将焦点设置到文本框上</h3> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">focusMethod = function getFocus() { - document.getElementById("myTextField").focus(); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><input type="text" id="myTextField" value="Text field."> -<p></p> -<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button> -</pre> - -<h4 id="结果">结果</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> - -<h3 id="将焦点设置到按钮上">将焦点设置到按钮上</h3> - -<h4 id="JavaScript_2">JavaScript</h4> - -<pre>focusMethod = function getFocus() { - document.getElementById("myButton").focus(); -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre><button type="button" id="myButton">Click Me!</button> -<p></p> -<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button></pre> - -<h4 id="结果_2">结果</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> - -<h3 id="Focus_with_focusOption">Focus with focusOption</h3> - -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">focusScrollMethod = function getFocus() { - document.getElementById("myButton").focus({preventScroll:false}); -} -focusNoScrollMethod = function getFocusWithoutScrolling() { - document.getElementById("myButton").focus({preventScroll:true}); -} - -</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button> -<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button> - -<div id="container" style="height: 1000px; width: 1000px;"> -<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button> -</div> - -</pre> - -<h4 id="结果_3">结果</h4> - -<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="备注">备注</h2> - -<ul> - <li>If you call <code>HTMLElement.focus()</code> from a mousedown event handler, you must call <code>event.preventDefault()</code> to keep the focus from leaving the <code>HTMLElement</code></li> - <li> - <p>Behaviour of the focus in relation to different HTML features like {{HTMLAttrxRef("tabindex")}} or {{Glossary("shadow tree","shadow dom", 1)}}, which previously remained under-specified, were recently updated (as October of 2019). Checkout <a href="https://blog.whatwg.org/focusing-on-focus">WHATWG blog</a> for more info.</p> - </li> -</ul> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.HTMLElement.focus")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>DOM method {{domxref("HTMLElement.blur()")}} to remove the focus from an element.</li> - <li>{{ domxref("document.activeElement") }} to know which is the currently focused element.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/tabindex/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/tabindex/index.html deleted file mode 100644 index 576b630344..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/tabindex/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: HTMLElement.tabIndex -slug: orphaned/Web/API/HTMLOrForeignElement/tabIndex -translation_of: Web/API/HTMLOrForeignElement/tabIndex -original_slug: Web/API/HTMLOrForeignElement/tabIndex ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>获取或设置当前元素的tab键激活顺序.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">element.tabIndex = <em>index </em><em>index </em>= element.tabIndex -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>index</code>是一个数字,表示顺序。取值需要在0到32767之间。</li> -</ul> - -<p>Tab键的遍历顺序是这样的：</p> - -<ol> - <li>对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。</li> - <li>对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。</li> - <li>处于不可用状态的元素不会被遍历到。</li> -</ol> - -<p>支持tabIndex属性的元素有：a,area,button,input,object,select和textarea<font face="monospace" size="3"><span style="line-height: 19.5px;">。</span></font></p> - -<p>tabIndex的值不需要是连续的，也不需要以某个特定值开始。</p> - -<h3 id="Example" name="Example">例子</h3> - -<pre>var b1 = document.getElementById("button1"); -b1.tabIndex = 1; -</pre> - -<h3 id="Specification" name="Specification">规范</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">W3C DOM Level 2 HTML tabIndex</a></p> - -<p>了解更多,请查看: <a href="/zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex" title="zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex">The solution: changes to standard behavior of tabindex</a></p> - -<p>{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/zh-cn/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 3d61520d83..0000000000 --- a/files/zh-cn/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: 基本概念 -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - IndexedDB 总述 -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p>{{DefaultAPISidebar("IndexedDB")}}</p> - -<div class="summary"> -<p><strong>IndexedDB </strong>是一种在用户浏览器中持久存储数据的方法。它允许您不考虑网络可用性，创建具有丰富查询能力的可离线 Web 应用程序。IndexedDB 对于存储大量数据的应用程序（例如借阅库中的 DVD 目录）和不需要持久 Internet 连接的应用程序（例如邮件客户端、待办事项列表或记事本）很有用。</p> -</div> - -<h2 id="关于本文档">关于本文档</h2> - -<p>本简介讨论了 IndexedDB 中的基本概念和术语。为您提供了概览并解释了关键概念。</p> - -<p>您会发现以下非常有用的内容：</p> - -<ul> - <li>有关 IndexedDB 的设计和结构的概述，请参阅<a href="#concepts">概览</a>。</li> - <li>要了解有关 IndexedDB 术语的更多信息，请参阅<a href="#definitions">定义</a>部分。</li> - <li>有关如何使用 API 的详细教程，请参阅<a href="/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB">使用 IndexedDB</a>。</li> - <li>有关 IndexedDB API 的参考文档，请参阅主要的 <a href="/zh-CN/docs/Web/API/IndexedDB_API">IndexedDB API</a> 文章及其子页面，这些文章记录了 IndexedDB 使用的对象类型。</li> - <li>有关浏览器如何处理在后台存储数据的更多信息，请阅读<a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">浏览器存储限制和清理标准</a>。</li> -</ul> - -<h2 id="IndexedDB概况"> IndexedDB概况</h2> - -<p>使用IndexedDB，你可以使用一个key作为索引进行存储或者获取数据。 你可以在事务(transaction)中完成对数据的修改。和大多数web存储解决方案相同，indexedDB也遵从同源协议(<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>). 所以你只能访问同域中存储的数据，而不能访问其他域的。</p> - -<p>IndexedDB 是一种异步(<a href="/zh-cn/IndexedDB#Asynchronous_API">asynchronous</a>) API，异步API适用于大多数情况，包括<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>。因为在<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>上的使用，它过去也有一个同步(<a href="https://developer.mozilla.org/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">synchronous</a>)的版本，但是因为缺少web社区的支持，它已经被从规范中移除了。</p> - -<p>IndexedDB 过去有一个竞争规范—— WebSQL 数据库，但是W3C组织在2010年11月18日废弃了webSql。尽管两者都是存储的解决方案，但是他们提供的不是同样的功能。IndexedDB 和WebSQL的不同点在于WebSQL 是关系型数据库访问系统，IndexedDB 是索引表系统(key-value型)。</p> - -<h2 id="基本概念">基本概念</h2> - -<p>如果你因为使用其他类型数据库有某些固定思维，那么你在使用IndexedDB的时候可能会感到困惑，所以请牢记以下重要的概念：</p> - -<ul> - <li> - <p><strong>IndexedDB 数据库使用 key-value 键值对储存数据.</strong> values 数据可以是结构非常复杂的对象，key可以是对象自身的属性。你可以对对象的任何属性创建索引（index）以实现快速查询和列举排序。key可以是二进制对象。</p> - </li> - <li> - <p><strong>IndexedDB 是事务模式的数据库</strong>. 任何操作都发生在事务(<a href="#gloss_transaction">transaction)</a>中。 IndexedDB API提供了索引(indexes)、表(tables)、指针(cursors)等等，但是所有这些必须是依赖于某种事务的。因此，你不能在事务外执行命令或者打开指针。事务(transaction)有生存周期，在生存周期以后使用它会报错。并且，事务(transaction)是自动提交的，不可以手动提交。</p> - - <p>当用户在不同的标签页同时打开Web应用的两个实例时，这个事务模型就会非常有用。如果没有事务操作的支持，这两个实例就会互相影响对方的修改。如果你不熟悉数据库的事务模型，请参考<a class="link-https" href="https://zh.wikipedia.org/wiki/%E6%95%B0%E6%8D%AE%E5%BA%93%E4%BA%8B%E5%8A%A1">数据库事务（维基百科）</a>。 同时参考<a href="https://en.wikipedia.org/wiki/Database_transaction">transaction</a>文章中关于事务的定义部分。</p> - </li> - <li> - <p><strong>The IndexedDB API 基本上是异步的。</strong> IndexedDB的API不通过return语句返回数据，而是需要你提供一个回调函数来接受数据。执行API时，你不以同步（synchronous）方式对数据库进行“存储”和“读取”操作，而是向数据库发送一个操作“请求”。当操作完成时，数据库会以DOM事件的方式通知你，同时事件的类型会告诉你这个操作是否成功完成。这个过程听起来会有些复杂，但是里面是有明智的原因的。这个和<a href="/zh-cn/DOM/XMLHttpRequest">XMLHttpRequest</a>请求是类似的</p> - </li> - <li> - <p><strong>IndexedDB数据库“请求”无处不在。 </strong>我们上边提到，数据库“请求”负责接受成功或失败的DOM事件。每一个“请求”都包含<code>onsuccess</code>和<code>onerror事件</code>属性，同时你还对“事件”调用addEventListener()和removeEventListener()。“请求”还包括<code>readyState，</code><code>result</code>和<code>errorCode属性，用来表示“请求”的状态。result属性尤其神奇，他可以根据“请求”生成的方式变成不同的东西，例如：</code>IDBCursor实例、刚插入数据库的数值对应的键值（key）等<code>。</code></p> - </li> - <li> - <p><strong>IndexedDB在结果准备好之后通过DOM事件通知用户。</strong> DOM事件总是有一个类型（<code>type</code>）属性（在IndexedDB中，该属性通常设置为<code>success</code>或<code>error</code>）。DOM事件还有一个目标（<code>target</code>）属性，用来告诉事件是被谁触发的。通常情况下，目标（<code>target</code>）属性是数据库操作生成的IDBRequest。成功（success）事件不弹出提示并且不能撤销，错误（error）事件会弹出提示且可以撤销。这一点是非常重要的，因为除非错误事件被撤销，否则他们会终止所在的任何事务。</p> - </li> - <li> - <p><strong>IndexedDB是面向对象的。</strong>indexedDB不是用二维表来表示集合的关系型数据库。这一点非常重要，将影响你设计和建立你的应用程序。</p> - - <p>传统的关系型数据库，你需要用到二维表来存储数据集合（每一行代表一个数据，每一列代表一个属性），indexedDB有所不同，它要求你为一种数据创建一个对象仓库(object Store)，只要这种数据是一个JavaScript对象即可。每个对象仓库都有一个索引(index)集合以方便查询和迭代遍历。如果你不熟悉面向对象的数据库管理系统，可以参考<a href="https://en.wikipedia.org/wiki/Object_database">维基百科有关对象数据库的内容</a></p> - </li> - <li> - <p><strong>indexedDB不使用结构化查询语言（SQL）。</strong>它通过索引(index)所产生的指针(cursor)来完成查询操作，从而使你可以迭代遍历到结果集合。如果你不熟悉NoSQL系统，可以参考<a href="https://en.wikipedia.org/wiki/Object_database">维基百科相关文章</a>。</p> - </li> - <li> - <p><strong>IndexedDB遵循同源（same-origin）策略</strong> “源”指脚本所在文档URL的域名、应用层协议和端口。每一个“源”都有与其相关联的数据库。在同一个“源”内的所有数据库都有唯一、可区别的名称。</p> - - <p>IndexedDB的安全机制避免应用访问非同“源”的数据。例如，<a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a>的应用或页面可以访问<a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>的数据，因为他们同“源”。但是它们不能访问<a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a>（不同端口）或<a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a>（不同协议）的数据，因为他们不同“源”。</p> - </li> - <li> - <div class="blockIndicator note"> - <p>注意：第三方窗口上下文（例如HTML元素<strong>iframe</strong>）可以访问它所嵌入的网页的IndexedDB，除非浏览器被设置为<a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">never accept third party cookies</a> (see {{bug("1147821")}}.)</p> - </div> - </li> -</ul> - -<h2 id="名词解释">名词解释</h2> - -<p>本节定义并解释了IndexedDB API中所使用的术语</p> - -<h3 id="数据库">数据库</h3> - -<dl> - <dt><strong>数据库（database）</strong></dt> - <dd>一个信息库，通常包含一个或多个 <a href="/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB$edit#gloss_object_store">object stores</a>. 每个数据库必须包含以下内容：</dd> - <dd> - <ul> - <li>名字(Name)。它标识了一个特定源中的数据库，并且在数据库的整个生命周期内保持不变。 此名字可以为任意字符串值（包括空字符串）。</li> - <li>当前版本(<a href="/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB$edit#gloss_version">version</a>)。当一个数据库首次创建时，它的 version 为1，除非另外指定. 每个数据库在任意时刻只能有一个 version。</li> - </ul> - </dd> - <dt>持久性（durable）</dt> - <dd>在 Firefox 中，IndexedDB 是持久的，也就是说在一个读写事务中，一旦 <code>IDBTransaction.oncomplete</code> 事件被触发，就代表着数据已经确保被写入磁盘中了。</dd> - <dd>从 Firfox 40 起，IndexedDB 事务放松了对持久性的保证以提高性能（参见 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1112702">Bug1112702</a>），这与其他支持 IndexedDB 的浏览器的处理方式相同。在这种情况下，当操作系统被告知去写入数据后 <code>complete</code> 事件便被触发，但此时数据可能还没有真正的写入磁盘。事件触发因此变得更快，但这样会有极小的机会发生以下情况：如果操作系统崩溃或在数据被写入磁盘前断电，那么整个事务都将丢失。由于这种灾难事件是罕见的，大多数使用者并不需要过分担心。</dd> - <dt>对象仓库(object store)</dt> - <dd> - <p>数据在数据库中存储的方式, 数据以键值对形式被对象仓库永久持有。对象仓库中的的数据以 <em><a href="#gloss_key">keys</a></em> 升序排列。</p> - - <p>每一个对象仓库在同一个数据库中必须有唯一的名字。对象存储可以有一个 <em><a href="#gloss_keygenerator">key generator</a></em> 和一个 <em><a href="#gloss_keypath">key path</a>。</em>如果对象仓库有 key path，则使用 <em><a href="#gloss_inline_key">in-line keys</a></em>; 否则使用 <em><a href="#gloss_outofline_key">out-of-line keys</a>。</em></p> - - <p>关于对象仓库的详细文档，请参考 <a href="../../../../zh-cn/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 或者 <a href="../../../../zh-cn/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>。</p> - </dd> - <dt>版本（version）</dt> - <dd>当第一次创建一个数据库，它的版本为整型1。每个数据库依次有一个版本号; 一个数据库不能同时存在多个版本号。改变版本的唯一方法是通过一个比当前版本号更高的值去打开数据库。这会开启一个 <code>VERSION_CHANGE</code> 事务并且触发 <code>upgradeneeded</code> 事件。只有在该事件的处理函数中才能更新数据库模式。</dd> - <dd>注意：这里的描述以<a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">最新规范</a>为准，这些规范可能只在最新的浏览器中实现了。老旧的浏览器实现了现在已弃用和移除的 <code>IDBDataBase.setVersion()</code> 方法。</dd> - <dt>数据库连接（database connection）</dt> - <dd>通过打开数据库创建的操作。一个给定的数据库可以同时拥有多个连接。</dd> - <dt>事务（transaction）</dt> - <dd>在一个特定的数据库上，一组具备原子性和持久性的数据访问和数据修改的操作。它是你与数据库交互的方式。并且，任何对于数据库中的数据读和修改的操作只能在事务中进行。</dd> - <dd> - <p>一个数据库连接可以拥有多个与之关联的事务，只要进行写操作事务的<a href="#">作用域</a>不相互重合。事务的作用域在事务被创建时就被确定，指定事务能够进行交互的对象仓库（object store），作用域一旦被确定就会在整个生命周期中保持不变。举个例子，如果一个数据库连接已经有了一个进行写操作的事务，其作用域覆盖 <code>flyingMonkey</code> 对象仓库，你可以开启新的事务其作用于 <code>unicornCentaur</code> 和 <code>unicornPegasus</code> 对象仓库。对于读操作的事务，你可以同时拥有多个，即使他们有重叠的作用域。</p> - - <p>事务被期望拥有较短的生命周期，所以浏览器会终止一个消耗时间过长的事务，为了释放存储资源，运行过久的事务会被锁定。你可以中断一个事务，来回滚事务中对数据库进行的操作。并且你甚至不需要等待事务开始或激活就可以中断它。</p> - - <p>事务有三种模式：读写、只读和版本变更。创建和删除对象仓库（object store）的唯一方法就是通过调用版本变更事务。了解更多关于事务类型的内容，请参考 <a href="/zh-cn/IndexedDB">IndexedDB</a>。</p> - - <p>因为所有的事情都在事务中发生，所以它是 <a href="../../../../zh-cn/IndexedDB/IDBTransaction">IndexedDB</a> 中非常重要的一个概念。了解更多关于事务，尤其是关于它和版本控制的关联，查看 <a href="../../../../zh-cn/IndexedDB/IDBTransaction">IDBTransaction</a> 中的参考文档。关于同步接口的文档，查看 <a href="../../../../zh-cn/IndexedDB/IDBTransactionSync">IDBTransactionSync</a>。</p> - </dd> - <dt>请求（request）</dt> - <dd>在数据库上进行读写操作完成后的操作。每一个请求代表一个读或写操作。</dd> - <dt><a id="索引（index）" name="索引（index）">索引（index）</a></dt> - <dd> - <p>一个对象仓库，专门用来查找另一个对象仓库（object store）中的记录，其中被查找的对象仓库被称为引用对象仓库。索引（index）是一个稳定的键值对（key-value）存储，其记录中的值（value）是引用对象仓库记录中的键（key）。当引用对象仓库中的记录新增、更新或删除时，索引中的记录会自动的进行粒子性增加。索引中的每一条记录只能指向引用对象仓库中的一条记录，但多个索引可以引用同一个对象仓库。当对象仓库发生改变时，所有引用该对象仓库的引用均会自动更新。</p> - - <p>可选地，你也可以适用<a href="#键（key）">键（key）</a>再对象仓库中查找记录。</p> - - <p>了解更多关于如何适用索引，查看<a href="/zh-cn/IndexedDB/Using_IndexedDB#Using_an_index">使用 IndexedDB</a>。index 的参考文档查看<a href="../../../../zh-cn/IndexedDB/IDBKeyRange"> IDBKeyRange</a>。</p> - </dd> -</dl> - -<h3 id="键和值">键和值</h3> - -<dl> - <dt><a id="键（key）" name="键（key）">键（key）</a></dt> - <dd>在对象仓库中阻止和检索被存储起来的值的数据值。数据仓库的键来源于以下三个方式之一：键生成器、键路径和显式指定的值。键必须是一种能够比较大小的数据类型。在同一个对象仓库中每条记录必须有一个独一无二的键，所以你不能在同一个对象仓库中为多个记录设置同样的键。</dd> - <dd> - <p>键可以是以下数据类型：字符串、日期、浮点和数组。对于数组，键的取值可以从空数组到无穷。并且你可以使用嵌套数组。注意，在 Firefox 11 之前的版本键只接受字符串和整形。</p> - - <p>可选地，你也可以通过<a href="#索引（index）">索引（index）</a>来查找记录。</p> - </dd> - <dt>键生成器（key generator）</dt> - <dd>一种生成有序键的机制。如果一个对象仓库并不具备一个键生成器，那么应用程序必须为被存储的记录提供键。生成器在仓库之间并不共享。它更多的是浏览器的实现细节，因为在 Web 开发中你并不会真正的去创建或访问键生成器。</dd> - <dt>内键（in-line key）</dt> - <dd>作为存储值一部分的键。内键由键路径（key path）查找。内键由生成器生成。当内键生成后，它会被键路径存储在值中，它也可以被当作键使用。</dd> - <dt>外键（out-of-line key）</dt> - <dd>与值分开存储的键。</dd> - <dt>键路径（key path）</dt> - <dd>指定浏览器如何从对象仓库或索引存储的值中提取键。一个合法的键路径可以是以下形式：一个空字符串，一个 JavasScript 标识符，或由句点分割的多个 JavaScript 标识符。但不能包括空格。</dd> - <dt>值（value）</dt> - <dd>每条记录包含一个值，该值可以包含任何 JavaScript 表达式，包括：<a href="/zh-cn/JavaScript/Reference/Global_Objects/Boolean">布尔</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Number">数字</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/String">字符串</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Date">日期</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Object">对象</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Array">数组</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/RegExp">正则</a>、<a href="/zh-CN/docs/">未定义</a>和 null。</dd> - <dd> - <p>对于对象和数组，它们的属性和值也可以是任意合法的值。</p> - - <p><a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">规范</a>允许你存储文件和<a href="/zh-cn/DOM/Blob">二进制对象</a>，但该标准只被 Firefox 11+ 实现。</p> - </dd> -</dl> - -<h3 id="范围和作用域">范围和作用域</h3> - -<dl> - <dt>作用域（scope）</dt> - <dd>事务所作用的一组对象仓库或索引。只读事务的作用域可以相互重叠并同时执行操作。但写操作事务的作用域不可以相互重叠。但你仍然可以同时开启多个拥有相同作用域的事务，只要保证他们的操作不会同时执行。</dd> - <dt>游标（cursor）</dt> - <dd>在键的某个范围内迭代查询多条记录的机制。游标有一个指向正在被迭代的对象仓库或索引的源。它处于该范围内的一个位置，并按照键的顺序正向或逆向的移动。有关游标的参考文档，查看 <a href="../../../../zh-cn/IndexedDB/IDBCursor">IDBCursor</a> 或 <a href="../../../../zh-cn/IndexedDB/IDBCursorSync">IDBCursorSync</a>。</dd> - <dt>键范围（key range）</dt> - <dd>用做键的数据类型上的连续的间隔。使用键或键的某个范围可以从对象仓库和索引中读取记录。你可以通过上限和下限设置和筛选范围。比如，你可以遍历 x 和 y 之间所有的键值。</dd> - <dd>有关键范围的参考文档，查看 <a href="../../../../zh-cn/IndexedDB/IDBKeyRange">IDBKeyRange</a>.</dd> -</dl> - -<h2 id="局限性">局限性</h2> - -<p>以下情况不适合使用IndexedDB</p> - -<ul> - <li>全球多种语言混合存储。国际化支持不好。需要自己处理。</li> - <li>和服务器端数据库同步。你得自己写同步代码。</li> - <li>全文搜索。IndexedDB 接口没有类似 SQL 语句中 <code>LIKE</code> 的功能。</li> -</ul> - -<p>注意，在以下情况下，数据库可能被清除:</p> - -<ul> - <li>用户请求清除数据。</li> - <li>浏览器处于隐私模式。最后退出浏览器的时候，数据会被清除。</li> - <li>硬盘等存储设备的容量到限。</li> - <li>数据损坏。</li> - <li>进行与特性不兼容的操作。</li> -</ul> - -<p>确切的环境和浏览器特性会随着时间改变，但浏览器厂商通常会遵循尽最大努力保留数据的理念。</p> - -<h2 id="下一步">下一步</h2> - -<p>查看如何使用的文档： <a href="/zh-cn/IndexedDB/Using_IndexedDB">Using IndexedDB</a>.</p> - -<h2 id="相关文章">相关文章</h2> - -<ul> - <li>{{ spec("http://www.w3.org/TR/IndexedDB/", "Indexed Database API Specification", "WD") }}</li> - <li><a href="/zh-cn/IndexedDB">IndexedDB API Reference</a></li> - <li><a href="/zh-cn/IndexedDB/Using_IndexedDB">Using IndexedDB</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/msselection/index.html b/files/zh-cn/orphaned/web/api/msselection/index.html deleted file mode 100644 index ecbd8817e3..0000000000 --- a/files/zh-cn/orphaned/web/api/msselection/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: MSSelection -slug: orphaned/Web/API/MSSelection -tags: - - API - - DHTML - - DOM - - MSSelection -original_slug: Web/API/MSSelection ---- -<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div> - -<div class="blockIndicator warning"> -<p><strong>IE Only</strong></p> -该属性是IE专有的。尽管IE很好地支持它，但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案，而不是在跨浏览器的脚本中完全依赖它。</div> - -<p><code>MSSelection</code> 对象表示用户选择的文本范围或插入光标(Caret)的当前位置，类似于标准定义的 {{domxref("Selection")}} 接口。它主要通过配套的 {{domxref("TextRange")}} 接口进行操作。</p> - -<p>该接口从IE4开始实现，但直到IE9时添加了对标准 <code>Selection</code> 接口的支持时，为了区分它才被命名为 <code>MSSelection</code>。可供修改和使用的 <code>MSSelection</code> 可通过 {{domxref("document.selection")}} 属性获取，但是这在IE11被彻底移除。</p> - -<p>注意，在非IE浏览器不支持该接口，可使用替代的标准 {{domxref("Selection")}} 接口。</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt>{{domxref("MSSelection.type")}}{{ReadOnlyInline}}</dt> - <dd> - <p>返回选中区域的类型。</p> - </dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<dl> - <dt>{{domxref("MSSelection.empty()")}}</dt> - <dd>取消当前选中区，将选中区类型设置为 <code>none</code>。</dd> - <dt>{{domxref("MSSelection.clear()")}}</dt> - <dd>清除选中区的内容，将选中区类型设置为 <code>none</code>。注意，该方法可以删除不可编辑的元素。</dd> - <dt>{{domxref("MSSelection.createRange()")}}</dt> - <dd>在当前选中区上创建并返回一个 <code>TextRange</code>，其内容和当前选区一致。返回的区域在修改时不会直接作用到选区上，除非使用 {{domxref("TextRange.select()")}} 方法。</dd> - <dt>{{domxref("MSSelection.createRangeCollection()")}}</dt> - <dd>返回一个 {{domxref("TextRangeCollection")}}，该集合包含选区中所有区域对应的 <code>TextRange</code>。注意该对象不是一个 {{jsxref("Array")}}，且IE中的Web网页不支持多个选区，因此它总是返回单个对象的集合。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<p>以下示例在<strong>IE10以下</strong>有效。该示例通过 <code>document.selection</code> 获取 <code>MSSelection</code> 对象，并清空选区中的内容。</p> - -<pre class="brush:js">var sel = document.selection; -sel.clear();</pre> - -<h2 id="开发者笔记">开发者笔记</h2> - -<h3 id="使用_TextRange_操作选中区域">使用 TextRange 操作选中区域</h3> - -<div class="blockIndicator warning"> -<p>仅在<strong>IE9以下</strong>有效。在浏览器允许的情况下，应优先使用 {{domxref("Selection")}} 接口。</p> -</div> - -<p>{{domxref("document.selection")}} 属性返回一个 <code>MSSelection</code> 对象，<code>selection.createRange()</code> 方法创建一个和当前选中区域一致的 {{domxref("TextRange")}} 对象。</p> - -<pre class="brush:js">var sel = document.selection; -var range = sel.createRange(); -alert(range.text); -// 输出被选区域的纯文本</pre> - -<p>注意，<code>createRange</code> 方法并不创建引用，如果希望通过该方法修改选中区域，则需要调用 <code>TextRange.select</code> 方法。</p> - -<h3 id="selection_兼容性"><code>selection</code> 兼容性</h3> - -<p><code>document.selection</code> 属性返回当前文档的 <code>MSSelection</code> 对象。标准规定一个窗口/文档可能有多个不相邻选区，但只有Firefox实现通过 <kbd>Ctrl</kbd> 选中多个区域；IE中一般也只允许文档只存在一个被选中的 <code>TextRange</code>。</p> - -<p>然而，在其它浏览器中，<code>document</code> 并不存在一个所谓 <code>selection</code> 属性——它们通过标准 <a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 实现对选区的操作，也就是通过 <code>window.getSelection()</code> 方法获取 {{domxref("Selection")}} 对象，并使用标准的 {{domxref("Range")}} 对象对文本片段作出处理。IE11及之后的版本也放弃了 <code>document.selection</code> 对象而转为使用标准接口（尽管 <code>TextRange</code> 一直保留，但大多数情况下它已失去作用）。</p> - -<p>这很容易引起迷惑。通常，如果脚本只要求兼容最新的浏览器，那么标准的接口是最佳的选择；但通常目前的网站仍希望兼容IE8或其以下的浏览器，因此，最好的做法是同时处理两者，也就是在不支持标准接口时尝试使用 <code>MSSelection</code> 方式，但不要把该方式作为唯一的选择。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="width: 15px;"></th> - <th scope="col">IE</th> - <th scope="col">其它浏览器</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="width: 15%;">{{domxref("MSSelection")}} {{non-standard_inline()}}</th> - <td>≤10(IE9后应使用标准API)</td> - <td style="width: 60%;">不支持（详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>）</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">扩展</h2> - -<ul> - <li>{{domxref("TextRange")}} 接口</li> - <li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li> - <li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/namelist/index.html b/files/zh-cn/orphaned/web/api/namelist/index.html deleted file mode 100644 index 9e2ad5d9f4..0000000000 --- a/files/zh-cn/orphaned/web/api/namelist/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: NameList -slug: orphaned/Web/API/NameList -translation_of: Web/API/NameList -original_slug: Web/API/NameList ---- -<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> - -<div class="note"> -<p><strong>Note:</strong> 虽然这个API曾经被用在 Gecko, 事实上它也是没有办法被创建的. NameList从 {{ Gecko("10.0") }}开始已经被废弃了。</p> -</div> - -<p>提供一个有序的键值对集合. 它可以通过下标0访问. 在DOM规范中没有指定这个集合是如何被应用的.</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("NameList.length")}}{{readonlyInline}}</dt> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("NameList.contains()")}}</dt> - <dd>返回{{jsxref("Boolean")}}.</dd> - <dt>{{domxref("NameList.containsNS()")}}</dt> - <dd>返回 {{jsxref("Boolean")}}</dd> - <dt>{{domxref("NameList.getName()")}}</dt> - <dd>返回{{domxref("DOMString")}}</dd> - <dt>{{domxref("NameList.getNamespaceURI()")}}</dt> - <dd>返回 {{domxref("DOMString")}}</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/navigator/registercontenthandler/index.html b/files/zh-cn/orphaned/web/api/navigator/registercontenthandler/index.html deleted file mode 100644 index a266c55bfb..0000000000 --- a/files/zh-cn/orphaned/web/api/navigator/registercontenthandler/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Navigator.registerContentHandler() -slug: orphaned/Web/API/Navigator/registerContentHandler -translation_of: Web/API/Navigator/registerContentHandler -original_slug: Web/API/Navigator/registerContentHandler ---- -<div>{{ ApiRef("HTML DOM") }}</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>Allows web sites to register themselves as possible handlers for content of a particular MIME type.</p> - -<p>{{ Note("Web sites may only register content handlers for themselves. For security reasons, it\'s not possible for an extension or web site to register content handlers targeting other sites.") }}</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="brush: js">window.navigator.registerContentHandler(<em>mimeType</em>, <em>uri</em>, <em>title</em>); -</pre> - -<ul> - <li><code>mimeType</code> is the desired MIME type as a string.</li> - <li><code>uri</code> is the URI to the handler as a string.</li> - <li><code>title</code> is the title of the handler presented to the user as a string.</li> -</ul> - -<h3 id="Example" name="Example">例子</h3> - -<pre class="brush: js">navigator.registerContentHandler("application/vnd.mozilla.maybe.feed", - "<span class="plain">http://www.example.tld/?foo=%s</span>", - "My Feed Reader"); -</pre> - -<h3 id="Notes" name="Notes">备注</h3> - -<p>For <a href="/zh-cn/Firefox_2_for_developers" title="zh-cn/Firefox_2_for_developers">Firefox 2</a> and above, only the <code>application/vnd.mozilla.maybe.feed</code>, <code>application/atom+xml</code>, and <code>application/rss+xml</code> MIME types are supported. All values have the same effect, and the registered handler will receive feeds in all Atom and RSS versions (see {{ Bug("391286") }}).</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>WHATWG's <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0 工作草案</a></p> - -<h3 id="相关链接">相关链接</h3> - -<ul> - <li><a href="/zh-cn/Web-based_protocol_handlers" title="zh-cn/Web-based_protocol_handlers">Web-based protocol handlers</a></li> - <li><a href="/zh-cn/nsIContentHandler" title="zh-cn/nsIContentHandler">nsIContentHandler</a> (XUL only)</li> -</ul> - -<p>{{ languages( { "ja": "ja/DOM/window.navigator.registerContentHandler", "en": "en/DOM/window.navigator.registerContentHandler", "pl": "pl/DOM/window.navigator.registerContentHandler" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html deleted file mode 100644 index 84cb1f561a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: navigator.hardwareConcurrency -slug: orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency -translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency -original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>{{AvailableInWorkers}}</p> - -<p><code><strong>navigator.hardwareConcurrency </strong>指明当前浏览器环境所拥有的CPU核心数，这来自于操作系统提供的API来获取。</code></p> - -<h2 id="用法">用法</h2> - -<pre class="syntaxbox"><em>CPU核心数</em>= window.navigator.hardwareConcurrency -</pre> - -<h2 id="Value">Value</h2> - -<p>A {{jsxref("Number")}} indicating the number of logical processor cores.</p> - -<p>Modern computers have multiple physical processor cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may offer eight <strong>logical processor cores</strong>, for example. The number of logical processor cores can be used to measure the number of threads which can effectively be run at once without them having to context switch.</p> - -<p>The browser may, however, choose to report a lower number of logical cores in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once, so don't treat this as an absolute measurement of the number of cores in the user's system.</p> - -<h2 id="Examples">Examples</h2> - -<p>In this example, one {{domxref("Worker")}} is created for each logical processor reported by the browser and a record is created which includes a reference to the new worker as well as a Boolean value indicating whether or not we're using that worker yet; these objects are, in turn, stored into an array for later use. This creates a pool of workers we can use to process requests later.</p> - -<pre class="brush: js">let workerList = []; - -for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { - let newWorker = { - worker: new Worker('cpuworker.js'), - inUse: false - }; - workerList.push(newWorker); -}</pre> - -<h2 id="Specification">Specification</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('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/index.html b/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/index.html deleted file mode 100644 index 43e5ae1965..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: NavigatorConcurrentHardware -slug: orphaned/Web/API/NavigatorConcurrentHardware -tags: - - API - - Concurrency - - HTML DOM - - Interface - - Navigator - - NavigatorCPU - - NavigatorConcurrentHardware - - NeedsBrowserCompatibility - - NeedsTranslation - - Reference - - Threading - - Threads - - TopicStub - - WorkerNavigator - - Workers -translation_of: Web/API/NavigatorConcurrentHardware -original_slug: Web/API/NavigatorConcurrentHardware ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <strong><code>NavigatorConcurrentHardware</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>The number of <strong>logical processor cores</strong> is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}</dt> - <dd>Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorConcurrentHardware</code></em><em> mixin has no methods.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.NavigatorConcurrentHardware")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/appcodename/index.html b/files/zh-cn/orphaned/web/api/navigatorid/appcodename/index.html deleted file mode 100644 index 5545fedd6a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/appcodename/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: NavigatorID.appCodeName -slug: orphaned/Web/API/NavigatorID/appCodeName -translation_of: Web/API/NavigatorID/appCodeName -original_slug: Web/API/NavigatorID/appCodeName ---- -<p>{{ ApiRef() }}</p> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>返回所使用浏览器的内部名称.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">codeName = window.navigator.appCodeName -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>codeName</code> 是一个字符串,表示浏览器内部名称.</li> -</ul> - -<h3 id="Example" name="Example">例子</h3> - -<pre>dump(window.navigator.appCodeName); -</pre> - -<h3 id="Notes" name="Notes">笔记</h3> - -<p>Mozilla, Netscape 6, 和 IE5 的内部名称都是 "Mozilla".</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>{{ DOM0() }}</p> - -<p>{{ languages( { "en": "en/DOM/window.navigator.appCodeName","ja": "ja/DOM/window.navigator.appCodeName", "pl": "pl/DOM/window.navigator.appCodeName" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/appname/index.html b/files/zh-cn/orphaned/web/api/navigatorid/appname/index.html deleted file mode 100644 index 14a1d147b3..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/appname/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: NavigatorID.appName -slug: orphaned/Web/API/NavigatorID/appName -translation_of: Web/API/NavigatorID/appName -original_slug: Web/API/NavigatorID/appName ---- -<p>{{ ApiRef() }}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p>返回所使用浏览器的名称。由于兼容性问题，HTML5 规范允许该属性返回 "Netscape" 。</p> - -<div class="note"><strong>注意：</strong>该属性并不一定能返回正确的浏览器名称。在基于 Gecko 的浏览器 （例如 Firefox）和基于 WebKit 的浏览器（例如 Chrome 和 Safari）中，返回的浏览器名称都是 "Netscape".</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">appName = window.navigator.appName -</pre> - -<h3 id="Parameters" name="Parameters">返回值</h3> - -<ul> - <li><code>appName</code> 是一个字符串，表示浏览器名称</li> -</ul> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush: js">alert(window.navigator.appName); -// 显示浏览器名称 -</pre> - -<h2 id="Specification" name="Specification">规范</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> -</ul> - -<p>该属性起初属于 DOM Level 0 ，目前已经被添加到HTML5规范中。</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/appversion/index.html b/files/zh-cn/orphaned/web/api/navigatorid/appversion/index.html deleted file mode 100644 index a56fdd8216..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/appversion/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: NavigatorID.appVersion -slug: orphaned/Web/API/NavigatorID/appVersion -translation_of: Web/API/NavigatorID/appVersion -original_slug: Web/API/NavigatorID/appVersion ---- -<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p>返回一个字符串，表示所使用浏览器的版本号。它可能只包含一个版本数字，如 "5.0"，还可能包含一些其他的相关信息。由于兼容性问题，HTML5规范允许该属性返回 "4.0"。</p> - -<div class="note"><strong>注意：</strong>该属性并不一定能返回正确的浏览器版本号。在基于 Gecko 的浏览器 （例如 Firefox）和基于 WebKit 的浏览器（例如 Chrome 和 Safari）中，返回的浏览器版本号都是 "5.0"，后跟一些操作系统与语言信息，比如 "5.0 (Windows; zh-CN)"。在Opera 10及以上版本，该属性的返回值也不是实际的浏览器版本号。</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">ver = window.navigator.appVersion -</pre> - -<h3 id="Parameters" name="Parameters">返回值</h3> - -<ul> - <li><code>ver</code> 是一个字符串，表示浏览器版本号。</li> -</ul> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush: js">alert("你的浏览器版本为" + navigator.appVersion); -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p><code>window.navigator.userAgent</code> 也包含一些浏览器的版本信息（比如："<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>"），但是你应该知道，修改浏览器的<code>userAgent字符串以及伪造它成为其他的浏览器、其他的操作系统等等是非常容易的。</code>而且，就算不伪造，浏览器提供商也不会保证这些数据就是准确的。</p> - -<p><code>window.navigator.appVersion</code>、<code>window.navigator.appName</code> 和 <code>window.navigator.userAgent </code>等属性都被用来编写一些"浏览器检测"的相关代码：脚本会尝试根据检测出的浏览器类型来相印的调整页面显示。种情况下，用户可以伪造相关的浏览器信息来查看一些本来不允许自己所使用的浏览器或平台查看的页面。</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> -</ul> - -<p>该属性最初属于 DOM Level 0，目前已经被添加到 HTML5 规范中。</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/index.html b/files/zh-cn/orphaned/web/api/navigatorid/index.html deleted file mode 100644 index 71bf69349a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: NavigatorID -slug: orphaned/Web/API/NavigatorID -translation_of: Web/API/NavigatorID -original_slug: Web/API/NavigatorID ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorID</strong></code> 接口包含浏览器识别相关的方法和属性。</p> - -<p>没有一个 <code>NavigatorID</code> 类型的对象，他是其他接口，如 {{domxref("Navigator")}} 或 {{domxref("WorkerNavigator")}} 实现了该接口。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>NavigatorID</code></em><em> 接口没有继承任何属性。</em></p> - -<dl> - <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>任何浏览器中，总是返回 <code>'Gecko'</code>。该属性仅仅是为了保持兼容性。</dd> - <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}</dt> - <dd>返回浏览器的官方名称。不要指望该属性返回正确的值。</dd> - <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}</dt> - <dd>返回一个字符串，表示浏览器的版本。不要指望该属性返回正确的值。</dd> - <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}</dt> - <dd>返回一个字符串，表示浏览器的所在系统平台。</dd> - <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}}</dt> - <dd>返回当前浏览器的产品名称（如，"Gecko"）。</dd> - <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> - <dd>返回当前浏览器的用户代理字符串（user agent string）。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>NavigatorID</code></em><em> 接口没有继承任何方法。</em></p> - -<dl> - <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}} {{experimental_inline}}</dt> - <dd>总是返回 <code>false</code>。JavaScript taint/untaint 函数在 JavaScript 1.2 中被移除了。该方法只是为了兼容性。</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the <code>appCodeName</code> property and the <code>taintEnabled()</code> method, for compatibility purpose.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("Navigator")}} 实现了该接口。</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/platform/index.html b/files/zh-cn/orphaned/web/api/navigatorid/platform/index.html deleted file mode 100644 index f1dc21fdea..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/platform/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: NavigatorID.platform -slug: orphaned/Web/API/NavigatorID/platform -translation_of: Web/API/NavigatorID/platform -original_slug: Web/API/NavigatorID/platform ---- -<p>{{ ApiRef() }}</p> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>返回一个字符串,表示浏览器所在的系统平台类型.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval"><em>platform</em> = <em>navigator</em>.platform -</pre> - -<p><code>platform</code> 可能是: "Win32", "Linux i686", "MacPPC", "MacIntel", 等.</p> - -<h3 id="Example" name="Example">例子</h3> - -<pre class="brush: js">alert(navigator.platform);</pre> - -<h3 id="Notes" name="Notes">备注</h3> - -<p>在普通网页中,如果about:config中存在<code>general.platform.override</code><code>项,则</code>该属性的值会返回about:config中<code>general.platform.override项的值.</code> 在特权代码中 (chrome上下文或者拥有"UniversalBrowserRead"特权的网页中),返回的还是真实的平台类型.(译者注:语句:netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead ")用来激活所在网页的UniversalBrowserRead特权.)</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> -</ul> - -<p>该属性由DOM Level 0提出, 目前已经被添加到HTML5规范中.</p> - -<p>{{ languages( {"ja": "ja/DOM/window.navigator.platform", "en": "en/DOM/window.navigator.platform", "pl": "pl/DOM/window.navigator.platform" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/product/index.html b/files/zh-cn/orphaned/web/api/navigatorid/product/index.html deleted file mode 100644 index aae72af9db..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/product/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: NavigatorID.product -slug: orphaned/Web/API/NavigatorID/product -translation_of: Web/API/NavigatorID/product -original_slug: Web/API/NavigatorID/product ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p>该属性返回当前浏览器的产品名称。</p> -<div class="note"> - <strong>注意：</strong>该属性不一定返回一个真实的产品名称。Gecko 和 WebKit 浏览器返回 "Gecko" 作为该属性的值。</div> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre class="syntaxbox"><i>productName</i> = window.navigator.product -</pre> -<ul> - <li><code>productName</code> 是一个字符串。</li> -</ul> -<h2 id="Example" name="Example">例子</h2> -<pre class="brush: html"><script> -function prod() { - dt = document.getElementById("d"); - dt.innerHTML = window.navigator.product; -} -</script> - -<button onclick="prod();">product</button> -<div id="d"> </div> -<!-- 返回 "Gecko" --> -</pre> -<h2 id="Notes" name="Notes">备注</h2> -<p>在基于 Gecko 的浏览器中，<code>product</code> 为完整的用户代理（user agent）字符串中紧跟着平台（platform）后的部分。例如，在 Netscape 6.1 的用户代理中，product 是 "<code>Gecko</code>"，完整的代理字符串是：<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code>。</p> -<p>在基于 WebKit 的浏览器中，<code>product</code> 仍然返回 "<code>Gecko</code>"，即使完整用户代理字符串中平台（platform）后紧跟着：<code>(KHTML, like Gecko)</code>。</p> -<h2 id="Specification" name="Specification">规范</h2> -<p>{{dom0}}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/useragent/index.html b/files/zh-cn/orphaned/web/api/navigatorid/useragent/index.html deleted file mode 100644 index 9652c650da..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/useragent/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: NavigatorID.userAgent -slug: orphaned/Web/API/NavigatorID/userAgent -translation_of: Web/API/NavigatorID/userAgent -original_slug: Web/API/NavigatorID/userAgent ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p><code><strong>NavigatorID.userAgent</strong></code> 只读属性返回当前浏览器的 user agent 字符串。</p> - -<div class="note"> -<p>这一规范要求浏览器通过这一属性提供尽可能少的信息。不要假定同一浏览器的这一属性值会在未来的版本中保持不变。尽量不要使用这一属性，或者仅仅在现有和更早的版本中使用。较新的浏览器可能开始使用相同或近似的 UA，对于早期的浏览器而言：你不能确保该浏览器是其 <code><strong>NavigatorID.userAgent</strong></code> 属性所宣称的浏览器。</p> - -<p>另外要记住，用户可以修改浏览器的此属性(UA 欺骗).</p> -</div> - -<p>基于 user agent 字符串来识别浏览器是<strong>不可靠</strong>的，<strong>不推荐使用</strong>，因为 user agent 字符串是用户可配置的。例如：</p> - -<ul> - <li>在 Firefox 浏览器中，你可以通过 <code>about:config</code> 页面的 <code>general.useragent.override</code> 字段修改 user agent。某些 FireFox 插件会更改此字段。 但这个字段只会影响到 http 请求的 header，不影响通过 Javascript 代码检测浏览器。</li> - <li>Opera 6+ 允许用户通过菜单设置浏览器辨识字符。</li> - <li>Microsoft Internet Explorer 通过修改 Windows 注册表修改 UA 。</li> - <li>Safari 和iCab 允许用户通过菜单选项将 UA 值修改为预设的Internet Explorer 或Netscape 浏览器 UA 。</li> -</ul> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox notranslate">var <var>ua</var> = navigator.userAgent; -</pre> - -<h3 id="Value" name="Value">值</h3> - -<p>{{domxref("DOMString")}} 规定了浏览器提供给 {{Glossary("HTTP")}} headers 和其响应，以及其他与{{domxref("Navigator")}} 相关的方法的完整用户代理属性 。</p> - -<p>用户代理属性由几个信息段组成一个整齐的结构，每个信息段都取值于其他 {{domxref("Navigator")}} 属性，这些属性也可以是用户设置的。基于 Gecko 内核的浏览器的 UA 遵守下列通用结构规范。</p> - -<pre class="notranslate">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; -Localization; rv: revision-version-number) product/productSub -Application-Name Application-Name-version -</pre> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush:js notranslate">alert(window.navigator.userAgent) -// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" -</pre> - -<ul> -</ul> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NavigatorID.userAgent")}}</p> - -<h2 id="See_also" name="See_also">更多</h2> - -<ul> - <li>{{httpheader("User-Agent")}} HTTP header</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorlanguage/index.html b/files/zh-cn/orphaned/web/api/navigatorlanguage/index.html deleted file mode 100644 index fdd35b2c8b..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorlanguage/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: NavigatorLanguage -slug: orphaned/Web/API/NavigatorLanguage -tags: - - API - - HTML-DOM - - NeedsTranslation - - No Interface - - Reference - - TopicStub -translation_of: Web/API/NavigatorLanguage -original_slug: Web/API/NavigatorLanguage ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorLanguage</strong></code> 包含涉及导航（<code><strong>Navigator</strong></code>）的语言特性的方法和属性。</p> - -<p>其实 <code>NavigatorLanguage</code> 这个对象并不存在，但是，一些其它的接口，如 {{domxref("Navigator")}} 或 {{domxref("WorkerNavigator")}}，实现了它。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>NavigatorLanguage</code></em><em> 接口不继承任何属性。</em></p> - -<dl> - <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> - <dd>返回一个 {{domxref("DOMString")}} 代表用户的首选语言，通常是浏览器 UI 的语言。若返回 <code>null</code> 值，则代表语言未知。</dd> - <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> - <dd>返回一个 {{domxref("DOMString")}} 数组，代表用户已知的语言，不同语言按照谁更佳排序。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>NavigatorLanguage</code></em><em> 接口不依赖任何接口和方法。</em></p> - -<h2 id="标准">标准</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">标准</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>从 {{SpecName('HTML5 W3C')}} 出现开始，<code>languages</code> 属性已经被添加。</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>初始标准；出现在 {{SpecName('HTML WHATWG')}} 的早期版本。</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NavigatorLanguage")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>实现本对象的 {{domxref("Navigator")}} 接口。</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorlanguage/language/index.html b/files/zh-cn/orphaned/web/api/navigatorlanguage/language/index.html deleted file mode 100644 index c9e6e3615e..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorlanguage/language/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: NavigatorLanguage.language -slug: orphaned/Web/API/NavigatorLanguage/language -tags: - - API - - NavigatorLanguage - - 参考 - - 只读 - - 多语言 - - 属性 - - 语言 -translation_of: Web/API/NavigatorLanguage/language -original_slug: Web/API/NavigatorLanguage/language ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><strong><code>NavigatorLanguage.language</code></strong> 只读属性返回一个表示用户偏好语言的字符串，通常指浏览器 UI 的语言。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js"><em>let lang</em> = navigator.language; -</pre> - -<h3 id="值">值</h3> - -<p>一个 {{domxref("DOMString")}}。<code>lang</code> 存储一个表示语言版本（在 <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> 中定义）的字符串。合法的语言版本有 "zh-CN"、"en"、"en-US"、"fr"、"es-ES" 等。</p> - -<p>注意 macOS 和 iOS 平台上的 Safari（10.2 之前版本），国家代码为小写："zh-cn"、"en-us"、"fr-fr" 等。</p> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">if ( window.navigator.language != 'zh-CN' ) { - doLangSelect(window.navigator.language); -} -</pre> - -<h2 id="标准">标准</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">标准</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-language', 'NavigatorLanguage: language')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初次定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.NavigatorLanguage.language")}}</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li> - <li>{{domxref("navigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorlanguage/languages/index.html b/files/zh-cn/orphaned/web/api/navigatorlanguage/languages/index.html deleted file mode 100644 index 127403a1f9..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorlanguage/languages/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: NavigatorLanguage.languages -slug: orphaned/Web/API/NavigatorLanguage/languages -tags: - - API - - languages - - 只读 - - 实验性 - - 属性 -translation_of: Web/API/NavigatorLanguage/languages -original_slug: Web/API/NavigatorLanguage/languages ---- -<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> - -<p><code><strong>NavigatorLanguage.languages </strong></code>只读属性 ，返回一个 {{domxref("DOMString")}} 的数组，数组内容表示网站访客所使用的语言。 使用 <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 语言标签来描述不同的语言。 在返回的数组中，最适合当前用户的语言将会被排到数组的首位。</p> - -<p>{{domxref("NavigatorLanguage.language","navigator.language")}} 的值是该属性返回数组的第一个元素 [3]。（但它基于系统语言设置。）</p> - -<p>当该值发生改变，即最适合用户的语言被改变， 事件{{event("languagechange")}} 将会在 {{domxref("Window")}} 对象下触发。</p> - -<p>在每一个HTTP请求上的来自用户浏览器的HTTP协议头 <code>Accept-Language</code> 使用相同的来自 <code>navigator.languages</code> 属性的语言值，除了特殊的 <code>qvalues</code> （权重值） 字段 （如：<code>en-US;q=0.8）。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages -</pre> - -<h2 id="例子">例子</h2> - -<pre class="brush: js notranslate">navigator.language //"en-US" -navigator.languages //["en-US", "zh-CN", "ja-JP"] -</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('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> - <td>{{ Spec2('HTML5.1') }}</td> - <td> - <p>初始化定义</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NavigatorLanguage.languages")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("Window.onlanguagechange")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/index.html deleted file mode 100644 index b2a7f14cc9..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatoronline/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: NavigatorOnLine -slug: orphaned/Web/API/NavigatorOnLine -tags: - - API - - HTML-DOM - - TopicStub -translation_of: Web/API/NavigatorOnLine -original_slug: Web/API/NavigatorOnLine ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorOnLine</strong></code>接口包含了与浏览器网络连接状态相关的方法和属性。</p> - -<p>不存在<code>NavigatorOnLine类型的对象，</code>但是存在其他的接口，比如 {{domxref("Navigator")}} 或者 {{domxref("WorkerNavigator")}}，可以实现它。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>NavigatorOnLine</code></em><em> 接口并不能继承任何属性。</em></p> - -<dl> - <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> - <dd>返回一个 {{domxref("Boolean")}} 值指示浏览器是否为在线状态。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>NavigatorOnLine</code></em><em> 接口既不能实现，也不能继承任何方法。</em></p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注解</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>对比最近的简况没有变化, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>{{SpecName('HTML WHATWG')}} 原始标准的简况.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>在{{domxref("WorkerNavigator")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(29)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td> {{domxref("WorkerNavigator")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(29)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="浏览相关">浏览相关</h2> - -<ul> - <li>可以实现它的 {{domxref("Navigator")}} 接口。</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html deleted file mode 100644 index ffc33f9d7a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: NavigatorOnLine.onLine -slug: orphaned/Web/API/NavigatorOnLine/onLine -tags: - - API - - DOM Reference -translation_of: Web/API/NavigatorOnLine/onLine -original_slug: Web/API/NavigatorOnLine/onLine ---- -<p>{{ApiRef("HTML DOM")}}</p> - -<p>返回浏览器的联网状态。正常联网（在线）返回 <code>true</code>，不正常联网（离线）返回 <code>false</code>。一旦浏览器的联网状态发生改变，该属性值也会随之变化。当用户点击链接或者脚本进行网络请求时，如果发现浏览器连接不上互联网，则该属性会被赋值为<code>false</code>。</p> - -<p>各浏览器对该属性的实现有些不同。</p> - -<p>在 Chrome 和 Safari 中，如果浏览器连接不上局域网（LAN）或者路由器，就是离线状态；否则就是在线状态。所以当该属性值为 <code>false </code>的时候，你可以说浏览器不能正常联网，但如果该属性值为true的时候，并不意味着浏览器一定能连接上互联网。还有其他一些可能引起误判的原因，比如你的电脑安装了虚拟化软件，可能会有一个虚拟网卡，这时它总是会显示正常联网。因此，如果你想得到浏览器确切的联网状态，应该使用其他额外的检查手段。</p> - -<p>在 Firefox 和 Internet Explorer 中，如果浏览器处于"脱机工作"状态，则返回 <code>false</code>。在 Firefox 41之前，所有其他条件都返回 <code>true</code> 值；在 Windows 上的 Nightly 68上测试实际行为表明，它仅查找类似 Chrome 和 Safari 的 LAN 连接，从而产生误报。</p> - -<p>你可以在 <a href="/zh-CN/docs/Web/API/document.ononline"><code>window.ononline</code></a> 和 <a href="/zh-CN/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>上监听事件，来获取浏览器联网状态的改变情况。</p> - -<h2 id="语法">语法</h2> - -<pre><em>online</em> = <em>window</em>.navigator.onLine; -</pre> - -<h3 id="取值">取值</h3> - -<p><code>online</code> 是个布尔值 <code>true</code> 或 <code>false。</code></p> - -<h2 id="示例">示例</h2> - -<p>查看 <a class="external" href="http://html5-demos.appspot.com/static/navigator.onLine.html">在线演示</a>.</p> - -<p>想要查看你是否连接上了互联网，查询 <code>window.navigator.onLine</code> 的值，如下方示例：</p> - -<pre class="brush: js">if (navigator.onLine) { - alert('online') -} else { - alert('offline'); -} -</pre> - -<p>如果浏览器不支持 <code>navigator.onLine</code>，则上面的示例将始终显示为 <code>false</code> / <code>undefined</code>。</p> - -<p>要查看网络状态的变化，请使用 <code><a href="/zh-CN/docs/DOM/element.addEventListener">addEventListener</a></code> 侦听 <code>window.online</code> 和 <code>window.offline</code> 事件，如以下示例所示：</p> - -<pre class="brush: js">window.addEventListener("offline", function(e) {alert("offline");}) - -window.addEventListener("online", function(e) {alert("online");}) -</pre> - -<h2 id="规范">规范</h2> - -<table> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("api.NavigatorOnLine.onLine")}}</p> - -<h2 id="备注">备注</h2> - -<p>See <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Online/Offline Events</a> for a more detailed description of this property as well as new offline-related features introduced in Firefox 3.</p> - -<h2 id="查看更多">查看更多</h2> - -<ul> - <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li> - <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html deleted file mode 100644 index 8b873aad6c..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: 在线和离线事件 -slug: orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -tags: - - AJAX - - DOM - - HTML5 - - Web 开发 - - 离线 web 应用 -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events -original_slug: Web/API/NavigatorOnLine/Online_and_offline_events ---- -<p>部分浏览器根据 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 规范</a> 实现了<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline 事件</a>。</p> - -<h3 id="Overview" name="Overview">概述</h3> - -<p>为了构建一个支持离线的 web 应用，你需要知道你的应用何时真正处于离线状态。同时，你还需要知道应用何时重新回到了「在线」状态。实际上，我们可以把需求分解成如下内容：</p> - -<ol> - <li>你需要知道用户何时回到在线状态，这样你就可以与服务器重新同步。</li> - <li>你需要知道用户何时处于离线状态，这样你就可以将对服务器的请求放入队列中以便稍后使用。</li> -</ol> - -<p>这便是在线/离线事件所要处理的过程。</p> - -<p>你的 web 应用可能需要使得某个特定的文档在离线资源缓存中得到维护。 你可以在 <a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Firefox 中的离线资源</a> 这篇文章中了解到更多内容。</p> - -<h3 id="API" name="API">API</h3> - -<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4> - -<p><code><a href="/en/DOM/window.navigator.onLine" title="en/DOM/window.navigator.onLine">navigator.onLine</a></code> 是一个值为 <code>true</code>/<code>false</code> (<code>true</code> 表示在线， <code>false</code> 表示离线) 的属性。当用户通过选择对应的菜单项 (Firefox 中为 文件 -> 离线工作) 切换到「离线模式」时，这个值就会被更新。</p> - -<p>此外，当浏览器长时间无法连接到网络时，该值也会被更新。根据如下规范：</p> - -<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline"><code>由于用户点击一个链接或是脚本请求一个远程页面(或者类似的操作失败了)从而导致户代理无法访问网络时， navigator.onLine</code> 属性返回 false ...</blockquote> - -<p>在 Firefox 2 中，当在浏览器的离线模式中来回切换时会更新该属性。 Windows, Linux, 和 OS X 上的 <a href="https://developer.mozilla.org/en-US/Firefox/Releases/41#Miscellaneous">Firefox 41</a> 会在操作系统报告网络连接变化时更新该属性。</p> - -<p>该属性存在于旧版本的 Firefox 与 Internet Explorer (规范就是以这些旧有实现为基础)，因此你现在就可以使用该属性。Firefox 2实现了网络状态自动检测。</p> - -<h4 id=".22online.22_and_.22offline.22_events" name=".22online.22_and_.22offline.22_events"><code>「online」与「</code><code>offline」</code> 事件</h4> - -<p><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> 引入了两个新事件：「<code>online」与「</code><code>offline」。当浏览器从在线与离线状态中切换时，这两个事件会在页面的</code> <code><body></code> 上触发。此外，该事件会从 <code>document.body 冒泡到</code> <code>document 上，最后到达</code> <code>window。两个事件都无法被取消</code>(你无法阻止用户进入在线或离线状态)。</p> - -<p>你可以使用几种熟悉的方式来注册事件：</p> - -<ul> - <li>在 <code>window，</code><code>document，或<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 21px;"> </span></font></code><code>document.body 上使用 </code><code style="font-size: 14px;"><a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code></li> - <li>将 <code style="font-size: 14px;">document</code> 或 <code style="font-size: 14px;">document.body 的</code> <code>.ononline</code> 或 <code>.onoffline</code> 属性设置为一个 JavaScript <code>Function</code> 对象。(<strong>注意：</strong>由于兼容性原因，不能使用 <code>window.ononline</code> 或 <code>window.onoffline</code>。)</li> - <li>在 HTML 标记中的 <code style="font-size: 14px;"><body> 标签上指定</code> <code>ononline="..."</code> 或 <code>onoffline="..."</code> 特性。</li> -</ul> - -<h3 id="Example" name="Example">示例</h3> - -<p>运行这个<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">简单的例子</a>来验证事件。</p> - -<p>这是 JavaScript 部分的代码：</p> - -<pre class="brush: js">window.addEventListener('load', function() { - var status = document.getElementById("status"); - var log = document.getElementById("log"); - - function updateOnlineStatus(event) { - var condition = navigator.onLine ? "online" : "offline"; - - status.className = condition; - status.innerHTML = condition.toUpperCase(); - - log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); - } - - window.addEventListener('online', updateOnlineStatus); - window.addEventListener('offline', updateOnlineStatus); -});</pre> - -<p>再加上一点儿 CSS</p> - -<pre class="brush: css">#status { - position: fixed; - width: 100%; - font: bold 1em sans-serif; - color: #FFF; - padding: 0.5em; -} - -#log { - padding: 2.5em 0.5em 0.5em; - font: 1em sans-serif; -} - -.online { - background: green; -} - -.offline { - background: red; -} -</pre> - -<p>对应的 HTML<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> - -<pre class="brush: html"><div id="status"></div> -<div id="log"></div> -<p>This is a test</p> -</pre> - -<h3 id="References" name="References">注意</h3> - -<p>如果浏览器没有实现该 API，你可以使用其他方式来检测是否离线，包括 <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-appcache">AppCache 错误事件</a> 和 <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest 的响应</a>。</p> - -<h3 id="References" name="References">参考</h3> - -<ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li> - <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/index.html deleted file mode 100644 index 3b0afd6396..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: NavigatorPlugins -slug: orphaned/Web/API/NavigatorPlugins -translation_of: Web/API/NavigatorPlugins -original_slug: Web/API/NavigatorPlugins ---- -<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> - -<p>The <code><strong>NavigatorPlugins</strong></code> interface contains methods and properties related to the plugins installed in the browser.</p> - -<p>There is no object of type <code>NavigatorPlugins</code>, but other interfaces, like {{domxref("Navigator")}}, implement it.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> - <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorPlugins</code></em><em> interface doesn't inherit any method.</em></p> - -<dl> - <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Navigator")}} interface that implements it.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/javaenabled/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/javaenabled/index.html deleted file mode 100644 index 746b108c8e..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/javaenabled/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: NavigatorPlugins.javaEnabled -slug: orphaned/Web/API/NavigatorPlugins/javaEnabled -translation_of: Web/API/NavigatorPlugins/javaEnabled -original_slug: Web/API/NavigatorPlugins/javaEnabled ---- -<p>{{ APIRef("HTML DOM") }}</p> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>该方法用来表明当前浏览器是否激活了Java.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval"><em>result</em> = window.navigator.javaEnabled() -</pre> - -<h3 id="Example" name="Example">例子</h3> - -<pre class="eval">if (window.navigator.javaEnabled()) { - // 浏览器中Java可用 -} -</pre> - -<h3 id="Notes" name="Notes">备注</h3> - -<p>该方法的返回值是用来表明浏览器的当前配置文件是否允许使用Java的, 而不是表明浏览器是否支持Java(安装有Java插件).</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>{{ DOM0() }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/mimetypes/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/mimetypes/index.html deleted file mode 100644 index 5b199ae666..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/mimetypes/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: NavigatorPlugins.mimeTypes -slug: orphaned/Web/API/NavigatorPlugins/mimeTypes -translation_of: Web/API/NavigatorPlugins/mimeTypes -original_slug: Web/API/NavigatorPlugins/mimeTypes ---- -<div>{{ ApiRef("HTML DOM") }}</div> - -<div> </div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p>返回一个{{domxref("MimeTypeArray")}}对象，其中包含可被当前浏览器识别的{{domxref("MimeType")}}对象的列表。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes; -</pre> - -<p><code>mimeTypes</code> 是一个 <code>MimeTypeArray</code> 对象，其中含有 <code>length</code> 属性、<code>item(index)</code> 和 <code>namedItem(name)</code> 方法。</p> - -<h2 id="Example" name="Example">示例</h2> - -<pre class="brush:js">function isJavaPresent() { - return 'application/x-java-applet' in navigator.mimeTypes; -} - -function getJavaPluginDescription() { - var mimetype = navigator.mimeTypes['application/x-java-applet']; - if (mimetype === undefined) { - // no Java plugin present - return undefined; - } - return mimetype.enabledPlugin.description; -} -</pre> - -<h2 id="Specification" name="Specification">Specification</h2> - -<p><em>mimeTypes 并未包含在任何规范中。</em></p> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/plugins/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/plugins/index.html deleted file mode 100644 index a93bb6741c..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/plugins/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: NavigatorPlugins.plugins -slug: orphaned/Web/API/NavigatorPlugins/plugins -tags: - - API - - DOM - - Navigator - - NavigatorPlugins - - Reference -translation_of: Web/API/NavigatorPlugins/plugins -original_slug: Web/API/NavigatorPlugins/plugins ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>返回一个 {{ domxref("PluginArray") }} 类型的对象, 包含了当前所使用的浏览器安装的所有插件。</p> - -<div class="blockIndicator note"> -<p>在Firefox 29及之后的版本，出于隐私考虑，<code>navigator.plugins</code> 数组的枚举可能会被限制。如果一定要检查是否存在某个浏览器插件，应该用准确的插件名字查询 <code>navigator.plugins</code> 或 {{DOMxRef("navigator.mimeTypes")}} ，而不是枚举 <code>navigator.plugins</code> 数组，再对比每个插件的名字。 这项有关隐私的改变不会禁用任何插件，只是将插件名字从枚举中隐藏了而已。</p> -</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval"><em>plugins</em> = navigator.plugins; -</pre> - -<p><code>plugins</code> 是一个 {{DOMxRef("PluginArray")}} 对象，通过名字或项目列表获取 {{DOMxRef("Plugin")}} 对象。</p> - -<p>返回值不是一个普通的JavaScript数组，但是它也有 <code>length</code> 属性,也可以使用<code>plugins</code>[<code><em>index</em></code>]来获取到每个元素的值, 例如(<code>plugins{{ mediawiki.external("2") }}</code>), 效果和使用 <code>item(<em>index</em>)</code> 以及 <code>namedItem(<em>"name"</em>)</code> 是一样的.</p> - -<h2 id="Example" name="Example">示例</h2> - -<p>下述示例中的函数返回Shockwave Flash插件的版本。</p> - -<pre>function getFlashVersion() { - var flash = navigator.plugins.namedItem('Shockwave Flash'); - if (typeof flash != 'object') { - // flash is not present - return undefined; - } - if(flash.version){ - return flash.version; - } else { - //No version property (e.g. in Chrome) - return flash.description.replace(/Shockwave Flash /,""); - } -} -</pre> - -<p>下述示例可显示已安装插件的信息。</p> - -<pre>var pluginsLength = navigator.plugins.length; - -document.body.innerHTML = pluginsLength + " Plugin(s)<br>" - + '<table id="pluginTable"><thead>' - +'<tr><th>Name</th><th>Filename</th><th>description</th><th>version</th></tr>' - +'</thead><tbody></tbody></table>'; - -var table = document.getElementById('pluginTable'); - -for(var i = 0; i < pluginsLength; i++) { - let newRow = table.insertRow(); - newRow.insertCell().textContent = navigator.plugins[i].name; - newRow.insertCell().textContent = navigator.plugins[i].filename; - newRow.insertCell().textContent = navigator.plugins[i].description; - newRow.insertCell().textContent = navigator.plugins[i].version?navigator.plugins[i].version:""; -} -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p>{{DOMxRef("Plugin")}}对象提供一个小型接口，用于获取浏览器中安装的各种插件的信息。你也可以进入 <code>about:plugins</code> 页面，来查看浏览器上安装的插件（Chrome已移除该入口）。</p> - -<h2 id="规范">规范</h2> - -<table> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-plugins', 'NavigatorPlugins.plugins')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.NavigatorPlugins.plugins")}}</p> - -<p>In addition to listing each plugin as a pseudo-array by zero-indexed numeric properties, Firefox provides properties that are the plugin name directly on the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/PluginArray">PluginArray</a> object.</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html deleted file mode 100644 index 7033c46107..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 测试滕盖 -slug: orphaned/Web/API/NavigatorPlugins/测试滕盖 -original_slug: Web/API/NavigatorPlugins/测试滕盖 ---- -<div>{{ ApiRef("HTML DOM") }}</div> - -<div> </div> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p>Returns a {{domxref("MimeTypeArray")}} object, which contains a list of {{domxref("MimeType")}} objects representing the MIME types recognized by the browser.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes; -</pre> - -<p><code>mimeTypes</code> is a <code>MimeTypeArray</code> object which has a <code>length</code> property as well as <code>item(index)</code> and <code>namedItem(name)</code> methods.</p> - -<h2 id="Example" name="Example">Example</h2> - -<pre class="brush:js">function isJavaPresent() { - return 'application/x-java-applet' in navigator.mimeTypes; -} - -function getJavaPluginDescription() { - var mimetype = navigator.mimeTypes['application/x-java-applet']; - if (mimetype === undefined) { - // no Java plugin present - return undefined; - } - return mimetype.enabledPlugin.description; -} -</pre> - -<h2 id="Specification" name="Specification">Specification</h2> - -<p><em>This is not part of any specification.</em></p> diff --git a/files/zh-cn/orphaned/web/api/navigatorstorage/index.html b/files/zh-cn/orphaned/web/api/navigatorstorage/index.html deleted file mode 100644 index bc0ef8ba92..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorstorage/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: NavigatorStorage -slug: orphaned/Web/API/NavigatorStorage -tags: - - API - - Interface - - Mixin - - Navigator - - NavigatorStorage - - NeedsTranslation - - Reference - - Secure context - - Storage - - Storage Standard - - TopicStub - - WorkerNavigator -translation_of: Web/API/NavigatorStorage -original_slug: Web/API/NavigatorStorage ---- -<p>{{securecontext_header}}{{APIRef("Storage")}}</p> - -<p>The <strong><code>NavigatorStorage</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces the {{domxref("Navigator.storage")}} property, which provides access to the {{domxref("StorageManager")}} singleton used for controlling the persistence of data stores as well as obtaining information</p> - -<p>{{AvailableInWorkers}}</p> - -<p>There are many APIs which provide ways for Web content to store data on a user's computer, including {{Glossary("cookies")}}, the Web Storage API ({{domxref("Window.localStorage")}} and {{domxref("Window.sessionStorage")}}), and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. The Storage Standard is designed to serve as a common basis for the implementation of all of those APIs and storage technologies, so that their constraints and configurations can be understood and controlled using a common set of methods and properties.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorStorage.storage", "storage")}} {{readonlyinline}}{{securecontext_inline}}</dt> - <dd>Returns the {{domxref("StorageManager")}} singleton object which is used to access the Storage Manager. Through the returned object, you can control persistence of data stores as well as get estimates of how much space is left for your site or appliation to store data.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorStorage</code></em><em> mixin has no methods.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Storage')}}</td> - <td>{{Spec2('Storage')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.NavigatorStorage")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("navigator.storage")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> - <li>{{domxref("StorageManager")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorstorage/storage/index.html b/files/zh-cn/orphaned/web/api/navigatorstorage/storage/index.html deleted file mode 100644 index bfd2cc93d6..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorstorage/storage/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: NavigatorStorage.storage -slug: orphaned/Web/API/NavigatorStorage/storage -tags: - - API - - Navigator - - WorkerNavigator - - 存储 - - 安全上下文 - - 属性 -translation_of: Web/API/NavigatorStorage/storage -original_slug: Web/API/NavigatorStorage/storage ---- -<p>{{securecontext_header}}{{APIRef("Storage")}}</p> - -<p><span class="seoSummary"> <code><strong>NavigatorStorage.storage</strong></code> 是一个只读属性，返回单例 {{domxref("StorageManager")}} 对象，用于访问当前网站或应用程序的浏览器整体存储功能的。 </span>通过返回的对象，您可以检查和配置数据存储的持久性，并了解您的浏览器使用的大约多少空间用于本地存储。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">var <em>storageManager</em> = navigator.storage; -</pre> - -<h3 id="返回值">返回值</h3> - -<p>返回 {{domxref("StorageManager")}} 您可以用来维护数据的持久化存储，以及大致确定有多少空间来存储数据。</p> - -<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('Storage', '#navigatorstorage', 'navigator.storage')}}</td> - <td>{{Spec2('Storage')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> -<p>{{Compat("api.NavigatorStorage.storage")}}</p> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("NavigatorStorage")}}</li> - <li>{{domxref("StorageManager")}}</li> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/node/getuserdata/index.html b/files/zh-cn/orphaned/web/api/node/getuserdata/index.html deleted file mode 100644 index 74dbaf067e..0000000000 --- a/files/zh-cn/orphaned/web/api/node/getuserdata/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Node.getUserData() -slug: orphaned/Web/API/Node/getUserData -translation_of: Web/API/Node/getUserData -original_slug: Web/API/Node/getUserData ---- -<p>{{ APIRef }}{{ obsolete_header() }}</p> -<p>The <code><strong>Node.getUserData()</strong></code> method returns any user {{domxref("DOMUserData")}} set previously on the given node by {{domxref("Node.setUserData()")}}.</p> -<div class="note"> - <p>The <code>Node.setUserData</code> and {{domxref("Node.getUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> -</div> -<h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> -<h3 id="Parameters">Parameters</h3> -<ul> - <li><code>userKey</code> is the key to choose the specific data sought for the given node. More than one key may have been assigned on a given node, containing its own value.</li> -</ul> -<h2 id="Example">Example</h2> -<pre class="brush: js">var d = document.setUserData('key', 15, null); -alert(document.getUserData('key')); // 15</pre> -<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removed from the specification.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> -<h2 id="Browser_compatibility">Browser compatibility</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Removed in {{CompatGeckoDesktop("22.0")}} [1]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br> - Removed in {{CompatGeckoMobile("22.0")}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] The method is still available from chrome scripts.</p> -<h2 id="See_also">See also</h2> -<ul> - <li>{{domxref("Node.setUserData()")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li>{{domxref("DOMUserData")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/node/setuserdata/index.html b/files/zh-cn/orphaned/web/api/node/setuserdata/index.html deleted file mode 100644 index 361bfcca25..0000000000 --- a/files/zh-cn/orphaned/web/api/node/setuserdata/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Node.setUserData() -slug: orphaned/Web/API/Node/setUserData -translation_of: Web/API/Node/setUserData -original_slug: Web/API/Node/setUserData ---- -<p>{{ APIRef }}{{ obsolete_header() }}</p> -<p>The <code><strong>Node.setUserData()</strong></code> method allows a user to attach (or remove) data to an element, without needing to modify the DOM. Note that such data will not be preserved when imported via {{domxref("Node.importNode")}}, as with {{domxref("Node.cloneNode()")}} and {{domxref("Node.renameNode()")}} operations (though {{domxref("Node.adoptNode")}} does preserve the information), and equality tests in {{domxref("Node.isEqualNode()")}} do not consider user data in making the assessment.</p> -<p>This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.</p> -<div class="note"> - <p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> -</div> -<h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox"><em>prevUserData = someNode</em>.setUserData(<em>userKey</em>, <em>userData</em>, <em>handler</em>);</pre> -<h3 id="Parameters">Parameters</h3> -<ul> - <li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li> - <li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li> - <li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li> -</ul> -<h2 id="Example">Example</h2> -<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null); -d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {alert(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element] -alert(d.documentElement.getUserData('key')); // 15 -var e = document.importNode(d.documentElement, true); // causes handler to be called -alert(e.getUserData('key')); // null since user data is not copied -</pre> -<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removed from the specification.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> -<h2 id="Browser_compatibility">Browser compatibility</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Removed in {{CompatGeckoDesktop("22.0")}} [1]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br> - Removed in {{CompatGeckoMobile("22.0")}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] The method is still available from chrome scripts.</p> -<h2 id="See_also">See also</h2> -<ul> - <li>{{domxref("Node.getUserData()")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li>{{domxref("DOMUserData")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/notation/index.html b/files/zh-cn/orphaned/web/api/notation/index.html deleted file mode 100644 index 04e36231f4..0000000000 --- a/files/zh-cn/orphaned/web/api/notation/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Notation -slug: orphaned/Web/API/Notation -tags: - - API - - Obsolete - - Reference -translation_of: Web/API/Notation -original_slug: Web/API/Notation ---- -<div>{{APIRef("DOM")}}{{draft}}{{obsolete_header}}</div> - -<p>表示DTD表示(只读)。可以声明未解析实体的格式或正式声明文档的处理指令目标。从 <a href="/En/DOM/Node">node</a> 继承方法和属性。它的 <a href="/En/DOM/Node/NodeName">nodeName</a> 是表示法名称。没有父节点。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Notation.publicId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Notation.systemId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.Notation")}}</p> diff --git a/files/zh-cn/orphaned/web/api/notification/sound/index.html b/files/zh-cn/orphaned/web/api/notification/sound/index.html deleted file mode 100644 index 13577dd621..0000000000 --- a/files/zh-cn/orphaned/web/api/notification/sound/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Notification.sound -slug: orphaned/Web/API/notification/sound -translation_of: Web/API/notification/sound -original_slug: Web/API/notification/sound ---- -<p>{{APIRef("Web Notifications")}}</p> - -<div class="note"> -<p><strong>Note</strong>: 这个属性并没有完全被一些浏览器支持.</p> -</div> - -<p> <code>sound</code> 是 {{domxref("Notification")}}的只读属性，interface specifies the URL of an audio file to be played when the notification fires. This is specified in the <code>sound</code> option of the {{domxref("Notification.Notification","Notification()")}} constructor.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="eval">var sound = Notification.sound; -</pre> - -<h3 id="Return_Value" name="Return_Value">Value</h3> - -<p>A {{domxref("USVString")}}.</p> - -<h2 id="Examples">Examples</h2> - -<p>The following snippet is intended to fire a sound along with the notification; a simple <code>options</code> object is created, then the notification is fired using the <code>Notification()</code> constructor.</p> - -<pre class="brush: js">var options = { - body: 'Do you like my body?', - sound: 'audio/alert.mp3' -} - -var n = new Notification('Test notification',options); - -n.sound // should return 'audio/alert.mp3'</pre> - -<h2 id="Specifications">Specifications</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications','#dom-notification-sound','sound')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td> - <p>{{ CompatNo() }}</p> - </td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td> - <p>{{ CompatNo() }}</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Firefox_OS_notes">Firefox OS notes</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> - -<h3 id="Chrome_notes">Chrome notes</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> - -<h3 id="Safari_notes">Safari notes</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/oscillatornode/stop/index.html b/files/zh-cn/orphaned/web/api/oscillatornode/stop/index.html deleted file mode 100644 index be94b576e6..0000000000 --- a/files/zh-cn/orphaned/web/api/oscillatornode/stop/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: OscillatorNode.stop() -slug: orphaned/Web/API/OscillatorNode/stop -translation_of: Web/API/OscillatorNode/stop -original_slug: Web/API/OscillatorNode/stop ---- -<p>{{ APIRef("Web Audio API") }}</p> - -<div> -<p>这个 <strong><code>stop</code></strong>方法 {{ domxref("OscillatorNode") }} 接口在指定时间内停止播放,它的参数是可选的,默认情况下是0.</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">oscillator.stop(<em>when</em>); // stop playing oscillator at <em>when</em></pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><em>when</em></dt> - <dd>An optional double representing the <a href="/en-US/docs/Web/API/AudioContext/currentTime">audio context time</a> when the oscillator should stop. If a value is not included, it defaults to <code>0</code>. If the time is equal to or before the current audio context time, the oscillator will stop playing immediately.</dd> -</dl> - -<h2 id="例如">例如</h2> - -<p>下面的示例显示一个基本用法{{ domxref("AudioContext") }}创建子节点。一个应用的例子，看看我们的演示（ <a href="http://mdn.github.io/violent-theremin/">Violent Theremin demo</a> (<a href="https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js">see app.js</a> for relevant code).</p> - -<pre class="brush: js;highlight[11]">// create web audio api context -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - -// create Oscillator node -var oscillator = audioCtx.createOscillator(); -oscillator.connect(audioCtx.destination); - -oscillator.start(); - -oscillator.stop(audioCtx.currentTime + 2); // stop 2 seconds after the current time -</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('Web Audio API', '#widl-OscillatorNode-stop-void-double-when', 'stop')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器的兼容性">浏览器的兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>14 {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>23 [1]</td> - <td>{{CompatNo}}</td> - <td>15 {{property_prefix("webkit")}}<br> - 22 (unprefixed)</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>28 {{property_prefix("webkit")}}</td> - <td>25 [1]</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The parameter wasn't optional until Firefox 30.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/index.html b/files/zh-cn/orphaned/web/api/parentnode/index.html deleted file mode 100644 index c6b9a42c69..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Mixin - - Node - - 参考 - - 接口 - - 节点 -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ParentNode</strong></code> 混合了所有(拥有子元素的) {{domxref("Node")}} 对象包含的共有方法和属性。</p> - -<p><code>ParentNode</code> 是一个原始接口，不能够创建这种类型的对象；它在 {{domxref("Element")}}、{{domxref("Document")}} 和 {{domxref("DocumentFragment")}} 对象上被实现。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> - <dd>返回一个当前 <code>ParentNode</code> 所含有的后代数量。</dd> - <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> - <dd>返回一个包含 <code>ParentNode</code> 所有后代 {{domxref("Element")}} 对象的动态 {{domxref("HTMLCollection")}} 对象，忽略所有非元素子节点。</dd> - <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> - <dd>返回父节点的第一个 {{domxref("Element")}} 后代，没有时返回 <code>null</code>。</dd> - <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> - <dd>返回父节点的最后一个 {{domxref("Element")}} 后代，没有时返回 <code>null</code>。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> - <dd>在父节点 <code>ParentNode</code> 的最后一个后代后面插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd> - <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> - <dd>在父节点 <code>ParentNode</code> 第一个后代前插入一组 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd> - <dt>{{domxref("ParentNode.querySelector()")}}</dt> - <dd>返回以当前元素为根元素，匹配给定选择器的第一个元素 {{domxref("Element")}}。</dd> - <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> - <dd>返回一个 {{domxref("NodeList")}}，表示以当前元素为根元素的匹配给定选择器组的元素列表。</dd> -</dl> - -<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('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("ChildNode")}} 纯接口。</li> - <li> - <div class="syntaxbox">实现此 mixin 的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html deleted file mode 100644 index 7623caa0ba..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ParentNode.querySelector() -slug: orphaned/Web/API/ParentNode/querySelector -translation_of: Web/API/ParentNode/querySelector -original_slug: Web/API/ParentNode/querySelector ---- -<p>{{APIRef("DOM")}}{{Draft}}</p> - -<p>{{DOMxRef("ParentNode")}} mixin 将 <code><strong>querySelector()</strong></code> 方法定义为返回一个 {{DOMxRef("Element")}} 表示与指定的选择器组匹配的第一个元素，这些选择器是调用该方法的对象的后代。</p> - -<p>如果您需要与选择器列表匹配的所有元素，使用 {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} 。</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 该方法的实现为 {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} 和 {{DOMxRef("Element.querySelector()")}}.</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>{{DOMxRef("DOMString")}} 包含一个或多个要匹配的选择器。该字符串必须是浏览器支持的<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> ；如果不是， 会抛出 <code>SyntaxError</code> 异常. 查阅 <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> 获取有关选择器使用的更多信息. 可以通过使用逗号分隔多个选择器来指定它们。</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 必须使用反斜杠字符转义不属于CSS语法的字符。由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字是必须特别小心。查阅 {{anch("Escaping special characters")}} 获取更多信息。</p> -</div> - -<h3 id="返回值">返回值</h3> - -<p>第一个 {{DOMxRef("Element")}} 匹配至少一个指定的选择器，如果没有找到这样的元素，返回 <code>null</code> 。</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 如果指定的选择器包含 <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, 则返回值始终为 <code>null</code>.</p> -</div> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>指定的 <code>selectors</code> 字符串语法无效。</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Original definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.querySelector")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li> - <li>This method is available as {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 10936dd5d2..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: orphaned/Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - ParentNode - - 参考 - - 方法 - - 查找 - - 选择器 -translation_of: Web/API/ParentNode/querySelectorAll -original_slug: Web/API/ParentNode/querySelectorAll ---- -<div>{{ApiRef("DOM")}}</div> - -<p>The {{domxref("ParentNode")}} mixin defines the <code><strong>querySelectorAll()</strong></code> method 返回一个 {{domxref("NodeList")}} 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。</p> - -<p>如果你只需要一个结果，可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。</p> - -<div class="note"> -<p><strong>Note:</strong> This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>一个或多个<a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS选择器</a>，这些选择器由逗号隔开。</dd> - <dd>A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> string; if it's not, a <code>SyntaxError</code> exception is thrown. See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See {{anch("Escaping special characters")}} for more information.</p> -</div> - -<h3 id="返回值">返回值</h3> - -<p>一个不存活的 {{domxref("NodeList")}} ，每个子节点拥有一个 {{domxref("Element")}} 对象，其中每个子节点至少与一个选择器相匹配。</p> - -<div class="note"> -<p><strong>Note:</strong> 如果指定的 <code>selectors</code> 包含<a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>，那么返回的列表始终为空。</p> -</div> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>The syntax of the specified <code>selectors</code> string is not valid.</dd> -</dl> - -<h2 id="例子">例子</h2> - -<p>To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("p");</pre> - -<p>这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("div.note, div.alert");</pre> - -<p>Here, we get a list of <code><p></code> elements whose immediate parent element is a {{domxref("div")}} with the class <code>"highlighted"</code> and which are located inside a container whose ID is <code>"test"</code>.</p> - -<pre class="brush: js notranslate">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>This example uses an <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named <code>"data-src"</code>:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>Here, an attribute selector is used to return a list of the list items contained within a list whose ID is <code>"userlist"</code> which have a <code>"data-active"</code> attribute whose value is <code>"1"</code>:</p> - -<pre class="brush: js notranslate">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active=1]");</pre> - -<h2 id="User_notes">User notes</h2> - -<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.</p> - -<h3 id="HTML">HTML</h3> - -<p>Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.</p> - -<pre class="brush: html notranslate"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! -</pre> - -<p>In this example, when selecting <code>".outer .inner"</code> in the context the <code><div></code> with the class <code>"select"</code>, the element with the class <code>".inner"</code> is still found, even though <code>.outer</code> is not a descendant of the base element on which the search is performed (<code>".select"</code>). By default, <code>querySelectorAll()</code> only verifies that the last element in the selector is within the search scope.</p> - -<p>The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:</p> - -<pre class="brush: js notranslate">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Original definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode.querySelectorAll")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li> - <li>This method is available as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/request/context/index.html b/files/zh-cn/orphaned/web/api/request/context/index.html deleted file mode 100644 index cc073a988b..0000000000 --- a/files/zh-cn/orphaned/web/api/request/context/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Request.context -slug: orphaned/Web/API/Request/context -translation_of: Web/API/Request/context -original_slug: Web/API/Request/context ---- -<div>{{APIRef("Fetch")}}{{deprecated_header()}}</div> - -<p><span class="seoSummary">The deprecated </span><font><font>弃用</font></font><strong><code>context</code></strong><font><font>所述的只读属性{{domxref("请求")}}接口包含请求的上下文（例如，</font></font><code>audio</code><font><font>，</font></font><code>image</code><font><font>，</font></font><code>iframe</code><font><font>）。</font></font><font><font>这定义了要获取的资源类型。</font><font>它已由{{domxref("Request.destination”，“ destination")}}属性取代。</font></font> This defines what sort of resource is being fetched. This has been replaced by the {{domxref("Request.destination", "destination")}} property.</p> - -<p>The context of a request is only relevant in the <font><font>请求的上下文仅与</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API"><font><font>ServiceWorker API</font></font></a><font><font>相关</font><font>；</font><font>服务人员可以根据URL是用于图像还是可嵌入对象（例如{{htmlelement("视频")}}，{{domxref("iframe")}}等）进行决策。</font></font>; a service worker can make decisions based on whether the URL is for an image, or an embeddable object such as a {{htmlelement("video")}}, {{domxref("iframe")}}, etc.</p> - -<div class="note"> -<p><strong>Note<font><font>注意</font></font></strong><font><font>：您可以在“ </font></font><a href="https://fetch.spec.whatwg.org/#concept-request-context"><font><font>获取规范请求上下文”</font></font></a><font><font>部分中</font><font>找到不同可用上下文的完整列表，包括关联的上下文框架类型，CSP指令和平台功能示例</font><font>。</font></font> section.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">var <var>myContext</var> = <var>request</var>.context;</pre> - -<h3 id="Value">Value</h3> - -<p>A {{domxref("RequestContext")}} value.一个{{domxref("RequestContext")}}值。</p> - -<h2 id="Example例子">Example<font><font>例子</font></font></h2> - -<p>In the following snippet, we create a new request using the {{domxref("Request.Request()")}} constructor (for an image file in the same directory as the script), then save the request context in a variable:在以下代码段中，我们使用{{domxref("Request.Request（）")}}}构造函数创建一个新请求（用于与脚本位于同一目录中的图像文件），然后将请求上下文保存在变量中：</p> - -<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg'); -var myContext = myRequest.context; // returns the empty string by default</pre> - -<h2 id="Browser_compatibility浏览器兼容性">Browser compatibility<font><font>浏览器兼容性</font></font></h2> - -<p>{{Compat("api.Request.context")}}</p> - -<h2 id="更多">更多</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html b/files/zh-cn/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html deleted file mode 100644 index ff36e1741e..0000000000 --- a/files/zh-cn/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: RTCPeerConnection.getDefaultIceServers() -slug: orphaned/Web/API/RTCPeerConnection/getDefaultIceServers -translation_of: Web/API/RTCPeerConnection/getDefaultIceServers -original_slug: Web/API/RTCPeerConnection/getDefaultIceServers ---- -<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> - -<p>{{domxref("RTCPeerConnection")}} 接口的方法 <code><strong>getDefaultIceServers()</strong></code> 返回一个基于 {{domxref("RTCIceServer")}} 字典的对象数组。如果在 {{domxref("RTCPeerConnection")}} 的 {{domxref("RTCConfiguration")}} 中没有设置，该数组指向浏览器缺省使用的ICE servers，前提是浏览器确实存在缺省的ICE servers。然而，浏览器完全不必提供任何的缺省ICE Servers。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"> var <em>defaultIceServers</em> = <em>RTCPeerConnection</em>.getDefaultIceServers();</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个 ICE servers 的数组，以基于 {{domxref("RTCIceServer")}} 的对象组成，当没有在 {{domxref("RTCPeerConnection")}} 的设置中进行设置时，浏览器将使用它们。如果浏览器没有提供缺省值，将返回一个空数组，该属性的值永远不是 <code>null</code>。</p> - -<h2 id="例子">例子</h2> - -<pre class="brush: js">var pc = new RTCPeerConnection(); -var iceServers = pc.getDefaultIceServers(); - -if (iceServers.length === 0) { - // Deal with the lack of default ICE servers, possibly by using our own defaults -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://w3c.github.io/webrtc-extensions/#dom-rtcpeerconnection-getdefaulticeservers">WebRTC Extensions</a></td> - <td></td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.RTCPeerConnection.getDefaultIceServers")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> - <li>{{domxref("RTCConfiguration")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/textrange/text/index.html b/files/zh-cn/orphaned/web/api/textrange/text/index.html deleted file mode 100644 index 8c20714e44..0000000000 --- a/files/zh-cn/orphaned/web/api/textrange/text/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: TextRange.text -slug: orphaned/Web/API/TextRange/text -tags: - - API - - DHTML - - DOM - - TextRange -original_slug: Web/API/TextRange/text ---- -<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div> - -<div class="blockIndicator warning"> -<p><strong>IE Only</strong></p> -该属性是IE专有的。尽管IE很好地支持它，但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案，而不是在跨浏览器的脚本中完全依赖它。</div> - -<p>{{domxref("TextRange")}} 接口中的属性 <strong><code>text</code></strong> 用于以 {{domxref("DOMString")}} 形式获取或设置区域内的纯文本内容。该更改直接作用到 DOM 树中，并清除区域内原有的非纯文本元素。注意，该属性忽略所有格式数据，因此若要获取选区中的HTML内容，请使用 {{domxref("TextRange.htmlText")}} 属性。</p> - -<h2 id="语法">语法</h2> - -<pre>var tS<em>tring</em> = <em>textRange</em>.text; -<em>textRange</em>.text = oString; -</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个 {{domxref("DOMString")}}。</p> - -<h2 id="示例">示例</h2> - -<p>以下示例在IE9以下有效。该示例通过 <code>document.selection</code> 获取 <code>TextRange</code>，并过滤选区中的富文本元素。IE9以上支持标准的替代方案 {{domxref("Range")}}。</p> - -<pre class="brush:js">var range = document.selection.createRange(); -range.htmlText = range.text; -// 将富文本内容设置为纯文本内容，则区域也就变为纯文本。 -</pre> - -<h2 id="开发者笔记">开发者笔记</h2> - -<h3 id="关于_text_属性">关于 text 属性</h3> - -<p>注意，当通过该属性操作或获取时，不会得到包含非纯文本的信息；如果通过该属性设置，则区域内的元素将被删除，之后通常会变为一个包含指定内容的文本节点。因此，即使通过这个属性操作纯文本内容，结果也将剔除原先的所有格式数据。</p> - -<p>如果希望脚本的功能明确可读，最好的办法是不要同时使用该属性和 <code>htmlText</code> 属性设置数据。另外，该属性不是标准的，它从IE4开始在IE中实现，但不在其它浏览器的规范中。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="width: 15px;"></th> - <th scope="col">IE</th> - <th scope="col">其它浏览器</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="width: 15%;">{{domxref("TextRange.text")}} {{non-standard_inline()}}</th> - <td>支持(IE9后应使用标准API)</td> - <td style="width: 60%;">不支持（详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>）</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">扩展</h2> - -<ul> - <li>{{domxref("TextRange")}} 作为该属性的实现接口</li> - <li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li> - <li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/typeinfo/index.html b/files/zh-cn/orphaned/web/api/typeinfo/index.html deleted file mode 100644 index cb47bcd1b7..0000000000 --- a/files/zh-cn/orphaned/web/api/typeinfo/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: TypeInfo -slug: orphaned/Web/API/TypeInfo -tags: - - TypeInfo -translation_of: Web/API/TypeInfo -original_slug: Web/API/TypeInfo ---- -<p>{{APIRef("DOM")}} {{obsolete_header}}</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("TypeInfo.typeName")}} {{Readonlyinline}}</dt> - <dd>Returns a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("TypeInfo.typeNamespace")}} {{Readonlyinline}}</dt> - <dd>Returns a {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("TypeInfo.isDerivedFrom()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}}</dd> -</dl> - -<h2 id="常量">常量</h2> - -<table> - <tbody> - <tr> - <th scope="row">Constant</th> - <td>Value</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_RESTRICTION</code></th> - <td>1</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_EXTENSION</code></th> - <td>2</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_UNION</code></th> - <td>4</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_LIST</code></th> - <td>8</td> - </tr> - </tbody> -</table> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#TypeInfo", "TypeInfo")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/uievent/cancelbubble/index.html b/files/zh-cn/orphaned/web/api/uievent/cancelbubble/index.html deleted file mode 100644 index f98af92c97..0000000000 --- a/files/zh-cn/orphaned/web/api/uievent/cancelbubble/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: event.cancelBubble -slug: orphaned/Web/API/UIEvent/cancelBubble -translation_of: Web/API/UIEvent/cancelBubble -original_slug: Web/API/UIEvent/cancelBubble ---- -<p>{{ ApiRef() }}</p> -<div class="warning"> - <strong>警告:</strong> 请使用 <a href="/zh-cn/DOM/event.stopPropagation" title="zh-cn/DOM/event.stopPropagation">event.stopPropagation()</a> 方法来代替该不标准的属性.</div> -<h3 id="Summary" name="Summary">概述</h3> -<p>{{ Deprecated_header() }} 获取或设置一个布尔值,表明当前事件是否要取消冒泡.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">event.cancelBubble = <em>bool;</em> -<em>var bool</em> = event.cancelBubble; -</pre> -<p><code>bool</code> 的值为<code>true或</code><code>false</code>.</p> -<h3 id="Notes" name="Notes">备注</h3> -<p><code>如果一个事件是可冒泡的,则它的cancelBubble</code>属性的默认值为 <code>false</code>,代表允许该事件向上冒泡. 将<code>cancelBubble</code>属性设置为<code>true以后,可以阻止该事件的进一步冒泡行为.</code></p> -<p>{{ languages( { "pl": "pl/DOM/event.cancelBubble" ,"en": "en/DOM/event.cancelBubble" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html b/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html deleted file mode 100644 index c01252f31b..0000000000 --- a/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: WebSocket Server Vb.NET -slug: orphaned/Web/API/WebSockets_API/WebSocket_Server_Vb.NET -translation_of: Web/API/WebSockets_API/WebSocket_Server_Vb.NET -original_slug: Web/API/WebSockets_API/WebSocket_Server_Vb.NET ---- -<p>{{gecko_minversion_header("2")}}{{draft}}</p> - -<p>下面的示例没有优化。没有使用 .NET 4.5 Websocket。<br> - <br> - 当前版本：</p> - -<ul> - <li>包含了一个System.Net.Sockets.TcpClient类的泛型集合</li> - <li>特性 - 自定义事件和委托处理程序</li> - <li>特性 - 线程化和实现Timers.Timer</li> - <li>演示如何使用网络流将帧写回客户机(opCode 0001)</li> - <li>是否打算作为本教程和其他贡献者的起点</li> -</ul> - -<p> </p> - -<pre>Imports System.Net.Sockets -Imports System.Net -Imports System -Imports System.Text -Imports System.Text.RegularExpressions - - -Namespace TypeDef.WebSocket - - Public Class Client - Dim _TcpClient As System.Net.Sockets.TcpClient - - Public Delegate Sub OnClientDisconnectDelegateHandler() - Public Event onClientDisconnect As OnClientDisconnectDelegateHandler - - - Sub New(ByVal tcpClient As System.Net.Sockets.TcpClient) - Me._TcpClient = tcpClient - End Sub - - - Function isConnected() As Boolean - Return Me._TcpClient.Connected - End Function - - - Sub HandShake() - Dim stream As NetworkStream = Me._TcpClient.GetStream() - Dim bytes As Byte() - Dim data As String - - While Me._TcpClient.Connected - While (stream.DataAvailable) - ReDim bytes(Me._TcpClient.Client.Available) - stream.Read(bytes, 0, bytes.Length) - data = System.Text.Encoding.UTF8.GetString(bytes) - - If (New System.Text.RegularExpressions.Regex("^GET").IsMatch(data)) Then - - Dim response As Byte() = System.Text.Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" & Environment.NewLine & "Connection: Upgrade" & Environment.NewLine & "Upgrade: websocket" & Environment.NewLine & "Sec-WebSocket-Accept: " & Convert.ToBase64String(System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(New Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups(1).Value.Trim() & "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))) & Environment.NewLine & Environment.NewLine) - - stream.Write(response, 0, response.Length) - Exit Sub - Else - 'We're going to disconnect the client here, because he's not handshacking properly (or at least to the scope of this code sample) - Me._TcpClient.Close() 'The next While Me._TcpClient.Connected Loop Check should fail.. and raise the onClientDisconnect Event Thereafter - End If - End While - End While - RaiseEvent onClientDisconnect() - End Sub - - - Sub CheckForDataAvailability() - If (Me._TcpClient.GetStream().DataAvailable) Then - Dim stream As NetworkStream = Me._TcpClient.GetStream() - Dim frameCount = 2 - Dim bytes As Byte() - Dim data As String - ReDim bytes(Me._TcpClient.Client.Available) - stream.Read(bytes, 0, bytes.Length) 'Read the stream, don't close it.. - - Try - Dim length As UInteger = bytes(1) - 128 'this should obviously be a byte (unsigned 8bit value) - - If length > -1 Then - If length = 126 Then - length = 4 - ElseIf length = 127 Then - length = 10 - End If - End If - - 'the following is very inefficient and likely unnecessary.. - 'the main purpose is to just get the lower 4 bits of byte(0) - which is the OPCODE - - Dim value As Integer = bytes(0) - Dim bitArray As BitArray = New BitArray(8) - - For c As Integer = 0 To 7 Step 1 - If value - (2 ^ (7 - c)) >= 0 Then - bitArray.Item(c) = True - value -= (2 ^ (7 - c)) - Else - bitArray.Item(c) = False - End If - Next - - - Dim FRRR_OPCODE As String = "" - - For Each bit As Boolean In bitArray - If bit Then - FRRR_OPCODE &= "1" - Else - FRRR_OPCODE &= "0" - End If - Next - - - Dim FIN As Integer = FRRR_OPCODE.Substring(0, 1) - Dim RSV1 As Integer = FRRR_OPCODE.Substring(1, 1) - Dim RSV2 As Integer = FRRR_OPCODE.Substring(2, 1) - Dim RSV3 As Integer = FRRR_OPCODE.Substring(3, 1) - Dim opCode As Integer = Convert.ToInt32(FRRR_OPCODE.Substring(4, 4), 2) - - - - Dim decoded(bytes.Length - (frameCount + 4)) As Byte - Dim key As Byte() = {bytes(frameCount), bytes(frameCount+1), bytes(frameCount+2), bytes(frameCount+3)} - - Dim j As Integer = 0 - For i As Integer = (frameCount + 4) To (bytes.Length - 2) Step 1 - decoded(j) = Convert.ToByte((bytes(i) Xor masks(j Mod 4))) - j += 1 - Next - - - - Select Case opCode - Case Is = 1 - 'Text Data Sent From Client - - data = System.Text.Encoding.UTF8.GetString(decoded) - 'handle this data - - Dim Payload As Byte() = System.Text.Encoding.UTF8.GetBytes("Text Recieved") - Dim FRRROPCODE As Byte() = Convert.ToByte("10000001", 2) 'FIN is set, and OPCODE is 1 or Text - Dim header as byte() = {FRRROPCODE, Convert.ToByte(Payload.Length)} - - - Dim ResponseData As Byte() - ReDim ResponseData((header.length + Payload.Length) - 1) - 'NOTEWORTHY: if you Redim ResponseData(header.length + Payload.Length).. you'll add a 0 value byte at the end of the response data.. - 'which tells the client that your next stream write will be a continuation frame.. - - Dim index as integer = 0 - - Buffer.BlockCopy(header, 0, ResponseData, index, header.length) - index += header.length - - Buffer.BlockCopy(payload, 0, ResponseData, index, payload.length) - index += payload.length - stream.Write(ResponseData, 0, ResponseData.Length) - Case Is = 2 - '// Binary Data Sent From Client - data = System.Text.Encoding.UTF8.GetString(decoded) - Dim response As Byte() = System.Text.Encoding.UTF8.GetBytes("Binary Recieved") - stream.Write(response, 0, response.Length) - Case Is = 9 '// Ping Sent From Client - Case Is = 10 '// Pong Sent From Client - Case Else '// Improper opCode.. disconnect the client - _TcpClient.Close() - RaiseEvent onClientDisconnect() - End Select - Catch ex As Exception - _TcpClient.Close() - RaiseEvent onClientDisconnect() - End Try - End If - End Sub - End Class - - - - Public Class Server - Inherits System.Net.Sockets.TcpListener - - Delegate Sub OnClientConnectDelegate(ByVal sender As Object, ByRef Client As WebSocket.Client) - Event OnClientConnect As OnClientConnectDelegate - - - Dim WithEvents PendingCheckTimer As Timers.Timer = New Timers.Timer(500) - Dim WithEvents ClientDataAvailableTimer As Timers.Timer = New Timers.Timer(50) - Property ClientCollection As List(Of WebSocket.Client) = New List(Of WebSocket.Client) - - - - Sub New(ByVal url As String, ByVal port As Integer) - MyBase.New(IPAddress.Parse(url), port) - End Sub - - - Sub startServer() - Me.Start() - PendingCheckTimer.Start() - End Sub - - - - Sub Client_Connected(ByVal sender As Object, ByRef client As WebSocket.Client) Handles Me.OnClientConnect - Me.ClientCollection.Add(client) - AddHandler client.onClientDisconnect, AddressOf Client_Disconnected - client.HandShake() - ClientDataAvailableTimer.Start() - End Sub - - - Sub Client_Disconnected() - - End Sub - - - Function isClientDisconnected(ByVal client As WebSocket.Client) As Boolean - isClientDisconnected = False - If Not client.isConnected Then - Return True - End If - End Function - - - Function isClientConnected(ByVal client As WebSocket.Client) As Boolean - isClientConnected = False - If client.isConnected Then - Return True - End If - End Function - - - Private Sub PendingCheckTimer_Elapsed(ByVal sender As Object, ByVal e As System.Timers.ElapsedEventArgs) Handles PendingCheckTimer.Elapsed - If Pending() Then - RaiseEvent OnClientConnect(Me, New CORE.TypeDef.WebSocket.Client(Me.AcceptTcpClient())) - End If - End Sub - - - Private Sub ClientDataAvailableTimer_Elapsed(ByVal sender As Object, ByVal e As System.Timers.ElapsedEventArgs) Handles ClientDataAvailableTimer.Elapsed - Me.ClientCollection.RemoveAll(AddressOf isClientDisconnected) - If Me.ClientCollection.Count < 1 Then ClientDataAvailableTimer.Stop() - - For Each Client As WebSocket.Client In Me.ClientCollection - Client.CheckForDataAvailability() - Next - End Sub - End Class -End Namespace - -Sub Main() 'Program Entry point - Dim thread As System.Threading.Thread = New System.Threading.Thread(AddressOf StartWebSocketServer) - 'Application.Add("WebSocketServerThread", thread) 'Global.asax - context.Application .. I left this part in for web application developers - thread.Start() -End Sub - -Public Shared WebSocketServer As TypeDef.WebSocket.Server -Public Shared Sub StartWebSocketServer() - WebSocketServer = New TypeDef.WebSocket.Server("127.0.0.1", 8000) - WebSocketServer.startServer() -End Sub -</pre> diff --git a/files/zh-cn/orphaned/web/api/window/getattention/index.html b/files/zh-cn/orphaned/web/api/window/getattention/index.html deleted file mode 100644 index 72fddbcc97..0000000000 --- a/files/zh-cn/orphaned/web/api/window/getattention/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Window.getAttention() -slug: orphaned/Web/API/Window/getAttention -translation_of: Web/API/Window/getAttention -original_slug: Web/API/Window/getAttention ---- -<div>{{ ApiRef() }}</div> - -<p>The <code><strong>Window.getAttention()</strong></code> method attempts to get the user's attention. The mechanism for this happening depends on the specific operating system and window manager.</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">window.getAttention(); -</pre> - -<h2 id="Notes">Notes</h2> - -<p>On Windows, the taskbar button for the window flashes, if this hasn't been disabled by the user.</p> - -<p>On Linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others focus the window immediately. This may be configurable as well.</p> - -<p>On Macintosh, the icon in the upper right corner of the desktop flashes.</p> - -<p>The function is disabled for web content. Neither Gecko nor Internet Explorer supports this feature now for web content. <code>getAttention</code> will still work when used from <a href="en/Chrome">chrome</a> in a Gecko application.</p> - -<h2 id="Specification">Specification</h2> - -<p>DOM Level 0. Not part of specification.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Window.getAttention")}}</p> diff --git a/files/zh-cn/orphaned/web/api/window/ondevicelight/index.html b/files/zh-cn/orphaned/web/api/window/ondevicelight/index.html deleted file mode 100644 index d4e668dc85..0000000000 --- a/files/zh-cn/orphaned/web/api/window/ondevicelight/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Window.ondevicelight -slug: orphaned/Web/API/Window/ondevicelight -tags: - - 实验中 - - 属性 - - 引用 - - 接口 - - 环境光事件 -translation_of: Web/API/Window/ondevicelight -original_slug: Web/API/Window/ondevicelight ---- -<div>{{APIRef}}</div> - -<div>声明一个事件监听用以接收{{event("devicelight")}}事件。事件在设备的光传感器检测到周围环境光的强度发生变化时触发。</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">window.ondevicelight = <var>funcRef</var></pre> - -<p>当{{event("devicelight")}}事件触发时，调用<code><em>funcRef</em></code>函数。这些事件皆为 {{domxref("DeviceLightEvent")}}事件类型。</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('AmbientLight', '#event-handlers', 'Ambient Light Events')}}</td> - <td>{{Spec2('AmbientLight')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 事件{{event("devicelight")}} 的使用最先被实现应用在Android (15.0) 的移动端火狐浏览器和火狐操作系统(B2G)。从 Gecko 22.0 {{geckoRelease("22.0")}}开始，面向Mac OS X 的桌面应用也已实现。目前对Windows 7的支持还在进行中(详见 {{bug(754199)}})。</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{event("devicelight")}}</li> - <li>{{domxref("DeviceLightEvent")}}</li> - <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/window/ondeviceproximity/index.html b/files/zh-cn/orphaned/web/api/window/ondeviceproximity/index.html deleted file mode 100644 index 5a7d414518..0000000000 --- a/files/zh-cn/orphaned/web/api/window/ondeviceproximity/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Window.ondeviceproximity -slug: orphaned/Web/API/Window/ondeviceproximity -translation_of: Web/API/Window/ondeviceproximity -original_slug: Web/API/Window/ondeviceproximity ---- -<p>{{ ApiRef() }}</p> - -<p>指定一个事件监听器来接受 {{event("deviceproximity")}} 事件，当设备传感器检测到一个对象越来越接近或远离设备时这些事件就会出现。</p> - -<h2 id="语法">语法</h2> - -<pre>window.onuserproximity = <em>funcRef</em></pre> - -<p>其中funcRef是在发生 {{event("deviceproximity")}} 事件时要调用的函数。这些事件的类型为{{domxref("DeviceProximityEvent")}}。</p> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<table class="standard-table" style="height: 49px; width: 1000px;"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Proximity Events', '#device-proximity', 'Proximity Events') }}</td> - <td>{{ Spec2('Proximity Events') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("15.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{event("deviceproximity")}}</li> - <li>{{domxref("DeviceProximityEvent")}}</li> - <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/window/onuserproximity/index.html b/files/zh-cn/orphaned/web/api/window/onuserproximity/index.html deleted file mode 100644 index 743c8493cc..0000000000 --- a/files/zh-cn/orphaned/web/api/window/onuserproximity/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Window.onuserproximity -slug: orphaned/Web/API/Window/onuserproximity -translation_of: Web/API/Window/onuserproximity -original_slug: Web/API/Window/onuserproximity ---- -<p>{{ ApiRef() }}</p> - -<p><strong><code>Window.onuserproxymity</code></strong> 属性代表一个 {{event("Event_handlers", "event handler")}}, 当触发 {{event("userproximity")}} 事件时会调用这个函数。这些事件是 {{domxref("UserProximityEvent")}} 类型的，在设备传感器检测到对象变得靠近时触发。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>window</em>.onuserproximity = <em>eventHandler</em></pre> - -<h2 id="说明">说明</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">说明</th> - <th scope="col">状态</th> - <th scope="col">评论</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}</td> - <td>{{ Spec2('Proximity Events') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>{{Compat("api.Window.onuserproximity")}}</p> - -<h2 id="其他">其他</h2> - -<ul> - <li>{{event("userproximity")}}</li> - <li>{{domxref("UserProximityEvent")}}</li> - <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity Events</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/xdomainrequest/index.html b/files/zh-cn/orphaned/web/api/xdomainrequest/index.html deleted file mode 100644 index a9d7eaf905..0000000000 --- a/files/zh-cn/orphaned/web/api/xdomainrequest/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: XDomainRequest -slug: orphaned/Web/API/XDomainRequest -tags: - - AJAX - - API - - IE - - JavaScript - - Web - - 废弃 - - 微软 - - 非标准 -translation_of: Web/API/XDomainRequest -original_slug: Web/API/XDomainRequest ---- -<p>{{obsolete_header}}</p> - -<p>{{non-standard_header}}</p> - -<h2 id="摘要">摘要</h2> - -<p><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XDomainRequest是在IE8和IE9上的</span><a href="/en-US/docs/HTTP/Access_control_CORS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">HTTP access control (CORS) </a>的实现，在IE10中被<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> 包含CORS的</span><a href="/en-US/docs/Web/API/XMLHttpRequest" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XMLHttpRequest </a>取代了，如果你的开发目标是IE10或IE的后续版本，或想要支待其他的浏览器，你需要使用标准的<a href="/en-US/docs/Web/HTTP/Access_control_CORS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">HTTP access control</a>。</p> - -<p>该接口可以发送GET和POST请求</p> - -<h2 id="语法">语法</h2> - -<pre>var xdr = new XDomainRequest();</pre> - -<p>返回<span style="font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XDomainRequest的实例，该实例可以被用来生成或管理请求。</span></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("XDomainRequest.timeout")}}</dt> - <dd>获取或设置请求的过期时间。</dd> - <dt>{{domxref("XDomainRequest.responseText")}}</dt> - <dd>以字符串形式获取响应体。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("XDomainRequest.open()")}}</dt> - <dd>根据指定的方法（GET或POST）和URL，打开请求。</dd> - <dt>{{domxref("XDomainRequest.send()")}}</dt> - <dd>发送请求。POST的数据会在该方法中被指定。</dd> - <dt>{{domxref("XDomainRequest.abort()")}}</dt> - <dd>中止请求。</dd> -</dl> - -<h2 id="事件处理程序">事件处理程序</h2> - -<dl> - <dt>{{domxref("XDomainRequest.onprogress")}}</dt> - <dd>当请求中发送方法和onload事件中有进展时的处理程序。</dd> - <dt>{{domxref("XDomainRequest.ontimeout")}}</dt> - <dd>当请求超时时的事件处理程序。</dd> - <dt>{{domxref("XDomainRequest.onerror")}}</dt> - <dd>当请求发生错误时的处理程序。</dd> - <dt>{{domxref("XDomainRequest.onload")}}</dt> - <dd>当服务器端的响应被完整接收时的处理程序。</dd> -</dl> - -<h2 id="例子">例子</h2> - -<pre class="brush: js">if(window.XDomainRequest){ - var xdr = new XDomainRequest(); - - xdr.open("get", "http://example.com/api/method"); - - xdr.onprogress = function () { - //Progress - }; - - xdr.ontimeout = function () { - //Timeout - }; - - xdr.onerror = function () { - //Error Occured - }; - - xdr.onload = function() { - //success(xdr.responseText); - } - - setTimeout(function () { - xdr.send(); - }, 0); -}</pre> - -<div> </div> - -<div class="note"> -<p><strong>注意： </strong>如果多个XDomainRequests同时被发送，一些请求可能会丢失，为避免这种情况，xdr.send()的调用应被包裹在setTimeout方法中（见{{domxref("window.setTimeout()")}}）。</p> -</div> - -<h2 id="安全">安全</h2> - -<p><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XDomainRequest为了确保安全构建，采用了多种方法。</span></p> - -<ul> - <li>安全协议源必须匹配请求的URL。（http到http，https到https）。如果不匹配，请求会报“拒绝访问”的错误。</li> - <li>被请求的URL的服务器必须带有<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> 设置为（“*”）或包含了请求方的</span><code style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><a href="/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Access-Control-Allow-Origin</a>的头部。</code></li> -</ul> - -<h2 id="标准">标准</h2> - -<p>该接口及其方法没有遵循标准。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>XDomainRequest</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>8.0-9.x</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>XDomainRequest</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<section id="Quick_Links"> -<ol> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - - <ol> - <li>{{domxref("XDomainRequest.timeout")}}</li> - <li>{{domxref("XDomainRequest.responseText")}}</li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Methods</strong></a> - <ol> - <li>{{domxref("XDomainRequest.open()")}}</li> - <li>{{domxref("XDomainRequest.send()")}}</li> - <li>{{domxref("XDomainRequest.abort()")}}</li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Event handlers</strong></a> - <ol> - <li>{{domxref("XDomainRequest.onprogress")}}</li> - <li>{{domxref("XDomainRequest.ontimeout")}}</li> - <li>{{domxref("XDomainRequest.onerror")}}</li> - <li>{{domxref("XDomainRequest.onload")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/zh-cn/orphaned/web/api/xmlhttprequest/openrequest/index.html b/files/zh-cn/orphaned/web/api/xmlhttprequest/openrequest/index.html deleted file mode 100644 index 52b110db5b..0000000000 --- a/files/zh-cn/orphaned/web/api/xmlhttprequest/openrequest/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: XMLHttpRequest.openRequest() -slug: orphaned/Web/API/XMLHttpRequest/openRequest -translation_of: Web/API/XMLHttpRequest/openRequest -original_slug: Web/API/XMLHttpRequest/openRequest ---- -<p>{{APIRef("XMLHttpRequest")}}{{non-standard_header}}</p> - -<p>此Mozilla特定的方法仅在特权代码中可用<span class="seoSummary">, 且仅能从C++上下文中调用以初始化 <code>XMLHttpRequest</code>.</span><span class="seoSummary">若想要从JavaScript代码初始化一个request,请使用标准的</span> {{domxref("XMLHttpRequest.open", "open()")}} 方法.</p> diff --git a/files/zh-cn/orphaned/web/api/xmlhttprequestresponsetype/index.html b/files/zh-cn/orphaned/web/api/xmlhttprequestresponsetype/index.html deleted file mode 100644 index 92738971cb..0000000000 --- a/files/zh-cn/orphaned/web/api/xmlhttprequestresponsetype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: XMLHttpRequestResponseType -slug: orphaned/Web/API/XMLHttpRequestResponseType -translation_of: Web/API/XMLHttpRequestResponseType -original_slug: Web/API/XMLHttpRequestResponseType ---- -<div>{{APIRef("XMLHttpRequest")}}</div> - -<p><span class="seoSummary"><code><strong>XMLHttpRequestResponseType</strong></code> 类型是一个枚举字符串，用于指定包含在一个 {{domxref("XMLHttpRequest")}} 中的 {{domxref("XMLHttpRequest.response", "response")}} 的数据类型。</span>这些值用于获取或设置请求的 {{domxref("XMLHttpRequest.responseType", "responseType")}}。</p> - -<h2 id="取值">取值</h2> - -<dl> - <dt><code>""</code></dt> - <dd><code>responseType</code> 为空字符串时，采用默认类型 {{domxref("DOMString")}}，与设置为 <code>text</code> 相同。</dd> - <dt><code>arraybuffer</code></dt> - <dd>{{domxref("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 JavaScript {{jsxref("ArrayBuffer")}}。</dd> - <dt><code>blob</code></dt> - <dd><code>response</code> 是一个包含二进制数据的 {{domxref("Blob")}} 对象 。</dd> - <dt><code>document</code></dt> - <dd><code>response</code> 是一个 {{Glossary("HTML")}} {{domxref("Document")}} 或 {{Glossary("XML")}} {{domxref("XMLDocument")}}，这取决于接收到的数据的 MIME 类型。请参阅 <a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest 中的 HTML</a> 以了解使用 XHR 获取 HTML 内容的更多信息。</dd> - <dt><code>json</code></dt> - <dd><code>response</code> 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 {{Glossary("JSON")}} 解析得到的。</dd> - <dt><code>text</code></dt> - <dd><code>response</code> 是一个以 {{domxref("DOMString")}} 对象表示的文本。</dd> - <dt><code>ms-stream</code> {{non-standard_inline}}</dt> - <dd><code>response</code> 是下载流的一部分；此响应类型仅允许下载请求，并且仅受 Internet Explorer 支持。</dd> -</dl> - -<h2 id="已废弃的值">已废弃的值</h2> - -<dl> - <dt><code>moz-chunked-arraybuffer</code> {{non-standard_inline}}</dt> - <dd> - <p>与<code>"arraybuffer"</code>相似，但是数据会被接收到一个流中。使用此响应类型时，响应中的值仅在 {{event("progress")}} 事件的处理程序中可用，并且只包含上一次响应 <code>progress</code> 事件以后收到的数据，而不是自请求发送以来收到的所有数据。</p> - - <p>在 <code>progress</code> 事件处理时访问 <code>response</code> 将返回到目前为止收到的数据。在 <code>progress</code> 事件处理程序之外访问， <code>response</code> 的值会始终为 <code>null</code> 。</p> - - <p>You shouldn't use this non-standard (and, as of Firefox 68, entirely removed) API; instead, consider using <a href="/zh-CN/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream">the Fetch API with readable streams</a>, which offers a standard alternative to accessing the response in a streaming fashion.</p> - </dd> -</dl> - -<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('XMLHttpRequest')}}</td> - <td>{{Spec2('XMLHttpRequestResponseType')}}</td> - <td>Live standard, latest version</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.XMLHttpRequestResponseType")}}</p> - -<h2 id="了解更多">了解更多</h2> - -<ul> - <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">XMLHttpRequest 中的 HTML</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/guide/css/css基础/index.html b/files/zh-cn/orphaned/web/guide/css/css基础/index.html deleted file mode 100644 index 89aacb2102..0000000000 --- a/files/zh-cn/orphaned/web/guide/css/css基础/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: CSS基础 -slug: orphaned/Web/Guide/CSS/CSS基础 -tags: - - CSS - - CSS:Getting_Started - - CSS入门 - - CSS教程 - - Web - - 初学者 - - 教程 -original_slug: Web/Guide/CSS/CSS基础 ---- -<p> </p> - -<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> - -<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> - -<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> - -<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3> - -<ul> - <li>一个文本编辑器</li> - <li>一个现代浏览器</li> - <li>编辑器与浏览器的基本使用方法</li> -</ul> - -<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p> - -<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> - -<h2 id="如何使用本指南">如何使用本指南</h2> - -<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p> - -<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3> - -<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> - -<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p> - -<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> - -<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3> - -<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> - -<ol> - <li><strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript">JavaScript</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> -</ol> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html b/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 52471bde8e..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: DOM 事件回调 -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<h2 id="概要">概要</h2> - -<p>Web平台提供了多种方式来获取 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">DOM events</a> 的通知。两种常见的风格是：广义 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 和一组特定的<em><strong>on-event</strong></em>处理器。本页重点介绍后者如何工作的细节。</p> - -<h3 id="注册on-event_处理器">注册<em>on-event</em> 处理器</h3> - -<p><em><strong>on-event </strong></em>处理器是由DOM元素提供的一组属性，以帮助管理元素如何对事件反应。元素可以使可交互性的（例如链接，按钮，图像，表单）或者非可交互的（比如基本文档本身等）。事件是异性行为，像点击，检测到按下按键，获得焦点等。<em><strong>on-event </strong></em>事件通常被相应地命名，诸如onclick，onkeypress，onfocus等。</p> - -<p>你可以为一个给定的对象的某个特定事件（比如{{event("click")}}）指定一个 <code>on<...></code> 事件处理器，使用以下几种不同的方式：</p> - -<ul> - <li>在元素上使用 HTML {{Glossary("attribute")}} <code>on<em>{eventtype}</em></code> ，例如：<br> - <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> - <li>或者通过 JavaScript 设置相应的属性（ {{Glossary("property/JavaScript", "property")}}），例如：<br> - <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> -</ul> - -<p>注意，每个对象对于给定的事件<strong>只能有一个</strong>事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么{{domxref("EventTarget.addEventListener", "addEventListener()")}} 通常是获得事件通知的更好方法，特别是当你希望彼此独立地应用各种事件处理程序时，即使对于相同的事件和/或相同的元素也是如此。</p> - -<p>还要注意，事件处理器是自动调用的，而不是程序员的意志(尽管你可以使用像 <code>mybutton.onclick(myevent); )。</code>因为它们更多地用作可以<strong>分配</strong>真实处理器函数的占位符。</p> - -<h3 id="非元素对象">非元素对象</h3> - -<p>事件处理器也可以使用属性设置在生成事件的许多非元素对象上， 包括{{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, 和其他等等，例如：</p> - -<pre><code>xhr.onprogress = function() { ... }</code></pre> - -<h2 id="细节">细节</h2> - -<h3 id="HTML的_on<...>_属性值_和相应JavaScript">HTML的 on<...> 属性值 和相应JavaScript</h3> - -<p>通过 on<...> 元素属性注册的处理程序将通过相应的 on<...> 对象属性可用，相反，则不可用：</p> - -<pre><code><div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div> - -<script> -window.onload = function () { - var div = document.getElementById("a"); - console.log("Attribute reflected as a property: ", div.onclick.toString()); - // Prints: function onclick(event) { alert('old') } - div.onclick = function() { alert('new') }; - console.log("Changed property to: ", div.onclick.toString()); - // Prints: function () { alert('new') } - console.log("Attribute value is unchanged: ", div.getAttribute("onclick")); - // Prints: alert('old') -} -</script></code></pre> - -<p>由于历史原因，{{HTMLElement("body")}} 和 {{HTMLElement("frameset")}} 元素中的某些元素属性/对象属性实际上是在其父 {{domxref("Window")}} 对象上设置了事件处理器(这些 HTML 命名: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)。</p> - -<h3 id="事件处理器的参数，this_绑定和返回值">事件处理器的参数，<code>this</code> 绑定和返回值</h3> - -<p>当事件处理程序被指定为 <strong>HTML 属性</strong>，指定的代码被包装在有 <strong>以下参数 </strong>的函数中：</p> - -<ul> - <li><code>event</code> - 对于所有的事件处理器，除了 {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> 对于 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件处理器。注意，<code>event</code> 参数实际上包含字符串的错误消息。</li> -</ul> - -<p>当事件处理器被调用，事件处理器内部的 <code>this</code> 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 关键字文档</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler"> </a>.</p> - -<p>事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型，更多信息查看 <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="什么时候调用事件处理程序">什么时候调用事件处理程序</h3> - -<p>TBD (non-capturing listener)</p> - -<h3 id="术语">术语 </h3> - -<p>术语 <strong>事件处理器（event handler）</strong> 可用于指：</p> - -<ul> - <li>注册的事件通知的任何函数或对象，</li> - <li>或更具体地说，是通过HTML中的 <code>on... </code>属性或web API中的属性来注册事件监听器的机制，例如 <code><button onclick="alert(this)"> </code>或 <code>window.onload = function() { /* ... */ }</code>。</li> -</ul> - -<p>在讨论各种监听事件的方法时：</p> - -<ul> - <li> <strong>事件侦听器（event listener）</strong>是指通过 {{domxref("EventTarget.addEventListener()")}} 注册的函数或对象,</li> - <li>而<strong>事件处理器（event handler）</strong>是指通过 <code>on...</code> 属性注册的函数。</li> -</ul> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Firefox_9中的事件处理器的变动">Firefox 9中的事件处理器的变动</h3> - -<p>为了更好地匹配规范，并提高跨浏览器兼容性，在Gecko 9.0 {{ geckoRelease("9.0") }} 中更改了基本级别事件处理器的实现方式。</p> - -<p>具体来说，在过去，事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0，这一点被改变。因此，Gecko的事件处理程序的某些行为已经改变。特别地，它们现在含有为标准IDL属性行为的所有特性。在大多数情况下，这不应该影响网页或附加内容。然而，还有一些具体的事情需要注意。</p> - -<h4 id="检测事件处理程序属性的存在">检测事件处理程序属性的存在</h4> - -<p>你可以使用 JavaScript 的 <code><a href="https://developer.mozilla.org/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in">in</a> </code>运算符来检测事件处理器属性（例如，onload）的存在。例如：</p> - -<pre class="brush: js">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="事件处理程序和原型">事件处理程序和原型</h4> - -<p>您不能设置或访问DOM原型对象上任何IDL定义的属性的值，这意味着您不能更改 <code>Window.prototype.onload</code>。在过去，事件处理程序（onload等）没有被实现为Gecko中的IDL属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。</p> diff --git a/files/zh-cn/orphaned/web/guide/events/index.html b/files/zh-cn/orphaned/web/guide/events/index.html deleted file mode 100644 index 1addfdd634..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - NeedsUpdate - - TopicStub -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式，也指一些不同种类事件的命名、描述和使用。</p> - -<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">概述</a> 中提供了对设计模式的介绍和现代Web浏览器中事件和处理程序的概述。</p> - -<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">自定义事件</a> 中介绍了如何创建自定义事件、注册监听自定义事件和如何在代码中触发自定义事件</p> - -<p>接下来的内容描述了如何在Web浏览器中使用不同类型的事件。不幸的是，这些事件是随着Web浏览器的发展逐一定义的，所以，目前还没有一个令人满意的系统描述。</p> - -<p><strong>设备</strong>可以在Web浏览器运行时触发事件，例如，由于其在现实世界中的位置和方向的变化，在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> 和 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a> 被讨论，这与设备垂直方向的变化是不同的，但是类似的。</p> - -<p>浏览器显示的 <strong>窗口</strong> 也可以触发事件, 例如，如果用户最大化窗口或以其他方式更改窗口大小。</p> - -<p>网页的<strong>进程加载</strong>可以触发事件，响应下载，解析和呈现网页给用户的不同步骤的完成状态。</p> - -<p>用户与网页内容的<strong>交互</strong>可能触发事件。用户交互触发的事件在浏览器设计的早期阶段发生，包括一个复杂的系统，定义了事件将被调用的顺序以及该序列可以被控制的方式。不同类型的用户交互驱动的事件包括：</p> - -<ul> - <li>原始的 'click' 事件,</li> - <li>鼠标事件,</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events"><font><font>鼠标手势事件</font></font></a><font><font>，和</font></font></li> - <li><font><font>这两个</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><font><font>触摸事件</font></font></a><font><font>和早些时候</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)"><font><font>Mozilla的实验性触摸事件</font></font></a><font><font>，现在已废弃。</font></font></li> -</ul> - -<p> </p> - -<p><font><font>该</font></font><strong><font><font>网页的修改</font></font></strong><font><font>结构或内容可能会引发一些事件，如解释的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events"><font><font>突变事件页</font></font></a><font><font>，但使用这些事件也有利于较轻的被弃用</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><font><font>突变观察员</font></font></a><font><font>的做法。</font></font></p> - -<p><font><font>嵌入在HTML文档中</font><font>的</font></font><strong><font><font>媒体流</font></font></strong><font><font>可能会触发某些事件，如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Media_events"><font><font>媒体事件</font></font></a><font><font>页面中所述。</font></font></p> - -<p>网页发出的<strong>网络请求</strong>可能会触发一些事件。</p> - -<p>还有许多网页浏览器定义的其他事件还不包括在本指南中。</p> - -<div class="note"> -<p>注意: 本是件开发指南还需要大量的工作，结构需要重新组织，页面重写。我们希望你所需要知道的一切事情都会在这里。</p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/zh-cn/orphaned/web/guide/events/media_events/index.html b/files/zh-cn/orphaned/web/guide/events/media_events/index.html deleted file mode 100644 index 00bb7bfba4..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/media_events/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: 媒体相关事件 -slug: orphaned/Web/Guide/Events/Media_events -tags: - - Audio - - Media - - Video -translation_of: Web/Guide/Events/Media_events -original_slug: Web/Guide/Events/Media_events ---- -<p>在处理用{{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }}标签嵌入到HTML文档中的媒体时，会触发多种事件。本章列出这些事件，并给出一些使用方法。</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>事件名称</th> - <th>描述</th> - </tr> - <tr> - <td><code>abort</code></td> - <td> 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。</td> - </tr> - <tr> - <td><code>canplay</code></td> - <td>在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。</td> - </tr> - <tr> - <td><code>canplaythrough</code></td> - <td>在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。</td> - </tr> - <tr> - <td><code>durationchange</code></td> - <td>元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。</td> - </tr> - <tr> - <td><code>emptied</code></td> - <td>媒体被清空（初始化）时触发。</td> - </tr> - <tr> - <td><code>ended</code></td> - <td>播放结束时触发。</td> - </tr> - <tr> - <td><code>error</code></td> - <td>在发生错误时触发。元素的error属性会包含更多信息。参阅 <a href="/en-US/docs/Web/API/HTMLMediaElement/error">HTMLMediaElement.error</a> 获得详细信息。</td> - </tr> - <tr> - <td><code>interruptbegin</code></td> - <td>声音在Firefox OS设备中断时触发,可能是应用程序被切换至后台或者更高优先级的应用占用了音频通道。 相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td> - </tr> - <tr> - <td><code>interruptend</code></td> - <td>声音在Firefox OS设备中断后恢复播放时触发,应用程序被切换至前台或占用更高级音频通道的应用程序播放完毕后触发。相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td> - </tr> - <tr> - <td><code>loadedmetadata</code></td> - <td>媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。</td> - </tr> - <tr> - <td><code>loadstart</code></td> - <td>在媒体开始加载时触发。</td> - </tr> - <tr> - <td><code>mozaudioavailable</code></td> - <td>当音频数据缓存并交给音频层处理时</td> - </tr> - <tr> - <td><code>pause</code></td> - <td>播放暂停时触发。</td> - </tr> - <tr> - <td><code>play</code></td> - <td>在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。</td> - </tr> - <tr> - <td><code>playing</code></td> - <td>在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。</td> - </tr> - <tr> - <td><code>progress</code></td> - <td>告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。</td> - </tr> - <tr> - <td><code>ratechange</code></td> - <td>在回放速率变化时触发。</td> - </tr> - <tr> - <td><code>seeked</code></td> - <td>在跳跃操作完成时触发。</td> - </tr> - <tr> - <td><code>seeking</code></td> - <td>在跳跃操作开始时触发。</td> - </tr> - <tr> - <td><code>stalled</code></td> - <td>在尝试获取媒体数据，但数据不可用时触发。</td> - </tr> - <tr> - <td><code>suspend</code></td> - <td>在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。</td> - </tr> - <tr> - <td><code>timeupdate</code></td> - <td>元素的currentTime属性表示的时间已经改变。</td> - </tr> - <tr> - <td><code>volumechange</code></td> - <td>在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。</td> - </tr> - <tr> - <td><code>waiting</code></td> - <td>在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。</td> - </tr> - </tbody> -</table> - -<p>使用下面的代码，你可以很容易的观察到这些事件:</p> - -<pre class="brush: js notranslate">var v = document.getElementsByTagName("video")[0]; -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> - -<p>这个例子获取了文档中第一个video元素，并在video元素上监听了一个seeked事件，该事件会在跳跃操作完成后触发。监听器的处理函数就是简单的调用元素的play()方法，该方法会开始视频的播放。</p> - -<p>接下来来看例子的第三行，这里设置了元素的crruentTime特性值为10.0，这会初始化一个在媒体中跳跃(快进)到10s位置的操作。操作开始时会引起一个seeking事件，随后当跳跃操作完成时会触发seeked事件。</p> - -<p>换句话，本例中只要在媒体中跳跃到10s位置的操作完成，视频就会马上播放。</p> - -<h2 id="兼容性">兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 88a0ff78ec..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Overview of Events and Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p>事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式，并总结了由现代Web浏览器处理的此类事件的类型。</p> -</div> - -<p> </p> - -<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p> - -<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p> - -<p> </p> - -<p>事件和事件处理成为Web编程的核心，添加了浏览器的语言，伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初，浏览器等待，直到它们接收到与页面相关的所有资源，解析、处理、绘制并向用户呈现页面。显示的页面保持不变，直到浏览器请求一个新页面为止。随着动态页面呈现的改变，浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载，例如，下载一个现在可以在屏幕上绘制的图像，完成由浏览器解析资源的过程，例如处理页面的HTML内容、用户与页面内容的交互，例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化，特别是他说的，一个不方便的API：DOM的理论，解释了原来的浏览器流流量的变化</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p>到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环，在接下来的步骤中，等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面；该方法还允许使用JavaScript驱动的事件驱动操作。（可以从多个渠道获得，包括这一个）。目前，JavaScript代码的所有执行环境都使用事件和事件处理。</p> - -<h2 id="事件设计模式">事件设计模式</h2> - -<p>事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始：</p> - -<ul> - <li>事件使用的名称字符串，</li> - <li>用于表示该事件的关键属性的数据结构的类型，以及</li> - <li>将“发出”该事件的JavaScript对象。</li> -</ul> - -<p>该模式的实现</p> - -<ul> - <li>定义一个JavaScript函数，它作为一个参数，被商定的数据结构，以及</li> - <li>使用将发出事件的对象使用名称字符串注册该函数。</li> -</ul> - -<p>该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码，如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用，它定义了响应用户输入或浏览器活动而发出的许多事件。</p> - -<p>现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质，从eventprototype对象派生对象。浏览器使用为功能，将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后，浏览器定义了大量的对象作为事件发射器，并定义了由对象生成的各种各样的事件类型。</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">按钮的事件处理程序演示</h2> - -<p>例如，浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面，一个手指单击。我们可以在HTML页面中定义一个按钮：</p> - -<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>而且，在JavaScript代码中，我们可以首先定义一个函数来监听“click”事件：</p> - -<pre class="brush: js">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>第二，我们使用按钮对象注册我们的函数，无论是在脚本方面，还是使用HTML页面的DOM（文档对象模型）表示：</p> - -<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>或在HTML页面中添加功能的“onclick”属性的值，虽然这第二种方法通常只用于非常简单的网页。</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>这段代码依赖，有一种叫做“点击”事件，称任何监听协议（或处理）与一个事件对象参数的函数（实际上，在这种情况下，衍生的MouseEvent对象），将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮，可以通过将鼠标指针放在HTML按钮，点击鼠标左键，或用手指或手写笔点上面的HTML按钮屏幕互动；当这种情况发生时，该<code>buttonDOMElement</code> JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作，在这种情况下，打开一个HTML警报对话框。注意，处理程序对‘ev’对象有访问权，因为它作为参数传递；对象有关于事件的信息，特别是事件发生的时间。</p> - -<p>作为第二个例子，集成到Web页面中的许多现代JavaScript被封装到事件函数调用中，以确保代码只在HTML被处理并可用于更改或装饰时执行。例如，代码可以附加为：</p> - -<pre class="brush: js">var funcInit = function(){ - // user code goes here and can safetly address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); - -</pre> - -<p>所以，此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意，在这个例子中，代码甚至没有为函数命名事件参数，因为代码永远不需要使用描述事件的数据结构；相反，代码只需要等待运行，直到事件发生之后。</p> - -<p>因此，该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处，因为这些代码异步工作，可能会重复运行，但情况略有不同。</p> - -<h2 id="值得注意的事件">值得注意的事件</h2> - -<p>Web浏览器定义了大量事件，所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。</p> - -<p>一般来说，我们可以根据事件的对象来区分不同类型的事件，包括：</p> - -<ul> - <li>窗口window对象，如由于调整浏览器大小，</li> - <li>window.screen对象，如由于设备的方向变化，</li> - <li>文档document对象，包括页面的加载、修改、用户交互和卸载，</li> - <li>DOM（文档对象模型）树中的对象，包括用户交互或修改，</li> - <li>XMLHttpRequest对象用于网络的要求，和</li> - <li>当媒体流播放器改变状态时，诸如音频audio和视频video等媒体对象。</li> -</ul> - -<p>虽然这个列表目前不完整。</p> - -<p>一些值得注意的事件是：</p> - -<div class="note"> -<p><strong>Note: </strong>这份清单将需要相关的工作；这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释，如部分讨论在 <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> 或 <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>当页面完成渲染时，全局对象窗口window发出一个名为“load”的事件，这意味着所有资源都已下载并执行，以便运行脚本并显示图像，</li> - <li>当浏览器窗口window的高度或宽度被用户更改时，全局对象窗口发出一个称为“resize”的事件，</li> - <li>DOM文档对象代表了HTML文件发出一个事件被称为”DOMContentLoaded“当文档加载完毕，</li> - <li>当鼠标指针位于HTML页面的DOM节点顶部时，当用户按下鼠标按钮时，如div或button的DOM节点对象发出一个名为“click”的事件。</li> -</ul> - -<h2 id="事件对象层次结构">事件对象层次结构</h2> - -<p>Web浏览器定义了许多不同类型的事件。每个定义包括，作为数据结构传递给处理函数，一个对象继承自EventPrototype对象。</p> - -<p>事件对象类层次结构的部分图是：</p> - -<div class="note"> -<p><strong>Note:</strong> 下面的图标是不完整的.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>Web API文档包含定义事件对象的页面，该事件对象还包括事件对象已知的DOM事件子类。</p> - -<h2 id="文档">文档</h2> - -<p>下面是三个链接对MDN（Mozilla开发者网络）网站程序员从事于事件相关的开发是特别有用的：</p> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> 是 <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>的一部分,</li> - <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>Web API 文档中的 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 对象.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/guide/html/html/index.html b/files/zh-cn/orphaned/web/guide/html/html/index.html deleted file mode 100644 index 2e8c247454..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML -tags: - - HTML - - HTML5 - - Web - - Web 开发 - - 帮助 - - 指南 - - 综述 -original_slug: Web/Guide/HTML/HTML ---- -<div class="callout-box"> -<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 演示</div> - -<p>展示了实战中的最新 HTML 技术的 <a href="/zh-CN/demos/tag/tech:html5" title="demos/tag/tech:css3/">演示汇总</a>。</p> - -<p><a href="/zh-CN/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> -</div> - -<p><span class="seoSummary"><strong>HTML5</strong> 是 <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新演进版本。 </span>这个术语代表了两个不同的概念：</p> - -<p><span class="seoSummary">它是</span><span style="line-height: 1.5;">一个新的 HTML </span><em>语言</em><span style="line-height: 1.5;">版本</span><span style="line-height: 1.5;">包含了新的元素，属性和行为，</span><span class="seoSummary" style="line-height: 1.5;">同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。</span><span style="line-height: 1.5;"> 这套技术往往被称作 </span><em>HTML5 和它的朋友们，</em><span style="line-height: 1.5;">通常简称为 </span><em>HTML5</em><span style="line-height: 1.5;">。</span></p> - -<p>从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。</p> - -<ul> - <li><em>语义</em>：能够让你更恰当地描述你的内容是什么。</li> - <li><em>连通性</em>：能够让你和服务器之间通过创新的新技术方法进行通信。</li> - <li><em>离线 & 存储</em>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li> - <li><em>多媒体</em>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li> - <li><em>2D/3D 绘图 & 效果</em>：提供了一个更加分化范围的呈现选择。</li> - <li><em>性能 & 集成</em>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li> - <li><em>设备访问 Device Access</em>：能够处理各种输入和输出设备。</li> - <li><em>样式设计</em>: 让作者们来创作更加复杂的主题吧！</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> - -<dl> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的节段和外观概要</a></dt> - <dd>HTML5 中新的外观概要和节段元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并能够操作新的多媒体内容。</dd> - <dt><a href="/zh-CN/docs/HTML/Forms_in_HTML" title="HTML5 的表单">HTML5 的表单</a></dt> - <dd>看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，{{HTMLElement("input")}} 属性的一些新值 {{htmlattrxref("type", "input")}} 和新的 {{HTMLElement("output")}} 元素。</dd> - <dt>新的语义元素</dt> - <dd>除了区段，媒体和表单元素之外，众多的新元素，像 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}，也增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> - <dt>{{HTMLElement("iframe")}} 的改进</dt> - <dd>使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> - <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> - <dd>允许直接嵌入数学公式。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> - <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> - <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> - <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> -</dl> - -<h2 id="连通性" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">连通性</h2> - -<dl> - <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> - <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> -</dl> - -<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> - -<dl> - <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源：应用程序缓存</a></dt> - <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> - <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> - <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> - <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> - <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> -</dl> - -<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> - -<dl> - <dt><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.</dd> - <dt>Track 和 WebVTT</dt> - <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> -</dl> - -<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> - -<dl> - <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> - <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> - <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> - <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> - <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> - <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> - <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。</dd> - <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> - <dt>即时编译的 JavaScript 引擎</dt> - <dd>新一代的 JavaScript 引擎功能更强大，性能更杰出。</dd> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> - <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">conentEditable 属性：把你的网站改变成 wiki !</a></dt> - <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> - <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> - <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> - <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> - <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> - <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> - <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> - <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>允许控制动画渲染以获得更优性能。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> - <dd>为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。</dd> -</dl> - -<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用和操作计算机的摄像头，并从中存取照片。</dd> - <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> - <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> - <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> - <dd>让浏览器使用地理位置服务定位用户的位置。</dd> - <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> - <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> -</dl> - -<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> - -<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。</p> - -<dl> - <dt>新的背景样式特性</dt> - <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> - <dt>更精美的边框</dt> - <dd>现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> - <dt>为你的样式设置动画</dt> - <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画，或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。</dd> - <dt>排版方面的改进</dt> - <dd>作者拥有更高的控制已达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>， 而且也可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。.</dd> - <dt>新的展示性布局</dt> - <dd>为了提高设计的灵活性，已经有两种新的布局被添加了进来：<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> -</dl> -</div> -</div> - -<p>译注：</p> - -<p>被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> diff --git a/files/zh-cn/orphaned/web/guide/html/html5/index.html b/files/zh-cn/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index fffbfb5204..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - JavaScript - - PHP - - Web - - Web 开发 - - angularjs - - nodejs - - vuejs - - 帮助 - - 指南 - - 综述 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p><span><strong>HTML5</strong> 是</span>定义<span> <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新的版本。 </span>该术语通过两个不同的概念来表现：</p> - -<ul> - <li>它是一个新版本的<strong>HTML</strong>语言，具有新的元素，属性和行为，</li> - <li>它有更大的<strong>技术</strong>集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 <strong><em>HTML5</em></strong>。</li> -</ul> - -<p>设计为所有Open Web开发人员都可以使用，此引用页面链接到许多关于HTML5技术的资源，根据其功能分为几个组。</p> - -<ul> - <li><strong>语义</strong>：能够让你更恰当地描述你的内容是什么。</li> - <li><strong>连通性</strong>：能够让你和服务器之间通过创新的新技术方法进行通信。</li> - <li><strong>离线 & 存储</strong>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li> - <li><strong>多媒体</strong>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li> - <li><strong>2D/3D 绘图 & 效果</strong>：提供了一个更加分化范围的呈现选择。</li> - <li><strong>性能 & 集成</strong>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li> - <li><strong>设备访问 Device Access</strong>：能够处理各种输入和输出设备。</li> - <li><strong>样式设计</strong>: 让作者们来创作更加复杂的主题吧！</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> - -<dl> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的区块和段落元素</a></dt> - <dd>HTML5 中新的区块和段落元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入和允许操作新的多媒体内容。</dd> - <dt><a href="/zh-CN/docs/Learn/HTML/Forms">表单的改进</a></dt> - <dd>看一下 HTML5 中对 web 表单的改进：<a href="/zh-CN/docs/Learn/HTML/Forms/Form_validation">强制校验API</a>，一些新的属性，一些新的{{HTMLElement("input")}} 元素{{htmlattrxref("type", "input")}} 属性值 ，新的 {{HTMLElement("output")}} 元素。</dd> - <dt>新的语义元素</dt> - <dd>除了节段，媒体和表单元素之外，还有众多的新元素，例如 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}和{{HTMLElement("main")}}，这增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> - <dt>{{HTMLElement("iframe")}} 的改进</dt> - <dd>使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> - <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> - <dd>允许直接嵌入数学公式。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> - <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> - <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> - <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> -</dl> - -<h2 id="通信" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">通信</h2> - -<dl> - <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> - <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> -</dl> - -<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> - -<dl> - <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源：应用程序缓存</a></dt> - <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> - <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> - <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> - <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> - <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> -</dl> - -<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> - -<dl> - <dt><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用，操作计算机摄像头，并从中存储图像。</dd> - <dt>Track 和 WebVTT</dt> - <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> -</dl> - -<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> - -<dl> - <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> - <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> - <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> - <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> - <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> - <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> - <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。</dd> - <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> - <dt>即时编译的 JavaScript 引擎</dt> - <dd>新一代的 JavaScript 引擎功能更强大，性能更杰出。</dd> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> - <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable 属性：把你的网站改变成 wiki !</a></dt> - <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> - <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> - <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> - <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> - <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> - <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> - <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> - <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>允许控制动画渲染以获得更优性能。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> - <dd>为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。</dd> -</dl> - -<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用和操作计算机的摄像头，并从中存取照片。</dd> - <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> - <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> - <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> - <dd>让浏览器使用地理位置服务定位用户的位置。</dd> - <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> - <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> -</dl> - -<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> - -<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。</p> - -<dl> - <dt>新的背景样式特性</dt> - <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> - <dt>更精美的边框</dt> - <dd>现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> - <dt>为你的样式设置动画</dt> - <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画，或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。</dd> - <dt>排版方面的改进</dt> - <dd>作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>， 还可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。</dd> - <dt>新的展示性布局</dt> - <dd>为了提高设计的灵活性，已经有两种新的布局被添加了进来：<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> -</dl> -</div> -</div> - -<p>译注：</p> - -<p>被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> - -<p> - <audio class="hidden"> </audio> -</p> diff --git a/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 6aa6081ca7..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: HTML5 入门 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - Basic - - Guide - - HTML - - HTML5 - - NeedsContent - - Web -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>是最新的第五代HTML标准。它不仅提供丰富的媒体支持，而且还增强了对创建一个能够与用户进行交互的Web应用的支持，使他/她的本地数据和服务器交互比以前更有效，更容易。</p> - -<p>一些HTML5特性仍然不被某些浏览器支持。但是，Gecko已经开始推广，火狐浏览器也对HTML5的支持非常好，并且会持续的支持更多的功能。Gecko开始支持HTML5版本1.8.1。你可以在这个<a href="/zh/HTML/HTML5" title="zh/HTML/HTML5">HTML5主页</a>中找到目前Gecko支持的所有的HTML5的功能列表。关于HTML5多浏览器支持的详细信息，请参阅 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 网站</p> - -<h2 id="用HTML5的doctype声明文件包含HTML5标记">用HTML5的doctype声明文件包含HTML5标记</h2> - -<p>HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用：</p> - -<pre class="brush: html"><!DOCTYPE html></pre> - -<p>这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。</p> - -<p>这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。</p> - -<h2 id="用<meta_charset>声明字符集">用<code><meta charset></code>声明字符集</h2> - -<p>在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的{{HTMLElement("meta")}}元素，现在它变得非常简单：</p> - -<pre class="brush: html"><meta charset="UTF-8"></pre> - -<p>把这个放到你的{{HTMLElement("head") }}，因为在一些浏览器中如果声明的字符集和他们的预期的不同，他们会重新解析一遍HTML文档。另外，如果你目前没有使用UTF-8，建议您把您的网页改为这个编码，因为它简化了不同脚本对文件中字符的处理。</p> - -<p>值得注意的是HTML5限制了可用的字符集，他们需要兼容8位的ASCII。这样做是为了加强安全，防止某些类型的攻击。</p> - -<h2 id="使用新的HTML5解析器">使用新的HTML5解析器</h2> - -<p>html5的解析器分析主要是从标签的语义进行，并且语义化标签在html5中得到更加严格的定义。在H5之前，只有明确定义的标签被才能使用，意味着一旦只要有一个小错误在标签上（大部分网站只要有一个），表现出来的形式就是未定义的标签。从本质上讲，这导致所有的浏览器使用相同的标签时，产生的作用和表现的形式都不一样。如今面对标签问题，所有的浏览器商必须定义一个相同标准。</p> - -<p>这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准，同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签，html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题</p> - -<p>别担心，你不需要改变您的网站上的任何东西,Web浏览器的开发商已经在为你做这些了！</p> diff --git a/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index d4d824142f..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: 使用 HTML 章节与大纲 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML - - HTML5 - - 指南 - - 文档结构 - - 高阶 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div class="warning"> -<p>（下方英文原文警告的过时已翻译版本）<strong>注意：</strong>下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。</p> -</div> - -<div class="warning"> -<p><strong>Important</strong>: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm <em>should not be used</em> to convey document structure to users. Authors are advised to use heading <a href="http://www.w3.org/TR/html5/sections.html#rank">rank</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) to convey document structure.</p> -</div> - -<p>HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。</p> - -<h2 id="HTML_4_的文档结构">HTML 4 的文档结构</h2> - -<p>文档结构，即，<code><body></code> 与 <code></body></code> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。</p> - -<p>所以下面的片段：</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><div class="section" id="forest-elephants" > - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <div class="subsection" id="forest-habitat" > - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </div> -</div> -</pre> -</div> - -<p>形成了如下的大纲：</p> - -<pre>1. Forest elephants - 1.1 Habitat -</pre> - -<p>HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,</p> - -<pre class="brush:xml"><h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - <h2>Diet</h2> -<h1>Mongolian gerbils</h1> -</pre> - -<p>会形成如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat - 1.2 Diet -2. Mongolian gerbils -</pre> - -<h2 id="HTML5_解决的问题" style="line-height: 30px;">HTML5 解决的问题</h2> - -<p>HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：</p> - -<ol> - <li> 定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">assistive technology</a>）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。</li> - <li>合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.</li> - <li>HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 </li> - <li>另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。</li> -</ol> - -<p>更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。</p> - -<h2 id="HTML5_的大纲算法">HTML5 的大纲算法</h2> - -<h3 id="定义节段">定义节段</h3> - -<p> {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 </p> - -<div class="note">注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有<span style="line-height: 1.5;">{{HTMLElement("h1")}}. 具体查看 </span><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" style="line-height: 1.5;" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Defining Headings in HTML5</a><span style="line-height: 1.5;">.</span></div> - -<p>Example:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section> - <section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section> - <aside> - <p>advertising block</p> - </aside> -</section> -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>这个HTML片段定义了两个顶级节段：</p> - -<pre><span style="color: red;"><section> - <h1>Forest elephants</h1> - <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section> - <section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section> - <aside> - <p>advertising block</p> - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2010 The Example company</p> -</footer></span></pre> - -<p>第一个节段有三个子节段：</p> - -<pre><section> - <h1>Forest elephants</h1> - - <span style="color: red;"><section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section></span> - - <span style="color: green;"><section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section></span> - - <span style="color: blue;"><aside> - <p>advertising block</p> - </aside></span> -</section> - -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>上面的片段形成了如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat - 1.3 Section (aside) -</pre> - -<h3 id="在HTML5中定义标题">在HTML5中定义标题</h3> - -<p>当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题</p> - -<p>标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </section> -</section> -<section> - <h3>Mongolian gerbils</h3> - <p>In this section, we discuss the famous mongolian gerbils. - ...this section continues... -</section></pre> - -<p>形成了下面的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat -2. Mongolian gerbils</pre> - -<p>注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）</p> - -<h3 id="隐式分节">隐式分节</h3> - -<p>因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。</p> - -<p>HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3 class="implicit subsection">Habitat</h3> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... -</section></pre> - -<p>形成如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat <em>(implicitly defined by the h3 element)</em></pre> - -<p>如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h1 class="implicit section">Mongolian gerbils</h1> - <p>Mongolian gerbils are cute little mammals. - ...this section continues... -</section></pre> - -<p>形成如下的大纲：</p> - -<pre>1. Forest elephants -2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em></pre> - -<p>如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：</p> - -<pre class="brush:xml"><body> - <h1>Mammals</h1> - <h2>Whales</h2> - <p>In this section, we discuss the swimming whales. - ...this section continues... - <section> - <h3>Forest elephants</h3> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3>Mongolian gerbils</h3> - <p>Hordes of gerbils have spread their range far beyond Mongolia. - ...this subsection continues... - <h2>Reptiles</h2> - <p>Reptiles are animals with cold blood. - ...this subsection continues... - </section> -</body></pre> - -<p>形成如下的大纲：</p> - -<pre>1. Mammals - 1.1 Whales <em>(implicitly defined by the h2 element)</em> - 1.2 Forest elephants <em>(explicitly defined by the section element)</em> - 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> -2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em></pre> - -<p>这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。</p> - -<p>作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。</p> - -<h3 id="分节根"><a name="sectioning_root">分节根</a></h3> - -<p>分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。</p> - -<p>Example:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <section> - <h2>Introduction</h2> - <p>In this section, we discuss the lesser known forest elephants</p> - </section> - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. Let's - look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> - <blockquote> - <h1>Borneo</h1> - <p>The forest element lives in Borneo...</p> - </blockquote> - </section> -</section> -</pre> - -<p>例子形成如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat</pre> - -<p>这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲</p> - -<h3 id="大纲之外的节段">大纲之外的节段</h3> - -<p>HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。</p> - -<ol> - <li>HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中</li> - <li>HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。</li> -</ol> - -<h3 id="页眉和页脚">页眉和页脚</h3> - -<p>HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。</p> - -<ol> - <li>HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。</li> - <li>HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。</li> -</ol> - -<h2 id="分节元素中的地址和发表时间">分节元素中的地址和发表时间</h2> - -<p>文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。</p> - -<p>一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。</p> - -<p>同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。</p> - -<h2 id="在不支持HTML5的浏览器器中使用HTML5">在不支持HTML5的浏览器器中使用HTML5</h2> - -<p>分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} - -</pre> - -<p>当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。</p> - -<p>然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。</p> - -<pre class="brush:xml"><noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. -</noscript></pre> - -<p>于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. - </noscript> -<![endif]--></pre> - -<h2 id="总结">总结</h2> - -<p>HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。</p> diff --git a/files/zh-cn/orphaned/web/guide/localizations_and_character_encodings/index.html b/files/zh-cn/orphaned/web/guide/localizations_and_character_encodings/index.html deleted file mode 100644 index 8164afecff..0000000000 --- a/files/zh-cn/orphaned/web/guide/localizations_and_character_encodings/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 本地化和字符编码 -slug: orphaned/Web/Guide/Localizations_and_character_encodings -tags: - - HTML - - 字符编码 -translation_of: Web/Guide/Localizations_and_character_encodings -original_slug: Web/Guide/Localizations_and_character_encodings ---- -<p>浏览器内部是以 Unicode 来处理文本的。然而，在将文本通过网络传递到浏览器时，是使用字节（字符编码）来表示字符的。<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML规范 </a>推荐使用UTF-8编码（可以代表所有的Unicode），并且无论网站要使用哪种编码，都需要其声明所使用的编码类型。</p> - -<p>在 {{HTMLElement("meta")}} 元素中的 {{htmlattrxref("charset", "meta")}} 属性被用来指明页面采用的编码。它<strong>必须</strong>在 {{HTMLElement("head")}} 定义块中使用。</p> - -<p>例如，要指定页面正在使用UTF-8字符编码（按照建议），只需将以下行放在{{HTMLElement("head")}}标签中</p> - -<pre class="brush: html"><meta charset="utf-8"> -</pre> - -<h2 id="浏览器内部细节">浏览器内部细节</h2> - -<p>当 Web 内容依据 HTML 规范要求声明了编码时，Firefox将转换该编码内容到内部编码格式（声明编码->Unicode）。不幸的是，以往的Web内容并不总是使用UTF-8编码且声明为UTF-8编码。在20世纪90年代，不声明编码类型，或者使用不能代表所有Unicode的特定区域的编码来处理内容的情况都是很常见的。</p> - -<p>对于不声明其编码，且不符合HTML规范的内容的处理，Firefox需要一个备用编码。大多数时候，备用编码是windows-1252（通常称为ISO-8859-1），这一编码在上世纪90年代大量用于部署在美国和西欧的Windows应用程序，而且它是当时大量部署的UNIX应用程序（也主要在美国和西欧）编码的超集。不过即使这一时期同样在一些地区（非美国和西欧），其网络内容中也不是采用windows-1252编码的，在这些地区，对于不声明编码的内容备用编码需要一个非windows-1252（non-windows-1252）。</p> - -<p>不幸的是，有太多区域对应不同的备用编码（non-windows-1252），这意味着Firefox不能很好的确定那么多遗留内容不同的备用编码。为了处理这些内容，Firefox把windows-1252作为备用编码，用于旧的跨区域内容部分，并促其采用正确的地区对应备用编码。在新创建内容时，需要声明编码，而备用编码不再参与内容的处理。</p> - -<p>此外，在上世纪90年代有少数地区，没有明显的单一的特定区域编码，从而引入了多个遗留编码到Web内容中，这使得内容展示效果依赖于启发检测到的编码设定。为此Firefox仍然在这些区域中进行启发式检测（甚至可以指定编码）。</p> - -<h2 id="查找编码规范名称">查找编码规范名称</h2> - -<p><br> - 下面的文字是指编码规范名称。规范名称是注册在<a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>（unixcharset表达式）中等号右边的值。</p> - -<h2 id="指定备用编码">指定备用编码</h2> - -<p><strong>对于 Firefox 28, 这部分内容是过时的，因为 <code>intl.charset.default</code>不再存在。从地区映射备用编码现在已经集成到Gecko内部。</strong></p> - -<p>备用编码指定在 <code>intl.properties</code> 下的<code>intl.charset.default</code> 中。它用于指定本地化传统内容将采用的编码。它应该设定为当地遇到未定义编码传统内容最可能采用的编码。<strong>注意</strong> 这里指定的备用编码不一定能够准确表示内容所需的当地语言所有本地化字符！</p> - -<p>在西欧、北美洲、中美洲、南美洲、非洲、中亚和大洋洲等等地区，备用编码通常设置为windows-1252，但在其他地区，如中欧、东欧、中东、东亚等等地区通常需要设置为其他编码。</p> - -<p>为了避免Web作者创造新的UTF-8的内容时没有声明内容使用UTF-8，且为了最大限度地提高用户跨区域阅读内容的能力，不设置备用编码就采用UTF-8。注意，Firefox不再发送接受字符的HTTP头( <code>Accept-Charset</code> )，所以设定备用编码时不需要考虑不需要考虑 Accept-Charset的内容。</p> - -<p>对于地区后备编码目前指定为ISO-8859-1的，应该改为windows-1252。虽然ISO-8859-1编码和windows-1252编码相同。但火狐正在推动windows-1252作为这些内容在 <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a> （编码规范）中的首选标准。</p> - -<p>对于Internet Explorer拥有比Firefox更大的市场份额的区域，备用编码通常应设置为与Internet Explorer相同的值。通过加载测试页面，您可以看到特定浏览器的备用编码。（在测试时一定要使用默认设置！）</p> - -<p>对于Firefox比Internet Explorer拥有更多市场份额的地区，最好不要更改回退编码，即使它不遵循上面给出的指导。（例如，波兰、匈牙利和捷克的地区的备用编码应该继续采用ISO-8859-2，尽管这与IE是不同的备用编码。）</p> - -<p>有疑问时，使用windows-1252作为备用的编码。</p> - -<h2 id="指定启发式检测模式">指定启发式检测模式</h2> - -<p class="ordinary-output target-output clearfix"><span>启发式检测模式是由</span><code>intl.properties</code><span>中偏好</span><code>intl.charset.detector</code><span>指定。</span><span>除了俄语、乌克兰语和日语以外，所有区域的设置必须留空。</span><span>在任何情况下都不要指定</span> "universal" (<span>“万能”)探测器。</span><span>尽管它的名字并不普遍！</span></p> - -<h2 id="少数民族语言例外">少数民族语言例外</h2> - -<p>如果用户本身可采用少数民族语言和文字，但他通常使用区域通用语言，这时适当的指定备用编码和启发式检测模式需要与所处广大的区域的语言定位相同。例如，对于俄罗斯的少数民族语言本地化，复制来自俄罗斯本地化的设置是合适的。</p> - -<h2 id="设置一些更容易从菜单选择的字符编码">设置一些更容易从菜单选择的字符编码</h2> - -<p><code>intl.properties</code>中的 <code>intl.charsetmenu.browser.static</code> 可以标记一些编码，它们出现在浏览器编码选择菜单中。该值是一个逗号分隔的规范编码名称列表。清单应至少包括备用编码，windows-1252和UTF-8编码。对于可能有多个遗留编码的地区，这些编码都应被包括。例如，在日本设置 Shift_JIS为备用编码，但也有其他的传统编码： ISO-2022-JP和EUC-JP。因此， <code>intl.charsetmenu.browser.static</code>应该设置为" Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8"。</p> diff --git a/files/zh-cn/orphaned/web/html/element/command/index.html b/files/zh-cn/orphaned/web/html/element/command/index.html deleted file mode 100644 index 5e53ccc7d0..0000000000 --- a/files/zh-cn/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: command -slug: orphaned/Web/HTML/Element/command -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -<div class="warning"> -<p><strong>已废弃</strong></p> - -<p>此功能已过时。 虽然它可能仍然在某些浏览器中工作，但不鼓励使用它，因为它可能随时被删除。 尽量避免使用它。</p> -</div> - -<div class="note"> -<p><strong>注意：</strong><code>command</code>元素已经被{{Gecko("24.0")}}引擎移除以利于{{HTMLElement("menuitem")}}元素。Firefox从未支持<code>command</code>元素，并且在<a href="https://developer.mozilla.org/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>中删除了对{{domxref("HTMLCommandElement")}}DOM接口的实现。</p> -</div> - -<h2 class="editable" id="概述"><span>概述</span></h2> - -<p><code>command元素</code>用来表示一个用户可以调用的命令.</p> - -<h2 id="使用规范">使用规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>内容类别</td> - <td><a href="/zh-cn/HTML/Content_categories#Flow_content" title="zh-cn/HTML/Content categories#Flow content">Flow content</a>, <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="zh-cn/HTML/Content categories#Phrasing content">phrasing content</a></td> - </tr> - <tr> - <td>是否允许有内容</td> - <td>否, 它是一个空元素</td> - </tr> - <tr> - <td>标签遗漏</td> - <td>必须有开始标签, 不可以有结束标签.</td> - </tr> - <tr> - <td>允许的父元素</td> - <td>任何可以包含 <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/zh-cn/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素.</td> - </tr> - <tr> - <td>规范文档</td> - <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td> - </tr> - </tbody> -</table> - -<h2 id="属性">属性</h2> - -<p>和其他的HTML元素一样, 该元素支持<a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">全局属性</a>.</p> - -<dl> - <dt>{{ htmlattrdef("checked") }}</dt> - <dd>表明该元素已被选择, 除非元素的<code>type</code> 属性是 <code>checkbox 或</code>者 <code>radio</code>,否则该属性必须被省略.</dd> - <dt>{{ htmlattrdef("disabled") }}</dt> - <dd>表明该command元素已经被禁用.</dd> - <dt>{{ htmlattrdef("icon") }}</dt> - <dd>用一张图片来显示该command元素.</dd> - <dt>{{ htmlattrdef("label") }}</dt> - <dd>该command元素的名称.用来显示给用户.</dd> - <dt>{{ htmlattrdef("radiogroup") }}</dt> - <dd>如果该元素的<code>type</code>属性为<code>radio</code>,则radiogroup属性用来表示这一组command元素的公用名称. 如果<code>type</code>属性不是<code>radio</code>,则radiogroup属性必须省略.</dd> - <dt>{{ htmlattrdef("type") }}</dt> - <dd>该属性用来表明command元素的类型,可以是下面三种值: - <ul> - <li> - <p><code>command</code> 或者为空,表示一个普通的command元素.</p> - </li> - <li> - <p><code>checkbox</code>表明该command元素体现为一个复选框,可以来回切换选中状态.</p> - </li> - <li> - <p><code>radio</code> 表明该command元素体现为一个单选按钮,可以来回切换选中状态.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="DOM_接口">DOM 接口</h2> - -<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>接口.</p> - -<h2 id="例子">例子</h2> - -<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<p>{{ languages( { "en": "en/HTML/Element/command" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/html/element/element/index.html b/files/zh-cn/orphaned/web/html/element/element/index.html deleted file mode 100644 index 3bf7f81fff..0000000000 --- a/files/zh-cn/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: <element> -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Element/element ---- -<p>{{obsolete_header}}</p> - -<div class="note"> -<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> -</div> - -<h2 id="Summary" name="Summary">简介</h2> - -<p><element>元素被定义在最新的 HTML DOM 元素中。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>这个元素只有<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> - -<h2 id="Examples" name="Examples">示例</h2> - -<p>Text goes here.</p> - -<pre class="brush: html">More text goes here. -</pre> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<p><element>元素以前位于<a href="http://w3c.github.io/webcomponents/spec/custom/">自定义元素</a>的草稿规范中，但已被删除</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">另请参阅</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/orphaned/web/html/element/isindex/index.html b/files/zh-cn/orphaned/web/html/element/isindex/index.html deleted file mode 100644 index 6ab341ec6f..0000000000 --- a/files/zh-cn/orphaned/web/html/element/isindex/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: <isindex> -slug: orphaned/Web/HTML/Element/isindex -tags: - - HTML - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Element/isindex ---- -<div>{{Deprecated_header}}</div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><code><strong><isindex>元素</strong>的作用是</code>使浏览器显示一个对话框，提示用户输入单行文本。在W3C的规范中建议，<code><isindex>元素最好被放置在</code> {{HTMLElement("head")}} 标签块内，但是对于浏览器来说，<isindex>标签在页面任何位置都没有关系。</p> - -<p>从HTML4规范开始，就不建议在您编写的HTML文档内使用<isindex>元素，您可以用<input>标签来替代。</p> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>本元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> - -<dl> - <dt>{{htmlattrdef("prompt")}}</dt> - <dd>该属性用作在输入框前添加一个输入提示文本。</dd> - <dt>{{htmlattrdef("action")}}</dt> - <dd>本属性可以规定文本框中的值发送向一个没有被W3C规范的URL。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<pre class="brush: html"><head> - <isindex prompt="Search Document... " /> -</head></pre> - -<h2 id="See_also" name="See_also">参阅</h2> - -<ul> - <li>{{HTMLElement("input")}}</li> -</ul> - -<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/orphaned/web/html/element/listing/index.html b/files/zh-cn/orphaned/web/html/element/listing/index.html deleted file mode 100644 index 672a23df81..0000000000 --- a/files/zh-cn/orphaned/web/html/element/listing/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: <listing> -slug: orphaned/Web/HTML/Element/listing -translation_of: Web/HTML/Element/listing -original_slug: Web/HTML/Element/listing ---- -<div>{{Obsolete_header}}</div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><em>HTML 列表元素</em> (<code><listing></code>) 渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。HTML2 标准建议，当一行不超过 132 个字符时，不应该将其拆开。</p> - -<div class="note">注：不要使用这个元素。 -<ul> - <li>它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。它甚至在 HTML5 中过时，并且可能由某些浏览器渲染为 {{HTMLElement("pre")}} 元素，它会解释其中的 HTML。</li> - <li>而是要使用 {{HTMLElement("pre")}} 元素，或者如果满足语义的话，使用 {{HTMLElement("code")}} 元素，最终会转义 HTML '<code><</code>' 和 <code>></code>' ，以便它们不会被解释。</li> - <li>等宽字体也可以显示在 {{HTMLElement("div")}} 元素中，通过使用足够的 <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> 样式，在 {{cssxref("font-family")}} 中将 <code>monospace</code> 用作通用字体（generic-font）的值。</li> -</ul> -</div> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>除了 <a class="new " href="/en-US/docs/Web/HTML/global_attributes" rel="internal" title="HTML/global attributes">全局属性</a> 之外，这个元素没有其它属性。</p> - -<h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> - -<p>元素实现了 {{domxref('HTMLElement')}} 接口。</p> - -<div class="note"> -<p><strong>实现注解：</strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> -</div> - -<h2 id="See_also" name="See_also">另见</h2> - -<ul> - <li>{{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。</li> - <li>{{HTMLElement("plaintext")}} 和 {{HTMLElement("xmp")}} 元素，类似于 {{HTMLElement("listing")}} 但是也过时了。</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/orphaned/web/html/element/multicol/index.html b/files/zh-cn/orphaned/web/html/element/multicol/index.html deleted file mode 100644 index 589528af71..0000000000 --- a/files/zh-cn/orphaned/web/html/element/multicol/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: <multicol> -slug: orphaned/Web/HTML/Element/multicol -tags: - - CSS Column -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Element/multicol ---- -<div>{{non-standard_header}}</div> - -<h2 id="概要">概要</h2> - -<p>HTML<multicol> 元素是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。</p> - -<div class="note"> -<p>不要使用这个！<strong><em> </em></strong>为了实现多列布局，你应该使用常规的 HTML 元素，例如组合 {{HTMLElement("div")}} 和 <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/CSS/columns">CSS 列</a> 特性。</p> -</div> - -<p>要注意， Firefox 22 之前，虽然不受支持， <code><multicol></code> 元素和 {{domxref("HTMLSpanElement")}} 相关。按照规定的要求，之后它被修复，并且现在和 {{domxref("HTMLUnknownElement")}} 相关。</p> diff --git a/files/zh-cn/orphaned/web/html/element/nextid/index.html b/files/zh-cn/orphaned/web/html/element/nextid/index.html deleted file mode 100644 index 9c2c724a67..0000000000 --- a/files/zh-cn/orphaned/web/html/element/nextid/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: '<nextid>: 下一个ID元素（已过时）' -slug: orphaned/Web/HTML/Element/nextid -tags: - - HTML - - 元素 - - 参考 - - 网页 -translation_of: Web/HTML/Element/nextid -original_slug: Web/HTML/Element/nextid ---- -<div>{{Deprecated_header}}</div> - -<p><span class="seoSummary"><strong><code><nextid></code></strong> 是一个过时的HTML元素，用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 它是由该Web编辑工具自动生成的，不需要手动调整或输入。 通过从HTML版本的官方公共DTD中删除，此元素的区别在于它是第一个成为“丢失标签”之一的元素。 它也可能是所有早期HTML元素中最少被了解的之一。</span></p> - -<dl> - <dt>HTML "0.a" - 从开始到1991年1月10日</dt> - <dd>该标签尚未发明，因此在此期间未发现任何示例。</dd> - <dt>HTML "0.c" - 从1991年1月23日至1992年11月23日</dt> - <dd>HTML的此早期版本以非SGML兼容形式引入了<code><NEXTID></code>该形式仅将数字值单独用作“属性”。 </dd> - <dt>HTML "0.d" - 从1992年11月26日到1993年5月24日</dt> - <dd>在此跨度内，NeXT和尚存的最早的DTD表示<code><NEXTID></code> 仅对其新引入的属性N的值取一个数字。</dd> - <dt>HTML "1.k" - 版本1（第一版）</dt> - <dd>在HTML的第一个初稿中，<code><NEXTID></code> 与HTML 2相同，最终允许使用名称代替其属性值仅使用数字。</dd> - <dt>HTML "1.m" - 版本1（第二版）</dt> - <dd>在下一个发布的HTML草案中，可以使用简单的SGML命令分别取消选择<code><NEXTID></code> <code><NEXTID></code> 进行显示。</dd> - <dt>HTML 第2版第1级</dt> - <dd>这类似于2级默认值，但不包括所有表单元素。 i. e. <code><FORM></code>, <code><INPUT></code>, <code><TEXTAREA></code>, <code><SELECT></code>, 和 <code><OPTION></code></dd> - <dt>HTML 版本2严格级别1</dt> - <dd>这类似于常规的1级，但它也排除了这些折旧的元素以及诸如在链接(<code><A></code> 内嵌套标头（<code><H*></code> 元素）之类的构造。</dd> - <dt>HTML 第2版第2级</dt> - <dd>这是默认设置，包括并允许所有HTML 2级功能以及元素和属性</dd> - <dt>HTML 第2版严格级别2</dt> - <dd>这不包括这些已贬值的元素，也禁止诸如在链接 (<code><A>元素内嵌套标头</code>(<code><H*></code> 元素），或者有一个表单 <code><INPUT></code> 元素，它不在一个块级别中的元素如 <code><P></code>中。</dd> - <dt>HTML 版本3.2</dt> - <dd><code><NEXTID></code> 完全消失了，再也不会被听到。.</dd> -</dl> - -<h2 id="属性">属性</h2> - -<p>像所有其他HTML元素一样，此元素接受<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> - -<dl> - <dt>{{htmlattrdef("n")}}</dt> - <dd>参考锚点。</dd> -</dl> - -<h2 id="例子">例子</h2> - -<p>用户在目录中输入四个部分标题（并且大概也在这些部分中编写段落材料）。 四个部分中每个部分的标题将被分配名称值“ z0”，“ z1”，“ z2”和“ z3”。 其中第一个将在目录中产生如下条目：<code><A NAME="z0" HREF="#z4">FIRST SECTION NAME</A></code> 并且节标题将被标记为： <code><H2><A NAME="z4">FIRST SECTION NAME</A></H2></code>. 接下来的三个部分z5，z6和z7（以及名为z1，z2和z3的目录条目）将继续这三个部分，每个部分都会自动使用这些名称来指定锚点。然后，用户保存并关闭文档。 然后，NeXT将在HTML文档的标头中添加一个特殊标记 <code><NEXTID N="z8"></code>, 以告知在何处继续其命名约定。 想象一下，网络作者打开了文档进行进一步编辑。 他们想在第二部分之后添加几个新的部分，并在末尾追加四个部分。 打开文档时，NeXT编辑器会找到并读取此 <code><NEXTID N="z8"></code>标记， 并且现在知道将这些新节中的第一个命名为目录中的z8，并将z14命名为内容主体。 可能看起来像这样：</p> - -<pre class="brush: html"><HTML> - <HEAD> - <TITLE> ... whatever ... </TITLE> - <LINK, META, BASE, etc. as applicable for the head of this document> - <NEXTID N="z20"> - </HEAD> - - <BODY> - <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> - <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> - <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> - <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> - <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> - <A NAME="z3" HREF="#z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A> - <A NAME="z10" HREF="#z16">SEVENTH SECTION HEADING</A> - <A NAME="z11" HREF="#z17">EIGHTH SECTION HEADING</A> - <A NAME="z12" HREF="#z18">NINTH SECTION HEADING</A> - <A NAME="z13" HREF="#z19">TENTH SECTION HEADING</A> - <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z16">SEVENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z17">EIGHTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z18">NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z19">TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - </BODY> -</HTML> -</pre> - -<p>然后，他们使用NeXT编辑器将该文档的副本转发给某人，并删除z7和z19节，从z20到z29添加十个节，然后删除z24和z29段。 因此，返回修改后的NEXTID值是z30：</p> - -<pre class="brush: html"><HTML> - <HEAD> - <TITLE> ... whatever ... </TITLE> - <LINK, META, BASE, etc. as applicable for the head of this document> - <NEXTID N="z30"> - </HEAD> - - <BODY> - <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> - <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> - <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> - <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> - <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> - <A NAME="z10" HREF="#z16">SEVENTH (NOW SIXTH) SECTION HEADING</A> - <A NAME="z11" HREF="#z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A> - <A NAME="z12" HREF="#z18">NINTH (NOW EIGHTH) SECTION HEADING</A> - <A NAME="z20" HREF="#z25">NEW NINTH SECTION HEADING</A> - <A NAME="z21" HREF="#z26">NEW TENTH SECTION HEADING</A> - <A NAME="z22" HREF="#z27">NEW ELEVENTH SECTION HEADING</A> - <A NAME="e23" HREF="#z28">NEW TWELFTH SECTION HEADING</A> - <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z16">SEVENTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z18">NINTH (NOW EIGHTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z25">NEW NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z26">NEW TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z27">NEW ELENENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z28">NEW TWELFTH SECTION HEADING</A></H1><P> ... whatever ... </P> - </BODY> -</HTML> -</pre> - -<h2 id="HTML_参考">HTML 参考</h2> - -<ul> - <li><a class="external text" href="http://www.the-pope.com/nextid.html" rel="nofollow">工作 NEXTID 标签元素实例</a></li> - <li><a class="external text" href="https://tools.ietf.org/html/rfc1866#section-5.2.6" rel="nofollow">5.2.6. 下一个ID: NEXTID</a></li> -</ul> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("html.elements.nextid")}}</p> - -<h2 id="另请详见">另请详见</h2> - -<ul> - <li>{{HTMLElement("isindex")}}</li> -</ul> - -<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html b/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 19b88c3d0e..0000000000 --- a/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Global_attributes/dropzone ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p><strong>dropzone</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 是个枚举属性，表示什么内容类型可以拖放到元素上，使用 <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>，它可以拥有以下值：</p> - -<ul> - <li><span style="font-family: courier new;">copy，</span>它表明拖放行为会创建被拖放元素的副本。</li> - <li><span style="font-family: courier new;">move</span>，它表明被拖放元素会移动到新的位置。</li> - <li><span style="font-family: courier new;">link</span>，它会创建被拖放数据的链接。 </li> -</ul> - -<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('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>与最新的快照{{SpecName('HTML5.1')}} 没有区别</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>{{SpecName('HTML WHATWG')}} 的快照，最初定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基础支持</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基础支持</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown}}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="另见">另见</h2> - -<ul> - <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/html/preloading_content/index.html b/files/zh-cn/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index 454ea6a38b..0000000000 --- a/files/zh-cn/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: 通过rel="preload"进行内容预加载 -slug: orphaned/Web/HTML/Preloading_content -tags: - - HTML - - JavaScript - - Link - - as - - 媒体 - - 媒体查询 - - 性能 - - 性能优化 - - 指南 - - 预加载 -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -<p class="summary"> {{htmlelement("link")}} 元素的 {{htmlattrxref("rel", "link")}} 属性的属性值<code>preload</code>能够让你在你的HTML页面中 {{htmlelement("head")}}元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用<code>preload</code>机制的基本说明。</p> - -<h2 id="基础部分">基础部分</h2> - -<p><code><link></code> 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> - -<p>但是在这里，我们将使用<code>preload</code>作为<code>rel</code>属性的属性值。这种做法将把<code><link></code> 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 {{htmlattrxref("href", "link")}}和{{htmlattrxref("as", "link")}} 属性指定需要被预加载资源的资源路径及其类型。</p> - -<p>一个简单的例子可能看起来像下面这样 （在这里可以查看示例的<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS和CSS源代码</a>，或是<a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">在线实例</a>）</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>JS and CSS preload example</title> - - <link rel="preload" href="style.css" as="style"> - <link rel="preload" href="main.js" as="script"> - - <link rel="stylesheet" href="style.css"> -</head> - -<body> - <h1>bouncing balls</h1> - <canvas></canvas> - - <script src="main.js"></script> -</body></pre> - -<p>在这里，我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观的得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说，也是如此。 例如那些在CSS文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件。</p> - -<p><code>preload</code> 还有许多其他好处。使用 <code>as</code> 来指定将要预加载的内容的类型，将使得浏览器能够：</p> - -<ul> - <li>更精确地优化资源加载优先级。</li> - <li>匹配未来的加载需求，在适当的情况下，重复利用同一资源。</li> - <li>为资源应用正确的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">内容安全策略</a>。</li> - <li>为资源设置正确的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept" title="The Accept request HTTP header advertises which content types, expressed as MIME types, the client is able to understand. Using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the Content-Type response header. Browsers set adequate values for this header depending of the context where the request is done: when fetching a CSS stylesheet a different value is set for the request than when fetching an image, video or a script."><code>Accept</code></a> 请求头。</li> -</ul> - -<h3 id="哪些类型的内容可以被预加载？">哪些类型的内容可以被预加载？</h3> - -<p>许多不同类型的内容都可以被预加载，一些主要可用的<code>as</code> 属性值列举如下：</p> - -<ul> - <li><code>audio</code>: 音频文件。</li> - <li><code>document</code>: 一个将要被嵌入到{{htmlelement("frame")}}或{{htmlelement("iframe")}}内部的HTML文档。</li> - <li><code>embed</code>: 一个将要被嵌入到{{htmlelement("embed")}}元素内部的资源。</li> - <li><code>fetch</code>: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。</li> - <li><code>font</code>: 字体文件。</li> - <li><code>image</code>: 图片文件。</li> - <li><code>object</code>: 一个将会被嵌入到{{htmlelement("embed")}}元素内的文件。</li> - <li><code>script</code>: JavaScript文件。</li> - <li><code>style</code>: 样式表。</li> - <li><code>track</code>: WebVTT文件。</li> - <li><code>worker</code>: 一个JavaScript的web worker或shared worker。</li> - <li><code>video</code>: 视频文件。</li> -</ul> - -<div class="note"> -<p><strong>注意</strong>: 你可以通过进一步阅读<a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>来了解关于这些属性值以及其他在Preload方案中预期将采纳的特性的细节。同样需要注意的是，关于<code>as</code>属性的有效值得完整列表是由Fetch方案来制定的，可以查看<a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>来进行了解。</p> -</div> - -<h2 id="包含一个MIME类型">包含一个MIME类型</h2> - -<p><code><link></code> 元素可以接受一个{{htmlattrxref("type", "link")}}属性。这一属性可以包含该元素所指向资源的MIME类型。在浏览器进行预加载的时候，这个属性值将会非常有用——浏览器将使用<code>type</code>属性来判断它是否支持这一资源，如果浏览器支持这一类型资源的预加载，下载将会开始，否则便对其加以忽略。</p> - -<p>你可以在我们的视频示例中看到一个与此有关的示例（查看<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">完整源码</a>，也可以查看<a href="https://mdn.github.io/html-examples/link-rel-preload/video/">在线示例</a>）:</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Video preload example</title> - - <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> -</head> -<body> - <video controls> - <source src="sintel-short.mp4" type="video/mp4"> - <source src="sintel-short.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> - </video> -</body></pre> - -<p>在这个实例中，支持MP4格式的浏览器将仅预加载并使用MP4资源，以使得视频播放器的表现尽可能的流畅，或者说，为用户提供更好的响应。而不支持MP4格式的浏览器仍然能够加载视频的WebM版本，但无法体验到预加载带来的良好体验。这个例子展示了预加载机制如何与渐进式增强的哲学进行有机的结合。</p> - -<h2 id="跨域获取">跨域获取</h2> - -<p>如果你已经有了一个可以正确工作的<a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>设置，那么你也可以同样成功的预加载那些跨域资源，只需要你在<code><link></code>元素中设置好{{htmlattrxref("crossorigin","link")}}属性即可。</p> - -<p>一个有趣的情况是，如果你需要获取的是字体文件，那么即使是非跨域的情况下，也需要应用这一属性。因为各种各样的原因，这些获取请求必须使用以匿名模式使用CORS（如果你对其中的细节感兴趣，可以查看<a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>一文）。</p> - -<p>我们将以这个情况作为一个示例——首先是由于字体文件的加载是预加载方面一个好的用例，其次，这也比真正的配置一个跨域请求的例子要简单许多。你可以查看 <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">在Github上的示例源代码</a>（也可以查看<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">在线示例</a>）：</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Web font example</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> - - <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> - - <link href="style.css" rel="stylesheet" type="text/css"> -</head> -<body> - ... -</body></pre> - -<p>你可以看到，在这里，我们不仅通过配置<code>type</code>属性提供了一个MIME类型的暗示，我们也提供了一个<code>crossorigin</code> 属性来处理CORS问题。</p> - -<h2 id="包含媒体">包含媒体</h2> - -<p><code><link></code>元素有一个很棒的特性是它们能够接受一个{{htmlattrxref("media", "link")}}属性。它们可以接受<a href="/en-US/docs/Web/CSS/@media#Media_types">媒体类型</a>或有效的<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询</a>作为属性值，这将令你能够使用响应式的预加载！</p> - -<p>让我们来看一个简单的示例（可以查看<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">Github上的源代码</a>或<a href="https://mdn.github.io/html-examples/link-rel-preload/media/">在线示例</a>）：</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Responsive preload example</title> - - <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> - <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> - - <link rel="stylesheet" href="main.css"> -</head> -<body> - <header> - <h1>My site</h1> - </header> - - <script> - var mediaQueryList = window.matchMedia("(max-width: 600px)"); - var header = document.querySelector('header'); - - if(mediaQueryList.matches) { - header.style.backgroundImage = 'url(bg-image-narrow.png)'; - } else { - header.style.backgroundImage = 'url(bg-image-wide.png)'; - } - </script> -</body></pre> - -<p>你可以看到我们在<code><link></code>元素中包含了一个<code>media</code>属性，因此，当用户在使用较窄屏幕的设备时，较窄的图片将会被预加载，而在较宽的设备上，较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过{{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} 来加以实现（可以查看<a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>一文来了解更多信息）。</p> - -<p>这一特性将使另一种情况成为可能——字体在随着页面渲染完成的时候即可使用，减少了FOUT (无样式字体闪烁，flash of unstyled text)问题。</p> - -<p>值得注意的是，这一特特性并不仅限于图片，或其他有着同样类型的文件，还有更多想象空间。比如，你可以在用户仅有较窄的屏幕，CPU和带宽资源较为有限的情况下预加载并展示一个简单的SVG图表，而在用户资源较为充裕的时候再去加载一系列复杂的JavaScript文件以显示一个有交互功能的3D模型。</p> - -<h2 id="脚本化与预加载">脚本化与预加载</h2> - -<p>另一项很棒的关于预加载的事情是，如果需要，你可以完全以脚本化的方式来执行这些预加载操作。例如，我们在这里创建一个{{domxref("HTMLLinkElement")}}实例，然后将他们附加到DOM上：</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>这意味着浏览器将预加载这个JavaScript文件，但并不实际执行它。</p> - -<p>如果要对其加以执行，在需要的时候，你可以执行：</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>当你需要预加载一个脚本，但需要推迟到需要的时候才令其执行时，这种方式会特别有用。</p> - -<h2 id="其他资源预加载机制">其他资源预加载机制</h2> - -<p>还存在一些其他预加载机制，但没有哪个会比<code><link rel="preload"></code>在大多数情况下更符合你的需要和预期：</p> - -<ul> - <li><code><link rel="prefetch"></code> 已经被许多浏览器支持了相当长的时间，但它是意图预获取一些资源，以备下一个导航/页面使用（比如，当你去到下一个页面时）。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用<code>prefetch</code>的资源一个相对较低的优先级——与使用<code>preload</code>的资源相比。毕竟，当前的页面比下一个页面相对更加重要。查看<a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a>可以了解更多细节。</li> - <li><code><link rel="subresource"></code>被Chrome支持了有一段时间，并且已经有些搔到预加载当前导航/页面（所含有的资源）的痒处了。但它有一个问题——没有办法处理所获取内容的优先级（<code>as</code>也并不存在），所以最终，这些资源会以一个相当低的优先级被加载，这使得它能提供的帮助相当有限。</li> - <li>除以上这些以外，还有大量的基于脚本的资源加载器。但这些加载器对于浏览器的加载优先级队列完全束手无策，这也使得他们不得不屈服于同样的性能问题。</li> -</ul> - -<h2 id="Specifications" name="Specifications">相关规范／草案</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td><code>preload</code> 的更多详情</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td><code>rel=preload</code> 的定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatGeckoDesktop("56")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>47</td> - <td>11</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatAndroid(56)}}</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatGeckoMobile("56")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>11</td> - <td>{{CompatChrome(50.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox支持对于如下内容的预加载（{{htmlattrxref("as","link")}}属性的有效值）—— <code>script</code>，<code>style</code>，<code>image</code>，<code>video</code>，<code>audio</code>，<code>track</code>，<code>font</code>， 以及 <code>fetch</code>。关于所支持的字体类型的预加载被定义在<a href="https://www.iana.org/assignments/media-types/media-types.xhtml#font">fonts media type list</a> 中（注意，<code>font/collection</code>不被支持）。同样需要注意的是，当前的Firefox仅支持可缓存资源的预加载。</p> - -<h2 id="其他参考">其他参考</h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> -</ul> diff --git a/files/zh-cn/orphaned/web/http/headers/index/index.html b/files/zh-cn/orphaned/web/http/headers/index/index.html deleted file mode 100644 index 6268193b12..0000000000 --- a/files/zh-cn/orphaned/web/http/headers/index/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Index -slug: orphaned/Web/HTTP/Headers/Index -translation_of: Web/HTTP/Headers/Index -original_slug: Web/HTTP/Headers/Index ---- -<div>{{HTTPSidebar}}</div> - -<p>{{Index("/en-US/docs/Web/HTTP/Headers")}}</p> diff --git a/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html b/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html deleted file mode 100644 index 4a8baf0933..0000000000 --- a/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html +++ /dev/null @@ -1,543 +0,0 @@ ---- -title: 跨域资源共享(CORS) -slug: orphaned/Web/HTTP/跨域资源共享(CORS)_ -original_slug: Web/HTTP/跨域资源共享(CORS)_ ---- -<div>{{ HTTPSidebar }}</div> - -<div></div> - -<div><span class="seoSummary">跨域资源共享({{Glossary("CORS")}}) 是一种机制，它使用额外的 {{Glossary("HTTP")}} 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。</span>当一个资源从与该资源本身所在的服务器<strong>不同的域、协议或端口</strong>请求一个资源时，资源会发起一个<strong>跨域 HTTP 请求</strong>。</div> - -<div></div> - -<div>比<font>如，站点 http://domain-a.com 的某 HTML 页面通过 <a href="/zh-CN/docs/Web/HTML/Element/Img#Attributes"><img> 的 src </a>请求 http://domain-b.com/image.jpg。网络</font>上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。</div> - -<div></div> - -<p>出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。</p> - -<p> （译者注：这段描述不准确，并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。）</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> - -<p>跨域资源共享（ {{Glossary("CORS")}} ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 {{domxref("XMLHttpRequest")}} 或 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。</p> - -<h2 id="谁应该读这篇文章？">谁应该读这篇文章？</h2> - -<p>说实话，每个人。</p> - -<p>更具体地来讲，这篇文章适用于网站管理员、后端和前端开发者。现代浏览器处理跨域资源共享的客户端部分，包括HTTP头和相关策略的执行。但是这一新标准意味着服务器需要处理新的请求头和响应头。对于服务端的支持，开发者可以阅读补充材料 <a class="internal" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-Side_Access_Control" title="En/Server-Side Access Control">cross-origin sharing from a server perspective (with PHP code snippets)</a> 。</p> - -<h2 id="什么情况下需要_CORS_？">什么情况下需要 CORS ？</h2> - -<p>跨域资源共享标准（ <a class="external external-icon" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">cross-origin sharing standard</a> ）允许在下列场景中使用跨域 HTTP 请求：</p> - -<ul> - <li>前文提到的由 {{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> 发起的跨域 HTTP 请求。</li> - <li>Web 字体 (CSS 中通过<code> @font-face </code>使用跨域字体资源), <a class="external external-icon" href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox" title="http://www.webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox">因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用</a>。</li> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL 贴图</a></li> - <li>使用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code> 将 Images/video 画面绘制到 canvas</li> -</ul> - -<p>本文概述了跨域资源共享机制及其所涉及的 HTTP 头。</p> - -<h2 id="功能概述">功能概述</h2> - -<p>跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求，或者搭配某些 MIME 类型的 {{HTTPMethod("POST")}} 请求），浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 <a href="/zh-CN/docs/Web/HTTP/Cookies">Cookies </a>和 HTTP 认证相关数据）。</p> - -<p>CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。</p> - -<p>接下来的内容将讨论相关场景，并剖析该机制所涉及的 HTTP 首部字段。</p> - -<h2 id="若干访问控制场景">若干访问控制场景</h2> - -<p>这里，我们使用三个场景来解释跨域资源共享机制的工作原理。这些例子都使用 {{domxref("XMLHttpRequest")}} 对象。</p> - -<p>本文中的 JavaScript 代码片段都可以从 <a href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> 获得。另外，使用支持跨域 {{domxref("XMLHttpRequest")}} 的浏览器访问该地址，可以看到代码的实际运行结果。</p> - -<p>关于服务端对跨域资源共享的支持的讨论，请参见这篇文章： <a href="/zh-CN/docs/Web/HTTP/Server-Side_Access_Control">Server-Side_Access_Control (CORS)</a>。</p> - -<h3 id="简单请求">简单请求</h3> - -<p>某些请求不会触发 <a href="/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS 预检请求</a>。本文称这样的请求为“简单请求”，请注意，该术语并不属于 {{SpecName('Fetch')}} （其中定义了 CORS）规范。若请求满足所有下述条件，则该请求可视为“简单请求”：</p> - -<ul> - <li>使用下列方法之一： - <ul> - <li>{{HTTPMethod("GET")}}</li> - <li>{{HTTPMethod("HEAD")}}</li> - <li>{{HTTPMethod("POST")}}</li> - </ul> - </li> - <li><span class="short_text" id="result_box" lang="zh-CN"><span>Fetch 规范定义了</span></span><a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">对 CORS 安全的首部字段集合</a>，不得人为设置该集合之外的其他首部字段。该集合为： - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} （需要注意额外的限制）</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#downlink">Downlink</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li>{{HTTPHeader("Content-Type")}} 的值仅限于下列三者之一： - <ul> - <li><code>text/plain</code></li> - <li><code>multipart/form-data</code></li> - <li><code>application/x-www-form-urlencoded</code></li> - </ul> - </li> - <li>请求中的任意{{domxref("XMLHttpRequestUpload")}} 对象均没有注册任何事件监听器；{{domxref("XMLHttpRequestUpload")}} 对象可以使用 {{domxref("XMLHttpRequest.upload")}} 属性访问。</li> - <li>请求中没有使用 {{domxref("ReadableStream")}} 对象。</li> -</ul> - -<div class="note"><strong>注意:</strong> 这些跨域请求与浏览器发出的其他跨域请求并无二致。如果服务器未返回正确的响应首部，则请求方不会收到任何数据。因此，那些不允许跨域请求的网站无需为这一新的 HTTP 访问控制特性担心。</div> - -<div class="note"><strong>注意:</strong> WebKit Nightly 和 Safari Technology Preview 为{{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, 和 {{HTTPHeader("Content-Language")}} 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它浏览器并不支持这些额外的限制，因为它们不属于规范的一部分。</div> - -<p>比如说，假如站点 http://foo.example 的网页应用想要访问 http://bar.other 的资源。http://foo.example 的网页中可能包含类似于下面的 JavaScript 代码：</p> - -<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/public-data/'; - -function callOtherDomain() { - if(invocation) { - invocation.open('GET', url, true); - invocation.onreadystatechange = handler; - invocation.send(); - } -} -</pre> - -<p><span class="short_text" id="result_box" lang="zh-CN"><span>客户端和服务器之间使用 CORS 首部字段来处理跨域权限：</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> - -<p>分别检视请求报文和响应报文：</p> - -<pre class="brush: shell">GET /resources/public-data/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/access-control/simpleXSInvocation.html -Origin: http://foo.example - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 00:23:53 GMT -Server: Apache/2.0.61 -Access-Control-Allow-Origin: * -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Transfer-Encoding: chunked -Content-Type: application/xml - -[XML Data] -</pre> - -<p>第 1~10 行是请求首部。第10行 的请求首部字段 {{HTTPHeader("Origin")}} 表明该请求来源于 <code>http://foo.example</code>。</p> - -<p>第 13~22 行是来自于 http://bar.other 的服务端响应。响应中携带了响应首部字段 {{HTTPHeader("Access-Control-Allow-Origin")}}（第 16 行）。使用 {{HTTPHeader("Origin")}} 和 {{HTTPHeader("Access-Control-Allow-Origin")}} 就能完成最简单的访问控制。本例中，服务端返回的 <code>Access-Control-Allow-Origin: *</code> 表明，该资源可以被<strong>任意</strong>外域访问。如果服务端仅允许来自 http://foo.example 的访问，该首部字段的内容如下：</p> - -<p><code>Access-Control-Allow-Origin: http://foo.example</code></p> - -<p>现在，除了 http://foo.example，其它外域均不能访问该资源（该策略由请求首部中的 ORIGIN 字段定义，见第10行）。<code>Access-Control-Allow-Origin</code> 应当为 * 或者包含由 Origin 首部字段所指明的域名。</p> - -<h3 id="预检请求">预检请求</h3> - -<p>与前述简单请求不同，“需预检的请求”要求必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。</p> - -<p>当请求满足下述任一条件时，即应首先发送预检请求：</p> - -<ul> - <li>使用了下面任一 HTTP 方法： - <ul> - <li>{{HTTPMethod("PUT")}}</li> - <li>{{HTTPMethod("DELETE")}}</li> - <li>{{HTTPMethod("CONNECT")}}</li> - <li>{{HTTPMethod("OPTIONS")}}</li> - <li>{{HTTPMethod("TRACE")}}</li> - <li>{{HTTPMethod("PATCH")}}</li> - </ul> - </li> - <li>人为设置了<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">对 CORS 安全的首部字段集合</a>之外的其他首部字段。该集合为： - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (需要注意额外的限制)</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#downlink">Downlink</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li> {{HTTPHeader("Content-Type")}} 的值不属于下列之一: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li>请求中的{{domxref("XMLHttpRequestUpload")}} 对象注册了任意多个事件监听器。</li> - <li>请求中使用了{{domxref("ReadableStream")}}对象。</li> -</ul> - -<div class="note"> -<p><strong>注意:</strong> WebKit Nightly 和 Safari Technology Preview 为{{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, 和 {{HTTPHeader("Content-Language")}} 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它浏览器并不支持这些额外的限制，因为它们不属于规范的一部分。</p> -</div> - -<p>如下是一个需要执行预检请求的 HTTP 请求：</p> - -<pre class="brush: js">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/post-here/'; -var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; - -function callOtherDomain(){ - if(invocation) - { - invocation.open('POST', url, true); - invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); - invocation.setRequestHeader('Content-Type', 'application/xml'); - invocation.onreadystatechange = handler; - invocation.send(body); - } -} - -...... -</pre> - -<p>上面的代码使用 POST 请求发送一个 XML 文档，该请求包含了一个自定义的请求首部字段（X-PINGOTHER: pingpong）。另外，该请求的 Content-Type 为 application/xml。因此，该请求需要首先发起“预检请求”。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p> - -<pre>OPTIONS /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Origin: http://foo.example -Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:39 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400 -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 0 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain</pre> - -<p>预检请求完成之后，发送实际请求：</p> - -<pre><code>POST /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -X-PINGOTHER: pingpong -Content-Type: text/xml; charset=UTF-8 -Referer: http://foo.example/examples/preflightInvocation.html -Content-Length: 55 -Origin: http://foo.example -Pragma: no-cache -Cache-Control: no-cache - -<?xml version="1.0"?><person><name>Arun</name></person> - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:40 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 235 -Keep-Alive: timeout=2, max=99 -Connection: Keep-Alive -Content-Type: text/plain - -[Some GZIP'd payload]</code></pre> - -<p>浏览器检测到，从 JavaScript 中发起的请求需要被预检。从上面的报文中，我们看到，第 1~12 行发送了一个使用 <code>OPTIONS 方法的“</code>预检请求<code>”。</code> OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响。 预检请求中同时携带了下面两个首部字段：</p> - -<pre><code>Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type</code></pre> - -<p><code>首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。<font face="Open Sans, Arial, sans-serif">首部字段 </font></code><code><code>Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：<code>X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。</code></code></code></p> - -<p>第14~26 行为预检请求的响应，表明服务器将接受后续的实际请求。重点看第 17~20 行：</p> - -<pre><code>Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400</code></pre> - -<p><font face="Open Sans, Arial, sans-serif">首部字段</font><code><font face="Open Sans, Arial, sans-serif"> </font>Access-Control-Allow-Methods </code>表明服务器允许客户端使用<code> </code><code>POST,</code> <code>GET </code>和 <code>OPTIONS</code> 方法发起请求。该字段与 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7">HTTP/1.1 Allow: response header</a> 类似，但仅限于在需要访问控制的场景中使用。</p> - -<p>首部字段 <code>Access-Control-Allow-Headers </code>表明服务器允许请求中携带字段 <code><code>X-PINGOTHER </code></code>与<code><code> Content-Type</code></code>。<font face="Open Sans, Arial, sans-serif">与</font><code><code><font face="Open Sans, Arial, sans-serif"> </font></code></code><code>Access-Control-Allow-Methods </code>一样，<code><code>Access-Control-Allow-Headers</code></code> 的值为逗号分割的列表。</p> - -<p>最后，首部字段 <code>Access-Control-Max-Age</code> 表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。</p> - -<h4 id="预检请求与重定向">预检请求与重定向</h4> - -<p>大多数浏览器不支持针对于预检请求的重定向。如果一个预检请求发生了重定向，浏览器将报告错误：</p> - -<blockquote> -<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> -</blockquote> - -<blockquote> -<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> -</blockquote> - -<p>CORS 最初要求该行为，不过<a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">在后续的修订中废弃了这一要求</a>。</p> - -<p>在浏览器的实现跟上规范之前，有两种方式规避上述报错行为：</p> - -<ul> - <li>在服务端去掉对预检请求的重定向；</li> - <li>将实际请求变成一个简单请求。</li> -</ul> - -<p>如果上面两种方式难以做到，我们仍有其他办法：</p> - -<ul> - <li>发出一个简单请求（使用 <a href="/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>）以判断真正的预检请求会返回什么地址。</li> - <li>发出另一个请求（真正的请求），使用在上一步通过<a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XMLHttpRequest.responseURL</a>获得的URL。</li> -</ul> - -<p>不过，如果请求是由于存在 Authorization 字段而引发了预检请求，则这一方法将无法使用。这种情况只能由服务端进行更改。</p> - -<h3 id="附带身份凭证的请求">附带身份凭证的请求</h3> - -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 与 CORS 的一个有趣的特性是，可以基于 <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域 {{domxref("XMLHttpRequest")}} 或 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 请求，浏览器<strong>不会</strong>发送身份凭证信息。如果要发送凭证信息，需要设置 <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a> </code>的某个特殊标志位。</p> - -<p><code class="plain">本例中，http://foo.example 的某脚本向 <code class="plain">http://bar.other 发起一个GET 请求，并设置 Cookies：</code></code></p> - -<pre id="line1"><code>var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/credentialed-content/'; - -function callOtherDomain(){ - if(invocation) { - invocation.open('GET', url, true); - invocation.withCredentials = true; - invocation.onreadystatechange = handler; - invocation.send(); - } -}</code></pre> - -<p>第 7 行将 <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a> </code>的 <code>withCredentials 标志设置为 true，</code>从而向服务器发送 Cookies。因为这是一个简单 GET 请求，所以浏览器不会对其发起“预检请求”。但是，如果服务器端的响应中未携带 <code>Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。</code></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png"></p> - -<p>客户端与服务器端交互示例如下：</p> - -<pre><code>GET /resources/access-control-with-credentials/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/credential.html -Origin: http://foo.example -Cookie: pageAccess=2 - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:34:52 GMT -Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 -X-Powered-By: PHP/5.2.6 -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Credentials: true -Cache-Control: no-cache -Pragma: no-cache -Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 106 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain - - -[text/plain payload]</code></pre> - -<p>即使第 11 行指定了 Cookie 的相关信息，但是，如果 bar.other 的响应中缺失 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true（</code>第 19 行），则响应内容不会返回给请求的发起者。</p> - -<h4 id="附带身份凭证的请求与通配符">附带身份凭证的请求与通配符</h4> - -<p>对于附带身份凭证的请求，服务器不得设置 <code style="font-style: normal;">Access-Control-Allow-Origin 的值为“*”。</code></p> - -<p><code style="font-style: normal;">这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 </code>http://foo.example，则请求将成功执行。</p> - -<p>另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。如果操作失败，将会抛出异常。</p> - -<h2 id="HTTP_响应首部字段">HTTP 响应首部字段</h2> - -<p>本节列出了规范所定义的响应首部字段。上一小节中，我们已经看到了这些首部字段在实际场景中是如何工作的。</p> - -<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> - -<p>响应首部中可以携带一个 {{HTTPHeader("Access-Control-Allow-Origin")}}<code style="font-style: normal;"> 字段，其语法如下:</code></p> - -<pre>Access-Control-Allow-Origin: <origin> | * -</pre> - -<p>其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。</p> - -<p>例如，下面的字段值将允许来自 http://mozilla.com 的请求：</p> - -<pre>Access-Control-Allow-Origin: <span class="plain">http://mozilla.com</span></pre> - -<p>如果服务端指定了具体的域名而非“*”，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。</p> - -<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> - -<p>译者注：在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。</p> - -<p>{{HTTPHeader("Access-Control-Expose-Headers")}} 头让服务器把允许浏览器访问的头放入白名单，例如：</p> - -<pre>Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header -</pre> - -<p>这样浏览器就能够通过getResponseHeader访问<code>X-My-Custom-Header</code>和 <code>X-Another-Custom-Header</code> 响应头了。</p> - -<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> - -<p>{{HTTPHeader("Access-Control-Max-Age")}} 头指定了preflight请求的结果能够被缓存多久，请参考本文在前面提到的preflight例子。</p> - -<pre>Access-Control-Max-Age: <delta-seconds> -</pre> - -<p><code>delta-seconds</code> 参数表示preflight请求的结果在多少秒内有效。</p> - -<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} 头指定了当浏览器的<code>credentials</code>设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可以使用<code>credentials</code>。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。</p> - -<pre>Access-Control-Allow-Credentials: true -</pre> - -<p>上文已经讨论了<a href="#Requests_with_credentials">附带身份凭证的请求</a>。</p> - -<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Methods")}} 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。</p> - -<pre>Access-Control-Allow-Methods: <method>[, <method>]* -</pre> - -<p>相关示例见<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">这里</a>。</p> - -<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Headers")}} 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。</p> - -<pre>Access-Control-Allow-Headers: <field-name>[, <field-name>]* -</pre> - -<h2 id="HTTP_请求首部字段">HTTP 请求首部字段</h2> - -<p>本节列出了可用于发起跨域请求的首部字段。请注意，这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪。</p> - -<h3 id="Origin">Origin</h3> - -<p>{{HTTPHeader("Origin")}} 首部字段表明预检请求或实际请求的源站。</p> - -<pre>Origin: <origin> -</pre> - -<p>origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。</p> - -<div class="note"><strong>Note:</strong> 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。</div> - -<p>注意，不管是否为跨域请求，ORIGIN 字段总是被发送。</p> - -<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> - -<p>{{HTTPHeader("Access-Control-Request-Method")}} 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。</p> - -<pre>Access-Control-Request-Method: <method> -</pre> - -<p>相关示例见<a href="#Preflighted_requests">这里</a>。</p> - -<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Request-Headers")}} 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。</p> - -<pre>Access-Control-Request-Headers: <field-name>[, <field-name>]* -</pre> - -<p>相关示例见<a href="#">这里</a>。</p> - -<h2 id="规范">规范</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>New definition; supplants CORS specification.</td> - </tr> - <tr> - <td>{{SpecName('CORS')}}</td> - <td>{{Spec2('CORS')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> - -<h3 id="注">注</h3> - -<ul> - <li>IE 10 提供了对规范的完整支持，但在较早版本（8 和 9）中，CORS 机制是借由 XDomainRequest 对象完成的。</li> - <li>Firefox 3.5 引入了对 XMLHttpRequests 和 Web 字体的跨域支持（但最初的实现并不完整，这在后续版本中得到完善）；Firefox 7 引入了对 WebGL 贴图的跨域支持；Firefox 9 引入了对 drawImage 的跨域支持。</li> -</ul> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="http://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> - <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> - <li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li> -</ul> - -<p>{{ languages( { "ja": "ja/HTTP_access_control" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html b/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html deleted file mode 100644 index 7ec33aa1ed..0000000000 --- a/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: javascript(起步) -slug: orphaned/Web/JavaScript/javascript(起步) -tags: - - bug-840092 -original_slug: Web/JavaScript/javascript(起步) ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">JavaScript是什么?</h2> - -<p>作为一门计算机语言，JavaScript本身强大、复杂，且难于理解。但是，你可以用它来开发一系列的应用程序，它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子：<a class="external" href="http://local.google.com/">Google Maps</a>。</p> - -<p>JavaScript（通称为ECMAScript）最大的优势在于，它基于浏览器，但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps，它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现，你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同，JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。</p> - -<h2 id="What_you_should_already_know" name="What_you_should_already_know">你应该知道</h2> - -<p>JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 </p> - -<p>在使用 JavaScript进行开发的过程中，可能还会涉及很多其他技术，这不在本文讨论的范围之内。 所以，不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。</p> - -<h2 id="Getting_Started" name="Getting_Started">起步</h2> - -<p>JavaScript的起步非常简单。你不需要进行复杂的程序安装，不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的，你所需要做的全部事情就是把你的代码保存为文本文件，然后再浏览器中打开。就这么简单！</p> - -<p>JavaScript非常适合作为入门级的编程语言。它直观形象，并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同，它们只对那些专业的软件开发者来说是有价值的。</p> - -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">浏览器兼容问题</h2> - -<p>不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异，提供了通用性的功能函数来方便调用。</p> - -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">如何运行示例</h2> - -<p>下面的例子都有相同的代码。要执行它们有多种方法，如果你有自己的个人站点，你还可以在站点上把这些例子保存为新的页面。</p> - -<p>如果你没有自己的个人站点，你可以在电脑上把这些例子保存下来，并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方，也是它适合做入门语言的原因。你不需要编译器或者开发环境，你只需要一个浏览器就可以开始起步了。</p> - -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">举例：捕获一个鼠标单击事件</h2> - -<p>事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题，这个简单的例子并不能说明所有的问题。然而，如果我们不涉及JavaScript事件系统，我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西，如果你想要了解更多的内部细节，那你可以去查找更详细的相关资料。</p> - -<p>鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件：</p> - -<ul> - <li>Click - 用户点击鼠标时触发</li> - <li>DblClick - 用户双击鼠标时触发</li> - <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)</li> - <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)</li> - <li>MouseOut - 当鼠标指针离开对象物理边界时触发</li> - <li>MouseOver - 当鼠标指针进入对象物理边界时触发</li> - <li>MouseMove -当鼠标指针在对象物理边界内移动时触发</li> - <li>ContextMenu - 用户点击鼠标右键时触发</li> -</ul> - -<p>捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：</p> - -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> - -<p>要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用<script>包裹后放到HTML页面中：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onclick_callback () { - alert ("Hello, World!"); - } -</script> -<span onclick="onclick_callback();">Click Here</span></pre> - -<p>另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onclick_callback(event) { - var eType = event.type; - /* the following is for compatability */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget ); - } -</script> -<span onclick="onclick_callback(event);">Click Here</span></pre> - -<p>对于事件的注册和接收还用注意一些的是，你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程：生成span对象，添加到页面中的body，给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。</p> - -<pre class="brush:js"><script type="text/javascript"> - function mouseevent_callback(event) { - /* The following is for compatability */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onload () { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events */ - span.onmousedown = mouseevent_callback; - span.onmouseup = mouseevent_callback; - span.onmouseover = mouseevent_callback; - span.onmouseout = mouseevent_callback; - - /* display the span on the page */ - body.appendChild(span); -} -</script></pre> - -<p>{{ draft() }}</p> - -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">举例：捕获一个键盘事件</h2> - -<p>同上面的例子类似，键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。</p> - -<p>下面的列表展示了一些具体的键盘事件，同鼠标事件相比是很少的：</p> - -<ul> - <li>KeyPress - 按键被按下并且释放后触发</li> - <li>KeyDown - 按键被按下但是还没有被释放时触发</li> - <li>KeyUp - 按键被释放时触发</li> - <li>TextInput ( Webkit浏览器下可以使用，并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本时触发。本文不介绍该事件。</li> -</ul> - -<p>在一个 <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 事件中，键值的Unicode编码会存储到属性keyCode或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> 中，但是两者不会同时存在。按键会生成一个字母 (如 'a')，这时会把字母的编码存储到<code>charCode</code> 中，注意这里是区分大小写的( <code>charCode</code> 会判断shift键是否同时被按下)。其他情况下，编码会存储到 <code>keyCode中。</code></p> - -<p>捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数，在元素属性中处理相关事件。 举例：</p> - -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"></input> -</pre> - -<p>同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用<script包裹后写到HTML页面中：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onkeypress_callback () { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="onkeypress_callback();"></input> -</pre> - -<p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：</p> - -<pre class="brush:js"><script type="text/javascript"> - function onkeypress_callback(evt) { - var eType = evt.type; // Will return "keypress" as the event type - var eCode = 'keyCode is ' + evt.keyCode; - var eChar = 'charCode is ' + evt.charCode; - - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="onkeypress_callback(event);"></input></pre> - -<p>要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：</p> - -<pre class="brush:js"><script type="text/javascript"> - document.onkeypress = key_event; - document.onkeydown = key_event; - document.onkeyup = key_event; - - function key_event(evt) { - var eType = evt.type; - var eCode = "ASCII code is " + evt.keyCode; - var eChar = 'charCode is ' + evt.charCode; - - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script></pre> - -<p>下面是一个完整的键盘事件处理过程：</p> - -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; - var keychar = String.fromCharCode(key); - if (key==exampleKey) { metaChar = true; } - if (key!=exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { alert("Key pressed " + key); } - } - } - function metaKeyUp (event) { - var key = event.keyCode || event.which; - if (key==exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> -</body> -</html></pre> - -<h3 id="浏览器_bugs_和_quirks">浏览器 bugs 和 quirks</h3> - -<p>键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;">charCode。通常情况下，</code><code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 指向的是用户按下的键盘上的那个键，而</span><code style="font-style: normal; line-height: 1.5;">charCode</code><span style="line-height: 1.5;"> 存储的是相应键的 ASCII 码值。这两个值不一定相同，如， 小写 'a' 和 大写 'A' 拥有相同的 </span><code style="font-style: normal; line-height: 1.5;">keyCode，因为用户按下的是相同的按键，但是他们的</code><code style="font-style: normal; line-height: 1.5;">charCode不同，因为两个字母的码值不同。</code><span style="line-height: 1.5;"> </span></p> - -<p>不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 <code>charCode，他们把字母信息写到了</code><code>keyCode</code>中，而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中， <code>keyCode</code> 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.</p> - -<p>可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.</p> - -<p>{{ draft() }}</p> - -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例：拖曳图片</h2> - -<p>下面的例子展示了firefox浏览器下如何实现拖动图片：</p> - -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style type='text/css'> -img { position: absolute; } -</style> - -<script type='text/javascript'> -window.onload = function() { - - movMeId=document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - movMeId.style.position = "absolute"; - - document.onmousedown = coordinates; - document.onmouseup=mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove=moveImage; - return false; - } else { - return false; - } - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> - -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例：改变大小</h2> - -<div>{{todo("Need Content. Or, remove headline")}}</div> - -<h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例：绘制直线</h3> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">附加文档信息</h2> - -<ul> - <li>作者: <a class="external" href="http://linuxmachines.com/">Jeff Carr</a></li> - <li>Here is a attempt at a new <a href="/en-US/docs/javascript_new_testpage" title="en-US/docs/javascript_new_testpage">JavaScript new testpage</a></li> - <li>最后修改: July 14 2005</li> - <li>版权信息: © 2005 by individual contributors; content available under the <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/zh-cn/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html deleted file mode 100644 index d53c093683..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'TypeError: invalid arguments' -slug: orphaned/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments -tags: - - JavaScript - - 类型错误 - - 错误提示 -translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments -original_slug: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments ---- -<div>{{jsSidebar("Errors")}}</div> - -<h2 id="错误提示">错误提示</h2> - -<pre class="syntaxbox">TypeError: invalid arguments (Firefox)</pre> - -<h2 id="错误类型">错误类型</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="哪里出错了？">哪里出错了？</h2> - -<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">类型化数组（Typed array</a>） 的构造器可以通过接收以下类型的参数中的一种</p> - -<ul> - <li>表示长度的数字，</li> - <li>另外一个类型化数组，</li> - <li>类数组对象，</li> - <li>可迭代对象，</li> - <li>一个 {{jsxref("ArrayBuffer")}} 对象</li> -</ul> - -<p>来创建一个新的类型化数组。其他类型的构造器参数都无法创建合法的类型化数组。</p> - -<h2 id="示例">示例</h2> - -<p>类型化数组——例如 {{jsxref("Uint8Array")}} ——无法通过字符串创建。实际上，字符串根本不能出现在类型化数组中。</p> - -<pre class="brush: js example-bad">var ta = new Uint8Array("nope"); -// TypeError: invalid arguments -</pre> - -<p>创建一个合法的 {{jsxref("Uint8Array")}} 对象的不同方式：</p> - -<pre class="brush: js example-good">// From a length -var uint8 = new Uint8Array(2); -uint8[0] = 42; -console.log(uint8[0]); // 42 -console.log(uint8.length); // 2 -console.log(uint8.BYTES_PER_ELEMENT); // 1 - -// From an array -var arr = new Uint8Array([21,31]); -console.log(arr[1]); // 31 - -// From another TypedArray -var x = new Uint8Array([21, 31]); -var y = new Uint8Array(x); -console.log(y[0]); // 21 - -// From an ArrayBuffer -var buffer = new ArrayBuffer(8); -var z = new Uint8Array(buffer, 1, 4); - -// From an iterable -var iterable = function*(){ yield* [1,2,3]; }(); -var uint8 = new Uint8Array(iterable); -// Uint8Array[1, 2, 3] -</pre> - -<h2 id="相关内容">相关内容</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("Uint8Array")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 24d05f338a..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array.prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Array.prototype</code></strong> 属性表示 {{jsxref("Array")}} 构造函数的原型，并允许您向所有Array对象添加新的属性和方法。</p> - -<pre class="brush: js">/* -如果JavaScript本身不提供 first() 方法， -添加一个返回数组的第一个元素的新方法。 -*/ - -if(!Array.prototype.first) { - Array.prototype.first = function() { - console.log(`如果JavaScript本身不提供 first() 方法， -添加一个返回数组的第一个元素的新方法。`); - return this[0]; - } -} -</pre> - -<h2 id="Description" name="Description">描述</h2> - -<p>{{jsxref("Array")}}实例继承自 <strong>Array.prototype </strong>。与所有构造函数一样，您可以更改构造函数的原型对象，以对所有 {{jsxref("Array")}} 实例进行更改。例如，可以添加新方法和属性以扩展所有Array对象。这用于 {{Glossary("Polyfill", "polyfilling")}}， 例如。</p> - -<p>鲜为人知的事实：<code>Array.prototype</code> 本身也是一个 {{jsxref("Array")}}。</p> - -<pre class="brush: js">Array.isArray(Array.prototype); -// true -</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>所有的数组实例都继承了这个属性，它的值就是 {{jsxref("Array")}}，表明了所有的数组都是由 {{jsxref("Array")}} 构造出来的。</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>上面说了，因为 <code>Array.prototype</code> 也是个数组，所以它也有 <code>length</code> 属性，这个值为 <code>0</code>，因为它是个空数组。</dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">会改变自身的方法</h3> - -<p>下面的这些方法会改变调用它们的对象自身的值：</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>将数组中指定区间的所有元素的值，都替换成某个固定的值。</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>删除数组的最后一个元素，并返回这个元素。</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>在数组的末尾增加一个或多个元素，并返回数组的新长度。</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>删除数组的第一个元素，并返回这个元素。</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>对数组元素进行排序，并返回当前数组。</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>在任意的位置给数组添加或删除任意个元素。</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>在数组的开头增加一个或多个元素，并返回数组的新长度。</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">不会改变自身的方法</h3> - -<p>下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>判断当前数组是否包含某指定的值，如果是返回 <code>true</code>，否则返回 <code>false</code>。</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>连接所有数组元素组成一个字符串。</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>抽取当前数组中的一段元素组合成一个新数组。</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toSource()")}} 方法。</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toString()")}} 方法。</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">遍历方法</h3> - -<p>在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>为数组中的每个元素执行一次回调函数。</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>如果数组中的每个元素都满足测试函数，则返回 <code>true</code>，否则返回 <code>false。</code></dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>将所有在过滤函数中返回 <code>true</code> 的数组元素放进一个新数组中并返回。</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 <code>undefined</code>。</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 <code>-1</code>。</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>返回一个由回调函数的返回值组成的新数组。</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>和上面的 <code>values() 方法是同一个函数。</code></dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">通用方法</h3> - -<p>在 JavaScript 中，很多的数组方法被故意设计成是通用的。也就是说，那些看起来像是数组的对象（类数组对象），即拥有一个 <code>length</code> 属性，以及对应的索引属性（也就是数字类型的属性，比如 <code>obj[5]</code>）的非数组对象也是可以调用那些数组方法的。其中一些数组方法，比如说 {{jsxref("Array.join", "join")}} 方法，它们只会单纯的读取当前对象的 <code>length</code> 属性和索引属性的值，并不会尝试去改变这些属性的值。而另外一些数组方法，比如说 {{jsxref("Array.reverse", "reverse")}} 方法，它们会尝试修改那些属性的值，因此，如果当前对象是个 {{jsxref("String")}} 对象，那么这些方法在执行时就会报错，因为字符串对象的 <code>length</code> 属性和索引属性都是只读的。</p> - -<h2 id="Specifications" name="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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> - -<div> -<div> - - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> -</div> -</div> - -<h2 id="See_also" name="See_also">相关链接</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 2173e49cd6..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>AsyncFunction.prototype</strong></code> 属性表示 {{jsxref("AsyncFunction")}} 的原型对象。</p> - -<h2 id="描述">描述</h2> - -<p>{{jsxref("AsyncFunction")}} 对象继承自 <code>AsyncFunction.prototype</code>。<code>AsyncFunction.prototype</code> 不能被修改。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code><strong>AsyncFunction.constructor</strong></code></dt> - <dd>默认值为 {{jsxref("AsyncFunction")}}。</dd> - <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> - <dd>返回 "AsyncFunction"。</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>最初定义在ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="兼容性">兼容性</h2> - -<div> -<div> - - -<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> -</div> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html deleted file mode 100644 index aa406b37c2..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: AsyncIterator -slug: orphaned/Web/JavaScript/Reference/Global_Objects/AsyncIterator -tags: - - 异步迭代器 - - 类 -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncIterator -original_slug: Web/JavaScript/Reference/Global_Objects/AsyncIterator ---- -<p>{{JSRef}}{{Draft}}</p> - -<p><strong><code>AsyncIterator</code></strong> 全局对象是一个提供辅助方法的抽象类，与暴露在{{JSxRef("Array")}} 实例上的那些类似。</p> - -<h2 id="构造函数">构造函数</h2> - -<dl> - <dt>{{JSxRef("AsyncIterator.AsyncIterator", "AsyncIterator()")}} </dt> - <dd>一个抽象构造函数，仅能够通过 {{JSxRef("Operators/super", "super()")}} 来调用。</dd> -</dl> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>AsyncIterator.prototype</code></dt> - <dd><code>%AsyncIteratorPrototype%</code> 内部对象。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{JSxRef("AsyncIterator.from()")}} </dt> - <dd>等同于在传入的对象上调用 <code>@@asyncIterator</code> 。</dd> -</dl> - -<h2 id="AsyncIterator_原型"><code>AsyncIterator</code> 原型</h2> - -<h3 id="原型属性">原型属性</h3> - -<dl> - <dt><code>AsyncIterator.prototype.constructor</code></dt> - <dd>指定创建对的象原型的函数.</dd> - <dt><code>AsyncIterator.prototype[@@toStringTag]</code> </dt> - <dd><code>字符串 "Iterator"</code>.</dd> -</dl> - -<h3 id="原型方法">原型方法</h3> - -<dl> - <dt>{{JSxRef("AsyncIterator.prototype.map()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.filter()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.take()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.drop()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.asIndexedPairs()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.flatMap()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.reduce()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.toArray()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.forEach()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.some()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.every()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.find()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.@@iterator()", "AsyncIterator.prototype[@@iterator]()")}}</dt> - <dd>返回该 <code>AsyncIterator</code> 实例。</dd> -</dl> - -<h2 id="实现方法">实现方法</h2> - -<dl> - <dt>{{JSxRef("AsyncIterator.prototype.next()", "<<var>implementation</var>>.prototype.next()")}}</dt> - <dd>获取 <code>AsyncIterator</code> 中的下一项</dd> - <dt>{{JSxRef("AsyncIterator.prototype.return()", "<<var>implementation</var>>.prototype.next()")}}{{Optional_Inline}}</dt> - <dd>返回给出的值，并结束迭代。</dd> - <dt>{{JSxRef("AsyncIterator.prototype.throw()", "<<var>implementation</var>>.prototype.next()")}}{{Optional_Inline}}</dt> - <dd>抛出一个迭代器错误（同时也终止了迭代器，除非是在该迭代器内部被捕获）。</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.es/proposal-iterator-helpers/#sec-asynciterator-constructor">ESNext Iterator Helpers Proposal</a></td> - <td><span class="spec-Draft">Stage 2 Draft</span></td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.AsyncIterator")}}</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>{{JSxRef("Iteration_protocols", "Iteration protocols", "", "1")}}</li> - <li>{{JSxRef("Generator")}}</li> - <li>{{JSxRef("Global_Objects/AsyncGenerator", "AsyncGenerator")}}</li> - <li>{{JSxRef("Iterator")}} </li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html deleted file mode 100644 index de4ef6da94..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: WeakSet.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear -tags: - - JavaScript - - Method - - WeakSet - - 废弃 -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear -original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/clear ---- -<div>{{JSRef}} {{obsolete_header}}</div> - -<p><code><strong>clear()</strong></code> 方法用于删除 <code>WeakSet</code> 对象的所有元素，但是已经不是 ECMAScript 的一部分了。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>ws</em>.clear();</pre> - -<h2 id="示例">示例</h2> - -<h3 id="使用_clear方法">使用 <code>clear方法</code></h3> - -<pre class="brush: js example-bad">var ws = new WeakSet(); - -ws.add(window); -ws.has(window); // true - -ws.clear(); - -ws.has(window); // false -</pre> - -<h2 id="规范">规范</h2> - -<p>没有规范或草案。该方法原本计划包括在 ECMAScript 6，但是在草案 revision 28 (October 14, 2014) 被抛弃了。浏览器原先的实现不久后也被移除了，它从来不是标准的一分子。</p> - -<h2 id="浏览器支持">浏览器支持</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>36</td> - <td>{{CompatNo}} [1]</td> - <td>{{CompatNo}}</td> - <td>23</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}} [1]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Added to Firefox in version 34, but removed in version 46. See {{bug(1101817)}}.</p> - -<h2 id="相关">相关</h2> - -<ul> - <li>{{jsxref("WeakSet")}}</li> - <li>{{jsxref("WeakSet.prototype.delete()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/zh-cn/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 12c3b6fbb3..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 管道操作符 -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Experimental - - JavaScript - - Operator - - 语法糖 - - 链式 - - 链式调用 -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p>试验性的管道操作符 <code>|></code> （目前其标准化流程处于 stage 1 阶段）允许以一种易读的方式去对函数链式调用。本质上来说，管道操作符是单参数函数调用的语法糖，它允许你像这样执行一个调用：</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>使用传统语法写的话，等效的代码是这样的：</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">expression |> function</pre> - -<h2 id="例子">例子</h2> - -<h3 id="函数链式调用">函数链式调用</h3> - -<p>当链式调用多个函数时，使用管道操作符可以改善代码的可读性。</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// 没有用管道操作符 -double(increment(double(5))); // 22 - -// 用上管道操作符之后 -5 |> double |> increment |> double; // 22 -</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> - <td>Stage 1</td> - <td>Not part of the ECMAScript specification yet.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性Edit">浏览器兼容性<a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators$edit#浏览器兼容性" rel="nofollow, noindex"><span>Edit</span></a></h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>GitHub 上的 <a href="https://github.com/tc39/proposals">TC39/proposals</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/localization/index.html b/files/zh-cn/orphaned/web/localization/index.html deleted file mode 100644 index 77530dce74..0000000000 --- a/files/zh-cn/orphaned/web/localization/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 本地化和全球化 -slug: orphaned/Web/Localization -translation_of: Web/Localization -original_slug: Web/Localization ---- -<p class="summary"><strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Localization" title="本地化：本地化（l10n）是使软件用户界面适应特定文化的过程。"><font><font>本地化</font></font></a></strong><font><font>（通常缩写为</font></font><strong><font><font> L10n</font></font></strong><font><font>）能够使网站、Web应用或任何其他形式的内容适用于特定语言的范围和文化圈。</font></font><strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Internationalization" title="国际化：REDIRECT I18N"><font><font>国际化</font></font></a></strong><font><font>（通常缩写为</font></font><strong><font><font> I18n</font></font></strong><font><font>）被设计用来使网站或应用程序尽可能的实现本地化。</font></font></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="指南和教程">指南和教程</h2> - -<p>指南和教程可帮助您学习如何确保您的项目已准备好全球化，以及如何将其本地化。</p> - -<dl> - <dt>国际化概念</dt> - <dd>概述什么是国际化（i18n）以及可用于Web开发人员的哪些功能和技术可用于确保您的内容准备好进行本地化。</dd> - <dt>本地化简介</dt> - <dd>关于本地化网站或应用程序的入门指南，从确定需要检查和可能更改的因素到实际应用所需的更改。</dd> - <dt><a href="/en-US/docs/Web/Localization_and_Internationalization/Unicode_Bidirectional_Text_Algorithm">Unicode双向文本算法</a>（译者注：尚未翻译）</dt> - <dd>Unicode双向算法是用于确定Unicode文本的呈现顺序的标准算法，而Web浏览器在呈现内容时使用它。 本概述将使您对{{Glossary("BiDi")}}算法及其对您的国际化工作有何影响。</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="参考">参考</h2> - -<p>参考资料将在您创建可本地化的站点时提供帮助。</p> - -<dl> - <dt>可用于i18n和l10n的HTML元素</dt> - <dd>对HTML提供的元素的引用，这些元素可用于创建准备本地化的内容。</dd> - <dt>CSS和本地化</dt> - <dd>对CSS属性的参考，在生成支持10n的内容时特别重要。</dd> -</dl> -</div> -</div> diff --git a/files/zh-cn/orphaned/web/reference/api/index.html b/files/zh-cn/orphaned/web/reference/api/index.html deleted file mode 100644 index 7776447853..0000000000 --- a/files/zh-cn/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Web API 参考 -slug: orphaned/Web/Reference/API -tags: - - API - - Web - - 参考 -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -<p><span class="seoSummary">Web 提供了各种各样的 API 来完成各种的任务。这些 API 可以用 JavaScript 来访问，令你可以做很多事儿，小到对任意 {{domxref("window")}} 或者 {{domxref("element")}}做小幅调整，大到使用诸如 <a href="/zh-CN/docs/Web/WebGL">WebGL</a> 和 <a href="/zh-CN/docs/Web/API/Web_Audio_API">Web Audio</a> 的 API 来生成复杂的图形和音效。 </span></p> - -<p>所有 API 的接口都罗列在了 <a href="/zh-CN/docs/Web/API">Web API 接口一览表</a>一页。</p> - -<p>类似的，还有一个列出了<a href="/zh-CN/docs/Web/Events">所有事件类型</a>的页面。</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/zh-CN/docs/Web/API/Document_Object_Model">文档对象模型（</a><a href="https://developer.mozilla.org/en-US/docs/DOM">Document Object Model</a><a href="/zh-CN/docs/Web/API/Document_Object_Model">）</a></dt> - <dd>DOM 是一个 可以访问和修改当前文档的 API。通过它可以操作文档里的{{domxref("Node")}}和{{domxref("Element")}}。HTML，XML 和 SVG 都扩展了基本的 DOM 接口来操作它们各自私有的元素类型。</dd> - <dt>设备 API（Device APIs）</dt> - <dd>这一组 API 可以让网页和应用程序使用各种硬件资源。如：<a href="/zh-CN/docs/Web/API/DeviceLightEvent/Using_light_events">环境光感应器API</a>、<a href="/zh-CN/docs/Web/API/Battery_Status_API">电池状态 API</a>、<a href="/zh-CN/docs/Web/API/Geolocation/Using_geolocation">地理位置 API</a>、<a href="/zh-CN/docs/API/Pointer_Lock_API">指针锁定 API</a>、<a href="/zh-CN/docs/WebAPI/Proximity">距离感应 API</a>、<a href="/zh-CN/docs/Web/API/Detecting_device_orientation">设备定向 API</a>、<a href="/zh-CN/docs/WebAPI/Managing_screen_orientation">屏幕定向 API</a>、<a href="/zh-CN/docs/Web/API/Vibration_API">震动 API</a>。</dd> - <dt>通信 API（Communication APIs）</dt> - <dd>这些 API 可以让网页或应用程序和其它的网页或设备进行通信，如：<a href="/zh-CN/docs/Web/API/Network_Information_API">网络信息 API</a>、<a href="/zh-CN/docs/Web/API/notification/Using_Web_Notifications">Web 通知</a>、<a href="/zh-CN/docs/Archive/Firefox_OS/API/Simple_Push_API">简单推送 API</a>。</dd> - <dt id="Data_management_APIs">数据管理 APIs（Data management APIs）</dt> - <dd>这套 API 可以用来存储和管理用户的数据，如：<a href="/zh-CN/docs/WebAPI/FileHandle_API">文件处理 API</a>、<a href="/zh-CN/docs/IndexedDB">IndexedDB</a>。</dd> -</dl> - -<p>除了上面这些公开的，所有网页和应用程序都可以使用的 API 以外，还有一类更强大的，但只有特权应用程序和已认证应用程序能够使用的，非标准的 Mozilla 私有 API。</p> - -<dl> - <dt>特权 API（Privileged APIs）</dt> - <dd>特权应用程序是那些由用户给予了特定权限的应用程序。特权 API 包括：<a href="/zh-CN/docs/WebAPI/TCP_Socket">TCP Socket API</a>、<a href="/zh-CN/docs/WebAPI/Contacts">联系人 API</a>、<a href="/zh-CN/docs/WebAPI/Device_Storage_API">设备存储 API</a>、<a href="/zh-CN/docs/DOM/Using_the_Browser_API">浏览器 API</a>、<a href="https://developer.mozilla.org/zh-CN/docs/WebAPI/Camera">相机 API</a>。</dd> - <dt>已认证应用程序的私有 API（Certified APIs）</dt> - <dd>已认证的应用程序是那些直接与操作系统（比如 Firefox OS）打交道，执行核心操作的底层应用程序。较低特权的应用程序可以通过 <a href="/zh-CN/docs/WebAPI/Web_Activities">Web Activities</a> 调用这些底层应用程序。 这些 API 包括：<a href="/zh-CN/docs/WebAPI/WebBluetooth">蓝牙 API</a>、<a href="/zh-CN/docs/WebAPI/Mobile_Connection">手机连接 API</a>、<a href="/zh-CN/docs/WebAPI/Network_Stats">网络状态 API</a>、<a href="/zh-CN/docs/WebAPI/WebTelephony">通话 API</a>、<a href="/zh-CN/docs/WebAPI/WebSMS">短信/彩信 API</a>、<a href="/zh-CN/docs/WebAPI/WiFi_Information">WiFi 信息 API</a>、<a href="/zh-CN/docs/WebAPI/Power_Management">电源管理 API</a>、<a href="/zh-CN/docs/WebAPI/Settings">设置 API</a>、<a href="/zh-CN/docs/WebAPI/Idle">空闲状态 API</a>、<a href="/zh-CN/docs/WebAPI/Permissions">权限 API</a>、<a href="/zh-CN/docs/WebAPI/Time_and_Clock">时间/时钟 API</a>。</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Community" id="社区">社区</h2> - -<p>欢迎加入我们的邮件列表或新闻组：</p> - -<ul> - <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">邮件列表</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">新闻组</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Google Group</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">订阅 Google Group</a></li> -</ul> - -<p>除此之外，你还可以进入 <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a> 频道 <a href="irc://irc.mozilla.org/webapi">#webapi</a> 参与实时讨论。</p> - -<h2 class="Related_Topics" id="相关话题">相关话题</h2> - -<p>您可能也对这些话题感兴趣：</p> - -<ul> - <li><a href="/zh-CN/docs/Web/API">Web API 接口一览表</a></li> -</ul> -</div> -</div> diff --git a/files/zh-cn/orphaned/web/reference/index.html b/files/zh-cn/orphaned/web/reference/index.html deleted file mode 100644 index c0d55672b9..0000000000 --- a/files/zh-cn/orphaned/web/reference/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Web 技术参考 -slug: orphaned/Web/Reference -tags: - - Web - - Web开发指引 -translation_of: Web/Reference -original_slug: Web/Reference ---- -<p>开放的 Web 是由一系列的技术所构成的，为了使用这些技术我们需要有足够的知识，现在我们可以在下面找到指引我们学习这些知识的链接。</p> - -<h2 class="Documentation" id="Web_技术">Web 技术</h2> - -<h5 id="我们期望你已经对_Web_开发入门有所了解，但这并不是必要的。">我们期望你已经对 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web 开发入门</a>有所了解，但这并不是必要的。</h5> - -<dl> - <dt><strong><a href="/zh-CN/docs/Glossary/HTML">HTML</a></strong> — 构建 Web</dt> - <dd><strong>超文本标记语言（HTML），</strong>被用来语义化的定义以及描述一个具有良好结构的 Web页面的内容（<a href="/en-US/docs/Glossary/markup">markup</a>）。</dd> - <dd>HTML 提供了一种构建文档的方式，HTML 文档由一些被叫做 <a href="/zh-CN/docs/Web/HTML/Element">HTML元素</a> 的块构成，而 HTML 元素采用由标签名以及尖括号组成的<a href="/zh-CN/docs/Glossary/Tag">标签</a>来表示：一些标签作为内容直接写在页面中，另外的一些用来规定文档的文本信息还有一些可能包含其它的一些标签作为自己的子标签。浏览器不会显示这些标签，而是将标签视作对页面内容的解释。<br> - <br> - <a href="/zh-CN/Learn/HTML/Introduction_to_HTML">HTML介绍</a> | <a href="/zh-CN/Learn/HTML">学习HTML</a> | <a href="/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5</a> |<a href="/zh-CN/docs/Web/Guide/HTML"> HTML开发者指南</a> | <a href="/zh-CN/docs/Web/HTML/Element">HTML元素参考</a> | <strong><a href="/zh-CN/docs/Web/HTML/Reference">HTML资料库</a></strong></dd> - <dt><strong><a href="/zh-CN/docs/Glossary/CSS">CSS</a></strong> — 描绘Web</dt> - <dd><strong>层叠样式表（CSS）</strong>，被用来描述 Web 页面内容的外观<br> - <br> - <a href="/zh-CN/Learn/CSS/Introduction_to_CSS">CSS介绍</a> | <a href="/zh-CN/docs/Web/Guide/CSS/Getting_started">开始CSS之旅</a> | <a href="/zh-CN/Learn/CSS">学习CSS</a> | <a href="/zh-CN/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/zh-CN/docs/Web/Guide/CSS">CSS开发者指南</a> | <a href="/zh-CN/docs/Web/CSS/Common_CSS_Questions">CSS常见问题</a> | <strong><a href="/zh-CN/docs/Web/CSS/Reference">CSS资料库</a></strong></dd> - <dt><strong><a href="/zh-CN/docs/Web/JavaScript/Reference">Javascript</a></strong> — 动态客户端脚本语言</dt> - <dd><strong>JavaScript</strong>程序设计语言用于添加网站的交互性与其他动态特性。<br> - <br> - <a href="/zh-CN/docs/Learn/JavaScript">学习JavaScript</a> | <a href="/zh-CN/docs/Web/JavaScript/Guide">Javascript开发指南</a> | <a href="/zh-CN/docs/Web/JavaScript/Reference"><strong>Javascript资料库</strong></a></dd> -</dl> diff --git a/files/zh-cn/orphaned/web/security/information_security_basics/index.html b/files/zh-cn/orphaned/web/security/information_security_basics/index.html deleted file mode 100644 index 696621d962..0000000000 --- a/files/zh-cn/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 信息安全基础 -slug: orphaned/Web/Security/Information_Security_Basics -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/Information_Security_Basics ---- -<p>了解安全基础知识有助于你了解整个Web开发生命周期中安全性的作用和重要性。 这将帮助你避免不必要的不安全软件，使得攻击者利用漏洞获得经济利益或其他恶意用途。以下的文章提供一些基本的Web安全理论和定义。</p> - -<dl> - <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">机密性、完整性和可用性</a></dt> - <dd>描述了信息安全的基本目标，是理解信息安全的基础。</dd> - <dt><a href="https://developer.mozilla.org/en-US/Learn/Vulnerabilities">漏洞</a></dt> - <dd>明确主要漏洞策略以及讨论在所有软件中的存在的所有漏洞。</dd> - <dt><a href="/en-US/Learn/Threats">威胁 - Threats</a></dt> - <dd>对主要威胁概念的简单介绍。</dd> - <dt><a href="/en-US/Learn/Security_Controls">安全控制 - Security Controls</a></dt> - <dd>明确主要安全控制策略以及它们潜在的缺点。</dd> - <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 安全</a></dt> - <dd>TCP/IP模型的介绍，还有SSL的教程。</dd> -</dl> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/Mozilla/%E5%AE%89%E5%85%A8">浏览器安全 - Browser security</a></li> - <li><a href="/en-US/docs/Web/Security">网络安全 - Web security</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">让您的网站变得安全 - Securing your site</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">火狐浏览器安全基础开发者须知 - Firefox Security Basics for Developers</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/specification_list/index.html b/files/zh-cn/orphaned/web/specification_list/index.html deleted file mode 100644 index d82cd55386..0000000000 --- a/files/zh-cn/orphaned/web/specification_list/index.html +++ /dev/null @@ -1,406 +0,0 @@ ---- -title: 规范列表 -slug: orphaned/Web/Specification_list -translation_of: Web/Specification_list -original_slug: Specification_List ---- -<p>开放式Web平台(The Open Web Platform)是由一些列的规范组成的,本页面列出了这些规范,以及规范中各个词条所在的MDN页面.</p> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">API Introduction</th> - <th scope="col">Tutorial</th> - <th scope="col">Reference</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName("HTML WHATWG") }}</td> - <td>{{ Spec2("HTML WHATWG") }}</td> - <td> </td> - <td> - <ul> - <li>Constraint Validation</li> - <li>Microdata API</li> - <li>Browsing context (that is <code>_blank</code>, ...)</li> - <li>Session History</li> - <li>Offline Web Applications (appcache)</li> - <li>Drag and Drop</li> - </ul> - </td> - <td> - <p>The <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML Elements</a>.<br> - <em>HTML element-related interfaces:</em><br> - {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)<br> - <em>Other DOM-related interfaces/events/... :</em><br> - {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("WindowEventHandlers")}} {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} <code>Document getter? </code>{{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}} {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (event) {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}} {{domxref("Window.window")}} {{domxref("Window.self")}} {{domxref("Window.document")}} {{domxref("Window.name")}} {{domxref("Window.location")}} {{domxref("Window.history")}} {{domxref("Window.locationbar")}} {{domxref("Window.menubar")}} {{domxref("Window.personalbar")}} {{domxref("Window.scrollbars")}} {{domxref("Window.statusbar")}} {{domxref("Window.toolbar")}} {{domxref("Window.status")}} {{domxref("Window.close()")}} {{domxref("Window.stop()")}} {{domxref("Window.focus()")}} {{domxref("Window.blur()")}} {{domxref("Window.frames")}} {{domxref("Window.length")}} {{domxref("Window.top")}} {{domxref("Window.opener")}} {{domxref("Window.parent")}} {{domxref("Window.frameElement")}} {{domxref("Window.open()")}} getter WindowProxy getter Object {{domxref("Window.navigator")}} {{domxref("Window.external")}} {{domxref("Window.applicationCache")}} {{domxref("Window.statusbar")}} {{domxref("Window.alert()")}} {{domxref("Window.confirm()")}} {{domxref("Window.prompt()")}} {{domxref("Window.print()")}} {{domxref("Window.showModalDialog()")}} {{domxref("Window.postMessage()")}} {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatoreStorageUtils")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/MessageEvent" title="/en-US/docs/WebSockets/WebSockets_reference/MessageEvent">WebSockets/WebSockets_reference</a> ) {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)<br> - <em>Events on any <code>HTML*Element</code>, <code>Document</code> and <code>Window</code> objects:</em><br> - {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}<br> - Events on any <code>HTML*Element</code> (except <code>HTMLBodyElement and HTMLFrameSetElement</code>), <code>Document</code> and <code>Window</code> objects:<br> - {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}<br> - <em>Events on the <code>Window</code> objects:</em><br> - {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("fullscreenchange")}} {{event("fullscreenerror")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}<br> - <em>Events on the </em><code>Document</code><em> objects: </em>{{event("readystatechange")}}</p> - </td> - </tr> - <tr> - <td> CSS</td> - <td><em>Variable</em></td> - <td><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting Started</a></td> - <td>CSS Tutorials</td> - <td>The <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> page list them & the <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS Reference</a> has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.<br> - <em>{{SpecName("CSS3 Fonts")}}</em>: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)<br> - <em>{{SpecName("CSS3 Transitions")}}</em>: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)<br> - <em>{{SpecName("CSS3 Animations")}}</em>: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}<br> - <em>{{SpecName("CSS3 Conditional")}}</em>: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}<br> - <em>{{SpecName("CSS3 Device")}}</em>: {{domxref("CSSViewportRule")}}<br> - <em>{{SpecName("CSS3 Variables")}}</em>: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}</td> - </tr> - <tr> - <td>EcmaScript</td> - <td><em>Variable</em></td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>SVG</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>WebGL</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>MathML</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG") }}</td> - <td>{{ Spec2("DOM WHATWG") }}</td> - <td><a href="/en-US/docs/Gecko_DOM_Reference" title="/en-US/docs/Gecko_DOM_Reference">DOM Reference </a></td> - <td> </td> - <td>{{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Future")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}}</td> - </tr> - <tr> - <td>{{SpecName("CSSOM")}}</td> - <td>{{ Spec2("CSSOM")}}</td> - <td><a href="/en-US/docs/Web/CSSOM" title="/en-US/docs/Web/CSSOM">CSSOM</a></td> - <td> </td> - <td>{{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}}</td> - </tr> - <tr> - <td>{{SpecName("CSSOM View")}}</td> - <td>{{ Spec2("CSSOM View")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}</td> - </tr> - <tr> - <td>{{SpecName("Web Workers")}} (also in WHATWG HTML)</td> - <td>{{ Spec2("Web Workers")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}</td> - </tr> - <tr> - <td>{{SpecName("Element Traversal")}}</td> - <td>{{Spec2("Element Traversal")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ElementTraversal")}}</td> - </tr> - <tr> - <td>{{SpecName("File API")}}</td> - <td>{{Spec2("File API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}}</td> - </tr> - <tr> - <td>{{SpecName("Fullscreen")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td> </td> - <td><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Using fullscreen mode</a></td> - <td>{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}} {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("IndexedDB")}}</td> - <td>{{Spec2("IndexedDB")}}</td> - <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></td> - <td><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> <a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></td> - <td>{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}</td> - </tr> - <tr> - <td>{{SpecName("Web Audio API")}}</td> - <td>{{Spec2("Web Audio API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} <code>AudioDestinationNode</code> {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} <code>ChannelMergerNode</code> <code>ChannelSplitterNode</code> <code>complete</code> (event) <code>ConvolverNode</code> {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} <code>ended</code> (event) {{domxref("GainNode")}} <code>MediaElementAudioSourceNode</code> <code>MediaStreamAudioDestinationNode</code> <code>MediaStreamAudioSourceNode</code> <code>OfflineAudioCompletionEvent</code> <code>OfflineAudioContext</code> <code>OscillatorNode</code> {{domxref("PannerNode")}} {{domxref("ScriptProcessorNode")}} <code>WaveShaperNode</code> <code>WaveTable</code></td> - </tr> - <tr> - <td>{{SpecName("WebRTC 1.0")}}</td> - <td>{{Spec2("WebRTC 1.0")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}</td> - </tr> - <tr> - <td>{{SpecName("Media Capture")}}</td> - <td>{{Spec2("Media Capture")}}</td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("MediaStream Recording")}}</td> - <td>{{Spec2("MediaStream Recording")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}</td> - </tr> - <tr> - <td>{{SpecName("Pointer Lock")}}</td> - <td>{{Spec2("Pointer Lock")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td> - <td>{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}} {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}</td> - </tr> - <tr> - <td>{{SpecName("Vibration API")}}</td> - <td>{{Spec2("Vibration API")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></td> - <td>{{domxref("Vibration")}} {{domxref("window.navigator.vibrate()")}}</td> - </tr> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></td> - <td> </td> - <td>{{domxref("window.navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Geolocation")}}</td> - <td>{{Spec2("Geolocation")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></td> - <td>{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("window.navigator.geolocation")}} {{domxref("Positions")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}} Note that several of these interfaces are documented under {{domxref("window.navigator.geolocation.getCurrentPosition()")}}</td> - </tr> - <tr> - <td>{{SpecName("Device Orientation")}}</td> - <td>{{Spec2("Device Orientation")}}</td> - <td> </td> - <td> </td> - <td>{{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}</td> - </tr> - <tr> - <td>{{SpecName("Screen Orientation")}}</td> - <td>{{Spec2("Screen Orientation")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Web Notifications")}}</td> - <td>{{Spec2("Web Notifications")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("AmbientLight")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Proximity Events")}}</td> - <td>{{Spec2("Proximity Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("WebIDL")}}</td> - <td>{{Spec2("WebIDL")}}</td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("XMLHttpRequest")}}</td> - <td>{{Spec2("XMLHttpRequest")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}</td> - </tr> - <tr> - <td>{{SpecName("Highres Time")}}</td> - <td>{{Spec2("Highres Time")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}</td> - </tr> - <tr> - <td>{{SpecName("Websockets")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Websockets")}}</td> - <td><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a> <a href="/en-US/docs/WebSockets/WebSockets_reference" title="/en-US/docs/WebSockets/WebSockets_reference">WebSockets reference</a></td> - <td><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></td> - <td>{{domxref("WebSocket")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSockets/WebSockets_reference/WebSocket</a> ) {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSockets/WebSockets_reference/CloseEvent</a> )</td> - </tr> - <tr> - <td>{{SpecName("Page Visibility API")}}</td> - <td>{{Spec2("Page Visibility API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("RequestAnimationFrame")}}</td> - <td>{{Spec2("RequestAnimationFrame")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}</td> - </tr> - <tr> - <td>{{SpecName("Server-sent events")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Server-sent events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Network Information")}}</td> - <td>{{Spec2("Network Information")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{event("change")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Web Storage")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Web Storage")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}</td> - </tr> - <tr> - <td>{{SpecName("Progress Events")}}</td> - <td>{{Spec2("Progress Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ProgressEvent")}}</td> - </tr> - <tr> - <td>{{SpecName("Typed Array")}}</td> - <td>{{Spec2("Typed Array")}}</td> - <td> </td> - <td><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">JavaScript Typed arrays</a></td> - <td><code><a href="/en-US/docs/JavaScript/Typed_arrays/Int8Array" title="Int8Array">Int8Array</a></code> <a href="/en-US/docs/JavaScript/Typed_arrays/Int16Array" title="/en-US/docs/JavaScript/Typed_arrays/Int16Array"><code>Int16Array</code></a> <a href="/en-US/docs/JavaScript/Typed_arrays/Int32Array" title="/en-US/docs/JavaScript/Typed_arrays/Int32Array"><code>Int32Array</code></a> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="Uint8Array">Uint8Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint16Array" title="Uint8Array">Uint16Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint32Array" title="Uint8Array">Uint32Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray">Uint8ClampedArray</a></code> <a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array" title="/en-US/docs/JavaScript/Typed_arrays/Float32Array"><code>Float32Array</code></a> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Float64Array" title="Float64Array">Float64Array</a></code>, ...</td> - </tr> - <tr> - <td>{{SpecName("Gamepad")}}</td> - <td>{{Spec2("Gamepad")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}</td> - </tr> - <tr> - <td>{{SpecName("Navigation Timing")}}</td> - <td>{{Spec2("Navigation Timing")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}</td> - </tr> - <tr> - <td>{{SpecName("WOFF1.0")}}</td> - <td>{{Spec2("WOFF1.0")}}</td> - <td><a href="/en-US/docs/WOFF" title="/en-US/docs/WOFF">About the Web Open Font Format</a></td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td> </td> - <td> </td> - <td>{{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}</td> - </tr> - <tr> - <td>WebSocket Protocol</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>CORS</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>HTTP</td> - <td> </td> - <td><a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a></td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>TLS</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>MediaFragment</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Link: header</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Content-Disposition: header</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>URL</td> - <td><a href="http://url.spec.whatwg.org/" title="http://url.spec.whatwg.org/">Living Standard</a></td> - <td> </td> - <td> </td> - <td>{{domxref("URLUtils")}} {{domxref("URLUtilsReadOnly")}}</td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/zh-cn/orphaned/web/svg/element/color-profile/index.html b/files/zh-cn/orphaned/web/svg/element/color-profile/index.html deleted file mode 100644 index 740c997eef..0000000000 --- a/files/zh-cn/orphaned/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: color-profile -slug: orphaned/Web/SVG/Element/color-profile -tags: - - SVG - - 元素 - - 参考 - - 需要示例 -translation_of: Web/SVG/Element/color-profile -original_slug: Web/SVG/Element/color-profile ---- -<div>{{SVGRef}}</div> - -<p>该元素允许描述用于图像的颜色配置文件。</p> - -<h2 id="用法">用法</h2> - -<p>{{svginfo}}</p> - -<h2 id="示例">示例</h2> - -<h2 id="属性">属性</h2> - -<h3 id="全局属性">全局属性</h3> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> -</ul> - -<h3 id="专有属性">专有属性</h3> - -<ul> - <li>{{SVGAttr("local")}}</li> - <li>{{SVGAttr("name")}}</li> - <li>{{SVGAttr("rendering-intent")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> - -<h2 id="DOM_接口">DOM 接口</h2> - -<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGColorProfileElement">SVGColorProfileElement</a></code>接口。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources">这些资源</a>。</p> diff --git a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html deleted file mode 100644 index 797cccfd90..0000000000 --- a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Status of Web Components support in Firefox -slug: orphaned/Web/Web_Components/Status_in_Firefox -translation_of: Web/Web_Components/Status_in_Firefox -original_slug: Web/Web_Components/Status_in_Firefox ---- -<p>{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}</p> - -<p><a href="/en-US/docs/Web/Web_Components">Web Components</a> 依旧是一项非常新的技术，它的规范正随着浏览器的实现而不断演变并且 Web 开发者正在测试和使用它。 它的实现状态是变化的并且演变的十分迅速; 这篇文章列出了在 <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 上的状态, 用于 Firefox 和Firefox OS.</p> - -<div class="blob instapaper_body" id="readme"> -<article class="markdown-body entry-content"> -<h2 id="原生支持">原生支持</h2> - -<p>下面的特征已经被实现了并且默认在 Firefox and Firefox OS 中被激活:</p> - -<ul> - <li>{{HTMLElement("template")}}</li> -</ul> - -<h2 id="即将到来的特征">即将到来的特征</h2> - -<ul> - <li>一个实现关于新的 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 共识有望在2016年第一季度达成; <a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne's</a> 和 <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson's</a> 的博客讲述了这些细节。 这依然有 <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">大量的讨论和公开问题</a> 关于这个规范.。并且所有的浏览器实现被有望在未来得到更新.</li> - <li><strong>自定义元素</strong> 是从头开始, 用一种方式来重建它们使用 ECMAScript 6 “class” 语法 (换而言之, 更少的使用基于原型的语法). 苹果公司的 Ryosuke Niwa 正在填补某些实验性功能使用新的途径. - <ul> - <li>旧的语法将可以与新的语法一起在Chrome 中工作一段时间(例如, {{domxref("Element.createShadowRoot()")}} 对应 {{domxref("Element.attachShadow()")}}), 但不能原生的在Firefox中工作。</li> - </ul> - </li> - <li>这将会有一个供应商 <a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">面对面交流的机会在2016年一月</a> 来讨论问来会出现的问题 。</li> -</ul> - -<h2 id="被摒弃的功能">被摒弃的功能</h2> - -<p>这些功能已被考虑实现了, 并且有些是实验性实现。但他们将会永远不被实现, 或者被删除。</p> - -<ul> - <li><strong>HTML imports</strong>, 因为我们想等着看看开发者如何使用ES6 模块 (虽然还没有实现; 查看 {{bug(568953)}}). imports是一个早期未完成实现，并且将会被删除从Firefox中。</li> -</ul> - -<h2 id="在Firefox中使用垫片">在Firefox中使用垫片</h2> - -<p>这有些注意事项在Firefox中使用垫片的时候：</p> - -<ul> - <li>当你激活原生Web容器支持在Firefox中通过设置 {{pref("dom.webcomponents.enabled")}} 偏好 为 <code>true</code> 在 <code>about:config 中</code>, 这个未完成的原生实现开始运作并且垫片可能会出现混淆; 这会有很大的可能性出现崩溃.</li> - <li>一个使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> 垫片生成的Shadow DOM 并没有完全包裹样式, 所以这个 样式 可能会溢出。 要注意使用垫片构建的网址当运行在不支持原生Shadow DOM的环境之下时可能会出现差异.</li> - <li>这个Shadow DOM 垫片运行时非常缓慢的以为他重写了DOM元素的原型来挂在它的功能 。</li> - <li>如果你不需要使用 Shadow DOM, 使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> 版本的 webcomponents.js 垫片是一个名明智的选择; 这个版本不填补 Shadow DOM.</li> -</ul> -</article> -</div> diff --git a/files/zh-cn/orphaned/web/api/domlocator/index.html b/files/zh-cn/web/api/domlocator/index.html index 36266f2b67..77ad2f17bb 100644 --- a/files/zh-cn/orphaned/web/api/domlocator/index.html +++ b/files/zh-cn/web/api/domlocator/index.html @@ -48,4 +48,4 @@ original_slug: Web/API/DOMLocator <td>Initial definition</td> </tr> </tbody> -</table> +</table>
\ No newline at end of file diff --git a/files/zh-cn/orphaned/web/api/childnode/after/index.html b/files/zh-cn/web/api/element/after/index.html index 76792e7638..76792e7638 100644 --- a/files/zh-cn/orphaned/web/api/childnode/after/index.html +++ b/files/zh-cn/web/api/element/after/index.html diff --git a/files/zh-cn/orphaned/web/api/parentnode/append/index.html b/files/zh-cn/web/api/element/append/index.html index 6f06f7a420..00d22e2232 100644 --- a/files/zh-cn/orphaned/web/api/parentnode/append/index.html +++ b/files/zh-cn/web/api/element/append/index.html @@ -1,18 +1,19 @@ --- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append +title: Element.append() +slug: Web/API/Element/append +translation_of: Web/API/Element/append tags: - API - DOM + - Method - Node - - ParentNode + - Element - Reference -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append +browser-compat: api.Element.append --- <div>{{APIRef("DOM")}}</div> -<div> <strong><code>ParentNode.append</code></strong> 方法在 <code>ParentNode</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div> +<div> <strong><code>Element.append</code></strong> 方法在 <code>Element</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div> <div>被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。</div> @@ -23,15 +24,15 @@ original_slug: Web/API/ParentNode/append <div></div> <ul> - <li><code>ParentNode.append()</code>允许追加 {{domxref("DOMString")}} 对象，而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li> - <li><code>ParentNode.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>，而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li> - <li><code>ParentNode.append()</code> 可以追加多个节点和字符串，而 <code>Node.appendChild()</code> 只能追加一个节点。</li> + <li><code>Element.append()</code>允许追加 {{domxref("DOMString")}} 对象，而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li> + <li><code>Element.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>，而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li> + <li><code>Element.append()</code> 可以追加多个节点和字符串，而 <code>Node.appendChild()</code> 只能追加一个节点。</li> </ul> <h2 id="语法">语法</h2> <pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); +void Element.append((Node or DOMString)... nodes); </pre> <h3 id="参数">参数</h3> @@ -73,7 +74,7 @@ parent.append("Some text", p); console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> -<h3 id="ParentNode.append_方法在_with_语句中不生效"><code>ParentNode.append()</code> 方法在 with 语句中不生效</h3> +<h3 id="Element.append_方法在_with_语句中不生效"><code>Element.append()</code> 方法在 with 语句中不生效</h3> <p>为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。</p> @@ -88,7 +89,7 @@ with(parent) { <p>下面的 Polyfill 只支持到 IE 9 及以上：</p> -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md +<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/Element/append()/append().md (function (arr) { arr.forEach(function (item) { if (item.hasOwnProperty('append')) { @@ -123,7 +124,7 @@ with(parent) { <th scope="col">Comment</th> </tr> <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> + <td>{{SpecName('DOM WHATWG', '#dom-Element-append', 'Element.append()')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> <td>Initial definition.</td> </tr> @@ -134,13 +135,13 @@ with(parent) { -<p>{{Compat("api.ParentNode.append")}}</p> +<p>{{Compat("api.Element.append")}}</p> <h2 id="相关链接">相关链接</h2> <ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> + <li>{{domxref("Element")}} and {{domxref("ChildNode")}}</li> + <li>{{domxref("Element.prepend()")}}</li> <li>{{domxref("Node.appendChild()")}}</li> <li>{{domxref("ChildNode.after()")}}</li> <li>{{domxref("NodeList")}}</li> diff --git a/files/zh-cn/orphaned/web/api/childnode/before/index.html b/files/zh-cn/web/api/element/before/index.html index add3dab015..add3dab015 100644 --- a/files/zh-cn/orphaned/web/api/childnode/before/index.html +++ b/files/zh-cn/web/api/element/before/index.html diff --git a/files/zh-cn/web/api/element/childelementcount/index.html b/files/zh-cn/web/api/element/childelementcount/index.html index 11a680d8a0..8981c4ad50 100644 --- a/files/zh-cn/web/api/element/childelementcount/index.html +++ b/files/zh-cn/web/api/element/childelementcount/index.html @@ -1,15 +1,20 @@ --- -title: ParentNode.childElementCount +title: Element.childElementCount slug: Web/API/Element/childElementCount -translation_of: Web/API/ParentNode/childElementCount -original_slug: Web/API/ParentNode/childElementCount +translation_of: Web/API/Element/childElementCount +tags: + - API + - DOM + - Property + - Reference +browser-compat: api.Element.childElementCount --- <p>{{ APIRef("DOM") }} </p> -<p> <code><strong>ParentNode.childElementCount </strong></code>只读属性返回一个<em><strong>无符号长整型数字</strong></em>，表示给定元素的子元素数。</p> +<p> <code><strong>Element.childElementCount </strong></code>只读属性返回一个<em><strong>无符号长整型数字</strong></em>，表示给定元素的子元素数。</p> <div class="note"> -<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>childElementCount</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p> +<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, <code>childElementCount</code> moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.</p> </div> <p> </p> diff --git a/files/zh-cn/orphaned/web/api/parentnode/children/index.html b/files/zh-cn/web/api/element/children/index.html index 70a02ddcca..9690827104 100644 --- a/files/zh-cn/orphaned/web/api/parentnode/children/index.html +++ b/files/zh-cn/web/api/element/children/index.html @@ -1,14 +1,19 @@ --- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children +title: Element.children +slug: Web/API/Element/children +translation_of: Web/API/Element/children tags: + - API + - DOM + - Element + - HTMLCollection - Property -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children + - children +browser-compat: api.Element.children --- <p>{{ APIRef("DOM") }}</p> -<p><code><strong>ParentNode.children </strong></code>是一个只读属性，返回 一个Node的子{{domxref("Element","elements")}} ，是一个动态更新的 {{domxref("HTMLCollection")}}。</p> +<p><code><strong>Element.children </strong></code>是一个只读属性，返回 一个Node的子{{domxref("Element","elements")}} ，是一个动态更新的 {{domxref("HTMLCollection")}}。</p> <h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> @@ -49,7 +54,7 @@ if (parg.childElementCount) <th scope="col">Comment</th> </tr> <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> + <td>{{SpecName('DOM WHATWG', '#dom-Element-children', 'Element.children')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> <td>Initial definition.</td> </tr> @@ -111,7 +116,7 @@ if (parg.childElementCount) <h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px;">相关链接</h2> <ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li> + <li>The {{domxref("Element")}} and {{domxref("ChildNode")}} pure interfaces.</li> <li> <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> </li> diff --git a/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html b/files/zh-cn/web/api/element/firstelementchild/index.html index 8e658b4adc..dbbc7868e1 100644 --- a/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html +++ b/files/zh-cn/web/api/element/firstelementchild/index.html @@ -1,15 +1,20 @@ --- title: Element.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -translation_of: Web/API/ParentNode/firstElementChild -original_slug: Web/API/ParentNode/firstElementChild +slug: Web/API/Element/firstElementChild +translation_of: Web/API/Element/firstElementChild +tags: + - API + - DOM + - Element + - Property +browser-compat: api.Element.firstElementChild --- <p>{{ APIRef("DOM") }}</p> -<p><strong><code>ParentNode.firstElementChild</code></strong> 只读属性，返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素，则为null。</p> +<p><strong><code>Element.firstElementChild</code></strong> 只读属性，返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素，则为null。</p> <div class="note"> -<p><span>他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性，一个针对具有子元素的{{domxref("Node")}}，一个针对子元素的属性，因此它们被移动到两个单独的纯接口中，{{domxref("ParentNode")}}和{{domxref("ChildNode")}}。在本例中，firstElementChild移动到{{domxref("ParentNode")}}。这是一个相当技术性的更改，不应该影响兼容性。</span></p> +<p><span>他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性，一个针对具有子元素的{{domxref("Node")}}，一个针对子元素的属性，因此它们被移动到两个单独的纯接口中，{{domxref("Element")}}和{{domxref("ChildNode")}}。在本例中，firstElementChild移动到{{domxref("Element")}}。这是一个相当技术性的更改，不应该影响兼容性。</span></p> </div> <h2 id="语法">语法</h2> @@ -65,9 +70,9 @@ console.log(foo.firstElementChild.textContent); <th scope="col">Comment</th> </tr> <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> + <td>{{SpecName('DOM WHATWG', '#dom-Element-firstelementchild', 'Element.firstElementChild')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code>interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br> + <td>Splitted the <code>ElementTraversal</code>interface in {{domxref("ChildNode")}} and <code>Element</code>. This method is now defined on the latter.<br> The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td> </tr> <tr> @@ -82,14 +87,14 @@ console.log(foo.firstElementChild.textContent); -<p>{{Compat("api.ParentNode.firstElementChild")}}</p> +<p>{{Compat("api.Element.firstElementChild")}}</p> <h2 id="参见">参见</h2> -<h2 id="Ed"><a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/lastElementChild$edit#参见" rel="nofollow, noindex"><span>Ed</span></a></h2> +<h2 id="Ed"><a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/lastElementChild$edit#参见" rel="nofollow, noindex"><span>Ed</span></a></h2> <ul> - <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li> + <li>纯接口 {{domxref("Element")}} 和 {{domxref("ChildNode")}}。</li> <li> <div class="syntaxbox">实现了此纯接口的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div> </li> diff --git a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html b/files/zh-cn/web/api/element/lastelementchild/index.html index 566d3a1976..21a33fd6b6 100644 --- a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html +++ b/files/zh-cn/web/api/element/lastelementchild/index.html @@ -1,15 +1,20 @@ --- title: Element.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -translation_of: Web/API/ParentNode/lastElementChild -original_slug: Web/API/ParentNode/lastElementChild +slug: Web/API/Element/lastElementChild +translation_of: Web/API/Element/lastElementChild +tags: + - API + - DOM + - Element + - Property +browser-compat: api.Element.lastElementChild --- <p>{{ APIRef("DOM") }}</p> -<p>只读属性 <code><strong>ParentNode.lastElementChild</strong></code> 返回对象的最后一个子{{domxref("Element", "元素")}}，如果没有子元素，则返回 <code>null</code>。</p> +<p>只读属性 <code><strong>Element.lastElementChild</strong></code> 返回对象的最后一个子{{domxref("Element", "元素")}}，如果没有子元素，则返回 <code>null</code>。</p> <div class="note"> -<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p> +<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.</p> </div> <h2 id="语法">语法</h2> @@ -65,9 +70,9 @@ console.log(foo.lastElementChild.textContent); <th scope="col">备注</th> </tr> <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td> + <td>{{SpecName('DOM WHATWG', '#dom-Element-lastelementchild', 'Element.lastElementChild')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br> + <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>Element</code>. This method is now defined on the latter.<br> The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td> </tr> <tr> @@ -82,12 +87,12 @@ console.log(foo.lastElementChild.textContent); -<p>{{Compat("api.ParentNode.lastElementChild")}}</p> +<p>{{Compat("api.Element.lastElementChild")}}</p> <h2 id="参见">参见</h2> <ul> - <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li> + <li>纯接口 {{domxref("Element")}} 和 {{domxref("ChildNode")}}。</li> <li> <div class="syntaxbox">实现了此纯接口的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div> </li> diff --git a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html b/files/zh-cn/web/api/element/prepend/index.html index c2779973b0..eb7edc31cd 100644 --- a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html +++ b/files/zh-cn/web/api/element/prepend/index.html @@ -1,25 +1,24 @@ --- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend +title: Element.prepend() +slug: Web/API/Element/prepend +translation_of: Web/API/Element/prepend tags: - API - DOM - Method - Node - - ParentNode + - Element - Reference - prepend - - 方法 -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend +browser-compat: api.Element.prepend --- <div>{{APIRef("DOM")}}</div> -<p><strong><code>ParentNode.prepend</code></strong> 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。</p> +<p><strong><code>Element.prepend</code></strong> 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。</p> <h2 id="语法">语法</h2> -<pre class="syntaxbox">ParentNode.prepend((Node or DOMString)... nodes); +<pre class="syntaxbox">Element.prepend((Node or DOMString)... nodes); </pre> <h3 id="参数">参数</h3> @@ -68,7 +67,7 @@ parent.prepend("Some text", p); console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> -<h3 id="ParentNode.prepend_is_unscopable"><code>ParentNode.prepend()</code> is unscopable</h3> +<h3 id="Element.prepend_is_unscopable"><code>Element.prepend()</code> is unscopable</h3> <p><code>prepend()不能在with语句内使用，详情参考</code>{{jsxref("Symbol.unscopables")}}。</p> @@ -83,7 +82,7 @@ with(parent) { <p>使用下面的代码在IE9或更高版本中模拟<code>prepend()</code>方法：</p> -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md +<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/Element/prepend()/prepend().md (function (arr) { arr.forEach(function (item) { item.prepend = item.prepend || function () { @@ -110,7 +109,7 @@ with(parent) { <th scope="col">Comment</th> </tr> <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> + <td>{{SpecName('DOM WHATWG', '#dom-Element-prepend', 'Element.prepend()')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> <td>Initial definition.</td> </tr> @@ -121,13 +120,13 @@ with(parent) { -<p>{{Compat("api.ParentNode.prepend")}}</p> +<p>{{Compat("api.Element.prepend")}}</p> <h2 id="See_also">See also</h2> <ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> + <li>{{domxref("Element")}} and {{domxref("ChildNode")}}</li> + <li>{{domxref("Element.append()")}}</li> <li>{{domxref("Node.appendChild()")}}</li> <li>{{domxref("Node.insertBefore()")}}</li> <li>{{domxref("ChildNode.before()")}}</li> diff --git a/files/zh-cn/orphaned/web/api/childnode/remove/index.html b/files/zh-cn/web/api/element/remove/index.html index b60cab7a0c..b60cab7a0c 100644 --- a/files/zh-cn/orphaned/web/api/childnode/remove/index.html +++ b/files/zh-cn/web/api/element/remove/index.html diff --git a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html b/files/zh-cn/web/api/element/replacechildren/index.html index d01a334fd7..c15e75961e 100644 --- a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html +++ b/files/zh-cn/web/api/element/replacechildren/index.html @@ -1,24 +1,32 @@ --- -title: ParentNode.replaceChildren() -slug: orphaned/Web/API/ParentNode/replaceChildren -translation_of: Web/API/ParentNode/replaceChildren -original_slug: Web/API/ParentNode/replaceChildren +title: Element.replaceChildren() +slug: Web/API/Element/replaceChildren +translation_of: Web/API/Element/replaceChildren +tags: + - API + - DOM + - Method + - Node + - Element + - Reference + - replaceChildren +browser-compat: api.Element.replaceChildren --- <div>{{APIRef("DOM")}}{{seecompattable}}</div> -<p><strong><code>ParentNode.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p> +<p><strong><code>Element.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p> <h2 id="语法">语法</h2> <pre class="syntaxbox notranslate">// [Throws, Unscopable] -ParentNode.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined +Element.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined </pre> <h3 id="参数">参数</h3> <dl> <dt><code><var>nodesOrDOMStrings</var></code></dt> - <dd>一组用于替换 <code>ParentNode</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时，<code>ParentNode</code> 的所有后代都将被清空。</dd> + <dd>一组用于替换 <code>Element</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时，<code>Element</code> 的所有后代都将被清空。</dd> </dl> <h3 id="异常">异常</h3> @@ -139,7 +147,7 @@ noBtn.addEventListener('click', () => { <th scope="col">备注</th> </tr> <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-replacechildren', 'ParentNode.replaceChildren()')}}</td> + <td>{{SpecName('DOM WHATWG', '#dom-Element-replacechildren', 'Element.replaceChildren()')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> <td>Initial definition.</td> </tr> @@ -150,13 +158,13 @@ noBtn.addEventListener('click', () => { -<p>{{Compat("api.ParentNode.replaceChildren")}}</p> +<p>{{Compat("api.Element.replaceChildren")}}</p> <h2 id="相关链接">相关链接</h2> <ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> + <li>{{domxref("Element")}} and {{domxref("ChildNode")}}</li> + <li>{{domxref("Element.prepend()")}}</li> + <li>{{domxref("Element.append()")}}</li> <li>{{domxref("NodeList")}}</li> </ul> diff --git a/files/zh-cn/orphaned/web/api/childnode/replacewith/index.html b/files/zh-cn/web/api/element/replacewith/index.html index 9f3ef5bd88..9f3ef5bd88 100644 --- a/files/zh-cn/orphaned/web/api/childnode/replacewith/index.html +++ b/files/zh-cn/web/api/element/replacewith/index.html diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/nonce/index.html b/files/zh-cn/web/api/htmlelement/nonce/index.html index 9b3c39fbd4..018a276376 100644 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/nonce/index.html +++ b/files/zh-cn/web/api/htmlelement/nonce/index.html @@ -1,14 +1,17 @@ --- title: HTMLElement.nonce -slug: orphaned/Web/API/HTMLOrForeignElement/nonce +slug: Web/API/HTMLElement/nonce +translation_of: Web/API/HTMLElement/nonce tags: - API + - Content Security Policy + - Experimental + - HTML DOM + - HTMLElement + - Property + - Reference - nonce - - 内容安全策略 - - 实验性 - - 属性 -translation_of: Web/API/HTMLOrForeignElement/nonce -original_slug: Web/API/HTMLOrForeignElement/nonce +browser-compat: api.HTMLElement.nonce --- <p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> @@ -56,4 +59,4 @@ HTMLElement.nonce = <em>nonce</em></pre> <div> <p>{{Compat("api.HTMLElement.nonce")}}</p> -</div> +</div>
\ No newline at end of file diff --git a/files/zh-cn/orphaned/web/api/renderingcontext/index.html b/files/zh-cn/web/api/renderingcontext/index.html index 9133b5fd7f..3a1477c435 100644 --- a/files/zh-cn/orphaned/web/api/renderingcontext/index.html +++ b/files/zh-cn/web/api/renderingcontext/index.html @@ -27,4 +27,4 @@ original_slug: Web/API/RenderingContext </tbody> </table> -<p> </p> +<p> </p>
\ No newline at end of file diff --git a/files/zh-cn/orphaned/web/api/body/arraybuffer/index.html b/files/zh-cn/web/api/response/arraybuffer/index.html index 5d7acf678f..48ec4e65a2 100644 --- a/files/zh-cn/orphaned/web/api/body/arraybuffer/index.html +++ b/files/zh-cn/web/api/response/arraybuffer/index.html @@ -1,12 +1,19 @@ --- -title: Body.arrayBuffer() -slug: orphaned/Web/API/Body/arrayBuffer -translation_of: Web/API/Body/arrayBuffer -original_slug: Web/API/Body/arrayBuffer +title: Response.arrayBuffer() +slug: Web/API/Response/arrayBuffer +translation_of: Web/API/Response/arrayBuffer +tags: + - API + - ArrayBuffer + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.arrayBuffer --- <p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p> -<p> {{domxref("Body")}}上的<strong><code>方法 arrayBuffer()</code></strong> 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.</p> +<p> {{domxref("Response")}}上的<strong><code>方法 arrayBuffer()</code></strong> 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.</p> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/orphaned/web/api/body/blob/index.html b/files/zh-cn/web/api/response/blob/index.html index 4f09632307..89444de3d4 100644 --- a/files/zh-cn/orphaned/web/api/body/blob/index.html +++ b/files/zh-cn/web/api/response/blob/index.html @@ -1,14 +1,19 @@ --- -title: Body.blob() -slug: orphaned/Web/API/Body/blob +title: Response.blob() +slug: Web/API/Response/blob +translation_of: Web/API/Response/blob tags: - - Body.blob() -translation_of: Web/API/Body/blob -original_slug: Web/API/Body/blob + - API + - Blob + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.blob --- <p>{{APIRef("Fetch")}}</p> -<p>{{domxref("Body")}} mixin的 <strong><code>blob()</code></strong>方法使用一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。</p> +<p>{{domxref("Response")}} mixin的 <strong><code>blob()</code></strong>方法使用一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。</p> <h2 id="句法">句法</h2> diff --git a/files/zh-cn/orphaned/web/api/body/body/index.html b/files/zh-cn/web/api/response/body/index.html index abf63535fc..ffd78b8dfe 100644 --- a/files/zh-cn/orphaned/web/api/body/body/index.html +++ b/files/zh-cn/web/api/response/body/index.html @@ -1,12 +1,19 @@ --- -title: Body.body -slug: orphaned/Web/API/Body/body -translation_of: Web/API/Body/body -original_slug: Web/API/Body/body +title: Response.body +slug: Web/API/Response/body +translation_of: Web/API/Response/body +tags: + - API + - Fetch + - Property + - Reference + - Streams + - Response +browser-compat: api.Response.body --- <div>{{APIRef("Fetch")}}</div> -<p>{{domxref("Body")}} mixin的只读getter属性 <strong><code>body</code></strong> 用于暴露其body内容的{{domxref("ReadableStream")}}（流读取）。</p> +<p>{{domxref("Response")}} mixin的只读getter属性 <strong><code>body</code></strong> 用于暴露其body内容的{{domxref("ReadableStream")}}（流读取）。</p> <h2 id="语法">语法</h2> @@ -18,7 +25,7 @@ original_slug: Web/API/Body/body <h2 id="例程">例程</h2> -<p>在我们的 <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">simple stream pump</a> 例程中我们fetch一个图片地址，使用<code>response.body</code>暴露响应的流，用{{domxref("body.getReader()", "ReadableStream.getReader()")}}创建一个读取器，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。</p> +<p>在我们的 <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">simple stream pump</a> 例程中我们fetch一个图片地址，使用<code>response.body</code>暴露响应的流，用{{domxref("Response.getReader()", "ReadableStream.getReader()")}}创建一个读取器，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。</p> <pre class="brush: js">const image = document.getElementById('target'); @@ -27,7 +34,7 @@ fetch('./tortoise.png') // 取出body .then(response => response.body) .then(body => { - const reader = body.getReader(); + const reader = Response.getReader(); return new ReadableStream({ start(controller) { @@ -74,7 +81,7 @@ fetch('./tortoise.png') <h2 id="浏览器兼容性">浏览器兼容性</h2> -<div>{{Compat("api.Body.body")}}</div> +<div>{{Compat("api.Response.body")}}</div> <p> </p> diff --git a/files/zh-cn/orphaned/web/api/body/bodyused/index.html b/files/zh-cn/web/api/response/bodyused/index.html index a875ab79d1..2e9428b9c2 100644 --- a/files/zh-cn/orphaned/web/api/body/bodyused/index.html +++ b/files/zh-cn/web/api/response/bodyused/index.html @@ -1,12 +1,19 @@ --- -title: Body.bodyUsed -slug: orphaned/Web/API/Body/bodyUsed -translation_of: Web/API/Body/bodyUsed -original_slug: Web/API/Body/bodyUsed +title: Response.bodyUsed +slug: Web/API/Response/bodyUsed +translation_of: Web/API/Response/bodyUsed +tags: + - API + - Fetch + - Property + - Reference + - bodyUsed + - Response +browser-compat: api.Response.bodyUsed --- <p>{{APIRef("Fetch")}}{{ SeeCompatTable }}</p> -<p><strong><code>bodyUsed</code></strong><code> 是</code>{{domxref("Body")}} mixin中的一个<code>只读属性。用以表示该body是否被使用过。</code></p> +<p><strong><code>bodyUsed</code></strong><code> 是</code>{{domxref("Response")}} mixin中的一个<code>只读属性。用以表示该body是否被使用过。</code></p> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/orphaned/web/api/body/formdata/index.html b/files/zh-cn/web/api/response/formdata/index.html index 2e415887cd..26b61274fe 100644 --- a/files/zh-cn/orphaned/web/api/body/formdata/index.html +++ b/files/zh-cn/web/api/response/formdata/index.html @@ -1,12 +1,21 @@ --- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData +title: Response.formData() +slug: Web/API/Response/formData +translation_of: Web/API/Response/formData +tags: + - API + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference + - Response +browser-compat: api.Response.formData --- <div>{{APIRef("Fetch")}}</div> -<p> {{domxref("Body")}} 对象中的<strong><code>formData()</code></strong> 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 <strong><code>Promise</code></strong> 对象，该对象将产生一个{{domxref("FormData")}} 对象。</p> +<p> {{domxref("Response")}} 对象中的<strong><code>formData()</code></strong> 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 <strong><code>Promise</code></strong> 对象，该对象将产生一个{{domxref("FormData")}} 对象。</p> <div class="note"> <p><strong>注意</strong>: 该方法主要与 <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a> 有关. 如果客户端提交的一个表单请求被Service Worker 所截取，您可以像下述的样例一样，调用 <code>formData()</code> 方法来获取一个key-value 字典, 对该字典可以进行修饰, 然后将修饰后的表填提交给远端服务器 (或在本地应用)。</p> diff --git a/files/zh-cn/orphaned/web/api/body/json/index.html b/files/zh-cn/web/api/response/json/index.html index 54bd1c5c3e..360c349054 100644 --- a/files/zh-cn/orphaned/web/api/body/json/index.html +++ b/files/zh-cn/web/api/response/json/index.html @@ -1,19 +1,19 @@ --- -title: Body.json() -slug: orphaned/Web/API/Body/json +title: Response.json() +slug: Web/API/Response/json +translation_of: Web/API/Response/json tags: - API - - BODY - Fetch - JSON - - 参考 - - 方法 -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json + - Method + - Reference + - Response +browser-compat: api.Response.json --- <div>{{APIRef("Fetch")}}</div> -<div>{{domxref("Body")}} mixin 的 <strong><code>json()</code></strong> 方法接收一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个 Promise，Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。</div> +<div>{{domxref("Response")}} mixin 的 <strong><code>json()</code></strong> 方法接收一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个 Promise，Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。</div> <h2 id="语法">语法</h2> @@ -68,7 +68,7 @@ fetch(myRequest) </thead> <tbody> <tr> - <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td> + <td>{{SpecName("Fetch", "#dom-body-json", "Response.json()")}}</td> <td>{{Spec2("Fetch")}}</td> <td>Initial definition</td> </tr> @@ -80,7 +80,7 @@ fetch(myRequest) -<p>{{Compat("api.Body.json")}}</p> +<p>{{Compat("api.Response.json")}}</p> <h2 id="相关链接">相关链接</h2> diff --git a/files/zh-cn/orphaned/web/api/body/text/index.html b/files/zh-cn/web/api/response/text/index.html index 320d294861..a56418518f 100644 --- a/files/zh-cn/orphaned/web/api/body/text/index.html +++ b/files/zh-cn/web/api/response/text/index.html @@ -1,17 +1,19 @@ --- -title: Body.text() -slug: orphaned/Web/API/Body/text +title: Response.text() +slug: Web/API/Response/text +translation_of: Web/API/Response/text tags: - API - Fetch - - 参考 - - 方法 -translation_of: Web/API/Body/text -original_slug: Web/API/Body/text + - Method + - Reference + - Text + - Response +browser-compat: api.Response.text --- <div>{{APIRef("Fetch")}}</div> -<p>{{domxref("Body")}} mixin 的 <strong><code>text()</code></strong> 方法提供了一个可供读取的“返回流”（{{domxref("Response")}} stream），并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象（也就是文本）的 Promise 对象，返回结果的编码<em>永远是</em> UTF-8。</p> +<p>{{domxref("Response")}} mixin 的 <strong><code>text()</code></strong> 方法提供了一个可供读取的“返回流”（{{domxref("Response")}} stream），并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象（也就是文本）的 Promise 对象，返回结果的编码<em>永远是</em> UTF-8。</p> <h2 id="语法">语法</h2> @@ -75,7 +77,7 @@ function getData(pageId) { -<p>{{Compat("api.Body.text")}}</p> +<p>{{Compat("api.Response.text")}}</p> <h2 id="See_also">See also</h2> diff --git a/files/zh-cn/orphaned/web/css/linear-gradient()/index.html b/files/zh-cn/web/css/gradient/linear-gradient()/index.html index 5127ea1fa8..c8c25b68e2 100644 --- a/files/zh-cn/orphaned/web/css/linear-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/linear-gradient()/index.html @@ -1,15 +1,19 @@ --- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +translation_of: Web/CSS/gradient/linear-gradient() tags: - - Background - - CSS Backgrounds and Borders Module Level 3 - - CSS3 - - W3C + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web - gradient - - linear-gradient() -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient + --- <p>{{CSSRef}}</p> diff --git a/files/zh-cn/orphaned/web/css/radial-gradient()/index.html b/files/zh-cn/web/css/gradient/radial-gradient()/index.html index 896d55a200..78750ad563 100644 --- a/files/zh-cn/orphaned/web/css/radial-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/radial-gradient()/index.html @@ -1,14 +1,18 @@ --- title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() +slug: Web/CSS/gradient/radial-gradient() +translation_of: Web/CSS/gradient/radial-gradient() tags: - CSS - CSS Function + - CSS Images + - Function + - Graphics + - Layout - Reference - Web - gradient -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient --- <p>{{CSSRef}}</p> diff --git a/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html index 405cb3f15f..c4dd9fc55d 100644 --- a/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html @@ -1,8 +1,18 @@ --- -title: repeating-linear-gradient -slug: orphaned/Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient() +translation_of: Web/CSS/gradient/repeating-linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-linear-gradient --- <div>{{CSSRef}}</div> diff --git a/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html index bcbbb20421..8ca073bbd8 100644 --- a/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html @@ -1,8 +1,18 @@ --- title: repeating-radial-gradient() -slug: orphaned/Web/CSS/repeating-radial-gradient() -translation_of: Web/CSS/repeating-radial-gradient() -original_slug: Web/CSS/repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient() +translation_of: Web/CSS/gradient/repeating-radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-radial-gradient --- <div>{{CSSRef}}</div> diff --git a/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html b/files/zh-cn/web/css/transform-function/translatex()/index.html index 6dfb96744e..c800a6c7eb 100644 --- a/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html +++ b/files/zh-cn/web/css/transform-function/translatex()/index.html @@ -1,12 +1,14 @@ --- title: translateX() -slug: orphaned/Web/CSS/transform-function/translateX +slug: Web/CSS/transform-function/translateX() +translation_of: Web/CSS/transform-function/translateX() tags: - - CSS函数 - - CSS变形属性 - - 参考 -translation_of: Web/CSS/transform-function/translateX -original_slug: Web/CSS/transform-function/translateX + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +browser-compat: css.types.transform-function.translateX --- <div>{{CSSRef}}</div> diff --git a/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/zh-cn/web/events/creating_and_triggering_events/index.html index dbc0f65c1f..686d6471af 100644 --- a/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ b/files/zh-cn/web/events/creating_and_triggering_events/index.html @@ -1,13 +1,14 @@ --- title: 创建和触发 events -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +slug: Web/Events/Creating_and_triggering_events +translation_of: Web/Events/Creating_and_triggering_events tags: - Advanced - DOM - Guide + - JavaScript + - NeedsContent - events -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events --- <p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>，而不是浏览器本身触发的事件。</p> diff --git a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html b/files/zh-cn/web/events/detecting_device_orientation/index.html index ac781aa185..ba00972351 100644 --- a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html +++ b/files/zh-cn/web/events/detecting_device_orientation/index.html @@ -1,17 +1,15 @@ --- title: 检测设备方向 -slug: orphaned/Web/API/Detecting_device_orientation +slug: Web/Events/Detecting_device_orientation +translation_of: Web/Events/Detecting_device_orientation tags: - - Detecting - - Detecting device orientation + - API - Device Orientation + - Intermediate + - Mobile - Motion - - 参考 - - 方向 - - 移动设备 - - 设备方向 -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation + - Orientation + - Reference --- <p>{{SeeCompatTable}}</p> diff --git a/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html b/files/zh-cn/web/events/mutation_events/index.html index 732cb7614b..732cb7614b 100644 --- a/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html +++ b/files/zh-cn/web/events/mutation_events/index.html diff --git a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html index b3c1f357a0..97e52cd168 100644 --- a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html +++ b/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html @@ -1,8 +1,15 @@ --- title: Orientation 和 motion 数据解释 -slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained -original_slug: Web/Guide/Events/Orientation_and_motion_data_explained +slug: Web/Events/Orientation_and_motion_data_explained +translation_of: Web/Events/Orientation_and_motion_data_explained +tags: + - Intermediate + - Mobile + - Motion + - NeedsContent + - Orientation + - páginas_a_traducir + - rotation --- <p>{{ Draft() }}</p> <h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2> diff --git a/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/zh-cn/web/guide/html/constraint_validation/index.html index c5a617d757..e9980168c7 100644 --- a/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html +++ b/files/zh-cn/web/guide/html/constraint_validation/index.html @@ -1,8 +1,13 @@ --- title: 约束验证 -slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: Web/Guide/HTML/HTML5/Constraint_validation +slug: Web/Guide/HTML/Constraint_validation +translation_of: Web/Guide/HTML/Constraint_validation +tags: + - CSS + - Guide + - HTML5 + - NeedsContent + - Selectors --- <p>创建web表单始终是一个复杂的任务. 仅仅组装表单是容易的，但是检查每一个字段的值是否有效并且一致是一件更加困难的事情，而向用户指明错误可能会令人头痛。<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> 引入了表单相关的一些新的机制：为{{ HTMLElement("input") }}元素和强制校验增加了一些新的语义类型，使得在客户端检查表单内容的工作变得容易。基本上，在填写字段时，通常这些约束都会被检查，而不需要额外的JavaScript代码进行校验； 对于更复杂的约束条件的校验可以尝试使用 HTML5 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">Constraint Validation API</a>.</p> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@iterator/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/@@iterator/index.html index 9a93339548..ea20d6b87e 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@iterator/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/@@iterator/index.html @@ -1,15 +1,16 @@ --- title: Map.prototype[@@iterator]() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@iterator +slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator +translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator tags: - ECMAScript 2015 - Iterator - JavaScript - Map - Method + - Prototype - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator +browser-compat: javascript.builtins.Map.@@iterator --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@species/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/@@species/index.html index c451e94285..f83042c356 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@species/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/@@species/index.html @@ -1,8 +1,13 @@ --- title: get Map[@@species] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@species +slug: Web/JavaScript/Reference/Global_Objects/Map/@@species translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Property +browser-compat: javascript.builtins.Map.@@species --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/@@tostringtag/index.html index f592aedbf4..cdc56ab916 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/@@tostringtag/index.html @@ -1,8 +1,15 @@ --- title: Map.prototype[@@toStringTag] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag +slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Property + - Prototype + - Reference +browser-compat: javascript.builtins.Map.@@toStringTag --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/clear/index.html index b23ce95ce2..799c948b22 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/clear/index.html @@ -1,12 +1,15 @@ --- title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear +slug: Web/JavaScript/Reference/Global_Objects/Map/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear tags: - ECMAScript 2015 - JavaScript - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Map.clear --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/delete/index.html index 5b4d1772fd..2d7bd693ff 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/delete/index.html @@ -1,14 +1,15 @@ --- title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete +slug: Web/JavaScript/Reference/Global_Objects/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete tags: - ECMAScript 2015 - JavaScript - Map - Method - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete + - Reference +browser-compat: javascript.builtins.Map.delete --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/entries/index.html index 578ddb51ee..0887bfa854 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/entries/index.html @@ -1,10 +1,15 @@ --- title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries +slug: Web/JavaScript/Reference/Global_Objects/Map/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries tags: + - ECMAScript 2015 + - Iterator + - JavaScript - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries + - Method + - Prototype +browser-compat: javascript.builtins.Map.entries --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/foreach/index.html index b15bd716d9..2cf9146f72 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/foreach/index.html @@ -1,6 +1,7 @@ --- title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach +slug: Web/JavaScript/Reference/Global_Objects/Map/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach tags: - ECMAScript 2015 - JavaScript @@ -8,8 +9,7 @@ tags: - Method - Prototype - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach +browser-compat: javascript.builtins.Map.forEach --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/get/index.html index e9f46c82c5..6a8a1d771c 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/get/index.html @@ -1,15 +1,15 @@ --- title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get +slug: Web/JavaScript/Reference/Global_Objects/Map/get +translation_of: Web/JavaScript/Reference/Global_Objects/Map/get tags: - ECMAScript 2015 - JavaScript - Map - Method - Prototype - - 方法 -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get + - Reference +browser-compat: javascript.builtins.Map.get --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/has/index.html index b71c051a98..05ebad0ea0 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/has/index.html @@ -1,14 +1,15 @@ --- title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has +slug: Web/JavaScript/Reference/Global_Objects/Map/has +translation_of: Web/JavaScript/Reference/Global_Objects/Map/has tags: - ECMAScript 2015 - JavaScript - Map - Method + - Prototype - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has +browser-compat: javascript.builtins.Map.has --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/index.html index d9b95fd745..a8afeac9c2 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/index.html @@ -1,12 +1,15 @@ --- title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map +slug: Web/JavaScript/Reference/Global_Objects/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map tags: - - ECMAScript6 + - Class + - ECMAScript 2015 - JavaScript - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map + - Reference + - Polyfill +browser-compat: javascript.builtins.Map --- <div> <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/keys/index.html index 057d5ee897..8ded2f526a 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/keys/index.html @@ -1,16 +1,15 @@ --- title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys +slug: Web/JavaScript/Reference/Global_Objects/Map/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys tags: - - ECMAScript6 + - ECMAScript 2015 - Iterator - JavaScript - Map - Method - Prototype - - 方法 -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys +browser-compat: javascript.builtins.Map.keys --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/map/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/map/index.html index 974e3a73b0..9e83f030bc 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/map/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/map/index.html @@ -1,8 +1,14 @@ --- title: Map() 构造函数 -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map +slug: Web/JavaScript/Reference/Global_Objects/Map/Map translation_of: Web/JavaScript/Reference/Global_Objects/Map/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map/Map +tags: + - Constructor + - JavaScript + - Map + - Reference + - Polyfill +browser-compat: javascript.builtins.Map.Map --- <div>{{JSRef}}</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/set/index.html index 9e7ad91ba5..ae2ff00036 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/set/index.html @@ -1,15 +1,15 @@ --- title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set +slug: Web/JavaScript/Reference/Global_Objects/Map/set +translation_of: Web/JavaScript/Reference/Global_Objects/Map/set tags: - - ECMAScript6 + - ECMAScript 2015 - JavaScript - Map - Method - Prototype - - 方法 -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set + - Reference +browser-compat: javascript.builtins.Map.set --- <p id="sect1">{{JSRef}}</p> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/size/index.html index 585d04f70a..37a0aa484e 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/size/index.html @@ -1,13 +1,13 @@ --- title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size +slug: Web/JavaScript/Reference/Global_Objects/Map/size +translation_of: Web/JavaScript/Reference/Global_Objects/Map/size tags: - ECMAScript 2015 - JavaScript - Map - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size +browser-compat: javascript.builtins.Map.size --- <div>{{JSRef}}<br> </div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/zh-cn/web/javascript/reference/global_objects/map/values/index.html index 29fad63c96..933b61c0bc 100644 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/map/values/index.html @@ -1,8 +1,15 @@ --- title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values +slug: Web/JavaScript/Reference/Global_Objects/Map/values translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Map + - Method + - Prototype +browser-compat: javascript.builtins.Map.values --- <div><code><strong>values()</strong></code> 方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。</div> |