HTML基础03-HTML标签（下）02-列表标签

02-列表标签

表格是用来显示数据的，而列表是用来布局的。列表最大的特点就是整齐、整洁、有序，用它做布局会更加自由和方便。根据使用场景的不同，列表可以分为无序列表、有序列表和自定义列表三大类。

2.1无序列表（重点）

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

基本语法格式

<!-- 无序列表基本语法格式 -->
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

特点：

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul>中只能嵌套<li></li>标签，不可以直接在<ul></ul>中输入其他标签或者文字。（这是一条规范）
3. <li></li>标签相当于一个容器，可以容纳文字、图片等各种网页元素。
4. 无序列表会带有自己的样式属性（即每个列表项前的黑点），但在实际开发中会通过CSS来设置。

2.2有序列表（了解）

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

基本语法格式

<!-- 有序列表基本语法格式 -->
<ol>
    <li>列表1</li> 
    <li>列表2</li>
    <li>列表3</li>
</ol>

特点:

1. 同样<ol></ol>中只能嵌套<li></li>标签，不可以直接在<ol></ol>中输入其他标签或者文字。（这也是一条规范）
2. 同样，有序列表中，<li></li>标签也相当于一个容器，可以容纳文字、图片等各种网页元素。
3. 有序列表也会带有自己的样式属性（即每个列表项前的数字），但在实际开发中会通过CSS来设置。

2.3自定义列表（重点）

自定义列表（描述列表/定义列表）常用于对术语或名词进行解释和描述，定义列表的列表项前面没有任何项目符号。

在HTML页面中，<dl></dl>标签用于表示自定义列表，该标签会与<dt></dt>(定义项目/名称)和<dd></dd>(项目/名称的解释)一起使用。

基本语法格式

<!-- 自定义列表基本语法格式 -->
<dl>
    <dt>关注我们</dt>
    <dd>官方微信</dd>
    <dd>新浪微博</dd>
    <dd>联系我们</dd>
</dl>

特点：

1. <dl></dl>内只能包含<dt>和<dd>且两者是并列关系。
2. <dt>和<dd>没有数量限制，通常是一个<dt>对应多个<dd>。