HTML5

  • 版本網址代稱: HTML/HTML5
  • 版本標題: HTML5
  • 版本 ID: 43362
  • 建立日期:
  • 建立者: Dwchiang
  • Is current revision?
  • 回應 2 words added, 2 words removed

版本內容

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 應用程式的新功能

Firefox 中的離線資源 {{ gecko_minversion_inline("1.9.1") }}
Firefox 完整支援 HTML5 離線資源規格。
上線與離線事件 (Online and offline events) {{ gecko_minversion_inline("1.9") }}
Firefox 3 支援 WHATWG 的上線與離線事件,這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線,也可以偵測何時建立或結束這個網路連線。
WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存) {{ gecko_minversion_inline("1.8.1") }}
用戶端 session 與持續性儲存功能,讓 web 應用程式可以在用戶端儲存結構性資料。
屬性 contentEditable ,將你的網站變成 wiki ! {{ gecko_minversion_inline("1.9.1") }}
HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。
在 web 應用程式中存取檔案 {{ gecko_minversion_inline("1.9.2") }}
Gecko 已經支援新的 HTML5 檔案 API,讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 {{ HTMLElement("input") }}  type file 的新屬性 multiple 來選取多個檔案。

DOM 新功能

getElementsByClassName {{ fx_minversion_inline("3") }}
支援 Document 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。
拖曳功能 (Drag and drop) {{ fx_minversion_inline("3") }}
HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。
HTML Focus 管理 {{ fx_minversion_inline("3") }}
支援新的 HTML5 屬性:activeElementhasFocus
Web-based 協定處理器 {{ fx_minversion_inline("3") }}
你現在可以使用 navigator.registerProtocolHandler() 方法將 web 應用程式註冊成協定處理器 (protocol handlers)。

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", "zh_tw": "zh_tw/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>都使用 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 應用程式的新功能</h2>
<dl> <dt><a href="/en/Using_Application_Cache" 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">上線與離線事件 (Online and offline events)</a> {{ gecko_minversion_inline("1.9") }}</dt> <dd>Firefox 3 支援 WHATWG 的上線與離線事件,這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線,也可以偵測何時建立或結束這個網路連線。</dd> <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存)</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd>用戶端 session 與持續性儲存功能,讓 web 應用程式可以在用戶端儲存結構性資料。</dd> <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">屬性 contentEditable ,將你的網站變成 wiki !</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。</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 檔案 API,讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 <span style="font-family: monospace;">{{ HTMLElement("input") }}</span>  <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> 的新屬性 <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 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。</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>HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。</dd> <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">HTML Focus 管理</a> {{ fx_minversion_inline("3") }}</dt> <dd>支援新的 HTML5 屬性:<code>activeElement</code> 與 <code>hasFocus</code> 。</dd> <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based 協定處理器</a> {{ fx_minversion_inline("3") }}</dt> <dd>你現在可以使用 <code>navigator.registerProtocolHandler() 方法</code>將 web 應用程式註冊成協定處理器 (protocol handlers)。</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", "zh_tw": "zh_tw/HTML/HTML5"} ) }}</p>
</div>
Revert to this revision