什么是列表？
把…制成表,以表显示。
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序。
根据情境不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
1.无序列表***
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签，每个列表项始于 <li> 标签。
- 无序列表的各个李彪之间没有顺序级别之分，是并列的
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
- <li>与</li>之间相当于一个容器，可以容纳所有元素
- 无序列表会带有子级的样式属性，但在实际使用时，会使用css来设置
1.1练习
<!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>无序列表</title>
</head>
<body>
<h5>您喜欢什么水果？</h5>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>大鸭梨</li>
<li><img src="上升.png"></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<!-- 无序列表 重点 -->
</body>
</html>2.有序列表
有序列表即为排列顺序的列表，其各个列表项会按照一定的顺序排列定义
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来展示，并且使用<li>标签来定义列表表项。
有序列表的基本语法格式如下:
- <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与</li>之间相当于一个容器，可以容纳所有元素
- 有序列表带有自己的样式属性，但在实际使用时，会使用css来设置
2.练习
<!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>有序列表</title>
</head>
<body>
<h4>喜欢的明星排名：</h4>
<ol>
<li>肖战 100分</li>
<li>李俊基 90分</li>
<li>杨紫 80分</li>
</ol>
<!-- 有序列表 了解即可 -->
</body>
</html>3.自定义列表
自定义列表的使用场景：
自定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
基本语法如下：
3.1练习
<!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>自定义列表</title>
</head>
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>添加微信</dd>
<dd>联系我们</dd>
</dl>
<!-- 重点！！！ -->
</body>
</html>4.去掉li前面的项目符号
4.1练习
<!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>无序列表</title>
<style>
/*取消li前面的项目符号*/
ul li {
list-style: none;
}
</style>
</head>
<body>
<h5>您喜欢什么水果？</h5>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>大鸭梨</li>
<li><img src="上升.png" /></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<!-- 无序列表 重点 -->
</body>
</html>
