Warum DOCTYPE HTML verwenden?

Warum DOCTYPE HTML verwenden?
Sie wissen, dass der Browser ohne diese Option beim Rendern der Seite den Quirks-Modus verwendet. Sie wissen, dass verschiedene Browser verschiedene Elemente im Quirks-Modus unterschiedlich rendern. Sie würden also einen Dokumenttyp wie diesen schreiben:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Glücklicherweise sind verschiedene Webentwicklungstools mittlerweile leistungsstark genug, um das Einfügen von Vorlagencode zu unterstützen, sodass Sie diesen langen und umständlichen Doctype nicht Buchstabe für Buchstabe abtippen müssen. Wenn Sie jedoch genug davon haben, können Sie Folgendes versuchen:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>

Wow, sehr prägnant! Die Vorteile liegen auf der Hand: 1. Sie können diesen Doctype problemlos schreiben, ohne sich Gedanken über Fehler machen zu müssen. 2. Sie sparen etwa 105 Byte Zeichen. Für eine Site mit zig Millionen PVs täglich kann dies eine beträchtliche Menge an Datenverkehr einsparen. 3. Es ist abwärtskompatibel. Ja, der HTML5-Doctype wird so geschrieben und moderne Browser erkennen ihn.

Wenn Sie wie ich immer gedacht haben , dass das Nichtangeben einer DTD den Sondermodus des Browsers aktiviert , liegen Sie falsch! Die korrekte Anweisung sollte sein, dass der Quirks-Modus nur aktiviert wird, wenn der Doctype nicht definiert ist. Das heißt, Sie müssen nur <!doctype html> definieren, damit der Browser die Seite im strikten Modus (Standardmodus) rendert, ohne einen bestimmten DTD-Typ anzugeben. Halten wir noch einmal fest, dass alle Browser zwei Modi benötigen: den Quirks-Modus und den Strict-Modus (manche nennen ihn auch Standards-Modus). IE 6 für Windows/Mac, Mozilla, Safari und Opera implementieren alle beide Modi, aber Versionen unter IE 6 bleiben immer im Quirks-Modus hängen. Hier sind einige Dinge, die Sie über die beiden Modi wissen müssen:

  1. Seiten, die vor der Standardisierung geschrieben wurden, hatten keinen Dokumenttyp, daher werden Seiten ohne Dokumenttyp im Quirks-Modus gerendert.
  2. Wenn ein Webentwickler hingegen einen Doctype hinzufügt, bedeutet das, dass er weiß, was er tut. Die meisten Doctypes aktivieren den strikten Modus (Standardmodus) und die Seite wird gemäß dem Standard gerendert.
  3. Jeder neue oder unbekannte Dokumenttyp wird im strengen Modus (Standardmodus) gestartet.
  4. Jeder Browser hat seine eigene Möglichkeit, den Quirks-Modus zu aktivieren. Sie können sich diese Liste ansehen: http://hsivonen.iki.fi/doctype/

Hinweis: Sie müssen Ihre Seite überhaupt nicht anhand des von Ihnen gewählten Dokumenttyps validieren. Die bloße Anwesenheit des Dokumenttyp-Tags reicht aus, um den strikten Modus (Standardmodus) zu aktivieren. Wenn Sie immer noch an dem zweifeln, was ich sage, gehen Sie zu http://www.quirksmode.org/css/quirksmode.html#link2, um herauszufinden, was Sie wissen müssen. Um die Antwort zu erhalten, benötigen wir nur einen kleinen JavaScript-Codeabschnitt:

Code kopieren
Der Code lautet wie folgt:

Modus=Dokument.Kompatibilitätsmodus;

Mit diesem Code lässt sich feststellen, ob sich der aktuelle Browser im Quirks-Modus oder im Standardmodus befindet. Die Kompatibilität dieser Eigenschaft steht außer Zweifel. Im Zweifelsfall können Sie http://www.quirksmode.org/dom/w3c_html.html#t11 überprüfen. Sie können http://wanz.im/demo/doctype-test.html in dem Browser aufrufen, den Sie testen möchten, und dort die Ergebnisse sehen. Soweit ich weiß, wird dadurch der Quirks-Modus nicht aktiviert, auch nicht unter IE6. Wenn Sie neue Erkenntnisse haben, hinterlassen Sie mir bitte eine Nachricht.

<<:  9 Tipps für das Webseiten-Layout

>>:  Implementierung der Docker-Bereitstellung des SQL Server 2019 Always On-Clusters

Artikel empfehlen

Detaillierte Erklärung des Linux-Befehls unzip

Inhaltsverzeichnis 1. Unzip-Befehl 1.1 Syntax 1.2...

17 404-Seiten, die Sie erleben möchten

Wie können wir sagen, dass wir 404 vermeiden soll...

Detaillierte Erklärung der benutzerdefinierten Ereignisse von Vue-Komponenten

Inhaltsverzeichnis Zusammenfassen <Vorlage>...

Ein Beispiel für die Verwendung von nginx zum Konfigurieren mehrerer Laravel-Projekte mit einem Domänennamen

Hintergrund Da die Anzahl der Unterprojekte des U...

Einführung in die Verwendung von this in HTML-Tags

Zum Beispiel: Code kopieren Der Code lautet wie fo...

Installation und Verwendung der MySQL MyCat-Middleware

1. Was ist mycat Ein vollständig Open Source-Groß...

vue-table implementiert das Hinzufügen und Löschen

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI

Inhaltsverzeichnis Anforderungsbeschreibung Probl...

CSS3-Kategoriemenüeffekt

Die CSS3-Kategoriemenüeffekte sind wie folgt: HTM...

So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann

Ursache: Der NVIDIA-Grafikkartentreiber ist besch...

Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x

Inhaltsverzeichnis 1. Implementierungsprozess 2. ...

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Beispiel für das Zuschneiden einer Webseite von P...

So ändern Sie die Apt-Get-Quelle in Ubuntu 18.04

Bei Verwendung von apt-get zur Installation ist d...

Detaillierte Verwendung des Docker-Maven-Plugins

Inhaltsverzeichnis Docker-Maven-Plugin Schritte z...

Interviewer stellen häufig Fragen zum Lebenszyklus von React

React-Lebenszyklus Zwei Bilder zum besseren Verst...