html - 标记和 CSS : why so many div's before the actual content?

Question

所以，我练习了 HTML/CSS，想构建一个简单的子标题，与在 http://www.phppennyauctiondemo.com/ 上看到的完全一样(div id="sub-header"，分类部分)。

我是这样做的:

<div id="sub-header">
  <div class="sub-mid">
  <ul id="nav">
    <li><a href="">All items (1)</a></li>
    <li><a href="">Shops and Coupons</a></li>
    <li><a href="">Kids toys</a></li>
    &nbsp;
  </ul>
  </div>
</div>

#sub-header
{
    background: url("/images/front_layout/header_sub_bg.gif") repeat-x;
    height: 31px;
    border-top:1px solid #708044;
    border-bottom:1px solid #d4dde1;
}

#sub-header .sub-mid
{
    width: 950px;
    margin: 0 auto;
}
#nav
{
    padding: 4px 0;
}

#nav li
{
    padding: 0 3px;
    border-right: 1px solid #B1C0C5;
    float: left;
}
#nav li a
{
    padding: 3px 8px;
    color: #607E87;
    text-shadow: 1px 1px 0 #FFFFFF;
    height:15px;
    display: block;
}

这看起来与它们的子标题(在 Firefox 中)完全一样。

但是当我查看他们的标记和 CSS 时，我在实际内容之前看到了更多的 div，然后我使用了更多的 CSS:

<div id="sub-header" class="clearfix">

            <div  align="center">

                <div style="width:950px; text-align:left;">

                        <div id="select-categories">

        <ul id="nav">  UL after 4 divs... </ul>

因为我不是专业的 Web 开发人员，而且我假设是专业人士构建了该页面 - 我的问题是他们为什么使用这么多 div 而没有做任何事情？

关于 CSS/HTML 有什么我不知道的吗？

Answer 1

使用那么多 div 是一种我们称之为“divitis”的疾病。它来自于让开发人员忘记他可以经常使用 ul、p 等元素来定位和设置样式而无需将它们包装在 div 中的病症。通常，您可以删除这些额外的 div 元素而不会造成任何伤害，除非可能需要重写 CSS 来解决这个问题。

还没有找到疫苗，只有时间和经验有帮助。