HTML 列表

文丑颜不良啊

已于 2022-09-23 16:15:36 修改

阅读量6.3k

点赞数 3

分类专栏： HTML 与 CSS 文章标签： html 前端有序列表无序列表自定义列表

于 2022-09-23 16:13:57 首次发布

本文链接：https://blog.csdn.net/jiaomubai/article/details/127011426

版权

HTML 与 CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML中的三种列表类型：有序列表、无序列表和自定义列表，包括它们的定义、标记方式及自定义属性。有序列表和无序列表可通过type属性改变标记样式，自定义列表则包含列表项和描述。此外，还展示了列表的嵌套使用，以及如何通过style属性调整无序列表的标记类型。这些基础知识对于理解和创建HTML页面至关重要。

摘要由CSDN通过智能技术生成

html 中的列表分为有序列表、无序列表和自定义列表三种。如：

有序列表

有序列表是只有一列列表项的列表。什么是列表项呢？列表中的每个元素我们称为列表项。那什么又是只有一列列表项呢？可以理解为列表的层级只有一级，没有下属的二级子分支。有序列表使用 <ol> 标签进行定义，列表项使用 <li> 标签进行定义。列表项的顺序默认使用阿拉伯数字进行编号。

<ol>
    <li>有序列表第一项</li>
    <li>有序列表第二项</li>
    <li>有序列表第三项</li>
</ol>

浏览器中展示效果为：

因为默认使用的是阿拉伯数字，所以实际的 html 文件中并不需要体现出阿拉伯数字。同时，有序列表的"有序"也是体现在这里的，即每个列表项有着明显的顺序区分。

无序列表

无序列表同有序列表一样，也是只有一列列表项的列表。无序列表使用 <ul> 进行定义，列表项使用 <li> 标签进行定义。列表项默认使用粗体圆点(即实心圆圈)进行标记。如：

<ul>
    <li>无序列表第一项</li>
    <li>无序列表第二项</li>
    <li>无序列表第三项</li>
</ul>

浏览器展示效果为：

自定义列表

自定义列表不仅仅只有一列列表项，而是包含列表项和列表项描述的一种特殊的列表。其中，列表项的描述与列表项有着明显的缩进关系，所以也可以当作具有两层关系的列表来使用。自定义列表使用 <dl> 标签定义，（一级）列表项使用 <dt> 标签定义，列表项的描述(二级列表项)使用 <dd> 标签定义。如：

<dl>
    <dt>自定义列表一级子项一</dt>
    <dd>自定义列表一级子项一描述(自定义列表二级子项一)</dd>
    <dt>自定义列表一级子项二</dt>
    <dd>自定义列表一级子项二描述(自定义列表二级子项二)</dd>
    <dt>自定义列表一级子项三</dt>
    <dd>自定义列表一级子项三描述(自定义列表二级子项三)</dd>
</dl>

浏览器中展示为：

需要注意的是，在 html 文件中，<dt> 标签和 <dd> 标签是同级的，并没有如页面展示上的包含关系。同时，自定义列表的列表项并没有像无序列表和有序列表那样有着实心圆圈和阿拉伯数字的标记。

这三种列表有一点很明显区别就是有序列表和无序列表的列表项都有着和其他内容较明显的缩进关系，而自定义列表并没有这种缩进，只是自定义列表项的描述内容与其列表项有着缩进关系。

不同类型的有序列表和无序列表

有序列表默认使用阿拉伯数字进行顺序的标记，无序列表默认使用实心圆圈进行标记。当然，这种标记方式也是可以指定的。有序列表可以通过在 <ol> 标签中设置 type 属性来指定标记顺序的类型；无序列表可以通过在 <ul> 标签中设置 style 属性来指定标记的类型。

如我们可以使用大写字母或者大写罗马数字来进行标记：

    <h3>大写字母标记有序列表</h3>
    <ol type="A">
        <li>有序列表第一项</li>
        <li>有序列表第二项</li>
        <li>有序列表第三项</li>
    </ol>
    <hr />

    <h3>大写罗马数字标记有序列表</h3>
    <ol type="I">
        <li>有序列表第一项</li>
        <li>有序列表第二项</li>
        <li>有序列表第三项</li>
    </ol>
    <hr />

