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:

Seiten, die vor der Standardisierung geschrieben wurden, hatten keinen Dokumenttyp, daher werden Seiten ohne Dokumenttyp im Quirks-Modus gerendert.
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.
Jeder neue oder unbekannte Dokumenttyp wird im strengen Modus (Standardmodus) gestartet.
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

js zum Implementieren von Details im Datei-Upload-Stil

Warum DOCTYPE HTML verwenden?

js zum Implementieren von Details im Datei-Upload-Stil

Detaillierte Erklärung des JS-Browser-Ereignismodells

Beispiel für den Mehrpunkt-Routenplanungsprozess des WeChat-Applets Amap – detaillierte Erläuterung

CSS-Code zur Steuerung der Hintergrundfarbe der Webseite

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

MySQL-Grundlagen-Tutorial: Detaillierte Erklärung der DML-Anweisungen

Native JavaScript-Implementierung des Fortschrittsbalkens

Nginx-Konfiguration: Trennung von PC-Site und mobiler Site zur Realisierung der Umleitung

So erweitern Sie die Festplattengröße einer virtuellen Maschine

Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode

Artikel empfehlen

Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt

Formatieren der Linux-Systemfestplatte und manuelles Hinzufügen einer Swap-Partition

So ändern Sie die Container-Portzuordnung in Docker dynamisch

Dieser Artikel zeigt Ihnen, was Vite mit der Anfrage des Browsers macht

Docker verwendet den Befehl mysqldump, um MySQL-Daten im Projekt zu sichern und zu exportieren

VMware 15.5-Version des grafischen Tutorials zum Erstellen eines Yum-Warehouses durch Mounten der System-CD

Implementierung der Docker-Batch-Container-Orchestrierung

HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

So überwachen Sie Array-Änderungen in JavaScript

Detaillierte Erklärung des Rewrite-Moduls von Nginx

Lösung für die Baidu-Site-Suche, die https nicht unterstützt (getestet)

Detailliertes Tutorial zur Verwendung des Befehls xargs unter Linux

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

Ein praktischer Leitfaden zu den Komponenten zur Leistungsoptimierung beim ersten Bildschirm von Vue-Projekten