4.3 使用有序列表
教学录像：光盘\TM\lx\4\使用有序列表．exe
有序列表使用编号来编排项目，而不是使用项目符号。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和start两个属性。
4.3.1 有序列表标记——ol
有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。
语法
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ol>
语法解释
在该语法中，<ol>和</ol>标记标志着有序列表的开始和结束，而<li>标记表示这是一个列表项的开始，默认情况下，采用数字序号进行排列。
【例4.3】实例代码。（实例位置：光盘\TM\sl\4\3）
<html>
<head>
<title>创建有序列表</title>
</head>
<body>
<font size="+4" color="#CC6600">江雪</font><br />
<ol>
<li>千山鸟飞绝</li>
<li>万径人踪灭</li>
<li>孤舟蓑笠翁</li>
<li>独钓寒江雪</li>
</ol>
</body>
</html>
运行这段代码，可以看到序列前面包含了顺序号，如图4.6所示。
图4.6 有序列表
4.3.2 有序列表的类型——type
默认情况下，有序列表的序号是数字，通过type属性可以调整序号的类型，例如将其修改成字母等。
语法
<ol type=序号类型>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ol>
语法解释
在该语法中，序号类型可以有5种，如表4.3所示。
表4.3 有序列表的序号类型
【例4.4】实例代码。（实例位置：光盘\TM\sl\4\4）
<html>
<head>
<title>创建有序列表</title>
</head>
<body>
<font size="+3" color="#00FFCC">测试：你懂得享受生活吗？</font><br /><br />
家里装修完毕，又新添置一套高级音响，你会把豪华漂亮的音响放在哪里？<br />
<ol type="A">
<li>卧室</li><br />
<li>客厅</li><br />
<li>餐厅</li><br />
<li>浴室</li><br />
</ol>
<hr size="2" color="#0099FF">
<ol type="I">
<li>卧室：喜欢拥有自己的私人空间，生活的快乐更多来自于内心世界</li><br />
<li>客厅：喜欢热闹，异性缘佳</li><br />
<li>餐厅：享受亲情，家庭始终放在你的第一位，任何快乐的事，你都希望能和家人一起分享。</li><br />
<li>浴室：对生活细节极度迷恋，生活即享受的观点早已深入你心。</li><br />
</ol>
</body>
</html>
运行这段代码，可以实现有序列表的不同类型的序号排列，如图4.7所示。
图4.7 有序列表的类型
4.3.3 有序列表的起始数值——start
默认情况下，有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值。这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。
语法
<ol start=起始数值>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ol>
语法解释
在该语法中，不论列表编号的类型是数字、英文字母还是罗马数字，起始数值只能是数字。
【例4.5】实例代码。（实例位置：光盘\TM\sl\4\5）
<html>
<head>
<title>有序列表的起始值</title>
</head>
<body>
<font size="4" color="#00FFFF">长春的旅游景点：</font><br />
<ol start="3">
<li>长春净月潭森林公园</li><br />
<li>长春伪皇宫博物馆</li><br />
<li>长影世纪城</li><br />
</ol>
<hr size="4" color="#3300FF">
<font size="+3" color="#0099FF">每周的安排</font><br />
<ol type="A" start="4">
<li>周四煮一顿大餐</li><br />
<li>周五看一场电影</li><br />
<li>周六回家陪父母吃饭</li><br />
</ol>
</body>
</html>
运行这段代码，效果如图4.8所示，其中定义了不同的起始编号。
图4.8 设置有序列表的起始编号
另外，我们还可以动态地设置列表编号。在下面的实例中，通过<ol>元素创建一个图书销量排名列表，并添加选项列表中的内容。再添加一个设置开始值的文本框和一个“确定”按钮，将数值填入文本框中，单击“确定”按钮，将以文本框中的值为列表项开始编号，显示图书销量排名。
【例4.6】实例代码。（实例位置：光盘\TM\sl\4\6）
<html>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<head>
<title>ol列表的使用</title>
<link href="Css/css1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="true">
function click1(){
var num=document.getElementById("te").value;
var div=document.getElementById("list");
div.setAttribute("start", num);
}
</script>
</head>
<body>
<h3>各类图书销量排名</h3>
<ol id="list">
<li>HTML5自学视频教程</li>
<li>JavaScript自学视频教程</li>
<li>PHP自学视频教程</li>
</ol>
<h5>设置开始值</h5>
<input type="text" id="te" class="tt" style="width:60px" />
<input type="button" value="确定" class="bb" onClick="click1(); ">
</body>
</html>
运行结果如图4.9和图4.10所示。
图4.9 <ol>列表的使用
图4.10 对列表项重新开始编号