2018-03-12

DOCTYPE 的作用

Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’。这篇文章将简单阐述这两种模式之间的差异。


译注:一个网页一般由两部分组成即:HTML(Hypertext Markup Language)和CSS(Cascade Style Sheets)。

HTML负责描述网页的结构和内容(如标题,导航栏等),而CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。


问题的产生:


当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。


为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。


然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。


因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。


解决方案:


任何的解决方案必须跟随如下两个方面:

1:允许网站开发者能够选择他们所熟知的模式。

2:依然使用旧式规则显示陈旧的网站。


换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。


选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准,任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示(X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人这个文档的类型风格

      1:产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。

      2:相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。

      3:任何新的或未知的DOCTYPE将触发严格模式。

4:一些页面依据怪异模式而写,但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式,参照这个浏览器比较图表



注意:你的网页并不一定要依据所选择的DOCTYPE去获得有效性验证,一个DOCTYPE标签足以触发严格模式。


我在大部分网页中使用如下的DOCTYPE。它除了声明我的网页是XHTML 1.0 过渡类型之外,还将在所有浏览器中触发“准严格模式”(译注:下文将介绍这个模式)


完美的解决方案?


就个人而言,我并不十分满意“DOCTYPE切换”方案。一个DOCTYPE所提供的信息是(X)HTML文档所拥有的类型风格,即文档的结构,而不应该提供任何关于文档表现(外观)的信息,因为那违反了CSS关于页面结构和表现分离的原则。


并发症:准严格模式


在早些时候,尝试使用严格模式总是会产生关于图片会突然获得旧式的底部边距,并且无法移除的讨论。产生这个现象的原因是严格模式将

标签当成行内元素,这意味着一些空间将被保留给一些拥有”尾部“的字符如(g, j, q),而图片并没有“尾部”字符,所以这些空间将不会被使用,但是却依旧保留着。

need-to-insert-img


解决办法是声明图片为块级元素{display:block}


浏览器厂商,尤其是Mozilla,认为这是一种产生困惑的情况,于是他们引入了“准严格模式”(译注:也称为准标准模式 Almost Standards Mode),这与严格模式一样,除了它将图片当作块级元素而不是行内元素。


Windows平台IE的特殊性 : XML声明


在Windows平台的IE6 浏览器中,微软实现了一个额外的规则:如果DOCTYPE声明在XML声明之后,将触发怪异模式。这样做是为了允许开发者在怪异模式下获得“有效的网页” (需要DOCTYPE)。下面是XML声明,你需要将它放在页面的开头,在DOCTYPE之前。

注意这种行为已经从IE7 中移除。


译注:Peter-Paul Koch在这篇文章后面列出了怪异模式和严格模式在不同浏览器中的一些重要表现,建议了解一下

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • Express实用技巧和设计模式 1.Express介绍 Express是一个简介、灵活的node.js web应...
    ngaiwei阅读 1,008评论 0 4
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 757评论 0 3
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,220评论 0 8
  • 太久太久,没有拿起笔来写点东西了。 直到遇到了简书,上面有许许多多爱好写作的人,看到了他们的文章,或写自己的...
    时间七年阅读 247评论 2 1