HTML standard mode and weird mode

HTML structure

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

The above is a complete HTML structure, but we will find that when using vscode to automatically generate HTML structure, a <!DDOCTYPE html>tag is always added at the beginning ?
First of all, we need to know that the browser is divided into two rendering modes, one is the standard mode, and the other is the weird mode. When using tools to develop html, they are automatically generated in the standard mode. These two modes are distinguished by the definition of doctype. If doctype is omitted from html, the browser will enter the weird state of Quirks mode, also called compatibility mode. In this mode, there are some styles and the layout will be different from the standard mode.
Doctype is a standard general markup language document type. The purpose of the declaration is to tell the standard universal markup language parser what kind of document type definition (DTD) to use to parse the document. The <!DOCTYPE> declaration must be the first line of the HTML document, before the html tag. HTML5 is not based on SGML, so there is no need to quote DTD.
Doctype is the earliest concept of xml. In xml, its definition is through a specific grammar, as a kind of metadata, to describe the elements that are allowed in the xmHTMLl document, as well as the composition of each element, rules, etc.

DOCTYPE has three modes in HTML4

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

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

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

Because the browser is fault-tolerant, in fact, the use of these three modes is not very strict, and the browser can correctly parse the result that the user wants, so the doctype in html5 is simplified <!DOCTYPE html>. But for backward compatibility, scalability and other things, html5 also defines several other combinations:

<!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，注意这段文本是大小写敏感的）

Standard Mode and Weird Mode

In standard mode, the width of web page elements is determined by the sum of the widths of padding, border, and width;
标准盒模型下盒子的大小 = content + border + padding + margin
Insert picture description here

In the weird mode, width itself includes the width of padding and border.
怪异盒模型下盒子的大小=width（content + border + padding） + margin
Insert picture description here

In addition, the classic centering method of block-level elements in standard mode: set width, margin:0px auto; it does not work properly in weird mode

Insert picture description here