![精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/776/26846776/b_26846776.jpg)
上QQ阅读APP看书,第一时间看更新
2.3 文字列表
文字列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷地获得相应信息。HTML中的文字列表如同文字编辑软件Word中的项目符号和自动编号。
2.3.1 建立无序列表<ul>
无序列表相当于Word中由项目符号引导的选项,项目排列没有顺序,只以符号作为分项标识。无序列表使用一对标记<ul></ul>,其中每一个列表项使用<li></li>标记,其结构如下所示:
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P41_129321.jpg?sign=1738864101-LTI5vsmuVOkEXFog4KDdYoB0aJov6qQb-0-52a0b828e5250df108303c332f8896e3)
在无序列表结构中,使用<ul></ul>标记表示这一个无序列表的开始和结束,<li>则表示一个列表项的开始。在一个无序列表中可以包含多个列表项,并且<li>可以省略结束标记。下面的实例使用无序列表实现文本的排列显示。
【例2.7】(实例文件:ch02\2.7.html)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P41_129322.jpg?sign=1738864101-F6C5XODl0MW4o0R9hud4wFXD4xabi8Rz-0-35e3d08006fd0cd649e12183f2a976a2)
在IE 11.0中的预览效果如图2-10所示。读者会发现,在无序列表项中可以嵌套列表。例如,“系统分析”列表项和“伪网页草图”列表项中都有下级列表,因为在这对<li></li>标记间又增加了一对<ul></ul>标记。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P42_67310.jpg?sign=1738864101-UgwXZq72gndDJnnKrFBqBoUXRbNHizzA-0-154a7a1fdf2552252e346bc9352d1016)
图2-10 无序列表
2.3.2 建立有序列表<ol>
有序列表类似于Word中的自动编号功能。有序列表的使用方法和无序列表的使用方法基本相同,它使用标记<ol></ol>,每一个列表项使用<li></li>。每个项目都有前后顺序之分,通常用数字表示,其结构如下:
<ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol>
下面的实例使用有序列表实现文本的排列显示。
【例2.8】(实例文件:ch02\2.8.html)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P43_129325.jpg?sign=1738864101-ta8k2bcTJwHmaevgbZEweXxWwS99up25-0-0319ce60e3c34d721c8feb96b6b4e516)
在IE 11.0中的预览效果如图2-11所示。读者可以从中看到新添加的有序列表。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P43_67459.jpg?sign=1738864101-wUhoTYz58ZG8GRCjxnIsSTyXxKdpHU9p-0-f549710747ddd0c25f7dd6af74daf537)
图2-11 有序列表的效果