|
不必要的<div>
除了減少指定樣式所需的分類屬性外,還有另一個(gè)精簡(jiǎn)標(biāo)簽的簡(jiǎn)單方法:那就是當(dāng)<div>標(biāo)簽里有塊級(jí)元素時(shí),就把<div>去掉,接下來(lái)看看這兩個(gè)例子.
方法A:使用<div>
<div id="nav">
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
這是個(gè)非常小巧的導(dǎo)航條,只以一個(gè)無(wú)序清單構(gòu)成,我們?yōu)榘≌麄�(gè)清單的<div>指定了nav作為id.
但是<ul>和<div>一樣是塊級(jí)元素,為什么不直接為它指定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)外補(bǔ)丁之類的樣式設(shè)定同樣能指定給<ul>,就像指定給<div>一樣簡(jiǎn)單.因此轉(zhuǎn)而扔掉外包標(biāo)簽,所見(jiàn)一部分標(biāo)記源碼.
有個(gè)重點(diǎn)必須留意,那就是這個(gè)做法只在nav不包含<ul>以外的標(biāo)簽時(shí)才適用,舉例來(lái)說(shuō),里面不能有多余的段落,<blockquote>或者<form>.由于這些標(biāo)簽通常不適合放在<ul>中,因此以<div>作為外包標(biāo)簽應(yīng)該更有道理.然而,對(duì)于方法A,方法B所舉的例子來(lái)說(shuō),無(wú)序清單是唯一內(nèi)涵的標(biāo)簽,因此扔掉<div>就說(shuō)得通,事實(shí)上,考慮所有外包標(biāo)簽的存在意義十分重要,它真的需要放在哪里嗎?有沒(méi)有現(xiàn)存的塊級(jí)元素可以使用?簡(jiǎn)潔的標(biāo)記代碼不難辦到.
其他例子
另一個(gè)可以扔掉<div>的情形是外包<form>的情況,舉例來(lái)說(shuō),如果原本是這樣的話:
<div id="myform">
<form>
... form elements here ...
</form>
</div>
其實(shí)能用更簡(jiǎn)單的寫法:
<form id="myform">
... form elements here ...
</form>
同樣的,如果網(wǎng)站的頁(yè)尾只包含單一段落,除了這樣寫之外:
<div id="footer">
<p>Copyright 1999-2004 Dan Cederholm</p>
</div>
也能寫成這樣:
<p id="footer">Copyright 1999-2004 Dan Cederholm</p>
當(dāng)然只有在頁(yè)尾只包含一個(gè)段落的時(shí)候才能如此修改.
歸納
看了兩種精簡(jiǎn)標(biāo)簽代碼的簡(jiǎn)單方法,首先是節(jié)制的使用分類屬性,并且以繼承選擇器設(shè)定樣式;再來(lái)是直接為現(xiàn)存的單一塊級(jí)元素指定id,而不用多余的<div>外包它們.
這些方法看起來(lái)只能節(jié)省無(wú)關(guān)緊要的一點(diǎn)大小,但是當(dāng)開(kāi)始為整個(gè)網(wǎng)站實(shí)施這些方法之后,精簡(jiǎn),結(jié)構(gòu)化的代碼就會(huì)逐漸明朗,也會(huì)寫出更靈活,符合語(yǔ)義,未來(lái)更容易維護(hù)的內(nèi)容.
在"技巧延伸"中,讓我們看看如何進(jìn)一步發(fā)揮繼承選擇器的威力,為嵌套狀清單指定樣式,并且把它做成網(wǎng)站地圖.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [3] 下一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [4]
