HTML 列表 - 绿叶网

HTML 列表简介

列表是网页中最常用的一种数据排列方式，我们在浏览网页时，会到看到各种列表的身影，比如文本列表、图片列表等，如下图所示。

HTML文本列表

HTML图片列表

在 HTML 中，列表主要可以分为以下 3 种：

有序列表
无序列表
定义列表

在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间是没有先后顺序之分的。而定义列表是一组带有特殊含义的列表，一个列表项中包含 “条件” 和 “列表” 这 2 部分。

注意: 有些小伙伴在别的书或教程中，可能会看到还会有 “目录列表 dir”，可以完全忽略它。主要是因为这种列表在 HTML5 标准中已经被废除了，现在都是用无序列表 ul 来代替。

HTML 有序列表

在 HTML 中，有序列表中的各个列表项是有顺序的。有序列表从 <ol> 开始，到 </ol> 结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

语法：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

说明：

ol 指的是 “ordered list（有序列表）”，而 li 指的是 “list item（列表项）” 。理解标签的语义，更有利于你记忆标签。

<ol> 和 </ol> 标志着有序列表的开始和结束，而 <li> 和 </li> 标签表示这是一个列表项。其中，一个有序列表可以包含多个列表项。

注意: ol 标签和 li 标签是配合一起使用，任何一个都不可以单独使用。并且 <ol> 标签的子标签只能是 li 标签，不能是其他标签。

示例 1：使用 HTML 有序列表

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ol>
</body>
</html>

页面效果如下图所示。

HTML有序列表

分析：

有些初学的小伙伴会问：“是不是只能使用数字来表示列表项的顺序？能不能用 a、b、c 这种英文字母的形式来表示顺序呢？” 答案是肯定的，此时这就需要用到下面介绍的 type 属性了。

在 HTML 中，我们可以使用 type 属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。

语法：

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

说明：

在有序列表中，type 属性取值如下表所示。

有序列表 type 属性取值
属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

提示: 对于有序列表的列表项符号的定义，等学了 CSS 之后，我们可以放弃 type 属性，而使用 list-style-type 属性。

示例 2：有序列表的 type 属性

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ol>
</body>
</html>

页面效果如下图所示。

HTML有序列表的type属性

HTML 无序列表

在 HTML 中，无序列表很好理解。有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是 “●” ，不过可以通过 type 属性来改变其样式。

语法：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

说明：

ul 指的是 “unordered list（无序列表）”，而 li 指的是 “list item（列表项）” 。

<ul></ul> 标签表示一个无序列表的开始和结束，<li></li> 表示这是一个列表项。一个无序列表可以包含多个列表项。

注意: ul 标签和 li 标签也是配合一起使用，不可以单独使用。并且 ul 标签的子标签也只能是 li 标签，不能是其他标签。这一点跟有序列表是一样的。

示例 3：使用 HTML 无序列表

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
</body>
</html>

页面效果如下图所示。

HTML无序列表

在 HTML 中，无序列表和有序列表一样，也是使用 type 属性来定义其列表项符号。

语法：

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

说明：

对于无序列表来说，其 type 属性取值如下表所示。

无序列表的 type 属性取值
属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

提示: 同样地，对于无序列表的列表项符号的定义，等学了 CSS 之后，我们可以放弃 type 属性，而使用 list-style-type 属性。

示例 4：无序列表的 type 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
</body>
</html>

页面效果如下图所示。

HTML无序列表的type属性

HTML 定义列表

在 HTML 中，定义列表由 2 部分组成：名词和描述。

语法：

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

说明：

dl 指的是 “definition list（定义列表）”，dt 指的是 “definition term（定义名词）”，而 dd 指的是 “definition description（定义描述）” 。

在该语法中，<dl> 和 </dl> 分别定义了定义列表的开始和结束，dt 标签用于添加要解释的名词，而 dd 标签用于添加该名词的具体解释。

示例 5：使用定义列表

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>标记性语言，用于控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，用于控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，用于控制网页的行为</dd>
    </dl>
</body>
</html>

页面效果如下图所示。

HTML定义列表

分析：

定义列表只会在某些高级效果（如自定义表单）中才会用到。在 HTML 入门阶段，小伙们只需简单了解一下即可。

深入 HTML 列表

在实际的前端项目开发中，无序列表比有序列表更为实用。更准确点说，我们一般都是使用无序列表，几乎用不到有序列表。不说别的，就拿绿叶网来说，主导航、工具栏、动态栏等地方都用到了无序列表。凡是需要显示列表数据的地方都用到了，可谓无处不在！

绿叶网中用到的HTML列表

另外，我们可以看看大型网站在哪些地方用到了无序列表，比如下面几个图。

百度用到的HTML列表

淘宝用到的HTML列表

腾讯用到的HTML列表

可能很多小伙伴都会感到疑惑： “这些效果是怎样用无序列表做出来的呢？” 网页外观嘛，当然都是用 CSS 来实现的！现在不懂没关系，为了早日做出这种美观的效果，小伙伴们好好加油把 CSS 学好！

此外，对于 HTML 无序列表来说，还有以下 2 点要注意。

ul 元素的子元素只能是 li，不能是其他元素。
ul 元素内部的文本，只能在 li 元素内部添加，不能在 li 元素外部添加。

示例 6：ul 的子元素只能是 li，不能是其他元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <div>前端三大技术：</div>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

页面效果如下图所示。

ul的子元素只能是li

分析：

上面代码是不规范的，因为 ul 元素的子元素只能是 li 元素，不能是其他元素。正确做法是这样：

<div>前端三大技术：</div>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

示例 7：文本不能直接放在 ul 元素内

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        前端三大技术：
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

页面效果如下图所示。

文本不能直接放在ul元素内

分析：

上面代码是不规范的，因为文本不能直接放在 ul 元素内。