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