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

特别说明：本文介绍的标签，目前兼容性都很差（虽然部分标签有对应的polyfill），仅供学习和了解，请勿用于生产环境。同时，DEMO仅限Chrome浏览器预览。

想着在年前把博客更新升级一下，于是顺手修复了一些已知的BUG，优化了留言模块，升级了nginx，更是为了利于SEO，在webpack的编译中加入了prerender-spa-plugin预渲染模块。经本地window主机测试后，一切OK。这便着手在线上Linux主机中配置，nginx, node, mongod 等的升级一切顺利，但就是在项目中 npm install 的时候卡住了，而且这一卡就是一天多！难道是我安装姿势不对，需要起来重睡？ 查看npm报错原因，就出现在本文的主角phantomjs上。

关于phantomjs，无论是在之前的项目中写单元测试，录制UIrecorder测试用例时都遇到过，但仅仅也是遇到而已，只以为仅仅是一个依赖模块，照着文档npm install一下，对其甚至连基本的了解都没有，于是问题就出现了。