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. Wireshark图解教程

    Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据,并为用户提供关于网络和上层协议的各种信息.与很多其他网络工具一样,Wireshark也使用pcap network ...

  2. Maven full settings.xml

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  3. 成功在神舟K650c-i7 d2（i7-4700MQ、HM87）上装好了Windows XP

    成功在神舟K650c-i7 d2(i7-4700MQ.HM87)上装好了Windows XP 本来已经在K650c上装好了Windows7.Windows8双系统,奈何某些旧软件只能在Windows ...

  4. Windows 系统下设置Nodejs NPM全局路径

    Windows下的Nodejs npm路径是appdata,很不爽,想改回来,但是在cmd下执行以下命令也无效 npm config set cache "D:\nodejs\node_ca ...

  5. WPF 触发器

    属性触发器:数据触发器:事件触发器

  6. 每日英语：The Secret About Online Ad Traffic: One-Third Is Bogus

    Billions of dollars are flowing into online advertising. But marketers also are confronting an uncom ...

  7. 【转】开放api接口签名验证

    不要急,源代码分享在最底部,先问大家一个问题,你在写开放的API接口时是如何保证数据的安全性的?先来看看有哪些安全性问题在开放的api接口中,我们通过http Post或者Get方式请求服务器的时候, ...

  8. mac上使用生成RSA公钥和密钥

    关于RSA加密解密的问题,没事弄了一下,先把主要的流程保存下来,以备交流或者以后用. 首先确保你的电脑上安装了openssl,一般mac系统安装后都会自动安装!怎么安装??.....请百度...... ...

  9. Asp.net Core WebApi 使用Swagger做帮助文档，并且自定义Swagger的UI

    WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...

  10. java web项目启动时自动加载自定义properties文件

    首先创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器.用于监听整个容器生命周期的 ...