Dreißig HTML-Codierungsrichtlinien für Anfänger

Dreißig HTML-Codierungsrichtlinien für Anfänger

1. HTML-Tags immer schließen

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

<li>Hier etwas Text.
<li>Hier ein paar neue Texte.
<li>Sie verstehen, was ich meine.

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>Hier etwas Text. </li>
 <li>Hier ein neuer Text. </li>
 <li>Sie verstehen, was ich meine.</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;">Homepage des Webmasters</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: 

 irgendeinElement > p {
 Farbe: rot;
 }

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 der Entwicklung bei Yahoo haben wir festgestellt, dass das Einbinden von Stylesheets in das Head-Tag das Laden von Webseiten beschleunigt, da die Seite hierdurch inkrementell gerendert werden kann. ——ySlow-Team 

 <Kopf>
 <title>Meine Lieblingsmaissorten</title>
 <link rel="stylesheet" type="text/css" media="screen" href="Pfad/zur/Datei.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="Pfad/zu/einer/anderenDatei.css" />
 </Kopf>

5. Importieren Sie die Javascript-Datei unten auf der Seite

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>Und nun kennen Sie meine Lieblingsmaissorten.</p>
 <script type="text/javascript" src="Pfad/zur/Datei.js"></script>
 <script type="text/javascript" src="Pfad/zu/einer/anderenDatei.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. Sie müssen nur dessen „Clock“-Methode verwenden. 

 $('a#moreCornInfoLink').klick(function() {
 alert('Möchten Sie mehr über Mais erfahren?');
 });

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>Hier ist eine interessante Tatsache über Mais.</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>Hier ist eine interessante Tatsache über Mais.</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: Soll H1 im Logo oder im Artikeltitel definiert werden? 80 % der Leute haben sich für Letzteres entschieden.

    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="#">Startseite </a>
     <a href="#">Über </a>
     <a href="#">Kontakt </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="#">Startseite</a></li>
     <li><a href="#">Über</a></li>
     <li><a href="#">Kontakt</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: 

     <!--[wenn IE 7]>
     <link rel="stylesheet" type="text/css" media="screen" href="Pfad/zu/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="Homepage des Webmasters" title="Homepage des Webmasters" />

    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.

    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 Sie PSD
  • in 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.

    <<:  Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

    >>:  Schöner Kontrollkästchenstil (Feld für Mehrfachauswahl), perfekt kompatibel mit IE8/9/10, FF usw.

    Artikel empfehlen

    Docker installiert Redis und führt den visuellen Client für den Betrieb ein

    1 Einleitung Redis ist eine leistungsstarke, auf ...

    Fehlerbehebung bei den von Alibaba Cloud hinzugefügten Sicherheitsgruppen-Ports und der Unfähigkeit, nach dem Hinzufügen auf sie zuzugreifen

    Zweck: 1. Um das externe Netzwerk des Servers übe...

    Detaillierte Erläuterung des grafischen Tutorials zur VMware12-Installation und CentOS8-Konfiguration (Tutorial zur Installation virtueller VM-Maschinen auf CentOS8)

    CentOS8 wurde vor ein paar Tagen veröffentlicht. ...

    So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

    Im vorherigen Artikel wurde erklärt, wie man das ...

    Die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML

    Bei der Arbeit an einem Projekt bin ich kürzlich ...

    SQL Get gespeicherte Prozedur gibt Datenprozessanalyse zurück

    Dieser Artikel stellt hauptsächlich die Analyse d...

    Einführung in berechnete Eigenschaften in Vue

    Inhaltsverzeichnis 1. Was ist eine berechnete Eig...

    So implementieren Sie HTML, um zu erkennen, ob die Eingabe abgeschlossen ist, und den nächsten Inhalt automatisch einzufügen

    Im vorherigen Artikel haben wir die einfache Erke...

    Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung

    Szenario: Die von uns häufig verwendeten Interakt...

    Detailliertes Beispiel einer MySQL-Unterabfrage

    Unterabfrageklassifizierung Klassifizierung nach ...

    Der Unterschied und die Wahl zwischen Datum und Uhrzeit und Zeitstempel in MySQL

    Inhaltsverzeichnis 1 Unterschied 1.1 Raumbelegung...

    MySQL Router implementiert MySQL Lese-/Schreibtrennung

    Inhaltsverzeichnis 1. Einleitung 2. MySQL-Router ...

    Popularisierung der Theorie – Benutzererfahrung

    1. Konzeptanalyse 1: UE User Experience <br /&...

    Warum wird in React nicht empfohlen, einen Index als Schlüssel zu verwenden?

    1. Vergleichen Sie den alten virtuellen DOM mit d...

    So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird

    1. Erstellen Sie ein neues Rabbitmq im Verzeichni...