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

Mysql-Trigger werden in PHP-Projekten zum Sichern, Wiederherstellen und Löschen von Informationen verwendet

Beispiele: Über den PHP-Hintergrundcode können Si...

Zusammenfassung der JavaScript-Timertypen

Inhaltsverzeichnis 1.setInterval() 2.setTimeout()...

MySQL-Optimierung Verbindungsoptimierung

Im Artikel MySQL-Optimierung: Cache-Optimierung w...

Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats

Im Allgemeinen wird während des Entwicklungsproze...

So simulieren Sie eine Aufzählung mit JS

Vorwort Im aktuellen JavaScript gibt es kein Konz...

Installieren Sie mysql5.7.10 manuell unter Ubuntu

Dieses Tutorial beschreibt den Prozess der manuel...

js um das Schlangenspiel mit Kommentaren zu implementieren

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Diskussion über die Indexseitenstruktur, den Einfügepuffer und den adaptiven Hash-Index von InnoDB

Physische Struktur eines InnoDB-Index Alle InnoDB...

Detaillierte Erklärung von Group By und Having in MySQL

Mit der GROUP BY-Syntax können die Abfrageergebni...

Detaillierte Erklärung der MySQL-Gruppensortierung, um die Top N zu finden

MySQL-Gruppensortierung, um die obersten N zu fin...

Was ist BFC? So löschen Sie Floats mithilfe von CSS-Pseudoelementen

BFC-Konzept: Der Blockformatierungskontext ist ei...

JavaScript ist unzuverlässig undefiniert

undefined Wenn wir in JavaScript feststellen möch...

Konfigurationsmethode für die ZIP-Installation der komprimierten MySQL-Paketversion

Es gibt einige Probleme mit der komprimierten Ver...

Detailliertes Beispiel für die Verwendung von CSS zur Verschönerung von HTML-Formular-Steuerelementen (Formularverschönerung)

1. Grundlegende Syntaxstruktur der HTML-Senden- u...

Ein sehr ausführliches Tutorial zur Installation von rocketmq unter Docker Desktop

Installieren Sie Docker Desktop Download-Adresse:...