Detailed explanation of the function and usage of DOCTYPE declaration_HTML/Xhtml_Web page production

1. Browser rendering mode and doctype

Some web pages are created following standards, but many are not. Even if you can't create standards-compliant web pages, you still want the browser to display those pages correctly according to the standards. Currently, a large number of web pages are filled with a lot of non-standard code, and they still work normally. In fact, most code designed for older browsers will display correctly in newer browsers (although the rendering may be different). What is the reason for this? In fact, strictly following the latest standards would completely undermine the very basis of those pages' existence. This is of course unacceptable for any browser hoping to make a difference.

Browser rendering mode

Modern browsers include different rendering modes designed to support both standards-compliant web pages and web pages designed for older browsers. Among them, Standards mode (that is, strict rendering mode) is used to render web pages that comply with the latest standards, while Quirks (inclusive) mode (that is, loose rendering mode or compatibility mode) is used to render web pages designed for traditional browsers. . In addition, note that Mozilla/Netscape 6 adds a new Almost Standards mode to support web pages designed for an older version of the standard.

What is doctype switching?
The doctype declaration placed at the top of the web 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 document type specified by the doctype declaration.

In theory, this should be a very intuitive switch. If doctype indicates that the current web page is a document that follows a standard (that is, HTML 4 or XHTML 1), the browser will switch to Standards mode. If doctype is not specified, or HTML 3.2 and older is specified, the browser switches to Quirks mode. This way, the browser can correctly display standards-compliant documents without completely abandoning older, non-standard web pages.

The problem of doctype switching
However, doctype switching is an imperfect solution. Even if you use a doctype declaration in a web document, the browser may not display the web page in the rendering mode you expect. The reasons are multifaceted, including malformed doctypes, and different beginnings of ), including XHTML web pages. However, IE, Opera, and older versions of Safari all expect the first line of the document to be a doctype declaration. So, if there is anything else before it (including XML prolog), the doctype will not be recognized. Therefore, the presence of XML prolog puts IE, Opera and Safari into Quirks mode. XML prolog is not required, so you can safely omit it in XHTML pages. Note: Be sure to include a charset attribute in the http-equiv meta tag to make up 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 a relative path is specified (rather than a fully qualified Internet address), most browsers will enter Quirks mode, regardless of the mode specified by the doctype declaration.

Malformed doctype:
The browser is very sensitive to the form and format of the doctype declaration. If it cannot recognize a malformed doctype, it will be forced into Quirks mode (it is for this reason , so we recommend copying and pasting a known correct doctype into the document rather than typing it yourself). A common reason for a malformed doctype 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 the space.

Doctype during the transition period:
When the browser handles the doctype during the transition period, inconsistencies are most likely to occur. IE and Opera use Standards mode; Netscape 6 and older versions of Safari use Quirks mode; Netscape 7, Mozilla 1, and newer versions of Safari use Netscape's Almost Standards mode, which is a more fault-tolerant version of Standards mode.
Unknown doctype:
There are also inconsistencies when browsers handle unrecognized doctypes. IE and Opera will enter Standards mode; in other words, it assumes that the unrecognized doctype is a new standard that has not yet been integrated into the browser. Netscape 6, on the other hand, switches to Quirks mode when it encounters an unrecognized doctype.
Doctype switching may be an effective way to get the browser into the correct rendering mode and display the web page correctly, provided that you notice the inconsistencies in various browsers and can proactively avoid various problems.

2. Use the correct doctype declaration

We may usually ignore this when making pages (including me, I am usually too lazy not to write and use the browser default). With the current upsurge of web page coding standardization, it is necessary for everyone to understand this Details will be useful. As the saying goes, there is no rule without rules.

Although most web documents have a doctype declaration at the top, many people don’t pay attention to it. It's one of many details that web authoring software sloppily handles when you create a new document. Although doctype is overlooked by many, it is a required element in any web document that adheres to standards. Doctype affects code validation and determines how the browser ultimately displays your web document.

The role of doctype

The doctype declaration indicates what set of rules a reading program should use to interpret the markup in the document. In the case of Web documents, the "reader" is usually a program such as a browser or validator, and the "rules" are the rules contained in a Document Type Definition (DTD) published by the W3C.

Each DTD includes a series of tags, attributes, and properties that are used to mark the content of a Web document; it also includes rules that specify which tags can appear in which other tags. Each proposed web 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, the document may not pass code verification and may not be displayed correctly in the browser. Browsers are more forgiving than validators when it comes to markup inconsistencies. However, incorrect doctype declarations often cause web pages to display incorrectly, or cause them not to display at all.

Choose the correct doctype

In order to obtain a correct doctype declaration, the key is to make the DTD correspond to the standard that the document follows. For example, assuming the document follows the XHTML 1.0 Strict standard, the document's doctype declaration should reference the corresponding DTD. On the other hand, if the doctype declaration specifies an XHTML DTD, but the document contains old-style HTML markup, it is inappropriate; similarly, if the doctype declaration specifies an HTML DTD, but the document contains XHTML 1.0 Strict markup , is also inappropriate.

Sometimes, it is not necessary to use a doctype declaration at all. If no valid doctype declaration is specified, most browsers will use a built-in default DTD. In this case, the browser will use the built-in DTD to try to display the tag you specify. For some ad hoc, hastily thrown together documents (of which there are many), you might indeed consider omitting the doctype declaration and accepting the browser's default display.

