这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【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)结束语:
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。