html5中的大纲

前言：
在html5中我们可以使用结构元素来编排一份大纲，这样我们就可以通过这个网页的大纲来了解网页中有哪些内容，网页中以什么样的形式来组织这些内容有更清楚的认识。

1、html5大纲分析工具

网址：https://gsnedders.html5.org/outliner/

2、分析一个网站的大纲，找到出现Untitled Section的原因并解决

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<section>
			<h1>The HTML5 blog</h1>
			<section>
				<h2>Link Block</h2>
				<section>
					<h3>Questionnaire</h3>
					<h3>Login</h3>
					<h3>Quick Links</h3>
				</section>
				<h2>Tug of war between W3C and WHATWG enters</h2>
				<h2>Navigation</h2>
			</section>
		</section>
	</body>
</html>

在网站中检测的结果为：

解决办法：在第一个section元素的前面加上<h1>foodoir</h1>，此时的结果为：

3、header元素可以做大纲么

　　我们将<h1>foodoir</h1>里面的h1标签换成header标签，此时的结果为：

　　说明：header标签并不能做大纲，但是在header标签里面加上h1标签，又会正常显示。

4、在header元素中用图片做大纲

　　我们将header里面加上一张图片，根据前面的经验，不将img标签嵌套在h1标签里面是没有效果的，因此我们如下操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<header>
			<h1><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="foodoir"/></h1>
		</header>
		<section>
			<h1>The HTML5 blog</h1>
			<section>
				<h2>Link Block</h2>
				<section>
					<h3>Questionnaire</h3>
					<h3>Login</h3>
					<h3>Quick Links</h3>
				</section>
				<h2>Tug of war between W3C and WHATWG enters</h2>
				<h2>Navigation</h2>
			</section>
		</section>
	</body>
</html>

此时的到的结果是：

5、显示编排与隐式编排

　　显示编排：用section元素进行明显的区块划分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>显示编排</h1>
		<p>这里介绍显示编排</p>
		<section>
			<h2>区块一</h2>
			<p>内容</p>
		</section>
		<section>
			<h2>区块二</h2>
			<p>内容</p>
		</section>
	</body>
</html>

　　结果为：

　　 隐式编排：不使用section元素进行明显的区块划分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>隐式编排</h1>
		<p>这里介隐式示编排</p>
		<h2>子目录A</h2>
		<p>内容</p>
		<h2>子目录B</h2>
		<p>内容</p>
		<h3>子子目录AA</h3>
		<p>子子目录</p>
		<h3>子子目录BB</h3>
		<p>子子目录</p>
		<h2>子目录C</h2>
		<p>内容</p>
	</body>
</html>

　　结果为：

小结：从h1到h6标题中，h1的级别最高，在隐式编排的情况下就会按照以下规则生成：

　　1、如果出现新的标题比上一个标题的级别要低，那么将生成下级内容区块。

　  2、如果出现新的标题比上一个标题的级别要高，那么将生成新的内容区块。

html5中的大纲的更多相关文章

  1. html5中的网页结构

    一.html5中的大纲 在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲.因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个 ...

  2. HTML5区块和大纲算法

    原文链接: Using HTML sections and outlines - Mozilla Developer Network 每集HTML5+CSS3网页布局教程-2大纲算法 HTML5标准带 ...

  3. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  4. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  5. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  6. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  7. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  8. HTML5中引入的关键特性

    新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...

  9. HTML5中与页面显示相关的API

    1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

随机推荐

  1. SMON功能(一):清理临时段

    温故而知新 SMON功能(一) SMON(system monitor process)系统监控后台进程,有时候也被叫做system cleanup process,这么叫的原因是它负责完成很多清理( ...

  2. scikit-learn主要模块和基本使用方法

    从网上看到一篇总结的很不错的sklearn使用文档,备份勿忘. 引言 对于一些开始搞机器学习算法有害怕下手的小朋友,该如何快速入门,这让人挺挣扎的.在从事数据科学的人中,最常用的工具就是R和Pytho ...

  3. Becoming a Data Scientist – Curriculum via Metromap

    From: http://nirvacana.com/thoughts/becoming-a-data-scientist/ Data Science, Machine Learning, Big D ...

  4. Flash Builder中“Error: #2036 加载未完成”错误的解决方法

    复制了一个名称为A的widget包,重命名为B,包含B.mxml和B.xml(配置文件),编译后无法加载B包创建的widget,报错为: 解决办法: 1.在工程的根目录下找到.actionScript ...

  5. C#按需序列化对象为Json字符串

    只贴代码,不解释了.新的代理类型确实很给力! public static class JsonHelper { public static string ToJsonString<T>(I ...

  6. android中自定义view---实现竖直方向的文字功能，文字方向朝上，同时提供接口，判断当前touch的是哪个字符，并改变颜色

    android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...

  7. [原]quick集成spine动画

    更新说明: 新增了骨骼绑定node用法 参考:http://blog.csdn.net/n5/article/details/21795265 在SkeletonRenderer.h 和cpp里面新加 ...

  8. C#利用NOPI处理Excel的代码

    using System; using System.Data; using System.IO; using System.Text; using System.Web; using NPOI.HP ...

  9. swift 附属脚本

    附属脚本是访问对象,集合或序列的快捷方式 struct STest{ let constValue:Int subscript(count:Int)->Int{ return count*con ...

  10. 使用 Portable Class Library（可移植类库）开发 Universal Windows App

    今天在这里跟大家聊聊关于 Windows Universal 应用夸平台的问题,首先Universal Windows App的定义相信大家已经有所了解了(如果你是一个刚刚接触 Universal A ...