什么是文档模式

最新推荐文章于 2023-01-10 17:43:35 发布

cake_eat

最新推荐文章于 2023-01-10 17:43:35 发布

阅读量3.3k

点赞数

分类专栏： JavaScript 文章标签： html css js

本文链接：https://blog.csdn.net/cake_eat/article/details/108619710

版权

JavaScript 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

什么是文档模式

IE5.5引入了文档模式的概念，通过使用DOCTYPE实现模式切换，它的主要作用是告诉浏览器以哪种模式呈现，如何解析文档，也就是说两种模式主要影响CSS内容的呈现，某些情况下也会影响JavaScript的执行。

文档模式的类型

混杂模式：向后兼容的解析方式

标准模式：要求严格的DTD，根据web标准去解析页面的模式。

准标准模式：准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。

两种模式的区别

盒模型的解析：
混杂模式盒模型的宽高=内容的宽高；
标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。

图片的布局：
当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

两种模式开启方式

混杂模式
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。

标准模式
对于标准模式，可以通过使用下面任何一种文档类型来开启：

<!-- HTML 4.01 严格型 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
 
<!-- XHTML 1.0 严格型 --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<!-- HTML 5 --> 
<!DOCTYPE html>

准标准模式
而对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，如下所示：

<!-- HTML 4.01 过渡型 --> 
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd"> 
 
<!-- HTML 4.01 框架集型 --> 
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Frameset//EN" 
 "http://www.w3.org/TR/html4/frameset.dtd"> 
 
<!-- XHTML 1.0 过渡型 -->
 <!DOCTYPE html PUBLIC 
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<!-- XHTML 1.0 框架集型 --> 
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

cake_eat

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
什么是文档模式

什么是文档模式IE5.5引入了文档模式的概念，通过使用DOCTYPE实现模式切换，它的主要作用是告诉浏览器以哪种模式呈现，如何解析文档，也就是说两种模式主要影响CSS内容的呈现，某些情况下也会影响JavaScript的执行。文档模式的类型混杂模式：向后兼容的解析方式标准模式：要求严格的DTD，根据web标准去解析页面的模式。准标准模式：准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。两种模式的区别盒模型的解析：混杂模式盒模型的宽高=内容的宽高；标准模式盒模型的宽高=内容的宽高+p
复制链接

扫一扫