You can write a doctype declaration from scratch and let it point to a DTD of your choice. However, since most web documents need to comply with one of the internationally recognized web standards published by the W3C, those documents usually contain one of the following standard doctype declarations:

HTML 2:

HTML 3.2:

HTML 4.01 Strict: http://www.w3.org/TR/html4/strict. dtd">

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

HTML 4.01 Frameset：http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict：http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset：http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1：http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 plus MathML plus SVG：http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

      除了上面列出的doctype声明，具有特殊要求的一些文档还使用了其他几种声明。

      doctype声明通常是文档的第一行，要在标记以及其他文档内容之前。注意，在XHTML文档中，doctype的前面偶尔会出现一条XML处理指令（也称为XML prolog）：

      为了确保网页正确显示和顺利通过验证，使用正确的doctype是关键。与内容相反的、不正确的或者形式错误的doctype是大量问题的罪魁祸首。

      用DW设计网页时，新建一个文件，看代码最前面总要出现一个下面的东东，
http://www.w3.org/TR/html4/loose.dtd">这个是DW自动在网页文件页增加了DTD信息，可以删。 删除后，浏览器会使用的默认DTD。
三、选择什么样的DOCTYPE

      开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

      查看本页原代码，可以看到第一行就是： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      打开一些符合标准的站点，例如著名web设计软件开发商 Macromedia ，设计大师 Zeldman 的个人网站，会发现同样的代码。而另一些符合标准的站点(例如 k10k.net )的代码则如下：

!DOCTYPE">http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "br">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br>。完整代码如下：

 
!DOCTYPE">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 DOCTYPE do we choose
The ideal situation is of course a strict DTD, but for most of us designers who are new to web standards, a transitional DTD (XHTML 1.0 Transitional) is The current ideal choice (including this site, which also uses transitional DTD). Because this DTD also allows us to use presentation layer identifiers, elements and attributes, it is also easier to pass W3C code verification. Note: The "identification and attributes of the presentation layer" mentioned above refer to those tags used purely to control performance, such as tables for typesetting, background color identification, etc. In XHTML, tags are used to represent structures, not to achieve presentation. The purpose of our transition is to ultimately separate data and presentation.

For example: a mannequin changes clothes. The model is like data, and the clothes are the form of expression. The model and the clothes are separated, so you can change clothes at will. In the original HTML4, data and presentation were mixed together, and it was very difficult to change the presentation form at once. Haha, it's a bit abstract. This concept needs to be gradually understood during the application process.

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

4. This is how the official definition of DOCTYPE HTML PUBLIC is

!DOCTYPE

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

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

Microsoft® New for Internet Explorer 6. You can use this statement to switch Internet Explorer 6 and later to standards compatibility mode.

Grammar

HTML Top Element Availability "Registration//Organization//Type Tag//Definition Language" "URL"

Possible value

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 the Formal Public Identifier (FPI) is a publicly accessible object or a system resource. PUBLIC Default. Publicly accessible objects. SYSTEM System resources, such as local files or URLs.

Registration: Whether the specified organization is registered by the International Organization for Standardization (ISO). default. The organization name has been registered. - The organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Consortium (W3C) are not registered ISO organizations.

Organization: Specify the name of the group or organization responsible for the creation and maintenance of the DTD referenced by the !DOCTYPE declaration, i.e. the OwnerID. IETF IETF. W3C W3C.

Type: Specify the public text class, that is, the type of object being referenced. DTD default. DTD.

Tag: Specify a public text description, that is, a unique descriptive name for the referenced public text. A version number can be attached at the back. HTML default. HTML.

Definition: Specify document type definition. Frameset Frameset documentation. Strict excludes all representative attributes and elements that W3C experts want to phase out because the style sheet is already well established. Transitional contains everything except the frameSet element.

Language: Specifies the public text language, 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.

Notes

This declaration must appear at the beginning of the document, before the html tag.

!DOCTYPE elements do not require closing tags.

This element is available in HTML in Microsoft® Internet Explorer 3.0.

You can use this statement to switch to strict standards compatibility mode in Internet Explorer 6 and later. To turn this on, include a !DOCTYPE declaration at the top of your document, specifying legal tags and, in some cases, definitions and/or URLs.

Note: In standard compatibility mode, compatibility with other versions of Internet Explorer is not guaranteed. When standards compatibility mode is turned on, the rendering behavior of documents may differ from future versions of Internet Explorer. This mode should not be used if the content is inherently fixed (such as burned on a CD).

Example

The following example demonstrates how to use the !DOCTYPE declaration to specify the DTD that the document conforms to and switch Internet Explorer 6 and above to standards compatibility mode. The declarations in the following examples all specify compliance with the HTML 4.0 DTD. The second declaration specifies "Strict". The first type of statement is unspecified. Both statements will switch Internet Explorer 6 and later to standards compatibility mode.

The declarations in the following examples all specify compliance with the "Transitional" HTML 4.0 DTD. The second declaration specifies the URL of the DTD. The first type of statement is unspecified. The second statement will switch Internet Explorer 6 and later to standards compatibility mode. The first statement does not.

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