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，增加该属性后的单⾏⽂本框类似选择框()，但允许⽤户⾃定义输⼊，为了避免没有⽀持该元素的浏览器出现错误，我们通常使⽤CSS设置不显⽰。
<datalist> 标签：定义可选数据的列表。与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
order:<input list="list" name="order" autofocus type="text" id="order">
<datalist id="list" >
<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 ElementById("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元素表⽰页⾯需要突出显⽰或⾼亮显⽰的部分。
html中提交表单用什么属性（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元素表⽰⼏个⼈之间的对话。
该博⽂转⾃奔跑的铃铛

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。