html中的列表标签_标签列表-优快云博客

本文链接：https://blog.youkuaiyun.com/greentrainsad/article/details/127109996

本文详细介绍了HTML中的列表标签，包括有序列表(ol)、无序列表(ul)和定义列表(dl)的使用方法。通过示例代码展示了如何创建和自定义列表项的样式，强调了列表标签在网页内容组织中的常见应用场景和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表标签

什么是列表标签？

答：可以用来表示一组一组的内容，页面中相同结构、或相同意义都可以用列表

列表标签可以分为有序列表、无序列表、定义列表。

1.有序列表用ol创建 ,li标签表示列表项

示例：

<!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>Document</title>
</head>
<body>
    <h3>超市购物清单</h3>
    <ol>
        <li>衣服</li>
        <li>生活用品</li>
        <li>学习用品</li>
    </ol>
</body>
</html>

有序列表

默认样式：

1、加了1.2.3.等项目符号

2、列表项的前面加了一些间距

可以用type属性，更改项目符号

属性值：默认是阿拉伯数字，1，2，3

还可以是a/A/i/I

2.无序列表用ul创建，li标签标识列表项

示例：

<!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>Document</title>
</head>
<body>
    <h3>起床三件事</h3>
    <ul>
        <li>穿衣</li>
        <li>刷牙</li>
        <li>洗脸</li>
    </ul>
</body>
</html>

无序列表

默认样式：

1、项目符号小圆点

2、每个列表项前面也有间距

也可以用type属性去更改项目符号

默认是实心小圆点

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3.定义列表用dl创建 dt表示下定义，dd表示对定义内容的解释

示例：

<!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>Document</title>
</head>
<body>
    <dl>
        <dt>厨房用品</dt>
        <dd>碗</dd>
        <dd>筷子</dd>
        <dd>锅</dd>
        <dt>日常用品</dt>
        <dd>牙膏</dd>
        <dd>牙刷</dd>
        <dd>洗发水</dd>
        <dt>衣服</dt>
        <dd>裤子</dd>
        <dd>袜子</dd>
    </dl>
</body>
</html>