HTML 5的革新——更简洁的结构
今天我们阐述HTML 5的革新之一:更简洁的结构。
新的文档类型 DOCTYPE
先来解释一下文档类型 DOCTYPE:文档类型位于HTML源文件的第一行,在HTML4的标准中,DOCTYPE在被归在“HTML 标签”一章中,
DOCTYPE由来历史
说说历史吧,其实 DOCTYPE 之所以出现是由于早期的Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式)。而且这个黑色艺术的缔造者就是微软,微软在开发Explorer 5时改进了对W3C标准的支持,以至于旧的一些网页出现了错误的渲染效果(其实是依照规范是正确的,也可以说他们之前制作的网页没有依据规范来)。于是微软想出了一个新奇的方案:在开始渲染页面之前,IE5会先检查DOCTYPE来激活新的标准模式,而老旧的网页一般没有DOCTYPE,Explorer 5就会像老旧浏览器一样渲染它们,所以浏览器就有了两种渲染模式:“怪异模式(quirks mode)”和“标准模式(strict mode)”。
而接着为了激活标准模式呢(顺应大潮么),网页制作者就得在前面加上 DOCTYPE 。后来Mozilla发布1.1版本时,数以万计的网页在Mozilla浏览器上支离破碎,原来是因为,虽然加上DOCTYPE之后虽然以标准模式渲染,但他们实际上仍依赖于某个特定的quirks 模式,于是Mozill公司又创建了“almost strict moede(准标准模式)”。于是就有了三种浏览器模式!
而Mozill公司创建的“almost strict moede(准标准模式)”从字面意思上看与标准模式非常类似,但确实有小的差别。主要体现在对于表格单元格内垂直方向布局渲染差异。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始,这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范,故对于在目前看来不太“标准”的以前的标准模式,被赋予了“近似标准模式”的名字。但是在较早的 IE6 IE7 以及 Opera 7.5 之前版本中,浏览器无法严格遵循 CSS2.1 规范,故对于它们来说没有这个近似标准模式,也可以理解为它们的近似标准模式就是标准模式。
其实在大多数浏览器,大多数 DOCTYPE 声明触发的是almost strict mode(准标准模式)。
渲染模式
浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响,对代码的解析以及脚本的行为也同样有影响。你删除了 DOCTYPE 时,以哪种“渲染模式”展示您html页面的权利就完全交给了浏览器,每种浏览器可能都有他们一套渲染模式~这肯定会影响代码验证,而且也决定了浏览器如何显示你的Web文档。
渲染模式向后兼容
IE 的版本号一路从 6.0 升至了目前的 9.0,但若我们不书写 DOCTYPE 或者使用了能够触发混杂模式的 DOCTYPE,那我们所面对的浏览器仍相当于是那个十几年前的老古董 IE5.5。而其他那些浏览器的混杂模式和标准模式之间却没有想 IE 中这么大的差别。所以你只要在页面第一行加入下面代码就不会出现“怪异模式(quirks mode)”(点击quirksmode官网网站了解更多怪异模式信息)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
15个能在所有现代浏览器能触发标准模式的doctype中最常用的一种
看了上面那一大段代码和 DOCTYPE 出现的原因,你是不是觉得 DOCTYPE 本不应该出现,干脆把它去掉。但是我们知道将 DOCTYPE 删除就是将html页面以哪种渲染模式的权利给浏览器。单不说有几种 DOCTYPE ,浏览器就那么多种类在了。
W3C说:别担心,既然不能删除,那我我来简化它!哈哈哈~~~~~
<!DOCTYPE html >
HTML 5的 DOCTYPE
就只需要这15个字符。非常简单,我们再也不需要担心会敲错。而且在 HTML5 草案中,更加明确的规定了那三种模式的定义,所以能触发所有现代浏览器的strict mode(标准模式)。/p>
如果力求最简,则 HTML5 的 DOCTYPE 是最佳选择;如果力求稳妥,则较早的 HTML4.01 Strict 的 DOCTYPE 也是一种好的选择,在各主流浏览器中触发的模式与上面的 HTML5 的完全一致
DOCTYPE 开启的的条件
- 对于那些浏览器不能识别的doctype声明,浏览器采用quirks mode解析
- 在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析(可以这么说,在现有的有doctype声明的网页,绝大多数是采用strict mode进行解析的)。
- 在ie6中,如果在doctype声明前有一个xml声明(比如:
<?xml version="1.0" encoding="iso-8859-1"?>
),则采用quirks mode解析(这条规则在ie7中已经移除了)。 - 不推荐在 DOCTYPE 之前加入任何非空白内容。
根元素
一个页面就好比是一棵树,而HTML元素就是页面里所有元素的根。换句话说,一个HTML页面的根元素始终是html
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
html4的根元素代码
我们可以讨论一下xmlns属性。它的意思是:在这个页面上的元素位于XHTML命名空间http://www.w3.org/1999/xhtml之中。但是HTML 5的元素都是具有这个命名空间的,因此不必再写明了。不管有没有这个属性,HTML 5页面在所有浏览器中将会有一致的表现。而在HTML 5只有lang属性有效,你可以保留xml:lang,但是你得保证它跟lang的属性值相同。好了去掉不要,现在html根元素就是这样了:
<html lang="en">
HTML 5的根元素
head元素
head元素是根元素的第一个元素,它里面的信息是网页本身的信息,而不是网页的本体。(主体在body里)
藏在head里都是好东西特别是对于做seoer来说。
meta元素
meta
标签的作用就是知名所用的字符的编码,不指定编码可能会导致安全漏洞
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
HTML 4指定字符编码的代码
又是这么多,现在html5已经把它变成像下面那样。
<meta charset="utf-8"/>
HTML 5指定字符编码的代码
head元素里还有很多元素譬如:title
,因为其他属性html5没有重新再定义,所以我就介绍link
增加的一些链接关系
链接关系
普通的a
只是链接到某个页面,链接关系则提供了一种方式以解释为什么链接到那个页面
这里我们首先来来说rel="stylesheet"
,看下图
<link rel="stylesheet" type="text/css" href="style.css"/>
html4样式链接
因为Web中样式就只有CSS,所以html5做了小小的优化,把type
去掉了,如下
<link rel="stylesheet" href="style.css"/>
html5样式链接
除了样式链接,html5把js的引入的type也去掉了,因为Web中前端脚本也只有js一种。
<script src="path/to/script.js"></script>
其他链接关系,因为链接能影响权重等,所以还是要了解一下。
rel="alternatr"
HTML5里它的定义已得到澄清,属性值是RSS或者Atom等媒介类型rel="archives"
表示所引用文档的一组收藏,包括记录、文档或者有历史价值的材料。一个blog的索引页可以使用rel"archives"
链接到该blog过去所有发表文章的索引目录rel="author"
用于链接到页面作者的相关信息,譬如“关于作者”页面。rel="external"
表示该链接与当前文档不同,并不属于该站点,譬如访客留言所包含的链接就是用上。rel="start","prev","next"
表示同一系列的页面之间的关系。rel="icon"
浏览器标签卡上的小图标。rel="license"
微格式。rel="nofollow"
表示链接未经页面的作者或者出版者的认可,或者表示出于对方的商业合作关系才被添加的。经常跟 external 连用rel="noreferrer"
表示点击这个不回泄漏referrer信息,但是现在很多浏览器不支持这个属性。rel="pingback"
它的作用是:当被其他网站链接时,网站会自动收到通知,wordpress里实现了这个机制,在写新文章的时候告诉作者你链接了他们。rel="prefetch"
有些搜索引擎加上这个链接后会给某些搜索结果后面加上rel=”prefetch”,表示这个比其他受欢迎的多。
li>rel="search"
表示所引用的链接页面是搜索文章或者其他文档的,内部搜索页。
rel="sidebar"
表示所引用的文件如果被获取,那么器目的是要显示在次要的浏览范围,就是说点击这个链接,会提示用户创建一个收藏夹项目,但从收藏夹选择该项目时所链接的文档将在浏览器的侧边栏打开。rel="tag"
表示标签,譬如文章的分类、关键字。
对SEOer来说,这些新的链接很有用。毕竟链接又称锚点对网站的权重有很大影响。
摘自:http://www.html5jscss.com/html5-element-8.html
HTML 5的革新——更简洁的结构的更多相关文章
- ssm+redis 如何更简洁的利用自定义注解+AOP实现redis缓存
基于 ssm + maven + redis 使用自定义注解 利用aop基于AspectJ方式 实现redis缓存 如何能更简洁的利用aop实现redis缓存,话不多说,上demo 需求: 数据查询时 ...
- wordpress去掉category怎么操作让url更简洁友好
用wordpress建站是比较流行的,全球将近25%的站点是用wordpress搭建的.有很多的模板.插件可以选择,当然最好还是能自己优化.URL固定链接就是之中一个基础的技巧.有网友问如何去掉url ...
- jquery-ui 的 主题 选择什么颜色? 建议使用html5 的标准进行书写, 更简洁!
jQuery ui有多种主体, 基本上, 不能使用 no theme 的"主题包" base: 是基本的, 颜色以深灰色为主, 高亮显示为蓝色, ui lightness(明快) ...
- 更简洁的 CSS 清理浮动方式
CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...
- 使用Groovy+Spock轻松写出更简洁的单测
当无法避免做一件事时,那就让它变得更简单. 概述 单测是规范的软件开发流程中的必不可少的环节之一.再伟大的程序员也难以避免自己不犯错,不写出有BUG的程序.单测就是用来检测BUG的.Java阵营中,J ...
- leetcode 题解 word search。递归可以更简洁。
先写上我的代码: 我总是不知道何时把任务交给下一个递归.以致于,写出的代码很臃肿! 放上别人递归的简洁代码: bool exist(char** board, int m, int n, char* ...
- php 中更简洁的三元运算符 ?:
PHP 三元运算符是对参数赋值时候的一个简洁的主要用法. 一个主要的用法: PHP 三元运算符能够让你在一行代码中描述判定代码, 从而替换掉类似以下的代码: <?php if (isset($v ...
- OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言,使页面更简洁;
OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言,使页面更简洁: 支持运算符(如+-*/),比普通的标志具有更高的自由度和更强的功能 ...
- C++11/14的新特性——更简洁
新的字符串表示方式——原生字符串(Raw String Literals) C/C++中提供了字符串,字符串的转义序列,给输出带来了很多不变,如果需要原生义的时候,需要反转义,比较麻烦. C++提 ...
随机推荐
- Relocation POJ-2923
题目链接 题目意思: 有 n 个货物,并且知道了每个货物的重量,每次用载重量分别为c1,c2的火车装载,问最少需要运送多少次可以将货物运完. 分析:本题可以用二进制枚举所有不冲突的方案,再来dp 一下 ...
- June 25,2014---->Binder(IPC),Dalvik ,DEX/ODEX
1.Binder(IPC) Linux进程之间要能够互相通信,从而共享资源和信息.所以,操作系统内核必须提供进程间的通信机制(IPC,Inter-Process Communication). IPC ...
- ORA-12547: TNS:lost contact
碰到这个ORA-12547: TNS:lost contact的问题,翻了很多资料和METALINK,总结了一下原因: 1 是由于rpm包没有安装,对于我们的生产环境,此包是安装的. admin@p1 ...
- HihoCoder 1640 : 命名的烦恼(预处理)
描述 程序员常常需要给变量命名.给函数命名.给项目命名.给团队命名…… 好的名字可以大大提高程序员的主观能动性,所以很多程序员在起名时都会陷入纠结和烦恼. 小Hi希望给新的项目起个拉风的名字.他希望这 ...
- [SDOI2012]任务安排
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2726 [算法] 此题与POJ1180非常相似 但是 , 此题中的t值可能为负 , 这 ...
- MongoDB搭建ReplSet复制集群
MongoDB的复制集是一个主从复制模式 又具有故障转移的集群,任何成员都有可能是master,当master挂掉用会很快的重新选举一个节点来充当master. 复制集中的组成主要成员 Primary ...
- 移植最新版libmemcached到VC++的艰苦历程和经验总结(下)
结果如何呢?我的VC++测试用例还是不能调用该接口的接口方法,只是这次的报错方式有所改变,提示是每个C/C++程序员最不愿意看到的“内存地址访问违规”,这一次我确实被郁闷了,这是为什么呢? 五.gcc ...
- Winform安装包出现无法访问网络位置
1.原因:安装包的安装路径出现了问题 2.如下图:错误路径 3.如下图:正确路径
- 动态规划专题(一) HDU1087 最长公共子序列
Super Jumping! Jumping! Jumping! 首先对于动态规划问题要找出其子问题,如果找的子问题是前n个序列的最长上升子序列,但这样的子问题不好,因为它不具备无后效性,因为它的第n ...
- 如何使用最简单的方法将一个已经存在的工程中使用 cocaPodfile
在网上搜索的使用 cocaPods 安装一些优秀的框架,搜索的博客大多步骤都是非常的麻烦,这里的方法非常的简单,本篇仅仅作为以后备用. 第一步:首先找到我们的工程,在终端中输入 cd 拖入已经存在 ...