一、有序列表简介
在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 | 阿拉伯数字: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>
浏览器预览效果如下图所示。