`

(转)DocType 的严格模式与混杂模式

 
阅读更多
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。

在标准模式中,浏览器根据规范呈现页面;

在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。



声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。详细请看:http://www.w3school.com.cn/tags/tag_doctype.asp

1. 浏览器模式

当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。

Mozilla和Safari还有第三种模式,称为”几乎标准的模式(almost standards mode)”,除了在处理表格的方式上有一些细微的差异之外,这种模式与标准模式相同。

在Firefox中,可以使用Web Developer Extension查看页面的呈现模式。如果网站以标准模式呈现,工具栏上会显示一个绿色的钩;若以混杂模式呈现,则显于红色的叉。IE 8中的开发工具也显示浏览器使用的模式。

差异:

对于这两种模式之间的差异,最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时,在标准模式中使用的是正确的盒模型,在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性,Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。

如何触发这两种模式:

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式,被称为DOCTYPE切换或DOCTYPE侦测。并非所有浏览器都采用这些规则,但是这些规则很好地说明了DOCTYPE切换的工作方式。要了解更全面的内容,可查阅网站http://hsivonen.iki.fi/doctype/,这里的图表说明了不同浏览器如何根据DOCTYPE声明来选择呈现方法。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果选择了错误的DOCTYPE,那么页面就将以混杂模式呈现,其行为就可能会有错误或不可预测。因此,一定要在站点的每个页面上包含形式完整的DOCTYPE声明,并且在使用HTML时选择严格的DTD。

<pre>

<ol>

<li>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"</li>

<li>    "http://www.w3.org/TR/html4/strict.dtd"&gt;</li>

<li>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</li>

<li>    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</li>

<li>&lt;!DOCTYPE html&gt;</li>

</ol>

</pre>

许多HTML编辑器会自动添加DOCTYPE声明。如果创建XHTML文档,一些老的编辑器还可能在DOCTYPE声明前面添加XML声明:

<?xml version="1.0" encoding="utf-8"?>

XML声明是XML文件使用的可选声明,它定义使用的XML版本和字符编码类型等设置。不幸的是,如果DOCTYPE声明不是页面上的第一个元素,那么IE 6会自动切换到混杂模式。这个问题在IE 7中已经纠正了,但是除非要将页面用做XML文档,否则最好避免使用XML声明。
分享到:
评论

相关推荐

    CrystalAngelLee#crystal-interview#Doctype 作用? 严格模式与混杂模式如何区分?它们有何

    ( HTML5 没有严格和混杂之分)区分DTD: Document Type Definition文档包含严格的 DOCTYPE:一般以严格模式呈现包含过渡 D

    Html题目问题已经答案完整版

    2.DOCTYPE声明的作用是什么,严格模式与混杂模式如何区分? &lt;!DOCTYPE&gt;声明位于文档的最前面,处于标签前,告知浏览器的解析器,用声明文档类型规范来解析这个文档。 在严格模式(标准模式)中,浏览器根据规范呈现...

    DOCTYPE 标签

    使用正确的DOCTYPE标签对网页的呈现一致性至关重要,因为不同的DOCTYPE会导致浏览器采用不同的渲染模式,如 quirks mode(怪异模式)或 standards mode(标准模式)。在quirks mode下,浏览器会模拟旧版浏览器的行为...

    HTML 35道面试题及答案.docx

    本文档总结了 35 道 HTML 面试题及答案,涵盖了 HTML 基础知识、DOCTYPE 的作用、标准模式与混杂模式、HTML5 新特性、浏览器内核、HTML 和 HTML5 的区别等内容。 一、DOCTYPE 的作用 DOCTYPE 是 HTML 文档的声明,...

    HTML DOCTYPE的缩写

    如文档中所述,在尝试“举一反三”时,如果没有正确地遵循DOCTYPE的规则,确实可能会导致页面以“混杂模式”渲染,这是在开发过程中需要注意避免的问题。因此,开发者在学习和使用DOCTYPE时,应当掌握正确的知识,并...

    wzq的面试题1

    2. DOCTYPE的作用及严格模式与混杂模式: DOCTYPE声明是HTML文档的开头部分,用来告诉浏览器文档遵循的HTML或XHTML规范。不同的DOCTYPE会导致浏览器进入不同的渲染模式:严格模式(Standards Mode)和混杂模式...

    2021年最新前端面试题(字节跳动)真题解析.pdf

    DOCTYPE作用及严格模式与混杂模式: 1. DOCTYPE声明是位于文档开头的一个指令,它告诉浏览器使用哪种HTML或XHTML规范来解析文档。&lt;!DOCTYPE&gt;声明位于文档中的最前面,位于标签之前,用以触发浏览器的标准模式渲染...

    html doctype 作用介绍

    浏览器有两种主要的渲染模式:BackCompat(标准兼容模式未开启,也被称为怪异模式或混杂模式)和CSS1Compat(标准兼容模式已开启,也被称为严格模式)。 - **BackCompat(怪异模式)**:在怪异模式下,浏览器尝试...

    前端校招面试题精编解析大全(1)1

    3. **严格模式与混杂模式**:严格模式下,浏览器按照W3C标准解析和执行代码,提供最佳的渲染效果和JS执行。混杂模式则是浏览器以兼容老版本HTML的方式解析,模拟老式浏览器的行为,以确保旧网站的正常运行。DOCTYPE...

    2016前端面试题及答案.docx

    DOCTYPE html&gt;`会开启严格模式,而无DOCTYPE或老式的DOCTYPE会开启混杂模式。 4. **CSS盒模型**:CSS盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒模型决定了元素在页面上...

    前端开发面试题集锦(一).docx

    例如,HTML4.01 Strict或XHTML1.0 Strict会触发严格模式,而缺少DOCTYPE或旧版本的DOCTYPE声明可能导致混杂模式。 - 混杂模式下,浏览器会模拟老版本的IE(如IE5.5)的行为,包括一些已知的bug和非标准特性。 - ...

    前端开发面试题含答案.pdf

    严格模式与混杂模式方面: 1. 如何触发这两种模式 2. 区分它们有什么意义 盒模型方面: 1. 外边距、内边距和边框之间的关系 2. IE8 以下版本的浏览器中的盒模型 块级元素与行内元素方面: 1. 怎么用 CSS 控制...

    最新史上最全前端面试题(含答案).docx

    DOCTYPE html&gt;`会触发严格模式,而无DOCTYPE或旧式的DOCTYPE可能引发混杂模式。两种模式的意义在于确保浏览器在不同解析模式下的一致性展示。 4. **HTML块级元素与行内元素**:块级元素如div、p、h1等会在页面上...

    笔试主要涉及某些元素的HTML和CSS的示例值.pdf

    - DOCTYPE声明文档类型,影响浏览器如何解析页面,分为严格模式(标准模式)和混杂模式(Quirks模式)。 - 严格模式遵循W3C标准,而混杂模式模拟旧版浏览器的行为。 - 不同模式下,如盒模型、行内元素尺寸设置、...

    前端必考面试

    一、DOCTYPE 的作用和严格模式与混杂模式的区别 DOCTYPE declaration Located at the very beginning of an HTML document, it tells the browser which document type definition (DTD) to use when rendering the...

    前端校招面试题精编解析大全.pdf

    (Doctype 声明文档类型,严格模式:不允许出现非法标签,混杂模式:允许出现非法标签) 4. HTML5 新特性有哪些?移除了哪些元素?(新特性:Canvas、Video、Audio、LocalStorage 等;移除:frameset、font 等) 5. ...

    WEB前端开发工程师面试题.doc

    它分为严格模式和混杂模式。严格模式下,浏览器按照W3C标准呈现页面,保证代码的规范性;混杂模式则模拟早期浏览器的行为,以便兼容旧的网页设计。DOCTYPE的类型和格式决定了浏览器使用哪种模式。例如,不包含...

    2015前端面试题(含答案)1

    4. **严格模式与混杂模式**:严格模式(standards mode)遵循W3C标准,混杂模式(quirks mode)兼容旧版浏览器的行为。DOCTYPE声明决定了浏览器解析页面的方式,不正确的DOCTYPE会导致页面以混杂模式呈现,影响样式...

    java前端面试题

    #### 二、严格模式与混杂模式的区别及意义 **严格模式**(Strict Mode)与**混杂模式**(Quirks Mode)是指浏览器解析HTML文档的方式: - **严格模式**:遵循最新的HTML标准,提供一致的渲染结果。这种模式下,...

Global site tag (gtag.js) - Google Analytics