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新標簽解釋及用法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM