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

时间:2022-04-13 08:23:20

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

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

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

测试工具: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

三.完成大纲

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

可以看出已经有很好的大纲结构了

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>