Immer wenn ich eine schöne Website besuche, kann ich nicht anders, als mir den Quellcode anzusehen. Es ist, als hätte man eine Röntgenbrille und könnte jeden sehen – sogar durch sein Feigenblatt. Das ist einfach eine Selbstverständlichkeit! Ich kann es kaum erwarten herauszufinden, ob diese wunderschöne Website mit demselben wunderschönen Code geschrieben ist oder ob sie nur eine Schönheit in der Schönheit ist. Code? Schönheit? sicherlich! Schließlich ist Code wie Poesie. (Übersetzungshinweis: „Code ist Poesie“ ist der Slogan des berühmten Blogging-Systems WordPress.) Dies ist nur das einfachste HTML. Es ist natürlich nicht so komplex und elegant wie andere dynamische Sprachen, behält aber dennoch den Charme bei Schöpfer. Künstlerische Striche.
Das brachte mich zum Nachdenken: Wie kann ich den Code schön machen? Bei HTML ist das alles manuelle Arbeit. Schauen wir uns an, wie Auszeichnungssprachen einen Schönheitszustand erreichen können.
Das Bild ist groß genug (2000 x 2000), dass Sie es ausdrucken, in Ihr persönliches Schließfach stecken und Ihre Freunde beeindrucken können. Allerdings ist das tatsächlich eine verwirrende Größe. Ich werde das ursprüngliche PSD-Bild veröffentlichen, damit jeder es ändern kann.
HTML5 – HTML5 und seine neuen Elemente bringen eine beispiellose Schönheit.
DOCTYPE – HTML5 hat den besten Dokumenttyp .
Einrückung – Tabulatoren und Leerzeichen werden verwendet, um Code einzurücken, um die Eltern-Kind-Beziehung zwischen Tags korrekt anzuzeigen und die hierarchische Struktur hervorzuheben.
Zeichensatz – Eine Zeichensatzdeklaration muss im Header vor dem gesamten Inhalt erfolgen.
Titel – Der Titel der Website ist einfach und klar. Beginnen Sie mit der Beschreibung der Funktion der Seite nach dem Trennzeichen und schließen Sie mit dem Titel der Website ab.
CSS – verwendet nur ein einfaches Stylesheet (die Medientypen werden im Stylesheet deklariert) und richtet sich nur an gute Browser. IE6 und niedriger erhalten ein generisches Stylesheet.
Textkörper – Indem Sie dem Textkörper eine ID zuweisen, können Sie ihn für verschiedene Seiten eindeutig gestalten, ohne dass zusätzliches Markup erforderlich ist.
JavaScript – Wird jQuery (die schönste JavaScript -Skriptbibliothek) von Google genannt. Es wird nur eine einzige JavaScript-Datei geladen. Auf jedes Skript wird unten auf der Seite verwiesen.
Dateipfad – Verwenden Sie aus Effizienzgründen relative Pfade für Site-Ressourcen. Aus Sicht der Anpassung an den Nachdruck verwenden Inhaltsdateien (z. B. Bilder) absolute Pfade.
Bildattribute – Das Bild enthält alternativen Text, hauptsächlich für den Fall, dass das Bild fehlt, kann aber auch zur Überprüfung verwendet werden. Um die Rendereffizienz zu verbessern, ist es am besten, die Breite und Höhe des Bildes anzugeben.
Hauptinhalt zuerst – Der Hauptinhalt der Seite sollte nach dem grundlegenden Markup und der Navigation und vor allen Hilfsinhalten (z. B. Seitenleisten) stehen.
Geeignete beschreibende Elemente auf Blockebene – HEADER, NAV, SECTION, ARTICLE, ASIDE – diese neuen „ Beschreibungsabschnitte “ beschreiben den Inhalt besser als die vorherigen DIV.
Hierarchie – Die Großschreibung von Titel-Tags ist effektiv und folgt einer klaren „ Hierarchie “.
Geeignete beschreibende Tags – Listen werden je nach Bedarf mit Tags versehen : unsortierte, sortierte und benutzerdefinierte Listen, die nicht häufig verwendet werden.
Gemeinsamer Inhalt eingeschlossen – Derselbe Inhalt, der auf verschiedenen Seiten erscheint, wird am besten serverseitig in die Seite eingebunden. (Mit welcher Methode, Sprache, welchem CMS auch immer, was auch immer für Sie funktioniert.)
Semantische Klassen – Es ist nicht nur notwendig, korrekte Elementnamen einzurichten, sondern auch sicherzustellen, dass die Namen von Klassen und IDs semantisch sind : Sie können auch ohne spezifische Anweisungen eine beschreibende Rolle spielen. (Zum Beispiel ist „col“ besser als „left“)
Klassen – Wenn mehrere Elemente ähnliche Stile verwenden müssen, versuchen Sie, dieselbe Klasse für sie zu definieren. (Wiederverwendbarkeit)
IDs – Wenn das Element nur einmal auf der Seite erscheint, versuchen Sie, IDs für sie zu definieren, und definieren Sie nicht dieselbe ID für verschiedene Elemente.
Dynamische Elemente – Dynamische Effekte werden nur dann hinzugefügt, wenn sie wirklich benötigt werden.
Kodierte Zeichen – Wenn Sonderzeichen vorkommen, achten Sie bitte auf die Zeichenkodierung .
Frei von Styling – Alles auf der Seite hat nichts mit Styling zu tun , und Sie müssen nicht einmal angeben, welchen Stil Sie wünschen. Alles auf der Seite ist auf die folgenden drei Elemente beschränkt: erforderliche Site-Ressourcen, Inhalt, Beschreibung.
Kommentare – Beim Betrachten des Codes werden Inhalte, die keiner besonderen Hervorhebung bedürfen oder nicht besonders offensichtlich sind, in die Kommentare aufgenommen.
Gültig – Site-weites Markup entspricht der W3C- Validierung . Achten Sie auf den Tag-Abschluss, stellen Sie die erforderlichen Attribute sicher, vermeiden Sie veraltete Methoden usw.