一、有序列表简介

在HTML中,有序列表中的各个列表项是有顺序的。有序列表从<ol>开始,到</ol>结束。有序列表的列表项是有先后顺序的,一般采用数字或字母作为顺序,默认是采用数字顺序。

语法:

<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>

说明:

ol,即ordered list(有序列表);li,即list(列表项)。理解标签的语义更有利于你记忆。

在该语法中,<ol>和</ol>标志着有序列表的开始和结束,而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。

注意,ol标签和li标签是配合一起使用,不可以单独使用,而且<ol>标签的子标签只能是li标签,不能是其他标签。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>有序列表</title> </head> <body> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ol> </body> </html>

浏览器预览效果如下图所示。

分析:

有些初学的小伙伴会问,是不是只能使用数字来表示列表项的顺序?能不能用“a、b、c”这种英文字母的形式来表示顺序呢?当然可以!这就需要用到下面介绍的type属性了。

二、type属性

在HTML中,我们可以使用type属性来改变列表项符号。默认情况下,有序列表使用数字作为列表项符号。

语法:

<ol type="属性值"> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>

说明:

在有序列表中,type属性取值如下表所示。

表1 type属性取值
属性值 列表项符号
1 阿拉伯数字:1、2、3……
a 小写英文字母:a、b、c……
A 大写英文字母:A、B、C……
i 小写罗马数字:i、ii、iii……
I 大写罗马数字:I、II、III……

对于有序列表的列表项符号,等学了CSS之后,我们可以放弃type属性,而使用list-style-type属性。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>type属性 </title> </head> <body> <ol type="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ol> </body> </html>

浏览器预览效果如下图所示。