07.列表标签

一、列表标签简介

表格标签是用来显示数据的，列表标签则是用来布局的。

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

列表标签分为有序列表、无序列表和自定义列表。

二、无序列表

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

   <ul>
        <!-- 不允许在ul中输入其它标签和文字
        <a href="#">无序列表</a> -->
        <li>第一列</li>
        <li>第二列</li>
        <li>第三列</li>
        <li>第四列</li>
        <li>
            <a href="#">li标签里可以放任何东西</a>
        </li>
    </ul>

特点：

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. ul标签中只能嵌套li标签，不能直接在ul中输入其它标签或文字。
3. li标签之间相当于一个容器，可以容纳所有元素。
4. 无序列表会带有自己的样式属性，但在实际使用时，通常会通过css去掉默认的样式。

三、有序列表

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

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

    <ol>
        <li>第一列</li>
        <li>第二列</li>
        <li>第三列</li>
        <li>第四列</li>
        <li>第五列</li>
    </ol>

特点：

1. 有序列表的各个列表项从上至下按顺序排列，默认是从1开始的阿拉伯数字
   2.其余特点与无序列表一模一样。

四、自定义列表

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

    <dl>
        <dt>我是大哥，我最帅</dt>
        <dd>大哥说的对</dd>
        <dd>大哥说的都对</dd>
        <dd>大哥说的非常对</dd>
    </dl>

注意：

1. dl标签里面只能包含 <dt> 和 <dd>。
2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
3. <dl>与<dd>,<dd>是嵌套关系，但是<dt>与<dd>是并列关系，<dd>可以理解为是对<dt>进行的说明。

列表标签.png