divs的布局...你可以有太多的？

开发布局的最佳实践是什么？更好地限制divs？我正在浏览一些热门网站的html/css，他们似乎都在div中有div。例如，整个页面的div，顶部栏的div，徽标顶部栏的div，搜索栏等。divs的布局...你可以有太多的？

这是一个很好的做法吗？我认为正确定位所有的div比放置div中的必要元素更容易。这是我一直在做这些，但想确保我正在学习正确的方法。

对此的任何帮助表示赞赏。谢谢！

2011-11-26 jstacks

我今天很快就读到了这个，并对'divitis'进行了一些更深入的研究，碰到了这篇文章，它非常值得一读！ http://www.yourinspirationweb.com/en/why-tables-and-divitis-make-your-site-inaccessible/#comment-8130 – Dan

使用<div> s当您需要divide（这就是div应该用于）页面的各个部分。例如来自内容的页眉/页脚，或博客上的单个帖子。
但是，当语义上另一个元素有意义时，您不应该使用它们。

如果前面提到的博客上的存档仅显示存档中每个帖子的两行摘要，那么随着您定义一系列正在排序的项目，排序列表可能会更有意义。 <li>元素也是块元素，并且可以以完全相同的方式进行样式设置。

有时，嵌套<div>标签会有意义，有时您不应该。
作为一项基本测试，假设您的页面正在被读者解析，供视障用户使用。它需要知道文档的每个节点中的内容，以便它能够正确地通告它。它不关心你的视觉CSS需求是什么，它只是想尽可能准确地将其解析为语音。

基本点要记住：

主要是写你的HTML的结构没有视觉
浏览网站的人可能没有使用你的CSS
浏览网站的人可能无法使用传统的网页浏览器
如果CSS不起作用，您可以随时调整结构，只要它在语义上保持不变即可。

来源

2011-11-26 17:48:42

感谢那个信息。这很有帮助。似乎div内的div在结构上可能是有用的。然而，我看到谷歌和Facebook用他们的html做什么是过度的？例如，你可以进入他们的标题htmls（让我们以FB为例），你会看到他们的徽标，搜索栏，左侧图标，右侧图标等的特定div ID。这个更好的结构？而不是将所有这些项目放在一个头部div中？ – jstacks

谷歌和Facebook需要符合任何人使用的各种网络浏览器，包括IE6的Web开发者的祸根。因此，他们不得不在浏览器中包含大量浏览器特定的黑客，以便进行一致的渲染，也就是我提到的“调整”。你可能不需要做这样的事情，因为现在IE6在很大程度上是可以忽略的。这取决于谁将使用您的网站。 –

A <div>顾名思义就是一个没有意义的元素，所以无论你有多少人都没有关系。

但是，只要有意义，您需要在页面上有<div> s，并且如果存在更适合作业的元素（语义），则不要使用它们。

<div>This is a paragraph of text</div>

实际上应该是

<p>This is a paragraph of text</p>

而这样的。

来源

2011-11-26 17:02:13

这很有道理。在可能的情况下，我将确保使用语义语言来指定某些内容而不是div，因为div应该用于构造。我想我想确保我不是“过度结构化”（请参考上面关于查看FB，Google和其他许多使用div内的div来构造其内容的其他站点的评论），我想使确定这是正确的方法）。 – jstacks

HTML中有这种“代码异味”的名称：Divitis。

您应该向您展开有关HTML中标记的语义含义的知识。您可以从阅读this article开始，但它更侧重于html4.01和xhtml。 HTML5中有几个新标签，而现有HTML4标签的语义含义几乎没有变化。

来源

2011-11-26 17:09:33

一个大问题是一般是否使用div或表。表格造成了许多令人头疼的问题，其中一些问题无法解决。但divs也可能有他们的问题。

无论你使用什么，嵌套的级别确实可以使页面难以理解。所以你应该喜欢最少的嵌套层次。同时，努力不去嵌套也会使HTML难以理解。

来源

2011-11-26 17:11:34 dnuttle

我认为很少有能力的现代网页设计师只使用表格数据来表格。构成这种二分法是不准确的。 – bookcasey

我在一个涉及分析和更改客户网站HTML的领域工作，其中许多人都是主要零售商。我经常遇到表被滥用的情况。 – dnuttle

divs的布局...你可以有太多的？

回答

相关问题