Introduction to the HTML document mode,

Introduction to the HTML document mode,

I don't know if you think about it when writing HTML code. <! DOCTYPE html> or this long string cannot be viewed <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> code, what it is to do, why is there such a sentence, what is the role of this sentence? Is it related to other HTML code? I will not tell you back when I often see questions about this knowledge point in front-end interview questions. However, we tend to love the pursuit of high page effects but ignore the most basic document mode, no command in document mode, how can we get the page effect on the tall !! Let's look for the answer from this summary!

 

Document mode:

This concept is implemented by switching the doctype. The final two rendering modes are:Hybrid mode(Quirks mode) andStandard Mode(Standards mode ). The difference between the two modes is that, working in different rendering engine environments, the mixed mode will make IE behavior the same as (including non-standard features) IE5, the standard mode makes IE behavior closer to standard behavior. These two modes mainly affect the rendering of css content. In some cases, JavaScript interpretation is also executed (which will be detailed later ). Later, IE proposed anotherStandard Mode(Almost standards mode), many browser features in this mode are compliant with the standard, but not all of them, the non-standard content is reflected in the processing of image gaps (the most obvious problem is when images are used in the table ). The standard mode is very similar to the quasi-standard mode, and the document mode is not found to be different. Here, the standard mode refers to other modes except the hybrid mode.

 

Definition and usage of DOCTYPE:

You can determine the mode in which the browser works.

 

DTD (document type definition ):

The DTD standard can be understood as a syntax that specifies the tag nesting rules so that the Display Effect of HTML or XML is not messy. Different DTD files describe different standard DTD.

 

Details:

If no document type declaration is found at the beginning of the document, all browsers enable the hybrid mode by default. Different browsers have very different behaviors in this mode. If some hack technology is not used, there is no consistency in cross-browser behavior.

(1). hybrid mode: No document type definition is referenced, which has a great impact on document rendering.
(2). Standard mode: You can enable it using any of the following document types, and use strict documents for triggering.

// Html
This DTD contains all HTML elements and attributes, but does not contain explicit and discarded elements (such as font). Framesets is not allowed. <! -- Strict HTML 4.01 type --> <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <! -- HTML5 --> <! DOCTYPE html> // xhtml
This DTD contains all HTML elements and attributes, but does not contain explicit and discarded elements (such as font). Framesets is not allowed ). Tags must be written in the correct XML format
<! -- XHTML 1.0 strict -->
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(3). Quasi-standard mode: triggered by transitional or frameset documents.

// Html
This DTD contains all HTML elements and attributes, including explicit and discarded elements (such as font), and does not allow Framesets ). <! -- HTML 4.01 transition type --> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
This DTD contains all HTML elements and attributes, including explicit and discarded elements (such as font), but allows the framework set content. <! -- HTML 4.01 framework type --> <! Doctype html public "-// W3C // dtd html 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> // xhtml
This DTD contains all HTML elements and attributes, including explicit and discarded elements (such as font). Framesets is not allowed and tags must be written in XML in the correct format. <! -- XHTML 1.0 transition type --> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This DTD contains all HTML elements and attributes, including explicit and obsolete elements (such as font), allowing the content of the framework set. <! -- XHTML 1.0 framework type --> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

For all HTML5/HTML 4.01/XHTML elements and what document types (DTD) They will appear, refer to HTML elements and valid DTD.
Using a transitional DTD allows us to use the identifier, element, and attribute of the presentation layer (the tags that are purely used to control the presentation, such as the table used for typographical layout and the background color identifier ), it is also easier to pass W3C code verification. However, HTML5 emphasizes that HTML identifiers are used to represent the structure, and css is used to implement the representation form, that is, the data and the representation are separated, so do not use transition and framework types as far as possible.

 

When the hybrid mode is enabled in the browser:

Css impact

It is mainly for IE browsers, other Chrome, FF and IE high-version browsers can be normally displayed in any mode

Javascript impact

It is not a simple task to determine the size of a window across browsers. Note that the values obtained from the properties described below are integers and are not in units. Even the decimal browsers round the Window Size During computation.
IE9 +, FF, Safari, Opera, and Chrome all provide four attributes for this purpose: innerWidth, innerHeight, outerWidth, and outerHeight.

Although <= IE8 does not obtain the browser window size attribute, you can use DOM to provide information about the visible area of the page: although the browser window size cannot be determined, the page view size can be obtained.
In IE, ff,safari,opera, chrome,document.documentelement.clientwidthand document.doc umentElement. clientHeight Save the page view information. In the standard format, the ffviewer selects document.doc umentElement as the priority, while the document. body is calculated based on the width and height of the body element. In the mixed mode, the values of the document.doc umentElement and document. body of the high-definition ieand chromeare the same, but FF is not normal.

(1) FF44.0.2 browser test: the normal expression of the standard model, the document.bodycalculation value of the mixed model, but the document.doc umentElement calculation is incorrect.

(2) However, in IE6, these attributes must be valid in standard mode. in hybrid mode, the same information must be obtained through document. body. clientWidth and document. body. clientHeight. The IE5 document mode is simulated here. It can be seen that only document. body is available in hybrid mode, and the obtained value is not necessarily correct. In the standard model, the simulation ie7selects document.doc umentELement first, but the obtained value is not necessarily correct. The IE of a higher version is normal.

(3) For Chrome46.0.2490.80 in standard mode, you must first select document.doc umentElement to calculate the view, while document. body. clientWidth and clientHeight are the total width and height of the content contained in the body element by default. Here I set the width of the body to 200px.

In the mixed mode, either the clientWidth and clientHeight attributes in document.doc umentElement or document. body can be used to get the size of the view.

// Obtain the visible width and height of the page. It is backward compatible with function visualViewport () {var visualobj ={}; visualobj. pageWidth = window. innerWidth, visualobj. pageHeight = window. innerHeight; // <= IE8 does not support the preceding two attributes, if (typeof visualobj. pageWidth! = "Number") {if (document. compatMode = "CSS1Compat") {visualobj.pagewidth?#doc umentElement. clientWidth; visualobj.pageHeight=window.doc umentElement. clientHeight;} else {// The Mixed Mode of the compatible three-dimensional browser (because the two attributes of document.doc umentElement in the mixed mode of ffare abnormal, so the document is used in a centralized manner. body) visualobj. pageWidth = window. body. clientWidth; visualobj. pageHeight = window. body. clinetHeight;} return visualobj ;}

 

Reference:

JavaScript Advanced Programming

HTML <! DOCTYPE> label

What is the HTML Version Used for the webpage?

DOCTYPE functions and usage

Influence of Quirks Mode on HTML pages