30 Tipps zum Schreiben von HTML-Code

30 Tipps zum Schreiben von HTML-Code

1. HTML-Tags immer schließen

Im Quellcode der vorherigen Seiten sehen wir oft Anweisungen wie diese:

 <li>Some text here. <li>Some new text here. <li>You get the idea.

Vielleicht konnten wir in der Vergangenheit solche nicht schließenden HTML-Tags tolerieren, aber nach heutigen Maßstäben ist dies höchst unerwünscht und muss zu 100 % vermieden werden. Denken Sie daran, Ihre HTML-Tags zu schließen. Andernfalls wird die Überprüfung nicht bestanden und es können unvorhergesehene Probleme auftreten.

Besser ist es, dieses Formular zu verwenden:

 <ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>

2. Den richtigen Dokumenttyp (DocType) deklarieren

Ich war früher Mitglied in vielen CSS-Foren. Wenn ein Benutzer auf ein Problem stieß, wurde ihm empfohlen, zunächst zwei Dinge zu tun:

  • 1. Validieren Sie die CSS-Datei und beheben Sie alle sichtbaren Fehler
  • 2. Fügen Sie den Dokumenttyp Doctype hinzu

DOCTYPE wird definiert, bevor das HTML-Tag erscheint. Es teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung aus beidem enthält, sodass der Browser die Tags richtig analysieren kann.

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

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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 keine eingebetteten CSS-Stile

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

 <p style="color: red;">123WORDPRESS.COM</p>

Dies scheint zwar praktisch und problemlos, kann jedoch zu Problemen in Ihrem Code führen.

Wenn Sie mit dem Schreiben von Code beginnen, beginnen Sie am besten damit, Stilcode hinzuzufügen, nachdem die Inhaltsstruktur fertiggestellt 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 in der Stylesheet-Datei zu definieren:

 someElement > p { color: red; }

4. Importieren Sie alle Stylesheet-Dateien in den Head-Tag der Seite

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 eines Stylesheets im Head-Tag das Laden der Webseite beschleunigen würde.
Denn dadurch kann die Seite progressiv gerendert werden. ——ySlow-Team

 <head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>

5. JavaScript-Dateien am Seitenende importieren

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 ist. Dadurch wird mehr Zeit des Benutzers 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.

Beispiel :

 <p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>

6. Verwenden Sie kein eingebettetes JavaScript. Wir leben im 21. Jahrhundert!

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. Ohne zu sehr ins Detail zu gehen, sollte dieser Ansatz nicht verwendet werden. Stattdessen sollte der Code in eine externe JS-Datei verschoben und dann der Event-Listener mit " addEventListener / attachEvent " hinzugefügt werden. Oder verwenden Sie ein Framework wie jQuery, bei dem Sie nur die Methode „Clock“ verwenden müssen.

 $('a#moreCornInfoLink').click(function() { alert('Want to learn more about corn?'); });

7. Führen Sie jederzeit während der Entwicklung eine Standardüberprüfung durch

Viele Menschen verstehen die Bedeutung und den Wert der Standardüberprüfung nicht wirklich. Der Autor hat dieses Problem in einem Blog ausführlich analysiert. Kurz gesagt: Die Standardüberprüfung soll Ihnen dienen und Ihnen keine Probleme bereiten.

Wenn Sie gerade erst mit dem Webdesign beginnen, wird dringend empfohlen, dass Sie dieses Webentwicklungstool herunterladen und den „HTML Standards Validator“ und den „CSS Standards Validator“ jederzeit während des Codierungsprozesses verwenden. Wenn Sie glauben, dass CSS eine sehr einfach zu erlernende Sprache ist, wird es Ihr Schicksal sein. Durch Ihren schlampigen Code wird Ihre Seite voller Schlupflöcher und Probleme sein. Eine gute Methode ist, den Code 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. Laden Sie es ohne weitere Umschweife herunter!

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.

Firebug-Tutorial :

  • Übersicht über Firebug
  • Debuggen von Javascript mit Firebug – Video-Tutorial

