HTML中dl、ul、ol用哪个比较好？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【HTML中dl、ul、ol用哪个比较好？】

 

标题：

【修真院xx（职业）小课堂】课题名称

HTML中dl、ul、ol用哪个比较好？

开场语：

大家好，我是IT修真院上海分院第10期的学员林璇，一枚正直纯洁善良的程序员，今天给大家分享一下，修真院官网WEB（职业）任务一，深度思考中的知识点——HTML中dl、ul、ol用哪个比较好？

（1）背景介绍：

什么是dl标签

dl标签就是定义列表，英文的单词是 definition list

接下来还有definition title  dt  列表的标题 这个标签是必须要的

definition description 列表的列表项，如果不需要它，可以不加 dd

就是说，dt、dd只能在dl里面；dl里面只能有dt、dd。

什么是ul标签

无序列表 unordered list，“无序列表”的意思。

无序列表中的每一项是li标签

li：list item，“列表项”的意思。

什么是ol标签

有序列表ol 英文单词：Ordered List。

里面的每一项都是li标签

（2）知识剖析：

列表

dl标签的作用非常大，在很多的大型网站上面都用它

上图可以看出，定义列表表达的语义是两层：

（1）是一个列表，列出了几个dd项目

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

ul标签

li不能单独存在，必须包裹在ul里面；反过来说

ul的“儿子”不能是别的东西，只能有li。

我们这里再次强调，ul的作用，并不是给文字增加小圆点的，

而是增加无序列表的“语义”的。

ol标签

和无序列表一样，有序列表也是可以嵌套的哦

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

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

（3）常见问题：

如何去除黑点

（4）解决方案：

list-style-type: none;

（5）编码实战：

写上list-style-type: none;这个就是直接清楚黑点的样式了

（6）拓展思考：

如何去修改li标签的其他样式呢？

我们知道li标签是存在于ol或者ul里面的

我们可以在里面设置属性

list-style-type: square;

（7）参考文献：

博客

b站视频

（8）更多讨论：

Q1：提问人：问题？

1.京东官网的哪部分是用了ul标签去做的呢？

A1：答

1.官网左边的物品栏和导航栏部分都是用ul标签做的

Q2：提问人：问题？

2.还有什么网站是用到了Ul标签和定义列表dl标签呢？

A2：答

2.淘宝网站，和当当网都有的，只要有导航栏的地方

Q3：提问人：问题？

3.dt、dd都是容器级标签，想放什么都可以所以用什么标签是由什么来决定的呢？

A3：答

3.而是语义（语义本质上是结构）。

（9）鸣谢：

感谢王刚师兄，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~