DOCTYPE解读-CSDN博客

本文链接：https://blog.csdn.net/weixin_43307658/article/details/88845655

DOCTYPE解读

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

DOCTYPE的作用？标准模式和兼容模式各有什么区别？为什么html5只需要写<!doctype html>

參考文档：https://www.cnblogs.com/wuqiutong/p/5986191.html

标准模式（standards）：又称严格模式，指浏览器按照 W3C 标准解析代码，排版和 JS 的运行都是以浏览器支持的最高标准运行
兼容模式（quirks）：又称怪异模式或者混杂模式，指浏览器以自己的方式解析代码
区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关
1. 标准模式呈现：有 URL 的过渡 DTD
2. 混杂模式呈现：
  1. 没有 URL 的过渡 DTD
  2. 没有DTD或者格式不正确
3. HTML5中不是基于SGML的，没有DTD，没有标准和兼容模式之分，所以只需要写<!doctype html>

具体到两种模式解析上的不同点：

盒模型的高宽包含内边距padding和边框border，在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirks模式下的解决办法，用text-align属性:body{text-align:center};#content{text-align:left}
quirks模式下设置图片的padding会失效
quirks模式下Table中的字体属性不能继承上层的设置
quirks模式下white-space:pre会失效

我们去编译器里快速生成这些各种类型的声明来看看：

1. HTML5（一种）：

1	<!DOCTYPE html>

2. HTML 4.01（三种）：

严格模式包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；过渡模式包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；框架模式等同于过渡模式，但允许框架集内容

HTML 4.01 Strict：

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional ：

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset ：

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

3、XHTML 1.0(四种) ：

前三种模式同上，XHML 必须以格式正确的 XML 来编写标记

XHTML 1.0 Strict ：

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional ：

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset：

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">