10. Verwenden Sie Tags in Kleinbuchstaben

Theoretisch könnten Sie beliebiges Markup wie folgt schreiben:

 <DIV> <P>Here's an interesting fact about corn. </P> </DIV>

Es ist besser, nicht so zu schreiben. Es macht keinen Sinn, größere Buchstaben zu schreiben und macht den Code hässlich. Es ist besser, so zu schreiben:

 <div> <p>Here's an interesting fact about corn. </p> </div>

11. Verwenden Sie H1 – H6-Tags

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

12. Wenn es ein Blog ist, reservieren Sie H1 für den Artikeltitel

Heute habe ich eine Diskussion auf Twitter gestartet: Sollte H1 im Logo oder im Artikeltitel definiert werden? 80 % der Leute entschieden sich für Letzteres.

Wie Sie es verwenden, hängt natürlich von Ihren Anforderungen ab, aber ich schlage vor, dass Sie beim Erstellen eines Blogs den Artikeltitel als H1 festlegen, was für die Suchmaschinenoptimierung (SEO) sehr vorteilhaft ist.

13. Laden Sie ySlow herunter

Das Team von Yahoo hat in den letzten Jahren viel großartige Arbeit im Bereich der Front-End-Entwicklung geleistet. Vor nicht allzu langer Zeit wurde eine Firebug-Erweiterung namens ySlow veröffentlicht, die Ihre Webseite analysiert und ein „Zeugnis“ zurückgibt, das jeden Aspekt der Seite detailliert beschreibt und Verbesserungsbereiche vorschlägt. Obwohl es ein bisschen hart ist, wird es Ihnen auf jeden Fall helfen und ist sehr zu empfehlen – ySlow!

14. Verwenden Sie UL-Einträge zum Layouten von Navigationsmenüs

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

 <div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>

Wenn Sie schönen Code schreiben möchten, sollten Sie diese Methode 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:

 <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>

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:

 <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->

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]“.

16. Verwenden Sie einen guten Code-Editor

Unabhängig davon, ob Sie Windows- oder Mac-Benutzer sind, stehen Ihnen viele hervorragende Editoren zur Auswahl:

Mac-Benutzer

  • Koda
  • Espresso
  • TextMate
  • Aptana
  • DreamWeaver CS4

PC-Benutzer

  • InType
  • E-Text-Editor
  • Notizblock++
  • Aptana
  • Dreamweaver CS4

17. Komprimieren Sie den Front-End-Code!

Javascript-Komprimierungsdienst

  • Javascript-Kompressor
  • JS-Kompressor

CSS-Komprimierungsdienste

  • CSS-Optimierer
  • CSS-Kompressor
  • Sauberes CSS

18. Reduzieren, reduzieren, reduzieren

Wenn wir auf die erste Seite zurückblicken, die die meisten von uns geschrieben haben, werden wir definitiv eine ernsthafte „DIV-Sucht“ (Divitis) feststellen. Normalerweise besteht der Instinkt von Anfängern darin, einen Absatz mit einem DIV zu umschließen und dann weitere DIVs einzufügen, um die Positionierung zu kontrollieren. —— Tatsächlich ist dies eine ineffiziente und schädliche Praxis.

Überprüfen Sie nach dem Schreiben einer Webseite diese unbedingt mehrmals und versuchen Sie, die Anzahl der Elemente zu reduzieren.

Wenn das Layout einer Liste mit UL erstellt werden kann, verwenden Sie für das Layout keine einzelnen DIVs.

Beim Schreiben eines Artikels lautet der Schlüssel „Reduzieren, Reduzieren, Reduzieren“. Dasselbe Prinzip gilt auch beim Schreiben einer Seite.

19. Fügen Sie allen Bildern Alt-Attribute hinzu

