[/url]
HTML5教程
HTML 5 簡(jiǎn)介
HTML5 是下一代的HTML。
什么是HTML5？
HTML5 將成為HTML、XHTML 以及HTML DOM 的新標(biāo)準(zhǔn)。
HTML 的上一個(gè)版本誕生于1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5 支持。
HTML5 是如何起步的？
HTML5 是W3C 與WHATWG 合作的結(jié)果。
編者注：W3C 指World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟。
編者注：WHATWG 指Web Hypertext Application Technology Working Group。
WHATWG 致力于web 表單和應(yīng)用程序，而W3C 專(zhuān)注于XHTML 2.0。在2006 年，雙
方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的HTML。
為HTML5 建立的一些規(guī)則：
• 新特性應(yīng)該基于HTML、CSS、DOM 以及JavaScript。
• 減少對(duì)外部插件的需求（比如Flash）
• 更優(yōu)秀的錯(cuò)誤處理
• 更多取代腳本的標(biāo)記
• HTML5 應(yīng)該獨(dú)立于設(shè)備
• 開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明
新特性
HTML5 中的一些有趣的新特性：
• 用于繪畫(huà)的canvas 元素
• 用于媒介回放的video 和audio 元素
• 對(duì)本地離線存儲(chǔ)的更好的支持
• 新的特殊內(nèi)容元素，比如article、footer、header、nav、section
• 新的表單控件，比如calendar、date、time、email、url、search
瀏覽器支持
最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer
9 將支持某些HTML5 特性。
HTML 5 視頻
許多時(shí)髦的網(wǎng)站都提供視頻。HTML5 提供了展示視頻的標(biāo)準(zhǔn)。
Web 上的視頻
直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)。
今天，大多數(shù)視頻是通過(guò)插件（比如Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣
的插件。
HTML5 規(guī)定了一種通過(guò)video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。
視頻格式
當(dāng)前，video 元素支持兩種視頻格式：
Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg X X X
MPEG 4 X X
Ogg = 帶有Thedora 視頻編碼和Vorbis 音頻編碼的Ogg 文件
MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件
如何工作
如需在HTML5 中顯示視頻，您所有需要的是：

control 屬性供添加播放、暫停和音量控件。
包含寬度和高度屬性也是不錯(cuò)的主意。
之間插入的內(nèi)容是供不支持video 元素的瀏覽器顯示的：
實(shí)例

上面的例子使用一個(gè)Ogg 文件，適用于Firefox、Opera 以及Chrome 瀏覽器。
要確保適用于Safari 瀏覽器，視頻文件必須是MPEG4 類(lèi)型。
video 元素允許多個(gè)source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第
一個(gè)可識(shí)別的格式：
實(shí)例

Internet Explorer
Internet Explorer 8 不支持video 元素。在IE 9 中，將提供對(duì)使用MPEG4 的video 元素
的支持。

Username:
Encryption:

output 元素
output 元素用于不同類(lèi)型的輸出，比如計(jì)算或腳本輸出：
實(shí)例

HTML5 表單屬性
HTML5 的新的表單屬性
本章講解涉及

和 元素的新屬性。
新的form 屬性：
• autocomplete
• novalidate
新的input 屬性：
• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和width
• list
• min, max 和step
• multiple
• pattern (regexp)
• placeholder
• required
瀏覽器支持
Input type IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus No No 10.0 3.0 4.0
form No No 9.5 No No
form overrides No No 10.5 No No
height and width 8.0 3.5 9.5 3.0 4.0
list No No 9.5 No No
min, max and step No No 9.5 3.0 No
multiple No 3.5 No 3.0 4.0
novalidate No No No No No
pattern No No 9.5 3.0 No
placeholder No No No 3.0 3.0
required No No 9.5 3.0 No
autocomplete 屬性
autocomplete 屬性規(guī)定form 或input 域應(yīng)該擁有自動(dòng)完成功能。
注釋?zhuān)篴utocomplete 適用于 標(biāo)簽，以及以下類(lèi)型的 標(biāo)簽：text, search, url,
telephone, email, password, datepickers, range 以及color。
當(dāng)用戶在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)：
實(shí)例

First name:

Last name:

E-mail:

