DOCTYPE 探索 【已翻译100%】(1/2)

介绍

最近在我学习HTML5的时候,心里想到的第一个问题就是浏览器怎么会知道,我们编写的HTML是否兼容HTML v4.1或者HTML v5呢.

为了找到对相同查询的回复,我开始了我的探索,这里我想分享对此的一些了解. 研究这个东西的时候,我了解到所有这些都是由一个叫做 <!DOCTYPE> 的标签来控制的,它是大多数网页的最开头的一个标签,真正令我感觉惊奇的事情,则是因为我看到每一个web页面不管何时被某个IDE添加,都会自动添加上这个标签,而我也从未关心过这个标签,也从未想过要去研究研究它,但这一次出于对这个标签的好奇,我对此稍微更深入了一点.

本文中我将描述有关<!DOCTYPE>标签的东西,并将给出下面一些问题的答案.

浏览器时如何知道,我们编写的页面是HTML4.1 还是 HTML5的呢?

什么是 <!DOCTYPE> 标签,它是干什么的?

HTML4.1 & HTML5 有多少种类型的DOCTYPE?

在不同的浏览器上面,<!DOCTYPE> 是如何影响到HTML元素的渲染的?

错误的“<!DOCTYPE>”会怎样使得一个HTML页面不可用?

如何验证一个页面是是否是验证通过的呢?

我们如何决定<!DOCTYPE>类型的定义呢?

<!DOCTYPE> 如何同文档模式关联起来的(标准, 怪异 和大体标准模式) ,还有浏览器是如何决定是在标准模式,还是怪异模式下渲染一个网页的呢?

让我们开始研究

那么让我们一个一个的来解答.

浏览器是如何知道我们写的页面是HTML4.1 还是 HTML5 的?

如我前面所说,使用某种IDE添加一个页面的时候,一个叫做<!DOCTYPE>的标签会自动被添加到web页面的顶部,标签里面会定义好一些属性. 这个 <!DOCTYPE> 标签呈述和通知浏览器页面使用的HTML版本. 浏览器遇到一个包含此标签的web页面时,都会使用此文档类型的值来决定用于此页面的文档模式. 由于HTML 5只有一个我们将会在后面讨论的<!DOCTYPE>, 因此该 <!DOCTYPE> 就被定义成像这样<!DOCTYPE html>. 该标签自身显示了web页面是兼容HTML 5的. 因此<!DOCTYPE> 被定义成<!DOCTYPE html>时,就意味着我们使用了HTML5.

什么是“DOCTYPE” 标签,它能干什么?

“文档类型声明” 或者说 <!DOCTYPE> 标签向浏览器指出了我们编写的HTML,web页面所使用的笨笨,还有其他标签将会在浏览器上被如何渲染.

<!DOCTYPE> 告诉浏览器, “我使用的是 HTML 4.01.” 当浏览器看到这个的时候,就知道你讲的是什么,以及你确实是在编写 HTML 4.01. 那样浏览器就会使用面向 HTML 4.01的布局和显示规则. 该标签告知浏览器,所写的是一个标准的为所有浏览器所接受的HTML。这一标准可以这3种之一 例如我们将在下面进一步讨论的严格、 过度和框架集标准.

当“DOCTYPE” 被定义在一个页面中时,浏览器就能准确知道如何处理你的页面(至少是你关心的那些浏览器)如何按照预期的显示. 它会告诉浏览器文档的类型.

“DOCTYPE” 声明表示使用了标准的HTML,而所写的HTML页面是兼容由W3C(万维网联盟)所定义标准的.

在HTML 4.01中, <!DOCTYPE> 申请引用了一个 DTD (文档类型定义) . DTD 指定了标记语言的规则,因此浏览器能准确的渲染出内容来.

DTD的目的是定义好一个XML文档的合法构造块.DTD用一个合法元素和属性的列表定义了文档架构. DTD 可以在一个XML文档里面内联定义, 或者是作为一个外部文件被引用.

<!DOCTYPE> 标签必须是HTML文档的第一个标签,它看起来像这样

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”>

下面的图片剖析了DOCTYPE标签的每一个部分。请仔细阅读,以获得对此的一个合理的理解.

现在你可能会想到我们并没有谈及 ”过渡Transitional ”这个词. 这个过渡是用来干嘛的呢? 如果我们写的是 “标准 standard” HTML 4.01, 那为什么它要是过渡的呢? 让我们来理解这样作的意义.

