Il tag dell'articolo in HTML5
In questo articolo impareremo come utilizzare il tag articolo in HTML5, così saprai quando usare il tag articolo e quando usare il tag sezione.
Nel post precedente, abbiamo appreso la struttura di un template HTML5 standard ma abbiamo appena appreso come usarlo semplicemente, quindi in questo articolo andremo un po' più in profondità rispetto alla dichiarazione di un articolo in html5 . Ogni articolo è un record e lo tratteremo come una parte che include l'intestazione e il piè di pagina.
Prima di leggere questo articolo, devi leggere la lezione sulla struttura di HTML5, perché non spiegherò la struttura di una pagina web fatta di HTML5.
1. Qual è il tag dell'articolo in HTML5?
Articolo è un tag HTML aggiunto nella versione HTML5, viene utilizzato per dichiarare la struttura degli articoli da visualizzare nella pagina web.
Il tag articolo viene utilizzato nelle pagine sugli elenchi degli articoli o sui dettagli degli articoli. All'interno di ogni articolo puoi anche dichiarare altri tag di intestazione, che è il titolo di ogni articolo.
<article></article>In termini di proprietà, il tag articolo è come un tag div, cioè mostra un blocco con una larghezza del 100% e un'altezza a seconda del suo contenuto.
2. Aggiungi l'articolo HTML5 al layout
Innanzitutto, consulta il codice della struttura HTML5 di seguito:
<!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 questa sezione, l' intestazione e la navigazione, a lato e il piè di pagina sono sempre gli stessi del post precedente, la section stessa ha alcuni tag in più all'interno, che sono:
<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 questa section voglio visualizzare un modello di news, quindi ho creato un article , e article c'è header contenente il titolo, un tag p contenente il contenuto e un tag footer contenente le informazioni sull'autore e la data di pubblicazione del notizia. Nell'intestazione ho 2 tag h1 e h2 , quindi ho usato un hgroup header circondarlo, se usi solo un tag h1 , non è necessario utilizzare un tag hgroup aggiuntivo.
Tutti gli articoli, hgroup, intestazione, piè di pagina, sezione, a parte i tag sono tag HTMl5, il resto sono normali tag HTML.
Cosa succede se hai un elenco di 2 record? È molto semplice, devi solo copiare il tag dell'articolo in 2.
<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. Conclusione
Attraverso questo articolo vediamo che i tag di intestazione e piè di pagina non sono solo per il layout principale ma puoi anche usarli all'interno del tag dell'articolo . Nell'intestazione abbiamo il tag html5 hgroup per raggruppare l' intestazione . E, naturalmente, l'uso di questi tag è facoltativo, cioè invece di usare il tag di intestazione nell'articolo, puoi usare un tag div o un altro tag normale.
