Html元素嵌套

2017-09-13 12:30:42来源:CSDN作者:qq_20037049人点击

分享

html标签嵌套规则:
1.块级元素
div,h1-h6,ul,ol,p,table,dd,dt,form,menu,center,hr,…
特点:总是在新行上开始,高度、行高以及顶和底边距都可控制,宽度缺省是它容器的100%,除非设定一个宽度,要注意的是块级元素即使设置了宽度,仍然是独占一行,block元素可以设置margin和padding属性.
功能:主要用来搭建网站构架、页面布局、承载内容
2.行内元素
span,a,input,img,label,em,font,i,b,strong,sub,textarea…
特点:和其他元素都在一行上,高,行高,以及顶和底边距不可改变,宽度就是它的文字或图片的宽度,不可改变。
功能:用于加强内容显示,控制细节,例如:加粗、斜体等等

3.块级元素与行内元素并不是一成不变的,可以通过css来改变他的特性:
display:inline;//行内元素
displya:block;//块级元素
{
display:inline与display:inline-block的比较
display:inline:
1.inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化;2.inline元素width,height属性无效;3.inline元素的margin和padding属性,只在水平方向产生边距效果;但在竖直方向上不会产生边距效果。
dispaly:inline-block;
1.简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个a元素赋予inline-block属性值,使其具有block的宽度高度特性又具有inline的同行特性.
}

4.虽然HTML标签很多并且在制作页面的时候可以无限嵌套,但是嵌套也是有规则的,不能随意嵌套。有些标签是固定的嵌套规则,比如ul包含li、ol包含li、dl包含dd等等。还有很多是独立标签,如何用他们来编写优秀的页面,如下:
a.块级元素与块级元素平级、内嵌元素与内嵌元素平级
b.块元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它的内联元素
c.有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素
h1~h6、p、dt
d.块级元素不能放在标签p里面
e.li标签可以包含div标签,因为li和div都是装载内容的容器

总结:虽然我们可以嵌套标签,但是为了提高浏览器的渲染效率,我们应该尽少的嵌套标签,扁平化

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台