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

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

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

需要大纲的标签

1.<body>,是需要大纲标题的，注意：<body>里面的大纲标题的上级，如果是需要大纲标题的，大纲标题就归属于上级，如果上级是不需要大纲标题的，大纲标题就归属于<body>标签

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

语义标签说明

<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>

第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析的更多相关文章

  1. 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区

    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...

  2. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  3. 第九十一节，html5+css3pc端固定布局，完成首页

    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...

  4. 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域

    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...

  5. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

  6. 第三百八十七节，Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示

    第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示 首先了解一下static静态文件与上传资源的区别,static静态文件里面一般防止的我们网站样式的文件, ...

  7. 第 31 章 项目实战-PC 端固定布局[5]

    学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...

  8. 第 31 章 项目实战-PC 端固定布局[4]

    学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门 ...

  9. 第 31 章 项目实战-PC 端固定布局[3]

    学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...

随机推荐

  1. Swift3集成极光推送

      现在很多程序都开始使用Swift开发了,但是第三方库大多数都是用OC写的,所以我们要使用Swift和OC混编.今天的内容主要讲Swift3.0集成极光推送. 1.准备工作   集成指南,极光上说的 ...

  2. grunt--自动化打包工具使用

    用grunt搭建自动化的web前端开发环境-完整教程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位we ...

  3. cobbler 奇葩出错

    写此随笔,只是为了记录我安装cobbler遇到的奇怪问题,虽然这个问题很让我无语,但是竟然折腾了我一天.废话不多说,入题: 一如既往的按照以前的安装方式安装cobbler,不会出错的地方我就一带而过了 ...

  4. ProgrammingContestChallengeBook

    POJ 1852 Ants POJ 2386 Lake Counting POJ 1979 Red and Black AOJ 0118 Property Distribution AOJ 0333 ...

  5. 学习笔记之html5相关内容

    写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是  input的里面的 ...

  6. ListView的局部刷新

    有的列表可能notifyDataSetChanged()代价有点高,最好能局部刷新. 局部刷新的重点是,找到要更新的那项的View,然后再根据业务逻辑更新数据即可. private void upda ...

  7. CFRound#379(div2)

    题目链接:http://codeforces.com/contest/734 A:SB题. #include<cstdio> #include<cstring> #includ ...

  8. c#委托概念

    委托的官方概念是:安全封装方法的类型. 百度百科的概念是,委托是个类,定义了方法的类型,使得方法可以作为另外一个方法的参数进行传递.使得程序具有很好的扩展性. 揉碎了讲一下这个概念: 张三要做三件事: ...

  9. fiddler还是浏览器的问题

    当我在浏览器里输入http://localhost/infomanage/price?cityid=1&cateid=246&timer=3 后端接收的参数是timer的时候,浏览器会 ...

  10. 设计模式 -- 代理模式 (Proxy Pattern)

    定义: 为其他对象提供一种代理以控制对这个对象的访问: 角色: 1,抽象主题类,(接口或者抽象类),抽象真实主题和代理的共有方法(如下Subject类): 2,具体实现的主题类,继承或者实现抽象主题类 ...