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>