一、html5中的大纲
在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲。因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个局部使用整体样式时。http://gsnedders.html5.org/outliner/网站中有一个文档大纲分析器,可以将文档大纲以可视化的形式展示出来。“Untitled Section”表示缺乏标题
二、大纲的编排规则
关于内容区块的编排,可以分为显示编排与隐式编排两种方式。
1、显示编排内容区块是指明确使用section等元素创建文档结构,在每个文档区块内使用标题好(h1~h6、hgroup等)
2、隐式编排内容区块是指不明确使用section元素,而是根据页面中所书写的各级标题等自动创建各级内容区块。因为html5中分析器只要看到书写了某个级别的标题,就会判断存在相对应的内容区块。
3、 标题分级规则:不同标题之间是有级别的,h1级别最高,h6级别最低,
(1)如果新出现的标题比上一个标题级别低,生成下级内容区块
(2)如果新出现的标题比上一个标题级别高或相等,生成新的内容区块
4、不同内容区块可以使用相同级别的标题
父内容区块与子内容区块可以使用相同级别的标题,这样做的好处是,每个级别的标题都可以单独设计,如果既需要“整个网页的标题”,又需要“文章的标题”,这样做可以带来很大的便利性。
三、对新的结构元素使用样式
因为很多浏览器尚未对html5中的新增的结构元素提供支持,我们无法知道客户端使用的浏览器是否支持这些元素,所以需要使用css追加如下说明:
article,aside,dialog,figure,footer,header,legend,nav,section,main{
display: block;
} /*追加block说明*/
另外,ie8以及之前的浏览器不支持用css的方法来使用这些尚未支持的结构元素,所以为了在ie中也能正常使用这些结构元素,需要使用javascript脚本:
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
//在脚本中创建元素
HTML5中新的结构元素
HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...
关于html5中的 网页图标问题
在html5 中 设置网页图标的语句
html5中的大纲
html5中的大纲 前言: 在html5中我们可以使用结构元素来编排一份大纲,这样我们就可以通过这个网页的大纲来了解网页中有哪些内容,网页中以什么样的形式来组织这些内容有更清楚的认识. 1.html5 ...
HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和
HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域
网站标题
html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到
利用html5中的localStorage获取网页被访问的次数
利用html5中的localStorage获取网页被访问的次数
Flask08 包含(include)、继承(extends)、宏???、模板中变量的来源、利用bootstrap构建自己的网页结构
1 包含 直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: ...
随机推荐
android面试宝典
一.listview的优化: 首先要知道getview实际就是个for循环. 我们重写的getview方法中本身有一个convertview,因为只需要保留能够显示的最大个数的view即可,所以: 第 ...
linux中给PHP安装mongodb的扩展
centos5.6 32bit php 5.2.17 php安装路径 /usr/local/php phpize路径 /usr/bin php-config路径 /usr/bin php.ini路径 ...
【温故而知新-Javascript】使用数组
Javascript 数组的工作方式与大多数编程语言的数组类似.
...Interview----判断整数序列是否是二叉搜索树的后序遍历结果
题目:输入一个整数数组,判断该数组是不是某二元查找树的后序遍历的结果. 如果是返回true,否则返回false. 例如输入5.7.6.9.11.10.8,由于这一整数序列是如下树的后序遍历结果: ...
SCAU 10893 Spiral
10893 Spiral 时间限制:1000MS 内存限制:65535K 题型: 编程题 语言: 无限制 Description Given an odd number n, we can ar ...
解决weblogic与系统时间相差8小时的问题
解决weblogic与系统时间相差8小时的问题 在一般情况下weblogic与系统时间是很少会出现时间差的问题,但有可能在某一特定的情况下就会出现,如使用weblogic8版本时可能会出现时差问题: ...
HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST
URL地址 就是我们所说的网址:www.jd.com 浏览器内核,渲染引擎 Ie内核:triteent 谷歌/欧鹏:blink 火狐:gecko 苹果:webkit 渲染引擎是出现兼容性的根本问题 - ...
Could not open input file: composer.phar
Yii 2官网推荐用Composer安装框架,但是在本地出错:Could not open input file: composer.phar.后来修改了命令行就ok了,难道是我装的Composer跟 ...
jQuery淡入淡出的轮播图
html结构:
- ...
Java代码片段——向文件末尾添加内容
BufferedWriter out = null; try { out = new BufferedWriter(new FileWriter(”filename”, true)); out.wri ...