列表是HTML中另一个用于组织内容的工具,结合CSS的使用,它不仅可以制作各种功能菜单,还可以用于布局页面内容。列表的种类有3种,分别为有序列表、无序列表和定义列表,下面我们就详细介绍这3种列表的使用方法。
有序列表用<ol>标签表示,每个列表项用<li>标签表示,这样组织的内容在每一个列表项前面都有一个序号,例如下面的代码:
在这段代码中,有序列表中有3个<li>元素,每个元素的内容都一样,且标签前面没有序号,但是在页面浏览的时候,这些标签前面就会出现序号,如图5.20所示,这就是有序列表的一个明显特征。
图5.20
默认情况下,有序列表以数字为序号,我们还可以通过设置它的type属性修改序号类型,例如使用<ol type="a">修改序号为小写字母,使用<ol type="A">修改序号为大写字母,使用<ol type="i">修改序号为小写罗马数字,使用<ol type="I">修改序号为大写罗马数字。另外通过设置<ol>标签的start属性,还可以设置有序列表的起始序号。例如,<ol start="5">表示有序列表的序号从5开始。例如下面这段代码:
运行这段代码后的效果如图5.21所示。
图5.21
有序列表相对应的是无序列表,无序列表没有具体的序列号,是用一些符号进行标记的。无序列表用<ul>标签表示,每个列表项目仍然用<li>标签表示。无序列表可用3种符号进行标记,默认情况下以实心圆进行标记,我们还可以通过设置<ul>标签的type属性指定其他的符号。例如,<ul type="circle">表示空心圆列表,<ul type="square">表示实心方块列表,相关代码如下所示:
运行这段代码后的效果如图5.22所示。
图5.22
在HTML页面中,还有一种列表称之为定义列表,它的列表项是由项目及其注释组成的。定义列表用<dl>标签表示,其中又包含<dt>标签和<dd>标签,<dt>标签用于定义列表项目,而<dd>标签用于对项目进行注释。一个<dl>标签中可以包含多组项目标签和注释。例如下面这段代码:
运行这段代码后的效果如图5.23所示。
图5.23