diff options
Diffstat (limited to 'files/zh-cn/orphaned/web/guide')
14 files changed, 0 insertions, 2093 deletions
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/creating_and_triggering_events/index.html b/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index dbc0f65c1f..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 创建和触发 events -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - events -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>，而不是浏览器本身触发的事件。</p> - -<h2 id="创建自定义事件">创建自定义事件</h2> - -<p>Events 可以使用 <a href="/zh/docs/Web/API/Event"><code>Event</code></a> 构造函数创建如下：</p> - -<pre class="brush: js">var event = new Event('build'); - -// Listen for the event. -elem.addEventListener('build', function (e) { ... }, false); - -// Dispatch the event. -elem.dispatchEvent(event);</pre> - -<p>上述代码使用了 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 方法。</p> - -<p><span style="line-height: 1.5;">绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 </span><a href="#The_old-fashioned_way" style="line-height: 1.5;" title="#过时的方式">过时的方式</a><span style="line-height: 1.5;"> 一节。</span></p> - -<h3 id="添加自定义数据_–_CustomEvent">添加自定义数据 – CustomEvent()</h3> - -<p>要向事件对象添加更多数据，可以使用 <a href="/zh-CN/docs/Web/API/CustomEvent">CustomEvent</a> 接口，detail 属性可用于传递自定义数据。<br> - 例如，event 可以创建如下：</p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p><span style="line-height: 1.5;">下面的代码允许你在事件监听器中访问更多的数据：</span></p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="过时的方式">过时的方式</h3> - -<p>早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：</p> - -<pre class="brush: js">// Create the event. -var event = document.createEvent('Event'); - -// Define that the event name is 'build'. -event.initEvent('build', true, true); - -// Listen for the event. -document.addEventListener('build', function (e) { - // e.target matches document from above -}, false); - -// target can be any Element or other EventTarget. -document.dispatchEvent(event); -</pre> - -<h3 id="事件冒泡">事件冒泡</h3> - -<p>通常需要从子元素触发事件，并让祖先捕获它：</p> - -<pre class="brush: html"><form> - <textarea></textarea> -</form></pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property -const eventAwesome = new CustomEvent('awesome', { - bubbles: true, - detail: { text: () => textarea.value } -}); - -// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method -form.addEventListener('awesome', e => console.log(e.detail.text())); - -// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point -textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));</pre> - -<h3 id="动态创建和派发事件">动态创建和派发事件</h3> - -<p>元素可以侦听尚未创建的事件：</p> - -<pre class="brush: html"><code><form> - <textarea></textarea> -</form></code></pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -form.addEventListener('awesome', e => console.log(e.detail.text())); - -textarea.addEventListener('input', function() { - // Create and dispatch/trigger an event on the fly - // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element - this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) -});</pre> - - - -<h2 id="触发内置事件">触发内置事件</h2> - -<p>下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。<a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">参见这个动态示例</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var cancelled = !cb.dispatchEvent(event); - if (cancelled) { - // A handler called preventDefault. - alert("cancelled"); - } else { - // None of the handlers called preventDefault. - alert("not cancelled"); - } -} -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">参见</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> 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/mutation_events/index.html b/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html deleted file mode 100644 index 732cb7614b..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Mutation events -slug: orphaned/Web/Guide/Events/Mutation_events -translation_of: Web/Guide/Events/Mutation_events -original_slug: Web/Guide/Events/Mutation_events ---- -<p>{{deprecated_header()}}</p> - -<p><strong>Mutation 事件 </strong>为web页面提供一种机制或扩展，以便在DOM被改变时获得通知。<span style="background-color: #ffff00;">如果可能请用<a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>代替。</span></p> - -<h2 id="前言">前言</h2> - -<p id="Replacement.3A_mutation_observers">这个 mutation 事件在<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events 标准</a> 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a> 的</span>"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" <span id="to">)</span>. </p> - -<p><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>中。</p> - -<p>避免用mutation事件的实际原因是<strong>性能问题</strong>和<strong>跨浏览器支持</strong>。</p> - -<h3 id="性能">性能</h3> - -<p>为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害。</p> - -<p>性能好坏 <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">限制了文档拥有mutation事件监听</a>.</p> - -<h3 id="跨浏览器支持">跨浏览器支持</h3> - -<p>这些事件在不同的浏览器实现并不一致, 例如:</p> - -<ul> - <li>IE9之前的版本不支持mutation 事件而且在IE9版本中没有正确实现其中某些事件(<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">例如, DOMNodeInserted</a>)</li> - <li>WebKit 不支持 DOMAttrModified (见 <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> 和 <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li> - <li>"mutation name events", i.e. DOMElementNameChanged 和 DOMAttributeNameChanged 在Firefox中不被支持 (到 version 11), 可能其他浏览器也是这样.</li> - <li>...</li> -</ul> - -<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">documents browser support for mutation events</a>.</p> - -<h2 id="Mutation_事件列表">Mutation 事件列表</h2> - -<p>下面是所有 mutation 事件列表, <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a> 中定义的:</p> - -<ul> - <li><code>DOMAttrModified</code></li> - <li><code>DOMAttributeNameChanged</code></li> - <li><code>DOMCharacterDataModified</code></li> - <li><code>DOMElementNameChanged</code></li> - <li><code>DOMNodeInserted</code></li> - <li><code>DOMNodeInsertedIntoDocument</code></li> - <li><code>DOMNodeRemoved</code></li> - <li><code>DOMNodeRemovedFromDocument</code></li> - <li><code>DOMSubtreeModified</code></li> -</ul> - -<h2 id="使用">使用</h2> - -<p>你可以如下所示使用<a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a> 注册一个mutation 事件监听器:</p> - -<pre><code>element.addEventListener("DOMNodeInserted", function (ev) {</code> - // ... -<code>}, false);</code> -</pre> - -<p>事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">its definition in the specification</a>) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 <code>DOMAttributeNameChanged</code> and <code>DOMElementNameChanged</code>.</p> diff --git a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html deleted file mode 100644 index b3c1f357a0..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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 ---- -<p>{{ Draft() }}</p> -<h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2> -<p>当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。</p> -<div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.</p> -</div> -<h2 id="坐标系" style="line-height: 30px; font-size: 2.14285714285714rem;">坐标系</h2> -<p>坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。</p> -<h3 id="地球坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">地球坐标系</h3> -<p>地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。</p> -<ul> - <li>X轴沿着地平面，垂直于Y轴，向东为正，向西为负。</li> - <li>Y轴沿着地平面，向北(北极，不是磁场北)为正，向南为负。</li> - <li>Z轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。</li> -</ul> -<h3 id="设备坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">设备坐标系</h3> -<p>设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。</p> -<p>,<img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png"></p> -<ul> - <li>x轴沿着屏幕表面，向右为正，向左为负。</li> - <li>y轴沿着屏幕表面，向上为正，向下为负。</li> - <li>z轴垂直屏幕表面或键盘，远离屏幕的方向为正。</li> -</ul> -<div class="note"> - <span style="line-height: 1.5;">注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用</span><span style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">orientationchange事件。</span></div> -<h2 id="旋转(Rotation)" style="line-height: 30px; font-size: 2.14285714285714rem;">旋转(Rotation)</h2> -<p>旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。</p> -<h3 id="Alpha" style="line-height: 24px; font-size: 1.71428571428571rem;">Alpha</h3> -<p>围绕z轴旋转设备将使alpha角度值发生变化:</p> -<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png"></p> -<p><span style="line-height: 1.5;">alpha为</span><span style="line-height: 1.5;">0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。</span></p> -<h3 id="Beta" style="line-height: 24px; font-size: 1.71428571428571rem;">Beta</h3> -<p>围绕x轴旋转，也就是前后旋转，将使beta值发生改变:</p> -<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> -<p><span style="line-height: 1.5;">当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到</span><span style="line-height: 1.5;">180°，向后翻转递减到-180°。</span></p> -<h3 id="Gamma" style="line-height: 24px; font-size: 1.71428571428571rem;">Gamma</h3> -<p><span style="line-height: 1.5;">当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:</span></p> -<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> -<p><span style="line-height: 1.5;">gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到</span><span style="line-height: 1.5;">90° ，向左翻转时，递减到-90°。</span></p> 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/constraint_validation/index.html b/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index c5a617d757..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -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 ---- -<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> - -<div class="note"><strong>Note:</strong> HTML5 Constraint validation doesn't remove the need for validation on the <em>server side</em>. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.</div> - -<h2 id="固有和基本的约束">固有和基本的约束</h2> - -<p>在 HTML5中，声明基本的约束有两种方式：</p> - -<ul> - <li>给 {{ HTMLElement("input") }} 元素的 {{ htmlattrxref("type", "input") }} 特性选择最合适的语义化的值，比如，选择 email 类型将会自动创建一个约束用于检查输入的值是否是一个有效的 e-mail 地址。</li> - <li>设置验证相关的特性值，允许用一种简单的方式来描述基本的约束，而不必要使用 JavaScript。</li> -</ul> - -<h3 id="语义的_input_类型">语义的 input 类型</h3> - -<p> {{ htmlattrxref("type", "input") }} 特性中固有约束：</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Input 类型</th> - <th scope="col">约束描述</th> - <th scope="col">Associated violation</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>值必须是绝对的URL, 即，是下面的某一种: - <ul> - <li>a valid URI (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>a valid IRI, without a query component (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>a valid IRI, with a query component without any unescaped non-ASCII character (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>a valid IRI, and the character set for the document is UTF-8 or UTF-16 (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>The value must follow the <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a> production: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> where: - <ul> - <li><code>atext</code> is defined in <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, i.e., a US-ASCII letter (<span style="font-family: courier new;">A</span> to <span style="font-family: courier new;">Z</span> and <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), a digit (<span style="font-family: courier new;">0</span> to <span style="font-family: courier new;">9</span>) or one of the following<span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~ </span>special character,</li> - <li><code>ldh-str</code> is defined in <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, i.e., US-ASCII letters, mixed with digits and <span style="font-family: courier new;">-</span> grouped in words separated by a dot (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Note:</strong> if the {{ htmlattrxref("multiple", "input") }} attribute is set, several e-mail addresses can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the <strong>Type mismatch </strong>constraint violation is triggered.</div> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - </tbody> -</table> - -<p>Note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. </p> - -<h3 id="验证相关的特性（Attribute）">验证相关的特性（Attribute）</h3> - -<p>下列特性用于描述基本的约束：</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">特性</th> - <th scope="col">支持该特性的 Input 类型</th> - <th scope="col">可接受的值</th> - <th scope="col">约束描述</th> - <th scope="col">Associated violation</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td>A <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">JavaScript regular expression</a> (compiled with the <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code title="">global</code>, <code title="">ignoreCase</code>, and <code title="">multiline</code> flags <em>disabled)</em></td> - <td>输入的值必须匹配设置的模式。</td> - <td><strong>Pattern mismatch</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>A valid number</td> - <td rowspan="3">输入的值必须大于等于设置的最小值。</td> - <td rowspan="3"><strong>Underflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>A valid date</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>A valid date and time</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>A valid number</td> - <td rowspan="3">输入的值必须小于等于设置的最大值。</td> - <td rowspan="3"><strong>Overflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>A valid date</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>A valid date and time</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elements</td> - <td><em>none</em> as it is a Boolean attribute: its presence means <em>true</em>, its absence means <em>false</em></td> - <td>There must be a value (if set).</td> - <td><strong>Missing</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>An integer number of days</td> - <td rowspan="5">Unless the step is set to the <span style="font-family: courier new;">any</span> literal, the value must be <strong>min</strong> + an integral multiple of the step.</td> - <td rowspan="5"><strong>Step mismatch </strong>constraint violation</td> - </tr> - <tr> - <td>month</td> - <td>An integer number of months</td> - </tr> - <tr> - <td>week</td> - <td>An integer number of weeks</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>An integer number of seconds</td> - </tr> - <tr> - <td>range, number</td> - <td>An integer</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; also on the {{ HTMLElement("textarea") }} element</td> - <td>An integer length</td> - <td>The number of characters (code points) must not exceed the value of the attribute.</td> - <td><strong>Too long</strong> constraint violation</td> - </tr> - </tbody> -</table> - -<h2 id="Constraint_validation_process"><span class="author-g-by4vjwmiwjiydpj7">Constraint validation process</span></h2> - -<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p> - -<ul> - <li>By a call to the checkValidity() method of a form-related <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> interface (<code><a href="/en-US/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> or <code><a href="/en-US/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. (This is typically done by the user-agent when determining which of the <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.)</li> - <li>By a call to the checkValidity() function on the <code><a href="/en-US/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface, which is called <em>statically validating the constraints</em>.</li> - <li>By submitting the form itself, which is called <em>interactively validating the constraints</em>.</li> -</ul> - -<div class="note"><strong>Note: </strong> - -<ul> - <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li> - <li>Calling the send() method on the <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints.</li> -</ul> -</div> - -<h2 id="Complex_constraints_using_HTML5_Constraint_API"><span class="author-g-by4vjwmiwjiydpj7">Complex constraints using HTML5 Constraint API</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</span></p> - -<h3 id="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3> - -<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> - -<div class="note"> -<p><strong>Note: </strong>This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. </p> -</div> - -<p><span style="line-height: 1.5;">As an example, we will add a script checking the constraint validation for this simple form:</span></p> - -<pre class="brush: html notranslate"><form> - <label for="ZIP">ZIP : </label> - <input type="text" id="ZIP"> - <label for="Country">Country : </label> - <select id="Country"> - <option value="ch">Switzerland</option> - <option value="fr">France</option> - <option value="de">Germany</option> - <option value="nl">The Netherlands</option> - </select> - <input type="submit" value="Validate"> -</form></pre> - -<p>This displays the following form: </p> - -<p><label>Postal Code: </label><input> <label>Country: </label><select><option value="ch">Switzerland</option><option value="fr">France</option><option value="de">Germany</option><option value="nl">The Netherlands</option></select></p> - -<p>First, we write a function checking the constraint itself:</p> - -<pre class="brush: js notranslate">function checkZIP() { - // For each country, defines the pattern that the ZIP has to follow - var constraints = { - ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ], - fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ], - de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ], - nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', - "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ] - }; - - // Read the country id - var country = document.getElementById("Country").value; - - // Get the NPA field - var ZIPField = document.getElementById("ZIP"); - - // Build the constraint checker - var constraint = new RegExp(constraints[country][0], ""); - console.log(constraint); - - - // Check it! - if (constraint.test(ZIPField.value)) { - // The ZIP follows the constraint, we use the ConstraintAPI to tell it - ZIPField.setCustomValidity(""); - } - else { - // The ZIP doesn't follow the constraint, we use the ConstraintAPI to - // give a message about the format required for this country - ZIPField.setCustomValidity(constraints[country][1]); - } -} -</pre> - -<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation. </p> - -<h3 id="Limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3> - -<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.</p> - -<p>Here is the HTML part:</p> - -<pre class="brush: html notranslate"><label for="FS">Select a file smaller than 75 kB : </label> -<input type="file" id="FS"></pre> - -<p>This displays:</p> - -<p><label>Select a file smaller than 75 kB : </label> <input></p> - - - -<p>The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> - -<pre class="brush: js notranslate">function checkFileSize() { - var FS = document.getElementById("FS"); - var files = FS.files; - - // If there is (at least) one file selected - if (files.length > 0) { - if (files[0].size > 75 * 1024) { // Check the constraint - FS.setCustomValidity("The selected file must not be larger than 75 kB"); - return; - } - } - // No custom constraint violation - FS.setCustomValidity(""); -}</pre> - - - -<p>Finally we hook the method with the correct event:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p> - -<h2 id="Visual_styling_of_constraint_validation"><span class="author-g-by4vjwmiwjiydpj7">Visual styling of constraint validation</span></h2> - -<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p> - -<h3 id="Controlling_the_look_of_elements">Controlling the look of elements</h3> - -<p>The look of elements can be controlled via CSS pseudo-classes.</p> - -<h4 id="required_and_optional_CSS_pseudo-classes">:required and :optional CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> and <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p> - -<h4 id="-moz-placeholder_CSS_pseudo-class">:-moz-placeholder CSS pseudo-class</h4> - -<p>See <a href="/en-US/docs/Web/CSS/:-moz-placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">:-moz-placeholder</a>.</p> - -<h4 id="valid_invalid_CSS_pseudo-classes">:valid :invalid CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> and <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> - -<h4 id="Default_styles">Default styles</h4> - -<h3 id="Controlling_the_text_of_constraints_violation">Controlling the text of constraints violation</h3> - -<h4 id="The_x-moz-errormessage_attribute">The x-moz-errormessage attribute</h4> - -<p>The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.</p> - -<div class="note"> -<p style="margin-left: 40px;">Note: This extension is non-standard.</p> -</div> - -<h4 id="Constraint_APIs_element.setCustomValidity">Constraint API's element.setCustomValidity()</h4> - -<p>The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.</p> - -<h4 id="Constraint_APIs_ValidityState_object"><span class="author-g-by4vjwmiwjiydpj7">Constraint API's ValidityState object</span></h4> - -<p>The DOM <a href="/en-US/docs/Web/API/ValidityState" title="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusion"><span class="author-g-by4vjwmiwjiydpj7">Conclusion</span></h2> 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> |