This article systematically explains the DOCTYPE elements. At the same time, a lot of information was verified. Because the information on the Internet is quite messy, I have redefined it after collection and sorting. For example, the definition of the DOCTYPE element is mainly divided into basic knowledge and advanced knowledge. Basic knowledge explains basic DOCTYPE knowledge. A lot of advanced knowledge comes from the Internet, mainly some practical techniques.
DOCTYPE is the abbreviation of Document Type. The <!DOCTYPE> element is used to declare a page's Document Type Declaration (DTD). This element declaration is located at the front of the document and is before the <html> tag. By confirming the DTD of the page, you can also determine which W3C specification (such as HTML or XHTML specification) the page uses.
The correct translation of the W3C specification should be recommended for W3C (W3C Recommendations). In many designers' eyes, W3C is the standard. However, many people have only a little understanding. The following is listed in the HTML specification and XHTML specification in the current W3C specification. We will explain the relationship between HTML and XHTML later:
| specification | recommend |
HTML 3.2 | January 14, 1997 |
HTML 4.0 | May 24, 1998 |
HTML 4.01 | December 24, 1999 |
| specification | Draft/Proposal | recommend |
XHTML 1.0 | January 26, 2000 | |
XHTML 1.0 Revision | August 1, 2002 | |
XHTML 1.1 | May 31, 2001 | |
XHTML Modules | April 10, 2001 | |
XHTML Modules 1.1 | July 5, 2006 | |
XHTML Basic | December 19, 2000 | |
XHTML Basic 1.1 | July 5, 2006 | |
XHTML Events | October 14, 2003 | |
XHTML Events 2 | February 16, 2007 | |
XHTML Print | September 20, 2006 | |
XHTML Media Types | August 1, 2002 | |
XForms 1.0 | October 14, 2003 | |
XForms 1.0 (SE) | March 14, 2006 | |
XForms 1.1 | February 22, 2007 | |
XHTML 2.0 | July 26, 2006 | |
XLink | June 27, 2001 | |
HLink | September 13, 2002 |
XHTML can be regarded as the latest HTML specification and is an XML application that can be migrated smoothly from HTML 4.01. The first step in W3C refactoring HTML 4.01 into XML led to the birth of XHTML 1.0. XHTML 1.0 relies on the semantics provided by HTML 4.01 tags.
The page file declares different DTDs through the <DOCTYPE> element to tell the browser which HTML or XHTML specifications the current page complies with. The following lists only the DTDs related to the HTML4.01 and XHTML1.0 specifications:
HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.
If you need clean markings to avoid confusion in presentation layers, use this type. Please use it with Cascading Style Sheets (CSS):
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd>
Transitional DTD can contain rendering properties and elements that W3C expects to move into the style sheet. Use this type if your readers use browsers that do not support cascading stylesheets (CSS) so that you have to use the rendering feature of HTML:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
Frameset DTD should be used for documents with frames. Except for the frameset element that replaces the body element, Frameset DTD is equivalent to Transitional DTD:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN
http://www.w3.org/TR/html4/frameset.dtd>
XHTML 1.0 specifies three XML document types: Strict, Transitional, and Frameset.
If you need clean markings to avoid confusion in presentation layers, use this type. Please use it with Cascading Style Sheets (CSS):
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Transitional DTD can contain rendering properties and elements that W3C expects to move into the style sheet. Use this type if your readers use browsers that do not support cascading stylesheets (CSS) so that you have to use the rendering feature of XHTML:
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Use this DTD when you want to use a framework!
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
HTML Top-level Element Availability Registration //Organization //Type Tags //Definition Language URL
Top-level element: Specifies the top-level element type declared in DTD. This corresponds to the declared SGML document type. Default is HTML.
Availability: Specifies whether the official public identifier (FPI) is publicly accessible object or system resource. The value can be PUBLIC or SYSTEM.PUBLIC default. Represents a publicly accessible object. SYSTEM represents a system resource, such as a local file or a URL.
Registration: Specify whether the organization is registered by the International Organization for Standardization (ISO).
+ is the default, indicating that the organization name is registered.
- means that the organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Association (W3C) are not registered ISO organizations.
Organization: Specifies the name of the group or organization that indicates the creation and maintenance of the DTD referenced by the !DOCTYPE declaration, namely OwnderID. IETF is an IETF. W3C is W3C.
Type: Specifies the public text class, that is, the type of object referenced. Default is DTD.
Tag: Specifies a public text description, that is, a unique descriptive name for the cited public text. Version number can be included later. Default is HTML.
Definition: Specify the document type definition.
Frameset Frameset Documentation.
Strict excludes all representative attributes and elements that W3C experts want to phase out, because the style sheets are already perfect.
Transitional contains all contents except the frameSet element.
Language: Specifies a public text language, that is, a natural language encoding system used to create the referenced object. The language definition has been written as ISO 639 language code (capital two letters). EN Default. English.
URL: Specifies the location of the referenced object.
If you want to check whether your page content meets the standards declared in DOCTYPE, you can use the verification tool provided by W3C:
http://validator.w3.org/
Modern browsers include different rendering modes, with the aim of supporting both web pages that follow W3C standards and web pages designed for older browsers. Among them, Standards mode (that is, strict presentation mode) is used to present web pages that follow the latest standards, while Quirks mode (that is, loose presentation mode or compatibility mode) is used to present web pages designed for traditional browsers. Also, note that Mozilla/Netscape 6 has added an Almost Standards mode to support web pages designed for an older version of the standard.
In theory, this should be a very intuitive switch. If the <!DOCTYPE> element of the page points to the page's compliance standards (such as XHTML1.0), the browser will switch to Standards mode. If the doctype is not specified, or HTML 3.2 and older versions are specified, the browser switches to Quirks mode. In this way, the browser can display the documents that follow the standards correctly without completely abandoning old-fashioned web pages that do not match the standards. But there will be the following situations:
In the complete doctype declaration, include the URL of the corresponding document type definition (DTD) file. If the URL is lost, or if it is specified, a relative path (rather than a fully qualified Internet address), most browsers will enter Quirks mode, regardless of the mode specified by the doctype declaration.
The browser is very sensitive to the form and format of the doctype declaration. If a doctype with the wrong form cannot be recognized, it will force it to enter Quirks mode (it is recommended to copy and paste a known correct doctype into the document instead of typing it in person). A common reason for the form error doctype is that a space is missing between the first part of doctype and the URL. Collapse a doctype divided into two lines into a single line, and that space will often be lost.
When a browser handles the transition period doctype, it is most likely to have inconsistent problems. 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 better fault-tolerant version of Standards mode.
There is also inconsistency when the browser handles unrecognized doctypes. IE and Opera will enter Standards mode; in other words, it assumes that unrecognized doctype is a new standard that has not been integrated in the browser. On the contrary, Netscape 6 will switch to Quirks mode when encountering unrecognized doctypes.
Doctype switching may be an effective means to get the browser to enter the correct rendering mode and display the web page correctly, provided that you notice inconsistencies in various browsers and can actively avoid various problems.
1. Immediately following the DOCTYPE declaration above is an XHTML namespace declaration, placed in the enhanced <html> element, written as:
<html xmlns=http://www.w3.org/1999/xhtml>
2. Since the XHTML 1.0 page is a legal XML document, and XML is case sensitive to tags and attributes, for the sake of simplicity, all tags and attributes in XHTML 1.0 pages must be lowercase.
Some free tools, such as HTML Tidy (http://tidy.sourceforge.net/), can help you automatically convert tags and attributes to lowercase.
3. Declare the language used in the page by adding a <meta> element to the <head> element.
<meta http-equiv=Content-Type content=text/html; charset=gbk />
4. In XHTML, all attributes must be quoted.
Some free tools, such as HTML Tidy (http://tidy.sourceforge.net/), can help you automatically put quotes on all attributes.
5. In XHTML, all properties must have values.
Can't be written like in HTML 4.0:
<input type=checkbox name=shirt value=medium checked>
And to write:
<input type=checkbox name=shirt value=medium checked=checked />
6. In XHTML, all tags must be closed.
There are two ways to close the tag. The tag containing the content is closed using the end tag, and the empty tag is followed by a space and /. For example:
<p>This is acceptable HTML and it is also valid XHTML.</p>
<img src=logo.gif />
7. Do not use -- in comment content.
-- It can only be used at the beginning and end of an XHTML comment and cannot appear in the content of an comment. The following writing methods are not allowed:
<!--Invalid -- and so is the classic separator below. -->
<!------------------------------------>
8. HTML encode all special symbols.
The three specifications of W3C, XHTML/CSS/DOM, form a complete and rigorous system. I call these three specifications the incarnation of the Trinity God in the Web world. These three specifications represent the three parts of the structure, presentation, and behavior of the web page. Strictly divide web pages into these three layers, and try to make the contents of each layer independent of each other, which will help improve the reusability and modularity of the page and greatly reduce the cost of page production, maintenance and modification. To achieve the above-mentioned hierarchy, the XHTML written should only contain structure-related tags (elements and attributes). Therefore, you should be accustomed to using Strict-type DTDs, and abandon those markers with expressive meaning as soon as possible (those markers are not recommended in the HTML 4.0 specification, and will be completely discarded in versions after XHTML); abandon the old method of layout based on tables as soon as possible and adopt a complete CSS layout.
"A Authoritative Guide to HTML and XHTML", by Chuck Musciano & Bill Kennedy.
"XHTML Tutorial", by Chelsea Valentine & Chris Minnick.
"Website Refactoring", by Jeffrey Zeldman.
Author: Zhang Ziqiu
Source: http://www.cnblogs.com/zhangziqiu/