【前端修炼场】— 列表有什么难的?

此文为【前端修炼场】第五篇，上一篇文章链接：这些标签你学会了么？快速拿下 “hr”

前言

首先我将为诸位道友引入列表的分类,请移步看下列表格

无序列表	有序列表	自定义列表
不区分顺序,开端没有数字	区分顺序,开端有数字	使用图文同框

接下来由我为诸位道友逐一介绍这三种列表!

---

1. 无序列表(unordered list)

基础介绍:

• 无序列表 — unordered list
• 标识符为 ul
• ul 内部只能写入 li 标签

多说无益,接下来我们直接上手操作!

1.1 code展示

注:代码块中只放入body内容

    <ul type="disc">
        <li>一碗黄豆酱</li>
        <li>最帅!</li>
    </ul>

    <ul type="circle">
        <li>一碗黄豆酱</li>
        <li>最帅!</li>
    </ul>

    <ul type="square">
        <li>一碗黄豆酱</li>
        <li>最帅!</li>
    </ul>

    <ul type="none">
        <li>一碗黄豆酱</li>
        <li>最帅!</li>
    </ul>
 
<!-- 在 ul 内部我们只能使用 li ,但是在 li 内部我们可以使用其他标识符!!!

代码注释方式：选中代码段按下Ctrl+/即可
-->

代码解释：

• 基础架构为双标签 ul 包含子标签 li，在 li里面可以添加信息
• 第一个无序列表 ul 的属性值是 type=“disc”，表示我们的序号是实心黑点
• 第二个无序列表 ul 的属性值是 type=“circle”，表示我们的序号是空心黑点
• 第三个无序列表 ul 的属性值是 type=“square”，表示我们的序号是方块
• 第四个无序列表 ul 的属性值是 type=“none”，表示我们的序号是空的

---

1.2 网页展示

1.3 创建技巧

如果我们想要一个 ul 创建很多个 li ，那么我们一个一个敲上去，这不有失诸位道友的颜面！所以在此我教大家一个快捷方式！

• 输入ul>li*n
  ul>li的意思是在ul内创建一个子标识符 li，*n的意思是建立n个 li，n为任意正整数！

诸位道友自行尝试并掌握！

---

2. 有序列表(Ordered List)

基础介绍:

• 有序列表 — Ordered List
• 标识符为 ol
• ol 标识内部只能为 li 标签

多说无益,接下来我们直接上手操作!

2.1 code展示

注:代码块中只放入body内容

     <ol>
        <li>我是一碗黄豆酱</li>
        <li>我爱学习,我爱CSDN!</li>
    </ol>

    <ol type="A" start="3">
        <li>我是一碗黄豆酱</li>
        <li>我爱学习,我爱CSDN!</li>
    </ol>
    
<!-- 在 ol 内部我们只可以使用 li ,但是在 li 内部我们可以使用其他标识符!!! -->

1. 上半部分是没有加上属性值的,用法就是在 ol 标识符内加上特定的标识符 li ,在其内输入内容,在网页中会自动进行排序展示内容(在后面会有网页展示)

2. 下半部分我们在 ol 标识符内设定属性值 type 和 start ( type的作用是选择我们列表顺序用什么方式进行,比如用字母1.2.3排序或者A B C排序等等 / start则是用来选择我们的顺序从哪开始,比如从3开始或者从C开始往后排序)
   注意start只能是数字,当我们想要从C开始,我们只需要将start设定为3即可!

3. 注意我注释的文字! (在 ol 内部我们只可以使用 li ,但是在 li 内部我们可以使用其他标识符!!!)

在此说明,type有如下:A a 1 i I 这五种,大家可以后面自行尝试!我就不逐一列举了

---

2.2 网页展示

• 不修改属性值时的网页:

  

  此时默认为利用数字1.2.3排序

• 修改属性值时的网页:

  

  诸位现在应该理解我前面所说的,当我将属性值中的type设立为A,那么就是设定排序方式为A B C的形式,start设置为3的意思就是我们排序的开端为C,依次往后推延

---

3. 自定义列表

基础介绍:

• 自定义列表可以图文放一起
• 标识符是 dl
• dl 内部是由 dt 和 dd构成（dt 标识内放入图片，dd 内部放文字）

多说无益,接下来我们直接上手操作!

3.1 code展示

注:代码块中只放入body内容

    <dl>
        <dt>这里放图片</dt>
        <dd>这里放文字</dd>
    </dl>

3.2 网页展示

大家此时一定很疑惑，为什么前面自由标签可以放图片很文字，咋不见你演示？诸位道友莫急，请看下篇超详细讲解！

---

总结

这篇文章我们对于三类列表进行了学习，下节课我们将会对如何插入图片进行介绍！

✨$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$