html5中的大纲
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中的大纲的更多相关文章
- html5中的网页结构
一.html5中的大纲 在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲.因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个 ...
- HTML5区块和大纲算法
原文链接: Using HTML sections and outlines - Mozilla Developer Network 每集HTML5+CSS3网页布局教程-2大纲算法 HTML5标准带 ...
- HTML5中新的结构元素
HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...
- HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- HTML5 中的 canvas 画布(一)
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5中引入的关键特性
新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...
- HTML5中与页面显示相关的API
1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API 是指当页面变为最小 ...
随机推荐
- Android布局优化之过度绘制
如果一个布局十分复杂,那么就需要来排查是否出现了过度绘制,如果出现了,那么很可能会造成刷新率下降,造成卡顿的现象.那么什么是过度绘制呢?过度绘制就是在同一个区域中叠加了多个控件.这就像小时候我们画画, ...
- 曲率已驱动了头发——深度分析谷歌AlphaGo击败职业棋手
这篇是我们自开设星际随笔以来写得最长的一篇.我们也花了不少力气.包括把那5盘棋各打了两遍的谱,包括从Nature官网上把那篇谷歌的报告花了200元下载下来研究它的算法(后来发现谷 歌网站上可以免费下载 ...
- SVO实时全局光照:中等规模场景的GI实现
RTGI人生成就点unlocked! 快速集成DR+AO+SVO GI,针对中等场景粒度,初步具备全功能,暂未重度优化.附测试对比图.
- mac os x安装ngigx+php fastcgi+mysql+memcache详细流程
Part 1: MacPorts Mac上装软件常用的是MacPorts和homebrew,这个软件会很方便地提供软件的安装.装这些前先得装Xcode,Xcode在appstore上有,一个多G,下载 ...
- [转]说说C#的async和await
C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. 看个例子: public class MyClass { public MyClass() { Displa ...
- websocket for python
https://github.com/aaugustin/websockets server.py #!/usr/bin/env python import asyncioimport websock ...
- algo_预备
章 C + +程序设计 大家好!现在我们将要开始一个穿越" 数据结构.算法和程序" 这个抽象世界的特殊旅程,以解决现实生活中的许多难题.在程序开发过程中通常需要做到如下两点:一是高 ...
- hive报lzo Premature EOF from inputStream错误
今天dw组同事发邮件说有一个问题让帮解决一下.他们自己没能搞得定.下面问题解决过程: 1.hql insert overwrite table mds_prod_silent_atten_user p ...
- Spring MVC 事务配置
Spring MVC事务配置 要了解事务配置的所有方法,请看一下<Spring事务配置的5种方法> 本文介绍两种配置方法: 一. XML,使用tx标签配置拦截器实现事务 一. ...
- iOS开发问题之Could not instantiate class named NSLayoutConstraint
这个问题在ios6.0之前的版本中运行会出现,因为使用Xcode 4.5之后的版本新建项目默认是选中AutoLayout的,但这个特性是在iOS6.0之后的版本中才支持的. 解决办法是选中.stroy ...