传智播客上海校区深度解析Html标签划分

互联网 | 编辑: 徐晶晶 2017-09-27 16:00:08转载

众所周知,Html中标签很多,每一个还可以进行相互的转换,不仅不容易记忆,而且经常会混肴,这让很多人头疼不已。今天,传智播客上海校区的老师就带着大家一起来了解标签分类、行内元素以及块状元素等知识。

众所周知,Html中标签很多,每一个还可以进行相互的转换,不仅不容易记忆,而且经常会混肴,这让很多人头疼不已。今天,传智播客上海校区的老师就带着大家一起来了解标签分类、行内元素以及块状元素等知识。
      
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。传智播客上海校区老师指出:div这样的块级元素,会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子。

与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

首先,传智播客上海校区老师列举了行内和块状元素的区别:

行内、块状元素区别:
(1).块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
(2).一般情况下,块级元素可以设置width, height属性,行内元素设置width,  height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)
(3).块级元素可以设置margin和padding。行内元素的水平方向的
padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

对于常见的常见的块级标签和内联元素,传智播客上海校区老师也进行了详细的划分:

常见的块级标签和内联元素
(1).块级标签:
div,p,ul,ol,li,h系列标签
(2).内联元素
span,a,strong,b, i 等等

以上是传智播客老师整理的关于标签划分的一些常用知识点,相信有了这些清晰明了的知识点,大家在工作中一定能事半功倍。

相关阅读

每日精选

点击查看更多

首页 手机 数码相机 笔记本 游戏 DIY硬件 硬件外设 办公中心 数字家电 平板电脑