为 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。

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 模式呈现。

可以通过临时向页中添加以下客户端脚本(该脚本在最新版本的 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)。

2. Quirks 模式

3. Standards 模式

———————————————————————————–

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

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

转载于:https://www.cnblogs.com/devbar/archive/2009/06/29/1513305.html

网页制作知识:XHTML 和 DOCTYPE 切换相关推荐

  1. 学习网页制作知识之构成网页内容的段落

    打开记事本,按照下面增加新行: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http:// ...

  2. html打开网页过场动画_网页制作设计基础知识

    网页设计基础知识1.1 网站 网站(Web Site)是一个存放网络服务器上的完整信息的集合体.它包含一个或多个网页,这些网页以一定的方式链接在一起,成为一个整体,用来描述一组完整的信息或达到某种期望 ...

  3. 网页制作代码模板_科普:关于网页设计的4个基础小知识

    网站是企业展示形象.引流营销的重要互联网窗口,因此一定要设计得足够吸睛美观,引起顾客兴趣.今天就来教大家如何做好网页设计与制作. 提到网页设计,可能很多小白都要问了:网页设计用什么软件做?网页设计需要 ...

  4. html网页的主题标签是什么6,HTML标签及标签属性大全(网页制作必备知识)

    html标签及标签属性大全(网页制作必备知识) 总类(所有html文件都有的) ------------------------------------------------------------ ...

  5. HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计)

    HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计) 百度云链接:http://pan.baidu.com/s/1hrH6qck 密码:bc4n 01.HTML基本标签_理论 ...

  6. 制作一个html文件 效果如下图,网页制作基础知识-习题课件.ppt

    网页制作基础知识-习题课件 第一章 网页制作基础知识;1.1 案例 网页制作学习园地网页;1.1案例:网页制作学习园地网页; 1.1.1 功能要求1.整个网站主要以HTML代码编写的方式完成.页面风格 ...

  7. html的网页制作需要哪些知识,网页制作之HTML基础知识

    总类(所有HTML文件都有的) 文件类型 (放在档案的开头与结尾) 文件主题 (必须放在「文头」区块内) 文头 (描述性资料,像是「主题」) 文体 (文件本体) 结构性定义(由浏览器控制的显示风格) ...

  8. 计算机基础知识做网页,专业知识—计算机基础知识之网页制作 .doc

    网页的概念 网页是构成网站的基本元素,是承载各种网站应用的平台.网页是一个文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一"页",是超文本标记语言格式(标准通用标记语 ...

  9. 计算机网页设计学什么软件,想学网页制作,要在电脑中装什么软件啊,哪儿有学习网页制作的知识...

    装dreamveawerMX下载地址:如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图 ...

最新文章

  1. PAT甲级1136 A Delayed Palindrome :[C++题解]回文串和高精度并输出过程
  2. 10 迭代器与生成器
  3. ITK:将BinaryMorphologicalClosingFilter应用于给定LabelMap的一个LabelObject
  4. ORA-27041: unable to open file--恢复被rm意外删除数据文件
  5. KMPEXKMP学习笔记
  6. 本地CDI限定词:@Any和@Default
  7. MySQL主从数据库配置
  8. 键盘显示影响布局的解决方法
  9. MySQL中整型和字符串类型指定长度的含义
  10. 设置最小值_WELSIM中设置有限元计算结果的最大最小值
  11. Photoshop cc2015基础课笔记
  12. 单片机编程软件很简单(24),keil单片机编程软件仿真、调试技巧+常见错误
  13. WIN10的永久杜比音效的安装(2021)
  14. 网易云音乐(纯CSS实战)
  15. 计算机控制面板属性在哪里打开,win7如何打开系统属性面板|win7打开系统属性面板的方法...
  16. win7 android studio 升级HAXM后无法启动安卓模拟器
  17. 喷淋系统在安装算量软件中如何计算工程量?
  18. R 数据四舍五入函数教程
  19. 2019年1月2日申请美国F1学生签证记录
  20. 个人收集的一些前端的网站

热门文章

  1. 通过构建城市来解释HTML,CSS和JavaScript之间的关系
  2. Hadoop集群的基本操作(一:HDFS操作及MapReduce程序练习)
  3. 弄懂“进程”(下):进程的控制、同步和通信
  4. 安卓环境搭建 unable to access Android SDK add-on list解决方案
  5. 软件测试培训分享:做软件测试需要掌握数据库的知识吗?
  6. 学Java需要用到的软件快收藏!
  7. 远程连接windows出现身份验证错误,提示由于CredSSP加密Oracle修正解决方案
  8. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
  9. python自定义库文件路径
  10. 20135306黄韧 信息安全系统设计基础期中学习总结