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

为什么80%的码农都做不了架构师？>>>   

在做网站过程过比较典型的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会导致代码臃肿，也不利于页面的美化和维护。

转载于:https://my.oschina.net/dxc8/blog/54327