Das Artikel-Tag in HTML5
In diesem Artikel erfahren Sie, wie Sie das Artikel-Tag in HTML5 verwenden, sodass Sie wissen, wann Sie das Artikel-Tag und wann das Abschnitts-Tag verwenden müssen.
Im vorherigen Beitrag haben wir die Struktur einer Standard-HTML5-Vorlage gelernt, aber nur gelernt, wie man sie einfach verwendet, also werden wir in diesem Artikel etwas mehr in die Tiefe gehen, die einen Artikel in HTML5 deklariert . Jeder Artikel ist ein Datensatz, und wir behandeln ihn als einen Teil, der Kopf- und Fußzeilen enthält.
Bevor Sie diesen Artikel lesen, müssen Sie sich die HTML5-Strukturlektion ansehen, da ich die Struktur einer Webseite aus HTML5 nicht erklären werde.
1. Was ist das Artikel-Tag in HTML5?
Article ist ein in der HTML5-Version hinzugefügtes HTML-Tag, mit dem die Struktur für die auf der Webseite anzuzeigenden Artikel deklariert wird.
Das Artikel-Tag wird auf Seiten über Artikellisten oder Artikeldetails verwendet. Innerhalb jedes Artikels können Sie auch andere Header-Tags deklarieren, die den Titel jedes Artikels darstellen.
<article></article>Der Artikel-Tag verhält sich von den Eigenschaften her wie ein div-Tag, dh er zeigt einen Block mit einer Breite von 100% und einer vom Inhalt abhängigen Höhe an.
2. HTML5-Artikel zum Layout hinzufügen
Sehen Sie sich zunächst den folgenden HTML5-Strukturcode an:
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>HTML5 Cho Người Mới Bắt Đầu Tại web888.vn</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> <section> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> </section> <aside> <h3>Tuts HTML</h3> Học Lập Trình HTML5 </aside> <footer> Copyright 2014 By web888.vn </footer> </body> </html> In diesem Abschnitt sind die Kopf- und Navigationszeile sowie die Seiten- und Fußzeile immer noch die gleichen wie im vorherigen Beitrag, der section selbst enthält einige weitere Tags, nämlich:
<section> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> </section> In diesem section möchte ich eine Nachrichtenvorlage anzeigen, also habe ich einen article erstellt, und in dem article gibt es eine header mit dem Titel, ein p -Tag mit dem Inhalt und ein footer -Tag mit dem Autor und dem Veröffentlichungsdatum der Nachricht. In der header habe ich 2 Tags h1 und h2 , also habe ich ein hgroup -Tag verwendet, um es zu umgeben. Wenn Sie nur ein h1 -Tag verwenden, müssen Sie kein zusätzliches hgroup-Tag verwenden.
Alle Artikel-, Hgroup-, Kopf-, Fußzeilen-, Abschnitts- und Neben-Tags sind HTML5-Tags, der Rest sind normale HTML-Tags.
Was ist, wenn Sie eine Liste mit 2 Datensätzen haben? Es ist sehr einfach, Sie müssen nur das Artikel-Tag in 2 kopieren.
<section> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> </section>3. Fazit
Durch diesen Artikel sehen wir, dass die Kopf- und Fußzeilen -Tags nicht nur für das Hauptlayout gedacht sind, sondern Sie können sie auch innerhalb des Artikel -Tags verwenden. In der Kopfzeile haben wir das html5 hgroup -Tag, um die Kopfzeile zu gruppieren. Und natürlich ist die Verwendung dieser Tags optional, dh statt des Header-Tags im Artikel können Sie ein div-Tag oder ein anderes reguläres Tag verwenden.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
