考虑我们开发一个页面的过程：
1.设计页面的结构 - HTML：这个过程是使用各种HTML元素构建网页的结构。
2.设计页面的外观 - CSS：这个过程是使用CSS去改善网页的外观。
3.设计页面的行为 - Javascript：这个过程是给网页的元素赋予一定的行为。
上面这些除了CSS外，HTML5在另外两个方面都不同程度的进行了扩充。这个系列是集中在第一个方面。在前面，我们已经学习了复杂的canvas和svg元素，下面的章节会总结其他HTML5增加的元素。
结构型元素
HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等。含义如下图所示：
除了这种整个页面的结构型元素，html5也加入了块级别的语义元素，例如辅助元素aside，图像元素figure，细节描述元素details等。这些元素除了更能显示页面的布局含义外，与普通的div并没有其它的区别，仍然需要靠CSS去展示这些元素。这里就是简单看一个小例子：
<html>
<head>
<title>Dxy 博客 </title>
</head>
<body>
<header>
<h1><a href="http://www.cnblogs.com/dxy1982/%22%3Edxy1982 博客</a></h1>
</header>
<section>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章1</a></h2>
<p>简介</p>
</article>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章2</a></h2>
<p>简介</p>
</article>
<nav>
<a href="http://www.cnblogs.com/dxy1982/">博客</a>
</nav>
</section>
<nav>
<ul>
<li><h2>信息</h2>
<ul>
<li><a href="http://www.cnblogs.com/dxy1982/">政策</a></li>
<li><a href="http://www.cnblogs.com/dxy1982/">列表</a></li>
</ul></li>
<li><h2>文章</h2>
<ul>
<li><a href='/blog/2007/04/'>1月份</a></li>
<li><a href='/blog/2007/03/'>2月份</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2012 dxy1982</p>
</footer>
</body>
</html>
虽然这些元素使用起来都比较简单，但还是需要注意几点：
