学习html5系列之比较典型的div滥用

在做网站过程过比较典型的div滥用，在很多网站中都可看到如下比较典型的div滥用情况。

div滥用情况：

<div id="navbar_wrapper">

<div id="navbar">

<ul>

<li><a href="./" title="" target="_blank">网站首页</a></li>

<li><a href="./" title="" target="_blank">新闻中心</a></li>

<li><a href="http://www.18283848.com/website_anli/"; target="_blank">网站案例</a></li>

<li><a href="./" title="" target="_blank">产品中心</a></li>

<li><a href="./" title="" target="_blank">在线招聘</a></li>

<li><a href="http://www.18283848.com/website_contactus/"; target="_blank">联系我们</a></li>

</ul>

</div>

</div>

优化后可实现相同效果：

<ul id="navbar">

<li><a href="./" title="" target="_blank">网站首页</a></li>

<li><a href="./" title="" target="_blank">新闻中心</a></li>

<li><a href="http://www.18283848.com/website_seo/"; target="_blank">建站套餐</a></li>

<li><a href="./" title="" target="_blank">产品中心</a></li>

<li><a href="http://www.18283848.com/website_about/"; target="_blank">关于我们</a></li>

<li><a href="./" title="" target="_blank">联系我们</a></li>

</ul>

最上面的代码定义了一个ul，它是一个块元素。外层的2个div也是块元素。虽然div中的id指明了其作用，但去掉其中1个或2个div后，我们仍然得到相同的效果。过度使用div会导致代码臃肿，也不利于页面的美化和维护。