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. Scala access modifiers and qualifiers in detail

    来自:http://www.jesperdj.com/2016/01/08/scala-access-modifiers-and-qualifiers-in-detail/ Just like Jav ...

  2. APK重签名总结

    keytool -genkey -alias aeo_android.keystore -keyalg RSA -validity 20000 -keystore aeo_android.keysto ...

  3. redis的基本使用

    Redis的应用 http://www.redis.cn/commands.html http://www.cnblogs.com/ikodota/archive/2012/03/05/php_red ...

  4. Spectrum to XYZ to sRGB

    如何将频谱响应转换为对应的RGB显示值: 首先要在频率功率分布(SPD)曲线的基础上,分别使用X/Y/Z三个频率匹配曲线(spectral matching curves,又名CIE XYZ Colo ...

  5. H-Basis/SG/SH GI Relighting

    小试了一把预计算全局光照,作为PRT的上级应用.完全自行实现,使用SG/SH.H-Basis基波对GI光场进行频域压缩,存在3D纹理中,用于2跳间接光照实时显示.其中坑点不少,尤其是在HDR环境下使用 ...

  6. 超体.特效中英字幕.Lucy.2014.BD1080P.X264.AAC.English&Mandarin.CHS-ENG

    资源名称 其它信息 资源大小 BT下载 超体.Lucy.2014.BD-MP4-原创翻译中英双语字幕.mp4 seeders: / leechers: 511.15MB 下载 [飘域家园]移动迷宫.T ...

  7. Codeforces Round #160 (Div. 1) 题解【ABCD】

    Codeforces Round #160 (Div. 1) A - Maxim and Discounts 题意 给你n个折扣,m个物品,每个折扣都可以使用无限次,每次你使用第i个折扣的时候,你必须 ...

  8. python在windows平台的pip安装package时的编译问题

    在安装pcapy时,出现以下错误: building 'pcapy' extension error: Microsoft Visual C++ 9.0 is required (Unable to ...

  9. 调用axis2开发的接口遇到的问题

    第1个异常 [org.apache.struts.actions.DispatchAction] – Dispatch[/myservice/NgCallServiceInfo]  to method ...

  10. zendStudio 10.5破解

    1.下载zendStudio 10.5(mac系统)     windows系统安装文件 并安装. 2.下载破解文件,并覆盖安装目录plugins同名文件,要注意版本. 3.启动程序,输入注册码: 3 ...