- 浏览: 5164139 次
- 性别:
- 来自: 天津
博客专栏
-
实战 Groovy
浏览量:29320
文章分类
- 全部博客 (639)
- 代码之谜 (6)
- JavaScript quirks (5)
- 程序员 (92)
- Java (93)
- BT编程 (7)
- html/css (64)
- Groovy&Grails (42)
- Android (20)
- C/C++ (5)
- PHP/Perl/Python (46)
- 经典文章 (51)
- CodeIgniter (14)
- JQuery (10)
- 笑话 (4)
- 其他 (32)
- javascript (69)
- 云计算 (0)
- html5 (7)
- 面试 (8)
- google (3)
- nosql (2)
- nodejs (11)
- go (5)
- erlang (1)
- 小常识 (3)
- 冷知识 (5)
- database (4)
- web (12)
- 架构 (12)
- Exception (0)
最新评论
-
jqw1992:
https://www.chromefor.com/libra ...
[福利] 开发者必备的 Chrome 插件——ChromeSnifferPlus -
litjerk:
初步算了一下,目前最最精简的Win98版是5M,他5个小时多敲 ...
让人目瞪口呆的三位世界级电脑大师 -
379855529:
。。似乎重点没说NIO啊,前面基础只是铺垫的很好的,可是我要的 ...
Java NIO与IO的详细区别(通俗篇) -
springmvc_springjpa:
spring mvc demo教程源代码下载,地址:http: ...
一步步开发 Spring MVC 应用 -
匡建武:
Good
四个程序员的一天
上一篇文章主要讲述了HTML文档的构成,同时肤浅地接触了“标签省略”这一概念,本文会从概念上介绍HTML文档中第一个出现的重要元素 – DOCTYPE。
所谓DOCTYPE,最初是XML的概念,即通过一种特定的语法,作为一种元数据,来描述XML文档中允许出现的元素,以及各元素的组成、嵌套规则等。具体的概念可以在WIKI中中得到一个更详细的结果。
但是在HTML中,DOCTYPE又有着一些不同的效果,其中之一就是著名的触发浏览器标准模式的功能。即如果没有DOCTYPE,浏览器会进入一种被称为Quirks模式的怪异状态,在该模式下,浏览器的盒模型、样式解析、布局等都与标准规定的存在差异。
需要注意的是,所谓的HTML标准、DOM标准等,只规定了在标准模式下的概念和行为,正如文档构成中提到的,DOCTYPE是一个HTML文档绝对不可以省略的部分,因此就根本不存在“Quirks模式”这样的概念。也正是因为标准中没有对Quirks模式做出任何的规定,因此不同浏览器在Quirks模式下的处理也是不同的,应用Quirks模式可谓难上加难。
HTML4的DOCTYPE
在HTML4的标准中,DOCTYPE被归属于“HTML版本信息”一章中。在该章节中,标准指定了3种DOCTYPE:
- 严格模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
。 - 过渡模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
。 - 框架模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
。
在HTML4的标准中,每一个DOCTYPE对应的dtd文件都是有合法的URL指定的,可以通过互联网进行下载。浏览器可以根据URL获得到dtd的具体内容,并根据内容的规定来解析文档。
现实是不同的
HTML4如同XML一样,是一个相当理想化的标准。但是,现实往往并没有这么理想,试想下面的HTML文档:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>I'm not a frameset</title>
</head>
<body>
<p>So what?</p>
</body>
</html>
这个文档采用了一个框架模式的DOCTYPE,但其正文确没有使用任何<frame>
元素,相对应地使用了应该由严格模式或者过渡模式指定的,标准的HTML结构。那么在这种情况下,浏览器能做什么呢?
拒绝渲染该页面?不,浏览器不敢这么做,在激烈的市场竞争之中,如果因此而导致部分页面无法渲染的话,就只能眼睁睁看着市场份额注入别家田了。所以浏览器顶多弱弱地报一个警告以示抗议,却依旧得乖乖地解析出这个文档并正确渲染。
这就是所谓的浏览器的“容错性”,事实上无论你的DOCTYPE是什么,浏览器都会以最大的兼容能力去解析一个文档,并以最大的努力让这个文档显示得符合开发者的预期。而浏览器的这一特性,也逐渐让标准制定者开始意识到,DOCTYPE似乎真的不怎么重要。因此,在HTML5中,DOCTYPE发生了一次重大的变化……
HTML5的DOCTYPE
到了HTML5了,这一变化相信多数人已经知道,就是HTML5将DOCTYPE的声明简化了,只需要<!DOCTYPE html>
即可。
正好前文所述,在HTML4时代,标准制定者已经认识到,DOCTYPE对浏览器的渲染并没有太大的帮助,除了给无聊的w3c验证器看以外,DOCTYPE似乎只有触发浏览器兼容模式的作用。于是标准工作组采取了非常实际的态度,测试了所有课程顺触发标准模式的最简DOCTYPE,最终得出了这一结论。
但是故事不会这么简单,标准工作组也不是完成这么简单的动作就撒手不管的无赖分子,事实上他们还是很尽责任地考虑到了向后兼容性、可扩展性等一系列的事情,最后将DOCTYPE一章用了大量文字来进行描述,得到一个非常详实的结果。
HTML5的参考手册相关章节中,将DOCTYPE分为3类:
普通DOCTYPE就是我们所见的最简形式,即<!DOCTYPE html>
,他的真正组成是这样的:
- 一段文本,即
<!DOCTYPE
,大小写不敏感。 - 1个或多个空格,关于空格的定义请参照简介中的解释。
- 字符
HTML
,同样大小写不敏感。 - 1个或多个空格。
- 结束标记,即
>
。
即所谓HTML4时代的几个DOCTYPE,其组成如下:
- 一段文本,即
<!DOCTYPE
,大小写不敏感。 - 1个或多个空格。
- 字符
HTML
,同样大小写不敏感。 - 1个或多个空格。
- 字符
PUBLIC
,大小写不敏感。 - 继续1个或多个空格。
- 一对引号或单引号(必须前后匹配),引号中放一个Public ID。
- 可选内容:
- 1个或多个空格。
- 一对引号或单引号(必须前后匹配),引号中放一个与前面的Public ID对应的System ID。
- 1个或多个空格。
- 结束标记,即
>
。
在标准中,Public ID和System ID是有严格的对应关系的,如果规定的System ID不能有Public ID,则上面的第8项可选内容也就不能存在。HTML5彻底放弃了HTML4中的过渡型和框架型的DOCTYPE,同时整合了XHTML的DOCTYPE声明,得出以下6种组合方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
顾名思义,完全是为了兼容久远时代的历史遗产而准备的DOCTYPE,甚至都已经没办法考证什么样的“工具”会搞出这种DOCTYPE来……遗留工具型的DOCTYPE的组成如下:
- 一段文本,即
<!DOCTYPE
,大小写不敏感。 - 1个或多个空格。
- 字符
HTML
,同样大小写不敏感。 - 1个或多个空格。
- 字符
SYSTEM
,大小写不敏感。 - 继续1个或多个空格。
- 一对引号或单引号(必须前后匹配),引号中放一段文本
about:legacy-compat
,注意这段文本是大小写敏感的。 - 1个或多个空格。
- 结束标记,即
>
。
比如这样的DOCTYPE就属于此类:<!doctype HTML system "about:legacy-compat">
,基本上除了大小写,没有什么值得改变的。
现实的细节
对于DOCTYPE的作用,在真正的浏览中,仅仅起到触发浏览器的标准模式的作用。虽然根据标准,一个HTML文档中,DOCTYPE前可以有其他的元素,如一个U+FFEF的BOM,几个注释,一点空格,但是在当前的状态下,并没有这么理想:
- 对于IE6-9,如果DOCTYPE前存在注释,会进入Quirks模式。
- 对于IE6,如果DOCTYPE前存在一个XML声明,会进入Quirks模式。
写完才发现,问题又全出在IE下……关于DOCTYPE的问题纠结至此,下一章主要讲述编码声明的问题。
发表评论
-
基于单个 div 的 CSS 绘图
2015-01-04 12:38 88047原文: Single Div Drawings with C ... -
常用的 HTML5 移动应用开发框架比较
2012-07-25 09:14 1620对于Mobile Web来说,现在是快速成长时代。由于采用了H ... -
10 个改善网页可读性的实用排版技巧
2012-07-25 08:48 1840网页的排版问题常常被忽视。这挺遗憾的,如果你能改进你的网页排版 ... -
10个有用的排版技巧提升你网站的可读性
2012-07-23 11:12 0排版在网页设计中经常被忽略。其实这是很傻逼的,因为注重网 ... -
移动Web界面样式-CSS3
2012-07-17 12:48 2882CSS2.1发布至今已经有7年的历史,在这7年里,互联网的发展 ... -
浏览器如何渲染文本
2012-04-13 12:14 1589浏览器是我们最常用的软件之一,文本又是网页中最主要的元素, 在 ... -
默认Web字体样式
2012-04-13 12:13 1942通常用户看到的页面的样式(css)会受到三层控制: ... -
最佳 Web 中文默认字体
2012-04-13 12:12 2657最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体 ... -
关于html5的7个传说
2012-04-10 15:41 1115正如 Opera 的布道者 Bruce Lawson 讲 ... -
现在就使用HTML5的十大原因
2012-04-06 14:15 1398你难道还没有考虑使用HTML5? 当然我猜想你可能有自己 ... -
HTML5标准学习 – 文档结构
2012-03-28 09:49 1485说起HTML的结构,很多人都能说得头头是道,一般来说答案 ... -
HTML5标准学习 – 简介
2012-03-28 09:48 1232最近前端的群都蛮热闹的,但我发现多数讨论的是javasc ... -
CSS语法简单入门
2012-03-27 15:57 1374整体组成 在CSS中,顶层元素被称为Rule,而C ... -
《高性能网站建设指南》读书总结
2012-02-28 13:26 1721昨天完整的读了一遍《高性能网站建设指南》,收获颇丰。正如作 ... -
别告诉我你懂Javascript
2012-03-30 10:46 1473过去几年我注意到技术圈一个很奇怪的现象,有太多程序员将那些他们 ... -
StackOverflow的404错误页面
2011-12-02 15:30 2242不知道大家有没有注意到StakeOverflow的404错误页 ... -
这样去写你的 HTML
2011-05-27 13:19 9531昨天在 twitter 上说,怎么忍心把页面写得这么难用? ... -
面向对象的XHTML与CSS编程
2010-09-01 17:26 1237要是XHTML与CSS能面向对象。。太阳应该从北边升起了。 ... -
CSS Frameworks的概念
2010-09-01 17:25 1491最近看到N多介绍CSS框架,前些天我说过一句话:“在我有限 ... -
加速图片显示
2010-09-01 17:24 1458加速的关键,不是降低重量,而是减少个数。如果重量在200K ...
相关推荐
DOCTYPE>并不是HTML标签,它声明web浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现...
HTML(HyperText Markup Language)是用于创建网页的标准标记语言,DOCTYPE是HTML文档中的一个重要部分,它定义了文档遵循的HTML或XHTML规范的版本。DOCTYPE声明位于HTML文档的顶部,通常在`<html>`标签之前,告诉...
值得注意的是,HTML5不再需要引用DTD,其DOCTYPE声明简化为: ```html <!DOCTYPE html> ``` 这是因为HTML5旨在兼容所有浏览器,并且不再区分严格和过渡模式。 使用正确的DOCTYPE声明有助于确保文档遵循特定的标准,...
DOCTYPE html>` 是HTML5规范中的声明方式,它表明当前文档是一个符合HTML5标准的网页。在HTML5之前,不同的DOCTYPE声明对应着不同的HTML或XHTML版本,例如: - HTML4.01 Strict:`<!DOCTYPE HTML PUBLIC "-//W3C//...
**DOCTYPE声明**是HTML或XHTML文档中的一个重要组成部分,它位于文档的第一行,用来告诉浏览器文档应遵循哪个版本的HTML或XHTML规范。这个声明对于确保网页在不同浏览器上的一致性和正确渲染至关重要。 DOCTYPE声明...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` 这行代码定义了文档类型为XHTML 1.0 Transitional,这是一种过渡性的HTML版本,允许...
DOCTYPE文档类型声明是HTML或XHTML文档中的一个重要组成部分,它位于文档的最顶部,用于告知浏览器文档遵循的规范和标准。DOCTYPE声明不是HTML或XHTML的一部分,而是引用了一个外部的文档类型定义(DTD),这个DTD...
DOCTYPE HTML.html
DOCTYPE>`声明位于HTML或XHTML文档的顶部,它的主要作用是告诉浏览器应以何种标准解析文档。不同的`<!DOCTYPE>`声明会导致浏览器进入不同的渲染模式,如quirks mode(兼容模式)和standards mode(标准模式)。在...
在HTML5中,不再需要指定DTD,因为HTML5本身就是向后兼容的,它的DOCTYPE声明仅用于开启标准模式。 要检测浏览器当前是运行在怪异模式还是标准模式,可以使用JavaScript的`document.compatMode`属性。如果返回值为`...
meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> ...
在这个例子中,使用的是HTML5的DOCTYPE声明, δηλDOCTYPE html。 HTML文档头(Head) HTML文档头是HTML文档的开始部分,用于存放一些元数据,例如标题、关键词、描述等信息。HTML文档头的主要内容包括: * ...
HTML的!DOCTYPE是什么意思.zip
DOCTYPE html.xml
Doctype html.txt
在讨论HTML DOCTYPE的缩写之前,我们先来了解一下DOCTYPE声明的作用以及其在HTML文档中的位置。DOCTYPE声明是一个必须位于HTML...因此,开发者在学习和使用DOCTYPE时,应当掌握正确的知识,并在实际编码中审慎处理。
总的来说,这个压缩包可能是一个学习资源,用于教授初学者如何创建符合标准的HTML页面,重点是DOCTYPE的使用和其在HTML页面中的重要性。通过解压并查看DOCTYPE.docx文件,可以深入理解DOCTYPE的相关知识,包括其作用...
比如,正确声明HTML5的DOCTYPE将引导浏览器进入标准模式,这样页面就会按照最新的标准规范正确渲染。相反,如果没有声明DOCTYPE或声明错误,则可能导致浏览器进入怪异模式(quirks mode),在这种模式下,页面可能会...
在给定的文件中,我们看到了一个HTML文档的结构,其中包含了HTML5的DOCTYPE声明、元数据、样式表以及JavaScript代码。这个文档似乎是一个简单的网页,具有动态粒子效果的背景和一个固定在屏幕中央的文本元素。以下是...
HTML5是下一代超文本标记语言,它在2014年被正式标准化,为Web开发引入了许多新的元素、属性和API,旨在提升用户体验,增强网页的互动性和多媒体表现力。这个压缩包文件“html5基础学习”包含了学习HTML5的重要资源...