Imagination DOCTYPE mode under the moonlight serenade_html/css_WEB-ITnose

Introduction

Guess what I’m doing now? For the sake of the clear sky, let me tell you, I am sitting next to the computer and listening to the midnight serenade, and then my thoughts start to fly. At this time, I feel very comfortable. Although the melody of the music is sad, but It seems to touch the softness of the heart, and the heartstrings move. It is so beautiful. Under this beautiful music, I thought of doctype, because it also makes me sad, makes me move my heart, and also use my brain.

Text

What is DOCTYPE?

Introduction on Baidu Encyclopedia:

Document type tag, which is a specific Instructions that link a standard universal markup language or XML document (web pages are one of them) to a document type definition (DTD). This tag should appear on the first line of the file. The format in which it appears in the document is as follows:

-Public Identifier-->

"Quoted String" is called It is a public identifier that points to a specific document type definition (DTD) through an industry-agreed public identifier name (usually a related standard). (Foreign language original text: A DOCTYPE is a SGML document type declaration. Its purpose is to tell an SGML parser what DTD it should use to parse the document.)

The full format of the tag is , see syntax !DOCTYPE. Only when a correct document type is determined, tags and cascading style sheets in Hypertext Markup Language or Extensible Hypertext Markup Language can take effect, even affecting JavaScript scripts.

PUBLIC "-//IETF//DTD HTML//en"> The public identifier is called: "-//IETF//DTD HTML//en".

World Wide Web Consortium:

Most World Wide Web browsers don't actually use a standard universal markup language parser, many of which are based on !DOCTYPE declarations for documents, displaying files that are different or lacking .

The function of

under Hypertext Markup Language is to tell the browser which hypertext or extensible hypertext specification is used in the current document.

Hypertext 4.01 specifies three document types: strict, transitional, and frameset.

Hypertext strict document type definition:

Use this type if you need clean markup without clutter in the presentation layer. Please use with Cascading Style Sheets:

(The public identifier is called: "-//W3C//DTD HTML 4.01//en".)

h3> PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">

Hypertext Transition

Document Type Definition

:

can contain rendering attributes and elements expected by the World Wide Web Consortium to be moved into stylesheets. If your readers are using browsers that do not support Cascading Style Sheets and you have to use the rendering features of Hypertext Markup Language, use this type:

(the public identifier is called: "-/ /W3C//DTD HTML 4.01 Transitional//en".)

strong> PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en"

"http://www.w3.org/TR/html4/loose.dtd">

Hypertext Frameset

Document Type Definition

:

The frameset document type definition should be used for documents with frames. Equivalent to the transitional document type definition:

, except that the frameset element replaces the body element. (The public identifier is called: "-//W3C//DTD HTML 4.01 Frameset//en".) /strong> PUBLIC "-//W3C//DTD HTML 4.01 Frameset//en"

"http://www.w3. org/TR/html4 /frameset.dtd"

Extensible Hypertext Markup Language

World Wide Web Consortium:

Extensible Hypertext Markup Language 1.0 specifies three document types : strict, transitional, and frameset.

Extensible Hypertext Markup Language

Strict Document Type Definition

:

(Public Identity The symbol is called: "-//W3C//DTD XHTML 1.0 Strict//en" ) /strong> PUBLIC "-//W3C//DTD XHTML 1.0 Strict. //en" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Extensible Hypertext Markup Language

Transition

Document Type Definition:

Can contain rendering attributes and elements that the W3C expects to be moved into the style sheet. If your readers are using browsers that do not support Cascading Style Sheets (CSS) and you have to use the rendering features of XHTML, use this type:

(the public identifier is called: "-/ /W3C//DTD XHTML 1.0 Transitional//en".)

/p>

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//en"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Yes Extended Hypertext Markup Language Frameset Document Type Definition :

Use this document type definition when you wish to use a framework!

(The public identifier is called: "-//W3C//DTD XHTML 1.0 Frameset//en".)

/p>

PUBLIC "- //W3C//DTD XHTML 1.0 Frameset//en"

"http://www.w3. org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Math Markup Language

World Wide Web Consortium:

The declarations in the following examples all specify compliance with the "MathML" Mathematical Markup Language 2.0 document type definition.

(Public identifiers are collectively called: "-//W3C//DTD MathML 2.0//en".)

/p>

PUBLIC "-/ /W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd">

The second method will Sets the MATHML namespace prefix to MML.

/p>

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org /Math/DTD/mathml2/mathml2.dtd"

[

]

>

