HTML5

  • 版本网址缩略名: HTML/HTML5
  • 版本标题: HTML5
  • 版本 id: 264490
  • 创建于:
  • 创建者: leegorous
  • 是否是当前版本?
  • 评论 one or more formatting changes

修订内容

HTML5 是 HTML 标准中的最新进化版。在 HTML5 规范依然在进化途中并未有最终定案的时候,Mozilla 和其它浏览器开发商已经着手实现部分功能。下面的链接的内容是 Mozilla  Gecko 引擎已经支持的部分,在 Firefox许多其它产品中可用。

(这是 另一个 HTML5 文章分类目录。)

HTML5 入门

HTML5 入门
讲述如何在你的网页设计或者 web 应用中使用 HTML5 技术。

HTML5 元素

使用 audio 和 video {{ gecko_minversion_inline("1.9.2") }}
Firefox 3.5 增加了对 HTML5 的 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 元素的支持。
HTML5 中的表单 {{ gecko_minversion_inline("2.0") }}
简单介绍 HTML5 中对表单的改进:约束-验证 API,一系列新属性,{{ HTMLElement("input") }} 元素新的 {{ htmlattrxref("type", "input") }} 值以及新的 {{ HTMLElement("output") }} 元素。
HTML5 的 Sections 和 outlines {{ gecko_minversion_inline("2.0") }}
简单介绍新的用于概述和分段的元素:{{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
The {{ HTMLElement("mark") }} element {{ gecko_minversion_inline("2.0") }}
The mark element is used to highlight text of special relevance.
The{{ HTMLElement("figure") }} and {{ HTMLElement("figcaption") }} elements {{ gecko_minversion_inline("2.0") }}
These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.

Canvas 支持

使用 Canvas 绘制图像 {{ gecko_minversion_inline("1.8.1") }}
 认识新的 {{ HTMLElement("canvas") }} 元素,了解如何在 Firefox 中使用它来绘制图形图像之类的东西。
<canvas> 元素的 HTML5 文本 API {{ gecko_minversion_inline("1.9.1") }}
{{ HTMLElement("canvas") }} 元素现已提供对 HTML5 文本 API 的支持。

Web 应用的新特性

Firefox 中的离线资源 {{ gecko_minversion_inline("1.9.1") }}
Firefox 全面支持 HTML5 的离线资源规范。
上线与离线事件 {{ gecko_minversion_inline("1.9") }}
Firefox 3 支持 WHATWG 上线与离线事件,在于让应用和扩展探测当前是否有可用互联网连接以及监听上线与离线事件。
WHATWG 客户端 session 和本地持久化 (亦即 DOM 存储) {{ gecko_minversion_inline("1.8.1") }}
客户端 session 和本地持久化允许 web 应用程序在客户端存储结构性数据。
web 应用程序中使用文件 {{ gecko_minversion_inline("1.9.2") }}
Gecko 已经添加了对新的 HTML5 File API 的支持,让 web 应用可以访问由用户选定的本地文件。还包括通过 type 值为 file{{ HTMLElement("input") }} 元素的新 multiple 属性实现对多个文件选择的支持。

DOM 特性

getElementsByClassName {{ fx_minversion_inline("3") }}
Document 和 元素结点对象支持 getElementsByClassName 方法。有了它,就可以通过 class 或者一组 class 来查找元素。
拖拽 {{ fx_minversion_inline("3") }}
HTML5 的拖拽 API 支持页面内甚至跨站点拖拽对象。同时,也为扩展和基于 Mozilla 的应用提供了一些更简单的 API。
HTML 的焦点管理 {{ fx_minversion_inline("3") }}
支持新的 activeElementhasFocus 属性。
基于 web 协议的处理器 {{ fx_minversion_inline("3") }}
你可以用 navigator.registerProtocolHandler() 方法将 web 应用注册成为协议处理器。

HTML 解析器

兼容 HTML5 的 Gecko 解析器(将 HTML 文档转换成 DOM 对象)于 2010 年 5 月起默认启用。(需要注意已经发布的 Gecko 1.9.2 / Firefox 3.6 中的解析器版本是属于玩具级别的,不建议来真的。) {{ fx_minversion_inline("4") }}

其它

  • HTML 里的 localNamenamespaceURI 的行为跟 XML 里的一致:localName 以全小写形式返回,HTML 元素的 namespaceURI"http://www.w3.org/1999/xhtml"。 {{ fx_minversion_inline("3") }}
  • 当页面 URI 的片段标识(在“#”(井号)后面的字符部分)发生改变时,会触发一个新的 hashchange 事件。详见 window.onhashchange。 {{ fx_minversion_inline("3") }}
  • 支持 element.classList ,处理 class 属性更加便利了。 {{ fx_minversion_inline("3") }}
  • 支持 document.onreadystatechange {{ fx_minversion_inline("4") }} 和 document.readyState {{ fx_minversion_inline("3") }} 句柄,用于响应文档准备就绪事件。
  • 按 HTML5 的方式解析属性中的颜色表示。 {{ fx_minversion_inline("4") }}

某些被认为是 HTML5 组成部分的技术,其实它们不是

参见

{{ languages( { "en": "en/HTML/HTML5", "es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5"} ) }}

修订版来源

<p>HTML5 是 HTML 标准中的最新进化版。在 <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 规范</a>依然在进化途中并未有最终定案的时候,Mozilla 和其它浏览器开发商已经着手实现部分功能。下面的链接的内容是 Mozilla  <a href="/en/Gecko" title="en/Gecko">Gecko</a> 引擎已经支持的部分,在 <a class=" external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 和<a href="/En/List_of_Mozilla-Based_Applications" title="En/List of Mozilla-Based Applications">许多其它产品</a>中可用。</p>
<p>(这是 <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">另一个 HTML5 文章分类目录</a>。)</p>
<h2>HTML5 入门</h2>
<dl> <dt><a href="/cn/HTML/HTML5/Introduction_to_HTML5" title="cn/HTML/Introduction to HTML5"><strong>HTML5 入门</strong></a></dt> <dd>讲述如何在你的网页设计或者 web 应用中使用 HTML5 技术。</dd>
</dl><h2>HTML5 元素</h2>
<dl> <dt><a href="/En/Using_audio_and_video_in_Firefox" title="En/Using_audio_and_video_in_Firefox">使用 audio 和 video</a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Firefox 3.5 增加了对 HTML5 的 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 元素的支持。</dd> <dt><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">HTML5 中的表单</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>简单介绍 HTML5 中对表单的改进:约束-验证 API,一系列新属性,{{ HTMLElement("input") }} 元素新的 {{ htmlattrxref("type", "input") }} 值以及新的 {{ HTMLElement("output") }} 元素。</dd> <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">HTML5 的 Sections 和 outlines</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>简单介绍新的用于概述和分段的元素:{{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd> <dt>The {{ HTMLElement("mark") }} element {{ gecko_minversion_inline("2.0") }}</dt> <dd>The mark element is used to highlight text of special <em>relevance</em>.</dd> <dt>The{{ HTMLElement("figure") }} and {{ HTMLElement("figcaption") }} elements {{ gecko_minversion_inline("2.0") }}</dt> <dd>These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.</dd>
</dl>
<h3>Canvas 支持</h3>
<dl> <dt><a href="/cn/Canvas_tutorial" title="cn/Canvas_tutorial">使用 Canvas 绘制图像</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd> 认识新的 <code>{{ HTMLElement("canvas") }}</code> 元素,了解如何在 Firefox 中使用它来绘制图形图像之类的东西。</dd> <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas"><code>&lt;canvas&gt;</code> 元素的 HTML5 文本 API</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>{{ HTMLElement("canvas") }} 元素现已提供对 HTML5 文本 API 的支持。</dd>
</dl><h2>Web 应用的新特性</h2>
<dl> <dt><a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Firefox 中的离线资源</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>Firefox 全面支持 HTML5 的离线资源规范。</dd> <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">上线与离线事件</a> {{ gecko_minversion_inline("1.9") }}</dt> <dd>Firefox 3 支持 WHATWG 上线与离线事件,在于让应用和扩展探测当前是否有可用互联网连接以及监听上线与离线事件。</dd> <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG 客户端 session 和本地持久化 (亦即 DOM 存储)</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd>客户端 session 和本地持久化允许 web 应用程序在客户端存储结构性数据。</dd> <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">web 应用程序中使用文件</a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Gecko 已经添加了对新的 HTML5 File API 的支持,让 web 应用可以访问由用户选定的本地文件。还包括通过 <a href="/en/HTML/Element/Input#attr-type" title="en/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="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性实现对多个文件选择的支持。</dd>
</dl>
<h2>DOM 特性</h2>
<dl> <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline("3") }}</dt> <dd>Document 和 元素结点对象支持 getElementsByClassName 方法。有了它,就可以通过 class 或者一组 class 来查找元素。</dd> <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">拖拽</a> {{ fx_minversion_inline("3") }}</dt> <dd>HTML5 的拖拽 API 支持页面内甚至跨站点拖拽对象。同时,也为扩展和基于 Mozilla 的应用提供了一些更简单的 API。</dd> <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">HTML 的焦点管理</a> {{ fx_minversion_inline("3") }}</dt> <dd>支持新的 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">基于 web 协议的处理器</a> {{ fx_minversion_inline("3") }}</dt> <dd>你可以用 <code>navigator.registerProtocolHandler()</code> 方法将 web 应用注册成为协议处理器。</dd>
</dl>
<h2>HTML 解析器</h2>
<p>兼容 HTML5 的 Gecko 解析器(将 HTML 文档转换成 DOM 对象)于 2010 年 5 月起默认启用。(需要注意已经发布的 Gecko 1.9.2 / Firefox 3.6 中的解析器版本是属于玩具级别的,不建议来真的。) {{ fx_minversion_inline("4") }}</p>
<h2>其它</h2>
<ul> <li>HTML 里的 <code>localName</code> 和 <code>namespaceURI</code> 的行为跟 XML 里的一致:<code>localName</code> 以全小写形式返回,HTML 元素的 <code>namespaceURI</code> 是 <code>"<a class=" external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" target="_blank" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"。 </code>{{ fx_minversion_inline("3") }}</li> <li>当页面 URI 的片段标识(在“#”(井号)后面的字符部分)发生改变时,会触发一个新的 <code>hashchange</code> 事件。详见 <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a>。 {{ fx_minversion_inline("3") }}</li> <li>支持 <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> ,处理 class 属性更加便利了。 {{ fx_minversion_inline("3") }}</li> <li>支持 <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline("4") }} 和 <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline("3") }} 句柄,用于响应文档准备就绪事件。</li> <li>按 HTML5 的方式解析属性中的颜色表示。 {{ fx_minversion_inline("4") }}</li>
</ul>
<h2>某些被认为是 HTML5 组成部分的技术,其实它们不是</h2>
<ul> <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> <li><code><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> <li><code><a href="/En/DOM/Locating_DOM_elements_using_selectors" title="En/DOM/Locating DOM elements using selectors">querySelector(All)</a></code></li> <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> <li><a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="En/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> <li>CSS3</li> <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> <li><a href="/En/Using_web_workers" title="En/Using web workers">Web Workers</a></li> <li>Web Sockets</li> <li>Faster JavaScript</li>
</ul>
<h2>参见</h2>
<ul> <li><a href="../../../../en/Firefox_4_for_developers" rel="internal">Firefox 4 for developers</a></li> <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 for developers</a></li> <li><a href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 for developers</a></li> <li><a href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 for developers</a></li> <li><a href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 for developers</a></li> <li><a href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 for developers</a></li>
</ul>
<div class="noinclude">
<p>{{ languages( { "en": "en/HTML/HTML5", "es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5"} ) }}</p>
</div>
恢复到这个版本