亚洲AV乱码一区二区三区林ゆな,八戒.八戒电影免费观看

主頁 > 知識庫 > 標(biāo)記語言——再談清單

標(biāo)記語言——再談清單

點(diǎn)擊這里返回腳本之家　HTML教程　欄目．
上文：標(biāo)記語言——錨點(diǎn)
原文出處 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步之間加上新步驟的話該怎么辦呢?這下我們需要(手動(dòng))為新增步驟之后的所有項(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. 方法B:有序清單

<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li>Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>

我確信這是大多數(shù)人選用的做法,但是這并不代表我們都沒有在某些情況下,因?yàn)槟撤N原因使用方法A.<ol>代表"有序清單"(ordered list),因此語義上我們使用了正確的元素解決手上的問題.方法B還有什么特別之處? 自動(dòng)編號
或許你發(fā)現(xiàn)我們不必手動(dòng)為每個(gè)清單項(xiàng)目加上編號了,在使用了<ol>時(shí),會自動(dòng)依照順序產(chǎn)生編號,如果我們的步驟清單內(nèi)包含了超過100個(gè)項(xiàng)目,而我們需要在中間插入幾個(gè)新步驟時(shí),我們只需要簡單的在正確的位置插入新的<li>項(xiàng)目就行了,瀏覽器會自動(dòng)重新編號,簡直就跟魔術(shù)一樣.
如果使用方法A的話,我們就需要在插入每個(gè)項(xiàng)目的時(shí)候手動(dòng)修正所有編號,我隨便都能想到比這更有趣的工作可以做...
圖8-2,十一版瀏覽器顯示方法B的效果,在每個(gè)步驟之前都自動(dòng)加上編號.

圖8-2 瀏覽器顯示方法B的效果愉快的包裝者,第二部
方法B的另一個(gè)好處是,很長的清單項(xiàng)目在換行的時(shí)候,會縮進(jìn)到產(chǎn)生的編號后面,而方法A則會折到編號下面(圖8-3)

圖8-3 比較方法A和方法B換行效果清單種類
雖然有序清單的預(yù)設(shè)編號樣式通常是阿拉伯?dāng)?shù)字(1,2,3,4,5等),但是我們能通過使用CSS的list-style-type屬性換掉編號樣式.而list-style-type能在以下幾種任選其一: decimal: 1,2,3,4,...(通常是預(yù)設(shè)值) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: 不加上編號
因此,舉例來說,如果我們想讓方法B產(chǎn)生大寫羅馬編號的話,我們就能夠以下的CSS達(dá)成目的:

ol li {
list-style-type: upper-roman;
}

圖8-4就是方法B配上這份CSS在瀏覽器內(nèi)的顯示效果,我們的步驟列表現(xiàn)在不再是預(yù)設(shè)的阿拉伯?dāng)?shù)字,而是改用羅馬數(shù)字編號了.當(dāng)然,標(biāo)記的部分仍然完全相同.改變主意了嗎?只要做點(diǎn)小小的修改,換上先前列出的其他樣式,就能馬上把清單的編號方式改成你喜歡的樣子.

圖8-4 換用羅馬數(shù)字的有序清單
HTML的type屬性:之前可能有些人會直接在<ol>標(biāo)簽中使用type屬性,把清單的編號方式換成羅馬數(shù)字,英文字母等等,然而,為了支持稍早所述的CSS規(guī)則,從HTML 4.01標(biāo)準(zhǔn)開始就不建議使用type屬性了,因此,你不應(yīng)該再使用type屬性,應(yīng)該改用CSS.
稍后,在技巧延伸中,我們會以CSS為這個(gè)有序清單加上樣式.但現(xiàn)在讓我們先看看另一個(gè)清單種類的例子.

標(biāo)簽：懷化煙臺黃山通遼山南湘潭賀州湖北

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《標(biāo)記語言——再談清單》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。