直接上代码了，大家如果发现问题了，记得提醒我哦，谢谢啦，嘻嘻
<!DOCTYPE html> <!-- 不区分大小写 -->
<html lang="en"> <!-- 指定语言 -->
<head>
<meta charset="UTF-8"> <!-- 指定字符集 -->
<title>Document</title>
<style>
/* 样式化结构元素 */
header,footer,nav,article,aside,section{
display: block;
}
body{
padding-top:80px;
}
a{
text-decoration: none;
}
header{
height: auto;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 80px;
padding: 0px 30px;
background: gray;
}
header>h1{
display: inline-block;
}
header>nav{
float: right;
margin-top: 20px;
margin-right: 50px;
}
nav>ul>li{
list-style: none;
float: left;
display: inline-block;
margin: 0px 10px;
}
article{
float: right;
width: 60%;
margin: 50px 0px;
background: #E0EEE0;
}
aside{
width: 30%;
float: left;
background: #B0E2FF;
}
footer{
position: fixed;
bottom: 0px;
left: 0px;
text-align: center;
display: block;
width: 100%;
background: #C1CDCD;
}
</style>
</head>
<body>
<!-- 样式需要自己添加 -->
<header>
<h1>
<abbr title="Hypertext Markup Language">HTML</abbr>5,for Fun & Profit
</h1>
<nav>
<ul>
<li><a href="/Archive">Archive</a></li>
<li><a href="/About">About</a></li>
</ul>
</nav>
</header>
<article>
<h2>
<code>nav</code> Isn't for <em>All</em> Links
</h2>
<p>
Though the <code>nav</code> element often contains links, that doesn't mean that
<em>all</em> links on a site need <code> nav</code>.
</p>
</article>
<article>
<h2>
You've Got the <code>DOCTYPE</code>. Now What?
</h2>
<p>
HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So once you have the
<code>DOCTYPE</code> in place, you should explore.
</p>
</article>
<aside>
<h2>HTML5 Elsewhere</h2>
<p>Feed your HTML5 fix with resourses from our partners:</p>
<ul>
<li>
<a href="http://lovinghtml5.com">Loving HTML5</a>
</li>
<li>
<a href="http://semanticsally.com">Semantic Sally</a>
</li>
</ul>
</aside>
<footer>
<p>
Copyright © 2011 <a href="http://html5funprofit.com">HTML5, for Fun & Profit</a>. All rights reserved.
</p>
</footer>
<script>
//IE9之前的IE版本，必须添加一些JS，使得IE识别这些元素，并允许对它们进行样式化
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
//然而，好像IE9以下没有用啊，是我写错了吗？
</script>
</body>
</html>