`

XHTML 和 DOCTYPE 切换

阅读更多

为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”(也叫“DOCTYPE 嗅探”)的功能。

引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开发为呈现 HTML 页而不是 XHTML 页。浏览器通过判断是否存在 DOCTYPE 来确定何时应该使用标准来呈现页。

Internet Explorer 6+ 支持两种呈现模式,分别叫做 Quirks 模式和 Standards 模式。当 Internet Explorer 呈现包含有效 XHTML(或 HTML 4.0)DOCTYPE 的页时,它会以 Standards 模式呈现该页;否则,它会以 Quirks模式呈现该页(有关详细信息,请参阅 CSS Enhancements in Internet Explorer 6)。

Opera 浏览器 (Opera 7+) 支持与 Internet Explorer 相同的两种呈现模式:Quirks 和 Standards(有关详细信息,请参阅 http://www.opera.com/docs/specs/doctype/)。

Mozilla Firefox 1+ 支持三种呈现模式:Quirks 模式、Almost Standards 模式和 Standards 模式。Firefox 的 Almost Standards 模式对应于 Internet Explorer 和 Opera 的 Standards 模式。当页包含有效的 XHTML 1.0 Transitional DOCTYPE(并且该页被分配为 text/html MIME 类型)时,Firefox 会以 Almost Standards 模式呈现该页。当页包含 XHTML 1.0 Strict 或 XHTML 1.1 DOCTYPE(或者该页被分配为 XML MIME 类型)时,该页将以 Standards 模式呈现(有关详细信息,请参阅 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html)。

可以通过临时向页中添加以下客户端脚本(该脚本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效)确定浏览器的当前呈现模式。

<script type="text/javascript"> alert( document.compatMode ); </script>

您需要关心浏览器的呈现模式,因为它会影响将层叠样式表应用于该页的方式。如果将现有 HTML 页转换为 XHTML 页,那么在浏览器中打开它们时,它们可能看起来非常不同。

例 如,Internet Explorer 以不同方式计算页元素的大小,这取决于呈现模式(它使用不同的 CSS Box Model)。在 Quirks 模式下,元素的宽度是通过将元素的内容、内边距、边框和边距相加而计算得到的。在 Standards 模式下,元素的宽度是只考虑元素内容的宽度而计算得到的。

例如,考虑下列两个 div 标记。

xml 代码
 
  1. <div style="width:400px;border:solid 1px black">   
  2.  First Box   
  3.  </div>   
  4.  <div style="width:400px;border:solid 1px black;padding:10px">   
  5.  Second Box   
  6.  </div>  

 除了第二个 div 元素的附加内边距以外,这两个div 元素是相同的。在 Quirks 模式(参见图 2)下,这两个 div 元素看起来大小相同,因为在计算第二个 div 元素的宽度时考虑了它的附加内边距(这两个元素的总宽度为 400px)。在 Standards 模式(参见图 3)下,第二个 div 元素看起来要比第一个 div 元素宽,因为在计算元素的宽度时未考虑内边距(这两个元素的总宽度大于 400px)。


2. Quirks 模式


3. Standards 模式

这只是 Quirks 模式下浏览器差异的一个示例。在 Quirks 模式下,每个浏览器都以相当不同的方式实现 W3C层叠样式表标准。有关切换到 Standards 模式的一个妙处在于,它强制几乎所有现代浏览器以非常类似的方式(不完全相同,但要好得多)解释 W3C标准。

如 果希望 Web 页以相同方式出现在所有浏览器中,那么通过包含 XHTML 1.0 Transitional DOCTYPE 触发 Standards 模式(在 Internet Explorer 和 Opera 中)和 Almost Standards 模式(在 Firefox 中)是一个好主意。幸运的是,默认情况下,Visual Studio .NET 2005 和 Visual Web Developer 自动将该 DOCTYPE 添加到每个新的 ASP.NET 页中。

分享到:
评论

相关推荐

    XHTML教程

    开发者通常需要使用Doctype切换浏览器渲染模式,并确保在HTML和XHTML之间保持良好的向后兼容性。 ### 8. 学习资源与实践 学习XHTML的过程中,可以通过在线教程、书籍和实践项目来加深理解。W3Schools、MDN Web ...

    js 图片切换 js 图片切换js 图片切换

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ;charset=gb2312"/&gt; һҹͼƬ Zustand...

    js焦点图片切换

    在网页设计中,JavaScript焦点图片切换是一种常见的动态效果,用于展示一组图片并让它们以某种方式自动...在实际应用中,开发者可以根据需求自定义切换速度、过渡效果和用户交互方式,以适应不同的设计风格和功能需求。

    DOCTYPE声明作用及用法详解

    DOCTYPE声明在HTML和XHTML文档中起着至关重要的作用,它告诉浏览器文档应该按照哪种标准或模式进行解析。DOCTYPE声明位于文档的最顶部,通常在`&lt;html&gt;`标签之前。它的主要作用是触发浏览器的“呈现模式”,决定...

    html doctype 作用介绍

    - **怪异模式(Quirks mode)**:在没有DOCTYPE或者DOCTYPE声明不正确时,浏览器会切换到怪异模式。在这种模式下,浏览器可能会忽略某些CSS规则,导致布局问题,并且JavaScript的执行可能与预期不同。这对于那些...

    精通CSS PART1

    DOCTYPE切换是指浏览器用来区分旧版文档与更符合标准的文档的一种方法。具体来说: - **标准模式**:当文档具有正确的DOCTYPE时,浏览器会以标准模式渲染页面,遵循W3C标准。 - **怪异模式**:当文档缺少DOCTYPE或...

    HTML教程:DOCTYPE 的缩写

    如果浏览器检测到文档不是有效的XML,它会切换到“混杂模式”(Quirks Mode),在这种模式下,浏览器会按照旧的、非标准的方式来解析和渲染页面,可能导致样式和布局出现问题。 了解DOCTYPE的缩写形式对于编写高效...

    JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

    本文实例讲述了JS实现的图片选择顺序切换和循环切换功能。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    jquery实现图片渐变切换兼容ie6/Chrome/Firefox

    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; &lt;html xmlns=”http://www.w3.org/1999/xhtml”&gt; &lt;head&gt; &lt;meta ...

    游戏换装小程序

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ; charset=utf-8" /&gt; 不切换背景切换...

    css+js图片切换效果

    DOCTYPE html&gt;`声明,指定了文档类型为XHTML 1.0 Transitional,以确保在不同浏览器下的兼容性。 - 使用了`; charset=gb2312"&gt;`元标签来指定字符编码。 5. **优化建议**: - 可以考虑加入过渡动画效果,比如淡入...

    css鼠标滑过内容切换代码

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的语言。在这个主题中,“css鼠标滑过内容切换代码”指的是通过CSS实现当鼠标悬停在某个元素上...

    jQuery实现内容定时切换效果完整实例

    DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&gt; &lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;meta ...

    jquery 图片自动切换

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ; charset=utf-8" /&gt; &lt;title&gt;jQuery...

    网页设计幻灯片代码.doc

    同时,定义了两个函数:`change_img()`和`changeimg(n)`,分别用于实现图片的切换和点击事件的响应。 知识点5:CSS样式 文档中使用了内联样式和外联样式,用于设置图片的样式和动画效果。例如,`.axx`和`.bxx`类...

    手机横竖屏切换事件

    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt...

    JS实现可切换图片的幻灯切换效果示例

    DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&gt; &lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;meta ...

Global site tag (gtag.js) - Google Analytics