Struttura HTML5: come creare il primo modello HTML5
In questo articolo introdurrò la struttura HTML5 più comunemente usata, attraverso la quale conoscerai il significato di alcuni tag HTML che sono stati appena aggiunti in HTML5.
Quando fai riferimento ad alcuni siti Web scritti in HTML5, vedrai tag come header , nav , section , footer , … Questi tag non esistevano prima, ma da quando è nato HTML5, le persone li usano praticamente. Se conosci l'inglese, puoi indovinare il significato di ogni carta a colpo d'occhio.
Prima di iniziare, vorrei introdurre alcune posizioni comuni su un sito web.
1. La struttura HTML di una tipica pagina web
Ogni sito web avrà un'interfaccia diversa. Tuttavia, in termini di interfaccia utente, sono tenuti ad avere alcune posizioni come segue:
Quando non c'è HTML5, ogni posizione useremo un tag div per circondarla, quindi useremo ID o Class per dichiarare quelle posizioni.
<body> <div id="header"> HEADER </div> <div id="menu"> MENU </div> <div id="main"> <div id="content"> MAIN CONTENT </div> <div id="sidebar"> MAIN SIDEBAR </div> </div> <div id="footer"> FOOTER </div> </body>Ma quando appare HTML5, è diverso, useremo tag separati, ogni posizione avrà un tag corrispondente. Questo è in termini di significato, ma in termini di natura, questi tag non sono diversi dai tag div , solo nomi diversi.
Ora studiamo come convertire questa struttura in HTML5.
2. Struttura HTML5 più comune
HTML5 è piuttosto interessante, i tag avranno il nome giusto per quello che dovrebbe essere. Ad esempio, il tag header viene utilizzato nella posizione dell'intestazione, il tag del footer di pagina viene utilizzato nella posizione del piè di pagina…
Vedi la parte HTML5 che ho creato per l'interfaccia sopra:
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>Phần header</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> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> <footer> Copyright 2014 By web888.vn </footer> </body> </html>Questa è una struttura standard per un modello creato con HTML5. Parlo per me stesso, non per l'intera comunità di scrittori HTML5.
Prendi in considerazione la prima riga <!doctype html> , che è una dichiarazione obbligatoria se un modello è compilato con HTML5. La prossima è la sezione <html lang="vi"> , dovresti anche inserire lang nel tag html per chiarezza.
La parte della head sotto non è controversa, giusto? Questa è la dichiarazione informativa per il sito web.
<head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> Nella parte del body è la più importante, nella parte del corpo utilizzo i seguenti tag:
Il tag di header viene utilizzato per contenere l'intera intestazione del tuo sito web. Se hai utilizzato il tag div in precedenza, con HTML5 utilizzerai invece questo tag.
<header> <h1>Phần header</h1> </header> Tag di Nav , questo tag viene spesso utilizzato per contenere parti di navigazione come i menu.
<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> Il tag di section è un tag utilizzato per contenere il contenuto principale del sito web. Se non utilizzi HTML5, puoi utilizzare il tag div#content per racchiuderlo.
All'interno di questa sezione la divido in 2 posizioni, la prima è il contenuto principale del sito, la seconda è la barra laterale.
<section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> Il tag aside , questo tag viene spesso utilizzato per contenere frame della barra laterale come la left-sidebar right-sidebar .
<aside> Phần bên phía sidebar </aside> E l'ultimo tag è il tag footer , invece di dichiarare un div e la formattazione, utilizziamo il tag footer per avvolgerlo.
<footer> Copyright 2014 By web888.vn </footer>Vedi, se usiamo questi tag standard HTML5 , non abbiamo bisogno di commentare quale parte è l'intestazione e quale parte è il piè di pagina, giusto? Molto intuitivo e facile da aggiornare.
Eseguilo ed ecco il risultato del nostro modello html5:
Oh, perché l'interfaccia sembra così banale? Il motivo è che non abbiamo usato CSS per decorare l'interfaccia. Ciò mostra che sebbene i tag HTML5 abbiano i propri nomi, sono essenzialmente gli stessi di un normale tag div .
3. Conclusione
Quindi ho introdotto la struttura HTML5 che si trova spesso in una pagina web. Ci sono ancora molti altri tag HTML come articolo, svg, .. e ne parleremo nei prossimi articoli.
