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 教程中學習到有關(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。
