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

202 kostenlose, hochwertige XHTML-Vorlagen (2)

Nach dem vorherigen Artikel 202 kostenlose hochwe...

Erste Erkundung gängiger Befehle für Docker-Anfänger

Bevor wir Docker offiziell verwenden, machen wir ...

Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“

Übernahme des Geschäfts: Sehen Sie sich die Gehal...

5 Möglichkeiten zur Migration von MySQL zu ClickHouse

Die Datenmigration muss von MySQL nach ClickHouse...

So lassen sich Python-Skripte direkt unter Ubuntu ausführen

Nehmen wir als Beispiel das Übersetzungsprogramm....

Lösung, wenn der Docker-Container nicht auf den Host-Port zugreifen kann

Ich bin kürzlich bei der Arbeit auf ein Problem g...

Zusammenfassung der Erfahrungen beim Website-Erstellen

<br />Welche Grundsätze sollten beachtet wer...

Implementierung eines Redis Master-Slave-Clusters basierend auf Docker

Inhaltsverzeichnis 1. Ziehen Sie das Redis-Image ...

Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode

Code kopieren Der Code lautet wie folgt: <HTML...

Fallstudie zu den SQL ROW_NUMBER()- und OVER()-Methoden

Syntaxformat: row_number() über (Partition durch ...

Verschachtelte Anzeigeimplementierung der Vue-Router-Ansicht

Inhaltsverzeichnis 1. Routing-Konfiguration 2. Vu...

So integrieren Sie Bilder eleganter in Vue-Seiten

Inhaltsverzeichnis Fehlerdemonstration Durch bere...

Zusammenfassung der grundlegenden Verwendung des $-Symbols in Linux

Linux-Version: CentOS 7 [root@azfdbdfsdf230lqdg1b...

Verwenden von CSS3 zum Erzielen von Übergangs- und Animationseffekten

Warum sollten wir CSS-Animationen anstelle von JS...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Windows 64 Bit

In diesem Artikel finden Sie das Installations- u...