常见的 type 的取值主要有以下几种：

type	描述	示例
1	阿拉伯数字(默认)	1./2./3.
A	大写字母	A./B/C.
a	小写字母	a./b./c.
I	大写罗马字母	I./II./III.
i	小写罗马字母	i./ii./iii.

又如，我们可以使用空心圆圈或正方形来标记无序列表：

    <h3>空心圆圈标记无序列表</h3>
    <ul style="list-style-type:circle">
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
    </ul>
    <hr />

    <h3>正方形标记无序列表</h3>
    <ul style="list-style-type:square">
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
    </ul>
    <hr />

无序列表默认的 style 属性取值为：list-style-type:disc，即实心圆圈。无序列表的 style 属性取值较多，但常用的也就只有空心圆圈、正方形和默认的实心圆圈了，一般情况下直接使用默认的实心圆圈就可以，毕竟是无序的嘛，用什么标记都无所谓。

嵌套列表

一般情况下，使用这种层级关系简单的常规的有序列表和无序列表来表达所属关系就够了，但是往往有特殊情况，即层次较多的结构。如层次较深的树状结构。这个时候我们就可以使用嵌套的列表来解决。如：无序列表嵌套有序列表

    <h3>嵌套列表</h3>
    <ul>
        <li>一级子项1
            <ol type="A">
                <li>二级子项1</li>
                <li>二级子项2</li>
            </ol>
        </li>
        <li>一级子项2
            <ol type="I">
                <li>二级子项3</li>
                <li>二级子项4</li>
            </ol>
        </li>
    </ul>

本文涉及到的所有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML  列表示例</title>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>有序列表第一项</li>
        <li>有序列表第二项</li>
        <li>有序列表第三项</li>
    </ol>
    <hr />

    <h3>无序列表</h3>
    <ul>
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
    </ul>
    <hr />

    <h3>自定义列表</h3>
    <dl>
        <dt>自定义列表一级子项一</dt>
        <dd>自定义列表一级子项一描述(自定义列表二级子项一)</dd>
        <dt>自定义列表一级子项二</dt>
        <dd>自定义列表一级子项二描述(自定义列表二级子项二)</dd>
        <dt>自定义列表一级子项三</dt>
        <dd>自定义列表一级子项三描述(自定义列表二级子项三)</dd>
    </dl>
    <hr />

    <h3>大写字母标记有序列表</h3>
    <ol type="A">
        <li>有序列表第一项</li>
        <li>有序列表第二项</li>
        <li>有序列表第三项</li>
    </ol>
    <hr />

    <h3>大写罗马数字标记有序列表</h3>
    <ol type="I">
        <li>有序列表第一项</li>
        <li>有序列表第二项</li>
        <li>有序列表第三项</li>
    </ol>
    <hr />

    <h3>空心圆圈标记无序列表</h3>
    <ul style="list-style-type:circle">
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
    </ul>
    <hr />

    <h3>正方形标记无序列表</h3>
    <ul style="list-style-type:square">
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
    </ul>
    <hr />

    <h3>嵌套列表</h3>
    <ul>
        <li>一级子项1
            <ol type="A">
                <li>二级子项1</li>
                <li>二级子项2</li>
            </ol>
        </li>
        <li>一级子项2
            <ol type="I">
                <li>二级子项3</li>
                <li>二级子项4</li>
            </ol>
        </li>
    </ul>
    <hr />

</body>
</html>

另：附相关标签的含义如下：

标签	含义
<ol>	ordered lists(有序列表)的缩写
<ul>	unordered lists(无序列表)的缩写
<li>	lists item(列表项)的缩写
<dl>	definition lists(自定义列表)的缩写
<dt>	definition term(自定义列表组)的缩写
<dd>	definition description(自定义描述)的缩写

本文参考自：HTML 列表 | 菜鸟教程