總是遇到h5新標籤的筆試題目,就查閱了資料來總結一下:
1.form相關:
(1)form屬性:在HTML5中表單元素可放在表單之外,透過給該元素新增form屬性來指向目標表單(form屬性值設為目標表單id)即可。
(2)formaction屬性:HTML5為提交按鈕(如button、submit、image等)增加了formaction屬性,以便提交到不同的伺服器位址。
<input formaction="new.html" type="submit" value="提交到new.html">
(3)formmethod屬性:用法同formaction。
(4)placeholder屬性:用於文字方塊處於未輸入狀態時的一種文字提示。
(5)autofocus屬性:自動取得焦點,一個頁面只能有一個控制項具有該屬性。該屬性無值,直接寫就好。
<input name="username" autofocus type="text" id="username">
(6)list屬性:用於單行文字框,該屬性的值為某個datalist元素的id,增加該屬性後的單行文字框類似選擇框(select),但允許使用者自訂輸入,為了避免沒有支援該元素的瀏覽器出現錯誤,我們通常使用CSS設定不顯示。
order:<input list="list" name="order" autofocus type="text" id="order"> <datalist id="list" style="display:none"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </datalist>
(7)autocomplete屬性:自動完成允許瀏覽器預測對欄位的輸入,HTML5實現了自訂設定該屬性,避免了任何人都可以看到所存在的安全隱患。此屬性值有「on」、」off「或「」(不指定)三種,不指定時使用瀏覽器的預設值。
(8)input元素種類:
search:與text文字方塊類似,用於搜尋;
tel: 與text文字方塊類似,用於電話;
格式的位址; email: 與text文字方塊類似,用於email格式的位址; number: 與text文字方塊類似,用於數值; 和max屬性來設定範圍; color: 顏色文字框,「#000000」格式的文字; file: 檔案選擇文字方塊,HTML5中透過multiple屬性可以多重選擇; 、time、datetime-local 各種日期與時間輸入的文字方塊; output: 定義不同類型的輸出;(9)表單驗證相關: 驗證的要求) required屬性:具有該屬性的元素,如果其內容為空則不允許提交,並給出相應的提示。 pattern屬性:具有該屬性的元素,如果內容不為空則把內容與pattern的值進行正則匹配,匹配不成功則不通過並提示。 min屬性和max屬性:它們是值類型和日期類型的input元素專用屬性,限制了輸入的範圍。 step屬性:控制元素的值增加或減少的步幅,如輸入1-100之間的數字,且步幅是5,那麼只能輸入1、6、11....。 顯示驗證(除了給元素添加屬性來自動驗證外,在HTML5中,form元素與輸入元素(input)包括select元素和textarea都具有一個checkValidity方法,呼叫該方法可以進行手動驗證,checkValidity方法以boolean的形式傳回驗證結果)function check(){ var email=document.getElementById("email"); if(email.checkValidity()){ alert("email格式正确"); }else{ alert("email格式不正确"); } }
//用于form的novalidate <form novalidate> <input type="text" name="name" id="name" required> <input type="submit" name="button" id="button" value="提交"> </form> //用于submit的formnovalidate <form> <input type="text" name="name" id="name" required> <input type="submit" orfmnovalidate name="button" id="button" value="提交"> </form>
<figure> <img src="logo.png" alt="HTML5新增元素、標籤總結"> <figcaption>标志</figcaption> </figure>
<details> <summary>点击我查看细节</summary> <p>我是细节内容。</p> </details>
high:定义度量的值位于哪个点,被界定为高的值。
low:定义度量的值位于哪个点,被界定为低的值。
max:定义最大值。默认值是 1。
min:定义最小值。默认值是 0。
optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性,则意味着值越高越好。如果该值低于 "low" 属性的值,则意味着值越低越好。
value:定义度量的值。
(6)改良的ol列表:在HTML5中为ol元素添加了start属性和reversed属性。
start:表示列表序号从几开始。
reversed:表示列表序号为倒序。
(7) 改良的dl列表:dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn。
<dl> <dt>术语1</dt> <dd>描述...</dd> <dt><dfn>名字</dfn>术语2</dt> <dd>描述...</dd> </dl>
(8)cite:用于表示作者。
(9)small:用于标识“小型文本”。
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18) 标签:用于对网页或区段(section)的标题进行组合。
(19) 标签:用于对网页或区段(section)的标题进行组合。
(20)
(21)
(22)
(23)
(24) 标签:定义 ruby 注释(中文注音或字符)。
(25)
(26)
(27)
(28)
(29)
(30)