学习要点：

1.大纲算法

2.section和div

3.结构分析

主讲教师：李炎恢

本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端 固定布局来实现。

一．大纲算法 

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

合理的使用HTML5元素标签，可以生成一个非常清晰的文档大纲，我们可以通过各种 工具去查看当前页面，比如谷歌和火狐的插件可以查看当前的HTML5大纲。这里我们推荐 使用一个服务器端的测试工具：HTML 5 Outliner，网址如下：

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

这个工具可以上传本地html文件，也可以填写URL，或者直接在多行文本框上编写HTML5代码均可了解大纲。

通过我们将上一节课的代码编写，发现这个页面的大纲非常的难看，出现三个Untitled Section，这个意思表示页面此处缺少大纲标题，不规范。如果你的页面在这里测试，大纲都比较清晰，那么HTML5页面是比较规范的。

//大纲目录结构

1.UntitledSection

1.UntitledSection

1.瓢城旅行社

2.UntitledSection

二．section和div 

首先，我们暂不探讨怎么让html5页面大纲合乎规范。先探讨一下section和div的区别。

div元素在html5之前就是非常常用的标签，它本身没有任何语义，用来页面布局和 CSS样式以及JS调用。那么，div的用途已经说的很清楚了：

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

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

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

html5中，section并不是用来取代div的。在基础课程中已经简单的了解过，它是具有语义的文档标签。表示一段文档中的章节，比如包含一个标题和一个段落，而大纲规范 中，至少要包含一个标题。

//section至少需要一个h1~h6

<section>

    <h2>Bootstrap</h2>

    <p>Bootstrap是一款html5开源框架</p>

</section>

通过上诉说明，我们对于下方的section标签，增加一个h2即可实现大纲要求。最终 大纲变成如下结构：

//大纲目录结构

1.UntitledSection

1.UntitledSection

1.瓢城旅行社

2.波特四抓

那么发现最后一个UntitledSection已经拥有了标题，已经符合规范。对于前面还 有两个，待会儿再说。现在再探讨一个问题，既然div用于没有任何语义的布局和样式定  义，那么我们就需要探讨一下如下代码用div还是section。

//这里改用section还是div呢？

<section class="center">

    <h1 class="logo"> 瓢城旅行社</h1>

    <ul class="link">

        <li class="active">

            <a href="###"> 首页</a>

        </li>

        <li>

            <a href="###"> 旅游资讯</a>

        </li>

        <li>

            <a href="###"> 机票订购</a>

        </li>

        <li>

            <a href="###"> 风景欣赏</a>

        </li>

        <li>

            <a href="###">公司简介</a>

        </li>

    </ul>

</section>

从结构上来看，section需要包含至少一个h1~h6，这里是符合的。但容易混淆的 部分是，section是某个区域章节的标题，h1其实是整个网站的标题。而ul部分是导航超 链接，严格来讲，也不算章节的内容。最重要的是这块的section用于的布局样式定义， 所以我个人认为这里使用div更加妥当一些。

注：section本身使用频率并不是很高，而section并不是代替div的元素。

//比较合理的做法

<div class="center">

    <h1 class="logo">瓢城旅行社</h1>

    <ul class="link">

        <li class="active">

            <a href="###">首页</a>

        </li>

        <li>

            <a href="###">旅游资讯</a>

        </li>

        <li>

            <a href="###">机票订购</a>

        </li>

        <li>

            <a href="###">风景欣赏</a>

        </li>

        <li>

            <a href="###">公司简介</a>

        </li>

    </ul>

</div>

这里大纲进行了一个很有趣的变化，如下：

//改变后的大纲

1.UntitledSection

1.瓢城旅行社

2.波特四抓

通过目前的大纲，我们可以了解到，还剩一个标题就可以实现完美大纲。这个剩下的标 题是哪个元素下的呢？答案是：body元素。我们只要在body元素下创建一个h1，写上标 题名称，即可。

//增加body标题，解决大纲问题

<body>

    <h1>Body大标题</h1>

     ...

</body>

虽然在body增加标题解决了大纲问题，但问题是我们本身页面设计根本不需要在body 创建一个h1啊。难道创建后，再隐藏这种多此一举的方法吗？这个问题，稍后再看，先再 探讨一下头部的结构问题。

