什么是文档模式

2020-10-16 09:54发布

站内文章 / Web前端
802 0 0

什么是文档模式

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> 
12345678910

准标准模式
而对于准标准模式，则可以通过使用过渡型（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

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

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。