HTML5學習筆記(一)HTML5新標籤新屬性
一、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)