Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Einführung in die Rolle von DOCTYPE und den Unterschied zwischen Standardmodus und Kompatibilitätsmodus

Detaillierte Einführung in die Rolle von DOCTYPE und den Unterschied zwischen Standardmodus und Kompatibilitätsmodus

高洛峰
高洛峰Original
2017-03-20 16:09:202531Durchsuche

Die Rolle von DOCTYPE und der Unterschied zwischen Standardmodus und Kompatibilitätsmodus

  1. Die Deklaration muss am Anfang des HTML-Dokuments stehen , in HTML5 unterscheidet nicht zwischen Groß- und Kleinschreibung.

  2. -Deklaration ist kein HTML-Tag, sondern ein Tag, das dem Browser mitgeteilt wird Aktuelle HTMl-Version der Direktive

  3. Die HTML-Layout-Engine moderner Browser entscheidet, ob der Kompatibilitätsmodus oder der Standardmodus zum Rendern des Dokuments verwendet wird, indem der Dokumenttyp überprüft wird ein dem Standard nahekommendes Modell haben.

  4. In HTML4.01 verweist die -Deklaration auf eine DTD. Da HTML4.01 auf SGML basiert, gibt die DTD die zu gewährleistenden Markup-Regeln an dass der Browser Inhalte korrekt wiedergibt

  5. HTML5 basiert nicht auf SGML, daher besteht keine Notwendigkeit, DTD anzugeben

Der Unterschied zwischen dem Standardmodus und Kompatibilitätsmodus: Standardmodus-Schriftsatz und JS-Betriebsmodus laufen nach dem höchsten vom Browser unterstützten Standard. Im Kompatibilitätsmodus werden Seiten weitgehend abwärtskompatibel angezeigt, wodurch das Verhalten älterer Browser simuliert wird, um zu verhindern, dass die Website nicht funktioniert.

Spezifische Unterschiede:
1.Box-Modell
Im strengen Modus: Breite ist die Inhaltsbreite, die tatsächliche Breite des Elements = Breite;
Im Kompatibilitätsmodus: Breite ist =width+padding+border
2. Im Kompatibilitätsmodus können Sie die prozentuale Höhe sowie die Höhe und Breite von Inline-Elementen festlegen.
Legen Sie im Standardmodus Breite und Breite für fest Inline-Elemente wie span. height werden nicht wirksam, aber im Kompatibilitätsmodus wird es wirksam.
Im Standardmodus wird die Höhe eines Elements durch den darin enthaltenen Inhalt bestimmt. Wenn das übergeordnete Element keine Höhe festlegt, ist es für das untergeordnete Element ungültig, eine prozentuale Höhe festzulegen.
3. Die Verwendung von margin:0 auto zum Festlegen der horizontalen Zentrierung funktioniert im IE nicht.
Die Verwendung von margin:0 auto kann das Element im Standardmodus horizontal zentrieren, funktioniert jedoch nicht im Kompatibilitätsmodus (mit Text). -alignAttributLösung)
body{text-align:center};#content{text-align:left}
4 Die Schriftartattribute in können die Einstellungen der oberen Ebene von nicht erben, white-space:pre ist ungültig und der Abstand des eingestellten Bildes ist ungültig

  1. < Die !doctype>-Deklaration muss am Anfang des HTML-Dokuments stehen, vor dem -Tag, um dem Parser mitzuteilen, welcher Dokumentstandard zum Parsen dieses Dokuments verwendet werden soll. Ein nicht vorhandener oder falsch formatierter DOCTYPE führt dazu, dass das Dokument im Kompatibilitätsmodus gerendert wird. Bei HTML5 wird die Groß-/Kleinschreibung nicht beachtet.

  2. Die Deklaration ist kein HTML-Tag, sondern eine Anweisung, mit der dem Browser die aktuelle HTML-Version mitgeteilt wird

  3. Die HTML-Layout-Engine moderner Browser bestimmt, ob zum Rendern des Dokuments der Kompatibilitätsmodus oder der Standardmodus verwendet werden soll, indem sie den Dokumenttyp überprüft. Einige Browser verfügen über ein standardisiertes Modell.

  4. In HTML4.01 verweist die -Deklaration auf eine DTD. Da HTML4.01 auf SGML basiert, gibt die DTD Markup-Regeln an, um sicherzustellen, dass der Browser Inhalte rendert richtig

  5. HTML5 basiert nicht auf SGML, daher besteht keine Notwendigkeit, eine DTD anzugeben

Der Unterschied zwischen Standardmodus und Kompatibilitätsmodus: Die Formatierungs- und JS-Betriebsmodi des Standardmodus basieren darauf. Läuft mit den höchsten vom Browser unterstützten Standards. Im Kompatibilitätsmodus werden Seiten weitgehend abwärtskompatibel angezeigt, wodurch das Verhalten älterer Browser simuliert wird, um zu verhindern, dass die Website nicht funktioniert.

Spezifische Unterschiede:
1. Box-Modell
Im strikten Modus: Breite ist die Breite des Inhalts und die tatsächliche Breite des Elements = Breite; Grenze
2. Im Kompatibilitätsmodus können Sie die prozentuale Höhe sowie die Höhe und Breite von Inline-Elementen festlegen.
Im Standardmodus wird die Einstellung von Breite und Höhe für Inline-Elemente wie Span nicht wirksam, im Kompatibilitätsmodus jedoch , es wird wirksam.
Im Standardmodus wird die Höhe eines Elements durch den darin enthaltenen Inhalt bestimmt. Wenn das übergeordnete Element keine Höhe festlegt, ist es für das untergeordnete Element ungültig, eine prozentuale Höhe festzulegen.
3. Die Verwendung von margin:0 auto zum Festlegen der horizontalen Zentrierung funktioniert im IE nicht.
Die Verwendung von margin:0 auto kann das Element im Standardmodus horizontal zentrieren, funktioniert jedoch nicht im Kompatibilitätsmodus (verwenden Sie die Textausrichtung). (Attribut) Lösung)
body{text-align:center};#content{text-align:left}
4. Im Kompatibilitätsmodus können die Schriftartattribute in der Tabelle nicht die Einstellungen der oberen Ebene und Weiß erben -space:pre wird ungültig sein. Der Abstand des Bildes ist ungültig

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Rolle von DOCTYPE und den Unterschied zwischen Standardmodus und Kompatibilitätsmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn