Analysis of the Neglected DOCTYPE Description

doctype is one of them:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1. What is doctype? The doctype tag is used to specify the document's dtd (Document Type Definition) and is written at the beginning of each HTML, as follows:
<!DOCTYPE RootElement Availability "URI" [declarations]>
Such as several common doctypes:
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">
XHTML 1.1 Strict DTD<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. What can doctype do? <br />Whether or not doctype is specified, or different doctypes are specified, different browser modes will be activated, which will have some impacts on HTML, CSS and JS. The most famous of these is the so-called box model problem.
2.1 Why are there multiple modes? A long time ago, when Netscape and IE were competing for supremacy, the browser mode was decided by the browser itself because they were too powerful. Time passed, and in the blink of an eye it was the era of the Warring States. Everyone realized that if they all had the final say, the world would be in chaos, so they discussed electing a leader, and so w3c came to power. But the problem arises again. For example, IE can no longer dominate the market and it is a general trend to align with standards. However, if the browser only supports standards, many previous pages will have problems.
So doctype came into being. If no doctype is specified, the original mode is adopted, which is called Quirks Mode. If doctype is specified, it follows the standard, which is called Standards Mode. During this period, several people, represented by Mozilla, felt that the parsing of img in the standard mode was not very appropriate, so they retained some personal opinions. When specifying some specific doctypes, an almost standard mode (Almost Standards Mode) will be adopted. For specific details, please refer to Activating Browser Modes with Doctype, or @随网之舞's translation to activate browser mode with doctype.
2.2 The specific impact of different modes @ppk has given us a good summary, Quirks mode and strict mode.
3. Recommended doctype
<!DOCTYPE HTML>
Reason: Support HTML5. If it is not recognized, strict mode will be used.
Add some reset CSS, such as img { display: block } to solve browser compatibility issues.
It should be noted that the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> used by many people now are only equivalent to quirks mode in several major browsers. In other words, they can be omitted.

<<: Some tips on website design

>>: Summary of Several Methods for Implementing Vertical Centering with CSS

Sample code for implementing DIV suspension with pure CSS (fixed position)

Analysis of the Neglected DOCTYPE Description

Sample code for implementing DIV suspension with pure CSS (fixed position)

Detailed explanation of using split command to split Linux files

Share 13 basic syntax of Typescript

Three.js sample code for implementing dewdrop animation effect

Nginx/Httpd load balancing tomcat configuration tutorial

Introduction and use of five controllers in K8S

Use of Linux stat command

Podman boots up the container automatically and compares it with Docker

Detailed explanation of how to pass values between react hooks components (using ts)

Recommend

Introduction to Linux system swap space

Analysis and summary of the impact of MySQL transactions on efficiency

A brief discussion on the concat function in MySQL. How to add a string before or after a field in MySQL

Object-Oriented Programming with XHTML and CSS

Summary of five commands to check swap space in Linux

Example code for implementing photo stacking effect with CSS

Don’t bother with JavaScript if you can do it with CSS

The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 36)

CSS horizontal progress bar and vertical progress bar implementation code

Web lesson plans, lesson plans for beginners

How to install mysql5.7 in windows

Nginx/Httpd load balancing tomcat configuration tutorial

Code to enable IE8 in IE7 compatibility mode

Detailed explanation of the usage of MySQL memory tables and temporary tables

Mysql tree-structured database table design