|
上文：Chapter 8 再談清單
標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語法談起
Chapter 9 精簡標(biāo)簽
先前我們不斷提到結(jié)構(gòu)化內(nèi)容能夠把結(jié)構(gòu)與設(shè)計(jì)細(xì)節(jié)分類并精簡標(biāo)簽,該怎么做呢?我們可以使用符合標(biāo)準(zhǔn)的XHTML與CSS代替表格,圖片制作我們所需要的版面.
使用標(biāo)準(zhǔn)技術(shù)制作網(wǎng)站(特別是十分依賴CSS的網(wǎng)站)的時(shí)候,我們常常會養(yǎng)成一個不太好的習(xí)慣,就是加上多余的標(biāo)簽和class屬性,技術(shù)完全不需要它們.
通過在CSS中使用集成選擇器(descendant selectors),我們就能消除多余的<div>,<span>與分類屬性.精簡標(biāo)簽代表頁面將能讀取得更快,同時(shí)更容易維護(hù),在這一章中,我們會討論幾個完成這項(xiàng)任務(wù)的簡單做法.
以標(biāo)準(zhǔn)技術(shù)制作網(wǎng)站時(shí),如何精簡標(biāo)簽?
精簡標(biāo)簽是個值得討論的重要話題,制作網(wǎng)站時(shí),用合法的XHTML書寫,用CSS設(shè)定展示效果能得到的巨大好處之一,就是精簡標(biāo)簽.簡短的代碼代表著下載速度加快,對于使用56k撥號上網(wǎng)的用戶來說,這絕對是關(guān)鍵,簡短的代碼也代表服務(wù)器空間需求,帶寬消耗減少,這能讓老板,系統(tǒng)管理者開心.
問題在于,單純的確定頁面符合W3C標(biāo)準(zhǔn)規(guī)范并不代表內(nèi)容所使用的代碼會縮短,你當(dāng)然能為符合標(biāo)準(zhǔn)的標(biāo)記內(nèi)容加上各種不需要的標(biāo)簽,沒錯,他的確符合標(biāo)準(zhǔn),但可能為了讓設(shè)計(jì)CSS的時(shí)候方便一點(diǎn),加了不少多余的代碼.
別怕!這邊有些技巧,讓你能設(shè)計(jì)出簡潔,有符合標(biāo)準(zhǔn)的標(biāo)記內(nèi)容,但也同時(shí)保留足夠的CSS樣式控制能力.接著讓我們學(xué)習(xí)幾個精簡標(biāo)簽的簡單技巧.
繼承選擇器
在這里我們要看看兩種在個人網(wǎng)站標(biāo)記側(cè)邊欄(包括信息,鏈接和其他東西)的做法.把所有好東西塞進(jìn)一個id是"sidebar"的<div>里,以便稍后把它放到瀏覽器視窗中的某一處(第二部分將會討論CSS布局 / 排版功能).
方法A:高興的分類
<div id="sidebar">
<h3 class="sideheading">About This Site</h3>
<p>This is my site.</p>
<h3 class="sideheading">My Links</h3>
<ul class="sidelinks">
<li class="link"><a href="archives.html">Archives</a></li>
<li class="link"><a href="about.html">About Me</a></li>
</ul>
</div>
我在許多網(wǎng)站上看過類似方法A的標(biāo)記內(nèi)容,在設(shè)計(jì)者剛發(fā)現(xiàn)CSS的威力的時(shí)候,很容易感動過頭,為每個想要制定特殊樣式的標(biāo)簽指定class.
以前面這個例子來說,或許我們認(rèn)為<h3>指定class=sideheading是為了幫助它們指定與頁面之內(nèi)其他標(biāo)題不同的樣式;為<ul>和<li>指定class也是為了同樣的理由.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 標(biāo)記語言——精簡標(biāo)簽 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 標(biāo)記語言——精簡標(biāo)簽 [1]
第 2 頁 
