15 Best Practices für HTML-Anfänger

Hier sind 30 Best Practices für HTML-Anfänger.

1. Halten Sie die Tags geschlossen

In der Vergangenheit habe ich oft Code wie den folgenden gesehen:

Beachten Sie, dass das äußere umschließende UL/OL-Tag weggelassen wurde (ob absichtlich oder nicht, wer weiß) und das schließende LI-Tag vergessen wurde. Nach heutigen Maßstäben ist dies eindeutig eine schlechte Praxis und sollte unbedingt vermieden werden. Kurz gesagt: Halten Sie die Tags geschlossen. Andernfalls können beim Validieren der HTML-Tags Probleme auftreten.

Ein besserer Weg

2. Den richtigen Dokumenttyp angeben

Ich habe in der Vergangenheit an vielen CSS-Foren teilgenommen. Wenn ein Benutzer auf ein Problem stößt, empfehlen wir ihm, zunächst zwei Dinge zu tun:

1. Überprüfen Sie die CSS-Datei, um sicherzustellen, dass keine Fehler vorliegen.

2. Bestätigen Sie, dass der richtige Dokumenttyp hinzugefügt wurde

DOCTYPE erscheint vor dem HTML-Tag und teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung aus beidem enthält, sodass der Browser sie richtig analysieren kann.

Sie können zwischen vier gängigen Dokumenttypen wählen:

Es gibt unterschiedliche Meinungen darüber, welche Dokumenttypdeklaration verwendet werden soll. Es wird allgemein angenommen, dass die Verwendung der strengsten Deklaration die beste Option ist, aber Untersuchungen zeigen, dass die meisten Browser diese Deklaration auf normale Weise analysieren, sodass sich viele Leute für die Verwendung des HTML 4.01-Standards entscheiden. Entscheidend bei der Auswahl einer Anweisung ist, ob sie wirklich für Sie geeignet ist. Sie müssen daher umfassend überlegen, welche Anweisung am besten zu Ihrem Projekt passt.

3. Verwenden Sie niemals Inline-Styles

Wenn Sie mit dem Schreiben von Code beschäftigt sind, können Sie häufig bequem oder auf einfache Weise Inline-CSS-Code hinzufügen, etwa so:

Dies erscheint bequem und problemlos. Dies ist jedoch ein Fehler in Ihrer Codierpraxis.

Wenn Sie Code schreiben, sollten Sie Stylesheet-Code am besten erst hinzufügen, wenn die Inhaltsstruktur vollständig ist.

Diese Art der Kodierung ähnelt einem Guerillakrieg, bei dem es sich um einen sehr nachahmenden Ansatz handelt. ——Chris Coyier

Ein besserer Ansatz besteht darin, den Stil dieses P nach Abschluss des Tag-Teils in einer externen Stylesheet-Datei zu definieren.

Anregung

4. Fügen Sie alle externen CSS-Dateien in den Head-Tag ein

Theoretisch können Sie CSS-Stylesheets überall importieren, die HTML-Spezifikation empfiehlt jedoch, sie in das Head-Tag einer Webseite zu importieren, um die Seitendarstellung zu beschleunigen.

Während des Entwicklungsprozesses bei Yahoo stellten wir fest, dass die Einführung von Stylesheets in das Head-Tag das Laden von Webseiten beschleunigen würde, da die Seite so schrittweise gerendert werden könnte. ——ySlow-Team

5. JavaScript-Dateien werden unten platziert

Ein Grundsatz, den Sie nicht vergessen sollten, besteht darin, den Benutzern die Seite so schnell wie möglich zu präsentieren. Beim Laden eines Skripts wird der Ladevorgang der Seite angehalten, bis das Skript vollständig geladen und ausgeführt wurde. Daher wird mehr Benutzerzeit verschwendet.

Wenn Ihre JS-Datei nur dazu dient, bestimmte Funktionen zu implementieren (z. B. Schaltflächenklickereignisse), können Sie diese ruhig am Ende des Textkörpers einfügen. Dies ist definitiv die beste Methode.

Anregung

6. Verwenden Sie niemals Inline-JavaScript. Es ist nicht mehr 1996!

