About DOCTYPE!!!

Source: Internet
Author: User
Tags processing instruction

Browser rendering Mode

Modern browsers include different rendering modes to support both standard-compliant web pages and Web pages designed for older browsers. Among them, standards (standard) mode (that is, strict rendering mode) is used to render Web pages that follow the latest standards, while Quirks (that is, loose rendering mode or compatibility mode) is used to render web pages designed for traditional browsers. Also, note that Mozilla/netscape 6 has a new almost standards (approximate standard) mode that supports Web pages designed for an older version of the standard.

What is DOCTYPE switch?
The DOCTYPE statement placed at the top of the page is the key to getting the browser into the correct rendering mode. The browser automatically switches to the appropriate rendering mode to correctly display the kind of document specified by the DOCTYPE declaration.

Theoretically, this should be a very intuitive switch. If DOCTYPE indicates that the current page is a document that follows the standard (that is, HTML 4+ or XHTML 1+), the browser switches to standards mode. If you do not specify DOCTYPE, or specify HTML 3.2 and older versions, the browser switches to quirks mode. This allows the browser to correctly display documents that follow standards, without completely discarding old-fashioned, standard-compliant pages.

DOCTYPE switching issues
However, DOCTYPE switching is an imperfect scenario. Even if you use a DOCTYPE declaration in a Web document, the browser may not take the rendering mode you want to display the page. The reasons are manifold, including the doctype of formal errors, and the beginning of different <?xml version= "1.0" encoding= "UTF-8"?>, including XHTML Web pages. However, both Ie,opera and legacy Safari want the first line of the document to be the DOCTYPE declaration. So, if there was anything else (including XML prolog) before it, DOCTYPE would not be recognized. Therefore, the presence of XML Prolog causes Ie,opera and Safari to enter quirks mode. XML Prolog is not required, so you can safely omit it from the XHTML Web page. Note: Be sure to include a CharSet attribute in the HTTP-EQUIV meta tag to compensate for the missing encoding attribute in the XML prolog.

Missing URL or relative URL:
In the complete DOCTYPE declaration, include the URL of the corresponding document type definition (DTD) file. If the URL is missing, or if you specify a relative path (rather than a fully qualified Internet address), most browsers will enter the quirks mode, regardless of the mode specified in the DOCTYPE statement.

DOCTYPE of form error:
The browser is very sensitive to the form and format of the DOCTYPE declaration, and if a malformed DOCTYPE is not recognized, it is forced into the quirks mode (for this reason, we recommend copying and pasting a known-good doctype into the document instead of entering it yourself). One common reason for the doctype of formal errors is that there is a missing space between the first part of the DOCTYPE and the URL. Folding a two-line doctype into a single line often loses that space.

DOCTYPE of the transition period:
When the browser handles the DOCTYPE of the transition period, it is most likely to have an inconsistent problem. IE and opera use standards mode, Netscape 6 and older safari use quirks mode, Netscape 7, Mozilla 1 and the new version of Safari use Netscape almost standards mode , it is a version of the standards pattern that has a better tolerance.
Unknown DOCTYPE:
The browser also has an inconsistency when dealing with unrecognized doctype. IE and opera enter the standards mode; in other words, it assumes that the unrecognized DOCTYPE is a new standard that has not yet been integrated in the browser. Netscape 6, in contrast, switches to quirks mode when an unrecognized DOCTYPE is encountered.
DOCTYPE switching may be an effective way for browsers to enter the correct rendering mode and display Web pages correctly, provided you notice inconsistencies in the various browsers and proactively avoid various problems.

Second, use the correct DOCTYPE statement

We usually do when the page may overlook this point (including my humble, usually lazy to write and use the browser default), with the current page encoding normalization craze, we all need to know this detail, will be useful. As the saying goes, no rules inadequate surrounding area.

Although most Web documents have a DOCTYPE declaration at the top, many people do not notice it. It is one of the many details that the Web authoring software handles hastily when you create a new document. Although DOCTYPE is overlooked by many people, it is a necessary element in any Web document that adheres to the standard. DOCTYPE affects code validation and determines how the browser will ultimately display your Web document.

The role of DOCTYPE

The DOCTYPE statement indicates what rule sets the reader should use to interpret the markup in the document. In the case of a Web document, a "reader" is usually a program such as a browser or a validator, and "rules" are the rules contained in a document type definition (DTD) published by the website.

Each DTD includes a series of tags, attributes, and properties that mark the contents of a Web document, as well as rules that specify which tags can appear in other tags. Each Web recommendation standard (such as HTML 4 frameset and XHTML 1.0 Transitional) has its own DTD. If the markup in the document does not follow the DTD specified by the DOCTYPE declaration, this document may not be displayed correctly in the browser, except in the case of code validation. The browser is more tolerant than the validator for problems with markup inconsistencies. However, incorrect DOCTYPE declarations often cause web pages to appear incorrectly or cause them to not display at all.

Choose the right DOCTYPE

