Talking about the HTML document mode

Last Update:2016-03-26 Source: Internet

Author: User

Tags deprecated

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I don't know how much I think about it. Have you ever thought about <! while writing HTML code? DOCTYPE HTML > Or a long list of <! that you can't read. DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > Code, what does it do, why do you have this sentence, what does it do, and does it have anything to do with other HTML code? Boingonium hindering I'm not going to tell you. In the front-end of the interview will often see the question of this knowledge point, and we tend to love the pursuit of high on the page effect but ignored the most basic document mode, no document mode of command, how can get high on the page effect!! Then come and find out from this summary!

Document mode:

This concept is implemented by using the document type DOCTYPE switch, and the final two rendering modes are the promiscuous mode (quirks mode) and the standard (Standards mode). The difference between the two modes is that working in a different version of the rendering engine environment, promiscuous mode will make IE behavior with (including non-standard features) IE5 the same, the standard mode allows IE behavior closer to the standard behavior. These two modes primarily affect the rendering of CSS content and, in some cases, the interpretation of JavaScript (which is explained in more detail later). Then the IE proposed a quasi-standard mode (almost standards mode), this mode of the browser features are a lot of standards, but not necessarily, the non-standard place is reflected in the processing of the picture gap (when using the picture in the table is the most obvious problem). The standard mode is very close to the quasi-standard mode, and there is no difference when detecting document patterns, where reference to standard mode refers to patterns other than promiscuous mode.

Document type DOCTYPE definition and usage:

You can decide which mode the browser works in.

