html5中的大纲
前言：
在html5中我们可以使用结构元素来编排一份大纲，这样我们就可以通过这个网页的大纲来了解网页中有哪些内容，网页中以什么样的形式来组织这些内容有更清楚的认识。
1、html5大纲分析工具
网址：https://gsnedders.html5.org/outliner/
2、分析一个网站的大纲，找到出现Untitled Section的原因并解决
例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <section> <h1>The HTML5 blog</h1> <section> <h2>Link Block</h2> <section> <h3>Questionnaire</h3> <h3>Login</h3> <h3>Quick Links</h3> </section> <h2>Tug of war between W3C and WHATWG enters</h2> <h2>Navigation</h2> </section> </section> </body> </html>
在网站中检测的结果为：
解决办法：在第一个section元素的前面加上<h1>foodoir</h1>，此时的结果为：
3、header元素可以做大纲么
我们将<h1>foodoir</h1>里面的h1标签换成header标签，此时的结果为：
说明：header标签并不能做大纲，但是在header标签里面加上h1标签，又会正常显示。
4、在header元素中用图片做大纲
我们将header里面加上一张图片，根据前面的经验，不将img标签嵌套在h1标签里面是没有效果的，因此我们如下操作：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header> <h1><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="foodoir"/></h1> </header> <section> <h1>The HTML5 blog</h1> <section> <h2>Link Block</h2> <section> <h3>Questionnaire</h3> <h3>Login</h3> <h3>Quick Links</h3> </section> <h2>Tug of war between W3C and WHATWG enters</h2> <h2>Navigation</h2> </section> </section> </body> </html>
此时的到的结果是：
5、显示编排与隐式编排
显示编排：用section元素进行明显的区块划分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>显示编排</h1> <p>这里介绍显示编排</p> <section> <h2>区块一</h2> <p>内容</p> </section> <section> <h2>区块二</h2> <p>内容</p> </section> </body> </html>
结果为：
隐式编排：不使用section元素进行明显的区块划分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>隐式编排</h1> <p>这里介隐式示编排</p> <h2>子目录A</h2> <p>内容</p> <h2>子目录B</h2> <p>内容</p> <h3>子子目录AA</h3> <p>子子目录</p> <h3>子子目录BB</h3> <p>子子目录</p> <h2>子目录C</h2> <p>内容</p> </body> </html>
结果为：
小结：从h1到h6标题中，h1的级别最高，在隐式编排的情况下就会按照以下规则生成：
1、如果出现新的标题比上一个标题的级别要低，那么将生成下级内容区块。
2、如果出现新的标题比上一个标题的级别要高，那么将生成新的内容区块。