三．结构分析 

首先，探讨一下nav元素。这个元素本质上是用来存放一组作为导航的链接，比如ul。

我们第一节课，把整个头部全部存放进去，显得不是特别合理，所以，最好在ul的外围。  而LOGO+导航，我们可以理解为header头部，所以，最终改写成如下结构：

//头部元素换成了header，nav元素只包含ul

<header id="header">

    <div class="center">

        <h1 class="logo">瓢城旅行社</h1>

        <nav class="link">

            <ul>

                <li class="active">

                    <a href="###">首页</a>

                </li>

                <li>

                    <a href="###">旅游资讯</a>

                </li>

                <li>

                    <a href="###">机票订购</a>

                </li>

                <li>

                    <a href="###">风景欣赏</a>

                </li>

                <li>

                    <a href="###">公司简介</a>

                </li>

            </ul>

        </nav>

    </div>

</header>

在去掉<body><h1>...</h1></body>的情况下，我们发现，这种结构的主标题大纲居 然是：瓢城旅行社。而<nav>下则又出现一个UntitledSection，由此可得到几个结论：

1.header元素不需要强制标题h1~h6，如果有标题，算body的。这样主大纲标题就有了；
2.section和nav元素大纲要求有标题h1 ~ h6，但section必须有才规范，而nav如果没有标题，也是合理的。当然，添加上标题会让大纲更加好看，页面中可以隐藏。

//最终格式如下：

<header id="nav">

    <div class="center">

        <h1 class="logo">瓢城旅行社</h1>

        <nav class="link">

            <h2 class="none">网站导航</h2>

            <ul>

                <li class="active">

                    <a href="###">首页</a>

                </li>

                <li>

                    <a href="###">旅游资讯</a>

                </li>

                <li>

                    <a href="###">机票订购</a>

                </li>

                <li>

                    <a href="###">风景欣赏</a>

                </li>

                <li>

                    <a href="###">公司简介</a>

                </li>

            </ul>

        </nav>

    </div>

</header>

根据改变的元素内容，适当更改一下CSS即可。

第 31 章 项目实战-PC端固定布局[2]的更多相关文章

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

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

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

    学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. C#设计模式之观察者

    Iron之观察者 引言 上一篇说的职责链模式,很有意思的一个模式,今天这个模式也是很有意思的一个模式,还是不啰嗦了直接进入主题吧. 场景介绍:在上一遍中说到用到部件检测,很巧妙的让调用者和处理者解耦了 ...

  2. Android学习第三天-打包常用命令

    在前面<Android学习第一天-adb常用命令>和 <Android学习第二天-android常用命令>两篇博文中,我们重点讲解了adb和android的常用命令,下面我们讲 ...

  3. ATM模拟器（附代码及运行结果）

    源代码: import java.util.Scanner; class Account{ String identify; String name; String date; String key; ...

  4. Go 作用

    Go语句的作用是表示一个batch(多条Tsql命令)的结束,并向sql server 提交batch,由于局部变量的作用域是基于batch的,所以,go语句限制局部变量的作用域在一个batch中. ...

  5. ActionScript 3.0入门：Hello World、文件读写、数据存储(SharedObject)、与JS互调

    近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0,现把学习结果分享一下,希望对新手有帮助. 目录 ActionScript 3.0简介 Hello ...

  6. ASP.NET MVC5 网站开发实践(二) Member区域 - 咨询管理的架构

    咨询.留言.投诉等功能是网站应具备的基本功能,可以加强管理员与用户的交流,在上次完成文章部分后,这次开始做Member区域的咨询功能(留言.投诉都是咨询).咨询跟文章非常相似,而且内容更少.更简单. ...

  7. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  8. 【原创】开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  9. 【开源】OSharp3.3框架解说系列：重新开源及3.3版本新特性

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  10. C#：lock锁与订单号（或交易号）的生成

    在弄电商类网站的时候,往往是根据年月日时分秒的格式生成订单号(yyyyMMddHHmmss),为了解决并发性,就直接在生成订单号的区域块加上lock. 下面,我们来简单测试一下. 1.新建项目(控制台 ...