Detaillierte Erklärung der Funktion und Verwendung der DOCTYPE-Deklaration

Detaillierte Erklärung der Funktion und Verwendung der DOCTYPE-Deklaration

1. Browser-Rendering-Modus und Doctype

Einige Webseiten werden so erstellt, dass sie Standards einhalten, viele jedoch nicht. Auch wenn Sie keine standardkonformen Webseiten erstellen können, möchten Sie, dass die Browser diese Seiten entsprechend den Standards korrekt anzeigen. Derzeit sind viele Webseiten mit nicht standardmäßigem Code gefüllt und funktionieren trotzdem normal. Tatsächlich wird der Großteil des für ältere Browser entwickelten Codes in neueren Browsern korrekt angezeigt (auch wenn die Darstellung anders sein kann). Was ist der Grund dafür? Tatsächlich würde die strikte Einhaltung der neuesten Standards die Existenzgrundlage dieser Seiten vollständig zerstören. Dies ist natürlich für jeden Browser inakzeptabel, der einen Unterschied bewirken möchte.

Browser-Rendering-Modus

Moderne Browser verfügen über unterschiedliche Darstellungsmodi, um sowohl standardkonforme Webseiten als auch für ältere Browser entwickelte Webseiten zu unterstützen. Unter ihnen wird der Standardmodus (auch als strikter Rendering-Modus bekannt) zum Rendern von Webseiten verwendet, die den neuesten Standards entsprechen, während der Quirks-Modus (auch als lockerer Rendering-Modus oder Kompatibilitätsmodus bekannt) zum Rendern von Webseiten verwendet wird, die für herkömmliche Browser entwickelt wurden. Beachten Sie auch, dass Mozilla/Netscape 6 über einen neuen „Fast Standards“-Modus verfügt, der Seiten unterstützt, die für eine ältere Version der Standards entwickelt wurden.

Was ist Doctype-Switching?
Die oben auf Ihrer Webseite platzierte Doctype-Deklaration ist der Schlüssel, um den Browser in den richtigen Rendering-Modus zu bringen. Der Browser wechselt automatisch in den entsprechenden Rendering-Modus, um den durch die Doctype-Deklaration angegebenen Dokumenttyp korrekt anzuzeigen.

Theoretisch sollte dies ein ziemlich intuitiver Schalter sein. Wenn der Dokumenttyp anzeigt, dass es sich bei der aktuellen Webseite um ein Standarddokument (d. h. HTML 4+ oder XHTML 1+) handelt, wechselt der Browser in den Standardmodus. Wenn kein Doctype angegeben ist oder HTML 3.2 oder älter angegeben ist, wechselt der Browser in den Quirks-Modus. Dadurch können Browser standardisierte Dokumente korrekt anzeigen, ohne alte, nicht standardisierte Webseiten vollständig zu verwerfen.

Problem beim Doctype-Wechsel
Allerdings ist das Wechseln der Dokumenttypen keine perfekte Lösung. Selbst wenn Sie in Ihrem Webdokument eine Doctype-Deklaration verwenden, zeigt der Browser die Webseite möglicherweise nicht im erwarteten Renderingmodus an. Die Gründe hierfür sind vielfältig, unter anderem ein falsch formatierter Dokumenttyp und ein anderer <?xml version="1.0" encoding="UTF-8"?>)-Header, einschließlich XHTML-Seiten. Allerdings erwarten Internet Explorer, Opera und ältere Versionen von Safari, dass die erste Zeile des Dokuments eine Doctype-Deklaration ist. Wenn also davor etwas anderes steht (einschließlich XML-Prolog), wird der Dokumenttyp nicht erkannt. Daher versetzt die Anwesenheit eines XML-Prologs IE, Opera und Safari in den Quirks-Modus. Der XML-Prolog ist nicht erforderlich, Sie können ihn daher in Ihren XHTML-Seiten getrost weglassen. Hinweis: Achten Sie darauf, ein Zeichensatzattribut in das http-equiv-Metatag aufzunehmen, um das fehlende Kodierungsattribut im XML-Prolog auszugleichen.

