HTML：有序列表、无序列表、自定义列表的区别&写法

╰+哭是因爲堅強的太久メ 2022-11-17 05:30 333阅读 0赞

**目录**

一、三种列表的简介

1、有序列表——ol

2、无序列表——ul

3、自定义列表——dl

二、三种列表的写法

1、有序列表 ：是ol标签里面包着li标签

2、无序列表 ：是ul标签里面包着li标签

3、自定义列表：以dl标签开始，每个自定义列表项以dt标签开头，每个自定义列表项的定义以dd标签开始。

--------------------

## 一、三种列表的简介 ##

### 1、有序列表——ol ###

有自带的排序(1,2,3,…)。

### 2、无序列表——ul ###

没有有序列表那样的排序数字，但是每个列表的前面有个圆点，这是无序列表的特点。

### 3、自定义列表——dl ###

什么样式都没有，就是普通的列表。

![34540060a915078cd74c4590abacf1bc.png][]

--------------------

## 二、三种列表的写法 ##

### 1、有序列表 ：是ol标签里面包着li标签 ###

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body>
    	<ol>
    		<li>第一列</li>
    		<li>第二列</li>
    		<li>第三列</li>
    		<li>第四列</li>
    		<li>第五列</li>
    	</ol>
    </body>
    </html>

结果：

![20190119112601842.PNG][]

### 2、无序列表 ：是ul标签里面包着li标签 ###

结果：

![20190119112834131.PNG][]

### 3、自定义列表：以dl标签开始，每个自定义列表项以dt标签开头，每个自定义列表项的定义以dd标签开始。 ###

<dl>
            <dt>第一列</dt>
            <dd>jioeidwjidojwdiowqd</dd>
            <dt>第二列</dt>
            <dd>ncmlkerkf,eprlc;kep</dd>
            <dt>第二列</dt>
            <dd>ncmlkerkf,eprlc;kep</dd>
    </dl>

结果：

![20190119122305793.PNG][]

[34540060a915078cd74c4590abacf1bc.png]: /images/20221022/55dee0581e5d4320a17bbffdc7e7fd10.png
[20190119112601842.PNG]: /images/20221022/f29c2227a1f74625a8fbde5c9f3f4448.png
[20190119112834131.PNG]: /images/20221022/3fac1751e174407a9c8ff7f9a20a1c7e.png
[20190119122305793.PNG]: /images/20221022/ba2f73983612426fa3c3863290731ed7.png