HTML列表

等风来`deng

已于 2023-02-08 15:10:21 修改

阅读量93

点赞数

分类专栏： HTML学习笔记文章标签： html 前端 visual studio code vscode 前端框架

于 2022-12-14 12:03:07 首次发布

本文链接：https://blog.csdn.net/m0_46688827/article/details/128314379

版权

HTML学习笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML列表

1、HTML列表

1、HTML列表

列表标签：无序标签，有序标签，自定义标签

无序列表：
         ul 表示无序列表的整体，用于包裹li标签
         li 表示无序列表的每一项，用于表示每一行的内容
         特点：列表每一项前面默认圆点标识显示，ul标签只允许包含li标签，li标签可以包含任意内容
有序列表： 在网页中表示一组有顺序之分的列表，比如排序榜
         ol 表示有序列表的整体，用于包裹li标签
         li 表示有序列表的每一项，用于表示每一行的内容
         特点：列表每一项前面默认圆点标识显示，ol标签只允许包含li标签，li标签可以包含任意内容
自定义列表： 
         dl 表示自定义列表的整体，用于包裹dt/dd标签
         dt 表示自定义列表的主题
         dd 表示自定义列表的针对主题的每一项内容
         特点：dd前会默认显示缩减内容，dl标签只允许包含dt/dd标签，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>列表</title>
</head>
<body>
    <h1>水果列表</h1>
    <!-- 列表标签 ： 无序标签，有序标签，自定义标签
        无序列表：
                 ul 表示无序列表的整体，用于包裹li标签
                 li 表示无序列表的每一项，用于表示每一行的内容
                 特点：列表每一项前面默认圆点标识显示，ul标签只允许包含li标签，li标签可以包含任意内容
        有序列表： 在网页中表示一组有顺序之分的列表，比如排序榜
                 ol 表示有序列表的整体，用于包裹li标签
                 li 表示有序列表的每一项，用于表示每一行的内容
                 特点：列表每一项前面默认圆点标识显示，ol标签只允许包含li标签，li标签可以包含任意内容
        自定义列表： 
                 dl 表示自定义列表的整体，用于包裹dt/dd标签
                 dt 表示自定义列表的主题
                 dd 表示自定义列表的针对主题的每一项内容
                 特点：dd前会默认显示缩减内容，dl标签只允许包含dt/dd标签，dt/dd标签可以包含任意内容
    -->
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>火龙果</li>
        <li>西瓜</li>
        <li>葡萄</li>
        <li>哈密瓜</li>
    </ul>

    <hr>
    <h1>成绩排行榜</h1>
    <ol>
        <li>Lucky 100</li>
        <li>Blanche 99.5</li>
        <li>Linda 99</li>
        <li>Rose 98</li>
    </ol>

    <hr>
    <h1>自定义列表</h1>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>

        <dt>服务支持</dt>
        <dd>售后正常</dd>
        <dd>自主服务</dd>
        <dd>相关下载</dd>

        <dt>现下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店</dd>
    </dl>

</body>
</html>