列表

传统的HTML元素包括有序列表（ol）、无序列表（ul）和描述列表（dl），HTML5标准新增了details和summary元素，用于显示摘要和详细内容组成的结构，本文将介绍相关元素及样式的应用。

有序列表

有序列表（ordered list）中，列表项（list item）可以使用数字、英文字母、罗马数字等有序字符作为标识。

有序列表使用ol元素定义，<ol>标记中可以使用type属性指定有序字符的类型，常用的序号类型包括：

数字。这也是有序列表的默认类型，如果不指定<ol>标记的type属性，则列表项默认序号就是从1开始的整数。
英文字母。如指定的小写a，则序号是从a开始的小写字母，如设置为A则是从A开始的大写字母。
罗马数字，指定为小写字母i时序号使用小写罗马数字，指定为大写字母I时使用大写的罗马数字。

下面的代码显示了数字序号的列表。

HTML

<ol type="1">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
    <li>项目五</li>
</ol>

本例，不使用type属性会有相同的结果，显示效果如下图所示。

有序列表——数字序号

下图显示了大小字母和罗马数字序号列表的效果。

有序列表——字母与罗马数字

无序列表

无序列表（unordered list）中可以使用图形或图片作为列表项符号。无序列表使用ul元素定义，其中的列表项同样使用li元素定义。在<ul>标记中，可以使用type属性定义列表项符号的类型，默认为disc，显示为实心圆，此外还可以使用circle（圆环）和square（实心方形）。下面的代码定义了列表项符号为实心圆的无序列表。

HTML

<ul type="disc">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
    <li>项目五</li>
</ul>

本例，删除<ul>中的type属性会得到相同的结果，列表显示效果如下图所示。

无序列表（实心圆）

下图显示了type属性设置为circle和square值的效果。

无序列表（圆环和方形）

稍后在列表样式中可以看到如何将图片作为列表项标识。

描述列表

描述列表（description list）中，每一个列表项分别包含标题（title）和描述（description）两个部分，定义的元素包括：

dl元素，定义一个列表。
dt元素，定义列表项标题。
dd元素，定义列表项描述部分。

下面的代码演示了描述列表的应用。

HTML

<dl>
    <dt>标题一</dt>
    <dd>描述一</dd>
    <dt>标题二</dt>
    <dd>描述二</dd>
    <dt>标题三</dt>
    <dd>描述三</dd>
</dl>

默认显示效果如下图所示。

描述列表

列表样式

定义有序和无序列表的列表项符号时，可使用CSS样式中的list-style-type属性，其常用属性值包括：

none，无符号。
disc，实心圆，即无序列表的默认值。
circle，圆环。
square，方块。
decimal，数字，即有序列表的默认值。
decimal-leading-zero，包含前导0的数字。
upper-alpha，大写英文字母。
lower-alpha，小写英文字母。
upper-roman，大写罗马数字。
lower-roman，小写罗马数字。
lower-greek，小写希腊字母。
armenian，亚美尼亚字符。
georgian，乔治字符。

使用图片作为列表项标识时，可以使用CSS样式中的list-style-image属性设置，其属性值可以使用url()函数指定图片的位置。首先，在/demo目录下创建一个listitem.png图片，使用尺寸16*16像素即可，然后在/demo/test.html页面中修改代码如下。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul {
            list-style-image:url(listitem.png);
        }
    </style>
</head>
<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
        <li>项目五</li>
    </ul>
</body>
</html>

本例准备的listitem.png图片为图钉，显示效果如下图所示。

列表项使用图片标识

实际应用中，列表除了常规用途，还经常作为菜单或导航元素，样式设计时，列表及列项的缩进与边距设置是需要注意的地方；下面的代码，列表和列表项会显示1像素的边框，以此来观察其默认的缩进与边距设置。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            border:1px solid black;
        }
        ul {
            border:1px solid red;
        }
        li {
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
            <li>项目三</li>
            <li>项目四</li>
            <li>项目五</li>
        </ul>
    </div>
</body>
</html>

代码在Chrome浏览器显示的默认效果如下图所示。

列表的缩进与边距

从图中可以看到，列表项图标的位置在项目内容的外侧，可以使用CSS样式中的list-style-position属性设置，默认为outside，放在列表项内部可以使用inside值。列表会有一定上、下边距；列表项左侧则有ul元素的内缩进。下面的代码将列表中所有的外边距和内缩进设置为0px，并将列表项符号放在列表项内部。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            border:1px solid black;
        }
        ul {
            border: 1px solid red;
            margin: 0px;
            list-style-position: inside;
            padding: 0px;
        }
        li {
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
            <li>项目三</li>
            <li>项目四</li>
            <li>项目五</li>
        </ul>
    </div>
</body>
</html>

页面显示效果如下图所示。

取消列表所有边距和缩进、列表项符号放置于内侧

下面的代码会在列表上设置一些样式来模拟菜单或导航的外观。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
        }
        ul {
            margin: 0px;
            list-style-position: inside;
            padding: 0px;
            list-style-type:none;
            width:300px;
        }
        li {
            line-height:2em;
            text-align:center;
            vertical-align:middle;
            color:#eee;
            background-color:steelblue;
            margin-bottom:0.5em;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
            <li>项目三</li>
            <li>项目四</li>
            <li>项目五</li>
        </ul>
    </div>
</body>
</html>

代码中取消了各元素的边框设置，页面显示效果如下图所示。

使用列表模拟菜单

设置列表样式时还可以list-style属性，其值的顺序是list-style-type、list-style-image、list-style-position；其中，前两个参数取一个便可。

后续文章中，还可以配合nav、a元素等创建各种菜单、导航等页面要素。

details和summary元素

details和summary元素是HTML5标准新增的元素，用于显示摘要和详细内容组成的结构，其定义格式如下：

HTML

<details>
<summary>
摘要内容
</summary>
详细内容
</details>

在Chrome浏览器中的默认显示效果如下图所示。

details与summary元素