《CSS實戰精粹》讀書筆記（一）詳解

一些有語義的html標籤

一些有語義的html標籤

是否真的需要div標籤？是否真的需要一個class屬性？
自打CSS被越來越多的設計人員瞭解，在頁面設計的時候，總是經常含有太多div標籤或者是class屬性。那麼，在真實情況下，這些div標籤是否真的有必要？這個class屬性是否有必要加？在使用div時，根據上一條規則，你要想一下，在HTML中是否有比div更合適的標籤存在，不要過分的迷戀div標籤。
不要將單個元素包含進 div 標籤中
上面只是書中的一個建議，其實有很多時候我們都並不需要div標籤，看書中的例子吧：
<div id="menu">
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
</div>這樣不是更好嗎？還可以減少一層dom結構，要知道dom層次太多的話，無論是我們尋找DOM元素還是頁面載入速度，都是有影響的。
<ul id="menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
程式員們還會在本該只需要在一個父物件上使用一次 class 屬性的時候，在多個重複的元素中重複使用 class 屬性
關於class屬性的錯誤用法，這裡也舉一個樣本吧，同樣是抄的：
<ul>
  <li class="cheese-type">Cheddar</li>
  <li class="cheese-type">Mozzarella</li>
  <li class="cheese-type">Parmesan</li>
  <li class="cheese-type">Swiss</li>
</ul>這兩種方法，哪個更優雅，自己想吧？
<ul class="cheese-types">
  <li>Cheddar</li>
  <li>Mozzarella</li>
  <li>Parmesan</li>
  <li>Swiss</li>
</ul>
不要忽略 DOCTYPE 標籤
這裡不解釋HTML與XHTML的關係，也不說DOCTYPE標籤使用的各種規範，如果感興趣大家可以在這裡找到 http://www.w3schools.com/tags/tag_DOCTYPE.asp。
自己寫頁面時，很少會寫DOCTYPE標籤，除非是IDE自動建立的，否則，真的懶的去寫。用書中的話來講就是：最被低估的標籤。
那麼，DOCTYPE標籤到底能幹什嗎？呵呵，這裡網上相關的討論很多，不再綴述，只是把W3C中的原話拿過來吧。呵。
Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document.
For example, specifying the doctype of your document allows you to use tools such as the Markup Validator to check the syntax of your (X)HTML. Such tools won’t be able to work if they do not know what kind of document you are using.
But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a “standard” rendering mode.
現代Web文檔的三層結構
一個Web文檔一般由三個階層組成，其中(X)HTML是文檔的結構層，CSS是文檔的表現層，而JavaScript則是文檔的行為層。