HTML5-大纲

教训：没学HTML5大纲之前，写前端页面的时候，很少去关注一个页面的文档结构，总是按照自己的感觉，用了一堆堆的div，现在回去看看之前写的代码，确实是一坨shit。

首先参考一个大牛的博客：http://www.osmn00.com/rebuild/223.html

HTML5之前的HTML4，唯一的方式是采用<h1> ~ <h6>元素来创建大纲。因为正常习惯下，<h1> ~ <h6>表示了从第一级到第六级的层级递减标题，而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲，不单单对于搜索引擎的优化，更是为借助于屏幕阅读器浏览器网页的盲人（或弱视力）用户提供了巨大的帮助。

在HTML5中存在着一个大纲算法，它允许用户从一个Web页面生成一个信息结构目录，以便用户快速浏览网页，定位所需内容。

在解析HTML5文档时，浏览器不会将<h1>、<h2>和<ul>视作兄弟节点，<h1>比<h2>拥有更高的级别。

为了更好地表达HTML的文档结构、文档语义，HTML5新增了大量标签。这些标签包括section、article、nav、aside等，在上面大牛的博客中，他把这些标签分为了三类：

1)无作为标签，例如div、ul等

2)开始一个新的节点的标签，section、article