一、HTML5簡介

2014年10月29日，HTML5標準規範制定完成，並公開發布。

二、HTML5頁面結構

HTML5提供了新的語義元素來明確一個Web頁面的不同部分。

<header>：定義文件的頭部區域。

<nav>：定義導航連結的部分。

<section>：定義文件中的小節。比如章節、頁首、頁尾或文件中的其他部分，section通常 包含了一組內容及其標題。

<article>：定義外部的內容。外部內容可以是來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文字，或者是來自論壇的文字。亦或是來自其他外部源內容。

<aside>：定義頁面主區域內容之外的內容（比如側邊欄）。

<figure>：標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。

<figcaption>：定義 <figure> 元素的標題。

<footer>：定義頁面底部區域

各標籤在頁面中的大體位置為

三、HTML5新表單

1、input新型別     （都比較簡單，練一下就知道幹什麼的了）
      email型別 -填寫郵箱， 驗證是否包含"@"，但是驗證邏輯不完整
      url型別 - 填寫網址，驗證是否包含"http://"，但是驗證邏輯不完整
      tel型別 - 只在移動端顯示數字按鍵
      number型別 - 數字型別 框中有上下鍵可改變數字，min為最小值，max為最大值，step為步長，預設為一
      range型別 - 範圍型別，手動滑動選擇值，value為設定的預設值，<input type="range" min=0 max=10 step=1 value=5>
      date型別 - 日期選擇型別
      color型別 - 顏色選擇型別                                                                                                                                                                   search型別 - 搜尋型別

2、表單新元素
    ① datalist元素 - 定義備選項（並不顯示），效果與<select>下拉列表類似，實現列表內容與現實分離，列表內容可多次被引用    

<datalist id="mylist">
    <option>北京</option>
    <option>天津</option>
</datalist>
<input type="text" list="mylist">

     ②progress元素 -  進度條屬性，max設定進度條最大值，無min屬性，最小值為0，value代表當前進度值
     ③meter元素 - 刻度值，min最小值，max最大值，value當前刻度值， low低預警值（設定的值在min與max之間），value低於low值時<meter>元素會變色，high高預警值（設定的值在min與max之間，並且比low大），value高於high值時<meter>元素會變色，顏色與low的顏色不同
     ④output元素 - 輸出

3、表單新屬性
     * placeholder - 提供預設提示內容，設定提示文字，類似背景 ，常用                                                                                                 * autofocus - 自動獲取焦點，如果為表單設定了這個屬性，可以一進入頁面就可以獲得焦點
        multiple - 允許輸入多個值， 多個值之間使用","
        form - 允許表單元素定義在表單之外，基本yong用不到

4、表單新驗證

  1） 驗證屬性
       ① required屬性
         驗證當前元素值是否為空
       ② pattern屬性
         使用正則表示式驗證當前元素值是否匹配，     注意 - 並不能驗證當前元素值是否為空

                                       <input type="text" pattern="^[a-zA-Z]{6,12}$">
       ③ min和max屬性
          驗證當前元素值最小值或最大值，一般用於range或者number
       ④ minlength和maxlength屬性
            minlength - 驗證當前元素值的最小長度，輸入值時,允許輸入小於指定值，提交表單時,驗證元素值最小長度
                     minlength並不是HTML5新屬性
            maxlength - 驗證當前元素值的最大長度， 輸入值時,長度不能大於指定值
       ⑤validity屬性
          表單驗證HTML5提供一種有效狀態，有效狀態通過validityState物件獲取到
           validityState物件可通過validity屬性得到

2） 驗證(有效)狀態
        validityState物件提供了一系列的有效狀態，通過這些有效狀態,進行判斷
        注意    所有驗證狀態必須配合上述的驗證屬性使用
        作用  用來替換原本手工實現的邏輯
        驗證狀態
       ① valid
        作用 - 判斷當前元素值是否正確
        注意
          該狀態返回true,表示驗證成功
          該狀態返回false,表示驗證失敗
      ②valueMissing
        作用 - 判斷當前元素值是否為空
        用法 - 配合required屬性使用
      ③typeMismatch
        作用 - 判斷當前元素值的型別是否匹配
        用法 - 配合email、number、url等
     ④ patternMismatch
        作用 - 判斷當前元素值是否與指定正則表示式匹配
        用法 - 配合pattern屬性使用
     ⑤ tooLong
        作用 - 判斷當前元素值的長度是否正確
        用法 - 配合maxlength屬性
        注意
          使用maxlength屬性後,實際不可能出現長度大於maxlength的值
          tooLong很難出現這種情況
     ⑥ rangeUnderflow
        作用 - 判斷當前元素值是否小於min屬性值
        用法 - 配合min屬性
        注意 - 並不能與max屬性值進行比較
     ⑦ stepMismatch
        作用 - 判斷當前元素值是否與step設定相符
        用法 - 配合step使用
        注意 - 並不能與min或max屬性值進行比較
     ⑧customError
        用法 - 配合setCustomValidity()方法
          如果使用該方法,該狀態返回true
     ⑨setCustomValidity()方法
          作用 - 設定自定義的錯誤提示內容
          問題 - 使用該方法設定錯誤資訊
            當輸入正確時,呼叫該方法將資訊設定為空("")
            不能使用上述有效狀態的任何一種判斷輸入是否正確(所有狀態返回false)