我们继续接着上节课的HTML5+CSS3网页布局教程-固定布局导航，这节课我们要了解的是：
HTML5+CSS3网页布局教程
一、大纲算法
在html5中有一个很重要的概念，叫做HTML5大纲算法(HTML5 Outliner),它的用途为用户提供一份页面的信息结构目录。
合理的使用HTML5元素标签，可以生成一个非常清晰的文档大纲，我们可以通过各种工具去查看当前页面，比如谷歌和火狐的插件可以查看当前的HTML5大纲。这里推荐使用一个服务器端的测试工具：HTML5 Outliner，网址如下：
https://gsnedders.html5.org/outliner/
这个工具可以上传本地html文件，也可以填写url，或者直接在多行文本框上编写HTML5代码均可了解大纲。
这节课主要讲如何优化我们的网页，让我们的网页更适合HTML5的规划化。
我们就用上面提供的工具来演示一下，首先我们打开工具网页https://gsnedders.html5.org/outliner/
然后输入我们的网址或网页文件：
然后检测，也就是点outline this!，图上标注的。显示如下：
检测结果是最顶层的第一个标题显示Untitled Section，也就是无标题，还有其他两个也没有子标题，只有一个有子标题的”每集博客”。正常是都有标题才对，只要显示Untitled Section就不正常，所以显然这个页面不是很符合HTML5规范。
二、为了了解HTML5的大纲算法规范，我们先来了解一下section和div
div元素在html5之前是最常用的最流行的标签，但他本身是没有任何语义的，它只不过是用来布局页面和CSS样式以及JS调用。
1、如果是页面布局，且不是header、footer之类的专属区域，都应该使用div;
2、如果只是单纯的对一个段内容进行CSS样式定义，那么也应该使用div；
3、如果想对一段内容进行JS控制，那么也应该使用DIV；
在html5中，section标签并不是用来取代div的。在基础课程中已经简单的了解过，他是具有语义的文档标签。表示一段文档中的章节，比如包含一个标题和一个段落，而大纲规范中，至少要包含一个标题。
也就是section标签内至少包含一个h1~h6.
例如：
<section>
<h2>这是一个二级标题</h2>
</section>
这样就是符合HTML5规范的。
而在刚才我们检测的我们示范的那个网页中最后一个Untitled Section的原因就在于我们的HTML文档中对应的section里没有标题。见下图：
我们只要把这个section标签里添加一个h2或其他的h标签就可以了，我们再去用工具检测一下再看看，是不是就好了。
如图：
这样刚才检测还是untitled section显示的最后一个，现在就变成了我们刚刚在section标签里被h2包含的main文本了。
关于最上面的两个untitled section是怎么回事，我们来看看。
第一个Untitled Section属于根目录，也就是body元素，虽然section标签里已经有两个h了，但是都是被包含在body的子元素内了，也就是属于孙标签，所以不起作用。那我们就在body标签内直接添加一个h看看，如下图：
这样第一个Untitled Section也没了，变成我们刚才在body内设置的h1标题了。
那么还有第二个Untitled Section是哪里的原因呢？，我猜测应该是nav内没有H的原因。我们来试试看。
看看，是不是Untitled Section全都没有了。
这样我们得出一个结论，就是body、nav、section都是需要有标题的才规范.那这里可以直接告诉大家，header和div则是不需要标题的。
虽然不显示Untitled Section了，但是我们回头刷新下前台网页看看傻眼了，乱套了，样式都错位了。
这样我们换个思路，这节我们不是讲的section和div吗？而上面我还提醒div是不需要标题的，那我们就把nav里的刚才添加的H2给去掉，然后把section给换成div，那这样的话是不是可以把div里的标题直接赋予给nav，然后可以正常显示呢？
和我们想象的结果一样，果然正常而没有untitled section了。
那么正好验证了上面说的section最好不要用于它的布局和CSS样式定义。
三、结构分析
首先，探讨一下NAV元素。这个元素本质上是用来存放一组作为导航的链接，比如ul.而我们把整个头部全部存放 进去了，显得不是很合理，所以，我们让Nav只包含导航列表ul，把logo放到Nav的外面，然后在用header，也就是头部标签把logo+导航给包围。因为logo和nav本来就属于头部。
经过修改变成如下：
我就直接上图了，具体代码的修改在图上都标注了：
我们把让nav只包含ul，然后把ul的class赋予给nav，ul就不用类名称了，因为给Nav和ul添加样式效果一样，原则是给外层添加。
然后把整个div都放到header标签内。然后把body下的标题也删除了。修改完的代码和规范检测结果都在上图了。
我们看到了还有一个untitled section，是因为nav下没有标题的缘故，我们这么解决。
在NAV下面添加一个h2，里面文本就写网站导航吧，然后再给h2添加一个类，如下：
<h2 class=”none”>网站导航</h2>
为了不破坏导航，我们得让这个标题隐藏。所以我们再给h2添加样式：
.none{
display:none;
}
然后我们再分别查看前台导航和Html5规范检测，导航没有错乱，规范验证也没有untitled section了。
最后我们再规范一下，我们不是把原来的nav修改成header了吗？我们把他的类也修改一下，就是把原来的class=”nav”修改成class=”header”,然后把CSS里的也全部修改过来就好了。
通过上面的修改我们这里提醒大家一下：
section和nav元素大纲要求有标题h1~h6,但是section必须有才规范，而nav如果没有标题，也是合理的。当然按照我们上面的操作，给他添加了标题会让大纲更好看，所以我们可以添加完了在隐藏，就不会破坏布局了。
本教程原创作者:mageo，出自每集博客，尊重作者劳动，转载请注明出处：http://www.ql2015.cn，谢谢！
HTML5+CSS3网页布局教程
一、大纲算法
在html5中有一个很重要的概念，叫做HTML5大纲算法(HTML5 Outliner),它的用途为用户提供一份页面的信息结构目录。
合理的使用HTML5元素标签，可以生成一个非常清晰的文档大纲，我们可以通过各种工具去查看当前页面，比如谷歌和火狐的插件可以查看当前的HTML5大纲。这里推荐使用一个服务器端的测试工具：HTML5 Outliner，网址如下：
https://gsnedders.html5.org/outliner/
这个工具可以上传本地html文件，也可以填写url，或者直接在多行文本框上编写HTML5代码均可了解大纲。
这节课主要讲如何优化我们的网页，让我们的网页更适合HTML5的规划化。
我们就用上面提供的工具来演示一下，首先我们打开工具网页https://gsnedders.html5.org/outliner/
然后输入我们的网址或网页文件：
然后检测，也就是点outline this!，图上标注的。显示如下：
检测结果是最顶层的第一个标题显示Untitled Section，也就是无标题，还有其他两个也没有子标题，只有一个有子标题的”每集博客”。正常是都有标题才对，只要显示Untitled Section就不正常，所以显然这个页面不是很符合HTML5规范。
二、为了了解HTML5的大纲算法规范，我们先来了解一下section和div
div元素在html5之前是最常用的最流行的标签，但他本身是没有任何语义的，它只不过是用来布局页面和CSS样式以及JS调用。
1、如果是页面布局，且不是header、footer之类的专属区域，都应该使用div;
2、如果只是单纯的对一个段内容进行CSS样式定义，那么也应该使用div；
3、如果想对一段内容进行JS控制，那么也应该使用DIV；
在html5中，section标签并不是用来取代div的。在基础课程中已经简单的了解过，他是具有语义的文档标签。表示一段文档中的章节，比如包含一个标题和一个段落，而大纲规范中，至少要包含一个标题。
也就是section标签内至少包含一个h1~h6.
例如：
<section>
<h2>这是一个二级标题</h2>
</section>
这样就是符合HTML5规范的。
而在刚才我们检测的我们示范的那个网页中最后一个Untitled Section的原因就在于我们的HTML文档中对应的section里没有标题。见下图：
我们只要把这个section标签里添加一个h2或其他的h标签就可以了，我们再去用工具检测一下再看看，是不是就好了。
如图：
这样刚才检测还是untitled section显示的最后一个，现在就变成了我们刚刚在section标签里被h2包含的main文本了。
关于最上面的两个untitled section是怎么回事，我们来看看。
第一个Untitled Section属于根目录，也就是body元素，虽然section标签里已经有两个h了，但是都是被包含在body的子元素内了，也就是属于孙标签，所以不起作用。那我们就在body标签内直接添加一个h看看，如下图：
这样第一个Untitled Section也没了，变成我们刚才在body内设置的h1标题了。
那么还有第二个Untitled Section是哪里的原因呢？，我猜测应该是nav内没有H的原因。我们来试试看。
看看，是不是Untitled Section全都没有了。
这样我们得出一个结论，就是body、nav、section都是需要有标题的才规范.那这里可以直接告诉大家，header和div则是不需要标题的。
虽然不显示Untitled Section了，但是我们回头刷新下前台网页看看傻眼了，乱套了，样式都错位了。
这样我们换个思路，这节我们不是讲的section和div吗？而上面我还提醒div是不需要标题的，那我们就把nav里的刚才添加的H2给去掉，然后把section给换成div，那这样的话是不是可以把div里的标题直接赋予给nav，然后可以正常显示呢？
和我们想象的结果一样，果然正常而没有untitled section了。
那么正好验证了上面说的section最好不要用于它的布局和CSS样式定义。
三、结构分析
首先，探讨一下NAV元素。这个元素本质上是用来存放一组作为导航的链接，比如ul.而我们把整个头部全部存放 进去了，显得不是很合理，所以，我们让Nav只包含导航列表ul，把logo放到Nav的外面，然后在用header，也就是头部标签把logo+导航给包围。因为logo和nav本来就属于头部。
经过修改变成如下：
我就直接上图了，具体代码的修改在图上都标注了：
我们把让nav只包含ul，然后把ul的class赋予给nav，ul就不用类名称了，因为给Nav和ul添加样式效果一样，原则是给外层添加。
然后把整个div都放到header标签内。然后把body下的标题也删除了。修改完的代码和规范检测结果都在上图了。
我们看到了还有一个untitled section，是因为nav下没有标题的缘故，我们这么解决。
在NAV下面添加一个h2，里面文本就写网站导航吧，然后再给h2添加一个类，如下：
<h2 class=”none”>网站导航</h2>
为了不破坏导航，我们得让这个标题隐藏。所以我们再给h2添加样式：
.none{
display:none;
}
然后我们再分别查看前台导航和Html5规范检测，导航没有错乱，规范验证也没有untitled section了。
最后我们再规范一下，我们不是把原来的nav修改成header了吗？我们把他的类也修改一下，就是把原来的class=”nav”修改成class=”header”,然后把CSS里的也全部修改过来就好了。
通过上面的修改我们这里提醒大家一下：
section和nav元素大纲要求有标题h1~h6,但是section必须有才规范，而nav如果没有标题，也是合理的。当然按照我们上面的操作，给他添加了标题会让大纲更好看，所以我们可以添加完了在隐藏，就不会破坏布局了。
本教程原创作者:mageo，出自每集博客，尊重作者劳动，转载请注明出处：http://www.ql2015.cn，谢谢！
