效果展示：
H5新标签布局展示.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
body{
background-color: #333333;
}
.header1,.nav,.aside1,.header2,.section1,.section1 header,.section1 article,.section1 footer,.footer1,.menu{
margin: 10px;
background-color: #666666;
color: #fff;
text-align: center;
border-radius: 10px;
font-family:"Lucida handwriting",Arial,Helvetica,sans-serif;
}
.header1,.nav{
height: 50px;
line-height: 50px;
}
.menu{
width: 20%;
float: left;
height: 400px;
line-height: 400px;
}
.aside1{
float: right;
width: 25%;
height: 400px;
line-height: 400px;
}
.section1{
float: left;
width: 46%;
box-sizing: border-box;
height: 400px;
}
.section1 header{
background-color: #999999;
height: 50px;
line-height: 50px;
}
.section1 article{
height: 250px;
background-color: #999999;
line-height: 250px;
}
.section1 footer{
background-color: #999999;
height: 50px;
line-height: 50px;
}
.footer1{
width: 99%;
float: left;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<header class="header1">header</header>
<nav class="nav">
nav
</nav>
<aside class="aside1">aside</aside>
<menu class="menu">menu</menu>
<section class="section1">
<header>header</header>
<article>article</article>
<footer>footer</footer>
</section>
<footer class="footer1">footer</footer>
<!-- 使用<div id="header">标记元素没有任何实现的意义，
即浏览器不能从标记的ID号属性来推断这个标记的真正含义，
因为ID号是可以变化的，因此不利于寻找；
而HTML 5中的新元素<header>，
明确地告诉浏览器它是一个页头，并且该标记可以重复使用。 -->
<!--[if !IE 9]>
<style>
.not-ie{
color:red;
}
</style>
<![endif]-->
<!--
您正在使用
<span class="not-ie">非IE</span>
浏览器 -->
</body>
</html>
