1、什么是<!DOCTYPE>
<!DOCTYPE html>
<!DOCTYPE>是一个文档声明，它不是HTML标签，而是一条信息，告知浏览器期望的文档类型，帮助浏览器确定其尝试解析和显示的HTML文档类型。必须在HTML文档的第一行、且顶格显示，对大小写不敏感。任何放在DOCTYPE前面的东西，比如批注或者XML声明都会使IE9或更早期的浏览器触发怪异模式。
HTML经历了很多版本，不同版本支持的HTML标签不同 ，文档声明也不相同，如：
<!DOCTYPE html> 是HTML5的的文档声明 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 是HTML4的文档声明
HTML5不需要引入DTD文件，而其他版本的则需要引入DTD。早期版本中之所以要引用DTD是因为其基于SGML，而DTD规定的是标记语言的规则，这样浏览器才能正确呈现内容，但最新的HTML5不基于SGML，所以不需要引用DTD。SGML与HTML是一家，只是它是很早的版本
现在通常说的H5开发实际上是HTML5+CSS3+ES6
2、渲染模式
浏览器渲染模式分为3种：
- 怪异模式(混杂模式 Quirks)
- 严格模式（标准模式 Standards）
- 几乎标准模式
之所以出现不同的渲染模式，主要是由历史原因造成的。在w3c标准出来之前，浏览器对页面的渲染没有统一的规范，不同公司的浏览器的规范不同，所以程序员开发网页要做很多兼容。w3c出来后，为了保证浏览器页面的兼容性，浏览器都保留了旧的渲染方法，于是就出现了混杂模式和标准模式，两种渲染方法共存于一个浏览器中，混杂模式服务于旧的规则，标准模式服务于w3c标准规则
严格模式和怪异模式的区别（以下说的是怪异模式里的行为，标准模式是不允许的）：
- 盒模型的宽高包含内边距padding和边框border
在w3c标准中，如果设置一个元素的宽高，指的是元素内容的宽高，不包含padding和border - 可以设置行内元素的高度
而在标准模式下给 span等行内元素设置width和height都不会生效，而在怪异模式下会生效 - 可以设置百分比的高度
而在标准模式下，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。 - 用margin: 0 auto 设置水平居中在IE下会失效
在标准模式下，使用margin: 0 会使元素水平居中 - 怪异模式下设置图片的padding会失效
- 怪异模式下table的字体属性不能继承上层的设置
- 怪异模式下white-space:pre 会失效
如何区分？
浏览器解析时用严格模式还是怪异模式，与网页中的DTD有关，而HTML5没有DTD，因此也就没有严格模式和怪异模式的区别，HTML5有相对宽松的语法，已经尽可能的实现了向后兼容。
标签：浏览器,模式,DTD,HTML,文档,怪异 From： https://www.cnblogs.com/Luffy-RedRoc/p/17055148.html