好程式設計師前端教程-講給小白：你不知道的HTML5

好程式設計師前端教程-講給小白：你不知道的HTML5
一、HTML5概念
HTML5並不僅僅只是做為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成為第一個將Web做為應用開發平臺的HTML語言。HTML5定義了一系列新元素，如新語義標籤、智慧表單、多媒體標籤等，可以幫助開發者建立富網際網路應用，同時有令人眼花繚亂的css 3，還提供了一些Javascript API，如地理定位、重力感應、硬體訪問等，可以在瀏覽器內實現類原生應用，製作webApp，甚至結合Canvas我們可開發網頁版遊戲。
二、HTML5新增部分簡介
1.新增的結構標籤
（1）header（頭部） （2）nav（導航） （3）section（主體） （4）aside（側邊欄） （5）article （內容）（6）footer（底部）
作用：與div一樣，只是增加了語義性，便於SEO最佳化。
擴充：SEO最佳化可以提升網站在搜尋引擎中的排名，在前端實際應用中，我們會更多的去運用語義化標籤，同時針對一些特殊的字元，我們運用權重高的標籤去包裹網站logo。
2.新增的智慧表單
2.1 input表單新增了type屬性值：
type="email"限制使用者輸入必須為Email型別
type="url"限制使用者輸入必須為URL型別
type="date"自動生成一個日期控制元件
type="time"同上
type="month"同上
type="week"同上
type="number"限制使用者輸入必須為數字型別
type="range"產生一個滑動條的表單
type="search"產生一個搜尋意義的表單
type="color"生成一個顏色選擇表單
智慧表單在移動端用的比較多，它會調取手機自身的控制元件。
2.2 表單智慧驗證
required => 驗證表單是否為空，必須配合form表單來使用
pattern => 自定義驗證表單規則，匹配正則
invalid => 驗證失敗的時候觸發的事件
dom.setCustomValidity()=> 自定義彈出的內容 引數：string 自定義的內容
2.3 表單新屬性
placeholder=> 佔位文字，體驗更加
autofocus => 自動獲取焦點 dom.focus（）
autocomplete=> 提交一次後下次自動補全 注意：必須提交一次之後，同時必須要有name屬性
multiple => 配合file控制元件實現多選
form => 配合form表單的id值實現關聯，在任意位置都可以被提交，但是不建議這麼寫
2.4 智慧表單過濾（datalist）
類似於搜尋提示，輸入一個內容會提示相關聯的匹配的提示。它是利用表單的list =“datalist的id值”與datalist這個標籤取得聯絡實現的。
2.5 video和audio標籤
HTML5中新添了video標籤來實現影片的播放而不是藉助於flash技術。
屬性：autoplay =>影片預設載入完成後播放；controls =>播放的控制元件