Html 在初始布局中命名div的最佳实践

这里是新手问题。我正处于根据我所做的草图，用HTML/CSS设计网站的开始阶段。所以我在主页上计划我的div，我想知道如何命名它们，哪些元素应该有自己的容器。到目前为止，我有以下几点：

• 容器（包含页面上的所有内容）
• 标题（将包含徽标和链接，它们在视觉上是连接的）
• 页脚
• 内容（仅包含播放音频曲目的小部件）

现在，我还想在页面右侧的侧边栏中添加其他三个元素：

• 包含来自我的博客的RSS提要的一些标题/描述的框
• 包含即将发生事件的几个日期的方框
• 包含指向我的其他网站的链接的框

我正在寻找关于如何处理那些“边栏”元素的div的最佳（我想也是最“语义”）方法的意见。由于我的计划是让这三个框相互对齐，我应该只创建一个主“侧栏”DIV，然后为每个元素创建单独的DIV（“提要框”、“事件框”和“链接框”），还是应该没有“侧栏”DIV（这不意味着样式/位置吗？），而只使用三个特定的DIV

另外，我应该给那个包含音频小部件的盒子一个“内容”的id（即使我知道它到底是什么），还是应该是类似“音频小部件”的东西？（谁知道，也许一年后，它会保存其他类型的内容。）

你认为这种命名的最佳实践是什么？我意识到没有一个正确的答案，对这些名字过于纠结可能是迂腐的。但处理这种命名的“最佳”方式对我来说并不明显，我想从一开始就弄清楚我为什么要采用给定的命名约定

---

谢谢。

您需要问的第一个问题是：您的布局是固定宽度还是可变宽度

如果它是固定宽度的，通常的做法是将所有内容包装在一个整体div中（通常称为“container”或“wrapper”）。您已经有了这个

然后，布局其他div的方式会影响它们在文档中的显示顺序（例如，使用float往往会“颠倒”自然顺序）

我可能会有这样的东西：

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="sidebar">
    <div id="headlines"></div>
    <div id="events"></div>
    <div id="links"></div>
  </div>
  <div id="footer"></div>
</div>

---

唯一正确的答案是使用尽可能少的容器来完成任务。然后提供一个ID值。请记住每个ID值都必须是唯一的。不要仅仅为了有额外的命名约定而添加额外的div元素。div是一个语义元素，其含义是文档的一个部分，经常被滥用。

下面是我的建议推荐。我更喜欢将

id=“container”

保留并可用于内容（与页眉或页脚相反）节

id。这样，内容节id元素就可以使用

id=“content”

，而且我不必担心冲突

<div class="container">
  <div class="header">
    <div class="headerLeft"></div>
    <div class="headerMiddle"></div>
    <div class="headerRight"></div>
    <div style="clear:both"></div>
  </div>
  <div class="content">
    <div class="contentLeft"></div>
    <div class="contentMiddle">
      <div id="style" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Style
      </div>
      <div id="content" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Content
      </div>
      <div id="originality" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Originality
      </div> 
    </div>
    <div class="contentRight">
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
    </div>
    <div style="clear:both"></div>
  </div>
  <div class="footer">
    <div class="footerLeft"></div>
    <div class="footerMiddle"></div>
    <div class="fooderRight"></div>
    <div style="clear:both"></div> 
  </div>
</div>

---

+1对于清晰的语义代码和解释，但我不太同意“使用浮动倾向于”颠倒“自然顺序”。当然可以，但我不会说它“倾向于”。尽管如此，这是一个很好的答案。除此之外，如果标题、事件和链接都是链接列表（

）那么只需
就足够了。即
• 链接

  <div class="container">
    <div class="header">
      <div class="headerLeft"></div>
      <div class="headerMiddle"></div>
      <div class="headerRight"></div>
      <div style="clear:both"></div>
    </div>
    <div class="content">
      <div class="contentLeft"></div>
      <div class="contentMiddle">
        <div id="style" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
          Style
        </div>
        <div id="content" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
          Content
        </div>
        <div id="originality" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
          Originality
        </div> 
      </div>
      <div class="contentRight">
        <div class="feedBox"></div>
        <div class="eventsBox"></div>
        <div class="linksBox"></div>
        <div class="feedBox"></div>
        <div class="eventsBox"></div>
        <div class="linksBox"></div>
      </div>
      <div style="clear:both"></div>
    </div>
    <div class="footer">
      <div class="footerLeft"></div>
      <div class="footerMiddle"></div>
      <div class="fooderRight"></div>
      <div style="clear:both"></div> 
    </div>
  </div>
  

  .container { width: 960px; margin: 0 auto; }
  .header{ background-color:#000000; color:#FFFFFF; }
  .headerLeft{ width:0px; float:left; }
  .headerMiddle{ width: 960px; float:left; }
  .headerRight{ width: 0px; float:right; }
  .content { background-color:#000000; color:#FFFFFF;}
  .contentLeft { width: 200px; float: left; color:#FFFFFF;}
  .contentMiddle{ width: 680px; float: left; min-height:550px; background-color:#FFFFFF; color:#000000;}
  .contentRight{ width: 180px; float: right; color:#FFFFFF;}
  .footer { background-color:#000000; color:#FFFFFF; }
  .footerLeft { width:0px; float:left; }
  .footerMiddle { width: 960px; float:left; }
  .footerRight { width: 0px; float:right; }
  .feedBox {}
  .eventsBox {}
  .linksBox {}