HTML5相对于HTML4新增了一些布局元素
新增布局标签的优点：
⒈更加注重文档的结构内容而不是以什么形式展现出来
⒉对人的友好，更加语义化，增加代码的可读性
⒊对计算机友好，浏览器更容易解析
新增布局标签的内容：
新增的布局标签可概括为两类：一是控制主体结构的标签(头部，尾部，)
二是辅助主体内容的标签(嵌在主体里面的标签)
header元素：
▲主要用于设置一个页面的标题部分，可能还包括LOGO，导航栏等。
▲放在body中的第一个标签，即文档的顶端
▲是块元素
footer元素：
▲放在网页的底部区域，会包含友情链接，版权声明，文档建立日期，联系方式等。
▲是块元素
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
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 } </style>
</head>
<body>
<header>我是头部</header>
<div id="div0">
<div id="div1">我是侧边栏</div>
<div id="div2">我是内容</div>
</div>
<footer>我是底部</footer>
</body>
</html>
图示效果：
article元素：
▲用于定义一个内容区块(相对来说比较独立)，比如一篇文章，文章可以分头尾，通常用article。
一个帖子，一篇新闻消息，论坛的一段用户评论等。
▲article元素内可以嵌套其他结构元素，它可以有自己的头，尾，主体，要特别注意强调的是内容的独立性。
section是一段内容，但是并不独立，如放几段评论，每一段评论是一个article，放几篇新闻消息
▲article元素中可以再放article元素，article元素中的元素地位不一定是平等的，可以放文章之后再放评论，都在一个article中。
注意定义的是一个内容区块，section 更注重分类，相关联的绑在一起，而article注重的是内部的独立性。
section元素：
▲用来定义文章中的章节
▲定义一个区域分块，比如评论区
▲作为中间部分
▲给页面分区，给内容分段(与article区别看的是里面是否有嵌套了别的结构
标签)
就范围来说应该是section更小，但是这边有一个给页面分区作为中间部分是一个特例。
其实在用的时候，界限也没有划分得那么清楚。
article和section元素的异同点：
语义不同：▲article是相对独立的区块，但是不同的article之间有共同点，而section则是一整块。
例如用户A的评论在一个article里面，用户B的评论在另一个article 里面，但是他们都是放在section里面的。
相同：▲在本质上都是特殊的div，有语义的div
两者结合代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header >
<h3 >文章标题</h3>
<h5>作者：***</h5>
</header>
<p>我是正文*****************<br>**************<br>**********</p>
<section>
<article>
<header><h4>网友A的评论</h4></header>
<p>评论内容..............</p>
<footer>发布时间：2018/2/4</footer>
</article>
<article>
<header><h4>网友B的评论</h4></header>
<p>评论内容..............</p>
<footer>发布时间：2018/2/4</footer>
</article>
</section>
<footer>
<p>尾部：阅读：300 评论：80</p>
</footer>
</article>
</body>
</html>
aside元素：
▲用来设置侧边栏，侧边栏的内容和一些内容相关，例如可以定义article元素外的内容，前提是这些内容和article中的内容相关。
▲可嵌套在article元素中使用，作为附属信息，如与主体内容有关的参考资料，名词解释等。
nav元素：
▲通常用它设置导航栏，包括主导航栏和侧边导航栏
▲通常在文章页面中给文章做一个目录
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
nav{width: 100%;height: 40px; background-color:#E0FFFF; text-align: center;padding:15px;} li {display: inline;}
a {text-decoration: none}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">电脑办公</a></li>
<li><a href="">平面设计</a></li>
<li><a href="">设计素材</a></li>
<li><a href="">自学交流</a></li>
<li><a href="">网页设计</a></li>
<li><a href="">程序设计</a></li>
</ul>
</nav>
</body>
</html>。