有序列表
<ol>标签表示Html有序列表，以<ol>开始，</ol>结束，每一项使用<li></li>标签定义内容。
举例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> </body></html> |
运行浏览器后得到的效果如图
属性
| 属性 | 值 | 描述 |
|---|---|---|
| compact | compact | HTML5 中不支持。HTML 4.01 中不赞成使用。 |
| reversed | reversed | 规定列表顺序为降序。(9,8,7…)。 |
| start | number | 规定有序列表的起始值。 |
| type | 1 A a I i | 规定在列表中使用的标记类型。 |
1、属性compact
compact规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的。所有主流浏览器都不支持 compact 属性。
2、属性reversed
规定列表顺序为降序。(9,8,7...)
举例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <ol reversed="reversed"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> </body></html> |
运行浏览器后得到的效果如图
附加说明：reversed 属性是逻辑属性，是 HTML5 中的新属性。reversed 属性规定列表顺序为降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。
3、属性start
start 属性规定有序列表的开始点。
举例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <ol start="3"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> </body></html> |
运行浏览器后得到的效果如图
附加说明：默认情况下，有序列表的编号是从1开始的，通过start属性可以调整编号的起始值。
4、属性type
type 属性规定有序列表的项目符号的类型。有序列表不仅仅是只有数字，还有大小写字母，罗马字母。
属性值
| 值 | 描述 |
|---|---|
| 1 | 默认值。数字有序列表。（1、2、3、4） |
| a | 按字母顺序排列的有序列表，小写。（a、b、c、d） |
| A | 按字母顺序排列的有序列表，大写。（A、B、C、D） |
| i | 罗马字母，小写。（i, ii, iii, iv） |
| I | 罗马字母，大写。（I, II, III, IV） |
举例（数值）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <ol type="a"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期天</li> </ol> </body></html> |
运行浏览器后得到的效果如图
举例（字母）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <ol type="A"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期天</li> </ol> </body></html> |
运行浏览器后得到的效果如图
提示：<ol>标签必须和<li>配合使用，不能单独使用。多个<li>也必须要有<ol>或者<ul>，如果没有，浏览器默认显示无序列表，但W3C会提示错误。
你觉得文章内容怎么样