The third one appends the check document type definition (DTD)

/p>

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"

[

]

>

Symbol Interchange File Format (Music)

The public identifier is called: "-//IPTC- NAA//DTD NITF 2.0//en"

/p>

PUBLIC "-//IPTC-NAA//DTD NITF 2.0//en" >

Translation Memory Exchange

The public identifier is called: "-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en"

/p>

PUBLIC "-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en">

Electronic Calendar

The public identifier is called: "-//IETF //DTD iCalendar//en"

/p>

PUBLIC "-//IETF//DTD iCalendar//en">

Wireless Markup Language

The public identifier is called: "-//WAPFORUM//DTD WML 1.1//en"

/p>

PUBLIC "-//WAPFORUM//DTD WML 1.1//en">

Music Extensible Markup Language

Version 3.0:

score- partwise

PUBLIC　"-//Recordare//DTD MusicXML 3.0 Partwise//en">

The above DOCTYPE contains 6 parts:

1. String "
2. Root element universal identifier "HTML"
3. String "PUBLIC"
4. Public identifier enclosed in quotes (publicId) "-//W3C//DTD HTML 4.01//en"
5. System identifier (systemId) enclosed in quotes "http://www.w3.org/TR/html4/strict .dtd”
6. String “>”

The root element universal identifier, public identifier, and system identifier can be obtained by calling the DOM interface through scripts, corresponding to document respectively. .doctype.name, document.doctype.publicId, document.doctype.systemId

Finally, I checked on Taobao, JD.com, Tmall, and The blog garden uses , which is the HTML5 standard web page declaration. The original was a long string of characters, but now it is in this concise form. All mainstream browsers that support the HTML5 standard recognize this declaration. Indicates that the web page uses html5, and the doctype in HTML 4.01 needs to reference the DTD, because HTML 4.01 is based on SGML, and HTML5 is not based on SGML, so there is no need to reference the DTD, but doctype is needed to standardize the behavior of the browser. I usually use . On the one hand, it is concise and will not make mistakes. On the other hand, it is recognized by standard mainstream browsers, so I can write with confidence.

DTD: Document Type Definition is a set of grammatical rules about tags. It is part of the Standard Common Markup Language and Extensible Markup Language version 1.0 specifications and is a validation mechanism for documents. Document type definition is an effective method to ensure that standard universal markup language and extensible markup language documents are in the correct format. You can compare the document and the document type definition file to see whether the document conforms to the specification and whether the elements and tags are used correctly. For specific explanation, please refer to: http://baike.baidu.com/link?url=bA_s20lIL9cApp0e-fGvm2bbCvhblqjc7_1BF1gdMMdjNREQr6VZOEcylzuG5eMaJF_-olsL6ZWWQ4QKgXUwIq

SGML: Standard General Markup Language (hereinafter referred to as "General Markup"), is a definition electronic An international standard language for document structure and description of its content; Universal Markup provides an extremely powerful tool for syntax markup and is extremely extensible, making it very useful in data classification and indexing; it is the basis for all electronic document markup languages. Origins: "Universal slogans" existed long before the invention of the World Wide Web. For specific explanation, please refer to: http://baike.baidu.com/link?url=dTCobBuXTUw0jTNi4dpsIOU2Dt0owC8WnazmV1gsgQXOegyPSDZAMZ95BN81ckCyspnO5TTgrX-hm3_ktPagruZzvIfqBISloJIXiFgJcs_euma9v9I5iABX7g0Zyxpo3zJAz bDPCoH7zBJFg13TKa

History of the browser’s two document modes:

With the development of IE, its rendering The engine (early MSHTML.dll, later named Trident) was constantly adding new features and fixing some bugs from earlier versions. Before the official release of IE6 in 2001, the two browsers on the market at that time were IE and Netscape's Navigator. IE had a large user base, so most pages were designed for IE, but IE's rendering engine However, it did not follow the W3C specifications. At that time, Microsoft had realized the importance of the W3C specifications, so when IE developed to IE6, the rendering engine (MSHTML.dll) made an important change and changed its original non-compliance with the W3C specifications. The box mode drawing method of the box model has been changed to be consistent with the W3C standard. Due to this major change, the HTML pages originally designed for older versions of IE cannot be displayed correctly, so when IE6 was released, it came with a switch back to IE5 page rendering. Mode function, Quirks Mode was proposed for the first time in this function. Versions after IE6.0 have two performance modes built into the browser: Standards Mode (standard mode or Strict Mode) and Quirks mode (weird mode or Compatibility Mode). In standard mode, the browser displays the page according to the specifications set by W3C; in weird mode, the page will be displayed in the same way as IE5 or even IE4 to maintain the normal display of previous web pages.

