3.1 列表元素
文字列表可以有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML中的文字列表如同文字编辑软件Word中的项目符号和自动编号。
3.1.1 无序列表<ul>
3-1 列表元素UL
无序列表相当于Word中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标识。无序列表使用一对标记<ul></ul>，其中每一个列表项使用<li></li>，其具体语法格式如下：
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
在无序列表结构中，使用<ul></ul>标记表示这一个无序列表的开始和结束，<li>则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且<li>可以省略结束标记。
例题3-1：使用无序列表实现文本的排列显示。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌套无序列表的使用</title>
</head>
<body>
<h1>网站建设流程</h1>
<ul>
<li>项目需求</li>
<li>系统分析
<ul>
<li>网站的定位</li>
<li>内容的收集</li>
<li>栏目的规划</li>
<li>网站的目录结构设计</li>
<li>网站的标志设计</li>
<li>网站的风格设计</li>
<li>网站的导航系统设计</li>
</ul>
</li>
<li>网页草图
<ul>
<li>制作网页草图</li>
<li>将草图转化为网页</li>
</ul>
</li>
<li>站点建设</li>
<li>网页布局</li>
<li>网站测试</li>
<li>站点发布与管理</li>
</ul>
</body>
</html>
在浏览器中预览的效果如图3-1所示。读者会发现，无序列表项中可以嵌套一个列表。如代码中的“系统分析”列表项和“网页草图”列表项中都有下级列表，因为在这对<li></li>标记中又增加了一对<ul></ul>标记。
图3-1 嵌套无序列表的网页运行效果
3.1.2 有序列表<ol>
3-2 列表元素OL
有序列表类似于Word中的自动编号功能，有序列表的使用方法和无序列表的使用方法基本相同，它使用标记<ol></ol>，每一个列表项使用<li></li>。每一个项目都有前后顺序之分，通常用数字表示，其具体语法格式如下：
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
例题3-2：使用有序列表实现文本的排列显示。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>有序列表的使用</title>
</head>
<body>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>橘子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>橘子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>橘子</li>
</ol>
</body>
</html>
在浏览器中预览的效果如图3-2所示。读者可以看到不同类型的有序列表。
图3-2 有序列表的网页运行效果
3.1.3 描述性列表<dl> 、<dt> 、<dd>
3-3 列表元素DL
描述性列表又称定义列表，是由<dl>标签结合<dt>（定义列表中的项目）和<dd>（描述列表中的项目）组成的，其具体语法格式如下：
<dl>
<dt>内容块的标题</dt>
<dd>内容</dd>
</dl>
通过实例来进一步学习描述性列表的使用方法。
例题3-3：描述性列表的使用。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>描述性列表的使用</title>
</head>
<body>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ．.. ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ．.. ...</dd>
</dl>
</body>
</html>
在浏览器中预览的效果如图3-3所示。
图3-3 描述性列表的网页运行效果