实际上,存在两个DOCTYPE, 一个是面向使用 HTML 4.01 编写的HTML页面的过渡的, 还有一个面向那些已经存在的更严格的 DOCTYPE.

设想你已经有一个拥有数以百计的web页面的web站点. 你也许会想升级网站使全部的HTML升级到 4.01标准, 但是你的页面中使用了许多HTML 2.0和3.2那个时代的旧东西. 你该怎么办? 那就得使用 HTML 4.01 过渡的 DOCTYPE了, 它允许你验证你的页面,但是仍然允许一些传统的HTML存在 . 那样,你就能确保你的标记里面不会有明显的错误(比如错别字,标签不配对等等),而你就不用将整个HTML推导重来,以通过验证. 然后,在你移除了全部的传统HTML之后,你就已经对严格文档类型有了完全的准备,就能确保你能有一个完全兼容的标准的Web站点.
DOCTYPE HTML4.1, XHTML & HTML5 有多少种类型?

HTML 4.01 & XHTML 有三类不同的 <!DOCTYPE> 声明,而HTML5则仅仅只有一种 <!DOCTYPE> 声明.

HTML 4.01 Strict

在这个DTD中, 除了展示性的以及过时的HTML 元素和属性(比如font)之外,其它都允许. Frameset 也不被允许.

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

HTML 4.01 Transitional

在这个DTD中, 所有的HTML元素和属性,包括展示性的和过时的元素(比如font)都允许. 但是Frameset仍然不被允许.

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

在这个DTD中, 所有的HTML元素和属性,包括展示性的和过时的元素(比如font),还有frameset内容,都允许.

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

XHTML 1.0 Strict

在这个 DTD 中, 标签必须使用格式良好的XML编写。除了展示性的和过时的,所有的HTML元素和属性都允许使用。Frameset不被允许.

此 DTD 相当于 HTML4.01 Strict DTD,但是标记必须也是使用格式良好的 XML 编写.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

在这个 DTD 中, 标签必须使用格式良好的XML编写. 包括展示性和过时在内的,所有的HTML元素和属性都允许使用。Frameset不被允许.

此 DTD 相当于 HTML4.01 Transitional DTD ,但是标记必须也是使用格式良好的 XML 编写.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

此 DTD 相当于 XHTML 1.0 Transitional, 但允许frameset内容的使用.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 相当于 XHTML 1.0 Strict, 但允许你添加模块 (例如提供对于东亚语言的ruby支持).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

<!DOCTYPE html>

不同的浏览器上,"<!DOCTYPE>" 是如何影响到HTML元素的渲染的?

不同浏览器对各种标签的渲染都有所不同. 我们定义一个 DOCTYPE 的时候,就意味着我们在告诉浏览器使用了特定DOCTYPE的HTML标准.

当我回想一下不久的过去,我不解于应用程序的一些页面会在“怪异”的浏览器模式下打开,而还有一些会在“标准”浏览器模式下打开而感到沮丧,真感觉好笑. 研究了"DOCTYPE", 我才知道只有正确的 "DOCTYPE" 才能让web页面在正确的浏览器模式下打开.

时间: 2024-11-05 13:00:38

DOCTYPE 探索 【已翻译100%】(1/2)的相关文章

DOCTYPE 探索 【已翻译100%】(2/2)

错误的""怎样使HTML无效的? 定义一个错误的DOCTYPE会使Web页面无效.例如,当我们开发一个页面,如果某人将DOCTYPE定义为Strict,并且还是用了废弃的元素像是"font",那么这个元素会使得页面无效,或者我们使用了标签,而且没有为这个标签定义"Alt"属性,这同样会使页面无效,因为根据Strict DTD,"Alt"属性是标签的必选属性. 如何验证页面是否有效? W3C 拥有一个让你可以根据定义的"

通过 Doctype 启用浏览器模式 【已翻译100%】(1/2)

为了即能解析那些满足Web标准的网页,又能解析那些过去20年来遗留下来的传统的网页,现代浏览器一般都实现了多种网页解析的模型.本文将介绍这些解析模型都是什么,以及它们是如何触发的. 内容概述 本文档的主要结论是,你应当在你HTML文档(所有以text/html类型处理的内容)的源代码顶部加上<!DOCTYPE html>.(详见下文) 如果你还想确保使用IE8/IE9/IE10的用户不做任何操作就可以让网页以IE7的形式显示,你可以在你的服务器上为所有text/html的响应添加HTTP头&q

通过 Doctype 启用浏览器模式 【已翻译100%】(2/2)

