列表标签 ul，ol，li
ul、ol、li标签 都属于块级标签，独占一行
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容，li不能单独存在，必须包裹在ul，ol里面
<ul>:unordered lists的缩写 无序列表，无序列表中的每一项是<li>
<!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">
<title>Title</title>
</head>
<body>
<ul>
<li>我的账户</li>
<li>我的订单</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
</body>
</html>
前面都右实心圆点
ul标签的属性： type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
<!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">
<title>Title</title>
</head>
<body> <!-- 无序列表 -->
<ul type="none">
<li>我的账户</li>
<li>我的订单</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
</body>
</html>
没有了前面的实心圆点，但前面还占着位置
<ol>:ordered listsde的缩写 有序列表，里面的每一项是<li>
前面显示数字
<!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">
<title>Title</title>
</head>
<body> <!-- 有序列表 -->
<ol>
<li>我的账户</li>
<li>我的订单</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</body>
</html>
ol标签的属性：
type：列表标识的类型
- 1：数字(默认值)
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
<!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">
<title>Title</title>
</head>
<body> <!-- 有序列表 -->
<ol type="A">
<li>我的账户</li>
<li>我的订单</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</body>
</html>
列表之间是可以嵌套的。举个例子：
<!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">
<title>Title</title>
</head>
<body> <ul>
<li>北京市
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>东城区</li> </ul>
</li> <li>广州市
<ul>
<li>天河区</li>
<li>白云区</li>
</ul>
</li>
</ul>
</body>
</html>