The key to getting the right DOCTYPE statement is to have the DTD correspond to the standards that the document follows. For example, assuming that the document follows the XHTML 1.0 Strict standard, the DOCTYPE declaration of the document should refer to the appropriate DTD. On the other hand, if the DOCTYPE declaration specifies an XHTML DTD, but the document contains a legacy-style HTML tag, it is inappropriate; Similarly, if the DOCTYPE declaration specifies an HTML DTD, but the document contains XHTML 1.0 Strict tags, The same is not appropriate.

Sometimes, you can not use a DOCTYPE declaration at all. If you do not specify a valid DOCTYPE declaration, most browsers will use a built-in default DTD. In this case, the browser uses the built-in DTD to try to display the markup you specified. For some temporary, hastily patched documents (many of these), you can really consider omitting the DOCTYPE declaration and accepting the browser's default display.

It is entirely possible to write a DOCTYPE declaration from scratch and point it to a DTD of your choice. However, since most Web documents need to follow one of the internationally recognized Web standards published by the world's website, those documents typically contain one of the following standard DOCTYPE declarations:

HTML 2:<! DOCTYPE HTML PUBLIC "-//ietf//dtd HTML 2.0//en" >

HTML 3.2:<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 3.2 final//en" >

HTML 4.01 strict:<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

HTML 4.01 transitional:<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

HTML 4.01 frameset:<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "HTTP://WWW.W3.ORG/TR/HTML4/FRAMESET.DTD" >

XHTML 1.0 strict:<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

XHTML 1.0 transitional:<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

XHTML 1.0 frameset:<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

XHTML 1.1:<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

XHTML 1.1 plus MathML plus svg:<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//en" "Http://www.w3.org/2002/04/xhtml-math-svg/xht Ml-math-svg.dtd ">

In addition to the DOCTYPE declarations listed above, some documents with special requirements also use several other declarations.

The DOCTYPE declaration is usually the first line of the document, before the

In order to ensure that the Web page is properly displayed and validated successfully, using the correct DOCTYPE is key. The doctype of the opposite, incorrect, or formal error is the culprit of a large number of problems.

When designing a Web page with a DW, create a new file, and look at the front of the code
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" > This is the DW automatically added DTD information on the page file page, can be deleted. After deletion, the browser will use the default DTD.
Third, choose what kind of doctype

Start making a site that conforms to the standard, and the first thing is to declare the DOCTYPE that suits your needs.

See the original code on this page, you can see the first line is: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Open some standards-compliant sites, such as the famous web design software developer Macromedia, design guru Zeldman's personal site, will find the same code. The code for other standards-compliant sites (for example, K10k.net) is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">br>. The complete code is as follows:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

What kind of doctype do we choose?
The ideal scenario is of course a strict DTD, but for most of us who are new to Web standards, the transition DTD (XHTML 1.0 Transitional) is the ideal choice (including this site, which is also a transitional DTD). Because this DTD also allows us to use the identity, elements and attributes of the presentation layer, it is also easier to pass the code validation. Note: The above-mentioned "performance layer identification, attributes" refers to those purely to control the performance of the tag, such as the table for typesetting, background color identification. In XHTML, identities are used to represent structures rather than to implement representations, and the purpose of our transition is ultimately to achieve separation of data and representation.

Make an analogy: the mannequin changes clothes. Models are like data, clothes are expressions, models are separated from clothes, so you can change your clothes. In the original HTML4, the data and performance are mixed together, it is very difficult to change the form of the expression at once. Oh, a bit abstract, this concept requires us to gradually understand the application process.

Add
The DOCTYPE declaration must be placed at the top of every XHTML document, above all code and identities.

Iv. the official definition of DOCTYPE HTML public

! DOCTYPE

--------------------------------------------------------------------------------

Specifies the document type definition (DTD) that the HTML document follows.

Microsoft? What's new in Internet Explorer 6. You can use this statement to switch Internet Explorer 6 and later versions to standard compatibility mode.

Grammar

HTML top-level element Availability "registration//organization//Type label//Definition Language" "URL"

Possible values

Top-level element: Specifies the top-level element type declared in the DTD. This corresponds to the declared SGML document type. HTML default. Html.

Availability: Specifies whether an official public identifier (FPI) is a publicly accessible object or a system resource. Public default.  Objects that are publicly accessible. system resources, such as local files or URLs.

Registration: Specifies whether the organization is registered by the International Organization for Standardization (ISO). + Default. The organization name is registered. -The organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Association (WWW) are not registered ISO organizations.

Organization: Designation indicates responsibility by! DOCTYPE declares the name of the group or organization that references the creation and maintenance of the DTD, namely Ownderid. IETF IETF. .

Type: Specifies the public text class, which is the object type being referenced. DTD default. Dtd.

Label: Specifies the public text description, which is a unique descriptive name for the referenced exposed text. The version number can be attached later. HTML default. Html.

Definition: Specifies the document type definition. Frameset the frameset document. Strict excludes all the representative attributes and elements that all the experts want to phase out because the stylesheet is well-established. Transitional contains all the contents except for the FrameSet element.

Language: Specifies the public text language, which is the natural language encoding system used to create the referenced object. The language definition has been written as an ISO 639 language code (uppercase two letters). EN default. English.

