![08ea605b217dddc87e8ff93b783a8151.png](https://i-blog.csdnimg.cn/blog_migrate/2b675295aa77dddd696d00b796965d7a.jpeg)
文本的排序和组合,就是所谓的列表,方便对文本内容进行分级或者分类,更清晰的展示内容,包括有序列表和无序列表:
- 有序列表是每个列表项前面有编号,呈现出顺序,就像下面这样:
1. 列表项 A
2. 列表项 B
3. 列表项 C
- 无序列表则是列表项前面没有编号,只有一个列表符号,默认是一个圆点:
· 列表项 A
· 列表项 B
· 列表项 C
而文本展示的过程中加入适当的图像,则可以提升页面的活泼程度,让网页变得丰富多彩,我们接下来就来看看列表和图像的标签。
1 <ol>
<ol>标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签:
<ol>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码会在列表项 A、B、C 前面,分别产生1、2、3的编号:
![6ac1de746bb8e8d27c6c03e90b2fada4.png](https://i-blog.csdnimg.cn/blog_migrate/ff27ce69683f87926ff711c846fb8179.jpeg)
<ol>标签内部可以嵌套<ol>标签或<ul>标签,形成多级列表:
<ol>
<li>列表项 A</li>
<li>列表项 B
<ol>
<li>列表项 B1</li>
<li>列表项 B2</li>
<li>列表项 B3</li>
</ol>
</li>
<li>列表项 C</li>
</ol>
上面代码中,一个有序列表内部嵌套了另一个有序列表,渲染结果如下:
![915a8d4611c1184d9f8d8f5e68e797fe.png](https://i-blog.csdnimg.cn/blog_migrate/2f16d815709e33e648ad8d582999d3d4.jpeg)
该标签有以下属性:
(1)reversed
reversed属性产生倒序的数字列表。
<ol reversed>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面,产生的编号是3、2、1:
![4c7cc3b1a58969f5fdc87a8bc6bf9e10.png](https://i-blog.csdnimg.cn/blog_migrate/3bc4fa99a75cc7f319668b7177b03668.jpeg)
(2)start
start属性的值是一个整数,表示数字列表的起始编号:
<ol start="5">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面,产生的编号是5、6、7:
![6219239f3ac84d0f2822559d7c5defcb.png](https://i-blog.csdnimg.cn/blog_migrate/bbacac8da0065db3b4a2c3ad82c8b58a.png)
(3)type
type属性指定数字编号的样式。目前,浏览器支持以下样式:
- a:小写字母
- A:大写字母
- i:小写罗马数字
- I:大写罗马数字
- 1:整数(默认值)
<ol type="a">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面的编号,分别是英文小写字母a、b、c:
![c44920515ccd0cb2de6734006c2f98a4.png](https://i-blog.csdnimg.cn/blog_migrate/b40bde93312bf10b23263f5c0b68861a.jpeg)
注意,即使编号是字母,start属性也依然使用整数:
<ol type="a" start="3">
<li>列表项 A</li>
<li>列表项