CSS之列表标签

1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul就是英语unordered list，“无序列表”的意思。

li 就是英语list item ， “列表项”的意思。

1 <ul>

2 <li>北京</li>

3 <li>上海</li>

4 <li>广州</li>

5 <li>铁岭</li>

6 </ul>

也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

下面的是错误的，因为必须用ul包裹：

7 <li>北京</li>

8 <li>上海</li>

9 <li>广州</li>

10 <li>铁岭</li>

下面的也是错误的，因为ul里面只能有li标签，而不能有别的：

1 <ul>

2 <h3>中国主要城市</h3>

3 <li>北京</li>

4 <li>上海</li>

5 <li>广州</li>

6 <li>铁岭</li>

7 </ul>

浏览器会默认的给无序列表小圆点的“先导符号”

但是，再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

ul标签实际应用场景：

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：

1 <ul>

2 <li>

3 <h4>谈治国理政</h4>

4 <p>¥49.00</p>

5 <p>《谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以123同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>

6 </li>

7 <li>

8 <h4>用典</h4>

9 <p>¥23.60</p>

10 <p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对总书记重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>

11 </li>

12 <li>

13 <h4>摆脱贫困</h4>

14 <p>26.00</p>

15 <p>追本溯源融会贯通深入学习贯彻总书记系列重要讲话精神推动学习贯彻向广度深度拓展总书记**部个人专著时隔22年后重印发行</p>

16 </li>

17 </ul>

甚至于可以再放一个ul：

1 <ul>

2 <li>

3 吃的

18 <ul>

19 <li>饼干</li>

20 <li>面包</li>

21 <li>

22 巧克力

23 <ul>

24 <li>德芙</li>

25 <li>费列罗</li>

26 </ul>

27 </li>

28 </ul>

4 </li>

5 <li>

6 用的

7 <ul>

8 <li>笔记本</li>

9 <li>圆珠笔</li>

10 </ul>

11 </li>

12 <li>

13 喝的

14 <ul>

15 <li>牛奶</li>

16 <li>可乐</li>

17 </ul>

18 </li>

19 </ul>

2 有序列表

ordered list 有序列表，用ol表示

1 <ol>

2 <li>小苹果</li>

3 <li>月亮之上</li>

4 <li>最炫民族风</li>

5 </ol>

浏览器会自动增加阿拉伯序号：

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。

ol里面只能有li，li必须被ol包裹。li是容器级。

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

1 <ul>

2 <li>1. 小苹果</li>

3 <li>2. 月亮之上</li>

4 <li>3. 最炫民族风</li>

5 </ul>

3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 　　　　　　　　　　定义列表

dt表示definition title 　　　　　　　　定义标题

dd表示definition description 　　　　　　定义表述词儿

dt、dd只能在dl里面；dl里面只能有dt、dd

1 <dl>

2 <dt>北京</dt>

3 <dd>国家首都，政治文化中心</dd>

4 <dt>上海</dt>

5 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

6 <dt>广州</dt>

7 <dd>中国南大门，有珠江、小蛮腰</dd>

8 </dl>

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

dd是描述dt的。

定义列表用法非常灵活，可以一个dt配很多dd：

1 <dl>

2 <dt>北京</dt>

3 <dd>国家首都，政治文化中心</dd>

4 <dd>污染很严重，PM2.0天天报表</dd>

5 <dt>上海</dt>

6 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

7 <dt>广州</dt>

8 <dd>中国南大门，有珠江、小蛮腰</dd>

9 </dl>

北京这个项目，用了两个dd来描述。

还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。

1 <dl>

2 <dt>北京</dt>

3 <dd>国家首都，政治文化中心</dd>

4 <dd>污染很严重，PM2.0天天报表</dd>

5 </dl>

7 <dl>

8 <dt>上海</dt>

9 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

10 </dl>

12 <dl>

13 <dt>广州</dt>

14 <dd>中国南大门，有珠江、小蛮腰</dd>

15 </dl>

真实案例：

结构：

1 <dl>

2 <dt>购物指南</dt>

3 <dd>

4 <a href="#">购物流程</a>

5 <a href="#">会员介绍</a>

6 <a href="#">生活旅行/团购</a>

7 <a href="#">常见问题</a>

8 <a href="#">大家电</a>

9 <a href="#">联系客服</a>

10 </dd>

11 </dl>

12 <dl>

13 <dt>配送方式</dt>

14 <dd>

15 <a href="#">上门自提</a>

16 <a href="#">211限时达</a>

17 <a href="#">配送服务查询</a>

18 <a href="#">配送费收取标准</a>

19 <a href="#">海外配送</a>

20 </dd>

21 </dl>