HTML5新布局元素布局,HTML5新的布局元素

HTML5相对于HTML4新增了一些布局元素

新增布局标签的优点：

⒈更加注重文档的结构内容而不是以什么形式展现出来

⒉对人的友好，更加语义化，增加代码的可读性

⒊对计算机友好，浏览器更容易解析

新增布局标签的内容：

新增的布局标签可概括为两类：一是控制主体结构的标签(头部，尾部，)

二是辅助主体内容的标签(嵌在主体里面的标签)

header元素：

▲主要用于设置一个页面的标题部分，可能还包括LOGO，导航栏等。

▲放在body中的第一个标签，即文档的顶端

▲是块元素

footer元素：

▲放在网页的底部区域，会包含友情链接，版权声明，文档建立日期，联系方式等。

▲是块元素

代码演示：

Document

body { height: 708px; }

header{ width: 100%; height:10%; background-color: green }

footer{ width: 100%; height:10%; background-color: blue }

#div0 { width: 100%; height:80%; background-color:red;}

#div1 { width: 20%; height:100%;background-color:pink;float: left }

#div2 { width: 80%; height:100%;background-color:gray;float: left }

我是头部

我是侧边栏