Fehlende oder relative URL:
Eine vollständige Doctype-Deklaration enthält die URL der entsprechenden DTD-Datei (Document Type Definition). Wenn die URL fehlt oder als relativer Pfad (und nicht als vollqualifizierte Internetadresse) angegeben ist, wechseln die meisten Browser in den Quirks-Modus, unabhängig von dem in der Doctype-Deklaration angegebenen Modus.

Falscher Dokumenttyp :
Browser reagieren sehr empfindlich auf die Form und das Format von Doctype-Deklarationen und wechseln in den Quirks-Modus, wenn sie einen falsch formatierten Doctype nicht erkennen können (aus diesem Grund empfehlen wir, einen Doctype, von dem Sie wissen, dass er korrekt ist, zu kopieren und in Ihr Dokument einzufügen, anstatt ihn selbst einzugeben). Eine häufige Ursache für einen fehlerhaften Dokumenttyp ist ein fehlendes Leerzeichen zwischen dem ersten Teil des Dokumenttyps und der URL. Durch das Zusammenfassen eines zweizeiligen Dokumenttyps auf eine einzige Zeile geht dieser Platz häufig verloren.

Übergangsdokumenttyp:
Inkonsistenzen treten am wahrscheinlichsten auf, wenn Browser Übergangsdokumenttypen verarbeiten. IE und Opera verwenden den Standardsmodus; Netscape 6 und ältere Versionen von Safari verwenden den Quirks-Modus; Netscape 7, Mozilla 1 und neuere Versionen von Safari verwenden den Almost Standards-Modus von Netscape, eine fehlertolerantere Version des Standardsmodus.
Unbekannter Dokumenttyp:
Browser gehen außerdem inkonsistent mit Dokumenttypen um, die sie nicht erkennen. IE und Opera wechseln in den Standardsmodus. Das heißt, sie gehen davon aus, dass es sich bei dem nicht erkannten Doctype um einen neuen Standard handelt, der noch nicht in den Browser integriert wurde. Netscape 6 hingegen wechselt in den Quirks-Modus, wenn es auf einen nicht erkannten Dokumenttyp stößt.
Durch das Wechseln der Dokumenttypen können Sie Ihren Browser effektiv in den richtigen Darstellungsmodus versetzen und Ihre Webseiten korrekt anzeigen, vorausgesetzt, Sie sind sich der Inkonsistenzen zwischen den Browsern bewusst und vermeiden Probleme proaktiv.

2. Verwenden Sie die richtige Doctype-Deklaration

Wir übersehen diesen Punkt beim Erstellen von Webseiten normalerweise (ich auch, der normalerweise zu faul zum Schreiben ist und die Standardeinstellungen des Browsers verwendet). Angesichts des aktuellen Trends zur Standardisierung der Webseitencodierung ist es für jeden notwendig, dieses Detail zu verstehen, was nützlich sein wird. Wie das Sprichwort sagt: Ohne Regeln gibt es keine Ordnung.

Obwohl die meisten Webdokumente oben eine Doctype-Deklaration haben, achten viele Leute nicht darauf. Dies ist eines der vielen Details, die von Web-Authoring-Software bei der Erstellung eines neuen Dokuments schlampig erledigt werden. Obwohl von vielen übersehen, ist der Doctype ein erforderliches Element in jedem Webdokument, das Standards befolgt. Der Dokumenttyp wirkt sich auf die Codevalidierung aus und bestimmt, wie der Browser Ihr Webdokument letztendlich anzeigt.

Die Rolle des Doctype

Die Doctype-Deklaration gibt an, welchen Regelsatz Leser zum Interpretieren der Auszeichnung im Dokument verwenden sollen. Bei Webdokumenten ist der „Reader“ normalerweise ein Programm wie ein Browser oder ein Validator, und die „Regeln“ sind die in einer vom W3C veröffentlichten Document Type Definition (DTD) enthaltenen Regeln.

