HTML5新增元素、標籤總結
- 高洛峰原創
- 2016-10-17 10:04:032038瀏覽
總是遇到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和用於submit的formnovalidate）//用于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> 自訂錯誤：在HTML5中沒經過驗證的表單瀏覽器有預設的提示，但也提供了透過JavaScript的來設定自訂錯誤提示訊息。 （我覺得就是自己寫個函數，點時候呼叫就可以）。 2.增強的頁面元素（1）figure元素：figure是個組合元素，可以帶標題figcaption，一個figure只允許放置一個figcaption。 <figure>
<img src="logo.png" alt="HTML5新增元素、標籤總結">
<figcaption>标志</figcaption>
</figure>(2)details元素:details提供了一種替代Javascript的、將畫面上局部區域進行展開或收縮的方法. <details>
<summary>点击我查看细节</summary>
<p>我是细节内容。</p>
</details>（3） mark元素：mark元素表示頁面需要突出顯示或高亮顯示的部分。 （4）progress元素：一般用於寫進度條，可以給progress設定value和max屬性，value表示已經進行的，max表示總數，value和max只能為有效的浮點數，value必須大於0小於等於max。如果不為progress設定這兩個屬性，則是動態顯示正在進行，進度不確定。 （5） meter元素：定義度量衡。 （界定上下的值會有顏色區分）。
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)