How does the browser determine the document mode?

When the browser is preparing to parse and draw a page, how does it determine the document mode? In fact, the browser will check two things before rendering the page, one is whether the page has doctype information, and the other is whether the page has x-ua-compatible information (we will not discuss it for now, let’s discuss doctype first).

Doctype detection

For an HTML page, the declaration is located at the forefront of it , before the tag, this can tell the browser which HTML specification to use, and the browser will also select the corresponding document mode for each specification. The document modes corresponding to the three most common doctype information are as follows.

When the doctype information is as follows, it indicates that the page complies with the HTML5 specification. The browser will select Standards Mode. This doctype is the most recommended one. We usually design pages This doctype should be added.

　

When the doctype is as follows, the browser will also select Standards Mode. Although there are some differences from the first doctype, it can be considered almost the same.

　

When doctype is missing, the browser will choose Quirks Mode, which is not recommended. We should try to avoid Quirks Mode, which is very disadvantageous for a web application.

Differences between pages in Standards Mode and Quirks Mode

Due to historical reasons, early IE browsers (before IE 6) calculated the padding and border of the box. In box dimensions, this model is called the IE box model.

In the IE box model,

box width = content width padding left padding right border left border right

box height = content height padding top padding bottom border top border bottom

In the W3C standard box model, the size of the box is the size of the content.

box width = content width,

box height = content height

As shown in the following code:

The total width of the box under IE5.5 is 100px.

The total width of the box on Google is 160px

It can be seen that there will be a big difference between the two document modes Quirks and Standards when rendering the page. In particular, the interpretation of the box model causes a lot of trouble. These differences are mainly due to the historical development process of rendering engines and Due to differences in W3C standards.

So the declaration of doctype is particularly important. If doctype is not declared, weird mode will be enabled!

The following code effect:

IE5.5/IE6/IE7/IE8 rendering is as follows:

It will be in Quirks Mode. What is the effect of other mainstream standard browsers? Since other mainstream standard browsers all use W3C standards, the results are as follows:

(test results of Google, 360, safari, and opera respectively)

If a doctype statement is added, what will be the effect of IE5.5/IE6/IE7/IE8?

IE5.5 or

And IE6/IE7/IE8 are:

Follow The box model of other browsers that adopt W3C standards is the same.

Now everyone has ignored the existence of IE5. In order to achieve better compatibility, the doctype statement must not be used by default. And you can use .

The box-sizing attribute of CSS3 (because it is also related to size, summarize it together)

Definition and usage

The box-sizing attribute allows you to define a match in a specific way Region-specific elements.

For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This causes the browser to render a box with the specified width and height, and put the borders and padding into the box.

默认值： 继承性： 版本： JavaScript 语法：

content-box

no

CSS3

object.style.boxSizing="border-box"

Syntax

box-sizing: content-box|border-box|inherit;

value

description

content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

content-box

This is the width and height behavior specified by CSS2.1.

The width and height are applied separately to the element's content box. Draw the element's padding and borders outside of its width and height.

border-box

The width and height set for the element determine the border box of the element .

That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.

inherit

Specifies that the value of the box-sizing attribute should be inherited from the parent element.

The code is as follows:

As shown in the above code, it can be seen that when box-sizing: border-box;

The width and height set for the element determine the element's border box.

That is, any padding and borders specified for the element will be drawn within the set width and height.

The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.

That is, the content is only 130px, width: 150px. Within the set 150px, minus the left and right borders, the content value is 130px.

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

The above two lines The code is compatible with Firefox and Safari, and opera was tested at the same time. The renderings are as follows:

Then the effect of IE5.5 is as follows:

The effect of IE6/IE7 is as follows:

,

The effect of IE8 is as follows:

As can be seen from the above, box The -sizing attribute can achieve the effects of other standard browsers on IE8, but IE5.5/IE6/IE7 are not fully compatible. From the perspective of compatibility, box-sizing should be used as little as possible in large projects. Friends who are interested can check how to achieve compatibility with box-sizing.

The important point is that there must be a doctype statement. For simplicity, it is recommended that you write . This article also involves a lot of knowledge points, so I won’t go into details one by one. As for the page rendering engine, I’m not very clear about it, so I’ll summarize it later.

If there are any mistakes, please correct me, thank you.

The music is over and this is the end of my article, haha. ----Miaotong