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>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>哈密瓜</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>哈密瓜</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dd>帮助中心</dd>
        <dd>联系我们</dd>
        <dd>账号管理</dd>
    </dl>
</body>
</html>