Jede DTD umfasst eine Reihe von Tags, Attributen und Eigenschaften, die zur Kennzeichnung des Inhalts eines Webdokuments dienen; darüber hinaus enthält sie auch einige Regeln, die festlegen, welche Tags in welchen anderen Tags vorkommen dürfen. Jeder Web-Empfehlungsstandard (wie HTML 4 Frameset und XHTML 1.0 Transitional) hat seine eigene DTD. Wenn die Auszeichnung im Dokument nicht der durch die Doctype-Deklaration angegebenen DTD folgt, besteht das Dokument nicht nur die Codevalidierung nicht, sondern wird möglicherweise auch im Browser nicht richtig angezeigt. Wenn es zu Markup-Inkonsistenzen kommt, sind Browser nachsichtiger als Validierer. Falsche Doctype-Deklarationen führen jedoch häufig dazu, dass Webseiten nicht richtig oder überhaupt nicht angezeigt werden.

Wählen Sie den richtigen Dokumenttyp

Der Schlüssel zum Erhalten der richtigen Doctype-Deklaration besteht darin, die DTD an den Standard anzupassen, dem das Dokument folgt. Vorausgesetzt beispielsweise, dass das Dokument dem XHTML 1.0 Strict-Standard entspricht, sollte die Doctype-Deklaration des Dokuments auf die entsprechende DTD verweisen. Wenn andererseits die Doctype-Deklaration die XHTML-DTD angibt, das Dokument aber HTML-Tags im alten Stil enthält, ist dies nicht angemessen. Ebenso ist es nicht angemessen, wenn die Doctype-Deklaration die HTML-DTD angibt, das Dokument aber XHTML 1.0 Strict-Tags enthält.

Manchmal ist es auch möglich, überhaupt keine Doctype-Deklaration zu verwenden. Wenn keine gültige Doctype-Deklaration angegeben ist, verwenden die meisten Browser eine integrierte Standard-DTD. In diesem Fall versucht der Browser mithilfe seiner integrierten DTD, die von Ihnen angegebene Auszeichnung anzuzeigen. Bei manchen temporären, hastig zusammengestellten Dokumenten (und davon gibt es viele) könnten Sie tatsächlich in Erwägung ziehen, die Doctype-Deklaration wegzulassen und die Standardanzeige des Browsers zu akzeptieren.

Es ist durchaus möglich, eine Doctype-Deklaration von Grund auf neu zu schreiben und sie auf eine DTD Ihrer Wahl verweisen zu lassen. Da die meisten Webdokumente jedoch einem der international anerkannten, vom W3C veröffentlichten Webstandards entsprechen müssen, enthalten diese Dokumente normalerweise eine der folgenden Standard-Doctype-Deklarationen:

HTML 2: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">

HTML 4.01 Übergangsversion: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Übergangsversion//EN" " http://www.w3.org/TR/html4/loose.dtd ">

HTML 4.01-Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd ">

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

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

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

XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">

XHTML 1.1 plus MathML plus SVG: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" " http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd ">

Zusätzlich zu den oben aufgeführten Doctype-Deklarationen werden von einigen Dokumenten mit besonderen Anforderungen mehrere andere Deklarationen verwendet.

Die Doctype-Deklaration ist normalerweise die erste Zeile eines Dokuments vor dem <html>-Tag und anderen Dokumentinhalten. Beachten Sie, dass in XHTML-Dokumenten dem Doctype gelegentlich eine XML-Verarbeitungsanweisung (auch XML-Prolog genannt) vorangestellt ist: <?xml version="1.0" encoding="utf-8"?>

Um sicherzustellen, dass Ihre Webseiten richtig angezeigt werden und die Validierung erfolgreich bestehen, ist die Verwendung des richtigen Dokumenttyps von entscheidender Bedeutung. Ursache für eine Vielzahl von Problemen ist ein falscher oder fehlerhafter Doctype, der im Widerspruch zum Inhalt steht.

Wenn Sie mit DW eine Webseite entwerfen, erstellen Sie eine neue Datei und Sie werden am Anfang des Codes Folgendes sehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">Dies sind die DTD-Informationen, die von DW automatisch zur Webseitendateiseite hinzugefügt werden und gelöscht werden können. Nach dem Entfernen verwendet der Browser die Standard-DTD.
3. Welchen DOCTYPE soll ich wählen?

Wenn Sie mit der Erstellung einer standardkonformen Site beginnen, müssen Sie zunächst einen DOCTYPE deklarieren, der Ihren Anforderungen entspricht.

