Summary of contents:

  1. What are promiscuous mode, near-standard mode and standard mode
  2. How do I view the rendering mode of a page
  3. The type of document type
  4. Weird behavior under standard type (interesting)

Before you start learning about the front end, you will always need to create an HTML. Before the HTML tag, there’s another
tag. It’s inconspicuous, but we need to know why it exists.

In HTML files,
is required and needs to be placed at the top of the document in the format
. It exists to prevent browsers from going into Quirks Mode when rendering documents. That is to say
is a document type that ensures that the browser renders as much as possible using conforming modes, rather than using some non-conforming mode.

I. Hybrid mode and standard mode

Once upon a time, Web pages ran primarily in two types of browsers: Netscape Navigator and Microsoft’s Internet Explorer. Later, when the W3C developed a Web specification, major browsers couldn’t immediately use the new specification in order to keep existing pages usable.

As a result, browser vendors have introduced two modes to discriminate between new standards-compliant sites and legacy sites: Quirks Mode and Standards Mode. There is also an Almost Standards Mode during the transition phase.

  • Promiscuous mode, also known as weird mode, is compatible with non-standard behavior in Navigator 4 and IE 5.
  • The near-standard mode is compatible with a few promiscuous behaviors and can be understood as a transitional mode.
  • The standard mode is only compatible with behavior that matches the standard description.

Be sure to put the DOCTYPE at the top of the HTML file. Any other character that comes before the DOCTYPE, such as a comment or XML declaration, will cause Internet Explorer 9 or earlier browsers to trigger promiscuous mode.

If you want to know what kind of promiscuous behavior there is, you can refer to the promiscuous list. See this link for the difference between near-standard and promiscuous modes.

How to view the rendering mode of the page

  1. In Firefox, select from the right-click menuViewing Page InformationAnd then checkRendering mode.
  2. In Internet Explorer, pressF12And then checkThe document model.
  3. document.doctypeYou can return the declared document type.

Here’s an example from Firefox:


What are the document types

There are so many types of documents that I don’t want to list them all. See the following figure for details:

Source: https://hsivonen.fi/doctype/

The figure illustrates what modes different browsers choose to render for different document types. It contains the document types used by different versions of HTML during its evolution. There are many document types, but fortunately we don’t need to remember them. After HTML5, we just need to specify
allows the browser to render as standard as possible.

In addition, if your web page uses XHTML[1] and uses the Application/XHTML + XML MIME Type in the Content-Type HTTP header, you don’t need to use DOCTYPE to launch standard mode, because this file will always use standard mode. However, since IE9 only supports XHTML, browsers prior to IE9 will display a download dialog box because they don’t know the other format.

4. “weird” behavior under 🌟 standard type

We’ve all had this problem where a div with an IMG inside it will be stretched several pixels higher for no reason. The effect is shown below (sample link) :


This is weird. You’d be even weirder if I told you that this weird thing only happens in standard mode, and it works in near-standard mode and weird mode.

See this example for near-standard mode effects.

See this example for weird mode effects.

Here’s why:

The only difference between near-standard mode and standard mode is whether the element is given line-height and baseline.

In near-standard mode, baseline alignment is not specified if there are no other inline elements on the tag line, so the tag is attached to the bottom of the parent element.

In standard mode, the tag specifies the baseline alignment baseline. Even if there is no content in the line box, the line box will always contain something like the “G”, the part of the “F” that sticks out from under the end (for descending letters). So in this case you see with a gap of a few pixels between the bottom of the parent element, which is actually reserved for the “letter tail.”

This is an odd but normative treatment of text alignment by the standard.

This problem is caused by standard mode specifying the default baseline alignment, so it is easy to fix it by specifying vertical-align: middle for the tag; Can.

Refer to the link

  1. MDN | DOCTYPE
  2. HTML SPEC
  3. A little discovery about DOCTYPE