html网页结构怎么放一排框架,html5中的网页结构

一、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 的加载方式是即读即加载,遇到

没有遇到

的时候一样加载 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 ...