12 Gesetze des Webdesigns für sauberen Code [Grafik]

12 Gesetze des Webdesigns für sauberen Code [Grafik]
Schöner Code ist die Grundlage einer schönen Website. Exzellentes CSS existiert nur auf ebenso exzellentem HTML. Sauberer, semantischer HTML-Code macht eine Website robuster. In diesem Artikel werden 12 Gesetze zum Erreichen eines sauberen Webdesign-Codes beschrieben und sind für jeden geeignet, der sich mit Webdesign beschäftigt.

1. Strenger DOCTYPE
Mach es richtig. Ob HTML 4.01 oder XHTML 1.0, beide bieten den strikten Modus. Die Verwendung des strikten Modus kann sicherstellen, dass unser Code keine Fehler verbirgt.


Quellen:

  • W3C: Empfohlene DTDs zur Verwendung in Ihrem Webdokument
  • Reparieren Sie Ihre Site mit dem richtigen DOCTYPE!
  • Bitte keine Übergangs-DOCTYPEs mehr
2. Zeichensatzdeklaration, Kodierung von Sonderzeichen Die Zeichensatzdeklaration sollte am Anfang des <head>-Abschnitts stehen, damit der Browser weiß, wie er den gesamten Inhalt der Webseite, einschließlich des Titels, anzeigen soll. Darüber hinaus werden einige Sonderzeichen, beispielsweise &, am besten durch &amp; ersetzt, was die sicherste Methode ist.


Quellen:
  • Wikipedia: UTF-8
  • Ein Tutorial zu Zeichencodeproblemen
  • Die erweiterte ASCII-Tabelle
3. Richtiges Sperren und Einrücken hat keinen Einfluss auf die Darstellung der Webseite, verbessert aber das Lesen des Quellcodes erheblich. Es gibt keine speziellen Regeln für Einrückungen, es empfiehlt sich jedoch, immer konsistent zu sein.


Quellen:
  • Bereinigen Sie Ihre Webseiten mit HTML TIDY
4. Platzieren Sie CSS und JavaScript in externen Dateien. Wenn Sie CSS und JavaScript als Referenz in externen Dateien speichern, verringert sich nicht nur die Größe einer einzelnen Webseite, sondern auch, dass andere Webseiten diese Codes gemeinsam nutzen können. Darüber hinaus kann der Cache-Mechanismus des Browsers das wiederholte Herunterladen desselben Codes effektiv reduzieren.

5. Verschachteln Sie Tag-Tags richtig, wie unten gezeigt. In der ersten Codezeile wird das <h1>-Tag in das <a>-Tag verschachtelt. Obwohl die meisten Browser es korrekt rendern, ist dies keine gute Angewohnheit. Das Tag ist ein Blockobjekt, aber ein Inline-Objekt, und ein Inline-Objekt sollte kein Blockobjekt enthalten.


6. Eliminieren Sie unnötige <div>
<div> wird oft missbraucht (insbesondere im DIV+CSS-Mythos, in dem wir uns jetzt befinden – Übersetzer). Die Leute möchten alles in ein <div> packen, um ihnen CSS-Stile zuzuweisen. Dieser Missbrauch führt zu einer Aufblähung.


Quellen:
  • Divitis: Was es ist und wie man es heilt.
7. Verwenden Sie bessere Namenskonventionen. Wie in der folgenden Abbildung gezeigt, ist die CSS-Klasse von Cat „red italic“ (rot kursiv) benannt, was darauf hindeutet, dass Cat rote Kursivschrift verwendet. Was ist, wenn Sie „Cat“ in blau fett ändern möchten?



8. Versuchen Sie, das Textlayout mit CSS zu steuern, wie in der folgenden Abbildung gezeigt. Verwenden Sie keine Großbuchstaben direkt. Verwenden Sie CSS, um das Format dieser Textlayouts zu steuern. Dies ist flexibler.


9. Weisen Sie <body> eine separate Klasse/ID zu
Durch die Zuweisung einer separaten Klasse/ID zum Body-Tag können Sie jedes Objekt auf der Seite gut lokalisieren, da sich alle Objekte auf der Seite im Body befinden.


Quellen:
  • Identifizieren Sie Ihren Text für eine bessere CSS-Kontrolle und Spezifität
  • Fallstudie: Wiederverwenden von Stilen mit einer Body-Klasse
