Über die Praxis der semantischen HTML5-Tags (Blogseite)

Erstellen Sie eine Blog-Seite mit HTML5+CSS3. Das Gesamteffektlayout ist wie folgt:



Das Seitenlayout basiert auf HTML5-Elementen. Daher ist es wichtig, dass Sie sich vor Beginn mit den HTML5-Elementen vertraut machen und anschließend prüfen, ob deren Semantik zu Ihrem Layout passt.

　Die HTML5-Struktur



Es ist sehr wichtig, dass Sie beim Schreiben von HTML5-Code nicht einfach das

-Tag verwenden stattdessen. Es gibt Zeiten, in denen das Element

semantisch immer noch eine gute Wahl ist

. Zum Beispiel Wrapper oder Container p

Eines der neuen Tags, die verwendet werden können, um das traditionelle p-Element zu ersetzen, ist das

-Element. Im

-Element können wir auch das

-Element platzieren, das das Hauptnavigationsmenü

umschließt. Das h1-Element, das einen Anker enthält, ist der Titel unseres Blogs.



Zuerst habe ich verwendet, um den Inhalt der Seite zu umbrechen, aber nachdem ich einige Dokumente gelesen hatte, hatte ich das Gefühl, dass dies semantisch nicht 100 % korrekt war. Immer noch das p-Element ausgewählt,

Innerhalb des p-Elements ist jeder Blogbeitrag in ein eigenes Artikelelement eingeschlossen.



Unter einer Reihe von Blogs befinden sich zwei paginierte Links. Normalerweise ist die Bedeutung von Paginierungslinks nicht gleichbedeutend mit dem Element

(das an mehreren Stellen verwendet werden kann, nicht nur in der Hauptnavigation). Aber dieses Blog-Layout behandelt Paginierungslinks immer noch als Hauptnavigation.



Vor der Überarbeitung des

-Elements gab es kein semantisch spezifisches Element für eine Seitenleiste. Allerdings können Sie das aside-Element jetzt bedenkenlos verwenden, ohne sich Gedanken über Syntaxprobleme machen zu müssen.

In diesem Beispiel enthält das aside-Element mehrere Abschnittselemente. Unten in der Seitenleiste befindet sich ein einfaches Suchfeld. Es gibt uns Zugriff auf einige neue Funktionen von HTML5-Formularen.

Eines davon ist das Platzhalterattribut



Das Layout endet mit dem Fußzeilenelement. In diesem Beispiel muss das Fußzeilenelement außerhalb des p-Containers platziert werden, sodass sich die Breite des Fußzeilenelements über die gesamte Seite erstreckt.




Der obige Artikel über die Praxis von HTML5-semantischen Tags (Blogseite) enthält alle vom Herausgeber geteilten Inhalte. Weitere verwandte Inhalte finden Sie hier PHP Chinese Net (www.php.cn)!