mozilla

Revision 43360 of HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 43360
  • Created:
  • Creator: Dwchiang
  • Is current revision? No
  • Comment 95 words added, 193 words removed

Revision Content

HTML5 是 HTML 標準中的最新進化版本。在 HTML5 規格還未最後拍板定案之前,Mozilla 以及其他瀏覽器開發商已經著手實現其中的部分功能。本文所列的連結網址與相關內容,是 Mozilla  Gecko 解析引擎已經支援的部份,Firefox許多其他產品都使用 Gecko 解析引擎。

(這裡是 另一篇 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 對於 Web 表單的改進項目:限制條件與驗證 API、多個新增的屬性、新增多個值供 {{ HTMLElement("input") }} 的 {{ htmlattrxref("type", "input") }} 屬性使用,並且新增 {{ HTMLElement("output") }} 元素。
Sections 和 outlines {{ gecko_minversion_inline("2.0") }}
HTML5 對於大綱與分段的支援元素包含有: {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。
元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}
元素 mark 被用在標註特別相關的重點文字。
元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ 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 文字(text) API {{ gecko_minversion_inline("1.9.1") }}
{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。

Web application features

Offline resources in Firefox {{ gecko_minversion_inline("1.9.1") }}
Firefox fully supports the HTML5 offline resource specification.
Online and offline events {{ gecko_minversion_inline("1.9") }}
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
WHATWG client-side session and persistent storage (aka DOM Storage) {{ gecko_minversion_inline("1.8.1") }}
Client-side session and persistent storage allows web applications to store structured data on the client side.
The contentEditable attribute, transform your website to a wiki !{{ gecko_minversion_inline("1.9.1") }}
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
Using files from web applications {{ gecko_minversion_inline("1.9.2") }}
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the {{ HTMLElement("input") }} of type file HTML element's new multiple attribute.

DOM features

getElementsByClassName {{ fx_minversion_inline("3") }}
The getElementsByClassName methods on Document and Element nodes are supported. These methods allow finding elements with a given classes or a given list of classes.
Drag and drop {{ fx_minversion_inline("3") }}
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML {{ fx_minversion_inline("3") }}
The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers {{ fx_minversion_inline("3") }}
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.

HTML parser

Gecko's HTML5-compliant parser—which turns the bytes of an HTML document into a DOM—has been enabled by default as of May 2010. (Note that the version of the HTML5 parser that was shipped in Gecko 1.9.2 / Firefox 3.6 is rather buggy and not recommended for actual use.) {{ fx_minversion_inline("4") }}

Additional changes

  • localName and namespaceURI in HTML documents now behave like they do in XML documents: localName returns in lower case and namespaceURI for HTML elements is "http://www.w3.org/1999/xhtml" {{ fx_minversion_inline("3") }}
  • When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new hashchange event is sent to the page. See window.onhashchange for more information. {{ fx_minversion_inline("3") }}
  • Support for element.classList to allow easier handling of the class attribute. {{ fx_minversion_inline("3") }}
  • document readiness event document.onreadystatechange {{ fx_minversion_inline("4") }} and document.readyState {{ fx_minversion_inline("3") }} property are supported.
  • Colors in presentation attributes are interpreted according to HTML5. {{ fx_minversion_inline("4") }}

Technologies often called part of HTML5 that aren't

See Also

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

Revision Source

<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>都使用 Gecko 解析引擎。</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="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>HTML5 簡介</strong></a></dt> <dd>這篇文章介紹如何在你的網頁設計或 Web 應用程式中使用 HTML5。</dd>
</dl>
<h2>HTML5 元素</h2>
<dl> <dt><a href="/en/Using_HTML5_audio_and_video" 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/Forms_in_HTML" title="en/HTML/HTML5/Forms in HTML5">HTML5 表單</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>簡單介紹 HTML5 對於 Web 表單的改進項目:限制條件與驗證 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">Sections 和 outlines</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>HTML5 對於大綱與分段的支援元素包含有: {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。</dd> <dt>元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}</dt> <dd>元素 mark 被用在標註特別相關的重點文字。</dd> <dt>元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ 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="/en/Canvas_tutorial" title="https://developer.mozilla.org/en/Canvas_tutorial">Canvas 導覽 </a>{{ gecko_minversion_inline("1.8.1") }}</dt> <dd> 學習如何使用新的 <code>{{ HTMLElement("canvas") }}</code> 元素,以及如何在 Firefox 中繪製圖表與其他物件。</dd> <dt style="text-align: justify;"><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">給 <code>&lt;canvas&gt;</code> 元素的 HTML5 文字(text) API</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd style="text-align: justify;">{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。</dd>
</dl>
<h2>Web application features</h2>
<dl> <dt><a href="/en/Using_Application_Cache" title="en/Offline_resources_in_Firefox">Offline resources in Firefox</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>Firefox fully supports the HTML5 offline resource specification.</dd> <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a> {{ gecko_minversion_inline("1.9") }}</dt> <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">The contentEditable attribute, transform your website to a wiki !</a>{{ gecko_minversion_inline("1.9.1") }}</dt> <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> of <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> HTML element's new <a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute.</dd>
</dl>
<h2>DOM features</h2>
<dl> <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline("3") }}</dt> <dd>The getElementsByClassName methods on Document and Element nodes are supported. These methods allow finding elements with a given classes or a given list of classes.</dd> <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and drop</a> {{ fx_minversion_inline("3") }}</dt> <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a> {{ fx_minversion_inline("3") }}</dt> <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handlers</a> {{ fx_minversion_inline("3") }}</dt> <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
</dl>
<h2>HTML parser</h2>
<p>Gecko's <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">HTML5-compliant parser</a>—which turns the bytes of an HTML document into a DOM—has been enabled by default as of May 2010. (Note that the version of the HTML5 parser that was shipped in Gecko 1.9.2 / Firefox 3.6 is rather buggy and not recommended for actual use.) {{ fx_minversion_inline("4") }}</p>
<h2>Additional changes</h2>
<ul> <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XML documents: <code>localName</code> returns in lower case and <code>namespaceURI</code> for HTML elements is <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>When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new <code>hashchange</code> event is sent to the page. See <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> for more information. {{ fx_minversion_inline("3") }}</li> <li>Support for <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> to allow easier handling of the class attribute. {{ fx_minversion_inline("3") }}</li> <li>document readiness event <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline("4") }} and <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline("3") }} property are supported.</li> <li>Colors in presentation attributes are interpreted according to HTML5. {{ fx_minversion_inline("4") }}</li>
</ul>
<h2>Technologies often called part of HTML5 that aren't</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/DOM/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><a href="/en/WebSockets" title="https://developer.mozilla.org/en/WebSockets">Web Sockets</a></li> <li>Faster JavaScript</li>
</ul>
<h2>See Also</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( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5"} ) }}</p>
</div>
Revert to this revision