Introduction to the HTML document mode-venoral

About the HTML document mode-venoral: I don't know if you have thought about how to write HTML code.Or this long string cannot be viewed.The code, what does it do, why does it have this sentence, what role does it play, and 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.

1. The declaration must be the first line of the HTML document, located inBefore the tag.
2. The Declaration is not an HTML Tag; it indicates the instructions of the web browser on which HTML version the page is used for writing, telling the browser parser what document type specifications are used to parse this document, for each standard browser, the corresponding document mode is also selected.
3. HTML4.01,The Declaration references DTD, because HTML4.01 is based on SGML (standard common markup language, which is currently the highest level standard for commonly used hypertext formats, and is a metalanguage that can define Markup languages. HTML and XML are derived from it. XML can be considered as a subset of it. XML appears to simplify it for more general purposes, such as semantic web, and HTML is an application of it ). DTD specifies the markup language rules, so that the browser rendering can follow this rule to correctly render the content.
   
   However, HTML5 is not based on SGML and therefore does not need to reference DTD.

Syntax of DOCTYPE:

Top-level element availability "Registration/organization/type label definition/language" "URL"

1. The labels are the same,
2. Html specifies the outermost tag of the current document, top-level element. The xml file is called the root tag (for example), Html is html (for example, html5). You can get it by using document.doc type. name.
3. PUBLIC indicates that the specified DTD file is a PUBLIC file. relative to a private file, that is, the following url can be accessed by anyone, it can also be a SYSTEM (DTD file loaded from the local SYSTEM ).
4. "-// W3C // dtd xhtml 1.0 Transitional // EN" specifies the DTD version used by the html file. This part is only available for html. -// + Specifies whether the organization is registered by the ISO. + indicates that the name has been registered, and-indicates that the organization name has not been registered. The Internet Engineering Task Group (IETF) and the World Wide Web Association (W3C) are not registered ISO organizations, so the registration item in html is -. Organization refers to this! DOCTYPE declares that the W3C organization creates and maintains the referenced DTD file. DTD is the referenced object type. XHTML 1.0 indicates the public text description, which can be followed by a version number. Transitional indicates that the document type definition is Transitional. Three types are described below. EN indicates that the specified public text language is English. Document.doc type. publicId can be obtained.
5. The URL specifies the location of the referenced DTD object. You can obtain the document.doc type. systemId. A dtd document contains the rules defined by elements, the rules defined by the relationship between elements, the available attributes of elements, and the entity and symbol rules that can be used.

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. DTD is actually a constraint rule that specifies which elements are valid in the document and the rules used between elements.

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)
 
 // 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

 

(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 ).
 
This DTD contains all HTML elements and attributes, including explicit and discarded elements (such as font), but allows the framework set content.
 // 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.
 
This DTD contains all HTML elements and attributes, including explicit and obsolete elements (such as font), allowing the content of the framework set.
 

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

1. The box model is the main difference between the hybrid mode and the standard mode.
   <= IE6 calculates the padding and border of the box into the box size, which is called the IE box model.
   In the W3C standard box model, the box size is the content size.
   This difference will lead to a big difference in all block-level elements during page painting, so the pages in two different document modes are also very different.
2. The vertical alignment of image elements is the baseline selection in the row box. The weird IE mode uses Bottom-line as the baseline and the base-line as the baseline in standard mode.
3. It affects some attributes of the font inherited by the table element. In IE5's weird mode, some attributes of the element are not inherited, especially the font-size attribute.
4. Dimensions can be defined for inline elements in IE5 weird Mode
5. In standard IE mode, the value of overflow is visible, that is, overflow is visible. In Weird mode, this overflow is treated as an extended box. The element size is determined by its content, and overflow is not cropped, instead, the parent element automatically adjusts its width and height to fully adapt to the contained content.

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.

1. IE9 +, Safari, FF: outerWidth, outerHeight return the size of the browser window (whether it is accessed from the window object on the outermost layer or from a framework ). InnerWidth and innerHeight return the height of the respective view area (minus the Border width ).
2. Opera: outerWidth, outerHeight indicates the size of the page view container. InnerWidth and innerHeight indicate the page view area size (minus the Border width) in the container ).
3. Chrome: In JavaScript elevation, outerWidth and outerHeight are the same as innerWidth and innerHeight, that is, the size of the browser window rather than the size of the browser window. (?? Not tested, and the performance is the same as that of other browsers. The size of the browser window and the size of the viewport Area)　　　　　　　　　　　　　　　　
   　

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

HTMLTag

What is the HTML Version Used for the webpage?

DOCTYPE functions and usage

Influence of Quirks Mode on HTML pages

DTD details