HTML有哪些列表以及具体的使用！！！

news2024/11/24 16:18:10

文章目录

一、HTML列表
二、列表的应用
- 1、无序列表
- 2、有序列表
- 3、自定义列表
三、总结

一、HTML列表

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

二、列表的应用

1、无序列表

<ul> <li>

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

代码如下：

<!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>

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

2、有序列表

<ol> <li>

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

代码如下：

<!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>

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

3、自定义列表

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

代码如下：

<!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>

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

三、总结

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