doctype的作用与标准模式和兼容模式的区别

程序员文章站 2022-04-07 09:06:53

...

DOCTYPE的作用以及标准模式和兼容模式的区别

<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。HTML5中不区分大小写
<!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
HTML5不基于SGML，所以不用指定DTD

标准模式和兼容模式的区别：标准模式的排版和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

具体区别：
1.盒模型
在严格模式中：width是内容宽度，元素真正的宽度 = width;
在兼容模式中：width则是=width+padding+border
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会失效

<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。HTML5中不区分大小写
<!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
HTML5不基于SGML，所以不用指定DTD

以上就是doctype的作用与标准模式和兼容模式的区别的详细内容，更多请关注其它相关文章！

相关标签： doctype 标准模式兼容模式

上一篇： php实现文件压缩

下一篇：发两个小东西，ASP/PHP 学习工具。用JavaScript写的_javascript技巧

doctype的作用与标准模式和兼容模式的区别

DOCTYPE的作用以及标准模式和兼容模式的区别

Doctype的作用?严格模式与混合模式,如何触发者这两种模式,区分它们有何意义?

Java 单例模式设计饿汉式与懒汉式的区别与作用

Doctype的作用?严格模式与混合模式,如何触发者这两种模式,区分它们有何意义?

MVC模式中，M和C的作用到底有什么区别？

DOCTYPE作用以及标准模式和兼容模式的区别详细介绍

Vue进阶（环境变量和模式切换）（npm run dev与npm run serve的区别）

Java 单例模式设计饿汉式与懒汉式的区别与作用