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的佈局...你可以有太多的？

回答

相關問題