前端 - 基础 列表标签 - 无序列表 有序列表 详解

使用场景 ： 如果说 表格是用来展示数据的，那列表就是用来 布局的

                   **列表**最大的特点就是  **整齐，整洁，有序**，拿它作为布局会更加自由和方便 

分类 ： 那根据使用场景不同 又可以 将列表 分成 三大类

           **无序列表，有序列表，和自定义列表**

    ![](https://img-blog.csdnimg.cn/direct/9c579b2831dc4447bfa0c4d6bfabf108.jpeg)

          无序就是 没有顺序的列表， 有序列表就是 有着顺序的列表 

          自定义列表 就是 下面是对上面的说明~！！

          无序列表是重点中的重点， 好多都会使用到~！！！

无序列表 ：

**

**标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，

       而列表项使用  **<li>**  标签定义 

基本语法格式 ：

<ul>
    <li> 列表项1 </li>
    <li> 列表项2 </li>
    <li> 列表项3 </li>
    ........
</ul> 

     ![](https://img-blog.csdnimg.cn/direct/1b426b9f1f2243de822b678f78d30a6e.png)

        

      那实例就是  ： 

   ![](https://img-blog.csdnimg.cn/direct/8cc5a938c6f64fe596286bee55684ac8.jpeg)

      如上示标记， 外面大圈儿就是  <ul>   里面 小圈儿 就是  <li> 

示例 ：

          ![](https://img-blog.csdnimg.cn/direct/93099dc14df04cbeaae7a01c24c62a8d.png)

          **===>>>**

          ![](https://img-blog.csdnimg.cn/direct/87d9100051de4861892f2d1457073c28.png)

           这就是无序列表的展现方式， 显示的是 前面有一个小黑点儿； 

           他们之间也不讲究顺序 。

           **强调**  ： 

                         **#**  无序列表的各个列表之间没有顺序级别之分，是并列的。 

                         **# ****<ul> </ul> **中只能嵌套** <li> </li> ** ，直接在 <ul> </ul> 标签中输入其他标签或

                             者文字的做法是不被允许的~！！

                             就是说在  <ul> 标签里 只能是  <li> 标签 ~~！

                         **#**   而 <li>  标签里面是可以容纳任何元素的~！！

                         **#**   无序列表会带有自己的样式属性，就是上示 无序列表里 <li> 标签前面的小黑

                              点儿，它是可以改的，我们先不操心修改 ；     

                              但是在实际使用时，我们会使用 CSS 来进行样式设置 ~！！

有序列表 ：

    有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序来定义。 

    由于有序列表在开发中牵扯不多，所以我们也只是了解性学习下即可 。 

     **使用场景**  ： 就是说如果各个列表之间有一定的顺序，谁在前面，谁在后面有讲究，那就使

                          用有序列表。

     在 HTML 标签中， **<ol>** 标签用于定义 有序列表，列表排序以数字进行显示，并且使用 **<li> **

     标签来定义列表项。 

     基本语法格式   ： 

<ol>
    <li> 列表项1 </li>
    <li> 列表项1 </li>
    <li> 列表项1 </li>
    <li> 列表项1 </li>
    .....
</ol> 

   **示例**  ： 

   

           ![](https://img-blog.csdnimg.cn/direct/85dadc6b01124dadb077870197f82cd6.png)

           ![](https://img-blog.csdnimg.cn/direct/3e8d899e446e41aaa74035fb3b1a3d63.png)

           它会自动给 小列表 前面加上 数字，来彰显有序列表的有序~！！ 

           这个顺序也不能 随意颠倒 ~！！ 

           **强调** ：

                    **# **   <ol> 标签中只能嵌套 <li> ， 直接在 <ol> 标签中输入其他标签或者文字的做法

                         也是不被允许的 ~！！ 

                    **# **  <li> 内部也是可以容纳任何元素 

                    **#**    有序列表会带有自己的 样式属性（ 就是前面的 数字序号 )  ，而我们在实际使

                          用的时候会采用 CSS 来进行设置~！！！