HTML5(一)——新增元素和属性

自 H5 诞生以来，在 html4.0 中有些元素已被 H5 废弃，但是在 H5 中添加了很多新元素以及功能，今天我们学习 H5 中新增的元素和属性都有哪些？

新增语义结构标签

新增标签使用时根据描述内容，在适当的地方使用新标签，应用的时候和其他标签是一样的，H5 新增标签使得网页结构更清晰明了，建议大家使用新增元素。

新增表单元素

<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 - 规定允许设置的最小值。
• 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