一、有序列表简介
在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>
浏览器预览效果如下图所示。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
