HTML5中有很多十分有趣的标签,相比于article
/section
等这些我们所熟知并且已经应用的标签,还有些标签或者因为兼容性,或者因为还处于草稿阶段而不那么为人所知。在使用Bootstrap
/Element
等UI组件时,常常看到某个标签上会应用一些如role="dialog"
的不常见的属性,这是因为HTML语义化的需要。role
属性主要供有障碍人士使用,作用是告诉如屏幕朗读程序等辅助程序当前元素所扮演的角色。由于HTML5标签本身已经实现了语义化,role
属性不建议被添加。而对于一些老浏览器或者一些模拟元素(如div模拟dialog),role
属性则应该被注明。Bootstrap
中有很多注明了role
属性的组件,而这些组件有一部分已经被HTML5所实现,并已经标签化,如dialog
,progress
等。当然,这些标签的原始样式各个浏览器不统一,并且可以说很简陋,对此,可以通过一些自定义CSS样式来进行优化。
特别说明:本文介绍的标签,目前兼容性都很差(虽然部分标签有对应的polyfill),仅供学习和了解,请勿用于生产环境。同时,DEMO仅限Chrome浏览器预览。