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）结束语：

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