在找工作之际，我将系统性的复习前端的知识架构，把我的一些总结和自己的理解记录下来并分享出来，方便自己以后的复习，也希望与大家交流。
在介绍html语义化之前，我先简单介绍一下html5的历史以及html5的优点。它的的新特性,今天只总结语义化标签，其他的特征我将在后续继续总结。
html5历史及其优点
2008年1月22日，Html5的第一份正式草案公布，它是W3C与WHATWG合作的结果。它的主要目的是为了在移动设备上支持多媒体。因此一些浏览器可能不支持某些html5的特性。
- 多设备跨平台，兼容PC端与移动端、Windows与Linux、安卓与IOS。
- 新增的video和audio标签相比于flash使得视频音频播放更佳流畅，性能高。
- 有利于首屏优化（SEO），因为html5的语义化标签，使得html5的代码不仅让开发者好理解，搜索引擎也能更好的识别关键字。
结合html5的新特性可以总结出更多的优点。
语义化标签
什么是语义化？
语义化是指用合适的标签来标记内容。比如说以前你写一个网页布局可能是这样的：
<div>
<div class="header">页眉</div>
<div class="content">
<div class="aside">侧边</div>
<div class="article">文章</div>
<div>
<div class="footer">页脚</div>
</div>
而当你学会用语义化标签来写网页之后，你的代码可能就是这样的：
<header>页眉</header>
<section>
<article>文章</article>
<aside>侧边</aside>
</section>
<footer>页脚</footer>
这样你是不是会觉得这段代码更好理解呢，你没必要读css代码，你可能就已经大概知道每个部分分布在网站的什么位置了。
语义化标签的优点
- 写更少的代码，布更好的局。（更少的代码加载更快）
- 脱去css的外衣之后，不至于裸奔。（结构鲜明）
- 你看得懂，搜索引擎也看得懂。（有利于SEO）
- 团队合作更愉快。（语义化的可读性）
html5新增的语义化标签
<main> 定义主要内容
<header> 页眉，对主页的介绍
<nav> 定义主体模块或者导航链接的集合
<section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）
<article> 是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
<aside> 与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
<section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。
<footer> 定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）
<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。
<hgroup> 标签用于对网页或区段（section）的标题进行组合。使用新的HTML5元素hgroup，可以为header元素添加更多的信息。（头部主标题/副标题）
语义化标签参考：www.cnblogs.com/zjf-1992/ar…
