首頁 > web前端 > H5教程 > 主體

HTML5新增元素、標籤總結

高洛峰
發布: 2016-10-17 10:04:03
原創
2036 人瀏覽過

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

 標籤:定義可選資料的清單。與 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文字方塊類似,用於電話;

     格式的位址;

      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)

 标签:定义 section 或 document 的页脚。

(17)

 标签:定义 section 或 document 的页眉。
(18)
 标签:用于对网页或区段(section)的标题进行组合。

(19)

 标签:用于对网页或区段(section)的标题进行组合。

(20)

(21) 标签:定义不同类型的输出,比如脚本的输出。

(22) 标签:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

(23) 标签:定义字符(中文注音或字符)的解释或发音。

(24) 标签:定义 ruby 注释(中文注音或字符)。

(25)

 标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
(26) 标签:为媒介元素(比如

(27)

 标签:details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

(28)

(29)

 (30) 

标签:定义对话(会话)dialog元素表示几个人之间的对话。


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!