<! The doctype> declaration must be the first line in the HTML document, before the <html> tag.
<! The doctype> declaration is not an HTML tag; it is a directive that instructs the Web browser to write which HTML version of the page to use, tells the browser what document type specification is used to parse the document, and also selects the corresponding document schema for each specification browser.
HTML4.01, <! The doctype> declaration references a DTD because HTML4.01 is based on SGML (standard generic Markup Language, which is the highest level standard for the current hypertext format and is a meta-language that can define markup languages. HTML and XML are derived from it. XML can be thought of as a subset of it, and the advent of XML is to simplify it for more general purposes such as the semantic web, which is an application of HTML. The DTD prescribes the rules of the markup language, allowing the browser's rendering to follow this rule in order to render the content correctly.
However, HTML5 is not SGML-based and therefore does not require a reference DTD.

Syntax for document type DOCTYPE:

Top-level element Availability "registration//organization//Type label definition//Language" "URL"

<! DOCTYPE This is the syntax tag for XML-specified DTD files, like the <link> tags used to link external CSS files in HTML, but <! DOCTYPE how this tag is used is to follow the built-in rules of the XML interpreter (similar to the C language compiler built-in language syntax), and how <link tags are used to follow <! The DOCTYPE referenced by the DTD file to its specified rules, these two are still different, but the role of the label to abide by its superior rules.
HTML Specifies the outermost label of the current document, the top-level element, which is called the root (root) tag in the XML (such as <! DOCTYPE Note SYSTEM "NOTE.DTD" > ), HTML is HTML (such as HTML5 example <! DOCTYPE HTML > ）
The public description specifies that the DTD file is a common file, relative to the private file, that is, the subsequent URL is accessible to anyone, or the system (a DTD file loaded from the local system).
"-//w3c//dtd XHTML 1.0 transitional//en" Specifies the DTD version number used in this HTML file, which is only for HTML. -/+ Specifies whether the organization is registered by ISO, + indicates that the name is registered,-indicates that the organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Association (WWW) are not registered ISO organizations, so the registration entries in HTML are-. The organization refers to that! DOCTYPE declares that the group that references the creation and maintenance of the DTD file is the organization of the Consortium. The DTD is the referenced object type, and XHTML 1.0 represents a public text description, which can be followed by a version number. Transitional indicates that the document type definition is transitional, a total of three types are described below. En indicates that the specified public text language is in English.
URL Specifies the location of the referenced DTD object

DTD (document type definition):

The DTD standard can be interpreted as a syntax that specifies the rules for nesting tags so that HTML or XML is not displayed in a chaotic way. Different DTD files describe different standard DTDs.

Detailed

If the document type declaration is not found at the beginning of the document, all browsers turn on promiscuous mode by default, and different browsers behave differently in this mode, and cross-browser behavior is simply not consistent if some hack technology is not used.

(1). Promiscuous mode: No document type definitions are referenced, and the rendering of the document has a significant impact.
(2). Standard mode: Can be turned on using any of the following document types, using a strict type (strict) document to trigger.

//html
The DTD contains all HTML elements and attributes, but does not contain display and deprecated elements (such as font) and does not allow the frameset (framesets)<!--HTML 4.01 Strict type -<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><!--HTML5 -<!DOCTYPE HTML>//xhtml
The DTD contains all the HTML elements and attributes, but does not contain the display and deprecated elements (such as font) and does not allow the frameset (framesets). tags must be written in well-formed XML
<!--XHTML 1.0 Strict Type- 
<!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 using a transitional (transitional) or frameset (frameset) document.

//html
The DTD contains all the HTML elements and attributes, including the display and deprecated elements (such as font), and does not allow the frameset (framesets). <!--HTML 4.01 Transition Type -<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd ">
The DTD contains all the HTML elements and attributes, including both display and deprecated elements (such as font), but allows the frameset content.<!--HTML 4.01 Frame-set -<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "Http://www.w3.org/TR/html4/frameset.dtd ">//xhtml
The DTD contains all the HTML elements and attributes, including the display and deprecated elements (such as font), does not allow the frameset (framesets), and must be marked with well-formed XML. <!--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 ">
The DTD contains all of the HTML elements and attributes, including both display and deprecated elements, such as font, that allow the frameset content.<!--XHTML 1.0 Framework-Set -<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

Refer to HTML elements and valid DTDs for all html5/html 4.01/xhtml elements and what document types (DTDs) they will appear in.
Using a transitional DTD allows us to use the identity of the presentation layer, elements, attributes (those that are purely used to control the performance of the tag, such as the table used for typesetting, background color identification, etc.), and it is easier to verify through the code. However, HTML5 emphasizes that the HTML identifier is used to represent the structure, using CSS to implement the representation, that is, the data and performance are separated, so try not to use the transition and frame type.

when the browser turns on promiscuous mode :

conditions that affect CSS

Mainly IE browser, other chrome,ff and IE high-version browser in whatever mode can be displayed normally

Box model is the main difference between promiscuous mode and standard mode
<=ie6 the box's padding and border to the box size, which is called the IE box model.
The box size is the content size of the standard case model.
This difference will result in a large difference in all block-level elements when the page is drawn, so the pages in the two different document modes differ greatly.
The vertical alignment that affects the image element is the selection of the baseline in the Line box, and the odd mode of IE will be based on bottom-line, with Base-line as the baseline in standard mode.
Some properties that affect the inheritance of the table element to the font, in IE5 's weird mode, do not follow the element's part of the attribute, especially the Font-size property.
IE5 an inline element in a weird mode can define dimensions
IE standard mode, the overflow value is visible that overflow can be seen, in the strange mode the overflow will be treated as an extension box, the size of the element is determined by its content, overflow will not be clipped, but the parent element will automatically adjust its width to fully fit the content.

Scenarios that affect JavaScript

Determining a window size across browsers is not a simple matter, note that the properties described below are all integers and no units, even if the decimal browser is calculated, it will be rounded.
Ie9+,ff,safari,opera,chrome provides four properties for this: Innerwidth,innerheight,outerwidth,outerheight.

Ie9+,safari,ff:outerwidth,outerheight returns the size of the browser window itself, whether it is accessed from the outermost window object or from a frame. Innerwidth and Innerheight return the respective view Area heights (minus the border width).
Opera:outerwidth,outerheight represents the size of the Page view container. Innerwidth and Innerheight indicate that the page represents the size of the Page view area in the container (minus the border width).
Chrome:javascript elevation says outerwidth and outerheight return the same value as Innerwidth and Innerheight, which is the viewport size, not the browser window size. （？？ Tested and not, the performance is consistent with other browsers are browser window size and viewport area size)

Although <=IE8 does not have the properties of the browser window size, it provides information about the page's visible area through the DOM: Although the browser window itself cannot be determined at all, it can get the page viewport size.
Ie,ff,safari,opera,chrome, Document.documentElement.clientWidth and Document.documentElement.clientHeight save page viewport information. Higher versions of IE and CHROME,FF browsers prefer document.documentelement in standard mode, while Document.body is calculated based on the content width of the BODY element. In promiscuous mode, high-version IE and Chrome's document.documentelement and document.body calculate the same value, but FF is not normal.

(1) FF44.0.2 version Browser quiz: normal mode performance, Document.body calculated value in promiscuous mode is correct, but document.documentelement calculation error.

(2) But in IE6 these attributes must be valid in standard mode, if the same information must be obtained through document.body.clientWidth and document.body.clientHeight in promiscuous mode. This simulates the IE5 document mode, which is visible in promiscuous mode only document.body is available, and the obtained value is not necessarily correct. Analog IE7 is preferred for document.documentelement in standard mode, but the obtained value is not necessarily correct. The higher version of IE behaves normally.

(3) Chrome46.0.2490.80 in standard mode, To prioritize the document.documentelement calculation viewport, while Document.body.clientWidth and clientheight default to the total width of the content contained in the BODY element, here I set the body width to 200px.

In promiscuous mode, the viewport size can be obtained from both the ClientWidth and ClientHeight properties in Document.documentelement or Document.body.

//get page Visible viewport width high, backwards compatiblefunctionVisualviewport () {varvisualobj={}; Visualobj.pagewidth=window.innerwidth, Visualobj.pageheight=Window.innerheight; //<=IE8 does not support both of the above properties  if(typeofvisualobj.pagewidth!= "Number"){        if(document.compatmode== "Css1compat") {Visualobj.pagewidth=Window.documentElement.clientWidth; Visualobj.pageheight=Window.documentElement.clientHeight; }Else{            //compatible with the three major browsers promiscuous mode (because FF in promiscuous mode document.documentelement two properties behave abnormally, so focus on document.body)Visualobj.pagewidth=Window.body.clientWidth; Visualobj.pageheight=Window.body.clinetHeight; }    }     returnVisualobj; }

Reference :

JavaScript Advanced Programming

html<! Doctype> Label

How do you see which HTML version the page was written in?

DOCTYPE Effect and usage explanation

The effect of Quirks mode on HTML pages

Talking about the HTML document mode

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More