HTML5（⼀）——新增元素和属性
⾃ H5 诞⽣以来，在 html4.0 中有些元素已被 H5 废弃，但是在 H5 中添加了很多新元素以及功能，今天我们学习 H5 中新增的元素和属性都有哪些？
新增语义结构标签
标签描述
<article>定义页⾯独⽴的内容区域。
<aside>定义页⾯的侧边栏内容。
<bdi>允许您设置⼀段⽂本，使其脱离其⽗元素的⽂本⽅向设置。
<command>定义命令按钮，⽐如单选按钮、复选框或按钮
<details>⽤于描述⽂档或⽂档某个部分的细节
<dialog>定义对话框，⽐如提⽰框
<summary>标签包含 details 元素的标题
<figure>规定独⽴的流内容（图像、图表、照⽚、代码等等）。
<figcaption>定义 <figure> 元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了⽂档的头部区域
<mark>定义带有记号的⽂本。
<meter>定义度量衡。仅⽤于已知最⼤和最⼩值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释（中⽂注⾳或字符）。
<rt>定义字符（中⽂注⾳或字符）的解释或发⾳。
<rp>在 ruby 注释中使⽤，定义不⽀持 ruby 元素的浏览器所显⽰的内容。
<section>定义⽂档中的节（section、区段）。
<time>定义⽇期或时间。
<wbr>规定在⽂本中的何处适合添加换⾏符。
新增标签使⽤时根据描述内容，在适当的地⽅使⽤新标签，应⽤的时候和其他标签是⼀样的，H5 新增标签使得⽹页结构更清晰明了，建议⼤家使⽤新增元素。
新增表单元素
标签描述
<datalist><input>标签定义选项列表。请与 input 元素配合使⽤该元素，来定义 input 可能的值。
<keygen><keygen> 标签规定⽤于表单的密钥对⽣成器字段。
<output><output> 标签定义不同类型的输出，⽐如脚本的输出。
<datalist>属性规定form或input域应该拥有⾃动完成功能，当input聚焦时，浏览器应该在域中显⽰填写的选项。
使⽤ input 元素与 datalist 元素绑定，使⽤时如下：
<form action="">
<input type="text" list="schooltype">
<datalist id="schooltype">
<option value="欧亚驾校">欧亚驾校</option>
<option value="鹏程驾校">鹏程驾校</option>
<option value="学车⽹">学车⽹</option>
</datalist>
</form>
<keygen>元素⽤于提供⽤户验证的⽅法，表单提交时，keygen⽣成表单密钥对，⼀个是公钥，⼀个是私钥，私钥存储在客户端，公钥通过带有keygen字段的表单发送给服务器。⽬前已被H5废弃，我们作为了解就好。
使⽤实例如下：
<form action="">
⽤户名<input type="text" name="user" /><br>
密码<input type="password" name="se"> <br>
加密<keygen name="security"><br>
<input type="submit" value="提交">
</form>
<output>元素⽤于不同类型的输出，对输出结果的展⽰，如对两个数值相加，并展⽰结果，代码如下：<form action="" oninput = "x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" step="1" min="0" max="100"> +
<input type="text" id="b" value="50">=
<output name="x" ></output>
</form>
上述form处添加oninput事件，对数值parseInt进⾏取整运算。
新增表单属性
H5中新增表单属性指 form 和 input 元素新增属性。
form新属性及意义
autocomplete ：规定form域⾃动完成功能。
novalidate ：规定提交表单时是否验证域。
input新增类型和属性
新的输⼊类型新的输⼊属性
color
date datetime datetime-local email month number range search
tel
time
url
week autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list
min 和 max multiple pattern (regexp) placeholder required
step
input 和 form 的 autocomplete属性
属性规定 form 或 input 在当前域下拥有⾃动完成功能，通俗地讲就是元素聚焦时，会⾃动展⽰之前输⼊过的内容，内容是根据当前域名下之前使⽤过的数据。⽰例如下：
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="on" /><br />
<input type="submit" />
</form>
页⾯上显⽰如图：
表单重写属性：
formaction - 重写表单的 action 属性
formenctype - 重写表单 enctype 属性
formmethod - 重写表单 method 属性
formnovalidate - 重写表单 novalidate 属性
formtarget - 重写表单的 target 属性
min、max、step属性
三者⽤于对数字、⽇期类型输⼊框的限制和约束。
min - 规定允许设置的最⼩值。input标签placeholder属性
max - 规定允许设置的最⼤值。
step - 规定合法的数字间隔。
使⽤⽰例，请参照上output处的实例。
multipel属性：规定输⼊域中可选择多个值。适⽤于 email 和 file 两种类型。
pattern属性：验证input域的模式。模式pattern是正则表达式，适⽤于text、search、url、email、password。废除的标签
以下是⼀些在H5中已废弃的元素。
acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt。

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