HTML有哪些列表以及具体的使用_html常见列表

作者：羊村懒王 | 2024-03-28 08:50:51

踩

html常见列表

文章目录

一、HTML列表
二、列表的应用
三、总结

一、HTML列表

html的列表有三种，一种是无序列表，一种是有序列表，还有一种为自定义列表。

二、列表的应用

1、无序列表

<ul> <li>
1

无序列表：无序列表基础版 主要使用<ul>标签
和<li>标签无序列表表示只是列表而已，
没有什么顺序之分它的展现形式是由<ul>标签包裹着<li>标签：
1
2
3

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

结果为：
在这里插入图片描述

2、有序列表

<ol> <li>
1

有序列表：简单的有序列表 由<ol>标签包裹着<li>标签组成
在网页上显示的时候会有1，2，3，4这样的数字图标显示，
表示为有顺序的显示：
1
2
3

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

结果为：
在这里插入图片描述

3、自定义列表

自定义列表：简单的自定义列表 由<dl>标签包裹着
<dt>和<dd>标签组成
dl为声明列表，而dt一般为小标题，dd则为内容
1
2
3

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
        <dt>123</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dt>123</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dt>123</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
    </dl>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果为：
在这里插入图片描述

三、总结

标签名	定义	说明
ul	无序列表	里面只能包含li，没有顺序，使用比较多，li里面可以包含任何标签
ol	有序列表	里面只能包含li,有序，使用相对较少。li里面可以包含任何标签
dl	自定义列表	里面只能包含 dt 和 dd。dt和dd里面都可以放任何标签

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/329006