美文网首页
Doctype作用?标准模式与兼容模式各有什么区别?

Doctype作用?标准模式与兼容模式各有什么区别?

作者: 幸福我说了算 | 来源:发表于2018-06-05 21:59 被阅读0次

Doctype的作用?标准模式与兼容模式各有什么区别? 

Doctype是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。文档类型有3种:Strict(严格)、Transitional(过渡)以及Frameset(基于框架)。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单的说,就是尽可能的能显示东西给用户看。

具体的说二者的不同在于:

1.width不同

在严格模式中 :width是内容宽度 ,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在兼容模式中 :width则是元素的实际宽度 ,内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2.兼容模式下可设置百分比的高度和行内元素的高宽

在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在兼容模式下,则会生效。

在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决)

body{text-align:center};#content{text-align:left}

4.兼容模式下Table中的字体属性不能继承上层的设置,white-space:pre会失效,设置图片的padding会失效

HTML5 为什么只需要<!DOCTYPE HTML>呢?

DTD的是W3C所发布的一个文档类型定义,简单的说,就是告诉浏览器你的这个HTML,是根据那个标准写的,解析的时候用哪个标准解析。

HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

相关文章

网友评论

      本文标题:Doctype作用?标准模式与兼容模式各有什么区别?

      本文链接:https://www.haomeiwen.com/subject/xcomsftx.html