Vor vielen Jahren gab es eine Möglichkeit, JS-Code direkt zu HTML-Tags hinzuzufügen. Dies kommt insbesondere bei einfachen Fotoalben häufig vor. Im Wesentlichen wird dem Tag ein „onclick“-Ereignis angehängt, das die gleiche Wirkung hat wie ein JS-Code. Es besteht keine Notwendigkeit, zu viel zu diskutieren. Dieser Ansatz sollte nicht verwendet werden. Der Code sollte in eine externe JS-Datei übertragen werden und dann „addEventListener/attachEvent“ verwendet werden, um Ereignis-Listener hinzuzufügen. Oder verwenden Sie bei Verwendung eines Frameworks wie jQuery einfach die „Klick“-Methode.

7. Gleichzeitig entwickeln und verifizieren

Wenn Sie gerade erst mit dem Webdesign beginnen, empfehle ich Ihnen dringend, die Web Developer Toolbar herunterzuladen (Chrome-Benutzer suchen bitte im App Store danach, IE-Benutzer haben möglicherweise nicht so viel Glück) und die „HTML Standards Validation“ und „CSS Standards Validation“ jederzeit während des Codierungsprozesses zu verwenden. Wenn Sie glauben, dass CSS eine sehr einfach zu erlernende Sprache ist, wird es Ihr Schicksal sein. Durch Ihren nachlässigen Code wird Ihre Seite voller Schlupflöcher und Probleme sein. Eine gute Methode besteht darin, zu überprüfen, zu überprüfen und nochmals zu überprüfen.

8. Laden Sie Firebug herunter

Firebug ist zweifellos das beste Plug-In für die Webentwicklung. Es kann nicht nur JavaScript debuggen, sondern Ihnen auch ein intuitives Verständnis der Eigenschaften und Positionen von Seiten-Tags ermöglichen. Ohne weitere Umschweife, herunterladen!

9. Verwenden Sie Firebug

Nach Beobachtung des Autors nutzen die meisten Benutzer nur 20 % der Funktionen von Firebug, was eine echte Verschwendung ist. Sie können genauso gut ein paar Stunden damit verbringen, dieses Tool systematisch zu erlernen. Ich glaube, es wird Ihnen helfen, mit halbem Aufwand das doppelte Ergebnis zu erzielen.

10. Tag-Namen klein schreiben

Theoretisch ist HTML nicht case-sensitiv, Sie können schreiben, was Sie wollen, zum Beispiel:

So sollte man es aber besser nicht schreiben, der Aufwand, größere Buchstaben einzutippen, bringt nichts und macht den Code unschön.

Anregung

11. Verwenden Sie H1-H6-Tags

Es wird empfohlen, alle sechs dieser Tags auf Ihren Webseiten zu verwenden. Obwohl die meisten Leute nur die ersten vier verwenden, bietet die Verwendung der meisten H viele Vorteile, wie z. B. Gerätefreundlichkeit, Suchmaschinenfreundlichkeit usw. Sie können auch alle Ihre P-Tags durch H6 ersetzen.

12. Verwenden Sie eine ungeordnete Liste (UL), um Ihr Navigationsmenü zu umschließen

Normalerweise verfügt eine Website über ein Navigationsmenü, das Sie wie folgt definieren können:

Wenn Sie schönen Code schreiben möchten, sollten Sie diesen Ansatz besser nicht verwenden.

Warum UL zum Layout des Navigationsmenüs verwenden? ——Weil UL für Definitionslisten geboren wurde

Es ist besser, es so zu definieren:

15. Erfahren Sie, wie Sie mit dem Internet Explorer umgehen

Der Internet Explorer war für Frontend-Entwickler schon immer ein Albtraum!

Wenn Ihr CSS-Stylesheet grundsätzlich fertig ist, können Sie ein separates Stylesheet für den IE erstellen, das dann nur im IE wirksam ist:

Diese Codes bedeuten: Wenn der Browser des Benutzers IE6 oder niedriger ist, wird dieser Code wirksam. Wenn Sie auch IE7 einbeziehen möchten, ändern Sie „[if lt IE 7]“ in „[if lte IE 7]“.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.