HTML的标准模式与怪异模式

HTML 的结构

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body></body>
</html>

上面就是一个完整的html结构，但我们会发现，用vscode自动生成HTML结构的时候，开头总是加上一个<!DDOCTYPE html>标签呢？
首先我们要知道，浏览器分为两种渲染模式，一种是标准模式，一种是怪异模式，使用工具开发html的时候自动生成的都是标准模式。这两种模式就是是通过doctype的定义来区分。如果html中省略了doctype，浏览器会进入到Quirks模式的怪异状态也称之为兼容模式，在这种模式下有些样式，布局会和标准模式存在差异
doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前。HTML5不基于SGML，所以不需要引用DTD。
doctype 最早是xml的概念，在xml中它的定义是通过一种特定的语法，作为一种元数据，来描述xmHTMLl文档中允许出现的元素，以及各元素的组成，规则等

在HTML4中 DOCTYPE有三种模式

严格模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。

过渡模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。

框架模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">。

因为浏览器有容错能力，实际上运用这三种模式并不十分严格,浏览器都能正确解析出用户想要的结果，所以在html5中doctype就简化成了<!DOCTYPE html>。但是为了向后兼容性，可扩展性等事情，html5还定义了其他几种组合:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

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

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

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

<!doctype HTML system "about:legacy-compat">（兼容久远时代的历史遗产而准备的DOCTYPE，about:legacy-compat，注意这段文本是大小写敏感的）

标准模式与怪异模式

标准模式中，网页元素的宽度是由padding、border、width三者的宽度相加决定的；
标准盒模型下盒子的大小 = content + border + padding + margin
在这里插入图片描述

在怪异模式中，width本身就包括了padding和border的宽度。
怪异盒模型下盒子的大小=width（content + border + padding） + margin
在这里插入图片描述

此外，标准模式下块级元素的经典居中方法：设定width,margin:0px auto; 在怪异模式下无法正常工作

在这里插入图片描述