上QQ阅读APP看书，第一时间看更新
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）
<!DOCTYPE html> <html> <head> <title>有序列表的使用</title> </head> <body> <h1>本讲目标</h1> <ol> <li>网页的相关概念 </li> <li> 网页与HTML</li> <li> Web标准（结构、表现、行为）</li> <li> 网页设计与开发的过程 </li> <li>与设计相关的技术因素</li> <li> HTML简介 </li> </ol> </body> </html>
在IE 11.0中预览效果如图2-11所示。读者可以看到新添加的有序列表。
图2-11 有序列表的效果