HTML标签 - 列表标签

HTML标签 - 列表标签

首先需要知道，什么是列表标签？

列表标签的作用就是给一堆数据添加列表语义，也就是告诉浏览器这一堆数据是一个整体。

无序列表（unordered list）

• 作用：给一堆数据添加列表语义，并且这一堆数据中的所有数据都没有先后之分。

那么什么叫做有先后之分？什么叫做没有先后之分？

这一部分数据不能随意替换展示先后顺序的，就是有先后之分，例如：排行榜

这一部分数据可以随意替换展示先后顺序的，就是没有先后之分，例如：中国城市列表

• 格式：

<ul>
  <li></li>
  <li></li>
</ul>

• 注意点：

  • 无序列表是用来给一堆数据添加列表语义的，而不是用于给这一堆数据添加小圆点样式的。
  • ul标签和li标签是一个整体，所以一般情况下，ul标签和li标签都是一起出现，不会单独出现，也就是说不会单独使用一个ul标签或者单独使用一个li标签，都是结合在一起使用。
  • 由于ul标签和li标签是一个组合，所以ul标签中不推荐包含其他标签，也就是说以后在ul标签中一般情况下只会看到li标签。
  • 前面说过ul中最好只放li标签，但是在开发过程中，li标签中的内容可能会很复杂，所以可以继续在li标签中添加其他标签来丰富界面。
  • 在无序列表的li标签中，除了可以添加其他标签来丰富界面以外，还可以通过添加ul标签来丰富界面，也就是说ul中有li，li中又可以有ul。

• 快捷键：

  • ul>li + tab键：生成一对ul标签，在ul标签中生成一对li标签。
  • ul>li*3 + tab键：生成一对ul标签，在ul标签中生成3对li标签。

• 无序列表应用场景举例：

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

有序列表（ordered list）

• 作用：给一堆数据添加语义，并且这一堆数据中所有的数据都有先后之分。

• 格式：

<ol>
  <li></li>
  <li></li>
</ol>

• 有序列表的区别仅仅是是否有先后之分，其他的使用方法和注意点与无序列表ul标签都差不多。

定义列表（definition list）

• 作用：给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题 ，然后通过dd标签给每个标题添加描述信息。

• 格式：

<dl>
  <dt>北京</dt>
  <dd>中国的首都</dd>
  <dt>上海</dt>
  <dd>中国的经济中心</dd>
</dl>

• 标签含义：dt和dd都是英文缩写，dt是definition title的缩写，所以dt的含义就是用来定义列表中的标题 ；dd是definition description的缩写，所以dd的含义就是用来定义标题对应的描述。

• 应用场景：

  • 做网站尾部的相关信息
  • 图文混排

• 注意点：

  • 和ul/ol一样，dl和dt/dd是一个整体，一般情况下不会单独出现，都是一起出现。
  • 和ul/ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签。
  • 一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有多个dd或者没有dd，都不推荐使用。推荐使用一个dt对应一个dd。
  • 和li标签一样，当需要丰富界面的时候，可以在dt/dd标签中继续添加其他标签，但是建议不要再dl标签中添加。

• 快捷键：

  • dl>dt+dd + tab键：生成一对dl标签，在dl标签当中生成一对dt和dd标签。

参考链接：

W3School官方文档：www.w3school.com.cn