Wenn Sie sich den Originalcode dieser Seite ansehen, können Sie sehen, dass die erste Zeile lautet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Wenn Sie einige Sites öffnen, die den Standards entsprechen, wie etwa die des berühmten Webdesign-Softwareentwicklers Macromedia und die persönliche Website des Designmeisters Zeldman, werden Sie denselben Code finden. Andere Sites, die den Standards entsprechen (wie etwa k10k.net), haben den folgenden Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br >. Der vollständige Code lautet wie folgt:


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

Welchen DOCTYPE wählen wir?
Die Idealsituation wäre natürlich eine strenge DTD, aber für die meisten von uns Designern, die mit Webstandards noch nicht vertraut sind, ist die Übergangs-DTD (XHTML 1.0 Transitional) derzeit die ideale Wahl (einschließlich dieser Site, die ebenfalls eine Übergangs-DTD verwendet). Da diese DTD es uns auch ermöglicht, das Logo, die Elemente und Attribute der Präsentationsschicht zu verwenden, ist es auch einfacher, die W3C-Codeüberprüfung zu bestehen. Hinweis: Die oben erwähnten „Bezeichner und Attribute der Darstellungsebene“ beziehen sich auf Tags, die ausschließlich zur Steuerung der Darstellung verwendet werden, wie etwa Tabellen für den Schriftsatz, Bezeichner für Hintergrundfarben usw. In XHTML werden Tags eher zur Darstellung der Struktur als zur Implementierung der Präsentation verwendet. Der Zweck unseres Übergangs besteht darin, Daten letztendlich von der Präsentation zu trennen.

Beispiel: Eine Schaufensterpuppe wechselt die Kleidung. Modelle sind wie Daten und Kleidung ist die Ausdrucksform. Modelle und Kleidung sind getrennt, sodass Sie die Kleidung nach Belieben wechseln können. In HTML4 waren Daten und Präsentation vermischt und es war sehr schwierig, die Präsentationsform auf einmal zu ändern. Haha, das ist ein bisschen abstrakt. Wir müssen dieses Konzept im Bewerbungsprozess nach und nach verstehen.

Auffüllen
Die DOCTYPE-Deklaration muss oben in jedem XHTML-Dokument platziert werden, über allem Code und Markup.

4. So lautet die offizielle Definition von DOCTYPE HTML PUBLIC

!DOCTYPE

--------------------------------------------------------------------------------

Gibt die Document Type Definition (DTD) an, der ein HTML-Dokument entspricht.

Was ist neu in Microsoft® Internet Explorer 6? Mit dieser Deklaration können Sie den Internet Explorer 6 und höher in den standardkonformen Modus schalten.

Grammatik

Verfügbarkeit von HTML-Elementen der obersten Ebene „Registrierung // Organisation // Typ-Tag // Definitionssprache“ „URL“

Möglicher Wert

Element der obersten Ebene: Gibt den in der DTD deklarierten Elementtyp der obersten Ebene an. Dies entspricht dem deklarierten SGML-Dokumenttyp. HTML-Standard. HTML.

Verfügbarkeit: Gibt an, ob der Formal Public Identifier (FPI) ein öffentlich zugängliches Objekt oder eine Systemressource ist. PUBLIC: Die Standardeinstellung. Öffentlich zugängliche Objekte. SYSTEM Systemressourcen, wie lokale Dateien oder URLs.

Registriert: Gibt an, ob die Organisation bei der Internationalen Organisation für Normung (ISO) registriert ist. + Standard. Der Organisationsname ist bereits registriert. – Der Organisationsname ist nicht registriert. Die Internet Engineering Task Force (IETF) und das World Wide Web Consortium (W3C) sind keine registrierten ISO-Organisationen.

Organisation: Gibt den Namen der Gruppe oder Organisation an, die für die Erstellung und Pflege der durch die !DOCTYPE-Deklaration referenzierten DTD verantwortlich ist, d. h. die OwnerID. IETF IETF. W3C W3C.

Typ: Gibt die öffentliche Textklasse an, d. h. den Typ des referenzierten Objekts. DTD-Standard. DTD.

