第4章 列表的建立和使用
学前必读：
列表元素是网页设计中使用频率非常高的元素，在传统网站设计上，无论是新闻列表，还是产品或是其他内容，均需要以列表的形式来体现。通过列表标记的使用能使这些内容在网页中条理清晰、层次分明、格式美观地表现出来，本章将重点介绍列表标记的使用。
本章重点：
● 使用无序列表
● 使用有序列表
● 列表条目元素
● 定义列表元素
4.1 使用无序列表
所谓无序列表是指列表中的各个元素在逻辑上没有先后顺序的列表形式。在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
4.1.1 无序列表标记ul
无序列表（Unordered List）是一个没有特定顺序的相关条目（也称为列表项）的集合，在无序列表中，各个列表项之间属并列关系，没有先后顺序之分。ul用于设置无序列表，各个列表之间没有顺序级别之分。
基本语法：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
…
</ul>
语法介绍：
在该语法中，<ul>和</ul>标记表示无序列表的开始和结束，<li>则表示一个列表项的开始。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无序列表标记</title>
</head>
<body>
<p>
<b>云南特产</b>
</p>
<ul>
<li>大理 木雕工艺</li>
<li>大理 雕梅炖梅</li>
<li>怒江 独龙毯</li>
<li>罗平小黄姜</li>
<li>猴头菇</li>
<li>丽江 鸡粽</li>
<li>丽江 铜器< /li>
<li>丽江 蜂糖梨</li>
</ul>
</body>
</html>
代码分析：
在代码中，加粗的标记用于设置无序列表，在浏览器中浏览效果如图4.1 所示，可以看到列表之间没有顺序之分。
图4.1 设置无序列表
提示：不能将数字列表作为一个无序列表的一部分或附属列表，却能够使用嵌套列表项产生于数字列表项的下一层中。
4.1.2 无序列表的类型type
默认情况下，无序列表的项目符号是●，type属性规定列表的项目符号的类型，避免列表符号的单调。
基本语法：
<ul type="符号类型">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
…
</ul>
语法介绍：
在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，如表4.1所示。
表4.1 无序列表的序号类型
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置无序列表的类型</title>
</head>
<body>
<p>
<b>云南特产</b>
</p>
<ul type="square">
<li>大理木雕工艺</li>
<li>大理雕梅炖梅</li>
<li>怒江 独龙毯</li>
<li>罗平小黄姜</li>
<li>猴头菇</li>
<li>丽江 鸡粽</li>
<li>丽江 铜器< /li>
<li>丽江 蜂糖梨</li></ul>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置无序列表类型为方块，在浏览器中预览可以看到效果，如图4.2所示。
图4.2 无序列表类型为方块
4.1.3 菜单列表标记menu
<menu>标签可以定义一个菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，menu标签是成对出现的，以<menu>开始，</menu>结束。
基本语法：
<menu>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
…
</menu>
语法介绍：
在该语法中，<menu>和</menu>标志着菜单列表的开始和结束。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单列表标记</title>
</head>
<body>
<b>民族风情</b>
<menu>
<li>云南旅游布依族</li>
<li>云南旅景颇族</li>
<li>云南旅游泸沽湖介绍</li>
<li>云南旅游傣族泼水节</li>
<li>石宝山歌会</li>
<li>普米族节日</li>
</menu>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置菜单列表，在浏览器中预览效果，如图4.3所示。
图4.3 菜单列表
4.1.4 目录列表dir
目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。通过<dir>和<li>标记建立目录列表。
基本语法：
<dir>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
…
</dir>
语法介绍：
在该语法中，<dir>和</dir>标志着目录列表的开始和结束。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目录列表</title>
</head>
<body>
<p>列表</p>
<dir>
<li>无序列表</li>
<li>有序列表</li>
<li>目录列表</li>
</dir>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置目录列表，在浏览器中预览，可以看到目录列表的效果，如图4.4所示。
图4.4 目录列表效果
4.2 使用有序列表
有序列表使用编号而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和start属性。
4.2.1 有序列表标记ol
有序列表中各个列表项使用编号排列，列表中的项目有先后顺序，一般采用数字或字母作为顺序号。
基本语法：
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
…
</ol>
语法说明：
在该语法中，<ol>和</ol>标记标志着有序列表的开始和结束，而<li>和</li>标记表示这是一个列表项。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表标记</title>
</head>
<body> <b>各项工作也呈现出蒸蒸日上的好势头。主要表现在以下几个方面：</b>
<ol>
<li>是争创一流实现新突破。</li>
<li>是服务中心取得新成效。</li>
<li>是干部素质实现新提高。</li>
<li>是机关形象实现新改观。</li>
</ol>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是有序列表标记，在浏览器中预览，可以看到有序列表的序号，如图4.5所示。
4.2.2 有序列表的类型type
在有序列表的默认情况下，使用数字序号作为列表的开始，可以通过type属性将有序列表的类型设置为英文或罗马字母。
图4.5 有序列表效果
基本语法：
<ol type="序号类型">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
…
</ol>
语法说明：
有序列表的序号类型如表4.2所示。
表4.2 有序列表的序号类型
实例说明：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表的类型</title>
</head>
<body>
<b>各项工作也呈现出蒸蒸日上的好势头。主要表现在以下几个方面：</b>
<ol type="a">
<li>是争创一流实现新突破。</li>
<li>是服务中心取得新成效。</li>
<li>是干部素质实现新提高。</li>
<li>是机关形象实现新改观。</li>
</ol>
</body>
</html>
在代码中，加粗的代码标记将有序列表的序号类型设置为“a”，表示使用小写英文字母编号，在浏览器中浏览，效果如图4.6所示。
图4.6 设置有序列表的类型
提示：罗马数字不适合于数字较大的项目编号，不仅显示空间需要调整，而且一般用户很难直观地把罗马数字同阿拉伯数字联系起来，因此大小写罗马数字编号一般用在20以内的编号中。
4.2.3 有序列表的起始数值start
在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。
基本语法：
<ol start="起始数值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
…
</ol>
代码介绍：
在该语法中，起始数值只能是数字，但是同样可以对字母和罗马数字起作用。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表的起始数值</title>
</head>
<body>
<b>各项工作也呈现出蒸蒸日上的好势头。主要表现在以下几个方面：</b>
<ol type="a" start="3">
<li>是争创一流实现新突破</li>
<li>是服务中心取得新成效</li>
<li>是干部素质实现新提高</li>
<li>是机关形象实现新改观</li>
</ol>
</body>
</html>
代码分析：
在代码中，加粗的代码标记将有序列表的起始数值设置为从第3个小写英文字母开始，在浏览器中浏览，效果如图4.7所示。
图4.7 设置有序列表的起始数值
4.3 列表条目元素<li>
除了对列表标记<ol></ol>进行属性设置外，我们还可以对列表项标记<li></li>进行属性设置。
4.3.1 项目符号的类型属性type
使用列表项属性标记<li></li>的type属性，可以指定单个列表项的符号或编号，在列表标记<ol></ol>的type属性和列表项标记<li></li>的type属性发生冲突的情况下，所指定的单个列表项遵循<li></li>的type属性进行显示。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>项目符号的类型属性</title>
</head>
<body>
<p><strong>享受待遇：</strong>
<ol type="A">
<li>终身享受一流的国际化专业销售、管理等各项培训；</li>
<li type="1">底薪+佣金+奖金+管理津贴+长期服务奖等多达20项收入+旅游等；</li>
<li>一旦录用，将享受完善的福利待遇（意外保险、医疗保险等）；</li>
<li>广阔的发展空间，公平、公开、透明的晋升制度。</li>
</ol>
<br />
</body>
</html>
代码分析：
在代码中，加粗的代码标记type="1"，将第二个列表项的样式变为阿拉伯数字“2”，在浏览器中浏览，效果如图4.8所示。
图4.8 项目符号的类型
4.3.2 条目编号属性value
4.3.1节列表项标记的type属性只能改变当前列表项的符号或编号的样式，并不会改变其值的大小，而使用列表项标记<li></li>的Value属性，可以改变当前列表项的编号大小，并会影响其后所有列表项的编号大小，但该属性只适用于有序列表。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>条目编号属性</title>
</head>
<body>
<p><strong>享受待遇：</strong>
<ol type="A">
<li>终身享受一流的国际化专业销售、管理等各项培训；</li>
<li value="4">底薪+佣金+奖金+管理津贴+长期服务奖等多达20项收入+旅游等；</li>
<li>一旦录用，将享受完善的福利待遇（意外保险、医疗保险等）；</li>
<li>广阔的发展空间，公平、公开、透明的晋升制度。</li>
</ol>
<br />
</body>
</html>
代码分析：
在代码中，加粗的代码标记value="4"的值仍需取阿拉伯数字“4”，而不能取大写英文字母“D”，此时尽管列表类型type="A"，第二个列表项以后从字母“D”开始编写，在浏览器中浏览，效果如图4.9所示。
图4.9 条目编号属性
4.4 定义列表元素<dl>
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好像字典对文字进行解释一样。通过<dl>、<dt>、<dd>标记建立定义列表。
基本语法：
<dl>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
</dl>
语法说明：
<dl></dl>标记用来创建定义列表，<dt></dt>标记用来创建列表中的上层项目，此标记只能在<dl></dl>标记中使用，显示时<dt></dt>标记定义的内容将左对齐。<dd></dd>标记用来创建列表中的下层项目，此标记也只能在<dl></dl>标记中使用，显示时<dd></dd>标记定义的内容将相对于<dt></dt>标记定义的内容向右缩进。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义列表元素</title>
</head>
<body>
<p><strong>公司招聘信息：</strong>
<dl>
<dt>职位要求：</dt>
<dd>女，158CM以上，五官端正，身体健康。</dd>
<dd>有一年以上工作经验，爱岗敬业，作风正派，无不良嗜好，无犯罪前科。</dd>
<dd>实行8小时工作制，月休4天，本职位一经录用，公司即提供具有竞争力的薪酬福利待遇。</dd>
<dt>享受待遇：</dt>
<dd>终身享受一流的国际化专业销售、管理等各项培训；</dd>
<dd>底薪+佣金+奖金+管理津贴+长期服务奖等多达20项收入+旅游等；</dd>
<dd>一旦录用，将享受完善的福利待遇（意外保险、医疗保险等）；</dd>
<dd>广阔的发展空间，公平、公开、透明的晋升制度。</dd>
</dl><br />
<br />
</body>
</html>
代码分析：
在代码中，加粗的部分用<dt></dt>标记定义了上层项目“职位要求”和“享受待遇”，并用<dd></dd>标记分别定义了其相应的下层项目，它们之间以缩进的形式使层次清晰，效果如图4.10所示。
图4.10 定义列表
4.5 课后习题
1.填空题
（1）无序列表标记<ul>的type属性可以指定出现在列表前的项目符号的样式，其取值可以是______、______和______3种。
（2）有序列表标记<ol>的type属性可以指定出现在列表前的项目编号的样式，其取值可以是______、______、______、______、______和______5种。
（3）使用有序列表标记的______属性后，用户则可以改变编号的起始值，该属性值是一个______，表示从哪一个数字或字母开始编号。
（4）使用列表项标记<li></li>的______属性，用户可以指定单个列表项的符号（对于无序列表而言）或编号（对与有序列表而言）。
（5）使用列表项标记<li></li>的______属性，可以改变当前列表项的编号大小，并会影响其后所有列表项的编号大小，但该属性只适用于______中。
2.操作题
根据本章所学的知识，采用有序列表技术编写出具有如图4.11所示的运行效果的程序。
图4.11 列表