列表是一系列排列好的项目,主要分成两类:有序列表和无序列表。
<ol>
<ol>
标签是一个有序列表容器(ordered list),<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>
该标签有下面三个属性:
(1)reversed reversed属性产生倒序的数字列表。
<ol reversed>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面,产生的编号是3、2、1。
(2)start start属性的值是一个整数,表示数字列表的起始编号。
<ol start="5">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面,产生的编号是5、6、7。
(3)type type属性指定数字编号的样式。目前,浏览器支持以下样式。
- a:小写字母
- A:大写字母
- i:小写罗马数字
- I:大写罗马数字
- 1:整数(默认值)
注意,即使编号是字母,start属性也依然使用整数。
<ol type="a" start="3">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,type属性指定编号采用小写英文字母,start属性等于3,表示从c开始编号。
<ul>
<ul>
标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。
<ul>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ul>
上面代码的渲染结果是,列表项 A、B、C 前面,分别产生一个实心小圆点,作为列表符号。<ul>
标签内部可以嵌套<ul>
或<ol>
,形成多级列表。
<li>
<li>
表示列表项,用在<ul>
或<ol>
容器之中。
有序列表<ol>
之中,<li>
有一个value属性,定义当前列表项的编号,后面列表项会从这个值开始编号。
<ol>
<li>列表项 A</li>
<li value="4">列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,value属性指定第二个列表项的编号是4,因此三个列表项的编号,分别为1、4、5。
<dl>,<dt>,<dd>
<dl>
标签是一个块级元素,表示一组术语的列表,<dl>
常用来定义词汇表。(description list)。
<dt>
标签表示术语名(description term)。
<dd>
标签表示术语解释(description detail)。
<dl>
<dt>CPU</dt>
<dd>中央处理器</dd>
<dt>Memory</dt>
<dd>内存</dd>
<dt>Hard Disk</dt>
<dd>硬盘</dd>
</dl>
- CPU
- 中央处理器
- Memory
- 内存
- Hard Disk
- 硬盘
多个术语对应一个解释,或者多个解释对应一个术语,都是合法的。
<dl>
<dt>A</dt>
<dt>B</dt>
<dd>C</dd>
<dt>D</dt>
<dd>E</dd>
<dd>F</dd>
</dl>
上面代码中,A和B有共同的解释C,而D有两个解释E和F。