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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/84334200

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

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

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

【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)结束语:

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

PPT链接 视频链接

更多内容,可以加入IT交流群565734203与大家一起讨论交流

这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地

猜你喜欢

转载自blog.csdn.net/jnshu_it/article/details/84334200