HTML列表标签

列表标签

一、无序列表(unordered list)(双标签)

1、作用

给一堆内容添加无序列表语义(一个没有先后顺序整体)，列表中的条目是不分先后

2、格式

<ul>
  <li>北京</li>
  <li>上海</li>
  <li>深圳</li>
  <li>武汉</li>
</ul>

3、应用场景

1. 导航条
2. 商品列表
3. 新闻列表

4、说明

1. 这里指的无序是指对于主体来说内容没有先后之分
2. 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住，ul的作用并不是给文字添加小圆点，而是增加无序列表的语义
3. 其实ul还有一个type属性，可以修改先导符号的样式，取值有disc、square、circle几种，但以后样式都是通过css来完成，所以了解一下就行
4. ul是一个组标签，一定是一坨一坨的出现，也就是说li标签不能单独存在，必须包裹在ul里面
5. 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签，永远记住ul里面最好只写li标签
6. 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

5、应用场景

1. 新闻导航

   

2. 商品列表

   

3. 顶部导航

   

4. 底部导航

   

二、有序列表(ordered list)(双标签)

1、作用

给一堆内容添加有序列表语义(一个有顺序整体)，列表中的条目有先后之分。

2、格式

<h4>期中考试排名</h4>
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>隔壁老王</li>
</ol>

3、应用场景

其实ol应用场景并不多，因为能用ol做的用ul都能做

4、说明

1. ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
2. 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
3. 但是由于样式将来都是通过css来完成，所以了解一下就行

三、定义列表(definition list)(双标签)

1、作用

给一堆内容添加列表语义, 通过dt罗列出列表的条目，然后再通过dd给每个条目进行相应的描述

2、格式

<dl>
  <dt>dt英文definition title, 翻译为定义标题</dt>
  <dd>dd英文definition description, 翻译为定义描述信息</dd>
</dl>

3、应用场景：

1. 网站底部相关信息
2. 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

4、说明：

1. 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
2. dd和dt和li标签一样是容器标签，里面可以添加任意标签
3. 定义列表非常灵活，可以给一个dt配置多个dd，但是最好不要出现多个dt对应一个dd，dd的语义是描述离它最近的一个dt，所以其它dt相当于没有描述，而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
4. 定义列表非常灵活，可以将多个dt+dd组合拆分为多个dl
5. dt内不能使用h1-h6标签，也就是说，dt不能放标题标签如h1、h2、h3、h4等

5、应用截图

1. 天猫

   

2. 京东

   

3. 公司简介