- 精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)
- 王英英
- 535字
- 2025-02-24 03:50:50
2.3 文字列表
文字列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷地获得相应信息。HTML中的文字列表如同文字编辑软件Word中的项目符号和自动编号。
2.3.1 建立无序列表<ul>
无序列表相当于Word中由项目符号引导的选项,项目排列没有顺序,只以符号作为分项标识。无序列表使用一对标记<ul></ul>,其中每一个列表项使用<li></li>标记,其结构如下所示:

在无序列表结构中,使用<ul></ul>标记表示这一个无序列表的开始和结束,<li>则表示一个列表项的开始。在一个无序列表中可以包含多个列表项,并且<li>可以省略结束标记。下面的实例使用无序列表实现文本的排列显示。
【例2.7】(实例文件:ch02\2.7.html)

在IE 11.0中的预览效果如图2-10所示。读者会发现,在无序列表项中可以嵌套列表。例如,“系统分析”列表项和“伪网页草图”列表项中都有下级列表,因为在这对<li></li>标记间又增加了一对<ul></ul>标记。

图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)

在IE 11.0中的预览效果如图2-11所示。读者可以从中看到新添加的有序列表。

图2-11 有序列表的效果