HTML5新增元素、標籤總結

標籤：

總是遇到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設定不顯示。

<datalist> 標籤:定義可選資料的列表。與 input 元素配合使用，就可以製作出輸入值的下拉式清單。

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文字框類似，用於電話；

      url： 與text文字框類似，用於url格式的地址；

      email： 與text文字框類似，用於email格式的地址；

      number： 與text文字框類似，用於數值；

      range： 只允許輸入一段範圍內的數值，通過min和max屬性來設定範圍；

      color： 顏色文字框，“#000000”格式的文字；

      file： 檔案選擇文字框，HTML5中通過multiple屬性可以多選；

      datetime、date、month、week、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="圖片">        <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)<article>標籤:定義外部的內容。

(11)<aside>標籤:定義 article 以外的內容。aside 的內容應該與 article 的內容相關。aside可以用於網站頁尾一排排的廣告或者連結，一豎排為一個aside。也可以用於部落格側欄。

（12）<audio> 標籤：定義聲音。

（13）<canvas> 標籤：定義圖形（是為了用戶端向量圖形而設計的）。

（14）<command> 標籤：定義命令按鈕，比如選項按鈕、複選框或按鈕。

（15）<embed> 標籤:定義嵌入的內容，比如外掛程式。

（16）<footer> 標籤：定義 section 或 document 的頁尾。

（17）<header> 標籤：定義 section 或 document 的頁首。
（18）<hgroup> 標籤：用於對網頁或區段（section）的標題進行組合。

（19）<hgroup> 標籤：用於對網頁或區段（section）的標題進行組合。

（20）<nav> 標籤：定義導航連結的部分。

（21）<output> 標籤：定義不同類型的輸出，比如指令碼的輸出。

（22）<rp> 標籤：在 ruby 注釋中使用，以定義不支援 ruby 元素的瀏覽器所顯示的內容。

（23）<rt> 標籤：定義字元（中文注音或字元）的解釋或發音。

（24）<ruby> 標籤：定義 ruby 注釋（中文注音或字元）。

（25）<section> 標籤：定義文檔中的節（section、區段）。比如章節、頁首、頁尾或文檔中的其他部分。
（26）<source> 標籤：為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

（27）<summary> 標籤：details 元素的標題，”details” 元素用於描述有關文檔或文檔片段的詳細資料。”summary” 元素應該是 “details” 元素的第一個子項目。

（28）<time> 標籤：定義日期或時間，或者兩者。

（29）<video> 標籤：定義視頻，比如電影片段或其他視頻流。

 (30) <dialog>標籤：定義對話（會話）dialog元素表示幾個人之間的對話。

如有錯誤，請您指正！

 

文章參考連結：

一聚教程網>>網頁製作>>html5教程
大前端>>Html5新標籤解釋及用法

HTML5新增元素、標籤總結