2021-10-20 HTML学习笔记（11）列表标签

1. 列表标签概述
   表格是用来显示数据的，而列表则是用来布局页面的。列表最大的特点就是整齐有序。
   根据使用场景不同，列表可分为三类：无序列表、有序列表和自定义列表。

2. 无序列表
   使用<ul>标签表示HTML页面中项目的无序列表，列表中的项使用<li>标签定义。

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

无序列表特点：

• 无序列表的各个列表项之间无顺序之分。
• <ul></ul>中只能嵌套<li></li>，无法在<ul></ul>标签中插入其他标签或文字。
• <li></li>标签中可以容纳所有元素。
• 无序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置。

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

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

有序列表特点

1. 有序列表中的元素会自动根据输入顺序排序。

2. <ol></ol>中只能嵌套<li></li>，无法在<ol></ol>标签中插入其他标签或文字。

3. <li></li>标签中可以容纳所有元素。

4. 有序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置。

5. 自定义列表
   自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何符号。
   在HTML文档中，使用<dl></dl>标签用于定义描述列表，该标签会和<dt></dt>（定义项目）和<dd></dd>（描述项目）一起使用。

<dl>
  <dt>项目1</dt>
  <dd>项目内容1</dd>
  <dd>项目内容2</dd>
</dl>

自定义列表特点
<dl></dl>里面只能包含<dt></dt>和<dd></dd>。
<dt></dt>和<dd></dd>没有个数限制，经常是一个<dt></dt>对应多个<dd></dd>。

5. 各列表标签应用场景区分：
   当列表中元素并列出现时，使用无序列表，例如网页中的推荐页面；当列表元素呈现明显顺序时，使用有序列表，例如排行榜；当列表元素具有类似父子关系的关系时，使用自定义列表，例如网页中最下方的内容。