在现实生活中每个人都会接触到各式各样的列表信息，去超市购物前会罗列一张购物清单，购物完毕结账时需要排队等候，结账完毕会收到结账清单。诸如此类的情况出现，我们都可以将其视为列表。购物清单是列表，排队等候的人群是列表，结账清单还是列表，如此之多的列表出现在大家的身边，你是否注意到了呢。

网络生活近似于现实生活，在现实生活中随处可见的列表，在网页中也是可以看到的。例如，当我们在网络中购物时，会选择很多东西放入购物车中，那么在购物车中看到的物品列表；网购完毕付账后看到的购物清单列表等。

网页中的列表并非都是显而易见的，例如，网站的导航其实也是列表，用户在某个站点中排名也是列表。这么多的列表是不是让你感觉有点晕眩了？不用担心，在分析各个列表在网站建设时如何运用之前，先了解一下HTML中的3种列表模式：无序列表（ul）、有序列表（ol）和自定义列表（dl）。

无序列表

无序列表就是没有次序的列表，列表项目不分先后。以生活中去超市购物为例，不会考虑先买什么再买什么，而是看到所需物品就直接放到购物车中。<ul>标签表示无序列表的集合，并且<ul>标签中一定是紧跟<li>标签才是正确的写法。

<ul>    

<li>无序列表中的其中一条内容</li>    

<li>无序列表中的其中一条内容</li>

</ul>

HTML对标签有着相对严格的要求，每个标签都必须关闭，而且每个标签之间的嵌套要正确，尤其是列表的结构。下面罗列几种在HTML中无序列表的错误嵌套方法。   

•错误一：<ul>标签和<li>标签之间插入了其他的标签。

<ul>    

<li>无序列表中的其中一条内容</li>    

<li>无序列表中的其中一条内容</li>    

<div>错误的无序列表嵌套结构</div>

</ul>   

•错误二：多层<ul>标签嵌套时的错误。

<ul>    

<li>错误的无序列表嵌套结构</li>    

<ul>        

<li>错误的无序列表嵌套结构</li>    

</ul>

</ul>

 •错误三：<li>标签未关闭。

<ul>    

<li>错误的无序列表嵌套结构        

<ul>            

<li>错误的无序列表嵌套结构</li>        

</ul>    

<li>错误的无序列表嵌套结构</li>

</ul>

以上几种错误的写法纠正后，应该以如下形式书写。   

•错误一的纠正，将<div>标签放到<ul>标签的外面，或者删除。

<ul>    

<li>无序列表中的其中一条内容</li>    

<li>无序列表中的其中一条内容</li>

</ul>

<div>将该标签内容移出<ul>标签的嵌套，或者删除</div>

 •错误二的纠正，多层ul无序列表标签嵌套时，应该将<ul>标签放在<li>标签之间。

<ul>    

<li>多层<ul>标签嵌套时        

<ul>            

<li><ul>标签应该放在<li>标签之间</li>        

</ul>    

</li>

</ul>   

•错误三的纠正，关闭<li>标签即可。

<ul>    

<li>将<li>标签关闭即可        

<ul>            

<li>将<li>标签关闭即可</li>        

</ul>    

</li>    

<li>将<li>标签关闭即可</li>

</ul>

在网页设计中，无序列表可以分为一级无序列表和多级无序列表，一级无序列表在浏览器中解析后，会在列表<li>标签前面添加一个小黑点的修饰符，而多级无序列表则会根据级数而改变列表前面的修饰符。

一级无序列表，在无任何样式修饰的浏览器默认解析时显示效果。

<ul>    

<li>一级无序列表的浏览器默认解析后的页面效果</li>    

<li>一级无序列表的浏览器默认解析后的页面效果</li>

</ul>

多级无序列表，在无任何样式修饰的浏览器默认解析时显示效果。

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

<li>多级无序列表的浏览器默认解析后的页面效果1 

<ul>            

<li>多级无序列表的浏览器默认解析后的页面效果2</li>            

<li>多级无序列表的浏览器默认解析后的页面效果2</li>            

<li>多级无序列表的浏览器默认解析后的页面效果2                

<ul>                    

<li>多级无序列表的浏览器默认解析后的页面效果3</li>                    

<li>多级无序列表的浏览器默认解析后的页面效果3</li>                

</ul>            

</li>        

</ul>    

</li>    

<li>多级无序列表的浏览器默认解析后的页面效果1</li>

</ul>

通过效果图可以发现无序列表在随着其所包含的列表级数的增加而逐渐缩进，并且随着列表级数的增加而改变不同的修饰符。浏览器在解析无序列表时，会不断地对不同级别的无序列表进行缩进显示，但修饰符却只有3种。如果3层嵌套都无法满足网页中所需要使用的无序列表时，读者就应该反思这个页面中的列表嵌套是否过多了。

合理地使用HTML标签才能让页面的结构更加清晰，相对地更符合语义。不过不用担心，如果网页设计中实在需要更多层嵌套，并且是不同的修饰符时，还是可以利用CSS样式来修改其修饰符的。