HTML列表标签

最新推荐文章于 2024-04-02 21:15:51 发布

发呆少女

最新推荐文章于 2024-04-02 21:15:51 发布

阅读量186

点赞数

分类专栏： HTML学习文章标签： html5

本文链接：https://blog.csdn.net/qq_43632490/article/details/123905053

版权

HTML学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、三种列表：

<!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>列表标签</title>
</head>
<body>
    <!--
        列表标签：大多数用来布局使用，默认独占一行

        1、无序列表（unorder list）：<ul> <li>列表项</li> </ul> （重点）
            列表项之间为并列关系，无顺序之分
            ul中只能放li标签，不可放其它标签和文字
            li是容器，里面可以放其它的任何标签
            自带项目符号样式属性，一般会被后期css去掉

        2、有序列表（order list）：<ol> <li>列表项</li> </ol>
            列表项之间有顺序之分
            ol中只能放li标签，不可放其它标签和文字
            li是容器，里面可以放其它的任何标签
            自带项目符号样式属性，一般会被后期css去掉

        3、自定义列表（define list，define term，define description）：<dl> <dt>名词</dt> <dd>名词解释</dd> </dl>（重点）
            自定义列表常用于对术语或名词进行解释和描述
            dl中只能放dt和dd标签，不可放其它标签和文字
            dt与dd无个数限制，通常是一个dt对应多个dd，注意：dt与dd是并列关系不是嵌套关系
            dt和dd是容器，里面可以放其它的任何标签
            无自带项目符号样式属性
    -->

    <h3>无序列表</h3>

    <ul>
        <li>
            螺蛳粉
        </li>
        <li>
            火锅
        </li>
        <li>
            烧烤
        </li>
    </ul>

    <h3>有序列表</h3>

    <ol>
        <li>
            刘德华
        </li>
        <li>
            彭于晏
        </li>
        <li>
            吴彦祖
        </li>
    </ol>

    <h3>自定义列表</h3>

    <dl>
        <dt>
            联系我们
        </dt>
        <dd>
            B站
        </dd>
        <dd>
            抖音
        </dd>
        <dd>
            小红书
        </dd>
        <dt>
            产品介绍
        </dt>
        <dd>
            显示器
        </dd>
        <dd>
            主机
        </dd>
        <dd>
            路由器
        </dd>
    </dl>

</body>
</html>