doctype嗅探(也叫doctype转换) 现代浏览器使用doctype嗅探来决定text/html文档的引擎模式.这意味着模式的选择是基于HTML文档开始的文档类型声明(或缺少).(这不适于使用XML文档类型的文档.) 文档类型声明(doctype)是SGML的语法伪造,SGML是个旧式的标记框架,HTML5之前的HTML就是依据其定义的.HTML4.01规范中,文档类型声明描述的是HTML的版本信息.尽管名字叫"文档类型声明"且HTML 4.01规范所描述的是关于"版本

从 C++ 到 Objective-C 的快速指南 【已翻译100%】

**简介 ** 当我开始为iOS写代码的时候,我意识到,作为一个C++开发者,我必须花费更多的时间来弄清楚Objective-C中怪异的东西.这就是一个帮助C++专家的快速指南,能够使他们快速的掌握Apple的iOS语言. 请注意这绝不是一个完整的指南,但是它让你避免了阅读100页的手册.除此之外,我知道你喜欢我的写作风格. 背景 需要C++的技能,我会比较C++和Objective-C的东西.此外,COM编程也是有用的,因为Objective-C有类似于IUnkown的东西,因此基础的COM编

为什么 Docker 在引领虚拟化和云计算的新浪潮 【已翻译100%】

又是一年的OSCON之际,今年的技术领域关注在人们热烈讨论的云基础建设.其中更有趣的是刚开始起步的Docker,这是一个超轻量化容器应用,充满潜力. 我对Docker的服务副总裁James Turnbull非常着迷,他将会在大会上带来一场Docker的速成班.除了探究Docker是什么之外,我们还将导论云,开源贡献和得到一份真正的工作. 您曾经出版过关于不同linux方面的著作.您开始是如何探索linux的呢?是什么让您对linux如此热衷呢? 我想我第一次接触linux是在Debian刚发布不

远程执行 Android 设备上的代码 【已翻译100%】(1/2)

"你走进一个咖啡店坐下来.等咖啡的时候,你拿出你的智能手机开始玩一款你前些天下载的游戏.接着,你继续工作并且在电梯里收邮件.在你不知情下,有攻击者获取了公司网络的地址并且不断地感染你所有同事的智能手机. 等下, 什么? 我们在Bromium实验室博客上不会谈论Android太多.但是不时地我们喜欢修修补补.近来,我的同事Thomas Coudray 和我探索了下Android远程代码执行的易损性,想弄明白易损性在现实应用中是多大的问题. 尽管权限提升技术在Android上很普遍(并形成了&quo

复制策略与复制的方式 【已翻译100%】(2/2)

服务器宕机意味着相关的日志变化部分会在尺度上增加,直到同伴节点再次运行起来,或者我们从复制目标中移除这个服务器条目. 到目前为止,这与你要组织 oplog 的方式非常相似.主要的不同是,组织需要记录的真实数据的方式.从 oplog 角度看,你准备向系统中写入发生的变化.并且,对之施行的唯一方式就是以它产生的相同顺序将其应用到 oplog 中.这会导致你只能一直拥有一个单主节点的系统.并且会引发在"大脑分裂"时数据丢失或需要手工合并的场景. 就多重可写组合而言,我们要保持足够的上下文(通

CentOS 6 到 CentOS 7 的升级过程【已翻译100%】

在红帽企业版7发布之后仅仅几周,centos7也发布了,并且包含了与红帽同样令人兴奋的功能.除了期待已久的systemd和当前热门的Docker,此次发布还使系统自动从版本6更新到版本7而不需要安装镜像文件成为可能.虽然升级还需要重启,因此不能算是一种live upgrade,但对于那些只能通过远程访问的服务器来说还是非常方便的. 红帽早已发布并且文档化了必要的更新工具.CentOS团队还来不及导入.测试和重新构建工具,但是开发人员早已经在做开始做了-而且他们提供了未测试的二进制文件. 请,注意

10 个迅速提升你 Git 水平的提示 【已翻译100%】

最近我们推出了两个教程:熟悉Git的基本功能和让你在开发团队中熟练的使用Git . 我们所讨论的命令足够一个开发者在Git使用方面游刃有余.在这篇文章中,我们试图探索怎样有效的管理你的时间和充分的使用Git提供的功能. 注:本文中,一些命令包含了方括号中的部分内容(例如:git add -p [file_name]).在这些示例中,你将插入必要的数字.标示符等等,如果没有方括号. Git自动补全 假使你使用命令行工具运行Git命令,那么每次手动输入各种命令是一件很令人厌烦的事情.为了解决这个问题