无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ul里面除了可以放li标签其他标签不可以放,li里可以放任意标签 -->
    <h4>通讯录</h4>
    <ul>
        <li>新朋友</li>
        <li>仅聊天朋友</li>
        <li>群聊</li>
        <li>标签</li>
    </ul>
</body>
</html>有序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ol里面除了可以放li标签其他标签不可以放,li里可以放任意标签 -->
     <!-- 有序列表有自己的样式属性,但实际开发中我们会使用css来设置 -->
    <h4>通讯录</h4>
    <ol>
        <li>新朋友</li>
        <li>仅聊天朋友</li>
        <li>群聊</li>
        <li>标签</li>
    </ol>
</body>
</html>自定义列表
使用场景(一个大哥后面好多小弟)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- dl里面除了可以放dt、dd标签其他标签不可以放 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
</body>
</html>列表总结




















