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

1,287 阅读4分钟

自 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 新增标签使得网页结构更清晰明了,建议大家使用新增元素。

新增表单元素

标签描述
datalistinput标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
keygenkeygen 标签规定用于表单的密钥对生成器字段。
outputoutput 标签定义不同类型的输出,比如脚本的输出。

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新增类型和属性

新的输入类型新的输入属性
colorautocomplete
date- autofocus
datetimeform
datetime-localformaction
emailformenctype
monthformmethod
numberformnovalidate
rangeformtarget
searchheight 和 width
tellist
urlmin 和 max
weekmultiple
autofocuspattern (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>

页面上显示如图:

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

表单重写属性:

  • 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。