月半小夜曲下的畅想--DOCTYPE模式

 猜猜我现在在干嘛?看在天朗气清的份上,告诉你好了,我现在做在电脑旁,然后听着月半小夜曲,然后思绪开始飞扬了,此时的我感觉很惬意,音乐的旋律虽伤感,但好像触碰到内心的柔软,心弦为之一动,就是那么好听,在这动听的乐曲下,我想到了doctype,因为它也让我伤感,让我动心,还得动脑。

什么是DOCTYPE?

  百度百科上的介绍:

文档类型标签,该标签是将特定的标准通用标记语言或者XML文档(网页就是其中一种)与文档类型定义(DTD)联系起来的指令。该标记应该出现在文件的第一行。它在文档中出现的格式如下:

<!DOCTYPE html PUBLIC "引用的字符串" --公共标识符-->

“引用的字符串”被称为公共标识符,它通过业界约定的公共标识符名称(通常是一个相关的标准)指向某个特定的文档类型定义(DTD)。(外语原文:A DOCTYPE is a SGML document type declaration. Its purpose is to tell an SGML parser what DTD it should use to parse the document.)

标签完整格式为<!DOCTYPE>,语法参见!DOCTYPE。只有确定了一个正确的文档类型,超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效,甚至对JavaScript脚本都会有所影响。

常用集合:

超文本标记语言

互联网工程任务组超文本标记语言2.0:

<!DOCTYPE HTML

PUBLIC "-//IETF//DTD HTML//en">

公共标识符称为:“-//IETF//DTD HTML//en”。

万维网联盟:

大多数万维网浏览器实际上并没有使用标准通用标记语言解析器,其中许多基于对文档的!DOCTYPE声明,显示有所不同的文件或缺乏。

在超级文本标记语言下的作用是告知浏览器当前文档所使用的是哪种超文本或可扩展超文本规范。

超文本4.01 规定了叁种文档类型:严格、过渡以及框架集。

超文本严格文档类型定义:

如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表配合使用:

