1.什么是HTML5?
HTML5是一個(gè)新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，目前仍處于發(fā)展階段。他的誕生目的是為了取代現(xiàn)有的HTML4.01和XHTML1.0標(biāo)準(zhǔn)。它希望能夠減少互聯(lián)網(wǎng)富應(yīng)用（RIA）對(duì)flash、Silverlight、JavaFX等的依賴，并且提供能夠有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的API。
HTML5的新特性：
（1）canvas繪圖；
（2）新增的api包括：canvas，geolocation,websocket , webstorage；
（3）新增的若干標(biāo)簽，如video，audio標(biāo)簽。
2.HTML5和HTML的區(qū)別：
?。?）、在文檔類型聲明上
HTML聲明：(!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd")
(htmlxmlns="http://www.w3.org/1999/xhtml")
HTML5聲明：(!doctypehtml)
（2）、在結(jié)構(gòu)語(yǔ)義上
HTML:沒有體現(xiàn)結(jié)構(gòu)語(yǔ)義化的標(biāo)簽，通常都是這樣來命名的，這樣表示網(wǎng)站的頭部。
HTML5:在語(yǔ)義上卻有很大的優(yōu)勢(shì)，提供了一些新的HTML5標(biāo)簽比如:article、footer、header、nav、section，這些通俗易懂。
3.HTML5新的結(jié)構(gòu)標(biāo)簽：
（1）section標(biāo)簽
標(biāo)簽，定義文檔中的節(jié)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其它部分。一般用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)。它用來表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊，通常由內(nèi)容及其標(biāo)題組成。但section元素標(biāo)簽并非一個(gè)普通的容器元素，它表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題。
當(dāng)我們描述一件具體的事物的時(shí)候，通常鼓勵(lì)使用article來代替section；當(dāng)我們使用section時(shí)，仍然可以使用h1來作為標(biāo)題，而不用擔(dān)心它所處的位置，以及其它地方是否用到；當(dāng)一個(gè)容器需要被直接定義樣式或通過腳本定義行為時(shí)，推薦使用div元素而非section。
（2）article標(biāo)簽
是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個(gè)用戶評(píng)論等等。一般來說，article會(huì)有標(biāo)題部分（通常包含在header內(nèi)），有時(shí)也會(huì)包含footer。article可以嵌套，內(nèi)層的article對(duì)外層的article標(biāo)簽有隸屬關(guān)系。例如，一篇博客的文章，可以用article顯示，然后一些評(píng)論可以以article的形式嵌入其中。
（3）nav標(biāo)簽
nav標(biāo)簽代表頁(yè)面的一個(gè)部分，是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其它頁(yè)面或者當(dāng)前頁(yè)面的其它部分，使html代碼在語(yǔ)義化方面更加精確，同時(shí)對(duì)于屏幕閱讀器等設(shè)備的支持也更好。
（4）aside標(biāo)簽
aside標(biāo)簽用來裝載非正文的內(nèi)容，被視為頁(yè)面里面一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁(yè)面的主要內(nèi)容是分開的，可以被刪除，而不會(huì)影響到網(wǎng)頁(yè)的內(nèi)容、章節(jié)或是頁(yè)面所要傳達(dá)的信息。例如廣告，成組的鏈接，側(cè)邊欄等等。
（5）header標(biāo)簽
標(biāo)簽定義文檔的頁(yè)眉，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫在網(wǎng)頁(yè)頭部，也可以寫在網(wǎng)頁(yè)內(nèi)容里面。
通常標(biāo)簽至少包含（但不局限于）一個(gè)標(biāo)題標(biāo)記（
（6）footer標(biāo)簽
footer標(biāo)簽定義section或document的頁(yè)腳，包含了與頁(yè)面、文章或是部分內(nèi)容有關(guān)的信息，比如說文章的作者或者日期。作為頁(yè)面的頁(yè)腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它和標(biāo)簽使用基本一樣，可以在一個(gè)頁(yè)面中多次使用，如果在一個(gè)區(qū)段的后面加入footer，那么它就相當(dāng)于該區(qū)段的頁(yè)腳了。
（7）hgroup標(biāo)簽
hgroup標(biāo)簽是對(duì)網(wǎng)頁(yè)或區(qū)段section的標(biāo)題元素（h1-h6）進(jìn)行組合。例如，在一區(qū)段中你有連續(xù)的h系列的標(biāo)簽元素，則可以用hgroup將他們括起來。
例：
<</span>hgroup><</span>h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</</span>h1><</span>h2>HTML 5的革新</</span>h2></</span>hgroup>
（8）figure 標(biāo)簽
用于對(duì)元素進(jìn)行組合。多用于圖片與圖片描述組合。
例：
<</span>figure><</span>img src="img.gif" alt="figure標(biāo)簽"title="figure標(biāo)簽" /><</span>figcaption>這兒是圖片的描述信息</</span>figcaption></</span>figure>
3.HTML5的語(yǔ)義化標(biāo)簽：
（HTML5與HTML4的區(qū)別）例：
HTML4寫法：
(body)
(div id="header")頭部
(divid="nav") //導(dǎo)航
(ul)
(li) (/li)
(li) (/li)
(li) (/li)
(/ul)
(/div)
(div id="banner")banner
(img src="" alt=""/)
(/div)
(/div)
(div id="content")內(nèi)容
(div id="main")
(div) (/div)
(div) (/div)
(/div)
(div)
(img src="" alt=""/)
(span)圖片說明(/span)
(/div)
(/div)
(div id="footer") 尾部 (/div)
(/body)
HTML5寫法：
(body)
(header) //頭部
(nav) //導(dǎo)航
(ul)
(li) html5導(dǎo)航(/li)
(/ul)
(/nav)
(/header)
(sectionid="content2") //文檔中的區(qū)段，分區(qū)，分塊；可以當(dāng)做div用
(nav) (/nav)
(section)
(header)
(hgroup)
(h2) 主標(biāo)題(/h2)
(h3) 主標(biāo)題下的副標(biāo)題1(/h3)
(h5) 主標(biāo)題下的副標(biāo)題2(/h5)
(/hgroup)
(/header)
(article) //文章
(address) 成都市高新區(qū)云華路(/address) //地址
(time) 2015-08-26(/time) //時(shí)間
(/article)
(/section)
(aside) 側(cè)邊欄(/aside) //側(cè)邊欄
(section)
(figure) //媒體對(duì)象：圖片，視頻，音頻
(img src="1r-1130.jpg" alt="img"/)
(figcaption) 圖片說明(/figcaption) //用于秒速和定義figure用的
(/figure)
(/section)
(/section)
(footer) //尾部
頁(yè)尾
(/footer)
(/body)
3.HTML5其他的動(dòng)能：
（關(guān)于form表單）
(body)
(form action="#"method="get") //action(表單提交地址)
//調(diào)色盤
(inputtype="color" id="color"/)(br/)
(buttontype="button" onclick="getValue( )")getValue(/button)
//詞匯聯(lián)想：輸入提示
(input type="text" list="myData"/) (br/) //list="myData"指向datalist 的id
(datalistid="myData") //datalist 菜單
(option value="手機(jī)") (/option)
(option value="iPhone手機(jī)") (/option)
(option value="小米手機(jī)") (/option)
(option value="華為手機(jī)") (/option)
(option value="htc手機(jī)") (/option)
(/datalist)
//placeholder，輸入框提示
(inputtype="text" placeholder="請(qǐng)輸入用戶名"/)(br/)
//改變placeholder內(nèi)容顏色的方法： 在css中設(shè)置
::-webkit-input-placeholder{
color:green ;
}
//表單驗(yàn)證
(inputtype="text" required="required"placeholder="驗(yàn)證不為空"/)
//觸發(fā)提交按鈕時(shí)自動(dòng)驗(yàn)證不能為空
(inputtype="text" pattern="[1-9]"required="required"placeholder="正則表達(dá)式"/) //觸發(fā)提交按鈕，自動(dòng)驗(yàn)證，內(nèi)容為1-9，且不能為空
(input type="email"required="required" placeholder="email"/)
//觸發(fā)提交按鈕，自動(dòng)驗(yàn)證email格式是否正確，且不能為空
(input type="number"placeholder="數(shù)字" max="100"min="50"/)
//觸發(fā)提交按鈕，自動(dòng)驗(yàn)證是否為設(shè)定范圍內(nèi)的數(shù)字，且不能為空
(input type="submit"value="Submit"/) //提交按鈕
(/form)
(關(guān)于多媒體標(biāo)簽):
(audiosrc="sound.mp3" loop="loop"autoplay="autoplay" controls="controls")(/audio)
//loop="loop"(表示循環(huán))；autoplay(頁(yè)面加載時(shí)自動(dòng)播放);controls(控制臺(tái))
(video src="movie.webm" loop="loop"autoplay="autoplay" controls="controls"width="200")(/video) //可設(shè)置寬高
總結(jié)：相較于HTML4，在對(duì)HTML5的使用中對(duì)很多效果的實(shí)現(xiàn)提供的很大的方便，省
掉了一些js代碼。尤其是對(duì)表單提交的驗(yàn)證很實(shí)用，而且語(yǔ)義化的標(biāo)簽讓代碼變
得簡(jiǎn)潔。
