这是我参与「第四届青训营 」笔记创作活动的的第5天

一、列表简介

都说表格是用来显示数据的，那么列表又是用来干嘛的尼？

答：

• 表格：显示数据
• 列表：页面布局

列表的最大特点：

• 整齐、整洁、有序
• 作为布局更便利
• ......

列表分类：

• 无序列表（重点）
• 有序列表（理解）
• 自定义列表（重点）

二、三大列表

1、无序列表（重点）

无序列表的标签：

<ul>标签：定义HTML中的无序列表，一般以项目符号呈现列表项，并使用<li>标签来定义
列表项

无序列表基本语法格式：

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

注意：

• 无序列表各列表项之间没有高低、前后顺序之分，各项间都是并列的；
• < ul>< /ul>中只能嵌套< li>< /li>标签，其他标签不允许直接嵌套；
• < li>< /li>标签之间相当于一个容器，可容纳所有元素；
• 无序列表会带有自己的相关样式属性，但在实际使用时，我们大多用CSS来进行设置

2、有序列表（理解）

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

有序列表标签：

<ol>标签：定义有序列表，列表项排列顺序以数字来显示；
以<li>标签定义列表项

有序列表的基本语法格式：

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

注意：

1. < ol>< /ol>中只能嵌套< li>< /li>,不允许直接嵌套其他标签；
2. < li>< /li>标签之间相当于一个容器，可容纳所有元素；
3. 无序列表也有自己的相关样式属性，但在实际使用时，我们仍多使用CSS来进行设置

3、自定义列表

自定义列表使用场景：

自定义列表常用于对术语或其他名词进行解释和描述，且定义的列表项前无任何项目符号。

<dl>:定义列表
<dt>:定义项目、名称
<dd>:描述每一个项目、名称

基本语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1<dd>
    <dd>名词1解释2<dd>
    <dt>名词2</dt>
    ...
</dl>

注：

• < dl>< /dl>里只能包含< dt>和< dd>；
• < dt>< dd>的个数没有限制，经常是一个< dt>对应多个< dd>;
• < dt>、< dd>属于兄弟关系，应该并列，而非包含。