1.什么是 HTML5？

• HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。

HTML 的上一個版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。

• HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。

2.HTML5 是如何起步的？

• HTML5 是 W3C 與 WHATWG 合作的結(jié)果。
• 編者注：W3C 指 World Wide Web Consortium，萬維網(wǎng)聯(lián)盟。
• 編者注：WHATWG 指 Web Hypertext Application Technology Working Group。
• WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進行合作，來創(chuàng)建一個新版本的 HTML。

3.為 HTML5 建立的一些規(guī)則:

• 用于繪畫的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 對本地離線存儲的更好的支持
• 新的特殊內(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支持).
• 屬性:

注:括號內(nèi)的是屬性的值,以后同

• autoplay(autoplay):如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
• controls(controls):如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
• height(pixels):設(shè)置視頻播放器的高度。
• loop:(loop):如果出現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。
• preload(preload):如果出現(xià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)該屬性，則每當音頻結(jié)束時重新開始播放。
• preload:(preload):如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預(yù)備播放。
  如果使用 "autoplay"，則忽略該屬性。
• src:(url): 要播放的音頻的 URL。

3.input(輸入標簽)

type 屬性達標類型

• Input 類型 - email
  email 類型用于應(yīng)該包含 e-mail 地址的輸入域。
  在提交表單時，會自動驗證 email 域的值。
• Input 類型 - url
  url 類型用于應(yīng)該包含 URL 地址的輸入域。
  在提交表單時，會自動驗證 url 域的值。
• Input 類型 - number
  number 類型用于應(yīng)該包含數(shù)值的輸入域。
  您還能夠設(shè)定對所接受的數(shù)字的限定：
• 限定屬性:
• max:(number):規(guī)定允許的最大值
• min:(number):規(guī)定允許的最小值
• step:(number):規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）
• value:(number): 規(guī)定默認值
• Input 類型 - range
  range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。
  range 類型顯示為滑動條。
  您還能夠設(shè)定對所接受的數(shù)字的限定：
• 限定屬性:
• max:(number):規(guī)定允許的最大值
• min:(number):規(guī)定允許的最小值
• step:(number):規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）
• value:(number): 規(guī)定默認值
• Input 類型 - Date Pickers（日期選擇器）
  HTML5 擁有多個可供選取日期和時間的新輸入類型：
• date - 選取日、月、年
• month - 選取月、年
• week - 選取周和年
• time - 選取時間（小時和分鐘）
• datetime - 選取時間、日、月、年（UTC 時間）
• datetime-local - 選取時間、日、月、年（本地時間）
• Input 類型 - search
  search 類型用于搜索域，比如站點搜索或 Google 搜索。
  search 域顯示為常規(guī)的文本域。

4.HTML5 的新的表單元素：

• datalist:支持瀏覽器:(Opera 9.5)
• datalist 元素規(guī)定輸入域的選項列表。
  列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的。
  如需把 datalist 綁定到輸入域，請用輸入域的 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 元素永遠都要設(shè)置 value 屬性。

• keygen:支持瀏覽器:(Opera 10.5,Chrome 3.0)
• keygen 元素的作用是提供一種驗證用戶的可靠方法。
  keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
  私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。
  目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。例:

<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 元素用于不同類型的輸出，比如計算或腳本輸出：例:

<output id="result" onforminput="resCalc()"></output>

5.HTML5 的新的表單屬性

一:新的 form 屬性：

• autocomplete 屬性

autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。

注釋：autocomplete 適用于 <form> 標簽，以及以下類型的 < input> 標簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

• autofocus 屬性

autofocus 屬性規(guī)定在頁面加載時，域自動地獲得焦點。

注釋：autofocus 屬性適用于所有 < input> 標簽的類型。

• form 屬性

form 屬性規(guī)定輸入域所屬的一個或多個表單。
注釋：form 屬性適用于所有 < input> 標簽的類型。
form 屬性必須引用所屬表單的 id：

二.表單重寫屬性

• height 和 width 屬性

height 和 width 屬性規(guī)定用于 image 類型的 input 標簽的圖像高度和寬度。

注釋：height 和 width 屬性只適用于 image 類型的 < input> 標簽。

• list 屬性

list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項列表。

注釋：list 屬性適用于以下類型的 < input> 標簽：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> 標簽：date pickers、number 以及 range。
下面的例子顯示一個數(shù)字域，該域接受介于 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9)

• multiple 屬性

multiple 屬性規(guī)定輸入域中可選擇多個值。

注釋：multiple 屬性適用于以下類型的 < input> 標簽：email 和 file。

• novalidate 屬性

novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。

注釋：novalidate 屬性適用于 <form> 以及以下類型的 < input> 標簽：text, search, url, telephone, email, password, date pickers, range 以及 color.

• pattern 屬性

pattern 屬性規(guī)定用于驗證 input 域的模式（pattern）。
模式（pattern） 是正則表達式。您可以在我們的 JavaScript 教程中學(xué)習到有關(guān)正則表達式的內(nèi)容。

注釋：pattern 屬性適用于以下類型的 < input> 標簽：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數(shù)字及特殊字符）

• placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。

注釋：placeholder 屬性適用于以下類型的 < input> 標簽：text, search, url, telephone, email 以及 password。
提示（hint）會在輸入域為空時顯示出現(xiàn)，會在輸入域獲得焦點時消失

• required 屬性

required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。

注釋：required 屬性適用于以下類型的 < input> 標簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。