10. Validierung Es versteht sich von selbst, dass Sie den Code der Webseite so oft wie möglich validieren sollten. Obwohl einige Codefehler automatisch vom Browser korrigiert werden können, haben manche Fehler schlimme Folgen, insbesondere wenn Sie sich im strengen Modus befinden. Auch wenn es nichts bewirkt, kann der Anblick des grünen W3C-Validierungszeichens zumindest ein besseres Gefühl geben.

Es besteht kein Grund, zu streng zu sein, wenn es darum geht, ob eine Website die W3C-Validierung besteht oder nicht. Beim Webdesign gibt es noch viele weitere Überlegungen. Wenn Sie sich nur an die Ergebnisse der W3C-Validierung halten, kann dies einige wichtigere Faktoren beeinflussen. Beispielsweise weist IE6 viele Fehler in den W3C-Standards auf. Wenn Sie angeben, dass Ihre Website IE6 nicht unterstützt, um die W3C-Validierung zu 100 % zu bestehen, wird dies zumindest in China mehr Ärger als Nutzen bringen. - Übersetzer


Quellen:
  • Der W3C Markup Validation Service
  • XHTML-CSS-Validator
  • Kostenloser Site Validator (überprüft die gesamte Site, nicht nur eine Seite)
11. Sinnvolle Strukturierung Behalten Sie die Struktur der Webseite in einer logischen Reihenfolge bei.

12. Geben Sie Ihr Bestes. Wenn Sie von Grund auf neu schreiben, ist es sicherlich viel einfacher, sich an die oben genannten Grundsätze zu halten. Wenn Sie alten Code ändern müssen, wird das mühsam. Einige CMS-Systeme haben einen schlechten Code, der Sie ins Stocken bringt, oder Ihre Website ist groß und es gibt zu viele Dinge zu ändern. In jedem Fall ist es sehr wichtig, immer gute Gewohnheiten beizubehalten.

<<:  Detaillierter Prozess zur Installation von Docker, zum Erstellen von Images, zum Laden und Ausführen von NodeJS-Programmen

>>:  So verwenden Sie Javascript zum Erstellen einfacher Algorithmen

Artikel empfehlen

So stellen Sie versehentlich gelöschte Nachrichtendateien unter Linux wieder her

Wenn Dateien von einem Prozess verwendet und vers...

Docker verwendet Busybox, um ein Basis-Image zu erstellen

Die erste Zeile eines Docker-Images beginnt mit e...

js, um den Popup-Effekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie das JQuery-Editor-Plugin tinyMCE

Ändern Sie die vereinfachte Dateigröße und laden ...

Schritte zur Domänennamenauflösung beim Alibaba Cloud Server (Tutorial für Anfänger)

Für Anfänger, die gerade mit dem Erstellen einer ...

Der Unterschied zwischen KEY, PRIMARY KEY, UNIQUE KEY und INDEX in MySQL

Das im Titel angesprochene Problem lässt sich sch...

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

Ich habe vor kurzem angefangen, MySQL zu lernen. ...

Detaillierte Erklärung zur Einstellung des Hintergrundbild-Attributs in HTML

Bei Bildern denken wir zuerst an das Hintergrundb...

Spezifische Implementierungsmethoden für MySQL-Tabellen-Sharding und -Partitionierung

Vertikaler Tisch Vertikale Tabellenaufteilung bed...

HTML implementiert ein festes schwebendes, halbtransparentes Suchfeld auf Mobilgeräten

Frage. Im mobilen Shopping-Mall-System sehen wir ...

4 Möglichkeiten, sich schnell Linux-Befehle selbst beizubringen

Wenn Sie ein Linux-Meister werden möchten, ist di...

MySQL-Batch löschen großer Datenmengen

MySQL-Batch löschen großer Datenmengen Angenommen...

Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code

Möglicherweise ist Ihnen aufgefallen, dass auf die...

Überwachung sowie Betrieb und Wartung von Linux-Diensten

Inhaltsverzeichnis 1. Installieren Sie das psutil...

Beispiele für die Verwendung des Linux-Touch-Befehls

Detaillierte Erklärung des Linux-Touch-Befehls: 1...