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. 解决adb shell input text 中文输入，unicode转utf-8

    https://github.com/senzhk/ADBKeyBoard 上面这个是外国人写的一个输入法,我们把它安装再设置下就ok了 直接下载bin下的ADBKeyBoard.apk文件,或者上面 ...

  2. 针对不同的Cookie做页面缓存

    有时我们需要为PC浏览器及移动浏览器生成不同的页面,为了提高性能,不能每次请求都去判断User-Agent,通常用一个 Cookie 标记一下客户端是否是移动客户端,这样只需要读取这个 Cookie ...

  3. Oracle限制某个用户的连接数及PROFILE介绍

    限制一个用户的链接数,可以通过ORACLE的PROFILE文件来实现 1.     查看resource_limit参数: SQL> show parameter resource_limit ...

  4. android自定义seekBar

    Android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子 很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如 ok,我们开始吧: 一)变换前背景 先来 ...

  5. 使用ClipboardUtils兼容API LEVEL 11以下实现复杂粘贴

    实现功能:复杂粘贴内容 问题描述:android.content.ClipboardManager在APILevel 11之后才可以使用,而我们目前还要兼容API Level 10(2.3.3) 解决 ...

  6. Web 技术人员需知的 Web 缓存知识(转)

    最近的译文距今已有4年之久,原文有一定的更新.今天踩着前辈们的肩膀,再次把这篇文章翻译整理下.一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~ ...

  7. apk签名

    参考:http://stackoverflow.com/questions/13578134/how-to-automate-keystore-generation-using-the-java-ke ...

  8. Java IO 之 InputStream源码

    Writer      :BYSocket(泥沙砖瓦浆木匠) 微         博:BYSocket 豆         瓣:BYSocket FaceBook:BYSocket Twitter   ...

  9. Swift 函数

    1: 函数形式: Swift函数以关键字func 标示.返回类型->后写明.如果没有返回类型可以省去.多个参数用,分割.其中参数名字在前:类型描述 func GetName(strName:St ...

  10. maven快照版本和发布版本

    在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...