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. cmd for 循环拷贝文件

    这几天忙活部署测试环境, 中途需要拷贝 文件, 直接贴code吧: ::/定义原路径 set source=seventrat_test_backend,seventrat_test_frontend ...

  2. js for in对象key排序

    最近遇到一个比较奇葩的事情,for in 循环的时候,如果对象key 默认可以转化为整数,会把key转化为整数排序. code: 运行结果 大家看到data2的key默认顺序是"2" ...

  3. Undokumentierte @Formeln/LotusScript im Lotus Notes Client/Server

    Erstellung von Replik-IDs mittels @Text-Funktion@Text( @Now; "*" )Source NoPersist option ...

  4. Android基本功：手势

    一.概念 手势:其实是指用户手指或触摸笔在屏幕上的连续触碰行为,Andoird对两种手势行为都提供了支持: Andorid提供了手势检测,并为手势检测提供了相应的监听器: Android允许开发者添加 ...

  5. Android 实战之UI线程和Worker线程交互

    哈哈,博文取了个比较霸气的名字,大家不都喜欢这样忽悠人吗 呵呵! 好了,现在就是很简单的点击查询,然后这个查询有点花时间,不想见面出现假死现象,所以在另外的线程进行查询. 好了,代码在此: packa ...

  6. android通话时第二通电话呼叫等待提示音音量大小

    callnotifier.java  public void run() { ......             switch (mToneId) {                 case TO ...

  7. java/.net-常用工具下载地址&常用学习网址&快捷键

    HTML5 HTML5:http://www.html5cn.org/ php常用网址 thinkphp框架:http://www.thinkphp.cn/ wampserver开发服务器:http: ...

  8. metaq安装实例

    下载metaq: http://fnil.net/downloads/index.html 安装metaq: [root@localhost software]# pwd /export/softwa ...

  9. ecshop 加广告出现广告位的宽度值必须在1到1024之间

    打开 admin/ad_position.php这个文件,搜索1024,这里你会搜到两个地方 在236行左右 if ($ad_width > 1024 || $ad_width < 1) ...

  10. 在线制作h5——上帝的礼物

    在线制作h5 网址:http://www.godgiftgame.com 网站名称:上帝的礼物 推荐指数:5颗星 功能概要 可以设置背景.元素图片.元素文字.元素图形.声音.加载.链接.分享,生成h5 ...