在現實(shí)生活中每個(gè)人都會(huì )接觸到各式各樣的列表信息，去超市購物前會(huì )羅列一張購物清單，購物完畢結賬時(shí)需要排隊等候，結賬完畢會(huì )收到結賬清單。諸如此類(lèi)的情況出現，我們都可以將其視為列表。購物清單是列表，排隊等候的人群是列表，結賬清單還是列表，如此之多的列表出現在大家的身邊，你是否注意到了呢。

網(wǎng)絡(luò )生活近似于現實(shí)生活，在現實(shí)生活中隨處可見(jiàn)的列表，在網(wǎng)頁(yè)中也是可以看到的。例如，當我們在網(wǎng)絡(luò )中購物時(shí)，會(huì )選擇很多東西放入購物車(chē)中，那么在購物車(chē)中看到的物品列表；網(wǎng)購完畢付賬后看到的購物清單列表等。

網(wǎng)頁(yè)中的列表并非都是顯而易見(jiàn)的，例如，網(wǎng)站的導航其實(shí)也是列表，用戶(hù)在某個(gè)站點(diǎn)中排名也是列表。這么多的列表是不是讓你感覺(jué)有點(diǎn)暈眩了？不用擔心，在分析各個(gè)列表在網(wǎng)站建設時(shí)如何運用之前，先了解一下HTML中的3種列表模式：無(wú)序列表（ul）、有序列表（ol）和自定義列表（dl）。

無(wú)序列表

無(wú)序列表就是沒(méi)有次序的列表，列表項目不分先后。以生活中去超市購物為例，不會(huì )考慮先買(mǎi)什么再買(mǎi)什么，而是看到所需物品就直接放到購物車(chē)中。<ul>標簽表示無(wú)序列表的集合，并且<ul>標簽中一定是緊跟<li>標簽才是正確的寫(xiě)法。

<ul>    

<li>無(wú)序列表中的其中一條內容</li>    

<li>無(wú)序列表中的其中一條內容</li>

</ul>

HTML對標簽有著(zhù)相對嚴格的要求，每個(gè)標簽都必須關(guān)閉，而且每個(gè)標簽之間的嵌套要正確，尤其是列表的結構。下面羅列幾種在HTML中無(wú)序列表的錯誤嵌套方法。   

?錯誤一：<ul>標簽和<li>標簽之間插入了其他的標簽。

<ul>    

<li>無(wú)序列表中的其中一條內容</li>    

<li>無(wú)序列表中的其中一條內容</li>    

<div>錯誤的無(wú)序列表嵌套結構</div>

</ul>   

?錯誤二：多層<ul>標簽嵌套時(shí)的錯誤。

<ul>    

<li>錯誤的無(wú)序列表嵌套結構</li>    

<ul>        

<li>錯誤的無(wú)序列表嵌套結構</li>    

</ul>

</ul>

 ?錯誤三：<li>標簽未關(guān)閉。

<ul>    

<li>錯誤的無(wú)序列表嵌套結構        

<ul>            

<li>錯誤的無(wú)序列表嵌套結構</li>        

</ul>    

<li>錯誤的無(wú)序列表嵌套結構</li>

</ul>

以上幾種錯誤的寫(xiě)法糾正后，應該以如下形式書(shū)寫(xiě)。   

?錯誤一的糾正，將<div>標簽放到<ul>標簽的外面，或者刪除。

<ul>    

<li>無(wú)序列表中的其中一條內容</li>    

<li>無(wú)序列表中的其中一條內容</li>

</ul>

<div>將該標簽內容移出<ul>標簽的嵌套，或者刪除</div>

 ?錯誤二的糾正，多層ul無(wú)序列表標簽嵌套時(shí)，應該將<ul>標簽放在<li>標簽之間。

<ul>    

<li>多層<ul>標簽嵌套時(shí)        

<ul>            

<li><ul>標簽應該放在<li>標簽之間</li>        

</ul>    

</li>

</ul>   

?錯誤三的糾正，關(guān)閉<li>標簽即可。

<ul>    

<li>將<li>標簽關(guān)閉即可        

<ul>            

<li>將<li>標簽關(guān)閉即可</li>        

</ul>    

</li>    

<li>將<li>標簽關(guān)閉即可</li>

</ul>

在網(wǎng)頁(yè)設計中，無(wú)序列表可以分為一級無(wú)序列表和多級無(wú)序列表，一級無(wú)序列表在瀏覽器中解析后，會(huì )在列表<li>標簽前面添加一個(gè)小黑點(diǎn)的修飾符，而多級無(wú)序列表則會(huì )根據級數而改變列表前面的修飾符。

一級無(wú)序列表，在無(wú)任何樣式修飾的瀏覽器默認解析時(shí)顯示效果。

<ul>    

<li>一級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果</li>    

<li>一級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果</li>

</ul>

多級無(wú)序列表，在無(wú)任何樣式修飾的瀏覽器默認解析時(shí)顯示效果。

<pre class="duokan-codeblock-interactive duokan-code"><ul>    

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果1 

<ul>            

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果2</li>            

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果2</li>            

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果2                

<ul>                    

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果3</li>                    

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果3</li>                

</ul>            

</li>        

</ul>    

</li>    

<li>多級無(wú)序列表的瀏覽器默認解析后的頁(yè)面效果1</li>

</ul>

通過(guò)效果圖可以發(fā)現無(wú)序列表在隨著(zhù)其所包含的列表級數的增加而逐漸縮進(jìn)，并且隨著(zhù)列表級數的增加而改變不同的修飾符。瀏覽器在解析無(wú)序列表時(shí)，會(huì )不斷地對不同級別的無(wú)序列表進(jìn)行縮進(jìn)顯示，但修飾符卻只有3種。如果3層嵌套都無(wú)法滿(mǎn)足網(wǎng)頁(yè)中所需要使用的無(wú)序列表時(shí)，讀者就應該反思這個(gè)頁(yè)面中的列表嵌套是否過(guò)多了。

合理地使用HTML標簽才能讓頁(yè)面的結構更加清晰，相對地更符合語(yǔ)義。不過(guò)不用擔心，如果網(wǎng)頁(yè)設計中實(shí)在需要更多層嵌套，并且是不同的修飾符時(shí)，還是可以利用CSS樣式來(lái)修改其修飾符的。