正文
CSS之列表标签
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1 无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul就是英语 u nordered l ist，“无序列表”的意思。
li 就是英语 l ist i tem ， “列表项”的意思。
|
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 有序列表
o rdered l ist 有序列表，用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> 6 7 <dl> 8 <dt>上海</dt> 9 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd> 10 </dl> 11 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> |
