常见的网页结构布局是酱紫的，真是美美哒^O^：
一、添加基本标题h1~h6（没什么好说的）；
二、标题分组hgroup
<hgroup>用来将标题和子标题进行分组。如果一篇文章article或一个区块section里只有一个标题，就不用分组。如果出现多个标题，可以用hgroup将标题框起来。
<section>
<hgroup>
<h1>金陵十三钗</h1>
<h3>——张艺谋电影《金陵十三钗》原著同名小说</h3>
</hgroup> <p>剧版史诗巨作《四十九日.祭》原著小说，严歌苓亲自操刀改编，张黎携手张嘉译，小宋佳，胡歌，文章倾情演绎，2014年12月1日重磅登陆湖南卫视，鼎力推荐！</p>
</section>
提示：<hgroup> 标签是 HTML 5 中的新标签。
三、生成节section
<section> 标签定义文档中的节（section、区段）。比如专题组、章节、页眉、页脚或文档中的其他部分；<section>还能对文档层次结构进行划分。它通常由标题head和内容content组成。它不是一般的容器元素，应该作为结构元素出现。
section不能用来包裹一段完整的独立的文章，包含独立文章用article元素实现。
提示：<section> 标签是 HTML 5 中的新标签。
四、头部header和尾部footer
header引导和统领下文，作为页面的头部使用，或放在section或article内作为区域或文章的头部。可以包含h1~h6或hgroup元素，也可以包含其他内容。
提示：H5的新标签，IE 8 以及更早的版本不支持 <header> 标签。
footer元素作为上层内容区或根区块的脚注，例如版权部分，某区域内容的相关链接或脚注等。
传统实现页脚的方法是用div:
<div id="footer">
<div class="wp tc clearfix">
<div>
<a href="http://by.cuc.edu.cn/aboutUs/" target="_blank">关于我们</a> / <a href="http://by.cuc.edu.cn/frilinks/" target="_blank">友情链接</a>
</div>
<div>
版权所有 <em>©</em> <a href="http://by.cuc.edu.cn/" target="_blank">中国传媒大学</a> / 京ICP备06054859号-1 京ICP备06054859号-1
<div>
地址：北京市朝阳区定福庄东街一号 / 邮政编码：100024 / 技术支持：中国传媒大学计算机与网络中心 中传视友（北京）传媒科技有限公司·<a href="http://www.cuctv.com" class="style-a-red" target="_blank">视友网</a>
</div>
</div>
</div>
在H5中，可以不使用div，用更加语义化的footer元素实现：
<footer>
<article class="wp tc clearfix">
<div>
<a href="http://by.cuc.edu.cn/aboutUs/" target="_blank">关于我们</a> / <a href="http://by.cuc.edu.cn/frilinks/" target="_blank">友情链接</a>
</div>
<div>
版权所有 <em>©</em> <a href="http://by.cuc.edu.cn/" target="_blank">中国传媒大学</a> / 京ICP备06054859号-1 京ICP备06054859号-1
<div>
地址：北京市朝阳区定福庄东街一号 / 邮政编码：100024 / 技术支持：中国传媒大学计算机与网络中心 中传视友（北京）传媒科技有限公司·<a href="http://www.cuctv.com" class="style-a-red" target="_blank">视友网</a>
</div>
</article>
</footer>
一个页面中可以有多个footer，既可以作为整个页面的页脚，也可以作为一个内容区块的结尾：
<section>
......
<footer>
......
</footer>
</section>
提示：H5的新标签，IE 8 以及更早的版本不支持 <footer> 标签。
五、导航区nav
<nav> 标签定义导航链接的部分。布局中一般使用nav和ul、li配合使用。
传统实现导航结构的方法是使用div:
<div class="nav">
<ul>
<li>
<a href="/" class="header-link header-nav-link active">Home</a>
</li>
<li>
<a href="/snippets" class="header-link header-nav-link">Code Snippets</a>
</li>
<li>
<a href="/ui-kits" class="header-link header-nav-link">Interface Kits</a>
</li>
<li>
<a href="/faq" class="header-link header-nav-link">FAQ</a></li>
<li>
<a href="/search" class="header-link header-search-link" data-toggle="search">Search</a>
</li>
</ul>
</div>
使用nav标签实现效果：
<nav class="header-nav">
<a href="/" class="header-link header-nav-link active">Home</a>
<a href="/snippets" class="header-link header-nav-link">Code Snippets</a>
<a href="/ui-kits" class="header-link header-nav-link">Interface Kits</a>
<a href="/faq" class="header-link header-nav-link">FAQ</a>
<a href="/search" class="header-link header-search-link" data-toggle="search">Search</a>
</nav>
提示：H5的新标签，IE 8 以及更早的版本不支持 <nav> 标签。
六、输出文章article
<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论
<body>
<div class="content">
<article data-page="single" class="post">
<header class="entry-header">
<h1 class="entry-title">浅谈HTML5 Canvas arc() 方法</h1>
</header>
<!-- .entry-header -->
<div class="entry-content">
<p>
我们可以使用arc()方法，在canvas中创建一个圆形，今天我们就来谈谈arc()方法。
</p>
<p>
arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)
</p>
<p>
<strong>代码：</strong>
</p>
<p>
context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
</p>
<p>
</p>
<p>
<a href="#"><img style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="1" src="http://gtms01.alicdn.com/tps/i1/TB1zTVYHXXXXXbiaXXXyTIh.FXX-128-95.png" alt="1" width="244" height="" border="0"></a>
</p>
<p>
</p>
</div>
<!-- .entry-content -->
</article>
</div> </body>
提示：H5的新标签，IE 8 以及更早的版本不支持 <article> 标签。
七、附注栏aside
<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。用于标记当前文章或页面的附属信息部分，比如参考资料或名词解释等内容常常作为附注出现。最典型的应用是侧边栏。可以放友情链接、相关文章、广告入口等内容。例如页面的左侧导航栏：
<div class="content">
<aside class="public-category">
<h3>博客分类</h3>
<div class="menu-cate-container">
<ul id="menu-cate" class="menu">
<li id="menu-item-800" class="menu-item"><a href="#">HTML5游戏开发</a>
<ul class="sub-menu">
<li id="menu-item-833" class="menu-item"><a href="#">开发技巧</a></li>
<li id="menu-item-834" class="menu-item"><a href="#">引擎推荐</a></li>
</ul>
</li>
<li id="menu-item-209" class="menu-item"><a href="#">移动前端开发</a>
<ul class="sub-menu">
<li id="menu-item-211" class="menu-item "><a href="#">HTML5</a></li>
<li id="menu-item-217" class="menu-item"><a href="#">CSS3</a></li>
<li id="menu-item-144" class="menu-item"><a href="#">响应式设计</a></li>
</ul>
</li>
<li id="menu-item-1212" class="menu-item"><a href="#">全栈式Javascript</a>
<ul class="sub-menu">
<li id="menu-item-1214" class="menu-item"><a href="#">jQuery</a></li>
<li id="menu-item-518" class="menu-item"><a href="#">NodeJS</a></li>
<li id="menu-item-588" class="menu-item"><a href="#">AngularJS</a></li>
<li id="menu-item-1213" class="menu-item"><a href="#">Acoluda</a></li>
</ul>
</li>
</ul>
</div>
<div class="cl">
</div>
</aside>
</div>
提示：H5的新标签，IE 8 以及更早的版本不支持 <aside> 标签。
八、输出联系人信息address
<address> 标签定义文档或文章的作者/拥有者的联系信息。包括文档创建者名字、站点链接、电子邮箱、真实地址、电话号码等信息。如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息；如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
提示：<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分；<address> 元素通常连同其他信息被包含在 <footer> 元素中。
div class="content">
<address>
超实用HTML代码段<br />
<a href="mailto:[email protected]">给我发邮件</a><br />
地址: 北京市朝阳区<br />
电话: +010 34 56 78
</address>
</div>