(公共标识符称为:“-//W3C//DTD HTML 4.01//en”。)

<!DOCTYPE HTML

PUBLIC "-//W3C//DTD HTML 4.01//en"

"http://www.w3. org/TR/html4/strict.dtd">

超文本过渡文档类型定义

可包含万维网联盟所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表的浏览器以至于您不得不使用超文本标记语言的呈现特性时,请使用此类型:

(公共标识符称为:“-//W3C//DTD HTML 4.01 Transitional//en”。)

<!DOCTYPE HTML

PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en"

"http://www.w3. org/TR/html4/loose.dtd">

超文本框架集文档类型定义

框架集文档类型定义应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,等同于过渡文档类型定义:

(公共标识符称为:“-//W3C//DTD HTML 4.01 Frameset//en”。)

<!DOCTYPE HTML

PUBLIC "-//W3C//DTD HTML 4.01 Frameset//en"

"http://www.w3. org/TR/html4/frameset.dtd"

扩展超文本标记语言

万维网联盟:

可扩展超文本标记语言 1.0 规定了叁种文档类型:严格、过渡以及框架集。

可扩展超文本标记语言严格文档类型定义

(公共标识符称为:“-//W3C//DTD XHTML 1.0 Strict//en”。)

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//en"

"http://www.w3. org/TR/xhtml1/DTD/xhtml1-strict.dtd">

可扩展超文本标记语言过渡文档类型定义

可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 XHTML 的呈现特性时,请使用此类型:

(公共标识符称为:“-//W3C//DTD XHTML 1.0 Transitional//en”。)

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//en"

"http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

可扩展超文本标记语言框架集文档类型定义

当您希望使用框架时,请使用此文档类型定义!

(公共标识符称为:“-//W3C//DTD XHTML 1.0 Frameset//en”。)

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//en"

"http://www.w3. org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

数学标记语言

万维网联盟:

下面例子中的声明都指定了遵从“MathML”数学标记语言 2.0 文档类型定义。

(公共标识符统称为:“-//W3C//DTD MathML 2.0//en”。)

<!DOCTYPE math

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd">

第二种将设置MATHML命名空间的前缀到MML。

<!DOCTYPE mml:math

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"

[

<!ENTITY % MATHML.prefixed "INCLUDE">

<!ENTITY % MATHML.prefix "mml">

]

>

第三种附加了检查文档类型定义(DTD)

<!DOCTYPE math

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"

[

<!ENTITY % MathMLstrict "INCLUDE" --设置参数实体MathMLStrict。-->

]

>

符号交换文件格式(音乐)

公共标识符称为:“-//IPTC-NAA//DTD NITF 2.0//en”

<!DOCTYPE NITF

PUBLIC "-//IPTC-NAA//DTD NITF 2.0//en" >

翻译存储交换

公共标识符称为:“-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en”

<!DOCTYPE tmx

PUBLIC "-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en">

电子日历

公共标识符称为:“-//IETF//DTD iCalendar//en”

<!DOCTYPE iCalendar

PUBLIC "-//IETF//DTD iCalendar//en">

无线标记语言

公共标识符称为:“-//WAPFORUM//DTD WML 1.1//en”

<!DOCTYPE wml

PUBLIC "-//WAPFORUM//DTD WML 1.1//en">

音乐可扩展标记语言

三点零版本:

<!DOCTYPE score-partwise

PUBLIC "-//Recordare//DTD MusicXML 3.0 Partwise//en">

上面的 DOCTYPE 包含 6 部分:

  1. 字符串“<!DOCTYPE”
  2. 根元素通用标识符“HTML”
  3. 字符串“PUBLIC”
  4. 被引号括起来的公共标识符(publicId)“-//W3C//DTD HTML 4.01//en”
  5. 被引号括起来的系统标识符(systemId)“http://www.w3.org/TR/html4/strict.dtd”
  6. 字符串“>”

其中根元素通用标识符、公共标识符、系统标识符均可以通过脚本调用 DOM 接口获得,分别对应 document.doctype.name、document.doctype.publicId、document.doctype.systemId

最后,我查看了在淘宝网,京东,天猫,还有博客园上都是用的<!DOCTYPE html>,这个是html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5,而HTML 4.01 中的doctype需要对DTD进行引用,因为HTML 4.01基于SGML,而HTML5不基于SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为。我平时也是运用<!DOCTYPE html>,一方面简洁,不会写错,另外一方面,标准主流浏览器都认识,所以可以放心写。

DTD:文档类型定义(Document Type Definition)是一套关于标记符的语法规则。它是标准通用标记语言和可扩展标记语言1.0版规格的一部分,是文档的验证机制。文档类型定义是一种保证标准通用标记语言、可扩展标记语言文档格式正确的有效方法,可通过比较文档和文档类型定义文件来看文档是否符合规范,元素和标签使用是否正确。具体解释参照:http://baike.baidu.com/link?url=bA_s20lIL9cApp0e-fGvm2bbCvhblqjc7_1BF1gdMMdjNREQr6VZOEcylzuG5eMaJF_-olsL6ZWWQ4QKgXUwIq

SGML:标准通用标记语言(以下简称"通用标言"),是一种定义电子文档结构和描述其内容的国际标准语言;通用标言为语法置标提供了异常强大的工具,同时具有极好的扩展性,因此在数据分类和索引中非常有用;是所有电子文档标记语言的起源,早在万维网发明之前"通用标言"就已存在。具体解释参照:http://baike.baidu.com/link?url=dTCobBuXTUw0jTNi4dpsIOU2Dt0owC8WnazmV1gsgQXOegyPSDZAMZ95BN81ckCyspnO5TTgrX-hm3_ktPagruZzvIfqBISloJIXiFgJcs_euma9v9I5iABX7g0Zyxpo3zJAzbDPCoH7zBJFg13TKa

浏览器的两种文档模式历史:

随着 IE 的发展,其渲染引擎(早期为 MSHTML.dll,后来命名为 Trident)也在不断加入新的特性以及修正一些早先版本的错误。在 2001 年 IE6 正式发布之前,当时的市面主要就是 IE 和 Netscape 的 Navigator 两款浏览器,而 IE 拥有很大的用户群,所以大多数的页面都是针对 IE 而设计的,但是 IE 的渲染引擎却没有遵循 W3C 的规范,当时微软已经认识到 W3C 规范的重要性,所以当 IE 发展到 IE6 的时候,渲染引擎(MSHTML.dll)做出了一个重要的改变,将自己原先不符合 W3C 规范中的盒模型 box mode 绘制方式改为与 W3C 标准一致,由于这个重大的改动,原先针对 IE 旧版本所设计的 HTML 页面都不能正确显示了,所以在 IE6 发布的时候附带了一个切换回 IE5 页面渲染方式的功能,这个功能中就首次提出了 Quirks Mode。IE6.0以后的版本在浏览器内嵌了两种表现模式:Standards Mode(标准模式或Strict Mode)和Quirks mode(怪异模式或兼容模式Compatibility Mode)。在标准模式中,浏览器根据W3C所定的规范来显示页面;而在怪异模式中,页面将以IE5,甚至IE4的显示页面的方式来表现,以保持以前的网页能正常显示。

浏览器是如何决定文档模式?

浏览器在准备解析、绘制一个页面的时候,它是如何决定文档模式的呢?实际上浏览器在渲染页面之前会检查两个内容,一个是页面是否有 doctype 信息,另外一个是页面是否有 x-ua-compatible 信息(暂时不讨论,先讨论doctype)。

Doctype 检测

对于一个 HTML 页面,<!DOCTYP >声明位于其中最前面的位置,处于<html>标签之前,这个<!DOCTYP >可以告知浏览器使用哪种 HTML 规范,针对每种规范浏览器同样也会选择对应的文档模式。平时最常见的三种 doctype 信息对应的文档模式如下。

  当 doctype 信息如下时,表明该页面是遵守了 HTML5 规范的,浏览器会选择 Standards Mode,这种 doctype 是最推荐的一种,我们平时设计页面都应该加上这一个 doctype。

  <!DOCTYPE html>

  当 doctype 如下时,浏览器同样会选择 Standards Mode,虽然和第一种 doctype 有一些区别,但是几乎可以认为是一样的。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  当 doctype 缺失的时候,浏览器会选择 Quirks Mode,这是非常不推荐的方式,我们应该尽量避免 Quirks Mode,这对一个 web 应用是非常不利的地方。

标准模式(Standards Mode)与怪异模式(Quirks Mode)下的页面区别

由于历史原因,早期的 IE 浏览器(IE 6 以前)将盒子的 padding 和 border 算到了盒子的尺寸中,这一模型被称为 IE 盒模型。

在 IE 盒模型中,

box width = content width + padding left + padding right + border left + border right

box height = content height + padding top + padding bottom + border top + border bottom

而在W3C 标准的盒模型中,box 的大小就是 content 的大小。

box width = content width,

box height = content height

如下代码所示:

IE5.5下的盒子总宽度为100px.

谷歌上的盒子总宽度为160px

由此可见,Quirks 和 Standards 这两种文档模式渲染页面的时候会有很大的差别,特别是盒子模型的解释造成很多麻烦,这些差别主要是由于渲染引擎在历史的发展过程中与 W3C 标准的差异性而导致的。

所以对doctype的声明尤为重要,假如没有声明doctype,那么就会开启怪异模式!

如下代码效果:

IE5.5/IE6/IE7/IE8效果图如下:

就会在Quirks Mode下,而其他的主流标准浏览器的效果是怎样的呢?由于其他主流的标准浏览器都是用的W3C标准,所以效果如下:

(分别是谷歌,360,safari,opera的测试效果)

假如加上了doctype声明,IE5.5/IE6/IE7/IE8的效果是怎样的呢?

IE5.5还是

而IE6/IE7/IE8则是:

跟其他采用W3C的标准浏览器的盒子模型一样。

现在大家已经忽视了IE5的存在,为了更好实现兼容,所以doctype声明一定不可用缺省。而你可以使用<!DOCTYPE html>即可。

CSS3的box-sizing属性(因为也是尺寸相关,一起总结)

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

默认值: content-box
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;



描述


content-box


这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。


border-box


为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。


inherit


规定应从父元素继承 box-sizing 属性的值。

代码如下:

由上面代码所示,就可以看出,当设置box-sizing:border-box;

为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

即是,内容content只有130px,width:150px,在已设定的150px内,减去左右两边border,就是内容值130px。

-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

上面两行代码则兼容了Firefox和Safari,同时测试了opera,效果图一致如下:

那么IE5.5的效果如下:

IE6/IE7的效果如下:

IE8的效果如下:

从以上可以看出,box-sizing属性在IE8上是可以实现其他标准浏览器的效果,可是IE5.5/IE6/IE7 却不能完全兼容,从兼容性上考虑,在大型的项目上尽量不用box-sizing。有兴趣的朋友,可以去查下box-sizing 如何实现兼容咯。

重要的一点就是一定要有doctype声明,为了简洁,建议你写上<!DOCTYPE html>即可。本篇文章还涉及了很多知识点,就不一一赘述了,至于页面渲染引擎这个点,我还不是很清楚,所以后面再总结写文咯。

假如有错误的地方,欢迎大家指正,谢谢咯。

音乐结束,我这篇文章也就到这咯,呵呵。----妙瞳

时间: 2024-10-12 03:45:35

月半小夜曲下的畅想--DOCTYPE模式的相关文章

腾讯投资在行&分答,探索分享经济下的未来社交模式

作者:楠沨 [IT战略家] 本轮融资并未公布具体金额,分答表示资金将更多投入到产品及用户体验迭代,知识网红的扶植,品牌推广等方向,由穆棉资本作为独家财务顾问.这意味着,在行&分答可能就此获得中国互联网最重要的两个资源:用户导流和资金:而腾讯握住了在行&分答在知识按需分享这一领域的未来价值. 分享经济兴起,知识变现成突破口 我们吸收信息从书本到电视,从电视到电脑,从电脑到手机,形式越来越个性化和直接,时间碎片化和个人精力受限的双重压力下,知识网红应运而生.用户渴望更简单更方便就能得到想要的知

virtualbox下Centos6.5桥接模式上网配置方法

记得之前安装linux配置桥接模式,马上就能上网的,虚拟机上重装了系统后就不能上网了,折腾了好几次,不停地安装系统,原来应该怎么配置,我真是完全忘记了,年纪大了脑子不好使了!这里记录一下,免得下次再忘. 1.安装linux并配置IP,虚拟机配置为桥接模式,如下图,红框里选主机的网卡,这里是我win7电脑的网卡 2.修改网络连接属性,如下图,勾上就OK了 virtualbox下Centos6.5桥接模式上网配置方法,布布扣,bubuko.com

.net程序错误:BadImageFormatException....如果在安装32位Oracle客户端组件的情况下以64位模式运行

OracleClient 程序要连oracle数据库,提示如下错误: 数据连接不成功,请检查该数据库是否已启动尝试加载oracle客户端时引发BadImageFormatException.如果在安装32位Oracle客户端组件的情况下以64位模式运行,将出现此问题. 1.IIS部署时 网上搜索了一下,有各种办法,试过多安装了一个64位的oracle11g客户端,还是不行.后来想到是否是iis的问题,之前配置iis的时候好像碰到过32位64位的一个设置,看了以前的博客之后把应用程序池做了如下设置

尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。

从10G开始,Oracle提供了一个较为轻量级的客户包,叫做Instant Client. 将它安装好后,就不用再安装庞大的Oracle Client了. 这样一来,只要客户端下载Instant Client,直接解压,设置Path就ok了.具体设置如下:1.下载32位Oracle InstantClient 2.将Oracle InstantClient解压到某目录 3.打开PL/SQL,在perference里面设置OCI Library和Oracle_home,例子如下:        

【CSWS2014 Summer School】大数据下的游戏营销模式革新-邓大付

大数据下的游戏营销模式革新 邓大付博士腾讯专家工程师 Bio:毕业于华中科技大学,现任腾讯IEG运营部数据中心技术副总监,负责腾讯游戏的数据挖掘相关工作,包括有用户画像,推荐系统,基础算法研究等.主要感兴趣的领域包括有分布式计算平台系统架构,机器学习算法等. =================================================== 这个讲座时间比较短,内容也比较少,不过还是让我开拓了眼界,比如TX游戏数据的规模.游戏服务器的规模以及游戏中一些算法.模型的应用. ==

(原创)拨开迷雾见月明-剖析asio中的proactor模式(二)

在上一篇博文中我们提到异步请求是从上层开始,一层一层转发到最下面的服务层的对象win_iocp_socket_service,由它将请求转发到操作系统(调用windows api),操作系统处理完异步请求之后又是如何返回给应用程序的呢,这里是通过iocp(完成端口)来实现的.让我们先来简要的看看iocp的基本步骤: 创建IOCP对象: 创建io object对象: 将io object IOCP对象绑定: 4.进行异步调用: 创建线程或者由线程池等待完成事件的到来: asio实际上也是按照这个步

CentOS 6.3下部署LVS(NAT模式)+keepalived实现高性能高可用负载均衡

一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台:CentOS 6.3 Kernel:2.6.32-279.el6.i686 LVS版本:ipvsadm-1.26 keepalived版本:keepalived-1.2.4 三.安装 0.安装LVS前系统需要安装popt-static,kernel-devel,make,gcc,openssl-devel,lftp,libnl*,popt* 1.在两台Director Server上分别配置LVS+Keepalived LVS

18期中国智能家居主题沙龙将于8月27日在京举办--“小米模式”将至,智能家居的发展趋向与应对之策

背    景: 近期,小米与几家做智能硬件.智能家居的主流企业的争端成为行业关注焦点.特别是小米与Broadlink的合作,引出业界关于商业合作伦理与知识产权保护的思考.对于多数智能家居企业而言,与互联网等巨头合作是无法抵抗的诱惑,也可能因此在合作关系处于弱势一方,因此更需利用法律法规保护自己. 当前,智能家居市场呈现整体爆发的景象,众多资本.各类企业纷纷跨界涉足智能家居.以自主技术为核心竞争力的智能家居创业企业,如何面对新的竞争环境?"小米事件"和"小米模式"究竟

在Debug模式下中断, 在Release模式下跳出当前函数的断言

在Debug模式下中断, 在Release模式下跳出当前函数的断言 #ifdef DEBUG #define __breakPoint_on_debug asm("int3") #else #define __breakPoint_on_debug #endif // 验证 #define UXY_ASSERT_RETURN_ON_RELEASE( __condition, __desc, ... ) \ metamacro_if_eq(0, metamacro_argcount(__