其实很早就想写HTML5和CSS3的文章了，但是一直都没什么时间写，最近闲下来了，于是就写一下HTML5和CSS3的文章。HTML5出来了有一段时间了，各个主流浏览器基本上都能够支持HTML5，HTML5能够为我们做很多事情，并且轻松的就能够实现非常酷的效果。我们不仅能在网页前端制作上面可以使用HTML5和CSS3，我们还能够在浏览器插件中使用HTML5和CSS3（因为Chrome和Firefo浏览器都支持HTML5），那么我们不如来尝试写一个HTML5的网页或插件。

不过写之前，我们要看看为什么要使用HTML5。关于HTML5的概念，可以去这里看。

我们一般写一个HTML网页的时候，基本上会写如下代码。 

我们可以看到上面的代码是通过Table进化过来的，曾经有一段时间，网页开发人员喜欢使用Table去布局，但是现在，网站开发人员更喜欢使用div去布局，原因就是Table布局不够语义化，也不够方便。使用div去布局就能够语义化，比如 id，class。不过随着网络的发展，这样也有一些坏处，比如，重复的去写id让这个div更有意义，比如有一个id，又包括一个class等等。其实，最主要的还是语义上不清楚，对搜索引擎的优化不够好。那么有了HTML5，我们就可以写成如下代码。

按照上面的方式，我们的代码就更具备意义，所以，HTML5就是为我们解决了这样一个问题，我们无论在写网站还是写浏览器插件的时候，语义不仅能够方便我们的搜索引擎去抓取页面内容，另外一方面更能够方便我们去维护，因为语义，我们写CSS代码也更加简单。

这样，我们的CSS代码也更具有语义性了。好了，说了这么多，简单的来说，使用HTML和CSS3，我们可以去掉所有的class属性和id属性，让分层更加清晰，让代码更加可读，让结构更加简单。

说了这么多，终于可以开始写代码了，这里我写的是一个Chrome插件，不过可以用浏览器去访问，很简单，做的一个下拉菜单，有三种效果，我这里截取了两种效果的图。先看图。

好了，我们有了目标，就写相应的代码把。首先写HTML代码。

不用我多说，你也应该知道是什么意思了，tmenu是菜单，menupopup是菜单一个容器，menuitem就是每个菜单项了。OK，现在我们再来写CSS代码。

CSS代码也是非常好理解的，现在我们就要写菜单的相应的JS代码了，这里我就不贴出JS代码了，代码可以从源代码中下载得到。

小结

其实最后我们从编程实例中可以看出，虽然HTML5和CSS3对开发人员来说没有特别好的编码方面的提升，但是在效果上和语义化上面有了很大的提升，节约了开发人员很多步骤。也随着HTML5的发展，在线视频，在线游戏，在线3D的提出和实现，可以看出未来网络的发展越来越快，越来越丰富，真正的基于浏览器的网络游戏和3D游戏也会随着时间和浏览器的支持流行起来，到时候网络应用和桌面应用的界限也会越来越模糊。

代码下载

Prototype.zip (183.52 kb)

Web前端, 软件开发 html5, css3, 菜单, 实例