Html元素嵌套

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都是装载内容的容器

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