H5页面布局及最常用结构化标签详解（2）

上一篇文讲述了H5的结构化标签，这一篇文将继续讲解H5其他常用标签及标签之间的区别。

①time

顾名思义，时间标签

②address

主要用于作者名、维护者名、网站链接、电子邮箱、邮编等，一般出现在footer。

③figure

对元素进行组合，类似于dl、dt、dd，通常表示图片，代码实例等。

④datalist

搜索时的提示框，option内容可以改为动态数据。（可以给input添加autocomplete属性，自动完成允许浏览器预测对字段的输入；当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项）

⑤fieldset

在一组控件周围建立边框，表明这些控件是相关的并用为由legend标签为一组控件添加标题，一般用在form表单中。

页面显示效果

⑥optgroup

对option进行分类显示。

显示效果

⑦map与area

标记图像热点区域用的，如一张世界地图，点击对应区域跳到对应区域介绍的页面，具体各参数介绍请参考w3c讲述。

⑧ruby与rt

这个标签绝对是为中国设计的，哈哈，因为它的作用是为汉字注音。

对于不支持ruby的浏览器，注意会自动放在rp的括号里，居于文字右侧；对于竖向显示的文字，它会显示到右边；当拼音过长时，建议调整其字体大小，避免放不下。

⑨progress

进度条，在不同浏览器显示效果不同，我一般是自己写，很少用这个标签。

⑩其他简单标签

这里只说一点：

■ h1-h6来表示标题 

■ em来表示强调的文本 

■strong标签来表示重要文本

■ mark来表示标注的/突出显示的文本

■ 在没有其他合适标签更合适时，才应该把b作为最后的选项。

■ big/center/u标签已过时，可以使用css替代，ins给文字下划线。

其他H5标签或因不符合W3C标准，或因IE完全不兼容，或因实在太不实用，故未列举；如果你有补充，请直接留言，万分感谢！