Auf welche Aspekte sollte bei der Seitenstruktur von HTML5 geachtet werden?

Dieses Mal werde ich Ihnen zeigen, auf welche Aspekte der HTML5-Seitenstruktur Sie achten müssen. Was sind die Hinweise zur HTML5-Seitenstruktur? Werfen wir einen Blick darauf.

Einführung in semantische Elemente

Der HTML5-Standard fügt viele neue semantische Elemente hinzu, unterteilt nach Typ, z. B. Seitenstruktur, Textinhalt, Form usw.

Hier stellen wir hauptsächlich die neuen Elemente in der Seitenstruktur vor.

Was ist ein semantisches Element?

Einfach ausgedrückt besteht ein semantisches Element darin, einem Element (Tag) eine bestimmte Bedeutung zu geben, und der Name des Elements ist die Bedeutung, die das Element haben möchte auszudrücken.

bedeutet beispielsweise Kopfzeile und

Funktionen

① Einfach zu pflegen: Durch die Verwendung semantischer Elemente erhalten Sie klarere Seitenstrukturinformationen, was die spätere Pflege der Seite erleichtert. Sie müssen sich den Code nicht noch einmal ansehen: Suchen Sie das Div und dann den spezifischen Klassennamen.

②Barrierefreiheit: Hilft bei Screenreadern und anderen Barrierefreiheitstools.

③ Förderlich für die Suchmaschinenoptimierung: Suchroboter können Informationen über ihre indizierten Seiten sammeln, nachdem sie einige semantische Elemente von HTML5 überprüft haben.

Ursprüngliches Schnittstellenlayout

Im Seitenlayout ist ein sehr häufiges Element. Bei bestimmten Stilen kann es auf bestimmte Szenarien angewendet werden, z. B. auf die Kopfzeile oder die seitliche Seitenleiste , Navigation Leiste usw.

Um die Wartung zu erleichtern, weisen Designer diesen häufig ClassName (Stilklassenname) oder ID mit einem speziellen Namen zu.

Zum Beispiel kann ein -Element, das einen Seitenkopf darstellt, sein Klassenname oder seine ID sein: Seitenkopf, Kopfzeile usw.

Semantische Elemente der Seitenstruktur

Erklärung

Die semantischen Elemente der Seitenstruktur werden hauptsächlich für das Gesamtlayout der Seite verwendet. Die meisten davon sind Elemente auf Blockebene werden anstelle von verwendet. Zum Beispiel: Kopfzeile, Fußzeile usw.

Es hat keinen speziellen Stil und muss daher weiterhin mit CSS verwendet werden.

Detaillierte Einführung

: Definieren Sie den Header-Bereich einer Webseite oder eines Artikels. Kann Logo, Navigation, Suchleiste usw. enthalten.

Mindestbrowserversion: IE 9, Chrome 5

Gebrauchsanweisung:

①Wenn es zum Markieren der Kopfzeile einer Webseite verwendet wird, kann es Logo, Navigation usw. enthalten Suchleiste und andere Informationen.

② Wenn Sie den Titel des Inhalts kennzeichnen, sollten Sie die Verwendung von nur dann in Betracht ziehen, wenn der Titel auch andere Informationen enthält.

: Definieren Sie den Hauptinhalt der Webseite.

Mindestbrowserversion: IE nicht unterstützt, Chrome 35

: Definieren Sie den Fußzeilenbereich einer Webseite oder eines Artikels. Kann Urheberrechts-, Archivierungs- und andere Inhalte umfassen.

Mindestbrowserversion: IE 9, Chrome 5

Gebrauchsanweisung:

①Wenn es als Fußzeile einer Webseite verwendet wird, enthält es normalerweise Website-Urheberrechte, rechtliche Einschränkungen, Links usw. .

②Wenn es als Fußzeile eines Artikels verwendet wird, enthält es normalerweise Informationen über den Autor.

: Markieren Sie den Link Seitennavigation . Ein Bereich mit mehreren Hyperlinks .

Mindestbrowserversion: IE 9, Chrome 5

Gebrauchsanweisung:

①Eine Seite kann mehrere -Elemente enthalten, wie z. B. Seitennavigation und zugehörige Artikelempfehlungen , usw.

②Die Kontaktinformationen und Authentifizierungsinformationen im -Element enthalten sein.

: Wird normalerweise als unabhängiger Bereich auf der Webseite markiert.

Mindestbrowserversion: IE 9, Chrome 5

Gebrauchsanweisung:

① kann als unabhängiger Bereich in einer Webseite verwendet werden, beispielsweise als Abschnitt in einer Artikel.

: Ein vollständiger und unabhängiger Inhaltsblock, der unabhängige Strukturelemente wie enthalten kann. Zum Beispiel Nachrichten, Blogbeiträge und andere unabhängige Inhalte (ausgenommen Kommentare oder Autorenprofile).

Mindestbrowserversion: IE 9, Chrome 5

: Definiert einen Inhaltsblock außerhalb des umgebenden Hauptinhalts. Zum Beispiel: Anmerkung.

Mindestbrowserversion: IE 9, Chrome 5

: Stellt einen unabhängigen Inhalt dar, der oft in Verbindung mit verwendet wird (Anzeige des Titels) und kann sein Wird in Artikeln, Bildern, Illustrationen, Tabellen, Codeausschnitten und mehr verwendet.

Mindestbrowserversion: IE 9, Chrome 8 : Definiert den Titel des

Mindestbrowserversion: IE 9, Chrome 8

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Verwandte Lektüre:

So verwenden Sie Video- und Audio-Tags und Fortschrittsbalken in H5

Neue Interaktion zwischen H5 und C3 Was sind die Funktionen

H5-Tag-Zusammenfassung auf Blockebene