Bezeichnung: Gibt die öffentliche Textbeschreibung an. Dabei handelt es sich um einen eindeutigen, beschreibenden Namen für den referenzierten öffentlichen Text. Darauf kann eine Versionsnummer folgen. HTML-Standard. HTML.

Definition: Gibt die Dokumenttypdefinition an. Frameset Frameset-Dokument. Strict schließt alle typischen Attribute und Elemente aus, die die W3C-Experten auslaufen lassen möchten, da Stylesheets bereits gut etabliert sind. Transitional enthält den gesamten Inhalt außer dem FrameSet-Element.

Sprache: Gibt die öffentliche Textsprache an, d. h. das natürliche Sprachcodierungssystem, das zum Erstellen des referenzierten Objekts verwendet wurde. Die Sprachdefinitionen werden als ISO 639-Sprachcodes (zwei Großbuchstaben) geschrieben. EN Standard. Englisch.

URL: Gibt den Speicherort des referenzierten Objekts an.

Hinweise

Diese Deklaration muss am Anfang des Dokuments vor dem HTML-Tag erscheinen.

Das !DOCTYPE-Element erfordert kein schließendes Tag.

Dieses Element ist in HTML im Microsoft® Internet Explorer 3.0 verfügbar.

Mit dieser Deklaration können Sie in Internet Explorer 6 und höher in den strikten Standardskonformitätsmodus wechseln. Um dies zu aktivieren, fügen Sie oben in Ihrem Dokument eine !DOCTYPE-Deklaration ein und geben Sie gültige Tags und in einigen Fällen Definitionen und/oder URLs an.

Hinweis: Im Standardkompatibilitätsmodus ist die Kompatibilität mit anderen Versionen von Internet Explorer nicht gewährleistet. Wenn der standardkonforme Modus aktiviert ist, kann das Verhalten der Dokumentwiedergabe von zukünftigen Versionen von Internet Explorer abweichen. Wenn der Inhalt fester Natur ist (z. B. auf eine CD gebrannt), sollte dieser Modus nicht verwendet werden.

Beispiel

Das folgende Beispiel zeigt, wie Sie mit der !DOCTYPE-Deklaration die DTD angeben, der ein Dokument entspricht, und wie Sie Internet Explorer 6 und höher in den standardkonformen Modus versetzen. Die Deklarationen in den folgenden Beispielen geben alle die Konformität mit der HTML 4.0-DTD an. Die zweite Deklaration gibt „Strict“ an. Die erste Deklaration ist nicht spezifiziert. Beide Deklarationen schalten Internet Explorer 6 und höher in den standardkonformen Modus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Die Deklarationen in den folgenden Beispielen geben alle die Konformität mit der „Transitional“-HTML-4.0-DTD an. Die zweite Deklaration gibt die URL der DTD an. Die erste Deklaration ist nicht spezifiziert. Die zweite Deklaration schaltet den Internet Explorer 6 und höher in den standardkonformen Modus. Die erste Aussage wird das nicht tun.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd ">

<<:  10 inhaltliche Prinzipien zur Verbesserung der Website-Performance

>>:  Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Artikel empfehlen

Tutorial zur Konfiguration des Nginx/Httpd-Reverseproxys für Tomcat

Im vorherigen Blog erfuhren wir die Verwendung un...

W3C Tutorial (11): W3C DOM Aktivitäten

Das Document Object Model (DOM) ist eine Plattfor...

So implementieren Sie Bildmapping mit CSS

1. Einleitung Mit Imagemaps können Sie Bereiche e...

Detaillierte Analyse des temporären JDBC- und MySQL-Tablespace

Hintergrund Temporäre Tablespaces werden verwende...

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Die von Navicat exportierten Daten können nicht i...

Implementieren der Prioritätswarteschlange in JavaScript

Inhaltsverzeichnis 1. Einführung in die Priorität...

Kurze Analyse der geplanten MySQL-Sicherungsaufgaben

Einführung Um Datenverlust in einer Produktionsum...

CSS erreicht hochadaptiven Vollbildmodus

Beim Schreiben meiner eigenen Demo möchte ich dis...

MySQL-Zeittypauswahl

Inhaltsverzeichnis DATETIME ZEITSTEMPEL Wie man w...