不必要的<div>

除了減少指定樣式所需的分類屬性外,還有另一個精簡標(biāo)簽的簡單方法:那就是當(dāng)<div>標(biāo)簽里有塊級元素時,就把<div>去掉,接下來看看這兩個例子.

方法A:使用<div>

<div id="nav">
  <ul>
    <li><a href="archives.html">Archives</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>

這是個非常小巧的導(dǎo)航條,只以一個無序清單構(gòu)成,我們?yōu)榘≌麄€清單的<div>指定了nav作為id.

但是<ul>和<div>一樣是塊級元素,為什么不直接為它指定id呢?讓我們看看方法B.

方法B:去掉<div>

<ul id="nav">
  <li><a href="archives.html">Archives</a></li>
  <li><a href="about.html">About</a></li>
</ul>

方法B顯示能直接使用ul,扔掉多余的<div>,任何定位,內(nèi)外補丁之類的樣式設(shè)定同樣能指定給<ul>,就像指定給<div>一樣簡單.因此轉(zhuǎn)而扔掉外包標(biāo)簽,所見一部分標(biāo)記源碼.

有個重點必須留意,那就是這個做法只在nav不包含<ul>以外的標(biāo)簽時才適用,舉例來說,里面不能有多余的段落,<blockquote>或者<form>.由于這些標(biāo)簽通常不適合放在<ul>中,因此以<div>作為外包標(biāo)簽應(yīng)該更有道理.然而,對于方法A,方法B所舉的例子來說,無序清單是唯一內(nèi)涵的標(biāo)簽,因此扔掉<div>就說得通,事實上,考慮所有外包標(biāo)簽的存在意義十分重要,它真的需要放在哪里嗎?有沒有現(xiàn)存的塊級元素可以使用?簡潔的標(biāo)記代碼不難辦到.

其他例子

另一個可以扔掉<div>的情形是外包<form>的情況,舉例來說,如果原本是這樣的話:

<div id="myform">
  <form>
    ... form elements here ...
  </form>
</div>

其實能用更簡單的寫法:

<form id="myform">
  ... form elements here ...
</form>

同樣的,如果網(wǎng)站的頁尾只包含單一段落,除了這樣寫之外:

<div id="footer">
  <p>Copyright 1999-2004 Dan Cederholm</p>
</div>

也能寫成這樣:

<p id="footer">Copyright 1999-2004 Dan Cederholm</p>

當(dāng)然只有在頁尾只包含一個段落的時候才能如此修改.

歸納

看了兩種精簡標(biāo)簽代碼的簡單方法,首先是節(jié)制的使用分類屬性,并且以繼承選擇器設(shè)定樣式;再來是直接為現(xiàn)存的單一塊級元素指定id,而不用多余的<div>外包它們.

這些方法看起來只能節(jié)省無關(guān)緊要的一點大小,但是當(dāng)開始為整個網(wǎng)站實施這些方法之后,精簡,結(jié)構(gòu)化的代碼就會逐漸明朗,也會寫出更靈活,符合語義,未來更容易維護(hù)的內(nèi)容.

在"技巧延伸"中,讓我們看看如何進(jìn)一步發(fā)揮繼承選擇器的威力,為嵌套狀清單指定樣式,并且把它做成網(wǎng)站地圖.

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 標(biāo)記語言——精簡標(biāo)簽 [3] 下一頁 標(biāo)記語言——精簡標(biāo)簽 [5]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。