html有序列表教案,有序列表

一、有序列表简介

在HTML中，有序列表中的各个列表项是有顺序的。有序列表从

1. 开始，到

结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

语法：

1. 列表项
2. 列表项
3. 列表项

说明：

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

在该语法中，

1. 和

标志着有序列表的开始和结束，而和标签表示这是一个列表项。一个有序列表可以包含多个列表项。

注意，ol标签和li标签是配合一起使用，不可以单独使用，而且

1. 标签的子标签只能是li标签，不能是其他标签。

举例：

有序列表

1. HTML
2. CSS
3. JavaScript
4. jQuery
5. Vue.js

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

分析：

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

二、type属性

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

语法：

1. 列表项
2. 列表项
3. 列表项

说明：

在有序列表中，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属性。

举例：

type属性

1. HTML
2. CSS
3. JavaScript
4. jQuery
5. Vue.js

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