布局与divs ...你可以有太多？ [英] Layout with divs... can you have too many?
问题描述
开发布局的最佳做法是什么？更好地限制divs？我正在浏览一些热门网站的html / css，他们似乎都在div中有div。例如，整个页面的div，顶部栏的div，标志顶部栏的div，搜索栏等。
这是一个很好的实践？我认为正确定位所有的div比放置div中的必要元素更容易。这是我一直在做这些，但要确保我正在学习正确的方法。
对此有任何帮助表示赞赏。感谢！
在需要时使用< div> divide （这就是 div s应该用于）页面的各个部分。例如，来自内容的页眉/页脚，或博客上的个人帖子。
但是，当语义上另一个元素有意义时，不应使用它们。
如果前面提到的博客中的存档仅显示归档中每篇文章的两行摘要，则随着您定义的项目列表处于有序状态，有序列表可能会更有意义。 < li> 元素也是块元素，并且可以以完全相同的方式进行样式设置。
嵌套< div> 标签是有意义的，有时候你不应该这样做。
作为基本测试，想象你的页面正在由读者为视障用户解析。它需要知道文档的每个节点中的内容，以便它能够正确地通告它。它不关心你的视觉CSS需要什么，它只是想尽可能准确地解析它。
要记住的基本点：
- 编写HTML主要用于结构而不是视觉效果
- 查看您的网站的人可能不会使用您的CSS >
- 浏览您的网站的人可能不会使用传统的网页浏览器
- 如果CSS不起作用，您可以随时调整结构，同样的语义。
What is the best practice for developing a layout? Is better to limit divs? I was looking through the html/css of some popular sites and they all seem to have divs within divs. For instance, a div for the entire page, a div for the topbar, a div within the top bar for the logo, search bar, etc.
Is this a good practice? I suppose it's easier to position all the divs correctly and than place the necessary elements within the divs. It's what I've been doing this far but want to make sure I'm learning the correct approach.
Any help on this is appreciated. Thanks!
Use <div>s when you need to divide (that's what divs are supposed to be used for) sections of your page from one another. Header/footer from content for instance, or individual posts on a blog.
However, you shouldn't use them when semantically another element would make sense.
If the archive on the previously mentioned blog only showed a two line summary of every post in the archive, an ordered list might make more sense as you are defining a list of items which are in order. <li> elements are block elements as well and can be styled in exactly the same way.
Sometimes, it will make sense to have nested <div> tags, and sometimes you shouldn't.
As a basic test, imagine your page is being parsed by a reader for a visually impaired user. It needs to know what is in each node of the document so it can announce it properly. It doesn't care what your visual CSS needs are, it just wants to parse it into speech as accurately as possible.
Basic points to remember:
- Write your HTML primarily for structure not visuals
- The person viewing your website may not be using your CSS
- The person viewing your website may not be using a conventional web browser
- You can always tweak your structure if the CSS doesn't quite work, providing it remains the same semantically.
这篇关于布局与divs ...你可以有太多？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
