第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析

时间 2019-11-12

标签第八十七 html5+css3pc html css 固定布局大纲算法 section div 结构分析栏目 HTML 繁體版

原文原文链接

html5+css3pc端固定布局，大纲算法，section和div，结构分析css

一．大纲算法
在HTML5中有一个很重要的概念，叫作HTML5 大纲算法(HTML5Outliner)，它的用途是为用户提供一份页面的信息结构目录。好比咱们常常使用的手册就是一个很是好的大纲结构：html

测试工具：https://gsnedders.html5.org/outliner/
这个工具能够上传本地html文件，也能够填写URL，或者直接在多行文本框上编写HTML5代码都可了解大纲。
经过咱们将上一节课的代码编写，发现这个页面的大纲很是的难看，出现三个Untitled Section，这个意思表示页面此处缺乏大纲标题，不规范。若是你的页面在这里测试，大纲都比较清晰，那么HTML5页面是比较规范的。 html5

须要大纲的标签css3

1.<body>,是须要大纲标题的，注意：<body>里面的大纲标题的上级，若是是须要大纲标题的，大纲标题就归属于上级，若是上级是不须要大纲标题的，大纲标题就归属于<body>标签算法

语义标签通常就是拿来布局大纲，最好不要用于css样式，css样式用div，ide

语义标签说明工具

<body> 　　　　网页主体　　　　　　　　　　　　　　　　　　　　须要大纲布局

<header> 　　表示首部　　不须要要大纲用于头部区域测试

<footer> 　　表示尾部　　　　　不须要要大纲用于尾部区域网站

<nav> 表示有意集中在一块儿的导航元素须要大纲

<section> 　　表示重要概念或主题　　　　须要大纲主题

<article> 　　表示一段独立的内容　　须要大纲

<address> 表示文档或article的联系信息不须要要大纲

<aside> 　表示与周边内容少有牵涉的内容　　须要大纲

<hgroup> 　将一组标题组织在一块儿　　　　须要大纲,会自动变成下一个主大纲须要定义大纲的地方

<details> 生成一个区域，用户将其展开能够得到更多细节不须要要大纲

<summary> 用在details元素中，表示该元素内容的标题或说明不须要要大纲

注意：<article>表示一段独立的内容，里面又能够添加<header> ，<nav> ，<section> ，<footer>当上门的标签嵌套

二．section和div
首先，咱们暂不探讨怎么让html5页面大纲合乎规范。先探讨一下section和div的区别。div元素在html5以前就是很是经常使用的标签，它自己没有任何语义，用来页面布局和CSS样式以及JS调用。那么，div的用途已经说的很清楚了：
　　1.若是是页面布局，且不是header、footer之类的专属区域，都应该使用div；
　　2.若是只是单纯的对一个端内容进行CSS样式定义，那么也应该使用div;
　　3.若是想对一段内容进行JS控制，那么也应该使用div。

html5中，section并非用来取代div的。在基础课程中已经简单的了解过，它是具备语义的文档标签。表示一段文档中的章节，好比包含一个标题和一个段落，而大纲规范中，至少要包含一个标题。
经过上诉说明，咱们能够对section标签，增长一个h2便可实现大纲要求。

测试工具：https://gsnedders.html5.org/outliner/

火狐插件： HeadingsMap

三.完成大纲

能够看出已经有很好的大纲结构了

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瓢城旅行社</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--导航-->
<header class="dao-hang">
    <div class="dao-hang2">
        <h1 class="log">瓢城旅行社</h1>
        <nav>
            <h2>网站导航</h2>
            <ul>
                <h3>
                    <li class="dao-hang-lie-biao"><a href="index.html">首页</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">旅游资讯</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">机票订购</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">风景欣赏</a></li>
                    <li class="dao-hang-lie-biao"><a href="#">公司简介</a></li>
                </h3>
            </ul>
        </nav>
    </div>
</header>


<!--主体-->
<section>section
<h2>主题</h2>
</section>


<!--尾部-->
<footer>footer</footer>

</body>
</html>