Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben
|
Guter HTML-Code ist die Grundlage einer schönen Website. Wenn ich Leuten CSS beibringe, sage ich ihnen immer zuerst: Gutes CSS existiert nur auf der Grundlage guter HTML-Auszeichnungen. Es ist, als ob ein Haus ein solides Fundament braucht, nicht wahr? Saubere und semantische HTML-Tags haben viele Vorteile, aber es gibt immer noch viele Websites, die unfreundliche Tags verwenden. Sehen wir uns einige HTML-Tags an, die nicht benutzerfreundlich sind, und besprechen wir diese Probleme, um zu lernen, wie man saubere und standardmäßige HTML-Tags schreibt. 123WORDPRESS.COM Hinweis : Chris Cyier hat hier zwei Dokumente verwendet, um den Code in diesem Artikel zu erklären: schlechter Code und guter Code . Bitte beziehen Sie sich beim Lernen auf diese beiden Dateien. 1. Strenger DOCTYPEDazu müssen wir nur die richtigen Schritte befolgen. Es besteht keine Notwendigkeit zu diskutieren, ob wir HTML 4.01 oder XHTML 1.0 verwenden sollen, da beide strenge Anforderungen an uns stellen, korrekten Code zu schreiben.
Da unser Code jedoch ohnehin keine Tabellen für das Layout verwenden sollte, besteht keine Notwendigkeit, den Übergangs-DOCTYPE zu verwenden. Verwandte Ressourcen:
123WORDPRESS.COM Hinweis : Die sogenannte DTD ist die Dokumenttypdeklaration. Einfach ausgedrückt handelt es sich dabei um eine Reihe von Regeln, die für ein bestimmtes Dokument definiert sind. Diese Regeln umfassen eine Reihe von Element- und Entitätsdeklarationen. Es gibt drei Typen von XHTML-Dokumenten: STRICT (strikter Typ), TRANSITIONAL (Übergangstyp) und FRAMESET (Rahmentyp) . Derzeit verwenden wir TRANSITIONAL am häufigsten. Diese Website verwendet beispielsweise derzeit XHTML 1.0 TRANSITIONAL . Wenn Ihr HTML-Code gut geschrieben ist, ist es ganz einfach, das vorhandene TRANSITIONAL in STRICT umzuwandeln. Andererseits besteht kein Grund zur Eile beim Wechsel. Persönlich denke ich, dass STRICT strenger ist, aber die Verwendung von TRANSITIONAL hat keine großen Auswirkungen. 2. Zeichensatz und KodierungszeichenIn unserem <head>-Abschnitt müssen wir als Erstes den Zeichensatz deklarieren. Wir haben UTF-8 verwendet, es aber nach <title> eingefügt. Verschieben wir die Zeichensatzdeklaration nach oben, da der Browser wissen soll, welchen Zeichensatz er verwenden soll, bevor er Inhalte liest.
Neben der Position der Zeichensatzdeklaration sind auch die seltsamen Zeichen, die in <title> erscheinen, Probleme, die Aufmerksamkeit erfordern, z. B. das am häufigsten verwendete Zeichen „ & “, das wir durch die Zeichenentität „ & “ ersetzen sollten. Verwandte Ressourcen:
3. Richtige EinrückungBeim Schreiben von Code hat die Einrückung keinen Einfluss auf das Erscheinungsbild der Webseite, aber die Verwendung der richtigen Einrückung kann den Code lesbarer machen. Die Standardeinrückungsmethode besteht darin, eine Tabulatorposition (oder einige Leerzeichen) einzurücken, wenn Sie ein neues Element beginnen. Denken Sie auch daran, dass das Tag des schließenden Elements mit dem öffnenden Tag ausgerichtet ist. 123WORDPRESS.COM Hinweis : Manche Leute finden es lästig, beim Schreiben von Code Einrückungen vorzunehmen. Wenn Sie der Einzige sind, der den Code liest, ist das vielleicht kein Problem. Machen Sie einfach nichts, solange Sie das Gefühl haben, dass es in Ordnung ist. Wenn es sich jedoch um eine Zusammenarbeit handelt oder Ihre Arbeit öffentlich veröffentlicht und geteilt wird, ist es notwendig, schönen und besser lesbaren Code zu schreiben.
Verwandte Ressourcen:
4. Externes CSS und JavaScript verwendenWir haben bereits etwas CSS-Code in unseren <head>-Abschnitt erweitert. Dies ist ein schwerwiegender Verstoß, da es nur auf einer einzigen HTML-Seite funktioniert. Das Aufbewahren separater CSS-Dateien bedeutet, dass zukünftige Webseiten auf sie verweisen und denselben Code verwenden können. Das Gleiche gilt für Javascript. 123WORDPRESS.COM Hinweis : Natürlich muss dieses Problem nicht so schwerwiegend sein. Beispielsweise gilt für ein WordPress-Theme der in <head> geschriebene Code für alle WordPress-Seiten. Es ist jedoch immer noch eine sehr schlechte Angewohnheit, CSS in <head> zu schreiben.
5. Korrekte Tag-VerschachtelungIn unserem Website-Titel verwenden wir das <h1>-Tag als Website-Titel, was perfekt ist. Und ich habe einen Link zur Homepage hinzugefügt, aber der Fehler bestand darin, dass der Link außerhalb von <h1> platziert wurde und der <a>-Link <h1> umgab. Die meisten Browser können mit diesem einfachen Verschachtelungsfehler gut umgehen, aber technisch ist das nicht möglich. Ein Ankerlink ist ein Inline-Element, während die Überschrift <h1> ein Blockelement ist. Blockelemente sollten nicht innerhalb von Inline-Elementen platziert werden.
6. Entfernen Sie unnötige DIVsIch weiß nicht, wer den Begriff geprägt hat, aber mir gefällt der Begriff „Divitis“, der sich auf die übermäßige Verwendung von Divs in HTML-Markups bezieht. Ab einem bestimmten Punkt beim Erlernen des Webdesigns lernt jeder, wie man mit einem DIV viele andere Elemente umschließt und so ein praktisches Layout und Styling erreicht. Dies führt zum Missbrauch des DIV-Elements. Wir verwenden es dort, wo es benötigt wird und wo es völlig unnötig ist.
Im obigen Beispiel verwenden wir ein Div („topNav“), um die UL-Liste („bigBarNavigation“) einzuschließen. Da es sich bei DIV und UL jedoch um Blockelemente handelt, ist es nicht erforderlich, DIV zum Umschließen des UL-Elements zu verwenden. Verwandte Ressourcen:
7. Verwenden Sie bessere NamenskonventionenJetzt ist ein guter Zeitpunkt, um über die Benennung zu sprechen. Im Beispiel des vorherigen Artikels verwendete unsere UL den ID-Namen „bigBarNavigation“. „Navigation“ ist eine gute Beschreibung des Inhalts des Blocks, aber „big“ und „Bar“ beschreiben eher das Design als den Inhalt. Es kann zwar heißen, dass dieses Menü eine große Symbolleiste ist, aber wenn das Design des Menüs vertikal wird, wird der Name verwirrend und irrelevant.
Benutzerfreundliche Klassen- und ID-Namen sind beispielsweise „mainNav“, „subNav“, „sidebar“, „footer“ und „metaData“, die den darin enthaltenen Inhalt beschreiben. Schlechte Klassen- und ID-Namen beschreiben das Design, beispielsweise „bigBoldHeader“, „leftSidebar“ und „roundedBox“. 123WORDPRESS.COM Hinweis : Chris legt Wert darauf, ob die Benennung nach Inhalt oder Design erfolgen soll. Eine persönliche Ergänzung: ID- und Klassennamen sollten groß oder klein geschrieben werden , oder der erste Buchstabe des Wortes sollte groß geschrieben werden . Erstens sind Wörter, die vollständig in Großbuchstaben geschrieben sind, für die Lesbarkeit nicht förderlich. Vermeiden Sie sie daher. Ob alles klein geschrieben wird oder der erste Buchstabe des Wortes groß geschrieben wird, ist eine Frage der persönlichen Gewohnheit. Wichtig ist, dass Sie konsequent bleiben, egal, welche Regeln Sie verwenden . Verwenden Sie keine Kleinbuchstaben und schreiben Sie den ersten Buchstaben nicht immer groß, da dies zu Verwirrung führen kann. Darüber hinaus bin ich persönlich verwirrt, ob ich bei längeren Namen einen Unterstrich „_“, einen Bindestrich „-“ oder keinen hinzufügen soll. Oder vielleicht denke ich zu kompliziert. Es ist egal, welches Sie verwenden, bleiben Sie einfach konsequent. Vorherige Seite 1 2 Nächste Seite Gesamten Artikel lesen |
<<: Docker entfernt abnormale Containervorgänge
>>: Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js
Artikel empfehlen
Lösung, wenn der Docker-Container nicht auf den Host-Port zugreifen kann
Ich bin kürzlich bei der Arbeit auf ein Problem g...
Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten
Übersetzen Sie diese URL: http://translateth.is G...
Tutorial zur Installation von MySQL 5.7.18 mit einem RPM-Paket
System: CentOS 7 RPM-Pakete: mysql-community-clie...
Detaillierte Erklärung zur Verwendung der JavaScript-Paging-Komponente
Die Paginierungskomponente ist eine häufige Kompo...
So verwenden Sie das Modul-FS-Dateisystem in Nodejs
Inhaltsverzeichnis Überblick Dateideskriptoren Sy...
jQuery erzielt einen atmenden Karusselleffekt
In diesem Artikel wird der spezifische Code von j...
So ändern Sie die Zeichensatzkodierung in MySQL 5.5/5.6 unter Linux auf UTF8
1. Melden Sie sich bei MySQL an und verwenden Sie...
Web-Theorie: Bringen Sie mich nicht zum Nachdenken über Lesehinweise
Kapitel 1 <br />Das wichtigste Prinzip, um ...
Linux verwendet die suid vim.basic-Datei, um eine Rechteausweitung zu erreichen
Auf Kali reproduzieren Legen Sie zunächst die Sui...
Implementierung eines einfachen Timers in JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays
Es gibt auch zwei Server: Vorbereitung: Legen Sie...
Der eigentliche Prozess der Implementierung des Zahlenrätsels im WeChat-Applet
Inhaltsverzeichnis Funktionseinführung Rendern 1....
Eine kurze Diskussion über einen effizienten Algorithmus zum Erstellen von Baumstrukturen in JavaScript
Inhaltsverzeichnis Einführung Ideen Erstellen ein...
Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke
Ich habe vor kurzem Porter gelernt. Ich habe das ...
Wird der Index in der MySQL-Abfragebedingung verwendet?
Wenn Sie ein Arbeitgeber fragt, ob in einer MySQL...