1.什么是HTML5?

     HTML5是一個新的網絡標準，目前仍處于發展階段。他的誕生目的是為了取代現有的HTML4.01和XHTML1.0標準。它希望能夠減少互聯網富應用（RIA）對flash、Silverlight、JavaFX等的依賴，并且提供能夠有效增強網絡應用的API。

HTML5的新特性：

（1）canvas繪圖；

（2）新增的api包括：canvas，geolocation,websocket , webstorage；

（3）新增的若干標簽，如video，audio標簽。

2.HTML5和HTML的區別：

　　（1）、在文檔類型聲明上

　　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）、在結構語義上

　　HTML:沒有體現結構語義化的標簽，通常都是這樣來命名的，這樣表示網站的頭部。

　　HTML5:在語義上卻有很大的優勢，提供了一些新的HTML5標簽比如:article、footer、header、nav、section，這些通俗易懂。

 3.HTML5新的結構標簽：

（1）section標簽

標簽，定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其它部分。一般用于成節的內容，會在文檔流中開始一個新的節。它用來表現普通的文檔內容或應用區塊，通常由內容及其標題組成。但section元素標簽并非一個普通的容器元素，它表示一段專題性的內容，一般會帶有標題。
當我們描述一件具體的事物的時候，通常鼓勵使用article來代替section；當我們使用section時，仍然可以使用h1來作為標題，而不用擔心它所處的位置，以及其它地方是否用到；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div元素而非section。

（2）article標簽

是一個特殊的section標簽，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。一般來說，article會有標題部分（通常包含在header內），有時也會包含footer。article可以嵌套，內層的article對外層的article標簽有隸屬關系。例如，一篇博客的文章，可以用article顯示，然后一些評論可以以article的形式嵌入其中。

（3）nav標簽

 

nav標簽代表頁面的一個部分，是一個可以作為頁面導航的鏈接組，其中的導航元素鏈接到其它頁面或者當前頁面的其它部分，使html代碼在語義化方面更加精確，同時對于屏幕閱讀器等設備的支持也更好。

（4）aside標簽

 

aside標簽用來裝載非正文的內容，被視為頁面里面一個單獨的部分。它包含的內容與頁面的主要內容是分開的，可以被刪除，而不會影響到網頁的內容、章節或是頁面所要傳達的信息。例如廣告，成組的鏈接，側邊欄等等。

（5）header標簽

標簽定義文檔的頁眉，通常是一些引導和導航信息。它不局限于寫在網頁頭部，也可以寫在網頁內容里面。

 

通常標簽至少包含（但不局限于）一個標題標記（

-

），還可以包括標簽，還可以包括表格內容、標識、搜索表單、導航等。

（6）footer標簽

 

footer標簽定義section或document的頁腳，包含了與頁面、文章或是部分內容有關的信息，比如說文章的作者或者日期。作為頁面的頁腳時，一般包含了版權、相關文件和鏈接。它和標簽使用基本一樣，可以在一個頁面中多次使用，如果在一個區段的后面加入footer，那么它就相當于該區段的頁腳了。

（7）hgroup標簽

 

hgroup標簽是對網頁或區段section的標題元素（h1-h6）進行組合。例如，在一區段中你有連續的h系列的標簽元素，則可以用hgroup將他們括起來。

例：

 

<</span>hgroup><</span>h1>這是一篇介紹HTML 5結構標簽的文章</</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的區別）例：

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")內容
    (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")               //文檔中的區段，分區，分塊；可以當做div用
   (nav) (/nav) 

   (section) 
       (header) 
           (hgroup) 
               (h2) 主標題(/h2) 
               (h3) 主標題下的副標題1(/h3) 

               (h5) 主標題下的副標題2(/h5) 
           (/hgroup) 
       (/header) 

       (article)                                                              //文章
           (address) 成都市高新區云華路(/address)   //地址

           (time) 2015-08-26(/time)                         //時間
       (/article) 

   (/section) 
   (aside) 側邊欄(/aside)                                        //側邊欄
   (section) 

       (figure)                                                            //媒體對象：圖片，視頻，音頻
           (img src="1r-1130.jpg" alt="img"/) 
           (figcaption) 圖片說明(/figcaption)          //用于秒速和定義figure用的        

       (/figure) 

   (/section) 
(/section) 
(footer)                                                                  //尾部

   頁尾
(/footer) 

(/body)

 

3.HTML5其他的動能：

（關于form表單）

(body) 

(form action="#"method="get")              //action(表單提交地址)
    //調色盤
    (inputtype="color" id="color"/)(br/)
    (buttontype="button" onclick="getValue( )")getValue(/button)

    //詞匯聯想：輸入提示

   (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內容顏色的方法： 在css中設置    

                                           ::-webkit-input-placeholder{
                                                                                             color:green ;
                                                                                           }

 

   //表單驗證
    (inputtype="text" required="required"placeholder="驗證不為空"/)

                                          //觸發提交按鈕時自動驗證不能為空

   (inputtype="text" pattern="[1-9]"required="required"placeholder="正則表達式"/)                              //觸發提交按鈕，自動驗證，內容為1-9，且不能為空

  (input type="email"required="required" placeholder="email"/)

                                        //觸發提交按鈕，自動驗證email格式是否正確，且不能為空

   (input type="number"placeholder="數字" max="100"min="50"/)

                                //觸發提交按鈕，自動驗證是否為設定范圍內的數字，且不能為空

   (input type="submit"value="Submit"/)     //提交按鈕
(/form)

 

(關于多媒體標簽):
(audiosrc="sound.mp3" loop="loop"autoplay="autoplay" controls="controls")(/audio)          

              //loop="loop"(表示循環)；autoplay(頁面加載時自動播放);controls(控制臺)

(video src="movie.webm" loop="loop"autoplay="autoplay" controls="controls"width="200")(/video)      //可設置寬高

總結：相較于HTML4，在對HTML5的使用中對很多效果的實現提供的很大的方便，省

          掉了一些js代碼。尤其是對表單提交的驗證很實用，而且語義化的標簽讓代碼變

          得簡潔。