URL: Specifies the location of the referenced object.

Comments

This declaration must appear at the beginning of the document and appear before the HTML tag.

! The DOCTYPE element does not need to close the label.

This element in Microsoft? Available in HTML for Internet Explorer 3.0.

You can use this statement to switch to strict standard compatibility mode in Internet Explorer 6 and later versions. To open this switch, please include it at the top of your document! DOCTYPE declares that a valid label is specified in the declaration, and in some cases, the definition and/or URL is required.

Note In standard compatibility mode, it is not guaranteed to remain compatible with other versions of Internet Explorer. When standard compatibility mode is turned on, the rendering behavior of the document may be different from the future version of Internet Explorer. This mode should not be used if the content is inherently fixed (such as burning on a CD).

Example

The following example shows how to use it! The DOCTYPE declares a DTD that specifies the document compliance and switches Internet Explorer 6 and later to standard compatibility mode. The declaration in the following example specifies that the HTML 4.0 DTD be followed. The second type of declaration specifies "Strict". The first declaration is not specified. Both of these statements will switch Internet Explorer 6 and later to standard compatibility mode.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.0//en" >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 strict//en" >

The declarations in the example below specify that the "transitional" HTML 4.0 DTD be followed. The second declaration specifies the URL of the DTD. The first declaration is not specified. The second statement will switch Internet Explorer 6 and later to standard compatibility mode. The first kind of declaration does not.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >

The following table lists all the html/xhtml elements and defines which document type declaration (DTD) Each element can appear in.

Tagged HTML 4.01/xhtml 1.0 XHTML 1.1 transitional Strict Frameset

<a> Yes Yes Yes Yes
<abbr> Yes Yes Yes Yes
<acronym> Yes Yes Yes Yes
<address> Yes Yes Yes Yes
<applet> Yes No Yes No
<area/> Yes Yes Yes No
<b> Yes Yes Yes Yes
<base/> Yes Yes Yes Yes
<basefont/> Yes No Yes No
<bdo> Yes Yes Yes No
<big> Yes Yes Yes Yes
<blockquote> Yes Yes Yes Yes
<body> Yes Yes Yes Yes
<br/> Yes Yes Yes Yes
<button> Yes Yes Yes Yes
<caption> Yes Yes Yes Yes
<center> Yes No Yes No
<cite> Yes Yes Yes Yes
<code> Yes Yes Yes Yes
<col/> Yes Yes Yes No
<colgroup> Yes Yes Yes No
<dd> Yes Yes Yes Yes
<del> Yes Yes Yes No
<dfn> Yes Yes Yes Yes
<dir> Yes No Yes No
<div> Yes Yes Yes Yes
<dl> Yes Yes Yes Yes
<dt> Yes Yes Yes Yes
<em> Yes Yes Yes Yes
<fieldset> Yes Yes Yes Yes
<font> Yes No Yes No
<form> Yes Yes Yes Yes
<frame/> No No Yes No
<frameset> No No Yes No
Yes Yes Yes Yes
Yes Yes Yes Yes
Yes Yes Yes Yes
Yes Yes Yes Yes
<i> Yes Yes Yes Yes
<iframe> Yes No Yes No
Yes Yes Yes Yes
<input/> Yes Yes Yes Yes
<ins> Yes Yes Yes No
<isindex> Yes No Yes No
<kbd> Yes Yes Yes Yes
<label> Yes Yes Yes Yes
<legend> Yes Yes Yes Yes
<li> Yes Yes Yes Yes
<link/> Yes Yes Yes Yes
<map> Yes Yes Yes No
<menu> Yes No Yes No
<meta/> Yes Yes Yes Yes
<noframes> Yes No Yes No
<noscript> Yes Yes Yes Yes
<object> Yes Yes Yes Yes
<ol> Yes Yes Yes Yes
<optgroup> Yes Yes Yes Yes
<option> Yes Yes Yes Yes
<p> Yes Yes Yes Yes
<param/> Yes Yes Yes Yes
<pre> Yes Yes Yes Yes
<q> Yes Yes Yes Yes
<s> Yes No Yes No
<samp> Yes Yes Yes Yes
<script> Yes Yes Yes Yes
<select> Yes Yes Yes Yes
<small> Yes Yes Yes Yes
<span> Yes Yes Yes Yes
<strike> Yes No Yes No
<strong> Yes Yes Yes Yes
<style> Yes Yes Yes Yes
<sub> Yes Yes Yes Yes
<sup> Yes Yes Yes Yes
<table> Yes Yes Yes Yes
<tbody> Yes Yes Yes No
<td> Yes Yes Yes Yes
<textarea> Yes Yes Yes Yes
<tfoot> Yes Yes Yes No
<th> Yes Yes Yes Yes
<thead> Yes Yes Yes No
<title> Yes Yes Yes Yes
<tr> Yes Yes Yes Yes
<tt> Yes Yes Yes Yes
<u> Yes No Yes No
<ul> Yes Yes Yes Yes
<var> Yes Yes Yes Yes

Note: The English translation of the document type declaration is DOCTYPE declaration.

About DOCTYPE!!!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.