实例139 使用type 类型来设置有序列表_HTML5程序开发范例宝典-QQ阅读男生都市网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：552字
更新时间：2024-12-21 22:00:38

5.1 有序列表

实例138 使用ol来设置有序列表

本实例可以提高网站安全性

实例位置：光盘\mingrisoft\05\138

实例说明

在HTML列表中，有序列表使用编号而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。本实例将使用ol标记来设置有序列表，其运行结果如图5.1所示。

图5.1 有序列表

技术要点

在有序列表中，主要使用<ol>和<li>两个标记。有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。

语法如下：

<ol>

…

</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>

静夜思

<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>

在该语法中，序号类型可以有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>

测试：你懂得享受生活吗？

家里装修完毕，又新添置一套高级音响，你会把豪华漂亮的音响放在哪里?

</ol>

<li>卧室:喜欢拥有自己的私人空间，生活的快乐更多来自于内心世界</li>

<li>餐厅:享受亲情，家庭始终放在你的第一位，任何快乐的事，你都希望能和家人一起分享。</li>

<li>浴室:对生活细节极度迷恋，生活即享受的观点早已深入你心。</li>

</ol>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在图书目录中使用type类型设置有序列表。

在考试题中使用type类型设置有序列表。

实例140 使用start 来设置有序列表的起始数值

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\05\140

实例说明

默认情况下，有序列表的列表项序号是从数字1开始的，通过有序列表ol的start属性可以调整起始数值。本实例将使用start属性来设置有序列表的起始数值。运行本实例，可以看到在两个有序列表中定义了不同的起始编号，如图5.3所示。

图5.3 设置有序列表的起始编号

技术要点

本实例主要通过ol的start属性来设置列表项序号的起始数值。这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。语法如下：

…

</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>

长春的旅游景点：

<olstart="3">

<li>长春净月潭森林公园</li>

<li>长春伪皇宫博物馆</li>

<li>长影世纪城</li>

</ol>

每周的安排：

<oltype="A"start="4">

<li>周四去吃肯德基</li>

<li>周五看一场电影</li>

<li>周六去参加party</li>

</ol>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用start属性设置商品销量排名。

使用start属性设置歌曲编号。