登录 注册
评论 收藏
分享文章
协作翻译 Web/WAP应用开发
正文

DOCTYPE 探索 已翻译 100%

oschina 投递于 2014/07/04 06:38 (共 15 段, 翻译完成于 07-04)
阅读 3189
收藏 102
评论 13
英文原文：DOCTYPE Explored
顶 1

参与翻译 (2人) : LeoXu, 麦壳原野

打印
仅中文 中英文对照 仅英文
加载中

介绍

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

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

LeoXu
LeoXu
翻译于 2014/07/04 08:36
顶
1

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

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

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

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

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

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

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

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

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

LeoXu
LeoXu
翻译于 2014/07/04 08:44
顶
1

让我们开始研究

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

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

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

LeoXu
LeoXu
翻译于 2014/07/04 08:52
顶
1

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

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

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

LeoXu
LeoXu
翻译于 2014/07/04 08:58
顶
1

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

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

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

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

LeoXu
LeoXu
翻译于 2014/07/04 09:05
顶
1

<!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.

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

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">

LeoXu
LeoXu
翻译于 2014/07/04 09:26
顶
1

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">

LeoXu
LeoXu
翻译于 2014/07/04 09:31
顶
1

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页面在正确的浏览器模式下打开.

LeoXu
LeoXu
翻译于 2014/07/04 09:37
顶
1
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
加载中

评论(13)

c
cylzhh
2014/07/06 21:21

引用来自“ejzhang”的评论

“web页面所使用的笨笨”——应该是“版本”吧
哈哈。。我也看到这个疑惑了。。怎么译者还在卖萌啊。。
举报
l
lanybass
2014/07/05 21:17

引用来自“ejzhang”的评论

“web页面所使用的笨笨”——应该是“版本”吧
笨笨是指的一只狗的名字
举报
zhweifcx
zhweifcx
2014/07/05 18:54

引用来自“理工小强”的评论

还没有涉及到这么复杂的问题 我们要求客户兼容我们 而不是我们兼容浏览器 后台管理程序的好处就在这里 可以挑用户
赞个
举报
翻强加薇-code33
翻强加薇-code33
2014/07/05 15:56
我一直很好奇淘宝的IE6团队都是群什么人
举报
理工小强
理工小强
2014/07/05 13:49
还没有涉及到这么复杂的问题 我们要求客户兼容我们 而不是我们兼容浏览器 后台管理程序的好处就在这里 可以挑用户
举报
山下狮子
山下狮子
2014/07/05 13:33
我觉得还不错
举报
OSC688888
OSC688888
2014/07/05 13:17

引用来自“吉哥”的评论

我之前在某页面上用的是XHTML 1.0 Transitional的doctype，但是在用到audio这html5的标签时，功能也支持，貌似没影响，主要是看浏览器的支持吗？
卧槽，浏览器肯定不是完全看doctype的。
举报
吉哥
吉哥
2014/07/05 09:58
我之前在某页面上用的是XHTML 1.0 Transitional的doctype，但是在用到audio这html5的标签时，功能也支持，貌似没影响，主要是看浏览器的支持吗？
举报
流水理鱼
流水理鱼
2014/07/05 09:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>


实际上html5的 兼容ie6. 也不会进入怪异模式.

看看那淘宝的 也是用的html5的 doctype
举报
d
dowebok
2014/07/05 09:21
这文章真生硬，完全读不下去，读了几段就不想读了。
举报
删除一条评论

评论删除后，数据将无法恢复

取消
确定
返回顶部
顶部