关于DOCTYPE元素

写了好久的前端页面了，突然发现我们容易忽略很多东西，比如说我们在写HTML时候，我用的是vscode，直接就会输入一个“！”，再直接摁一个tab，编辑器就自动为我们生成了基本的HTML骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

使用起来非常方便，一直都忽略了最上面的<!DOCTYPE html>（主要说HTML），关于这个w3school给出的定义是“<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。”也就是说<!DOCTYPE html>元素告诉浏览器两件事：

告诉浏览器它处理的是HTML文档
用来标记文档内容的HTML版本
我们可以不写版本号，因为浏览器可以自动检测出这里所使用的是HTML5，因为这个元素在HTML5之前的版本中有差别。在HTML4.01的版本规定了三种文档类型：
HTMLStrict DTD
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

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

HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果你使用了不支持层叠样式表（CSS）的浏览器以至于不得不使用 HTML 的呈现特性时，就用这种声明方式：

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

Frameset DTD
　　 Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

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

那么DTD是什么呢？
Document Type Definition，中文翻译为：文档类型定义。DTD可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。因为早期的版本基于SGML，所以需要套用SGML的解析规则。DTD的作用在于定义SGML文档的文档类型以便于浏览器解析，HTML5不基于SGML，所以不用指定DTD。
如果我们没有写<!DOCTYPE html>，浏览器将会以他们的怪异模式去渲染页面，于是在不同的浏览器就会显示出不同的样式