好程序員前端教程-講給小白：你不知道的HTML5

好程序員前端教程-講給小白：你不知道的HTML5
1、HTML5概念
HTML5並不單單只是作爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言。HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，同時有使人眼花繚亂的css 3，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，製做webApp，甚至結合Canvas咱們可開發網頁版遊戲。
2、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 =>播放的控件