真正关注和学习HTML5才刚有一个多月,感觉有些落伍了。深切体会到,做前端的人千万懒不得,要不断更新补充新知识,这样才能更加适应工作需要。

虽然HTML5的标准发布还需要些年月,但各大主流浏览器(像Safari、Chrome、Opera和Firefox等)都已积极参与到HTML5标准的制定和推广中;且已有为数不少的网站已经在采用HTML5标准来设计和开发。所以,学习和使用HTML5已势在必行。

初做这个决定时,还是有些茫然, 不知从何学起,不过好在网络资源丰富,下载了HTML5手册,并搜藏了相关HTML5的技术论坛等等。有空就会挨着看一看。但说真的,百看不如一试,这些知识如果只是看是不容易弄懂并记住的,而且有时候会以为自己懂了,其实根本没懂。之所以说这么多,是因为最近完成的一个基于HTML5标准的小网站深有体会。

初步着手感觉挺简单,就是将

换成:

还有就是使用新标签元素header、nav、footer、aside等替换掉以前用id命名来区别各区块的div。完成后用默认的火狐浏览器测试通过,就这样,我毫无困难的完成了一个HTML5网页的输出,当然我心里是充满疑惑的,感觉没这么简单。确实,当我在IE6浏览器打开时,有些傻眼了,是乱的,好像所有的样式都没用的那样。后来搜索了下,发现原来遇到的是个根本性问题,IE6无法识别HTML5新元素,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式,难怪。与此同时了解到针对IE浏览器比较好的解决方案——html5shiv,html5shiv主要就是解决IE6-8不能识别HTML5新元素的问题,它通过执行 document.createElement(elementName)使CSS样式能应用在IE6-8的未知元素上。真是得感谢html5shiv的作者。下面分享下具体解决办法:

添加如下三行代码到你的html文件中,且注意,一定要放在head标签内,这是为了让IE6在元素解析前认识那些新元素:

这里调用了html5shiv作者放在Google code project上的JS文件,当然我建议大家把它下载下来直接放到我们的项目文件中调用。

此外,上面的是针对IE的一个判断语句,只有在IE浏览器中才会被识别并加载;而在其它浏览器理解下,它不过是个注释,不会被执行的。