Das Schreiben von Webseiten ist wie der Bau eines Hauses. Das Fundament muss solide sein, damit das Haus nicht einstürzt. Das Gleiche gilt, wenn wir Webseiten erstellen. Eine gute HTML-Struktur ist der Anfang für die Erstellung einer schönen Website. Ebenso gibt es gutes CSS nur in ebenso gutem HTML. Daher gibt es in der täglichen Produktion viele Vorteile , haben wir das erreicht? Schauen wir uns gemeinsam ein Bild an:
Das Bild oben zeigt zwei Codeteile. Ich denke, jeder wird zuerst über seine Semantik sprechen. Aber was ist mit dem zweiten? Code, der auf den ersten Blick wie schlechter Code aussieht, Code, der die Leute hassen lässt. Wie können wir also guten und sauberen Code schreiben? Lassen Sie uns gemeinsam aus den folgenden zwölf Aspekten lernen. Solange Sie beim Schreiben von Code in Zukunft die folgenden zwölf Prinzipien einhalten können, können Sie sicherstellen, dass sich die Qualität Ihres Codes verbessert und der von Ihnen geschriebene Code von allen geliebt wird.
1. Angabe des DOCTYPE
Wenn wir etwas gut machen wollen, müssen wir zuerst wissen, welche Rechte wir dafür haben. Genau wie bei der „DOCTYPE“-Anweisung müssen wir nicht darüber diskutieren, ob wir HTML4.01 oder XHTML1.0 verwenden oder das aktuelle HTML5 strikt vorsieht Version oder Übergangsversion, diese können den von uns geschriebenen Code gut unterstützen:
Da unser aktuelles Layout ein gutes Layout ohne Tabellenlayout erstellen kann, können wir die Verwendung des strikten „DOCTYPE“ anstelle des Übergangstyps in Betracht ziehen. Aus Gründen der Abwärtskompatibilität empfehle ich die Verwendung des HTML5-Deklarationsmodus:
Wenn Sie mehr darüber erfahren möchten, klicken Sie auf:
W3C: Empfohlene DTDs zur Verwendung in Ihrem Webdokument
Reparieren Sie Ihre Website mit dem richtigen DOCTYPE!
Bitte keine Übergangs-DOCTYPEs mehr
2. Zeichensatz und codierte Zeichen
Am Anfang jeder Seite legen wir den Zeichensatz in
fest. Wir verwenden hier „UTF-8“<meta charset="UTF-8" />
Und wenn wir normalerweise auf die Seite schreiben, stoßen wir oft auf Symbole wie „&“, daher sollten wir „&“ nicht direkt auf die Seite schreiben:
Um dies zu erreichen, sollten wir die Zeichenkodierung im Code verwenden. Beispielsweise sollten wir „&“ verwenden, um es im Code zu ersetzen.
Wenn Sie mehr darüber erfahren möchten, klicken Sie auf:
Wikipedia: UTF-8
Ein Tutorial zu Problemen mit dem Zeichencode
Die erweiterte ASCII-Tabelle
3. Codeeinrückung korrigieren
Bei der Seitenbearbeitung hat die Frage, ob die Einrückung des Codes korrekt ist, keinen Einfluss auf die Funktion Ihrer Website. Wenn Sie jedoch kein standardisiertes Einrückungsprinzip haben, werden die Leute, die Ihren Code lesen, sehr verärgert sein, sodass der richtige Code die Einrückung verbessert Lesbarkeit Ihres Codes. Der Einzug eines Standardprogramms sollte ein Tabulatorzeichen sein (oder ein paar Leerzeichen), um es anschaulicher zu machen, schauen wir uns das Bild am Anfang des Artikels an, oder schauen wir uns das Bild unten an, nachdem wir es gelesen haben. Sie werden in Zukunft wissen, wie Sie den Code schreiben, damit die Leute ihn gerne lesen können:
Es versteht sich von selbst, dass der folgende Code jedem gefallen wird. Dies ist nur eine Frage der Gewohnheiten, aber es wird empfohlen, es von Anfang an gut zu machen, um anderen und sich selbst zu helfen. Eine Einführung in diesen Aspekt finden Sie auch unter: Bereinigen Sie Ihre Webseiten mit HTML TIDY.
4. Verknüpfen Sie Ihre CSS-Stile und Javascript-Skripte extern
Es gibt viele Möglichkeiten, CSS-Stile in die Seite einzufügen. Dies ist eine sehr schlechte Angewohnheit, da dies nicht nur unser Markup durcheinander bringt Auch diese Stile sind nur für diese HTML-Seite geeignet. Daher müssen wir das CSS trennen und extern speichern, damit nachfolgende Seiten auch auf diese Stile verlinken können. Wenn Ihre Seite geändert werden muss, müssen wir nur die Stildatei ändern. Wie im Bild unten gezeigt:
Worüber wir oben sprechen, sind nur Stile. Tatsächlich sind JavaScript-Skripte dasselbe wie CSS-Stile. Mit Bildern und Texten möchte ich letztendlich Folgendes ausdrücken: „Versuchen Sie beim Erstellen von Webseiten, Ihre CSS-Stile und Javascript-Skripte in einer separaten Datei abzulegen und dann über Links auf diese Dateien zu verweisen. Das ist der größte Vorteil.“ dass es die Verwaltung und Änderung Ihrer Stile und Skripte erleichtert“
. 5. Korrekte Verschachtelung der Etiketten
Wenn wir HTML schreiben, benötigen wir immer die hierarchische Verschachtelung von Tags, um das Schreiben von HTML abzuschließen. Es gibt jedoch bestimmte Regeln für die Verschachtelung dieses HTML. Wenn wir es im Detail erklären möchten, müssen wir möglicherweise mehrere Kapitel verwenden Um es zu beschreiben. Was ich heute hier sagen möchte, ist, dass wir beim Schreiben von HTML keine großen Fehler machen sollten:
Die Struktur im Bild oben ist für uns üblich, dann sollten wir nicht auf „“ setzen Es können keine Elemente und Inline-Elemente eingefügt werden. Das Obige ist nur ein Beispiel, ich hoffe nur, dass nicht jeder in der täglichen Produktion solche Superfehler macht.
6. Löschen Sie unnötige Tags
Schauen wir uns zunächst einen Screenshot eines Beispiels an:
Das obige Bild ist offensichtlich die Erstellung eines Navigationsmenüs: Es gibt ein „p#topNav“, das die Liste „ul#bigBarNavigation“ umschließt, und die Listen „p“ und „ul“ sind beide Blockelemente, plus „p“, das hier zum Umschließen von „ul“ verwendet wird, hat überhaupt keine Auswirkung. Obwohl das Erscheinen von „p“ uns bei der Erstellung von Webseiten große Vorteile gebracht hat, müssen wir es nicht überall verwenden. Ich frage mich, ob Sie normalerweise auf solche Details achten. Ich habe einen solchen Fehler auch gemacht, dann werden wir ab heute gemeinsam daran arbeiten, solche Fehler zu korrigieren.
Für Informationen zur richtigen Verwendung von Etiketten klicken Sie bei Interesse bitte auf: Pitis: Was es ist und wie man es heilt.
7. Verwenden Sie eine bessere Benennung
Die hier erwähnte Benennung dient dazu, Klassennamen oder ID-Namen für relevante Elemente auf Ihrer Seite zu definieren. Wenn ein Element beispielsweise eine rote Schriftart hat, fügen Sie ihm sogar „rot“ hinzu. Sie schreiben alle „. left-sidebar“ usw., aber haben Sie schon einmal darüber nachgedacht, was passiert, wenn dieses Element mit „red“ definiert wird und der Kunde in ein paar Tagen nach „blue“ fragt? Mit anderen Worten, die „linke Seitenleiste“ wollte damals nicht mehr links, sondern rechts platziert werden. Insofern kann man sagen, dass unsere bisherige Benennung überhaupt keine Bedeutung hatte, wie in der Bild unten angezeigt:
Dann ist es sehr wichtig, einen guten Namen zu definieren. Nicht nur ich kann Ihren Code verstehen, sondern auch andere können Ihren Code leicht verstehen, zum Beispiel einen guten Klassennamen und ID-Namen „mainNav“, „subNav“, „footer“ usw ., er kann beschreiben, worum es geht. Die schlechten sind wie bereits erwähnt.
Wenn Sie mehr darüber erfahren möchten, klicken Sie auf:
Standardisierung von CSS-Klassen- und ID-Namen
CSS-Tipp #2: Strukturelle Namenskonvention in CSS
CSS-Codierung: semantischer Ansatz in der Namenskonvention
CSS-Namenskonventionen und Codierungsstil
8. Verlassen Sie die CSS-Version
Wenn wir Menüs entwerfen, verlangen wir manchmal, dass der Text aller Menüoptionen in Großbuchstaben geschrieben wird. Stellen Sie sie normalerweise direkt im HTML-Tag auf Großbuchstaben ein? Wenn ja, fühle ich mich schlecht, wenn wir sie in Zukunft nicht auf Großbuchstaben setzen sollten. Eine bessere Lösung besteht darin, dies über CSS zu erreichen:
9. Definieren Sie den Klassennamen oder ID-Namen von
Ich weiß nicht, ob Sie beim Erstellen von Webseiten auf ein solches Problem gestoßen sind. Die gesamte Website verwendet dasselbe Layout und denselben Klassennamen im Layout der Seite Ihr Vorgesetzter sagt, dass aufgrund der Kundennachfrage das Layout einer Seite zwischen der Seitenleiste und dem Hauptinhalt ausgetauscht werden muss. Zu diesem Zeitpunkt möchten Sie nicht die Struktur der gesamten Seite ändern, nur um das Layout zu ändern. Eine gute Lösung besteht darin, einen speziellen Klassennamen oder ID-Namen im „
“ zu definieren dass Sie leicht erreichen können, was Sie wollen. Ich weiß nicht, ob Sie es so verwendet haben:
Das Definieren eines eindeutigen Klassen- und ID-Namens für „
“ ist sehr leistungsfähig, nicht nur um das Layout wie oben zu ändern, sondern vor allem kann es Ihnen manchmal dabei helfen, einen bestimmten Teil der Seite zu implementieren Spezialeffekte haben keinen Einfluss auf die Leistung anderer Seiten. Ich muss nicht erklären, warum es eine solche Funktion gibt. Ich denke, jeder kennt sie. Weil der Inhalt jeder Seite das abgeleitete Element von „“ ist.Wenn Sie mehr darüber erfahren möchten, klicken Sie auf:
Identifizieren Sie Ihren Körper für eine bessere CSS-Kontrolle und Spezifität
Fallstudie: Wiederverwendung von Stilen mit einer Körperklasse
10. Überprüfen Sie Ihren Code
Menschen werden unweigerlich Fehler machen, und das Gleiche gilt auch, wenn wir Code schreiben. Manchmal vergessen Sie, Ihre Element-Tags zu schließen, und denken nicht daran, die erforderlichen Attribute zu schreiben Obwohl es einige Fehler gibt, die nicht gegeben werden, egal welche katastrophalen Folgen Sie haben, werden Sie auch Fehler mit sich bringen, die Sie nicht vorhersagen können. Daher wird empfohlen, dass Sie Ihren Code überprüfen, nachdem Sie ihn geschrieben haben. Verifizierter Code ist immer besser als nicht verifizierter Code:
Um Ihren Code effektiv zu verifizieren, können wir relevante Tools oder Browser-Plug-ins verwenden, die uns bei der Vervollständigung unterstützen. Wenn Ihr Code keine Fehler enthält, zeigt das W3C-Verifizierungstool grünen Text vor Ihnen an, was Sie äußerst aufgeregt macht, denn es beweist einmal mehr, dass der von Ihnen geschriebene Code den W3C-Standards standhalten kann.
Wenn Sie mehr darüber erfahren möchten, klicken Sie auf:
Der W3C Markup Validation Service
XHTML-CSS-Validator
Kostenloser Site Validator (überprüft die gesamte Website, nicht nur eine Seite)
11. Logische Reihenfolge
Dies ist eine seltene Fehlersituation, da ich denke, dass nicht jeder die logische Reihenfolge beim Schreiben von Seiten stören wird. Mit anderen Worten: Wenn möglich, ist es am besten, eine logische Reihenfolge für Ihre Website zu haben, z. B. schreiben Sie zuerst den Header und dann den Text und schließlich die Fußzeile. Natürlich kommt es manchmal vor, dass der Fußzeilenteil über der Seitenleiste unseres Codes liegt. Dies mag verständlich sein, aber wenn Sie andere Möglichkeiten zur Implementierung haben, sollten Sie dies tun Platzieren Sie die Fußzeile am Ende einer Seite und verwenden Sie dann bestimmte Techniken, um sie Ihren Designanforderungen anzupassen:
Oben haben wir verschiedene Möglichkeiten besprochen, wie Sie mit dem Schreiben von sauberem HTML-Code beginnen können. Zu Beginn eines Projekts ist dies sehr einfach, aber wenn Sie einen vorhandenen Code korrigieren müssen, wird es mehr oder weniger schwierig. Was ich oben gesagt habe, dient hauptsächlich dazu, Ihnen zu erklären, wie Sie lernen, einen guten, sauberen HTML-Code zu schreiben und sich daran zu halten. Ich hoffe, dass Sie nach der Lektüre dieses Artikels bei Null anfangen und darauf bestehen können, in Ihrem nächsten Projekt einen sauberen HTML-Code zu schreiben.
Verwandte Dokumente: 10 häufigste HTML-Tag-Fehler
Englische Quelle: 12 Prinzipien, um Ihren Code sauber zu halten
Das obige ist der detaillierte Inhalt von11 Regeln, um Ihren Code aufgeräumt zu halten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
