无序列表
<!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>