电脑学习 Win8知识 黑云ROM 投稿

当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

网页制作知识:XHTML 和 DOCTYPE 切换

时间:2010-8-24 10:25:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要: 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”(也叫“DOCTYPE 嗅探”)的功能。引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 W...
D6电脑网 (d6pc.com): 网页制作知识: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> 标记。

<div style="width:400px;border:solid 1px black">
First Box
</div>
<div style="width:400px;border:solid 1px black;padding:10px">
Second Box
</div>


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

<a href='http://www.002pc.com/master/College/Page/' target='_blank' class='infotextkey'>网页</a>制作知识:XHTML 和 DOCTYPE 切换

2. Quirks 模式

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

如果希望 Web 页以相同方式出现在所有浏览器中,那么通过包含 XHTML 1.0 Transitional DOCTYPE 触发 Standards 模式(在 Internet Explorer 和 Opera 中)和 Almost Standards 模式(在 Firefox 中)是一个好主意。



D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2020 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图| 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0