HTML里面的role本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div的role="button",辅助工具就可以认出这实际上是个button。比如下面的代码:
<div?role="checkbox"?aria-checked="checked"></div>
辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。
<header>元素定义文档的组合页面,通常是一些导航信息,在这个标签中通常包含section的头部信息,比如h1-h6标签、导航(nav)、搜索等,但是这些都不是必需的,可以根据自己的需要来定义内容,代码如下:
<footer>元素用于定义文档的尾部,一般包含相关链接、版权等信息。当然<footer>标签内不仅可以包含<p>标签,还可以包含<nav>、<ul>、<div>等其他元素,这些都是可以根据自己需求来定义的,代码如下:
<nav>标签主要用于构建导航,显示导航链接。比如在<header>中添加导航链接,代码如下:
HTML 5中article标签用于表示文档、页面,用来显示一块独立的文字信息内容。article标签是可以嵌套的,常用于网站新闻、博客等,代码如下:
HTML 5中的section元素定义为文档中的节,比如章节、页面、页脚或者文档其他部分等,代码如下:
当然,HTML 5中还有许多其他新标签,比如:
hgroup:对网页标题元素进行组合,一般情况是对h1-h6标签的分组。
audio:定义音频内容。
canvas:定义一个画布功能。
dialog:定义一个对话框。
video:定义一个视频内容。
HTML 5中新定义的标签远不止这些,作者主要介绍常用的html5常用标签。