Die Vorteile des Hinzufügens von Alt-Attributen zu Bildern liegen auf der Hand: Dadurch können auch Benutzer, die Bilder deaktivieren oder spezielle Geräte verwenden, Ihre Informationen ohne Hindernisse verstehen und es ist benutzerfreundlich für Bildersuchmaschinen.

Firefox unterstützt die Anzeige des Alt-Attributs von Bildern nicht, daher können Sie das Titelattribut hinzufügen:

 <img src="cornImage.jpg" alt="123WORDPRESS.COM" title="123WORDPRESS.COM" />

20. Lernen Sie, lange aufzubleiben

Ich lerne und arbeite oft bis in die frühen Morgenstunden, ohne es zu merken, und ich denke, das ist eine gute Sache.

Meine „Aha“-Momente erlebe ich normalerweise spät in der Nacht, zum Beispiel, als ich das Konzept der „Closures“ in JavaScript vollständig verstanden habe. Wenn Sie diesen magischen Moment noch nicht erlebt haben, probieren Sie es jetzt aus!

21. Quellcode anzeigen

Nichts wird Ihnen helfen, HTML schneller zu lernen, als Ihre Idole zu imitieren. Zuerst mussten wir alle Nachahmer sein und dann langsam unseren eigenen Stil entwickeln. Studieren Sie den Code Ihrer bevorzugten Webseiten, um zu sehen, wie sie ihre Inhalte implementieren. Dies ist die einzige Methode für Experten, Sie müssen sie ausprobieren. Hinweis: Lernen Sie einfach ihren Codierstil und imitieren Sie ihn, nicht kopieren und einfügen!

Achten Sie im Internet auf alle möglichen coolen JavaScript-Effekte. Wenn es so aussieht, als ob ein Plug-In verwendet wird, können Sie den Namen des Plug-Ins anhand des Dateinamens im Head-Tag seines Quellcodes finden und dann lernen, es zu Ihrem eigenen Vorteil zu verwenden.

22. Definieren Sie Stile für alle Elemente

Dies ist insbesondere dann erforderlich, wenn Sie Websites für andere Unternehmen erstellen. Sie verwenden das Blockquote-Tag selbst nicht? Dann nutzen Benutzer es vielleicht, aber Sie selbst nutzen OL nicht? Dies gilt möglicherweise auch für Benutzer. Nehmen Sie sich die Zeit, eine Seite zu erstellen, die die Stile der Elemente ul, ol, p, h1-h6, Blockzitate usw. zeigt, um zu überprüfen, ob etwas fehlt.

23. Nutzung von Diensten Dritter

Anmerkung des Übersetzers: Der englische Originaltitel lautet „Using Twitter“

Es gibt viele beliebte APIs im Internet, die kostenlos zu Webseiten hinzugefügt werden können. Diese Tools sind sehr leistungsstark. Damit können Sie viele clevere Funktionen erreichen und – noch wichtiger – Ihre Website besser bewerben.

24. Lernen Sie Photoshop

Photoshop ist ein wichtiges Werkzeug für Frontend-Entwickler. Wenn Sie bereits HTML und CSS beherrschen, können Sie auch mehr über Photoshop erfahren.

  1. Es gibt viele englische Schmuck-Tutorials auf Psdtuts+: Videos-Bereich
  2. Lynda.com bietet auch viele Tutorials, die jedoch 25 US-Dollar kosten.
  3. Tutorial-Reihe „ Du bist schlecht in Photoshop “
  4. Verbringen Sie ein paar Stunden damit, Photoshop-Tastenkombinationen zu lernen

25. Lernen Sie jedes HTML-Tag

Obwohl einige HTML-Tags selten verwendet werden, sollten Sie sie dennoch kennen. Zum Beispiel „abbr“, „cite“ usw. Sie müssen sie lernen, falls Sie sie brauchen.

26. Beteiligen Sie sich an Community-Diskussionen

Es gibt viele hervorragende Ressourcen im Internet und in der Community gibt es viele Experten. Hier können Sie selbst lernen oder erfahrene Entwickler konsultieren.

27. CSS Reset verwenden

