<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>html5标签的变化</title>
<style type="text/css">
/* html5中所有结构标签本质上就是div标签，只是其具有意义 */
/* 页面头部header */
header{
height:150px; background:red;
}
nav{
height:30px;
background:pink;
margin-top:100px;
}
nav ul li{
float:left;
width:100px;
height:30px;
line-height:30px;
}
/* 页面中间 */
div{
height:400px;
margin-top:10px;
}
section{
height:400px;
background:yellow;
width:70%;
float:left;
}
article{
background:#ccc;
width:300px;
margin:0 auto;
text-align:center;
}
aside{
height:400px;
background:blue;
width:28%;
float:right;
}
/* 页面底部footer */
footer{
height:100px;
background:green;
}
</style>
</head>
<body>
<!-- 男：<input type="checkbox" value="male" checked/> -->
<header>
<p>这是一个header</p>
<nav>
<ul>
<li>首页</li>
<li>公司概况</li>
<li>高端课程</li>
<li>专业师资</li>
<li>院校合作</li>
<li>企业服务</li>
<li>网博动态</li>
<li>在线测试</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个section</p>
<article>
<h2>小苹果</h2>
<p>
你是我的小呀小苹果<br/>
怎么爱你都不嫌多<br/>
你是我的小呀小苹果<br/>
怎么爱你都不嫌多<br/>
你是我的小呀小苹果<br/>
怎么爱你都不嫌多<br/>
你是我的小呀小苹果<br/>
怎么爱你都不嫌多<br/>
</p>
</article>
</section>
<aside>
<p>这是一个aside</p>
</aside>
</div>
<footer>
<p>这是一个footer</p>
</footer>
</body>
</html>原文：http://blog.csdn.net/wangzi11322/article/details/45305873