注釋?zhuān)涸谀承g覽器中，您可能需要啟用自動(dòng)完成功能，以使該屬性生效。
autofocus 屬性
autofocus 屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。
注釋?zhuān)篴utofocus 屬性適用于所有 標(biāo)簽的類(lèi)型。
實(shí)例
User name:
form 屬性
form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。
注釋?zhuān)篺orm 屬性適用于所有 標(biāo)簽的類(lèi)型。
form 屬性必須引用所屬表單的id：
實(shí)例

First name:

Last name:
注釋?zhuān)喝缧枰靡粋€(gè)以上的表單，請(qǐng)使用空格分隔的列表。
表單重寫(xiě)屬性
表單重寫(xiě)屬性（form override attributes）允許您重寫(xiě)form 元素的某些屬性設(shè)定。
表單重寫(xiě)屬性有：
formaction - 重寫(xiě)表單的action 屬性
formenctype - 重寫(xiě)表單的enctype 屬性
formmethod - 重寫(xiě)表單的method 屬性
formnovalidate - 重寫(xiě)表單的novalidate 屬性
formtarget - 重寫(xiě)表單的target 屬性
注釋?zhuān)罕韱沃貙?xiě)屬性適用于以下類(lèi)型的 標(biāo)簽：submit 和p_w_picpath。
實(shí)例

E-mail:

注釋?zhuān)哼@些屬性對(duì)于創(chuàng)建不同的提交按鈕很有幫助。
height 和width 屬性
height 和width 屬性規(guī)定用于p_w_picpath 類(lèi)型的input 標(biāo)簽的圖像高度和寬度。
注釋?zhuān)篽eight 和width 屬性只適用于p_w_picpath 類(lèi)型的 標(biāo)簽。
實(shí)例

list 屬性
list 屬性規(guī)定輸入域的datalist。datalist 是輸入域的選項(xiàng)列表。
注釋?zhuān)簂ist 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email, date pickers,
number, range 以及color。
實(shí)例
Webpage:

min、max 和step 屬性
min、max 和step 屬性用于為包含數(shù)字或日期的input 類(lèi)型規(guī)定限定（約束）。
max 屬性規(guī)定輸入域所允許的最大值。
min 屬性規(guī)定輸入域所允許的最小值。
step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果step="3"，則合法的數(shù)是-3,0,3,6 等）。
注釋?zhuān)簃in、max 和step 屬性適用于以下類(lèi)型的 標(biāo)簽：date pickers、number 以及
range。
下面的例子顯示一個(gè)數(shù)字域，該域接受介于0 到10 之間的值，且步進(jìn)為3（即合法的值
為0、3、6 和9）：
實(shí)例
Points:
multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個(gè)值。
注釋?zhuān)簃ultiple 屬性適用于以下類(lèi)型的 標(biāo)簽：email 和file。
實(shí)例
Select p_w_picpaths:
novalidate 屬性
novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證form 或input 域。
注釋?zhuān)簄ovalidate 屬性適用于

以及以下類(lèi)型的 標(biāo)簽：text, search, url,
telephone, email, password, date pickers, range 以及color.
實(shí)例

E-mail:

pattern 屬性
pattern 屬性規(guī)定用于驗(yàn)證input 域的模式（pattern）。
模式（pattern） 是正則表達(dá)式。您可以在我們的JavaScript 教程中學(xué)習(xí)到有關(guān)正則表達(dá)式
的內(nèi)容。
注釋?zhuān)簆attern 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email 以及
password。
下面的例子顯示了一個(gè)只能包含三個(gè)字母的文本域（不含數(shù)字及特殊字符）：
實(shí)例
Country code: pattern="[A-z]{3}" title="Three letter country code" />
placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
注釋?zhuān)簆laceholder 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email 以
及password。
提示（hint）會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，會(huì)在輸入域獲得焦點(diǎn)時(shí)消失：
實(shí)例

required 屬性
required 屬性規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）。
注釋?zhuān)簉equired 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email,
password, date pickers, number, checkbox, radio 以及file。
實(shí)例
Name:
HTML 5 參考手冊(cè)
W3C 在1 月22 日發(fā)布了最新的HTML 5 工作草案。HTML 5 工作組包括AOL, Apple,
Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及數(shù)百個(gè)其他的開(kāi)發(fā)商。HTML 5 中的一些
新特性：嵌入音頻、視頻、圖片的函數(shù)、客戶端數(shù)據(jù)存儲(chǔ)，以及交互式文檔。其他特性包
括新的頁(yè)面元素，比如

,

,