在現(xiàn)實生活中每個人都會接觸到各式各樣的列表信息,去超市購物前會羅列一張購物清單,購物完畢結(jié)賬時需要排隊等候,結(jié)賬完畢會收到結(jié)賬清單。諸如此類的情況出現(xiàn),我們都可以將其視為列表。購物清單是列表,排隊等候的人群是列表,結(jié)賬清單還是列表,如此之多的列表出現(xiàn)在大家的身邊,你是否注意到了呢。
網(wǎng)絡(luò)生活近似于現(xiàn)實生活,在現(xiàn)實生活中隨處可見的列表,在網(wǎng)頁中也是可以看到的。例如,當(dāng)我們在網(wǎng)絡(luò)中購物時,會選擇很多東西放入購物車中,那么在購物車中看到的物品列表;網(wǎng)購?fù)戤吀顿~后看到的購物清單列表等。
網(wǎng)頁中的列表并非都是顯而易見的,例如,網(wǎng)站的導(dǎo)航其實也是列表,用戶在某個站點中排名也是列表。這么多的列表是不是讓你感覺有點暈眩了?不用擔(dān)心,在分析各個列表在網(wǎng)站建設(shè)時如何運用之前,先了解一下HTML中的3種列表模式:無序列表(ul)、有序列表(ol)和自定義列表(dl)。
無序列表就是沒有次序的列表,列表項目不分先后。以生活中去超市購物為例,不會考慮先買什么再買什么,而是看到所需物品就直接放到購物車中。<ul>標(biāo)簽表示無序列表的集合,并且<ul>標(biāo)簽中一定是緊跟<li>標(biāo)簽才是正確的寫法。
<ul>
<li>無序列表中的其中一條內(nèi)容</li>
<li>無序列表中的其中一條內(nèi)容</li>
</ul>
HTML對標(biāo)簽有著相對嚴(yán)格的要求,每個標(biāo)簽都必須關(guān)閉,而且每個標(biāo)簽之間的嵌套要正確,尤其是列表的結(jié)構(gòu)。下面羅列幾種在HTML中無序列表的錯誤嵌套方法。
?錯誤一:<ul>標(biāo)簽和<li>標(biāo)簽之間插入了其他的標(biāo)簽。
<ul>
<li>無序列表中的其中一條內(nèi)容</li>
<li>無序列表中的其中一條內(nèi)容</li>
<div>錯誤的無序列表嵌套結(jié)構(gòu)</div>
</ul>
?錯誤二:多層<ul>標(biāo)簽嵌套時的錯誤。
<ul>
<li>錯誤的無序列表嵌套結(jié)構(gòu)</li>
<ul>
<li>錯誤的無序列表嵌套結(jié)構(gòu)</li>
</ul>
</ul>
?錯誤三:<li>標(biāo)簽未關(guān)閉。
<ul>
<li>錯誤的無序列表嵌套結(jié)構(gòu)
<ul>
<li>錯誤的無序列表嵌套結(jié)構(gòu)</li>
</ul>
<li>錯誤的無序列表嵌套結(jié)構(gòu)</li>
</ul>
以上幾種錯誤的寫法糾正后,應(yīng)該以如下形式書寫。
?錯誤一的糾正,將<div>標(biāo)簽放到<ul>標(biāo)簽的外面,或者刪除。
<ul>
<li>無序列表中的其中一條內(nèi)容</li>
<li>無序列表中的其中一條內(nèi)容</li>
</ul>
<div>將該標(biāo)簽內(nèi)容移出<ul>標(biāo)簽的嵌套,或者刪除</div>
?錯誤二的糾正,多層ul無序列表標(biāo)簽嵌套時,應(yīng)該將<ul>標(biāo)簽放在<li>標(biāo)簽之間。
<ul>
<li>多層<ul>標(biāo)簽嵌套時
<ul>
<li><ul>標(biāo)簽應(yīng)該放在<li>標(biāo)簽之間</li>
</ul>
</li>
</ul>
?錯誤三的糾正,關(guān)閉<li>標(biāo)簽即可。
<ul>
<li>將<li>標(biāo)簽關(guān)閉即可
<ul>
<li>將<li>標(biāo)簽關(guān)閉即可</li>
</ul>
</li>
<li>將<li>標(biāo)簽關(guān)閉即可</li>
</ul>
在網(wǎng)頁設(shè)計中,無序列表可以分為一級無序列表和多級無序列表,一級無序列表在瀏覽器中解析后,會在列表<li>標(biāo)簽前面添加一個小黑點的修飾符,而多級無序列表則會根據(jù)級數(shù)而改變列表前面的修飾符。
一級無序列表,在無任何樣式修飾的瀏覽器默認(rèn)解析時顯示效果。
<ul>
<li>一級無序列表的瀏覽器默認(rèn)解析后的頁面效果</li>
<li>一級無序列表的瀏覽器默認(rèn)解析后的頁面效果</li>
</ul>
多級無序列表,在無任何樣式修飾的瀏覽器默認(rèn)解析時顯示效果。
<pre class="duokan-codeblock-interactive duokan-code"><ul>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果1
<ul>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果2</li>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果2</li>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果2
<ul>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果3</li>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果3</li>
</ul>
</li>
</ul>
</li>
<li>多級無序列表的瀏覽器默認(rèn)解析后的頁面效果1</li>
</ul>
通過效果圖可以發(fā)現(xiàn)無序列表在隨著其所包含的列表級數(shù)的增加而逐漸縮進(jìn),并且隨著列表級數(shù)的增加而改變不同的修飾符。瀏覽器在解析無序列表時,會不斷地對不同級別的無序列表進(jìn)行縮進(jìn)顯示,但修飾符卻只有3種。如果3層嵌套都無法滿足網(wǎng)頁中所需要使用的無序列表時,讀者就應(yīng)該反思這個頁面中的列表嵌套是否過多了。
合理地使用HTML標(biāo)簽才能讓頁面的結(jié)構(gòu)更加清晰,相對地更符合語義。不過不用擔(dān)心,如果網(wǎng)頁設(shè)計中實在需要更多層嵌套,并且是不同的修飾符時,還是可以利用CSS樣式來修改其修飾符的。