5.2 有序列表

来源：网络作者：站长

<ol>标签表示Html有序列表，以<ol>开始，</ol>结束，每一项使用<li></li>标签定义内容。

举例：

<!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...)

举例：

<!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 属性规定有序列表的开始点。

举例：

<!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）

举例（数值）：

<!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>

运行浏览器后得到的效果如图

举例（字母）：

<!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>

运行浏览器后得到的效果如图