HTML5大纲算法

   HTML5中的大纲算法主要是为用户提供一份页面信息结构目录，它有点类似于平时我们看书中的目录。

比如我在算法大纲在线测试工具中测试《新浪新闻》的大纲结构是这样的

  

而测试《csdn博客》首页的大纲是这样子的

注意箭头所指的untitled section 就代表缺少了标题

附上一个服务器的测试工具:HTML 5 Outlinear ，网址:https://gsnedders.html5.org/outliner/

该工具可以测试本地文件也可以测试网站链接,也可以自己写上html5代码测试

关于HTML5符合算法大纲的写法，不得不提section,div,nav,body.header

我们都知道div本身没有语义，主要用它来做页面布局和css样式已经js调用.

以下是我们必须知道的点

1.如果是页面布局，且不是header、footer之类的专属区域，都应该使用div

2.如果只是单纯的对一个端内容进行css样式定义，也应该使用div

3.如果想对一段内容进行js控制，那么也应该使用div

而section是有语义的，表示一段文档中的章节，比如包含一个标题和一个段落

所以section中至少需要一个h1~h6标题

如下

<section>
    	<h1>我爱前端</h1>
    	<p>一直以来我对前端就有很深厚的兴趣...</p>
    </section>

所以切记不是任何时候都可以用section代替原来的div

另外，header元素不需要强制标题h1~h6,如果有标题，就算body的，这样主标题大纲就有了。

section和nav元素大纲要求有标题h1-h6，但是section必须有才规范，而nav如果没有也是合理的。填上大纲会更好看，只需在页面中隐藏即可

（完）