前言
对于DOCTYPE这个词，相信大家都不陌生，现在我们编写html文件的时候，头部第一句就是这个声明，但是相信很多人都不知道这个是干什么用的吧，看完这篇文章让自己更精进一步！
来源
在很久很久以前,那时候HTML和CSS还没有一个统一的标准,出现的现象就是,我用我的标准,你用你的标准,这导致了各家浏览器对于解析HTML和CSS的方式有很大的差别。
而当标准制定出来之后,浏览器不仅要按照新的标准去支持HTML和CSS,还要对老旧的网页进行兼容,而这一前一后的两种支持方式,就是我们所称的标准模式(StandardMode,)和怪异模式(QuirksMode)。
对于现代规范的网页,浏览器一般用标准模式去解析和渲染,而对于古老的网页,浏览器就会使用怪异模式去渲染.而在ie的开发者工具中,你可以自定义改变文档模式,这在其他浏览器中是不行的.
什么是怪异模式与标准模式
浏览器一般都有两种解析渲染模式：标准模式和怪异模式。
在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；
而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。
浏览器解析渲染时采取什么模式是由什么决定呢？答案是DOCTYPE声明
完整的html结构：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body></body>
</html>
上面就是一个完整的html结构，但我们会发现，用vscode自动生成HTML结构的时候，开头总是加上一个<!DOCTYPE html>标签呢？
使用工具开发html的时候自动生成的都是标准模式。这两种模式就是是通过DOCTYPE 的定义来区分。 如果html中省略了doctype，浏览器会进入到Quirks模式的怪异状态也称之为怪异模式，在这种模式下有些样式，布局会和标准模式存在差异
DOCTYPE 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前。HTML5不基于SGML，所以不需要引用DTD。
标准模式与怪异模式的区别
- 标准模式盒模型为W3C标准盒模型，怪异模式使用IE盒模型
盒模型：
IE下标准模式为：content+padding+border+margin。
怪异模式下为：content+margin(padding,border包含在content宽高中)
- font属性继承
CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。
-
行内元素的尺寸
在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。
- 行内元素和table-cell元素vertical-align属性
对于inline内联元素和table-cell元素，标准模式下vertical-align默认为baseline（基线对齐），在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom
-
内部元素溢出处理
在标准模式下,溢出的部分会超出盒子本身,在盒子外部继续显示；而在怪异模式下,溢出的部分会扩展盒子本身,即外部盒子的大小不一定由css样式决定,会根据内部内容的大小自动调整.
-
margin:0 auto,在标准模式下会水平居中，怪异模式下不会。
- CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。当一个元素使用百分比高度时，标准模式下，高度取决于自身内容变化（若无内容，元素百分比高度或宽度为0），怪异模式下，百分比高度被正确应用（即父元素高度或宽度auto的情况下，依据父元素计算百分比）。