1.什么是 HTML5？
- HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。
HTML 的上一個(gè)版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
- HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
2.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 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。
3.為 HTML5 建立的一些規(guī)則:
- 用于繪畫(huà)的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對(duì)本地離線存儲(chǔ)的更好的支持
- 新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
4.瀏覽器支持
- 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
元素
1.video(視屏)
- 支持的視屏格式:Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件(Firefox, Opera, Opera支持);MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件(IE , Chrome, Safari支持);WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件(Firefox, Opera, Opera支持).
- 屬性:
注:括號(hào)內(nèi)的是屬性的值,以后同
- autoplay(autoplay):如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
- controls(controls):如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
- height(pixels):設(shè)置視頻播放器的高度。
- loop:(loop):如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。
- preload(preload):如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。
如果使用 "autoplay"，則忽略該屬性。 - src:(url):要播放的視頻的 URL。
- width:(pixels):設(shè)置視頻播放器的寬度。
2.audio(音頻)
- 支持的音頻格式有:Ogg Vorbis:(Firefox 3.5 ,Opera 10.5,Opera 10.5 支持);MP3:(IE 9,Chrome 3.0,Safari 3.0 支持).
- 屬性:
- autoplay:( autoplay):如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
- controls:(controls):如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
- loop:(loop):如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放。
- preload:(preload):如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。
如果使用 "autoplay"，則忽略該屬性。 - src:(url): 要播放的音頻的 URL。
3.input(輸入標(biāo)簽)
type 屬性達(dá)標(biāo)類型
- Input 類型 - email
email 類型用于應(yīng)該包含 e-mail 地址的輸入域。
在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 email 域的值。 - Input 類型 - url
url 類型用于應(yīng)該包含 URL 地址的輸入域。
在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 url 域的值。 - Input 類型 - number
number 類型用于應(yīng)該包含數(shù)值的輸入域。
您還能夠設(shè)定對(duì)所接受的數(shù)字的限定： - 限定屬性:
- max:(number):規(guī)定允許的最大值
- min:(number):規(guī)定允許的最小值
- step:(number):規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）
- value:(number): 規(guī)定默認(rèn)值
- Input 類型 - range
range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。
range 類型顯示為滑動(dòng)條。
您還能夠設(shè)定對(duì)所接受的數(shù)字的限定： - 限定屬性:
- max:(number):規(guī)定允許的最大值
- min:(number):規(guī)定允許的最小值
- step:(number):規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）
- value:(number): 規(guī)定默認(rèn)值
- Input 類型 - Date Pickers（日期選擇器）
HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型： - date - 選取日、月、年
- month - 選取月、年
- week - 選取周和年
- time - 選取時(shí)間（小時(shí)和分鐘）
- datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）
- datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）
- Input 類型 - search
search 類型用于搜索域，比如站點(diǎn)搜索或 Google 搜索。
search 域顯示為常規(guī)的文本域。
4.HTML5 的新的表單元素：
- datalist:支持瀏覽器:(Opera 9.5)
- datalist 元素規(guī)定輸入域的選項(xiàng)列表。
列表是通過(guò) datalist 內(nèi)的 option 元素創(chuàng)建的。
如需把 datalist 綁定到輸入域，請(qǐng)用輸入域的 list 屬性引用 datalist 的 id：例:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.baidu.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.apple.com" />
</datalist>
提示：option 元素永遠(yuǎn)都要設(shè)置 value 屬性。
- keygen:支持瀏覽器:(Opera 10.5,Chrome 3.0)
- keygen 元素的作用是提供一種驗(yàn)證用戶的可靠方法。
keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書(shū)（client certificate）。
目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。例:
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
- output:支持瀏覽器(Opera 9.5)
- output 元素用于不同類型的輸出，比如計(jì)算或腳本輸出：例:
<output id="result" onforminput="resCalc()"></output>
5.HTML5 的新的表單屬性
一:新的 form 屬性：
- autocomplete 屬性
autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能。
注釋：autocomplete 適用于 <form> 標(biāo)簽，以及以下類型的 < input> 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。
- autofocus 屬性
autofocus 屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。
注釋：autofocus 屬性適用于所有 < input> 標(biāo)簽的類型。
- form 屬性
form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。
注釋：form 屬性適用于所有 < input> 標(biāo)簽的類型。
form 屬性必須引用所屬表單的 id：
二.表單重寫(xiě)屬性
- height 和 width 屬性
height 和 width 屬性規(guī)定用于 image 類型的 input 標(biāo)簽的圖像高度和寬度。
注釋：height 和 width 屬性只適用于 image 類型的 < input> 標(biāo)簽。
- list 屬性
list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表。
注釋：list 屬性適用于以下類型的 < input> 標(biāo)簽：text, search, url, telephone, email, date pickers, number, range 以及 color。
- min、max 和 step 屬性
min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）。
max 屬性規(guī)定輸入域所允許的最大值。
min 屬性規(guī)定輸入域所允許的最小值。
step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）。
注釋：min、max 和 step 屬性適用于以下類型的 < input> 標(biāo)簽：date pickers、number 以及 range。
下面的例子顯示一個(gè)數(shù)字域，該域接受介于 0 到 10 之間的值，且步進(jìn)為 3（即合法的值為 0、3、6 和 9)
- multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個(gè)值。
注釋：multiple 屬性適用于以下類型的 < input> 標(biāo)簽：email 和 file。
- novalidate 屬性
novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。
注釋：novalidate 屬性適用于 <form> 以及以下類型的 < input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, range 以及 color.
- pattern 屬性
pattern 屬性規(guī)定用于驗(yàn)證 input 域的模式（pattern）。
模式（pattern） 是正則表達(dá)式。您可以在我們的 JavaScript 教程中學(xué)習(xí)到有關(guān)正則表達(dá)式的內(nèi)容。
注釋：pattern 屬性適用于以下類型的 < input> 標(biāo)簽：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個(gè)只能包含三個(gè)字母的文本域（不含數(shù)字及特殊字符）
- placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
注釋：placeholder 屬性適用于以下類型的 < input> 標(biāo)簽：text, search, url, telephone, email 以及 password。
提示（hint）會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，會(huì)在輸入域獲得焦點(diǎn)時(shí)消失
- required 屬性
required 屬性規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）。
注釋：required 屬性適用于以下類型的 < input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
