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脚本:
<script type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
</script> //在脚本中创建元素
html5中的网页结构的更多相关文章
- HTML5中新的结构元素
HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...
- 关于html5中的 网页图标问题
在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...
- HTML5中像网页中保存cookie的实现
if(window.plus)//判断当前的设备是手机 window.localStorage.setItem("key","value");//设置值 win ...
- html5中的大纲
html5中的大纲 前言: 在html5中我们可以使用结构元素来编排一份大纲,这样我们就可以通过这个网页的大纲来了解网页中有哪些内容,网页中以什么样的形式来组织这些内容有更清楚的认识. 1.html5 ...
- HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...
- HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...
- 利用html5中的localStorage获取网页被访问的次数
利用html5中的localStorage获取网页被访问的次数 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Flask08 包含(include)、继承(extends)、宏???、模板中变量的来源、利用bootstrap构建自己的网页结构
1 包含 直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: ...
随机推荐
- UNIX网络编程——原始套接字的魔力【下】
可以接收链路层MAC帧的原始套接字 前面我们介绍过了通过原始套接字socket(AF_INET, SOCK_RAW, protocol)我们可以直接实现自行构造整个IP报文,然后对其收发.提醒一点,在 ...
- Java基础---Java---网络编程---TCP的传输、客户端和服务端的互访、建立一个文本转换器、编写一个聊天程序
演示TCP的传输的客户端和服务端的互访 需求:客户端给服务端发送数据,服务端收到后,给客户端反馈信息. 客户端: 1.建立Socket服务,指定要连接方朵和端口 2.获取Socket流中的输出流,将数 ...
- 【Unity Shaders】使用CgInclude让你的Shader模块化——使用#define指令创建Shader
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- python 内存数据库与远程服务
python 内存数据库与远程服务 需要import的python 内存数据库代码参考下面的链接: http://blog.csdn.net/ubuntu64fan/article/details/5 ...
- www-authenticate与BASE-64认证技术
www-authenticate是一种简单的用户身份认证技术.很多验证都采用这种验证方式,尤其在嵌入式领域中.优点:方便缺点:这种认证方式在传输过程中采用的用户名密码加密方式为BASE-64,其解码过 ...
- Java编写的接口测试工具
这几天由于要频繁地使用一些天气数据接口,但是每次都要频繁的打开网页,略显繁琐,故就自己做了两个json数据获取的小工具. 第一个 先来看看第一个吧,思路是使用一个网络流的处理,将返回的json字符串数 ...
- 【uWSGI】 实战之操作经验
以下是uWSGI版本为2.0以上,uwsgi的启动可以把参数加载命令行中,也可以是配置文件 .ini, .xml, .yaml 配置文件中,个人用的比较多得是 .ini 文件.下面总结下自己操作和使用 ...
- 08_Android中的SimpleAdapter的使用
1 目的界面 2.编写Android清单文件 <?xml version="1.0" encoding="utf-8"?> <manif ...
- [Java]数组排序-选择排序 冒泡排序 插入排序
1 选择排序 原理:a 将数组中的每个元素,与第一个元素比较 如果这个元素小于第一个元素, 就将这个 两个元素交换. b 每轮使用a的规则, 可以选择出 ...
- SpriteBuilder中CCMotionStreak提示图片文件找不到
今天写代码时遇到上述问题,代码如下: player.streak = [CCMotionStreak streakWithFade:3.f minSeg:1 width:30 color:[CCCol ...