Heim Web-Frontend Front-End-Fragen und Antworten Welche Regeln sollte HTML5 befolgen?

Welche Regeln sollte HTML5 befolgen?

Jan 23, 2022 pm 02:39 PM
html5

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles