Welche Regeln sollte HTML5 befolgen?

青灯夜游
Freigeben: 2022-01-23 14:39:12
Original
2149 Leute haben es durchsucht

Die Regeln, die HTML5 befolgen sollte: 1. Nutzen Sie DIVs für das Layout. 2. Trennen Sie HTML-Tags und CSS-Stylesheets. 4. Optimieren Sie JS-Dateien und platzieren Sie sie am Ende der Seite. 5. Nutzen Sie Titelelemente sinnvoll. 6. Verwenden Sie geeignete HTML-Tags an den entsprechenden Stellen. 7. Vermeiden Sie den Missbrauch von div-Tags.

Welche Regeln sollte HTML5 befolgen?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML hat fast 20 Jahre Entwicklung hinter sich. Von HTML4 über XHTML bis hin zum kürzlich sehr beliebten HTML5 hat es fast die Entwicklung des gesamten Internets miterlebt. Allerdings gibt es auch heute noch viele grundlegende Konzepte und Prinzipien, denen Entwickler besondere Aufmerksamkeit schenken müssen. Der Herausgeber der Web-Front-End-Entwicklungsschulung stellt Ihnen diese HTML5-Entwicklungsprinzipien vor, die befolgt werden sollten.

1. Nutzen Sie DIVs sinnvoll für das Layout

Beim Entwickeln einer Webseite ist es wichtig, den Fokus der Seite hervorzuheben. Durch die Einbindung dieser Inhalte in DIV-Tags wird der Code auf der Seite ordentlich und gut eingerückt angezeigt.

2. Trennen Sie HTML-Tags und CSS-Stylesheets

Eine gute Seite sollte HTML-Tags und CSS-Stylesheets trennen. Dies ist ein Grundsatz, den jeder Webentwickler kennen sollte, wenn er mit der Webentwicklung in Berührung kommt. Allerdings gibt es bis heute immer noch viele Entwickler, die sich nicht strikt an diesen Grundsatz halten.

Betten Sie keinen Stylesheet-Code in HTML-Tags ein. Entwickler sollten sich angewöhnen, separate Dateien zum Speichern von CSS-Stylesheets zu erstellen. Dadurch wird es auch anderen Entwicklern erleichtert, ihre Arbeit bei der Änderung Ihres Codes schneller abzuschließen.

3. CSS-Code optimieren

Heutzutage ist es üblich, einer Website mehrere CSS-Dateien hinzuzufügen. Wenn eine Website jedoch zu viele CSS-Dateien enthält, verlangsamt dies die Reaktionsgeschwindigkeit der Website. Die Lösung besteht darin, den Code zu rationalisieren, mehrere CSS-Dateien zu optimieren und sie in einer Datei zusammenzuführen. Diese Methode kann die Ladegeschwindigkeit der Website deutlich verbessern. Darüber hinaus gibt es viele Tools, die zur Optimierung von CSS-Dateien verwendet werden können, wie z. B. CSS Optimizer, Clean CSS usw.

Für CSS haben wir außerdem 10 hervorragende CSS-Frameworks empfohlen, die Sie kennen sollten. Sie können sich über die Typen und die damit verbundene Verwendung von CSS-Frameworks informieren.

4. JS-Dateien optimieren und am Ende der Seite platzieren

Wie bei CSS ist es auch üblich, der Seite mehrere JS-Dateien hinzuzufügen. Dies verringert jedoch auch die Reaktionsgeschwindigkeit der Website. Aus diesem Grund sollten Entwickler diese JS-Dateien rationalisieren und optimieren.

Aber eines ist anders als bei CSS, Browser unterstützen in der Regel kein paralleles Laden. Das heißt, wenn der Browser eine JS-Datei lädt, lädt er gleichzeitig keine anderen Inhalte mehr. Dies führt dazu, dass die Seitenladegeschwindigkeit scheinbar langsamer wird.

Eine gute Lösung besteht darin, die Ladereihenfolge der JS-Dateien an die letzte Stelle zu setzen. Um dieses Ziel zu erreichen, können Entwickler den JS-Code am Ende des HTML-Dokuments platzieren, und eine gute Position ist in der Nähe des -Tags.

5. Nutzen Sie Titelelemente sinnvoll

Span bis h6. Dies hilft Benutzern, sich mehr auf die wichtigen Teile der Seite zu konzentrieren. Für Blogs empfehle ich (unter Bezugnahme auf den Autor dieses Artikels) die Verwendung von Span-Tags, um den Blogtitel hervorzuheben. Denn der Blogtitel ist fast ein wichtiger Teil der Seite.

6. Verwenden Sie geeignete HTML-Tags an den richtigen Stellen.

HTML-Tags sind der Schlüssel zum Aufbau einer standardisierten Inhaltsstruktur. Beispielsweise wird das

7. Vermeiden Sie den Missbrauch von div-Tags

Nicht alle Blockelemente sollten mit dem

-Tag erstellt werden. Sie können beispielsweise display:block zu den Attributen eines Inline-Elements hinzufügen, um es als Blockelement anzuzeigen.

8. Attributwerte sollten einheitlich in Anführungszeichen gesetzt werden

Obwohl einige Attribute in HTML5 ohne Anführungszeichen belassen werden können, sollten aus Gründen der Standardisierung jedem Attribut Anführungszeichen hinzugefügt werden.

9. Vermeiden Sie eine zu lange Codezeile.

Die Größe der Seite ist begrenzt. Wenn der Code zu lang ist, wird eine Bildlaufleiste hinzugefügt, die die Lesbarkeit des Codes verringert.

10. Alt zum img-Tag hinzufügen

Wenn das Bild nach dem Hinzufügen von alt zum Bildattribut nicht angezeigt werden kann, kann der Inhalt von alt die Lücke im Bild füllen, und alt ist auch gut für die SEO-Optimierung.

11. Leerzeilen und Einrückungen

Als wir Java lernten, brachte uns der Lehrer bei, dem Code Kommentare, Leerzeilen und Einrückungen hinzuzufügen, um die Lesbarkeit des Codes zu verbessern.

12. Tags schließen

Die meisten Tags in HTML werden paarweise angezeigt. Wenn einige Tags nicht geschlossen sind, treten Probleme wie eine Fehlausrichtung des Dokuments auf. Auch wenn einige Tags einzelne Tags verwenden können, ist es am besten, sie zu geschlossenen Tags zu vereinen, z. B. p. Und wie bei Meta schreiben Sie es am besten in der folgenden Form: <meta charset="utf-8"/>.

Verwandte Empfehlungen: „HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Regeln sollte HTML5 befolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!