|
上文：標(biāo)記語言——錨點(diǎn)
標(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 8 再談清單
先前在第一章,我們討論過幾種標(biāo)記清單的做法,研究以<ul>和<li>將它們標(biāo)記成無序清單的好處.這個(gè)方法能標(biāo)識清單的結(jié)構(gòu),確保所有瀏覽器與設(shè)備都能正確顯示它的內(nèi)容,同時(shí)也讓我們能以CSS為它加上各種樣式.
而在各種環(huán)境下,處理個(gè)別問題時(shí)標(biāo)記清單的所有做法寫出來的話塞滿整本書都不難,我不打算塞滿整本書,但是我的確打算以獨(dú)立一章討論除了無序清單之外的其他幾種清單類別.研究幾種適合使用清單的狀況.
清單是個(gè)組織頁面結(jié)構(gòu)的強(qiáng)大工具,為每個(gè)獨(dú)立的項(xiàng)目加上意義,讓你能在稍后以css加上獨(dú)立的樣式.
讓我們先來看看編了號的項(xiàng)目清單,以及兩種標(biāo)記這類清單的做法.或許你一眼就能看出哪種方法比較有益,但是我仍會再度詳細(xì)說明這個(gè)例子,以便強(qiáng)調(diào)結(jié)構(gòu)化標(biāo)記,使用正確工具解決問題的重要性.
編號項(xiàng)目清單的標(biāo)記法,哪種最好?
假設(shè)你打算標(biāo)記一個(gè)步驟清單,每個(gè)項(xiàng)目之前都有編號,我們將會研究兩種能夠達(dá)成這個(gè)目標(biāo)的不同方法,同時(shí)說明為何某個(gè)方法比較適用.
方法A:亂中有序
<ul>
<li>1. Chop the onions.</li>
<li>2. Saute the onions for 3 minutes.</li>
<li>3. Add 3 cloves of garlic.</li>
<li>4. Cook for another 3 minutes.</li>
<li>5. Eat.</li>
</ul>
前面這份清單可能是烹飪歷史上最糟糕的食譜之一.但是拿來當(dāng)簡單的例子還蠻合適的,加點(diǎn)鹽和雞蛋可能好些,或是...不管,回到正題.
方法A我們選擇以無序清單標(biāo)記這些步驟,以便獲得我們在第一章提過的所有好處,我們?yōu)閮?nèi)容加上結(jié)構(gòu),同時(shí)知道大多數(shù)瀏覽器,屏幕閱讀器以及其他設(shè)備都能正確處理這部分內(nèi)容,稍侯我們也能用css輕易為它指定樣式,很棒!但是...
數(shù)字游戲
由于這是個(gè)有編號的清單,因此我們在每個(gè)項(xiàng)目之前加上編號,編號之后跟著句號,以便標(biāo)識每個(gè)步驟的順序,但是如果稍侯需要在第2步,第3步之間加上新步驟的話該怎么辦呢?這下我們需要(手動)為新增步驟之后的所有項(xiàng)目重新編號.對這個(gè)清單來說,不是什么麻煩事,但是如果你正在修改某個(gè)具有100個(gè)項(xiàng)目的清單時(shí),修改過程就會變得非常冗長乏味了.
出現(xiàn)小圓點(diǎn)符號
由于我們以無序清單標(biāo)記這個(gè)示例中的結(jié)構(gòu),因此在每個(gè)編了號的項(xiàng)目之前都會看到一個(gè)小圓點(diǎn)符號(就像圖8-1),你或許會喜歡小圓點(diǎn)符號,如果不喜歡的話當(dāng)然可以通過CSS把它去掉,但是不使用CSS瀏覽這個(gè)清單的時(shí)候一定會再看到這些小圓點(diǎn)符號.
圖8-1,瀏覽器關(guān)閉CSS閱讀方法A的結(jié)果
有個(gè)更簡單,更具意義,更容易維護(hù)的方法,讓我們看看方法B.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 標(biāo)記語言——再談清單 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 標(biāo)記語言——再談清單 [1]
第 2 頁 