„Css Reset“ bedeutet auch „Css zurücksetzen“, also das Zurücksetzen einiger HTML-Tag-Stile oder der Standardstile.

Im Internet wird auch heftig darüber diskutiert, ob CSS Reset verwendet werden sollte. Der Autor empfiehlt die Verwendung. Sie können zunächst einige ausgereifte CSS-Resets auswählen und diese dann langsam zu einem für Sie passenden weiterentwickeln.

28. Elemente ausrichten

Kurz gesagt, Sie sollten die Elemente Ihrer Webseite so genau wie möglich aneinander ausrichten. Sie können Ihre Lieblings-Websites beobachten und Sie werden feststellen, dass deren Logos, Titel, Diagramme und Absätze auf jeden Fall sehr ordentlich ausgerichtet sind. Andernfalls sieht es unordentlich und unprofessionell aus.

29. Über PSD-Slicing

Nachdem Sie nun HTML, CSS und Photoshop beherrschen, müssen Sie auch lernen, wie Sie PSD in Bilder und Hintergründe für Webseiten umwandeln. Hier sind zwei gute Tutorials:

  • Zerlegen und würfeln Sie das PSD
  • Von PSD zu HTML/CSS

30. Frameworks nicht willkürlich verwenden

Es gibt viele hervorragende Frameworks für Javascript und CSS, aber wenn Sie Anfänger sind, sollten Sie diese nicht überstürzt verwenden. Wenn Sie sich noch nicht mit CSS auskennen, wird die Verwendung eines Frameworks Ihr Wissenssystem verwirren.

CSS-Frameworks sind für erfahrene Entwickler konzipiert und sparen ihnen viel Zeit.

<<:  So gestalten Sie die Homepage von Tudou.com

>>:  Schreiben eines Schere-Stein-Papier-Spiels in JavaScript

Artikel empfehlen

Eine kurze Diskussion über die spezifische Verwendung von Ansichtsfenstern in mobilen Endgeräten

Inhaltsverzeichnis 1. Grundlegende Konzepte 1.1 Z...

Vue implementiert eine kleine Formularvalidierungsfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Lassen Sie uns im Detail darüber sprechen, wie der NodeJS-Prozess beendet wird

Inhaltsverzeichnis Vorwort Aktiver Rückzug Ausnah...

So starten Sie eine Transaktion in MySQL

Vorwort In diesem Artikel wird hauptsächlich besc...

Detaillierte Erklärung zum MySQL-Index

Inhaltsverzeichnis 1. Index-Grundlagen 1.1 Einlei...

Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8

Schritt 1: yum install httpd -y #httpd-Dienst ins...

So verwenden Sie Nginx zur Simulation einer Blue-Green-Bereitstellung

Dieser Artikel stellt die Blue-Green-Bereitstellu...

Grafische Analyse des Speicherorts der MySQL5.7-Konfigurationsdatei in der Windows-Umgebung

1. MySQL-Installationsverzeichnis Kopieren Sie de...

Implementierung der Docker Compose-Mehrcontainerbereitstellung

Inhaltsverzeichnis 1. WordPress-Bereitstellung 1....

Der Unterschied zwischen gespeicherten Prozeduren und Transaktionen in MySQL-Datenbanken

Transaktionen stellen die Atomarität mehrerer SQL...

Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste

Vorwort: Während der Projektentwicklung stießen w...

Lösung für Tomcat zum externen Speichern von Konfigurationsdateien

Frage Wenn wir bei der normalen Entwicklung das P...

Detaillierte Erläuterung der sieben Wertübertragungsmethoden von Vue

1. Vom Vater zum Sohn Definieren Sie das props Fe...

Ein kurzer Vortrag über den MySQL-Index und die Redis-Sprungtabelle

Zusammenfassung Bei der Diskussion über MySQL-Ind...

Detaillierte Erklärung asynchroner Generatoren und asynchroner Iterationen in Node.js

Vorwort Generatorfunktionen gibt es in JavaScript...