- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 5字
- 2024-12-21 22:00:37
5.1 有序列表
实例138 使用ol来设置有序列表
本实例可以提高网站安全性
实例位置：光盘\mingrisoft\05\138
实例说明
在HTML列表中，有序列表使用编号而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。本实例将使用ol标记来设置有序列表，其运行结果如图5.1所示。
图5.1 有序列表
技术要点
在有序列表中，主要使用<ol>和<li>两个标记。有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。
语法如下：
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ol>
在该语法中，<ol>和</ol>标记标志着有序列表的开始和结束，而<li>标记表示这是一个列表项的开始，默认情况下，采用数字序号进行排列。
实现过程
创建index.html文件，在文件中应用<ol>和<li>两个标记创建一首古诗的有序列表，代码如下：
<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
举一反三
根据本实例，读者可以进行以下操作。
在图书目录中使用有序列表。
在在线考试题中使用有序列表。
实例139 使用type 类型来设置有序列表
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\05\139
实例说明
默认情况下，有序列表的序号是数字的，通过有序列表ol的type属性可以调整序号的类型，例如将其修改成字母等。本实例将使用type属性来设置有序列表的序号类型。运行本实例，可以实现有序列表的不同类型的序号排列，结果如图5.2所示。
图5.2 有序列表的序号类型
技术要点
实现本实例的关键是设置有序列表ol的type属性。语法如下：
<ol type=序号类型>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
….
</ol>
在该语法中，序号类型可以有5种，如表5.1所示。
表5.1 有序列表的序号类型
实现过程
创建index.html文件，在文件中首先应用有序列表标记<ol>和<li>定义测试题的4个选项，并设置<ol>标记的type属性值为A；然后再应用有序列表标记<ol>和<li>定义测试题4个选项的详细解答，并设置<ol>标记的type属性值为a。具体代码如下：
<html>
<head>
<title>设置有序列表type属性</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="a">
<li>卧室:喜欢拥有自己的私人空间，生活的快乐更多来自于内心世界</li><br/>
<li>客厅:喜欢热闹，异性缘佳</li><br/>
<li>餐厅:享受亲情，家庭始终放在你的第一位，任何快乐的事，你都希望能和家人一起分享。</li><br/>
<li>浴室:对生活细节极度迷恋，生活即享受的观点早已深入你心。</li><br/>
</ol>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
在图书目录中使用type类型设置有序列表。
在考试题中使用type类型设置有序列表。
实例140 使用start 来设置有序列表的起始数值
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\05\140
实例说明
默认情况下，有序列表的列表项序号是从数字1开始的，通过有序列表ol的start属性可以调整起始数值。本实例将使用start属性来设置有序列表的起始数值。运行本实例，可以看到在两个有序列表中定义了不同的起始编号，如图5.3所示。
图5.3 设置有序列表的起始编号
技术要点
本实例主要通过ol的start属性来设置列表项序号的起始数值。这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。语法如下：
<ol start=起始数值>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
…
</ol>
在该语法中，不论列表编号的类型是数字、英文字母还是罗马数字，起始数值只能是数字。
实现过程
创建index.html文件，在文件中首先应用有序列表标记<ol>和<li>定义旅游景点的3个选项，并设置<ol>标记的start属性值为3；然后再应用有序列表标记<ol>和<li>定义每周安排的3个选项，并设置<ol>标记的start属性值为4。关键代码如下：
<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置有序列表的起始值</title>
</head>
<body>
<font size="+3" color="#0000FF">长春的旅游景点：</font><br/>
<olstart="3">
<li>长春净月潭森林公园</li><br/>
<li>长春伪皇宫博物馆</li><br/>
<li>长影世纪城</li><br/>
</ol>
<hr size="4"color="#3300FF">
<font size="+3" color="#0099FF">每周的安排：</font><br/>
<oltype="A"start="4">
<li>周四去吃肯德基</li><br/>
<li>周五看一场电影</li><br/>
<li>周六去参加party</li><br/>
</ol>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
使用start属性设置商品销量排名。
使用start属性设置歌曲编号。