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設定不顯示。

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="/static/imghw/default1.png"  data-src="logo.png"  class="lazy"   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)

标签:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。aside可以用于网站页尾一排排的广告或者链接，一竖排为一个aside。也可以用于博客侧栏。

（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元素表示几个人之间的对话。