HTML列表标签

zhangeer

已于 2022-10-24 13:52:14 修改

阅读量72

点赞数

分类专栏： HTML 文章标签： html java 前端 1024程序员节

于 2022-10-13 14:42:26 首次发布

本文链接：https://blog.csdn.net/zhangeer/article/details/127300487

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.列表标签

可以用来表示一组一组的内容，页面中相同结构、或相同意义都可以用列表
（1）.有序列表用ol创建，li标签表示列表项
（2）.无序列表用ul创建，li标签标识列表项
（3）.定义列表用dl创建，dt表示下定义，dd表示对定义内容的解释

注意：（1）.最常用：有序列表和无序列表
（2）.在实际应用过程，一般有序列表、无序列表不做特殊的区分
（3）.列表标签也是块元素
（4）.列表是可以相互嵌套

2.有序列表

默认样式：（1）.加了1.2.3.等项目符号

（2）.列表项的前面加了一些间距
可以用type属性，更改项目符号
属性值：默认是阿拉伯数字，1，2，3
还可以是a/A/i/I

3.无序列表

默认样式：（1）.项目符号小圆点
（2）.每个列表项前面也有间距
也可以用type属性去更改项目符号
属性值：默认是实心小圆点
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆

4.定义列表

默认样式：dt是顶格写的，dd前面有间距

5.代码演示

<!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>
    <ol type="i">
        <li>刷牙</li>
        <li>洗脸</li>
        <li>吃早餐</li>
    </ol>

    <ul type="circle">
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ul>

    <dl>
        <!-- dt下定义 -->
        <dt>厨房用具</dt>
        <!-- dd对dt的解释补充 -->
        <dd>碗</dd>
        <dd>筷子</dd>
        <dd>锅</dd>
    </dl>
</body>
</html>