本节大纲

• 章节4列表标签
  • 课时30无序列表(掌握)
  • 课时31无序列表练习(理解)
  • 课时32无序列表练习2(理解)
  • 课时33无序列表练习3(理解)
  • 课时34有序列表(理解)
  • 课时35定义列表(掌握)
  • 课时36定义列表练习(了解)

列表

给一堆数据添加列表语义
在HTML中列表的分类：

- 无序列表(unorderde list)  （最常用）
- 有序列表(ordered list)    （最不常用）
- 定义列表(definition list)     （较少用）

无序列表<ul>

无序列表作用

为一堆数据添加列表语义，这堆数据没有先后之分

• 例如排行榜，就是有序列表；例如中国城市列表就是无序列表

无序列表格式格式

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>5551</li>
</ul>

li就是list item的缩写，也就是列表条目的意思
注意点：

1. ul标签是给一堆数据添加列表语义的，而不是给他们添加小圆点的
2. ul和li都是整体的，是一个组合，他俩都是一起出现的，不会的的那个出现
3. 因为ul和li都是一个组合出现，不建议ul内添加其他标签

无序列表应用场景

• 新闻列表
• 商品列表
• 导航条

例子；ch031-uncordered-list.html

一些杂项

• ul和li都是一起的，成双成对的，但ul中不要有其他东西，li却可以加各种各样的标签，而且li中还可再套一个ul

有序列表<ol>

为一对数据添加列表语义，但其中的数据是有先后之分的

有序列表的格式

<ol>
    <li>No.1</li>
    <li>No.2</li>
    <li>No.3</li>
</ol>

Ps: ol>li*4 快速生成4个ol的li

定义列表<dl>

格式

<dl>
    <dt>北京</dt>
    <dd>中国的首都</dd>
    <dt>上海</dt>
    <dd>富人集中地</dd>
    <dt>山东</dt>
    <dd>喝酒大省！</dd>
</dl>

• dt:definition title缩写，定义标题
• dd；definition description缩写，定义标题定义的描述的

先通过dt标题定义标题，dd就描述一下标题

定义列表的作用

• 定义网站底部的相关信息
• 做图文混排

定义列表的注意点

1. 和ul/ol一样，dl和dt/dd都是整体出现的
2. 和ul/ol一样，dl内不建议出现其它标签，当需要丰富页面的时候，dt/dd内可以加各种各样的标签
3. 可以没有dd或者由多个dd，但仅推荐一个dt对应一个dd