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文本框类似，用于电话；

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

标签:定义外部的内容。

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