从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/122406600

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：表单制作 — 今天你学习了吗？（CSS：Day05）

文章目录

- 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

前言

这应该最后一节基础标签的课程了，之后开始讲解CSS的知识。大家可以归纳整理一下目前学习道德标签，不得不说毕业设计太难了，每周都安排得满满的，还一头雾水，哭辽哭辽~

第六节课：主要讲述了列表标签

一、列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：

无序列表
有序列表
自定义列表

二、无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

无序列表使用基本语法：

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

注意：

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li><li>,直接在<ul></ul>标签中输入其他标签或则文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

ul是unorered lists的缩写（无序列表）
li是list item的缩写（列表项目）

无序列表样式
无序列表中除了前面默认的圆点点样式之外也可以使用其他的样式去更改，属性type就是来更改前面圆点点的样式的。

属性值	效果
type=“disc”	默认样式，圆点点
type=“circle”	空心圆样式
type=“square”	实心正方形

    <!-- 无序列表 -->
    <ul type="disc">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <ul type="circle">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <ul type="square">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

效果图：
在这里插入图片描述

三、有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

ol是ordered lists的缩写（有序列表）
li是list item的缩写（列表项目）

注意：

<ol></ol>中只能嵌套<li></ li>，直接在<ul></ul>标签中输入其他标签或则文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

属性值	效果
type=“A”	以大写英文字母样式去数
type=“a”	以小写英文字母样式去数
type=“I”	大写的罗马数字
type=“i”	小写的罗马数字

注意：当type="1"时，使用默认的数字计数

    <!-- 有序列表  -->
    <ol type="1">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <ol type="A">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <ol type="a">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <ol type="I">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <ol type="i">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

效果图：
在这里插入图片描述

四、自定义列表

自定义列表与前两者有所区别，它不仅仅是一个列表项，还包含着一系列术语及说明的组合，在HTML中，定义列表用<dl>元素表示，列表项用<dt>表示，列表项说明用<dd>表示，基本语法如下：

<dl>
   <dt>定义列表项1</dt>
   <dd>这是一个定义列表（说明1）</dd>
   <dt>定义列表项2</dt>
   <dd>这是一个定义列表（说明2）</dd>
  ...
</dl>

dl是definition lists的英文缩写(自定义列表)
dt是definition term的缩写(自定义列表组)
dd是definition description的缩写（自定义列表描述）

自定义列表注意点：

<dl></dl>里面只能包含< dt>和<dd>。
<dt>和<dd>个数没有限制，经常是一个< dt>对应多个<dd>。
dl里面只能放dt 和dd不允许放其他标签了。

五、列表标签总结

标签名	定义	说明
`<ul></ul>`	无序列表	里面只包含`li`没有顺序，使用较多，`li`里面可以包含任何标签
`<ol></ol>`	有序列表	里面只能包含`li`有顺序，使用相对较少，`li`里面可以包含任何标签
`<dl></dl>`	自定义列表	里面只能包含`dt`和`dd`有顺序，`dt`和`dd`里面可以放任何标签