1.综述

标签名标签含义标签属性单双标签
<ol></ol>有序列表li：子元素双
<ul></ul>无序列表li：子元素双
<dl></dl>自定义列表dt:术语名称
dd:术语描述		双

2.分类

2.1 有序列表(Ordered List)

列表元素有序，有顺序或者侧重顺序的列表。

2.2 无序列表（Unordered List）

列表元素无序，使用的比较多，无顺序或者不侧重顺序的列表。

2.3 自定义列表(Definition List)

列表元素自定义，包含术语名称以及术语描述的列表。

3.列表使用注意事项

  • 不论是ol标签还是ul标签，其子元素都是li，如果想用其他元素，就用li元素来包裹。
  • li标签不要单独使用
  • 列表是可以嵌套的，但是一般不超过三层，结构一定要写完整。
  • 自定义列表中，一个术语名称，可以有多个术语描述

4.使用场景

有序列表：

  • 如：头条的新闻排行榜、百科的目录
    无序列表：
  • 如：头条的顶部导航栏
    自定义列表：
  • 如：网站底部菜单栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
  </head>
  <body>
    <!-- 有序列表 -->
    <h2>要中百万彩票共分为几步?</h2>
    <ol>
      <li>挑一个好的床垫</li>
      <li>挑一个好的枕头</li>
      <li>洗一个热水澡</li>
      <li>躺在床上，做一个美梦</li>
    </ol>

    <!-- 无序列表 -->
    <h2>我想去那几个城市</h2>
    <ul>
      <li>
        <span>巴黎</span>
        <ul>
          <li>巴黎圣母院</li>
          <li>卢浮宫</li>
          <li>凯旋门</li>
        </ul>
      </li>
      <li>纽约</li>
      <li>罗马</li>
      <li>伦敦</li>
    </ul>

    <!-- 自定义列表 -->
    <h2>如何成为更优秀的人？</h2>
    <dl>
      <dt>行动力强</dt>
      <dd>任何事情先做，边做边计划，不能永远停滞于计划</dd>
      <dt>富有激情</dt>
      <dd>做事主观能动性强，积极热情，不被困难打到</dd>
      <dt>勇于尝试</dt>
      <dd>勇于尝试新事物，勇于接触新东西，打破常规，努力学习</dd>
    </dl>
  </body>
</html>