1. Der erste Schritt zur Verbesserung
Fügen Sie der Seite den richtigen DOCTYPE hinzu
DOCTYPE ist die Abkürzung für Dokumenttyp. Wird hauptsächlich verwendet, um anzugeben, welche Version von XHTML oder HTML verwendet wird. Der Browser interpretiert den Seitencode gemäß der durch DOCTYPE definierten DTD (Document Type Definition).
(1) Übergang (Übergang)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Streng
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)Rahmentyp (Frameset)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Legen Sie einen Namensraum fest (Namespace)
Fügen Sie den folgenden Code direkt nach der DOCTYPE-Deklaration hinzu:
<html XMLns="http://www.w3.org/1999/xhtml" >
Ein Namespace ist eine detaillierte DTD, die Elementtypen und Attributnamen sammelt. Mit der Namespace-Deklaration können Sie Ihren Namespace über einen Online-Adresszeiger identifizieren. Geben Sie einfach wie gewohnt den Code ein.
Deklarieren Sie Ihre Programmiersprache
Um von Browsern korrekt interpretiert zu werden und die Markup-Validierung zu bestehen, müssen alle XHTML-Dokumente die von ihnen verwendete Codierungssprache deklarieren. Der Code lautet wie folgt:
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
Die hier deklarierte Codierungssprache ist Vereinfachtes Chinesisch GB2312. Wenn Sie Inhalte in traditionellem Chinesisch erstellen müssen, können Sie sie als BIG5 definieren.
Schreiben Sie alle Beschriftungen in Kleinbuchstaben
Bei XML wird die Groß-/Kleinschreibung beachtet, daher wird bei XHTML auch die Groß-/Kleinschreibung beachtet. Alle XHTML-Element- und Attributnamen müssen in Kleinbuchstaben geschrieben sein. Andernfalls wird Ihr Dokument bei der W3C-Validierung als ungültig betrachtet. Beispielsweise ist der folgende Code falsch:
<TITLE>Firmenprofil</TITLE>
Die richtige Schreibweise ist:
<title>Firmenprofil</title> Ändern Sie auf ähnliche Weise <P> in <p>, <B> in <b> usw. Dieser Konvertierungsschritt ist einfach.
Alt-Attribut zum Bild hinzufügen
ALT-Attribut zu allen Bildern hinzufügen. Das Alt-Attribut gibt an, dass Ersatztext angezeigt wird, wenn das Bild nicht angezeigt werden kann. Dies ist für normale Benutzer entbehrlich, für Nur-Text-Browser und Benutzer, die Bildschirmleseprogramme verwenden, ist dies jedoch von entscheidender Bedeutung. Erst wenn das Alt-Attribut hinzugefügt wird, besteht der Code die W3C-Korrektheitsprüfung. Beachten Sie, dass wir aussagekräftige Alt-Attribute hinzufügen müssen. Das Schreiben wie folgt ist bedeutungslos:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Richtige Schreibweise:
<img src="logo_unc_120x30.gif" alt="UNC-Firmenlogo, klicken Sie, um zur Startseite zurückzukehren">
Zitieren Sie alle Attributwerte
In HTML müssen Sie Attributwerte nicht in Anführungszeichen setzen, aber in XHTML müssen sie in Anführungszeichen gesetzt werden.
Beispiel: height="100", nicht height=100.
Schließen Sie alle Tabs
In XHTML muss jedes offene Tag geschlossen werden. So was:
<p>Jeder geöffnete Tab muss geschlossen werden. </p> <b>HTML kann nicht geschlossene Tags akzeptieren, XHTML jedoch nicht. </b>
Diese Regel kann HTML-Verwirrung und -Probleme vermeiden. Beispiel: Wenn Sie das Bild-Tag nicht schließen, kann es in einigen Browsern zu Problemen bei der CSS-Anzeige kommen. Mit dieser Methode stellen Sie sicher, dass die Seite so aussieht, wie Sie sie entworfen haben. Es ist zu beachten, dass auch leere Tags geschlossen werden müssen. Verwenden Sie einen Schrägstrich „/“ am Ende des Tags, um sich selbst zu schließen. Zum Beispiel:
<br /> <img src="webstandards.gif" />
Nach der Verarbeitung durch die oben genannten sieben Regeln erfüllt die Seite grundsätzlich die Anforderungen von XHTML1.0. Aber wir müssen noch überprüfen, ob es wirklich den Standards entspricht. Wir können W3C nutzen, um kostenlose Validierungsdienste bereitzustellen (http://validator.w3.org/). Beheben Sie die Fehler einzeln, nachdem Sie sie entdeckt haben.
2. Der zweite Schritt der Verbesserung
Unsere nächste Verbesserung liegt hauptsächlich in der Trennung von Struktur und Leistung. Dieser Schritt ist nicht so einfach zu erreichen wie der erste Schritt. Wir benötigen eine Änderung des Konzepts sowie das Erlernen und die Anwendung der CSS2-Technologie. Aber etwas Neues zu lernen braucht Zeit, oder? Der Trick besteht darin, durch Handeln zu lernen. Wenn Sie immer Tabellenlayout und noch nie CSS verwendet haben, müssen Sie sich nicht überstürzt vom Tabellenlayout verabschieden. Sie können zunächst das Schriftart-Tag durch ein Stylesheet ersetzen. Je mehr Sie lernen, desto mehr können Sie tun. Okay, schauen wir uns an, was wir tun müssen:
Definieren Sie das Erscheinungsbild von Elementen mit CSS
Beim Schreiben von Logos haben wir uns angewöhnt, die Schrift größer zu machen, indem wir <h1> verwenden, und wenn wir ein Punktsymbol voranstellen möchten, verwenden wir <li>. Wir stellen uns <h1> immer als groß, <li> als Punkte und <b> als „fetten Text“ vor. Tatsächlich kann <h1> durch CSS zu allem werden, was Sie wollen, <h1> kann zu einer kleinen Schriftart werden, <p> kann zu einem großen und fetten Text werden und <li> kann zu einem Bild werden und so weiter. Wir können Strukturelemente nicht dazu zwingen, eine Darstellung zu erreichen, wir sollten CSS verwenden, um das Erscheinungsbild dieser Elemente zu bestimmen. Beispielsweise können wir dafür sorgen, dass die ursprünglichen Standardüberschriften der Ebene 6 dieselbe Größe haben:
h1, h2, h3, h4, h5, h6{ Schriftfamilie: 宋体, Schriftgröße: 12px;
Ersetzen Sie bedeutungslosen Müll durch strukturierte Elemente
Viele Menschen haben vielleicht nie gewusst, dass HTML- und XHTML-Elemente dazu gedacht sind, Struktur auszudrücken. Viele von uns haben sich daran gewöhnt, Elemente eher zur Steuerung der Präsentation als zur Strukturierung zu verwenden. Eine Liste könnte beispielsweise wie folgt gekennzeichnet sein:
Satz 1<br /> Satz 2<br /> Satz 3<br />
Es wäre besser, wenn wir stattdessen eine ungeordnete Liste verwenden würden:
<ul> <li>Satz 1</li> <li>Satz 2</li> <li>Satz 3</li> </ul>
Sie könnten sagen: „Aber <li> zeigt einen Punkt an, und ich möchte keinen Punkt verwenden.“ Tatsächlich legt CSS nicht fest, wie ein Element aussieht. Sie können Punkte mithilfe von CSS deaktivieren.
Fügen Sie jeder Tabelle und jedem Formular eine ID hinzu
Geben Sie einer Tabelle oder Form ein eindeutiges, strukturelles Markup, z.B.
<table id="menu">
Als nächstes können Sie beim Schreiben des Stylesheets einen „Menü“-Selektor erstellen und ihn mit einer CSS-Regel verknüpfen, die angibt, wie Tabellenzellen, Textbeschriftungen und alle anderen Elemente angezeigt werden sollen. Auf diese Weise ist es nicht erforderlich, jedem <td>-Tag einige redundante, bandbreitenverbrauchende Attribute der Präsentationsebene wie Höhe, Breite, Ausrichtung und Hintergrundfarbe hinzuzufügen. Mit nur einem angehängten Tag (dem ID-Tag mit dem Tag „menu“) können Sie eine Ad-hoc-Präsentationsverarbeitung für sauberes, kompaktes Code-Markup in einem separaten Stylesheet durchführen.
Für zwischenzeitliche Verbesserungen listen wir hier zunächst die wichtigsten drei Punkte auf, aber es enthält viele Inhalte und Wissenspunkte, die wir Schritt für Schritt erlernen und beherrschen müssen, bis wir schließlich das Layout mit CSS ganz ohne Verwendung von Tabellen erreichen.