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