HTML5 standards learning-DOCTYPE header analysis-H5 Tutorial-php.cn

Table of Contents

HTML4 DOCTYPE

<!DOCTYPE html>

Home

Web Front-end

H5 Tutorial

HTML5 standards learning-DOCTYPE header analysis

黄舟

Mar 27, 2017 pm 03:36 PM

The previous article mainly talked about the composition of HTML document , while superficially touching it In order to understand the concept of "tag omission", this article will conceptually introduce the first important element that appears in HTML documents - DOCTYPE

The so-called DOCTYPE is originally the concept of XML. A specific syntax is used as a kind of metadata to describe the elements allowed to appear in XML documents, as well as the composition of each element, nesting rules, etc. A more detailed result can be obtained in WIKI

But in HTML, DOCTYPE has some different effects, one of which is the famous function of triggering the browser's standards mode. That is, if there is no DOCTYPE, the browser will enter a weird mode called Quirks mode. State, in this mode, the browser's box model, style parsing, layout, etc. are different from those specified by the standard.

It should be noted that the so-called HTML standard and DOM standard. etc., only stipulates the concepts and behaviors in standard mode. As mentioned in the document structure, DOCTYPE is an absolutely indispensable part of an HTML document, so there is no concept of "Quirks mode" at all. Because the standard does not make any provisions for Quirks mode, different browsers handle Quirks mode differently, and it is even more difficult to apply Quirks mode.

HTML4 DOCTYPE

In the HTML4 standard, DOCTYPE is included in the chapter "HTML Version Information". In this chapter, the standard specifies 3 types of DOCTYPE:

##Strict mode:
#.
#Transitional mode:
.
Frame mode:
.
In the HTML4 standard, the dtd file corresponding to each DOCTYPE is specified by a legal URL and can be downloaded through the Internet. The browser can obtain the specific content of the dtd according to the URL and parse the document according to the provisions of the content.

Reality is different

HTML4, like XML, is a fairly ideal standard. However, reality is often not so ideal. Imagine the following HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
                      "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>I&#39;m not a frameset</title>
    </head>
    <body>
        <p>So what?</p>
    </body>
</html>

Copy after login

This document uses a DOCTYPE in frame mode, but its text does not use any

elements. , corresponding to the use of standard HTML structures that should be specified by strict mode or transition mode. So what can the browser do in this situation?

Refuse to render this page? No, browsers don’t dare to do this. In the fierce market competition, if some pages cannot be rendered because of this, they can only watch the market share being injected into other fields. So the browser can at most report a weak warning in protest, but it still has to parse the document and render it correctly.

This is the so-called "fault tolerance" of the browser. In fact, no matter what your DOCTYPE is, the browser will parse a document with the greatest compatibility and make the greatest efforts to display the document. Meets developer expectations. This feature of the browser has gradually made the standard setters realize that DOCTYPE does not seem to be very important. Therefore, in

HTML5

, DOCTYPE has undergone a major change...

HTML5's DOCTYPE

has arrived in HTML5. I believe most people already know this change, that is HTML5 simplifies the declaration of DOCTYPE, only

is required.

As mentioned above, in the HTML4 era, standard setters have realized that DOCTYPE is not very helpful for browser rendering, except for boring w3cvalidator

, DOCTYPE seems to only trigger browser compatibility mode. So the standards working group adopted a very practical attitude and tested the simplest DOCTYPE that triggers the standard mode for all courses, and finally came to this conclusion.

But the story will not be that simple. The Standards Working Group is not a rogue who just completes such a simple action and abandons it. In fact, they still conscientiously consider backward compatibility, scalability, etc. In the end, the DOCTYPE chapter used a lot of words to describe the series of things, and got a very detailed result.

In the relevant chapters of the HTML5 reference manual, DOCTYPE is divided into three categories:

Normal DOCTYPE - normal doctype

Ordinary DOCTYPE is the simplest form we have seen, that is,
. Its real composition is like this:

One or more spaces. For the definition of spaces, please refer to the explanation in Introduction.
charactersHTML, also case-insensitive.
1 or more spaces.
End tag, that is, >. </ol> <li>DOCTYPE no longer recommended - deprecated doctype</li> <li> The so-called several DOCTYPEs in the HTML4 era, their composition is as follows: In the standard, there is a strict correspondence between Public ID and System ID. If the specified System ID cannot have a Public ID, the 8th optional content above cannot exist. HTML5 completely abandons the transitional and framework DOCTYPE in HTML4, and integrates the DOCTYPE declaration of XHTML, resulting in the following 6 combinations: </li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li>##&lt ;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"><code>
#
##

A pair of quotation marks or single quotation marks (must match before and after), put a System ID corresponding to the previous Public ID in the quotation marks.

1 or more spaces.
characters
HTML
1 or more spaces.
characters
PUBLIC
Continue with 1 or more spaces.
A pair of quotation marks or single quotation marks (must match before and after), put a Public ID in the quotation marks.
Optional content:
1 or more spaces.
End tag, that is,
>.
Legacy tool DOCTYPE - legacy tool compatible doctype
As the name suggests, DOCTYPE is completely prepared for compatibility with the historical heritage of long ago. , there is no way to even verify what kind of "tool" will create this kind of DOCTYPE... The composition of legacy tool-type DOCTYPE is as follows:
< ;!doctype HTML system "about:legacy-compat">
, basically there is nothing worth changing except the case.

A piece of text, namely
1 or more spaces.
characters
HTML
1 or more spaces.
characters
SYSTEM
Continue with 1 or more spaces.
A pair of quotation marks or single quotation marks (must match before and after), put a text
about:legacy-compat
Sensitive.
1 or more spaces.
End tag, that is,
>.
Realistic details

For IE6-9, if there is a comment before DOCTYPE, it will enter Quirks mode.

For IE6, if there is an XML declaration before DOCTYPE, it will enter Quirks mode.
After I finished writing, I discovered that the problem was all in IE... The issue about DOCTYPE has been entangled at this point. The next chapter mainly talks about the issue of encoding declaration.

The above is the detailed content of HTML5 standards learning-DOCTYPE header analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn