HTML5 簡單概括 -- 前端知識 （一）

HTML5簡介

1.h5不是一個新語言，它是HTML語言第五次重大修改--版本

2.   2014年  h5

3.支持：目前全部的主流瀏覽器都支持h5，IE8如下不支持

4.特性：　　a:拋棄了h4中不經常使用的標籤或屬性（center/font等）  SEO優化--i/em  b/strong

　　　　　　b:新增了一些標籤和屬性（表單，多媒體（video，audio））

　　　　　　c:h5的網頁結構比h4的網頁結構更簡單。語義化（SEO優化）

HTML5新增的type屬性

將全部的<input>標籤寫在<form>標籤中，form：收集用戶輸入的信息，提交服務器。

手機號碼：<input type = "tel"  nume =""/>

電子郵箱：<input type = "email"  nume =""/>

URL地址：<input type = "url"  nume =""/>

數字框：<input type = "number"  nume =""  min="" max="" value=""/>

顏色：<input type = "color"  nume =""/>

範圍：<input type = "range"  nume =""/>

HTML5表單中新增的屬性

1. placaeholder = "提示信息"；當用戶未輸入值時顯示的提示信息，佔位符。

2. autofocus = "autofocus"； 自動聚焦。

3. autocomplete = "on"； --on:打開自動補全；

　　a:該輸入框必須有name屬性；

　　b:輸入的值必須提交過一次。

4. required = "required"；設置必填項--若爲空，阻止數據提交

5. multiple = "multiple"；選擇多個文件。

6. type = "file"：文件；type = "password"：密碼

下拉列表：input 元素與datalist配合使用。

1. datalist 只是用來定義一個下拉列表。

2. option 定義下拉列表具體的項，option能夠是單標籤，也能夠是雙標籤。value：下拉列表的值，label：輔助說明。

3.獲取值只須要經過獲取input元素中的 value 值；

進度條：<progress  value = ""  max = ""></progress>

度量器：<meter min = ""   max = "" value = ""  low = ""  high = ""></meter >

　　low：最低值；high：最高值。

 

HTML5表單新增事件 

<form>
手機號：<input type = "tel" placeholder  = "請輸入手機號" maxlength = "11" id = "phone"  pattern="^1[35678]\d{9}$" name = "phone"/>
</form>

　　document.getElementById("phone").oninralid = function(){

　　　　//對象。setCustomValidity("所要修改的提示信息");

　　}

1. onchange：當輸入框的值發生改變的同時失去焦點才觸發。

2. onblur：無論輸入框的值是否發生改變，只要失去焦點就觸發。

3. onkeyup：只要鍵盤某個按鍵彈起時就觸發。

4. oninput：當輸入框的值發生改變時當即去觸發。