English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Gli elementi semantici sono quelli che, guardandoli, si può sapere immediatamente cosa rappresentano. Ad esempio, per l'articolo <article>, ci sono informazioni come intestazione <header>, catalogo <catalog>, contenuto <content> e piè di pagina <footer>.
Un elemento semantico può descrivere chiaramente il suo significato sia per i browser che per gli sviluppatori.
Esempio di elemento non semantico: <div> e <span> - non è necessario considerare il contenuto.
Esempio di elemento semantico: <form>, <table>, and <img> - definiscono chiaramente il loro contenuto.
Internet Explorer 9+, Firefox, Chrome, Safari e Opera supportano gli elementi semantici.
Attenzione: Internet Explorer 8 e versioni precedenti non supportano questo elemento. Ma alla fine dell'articolo sono fornite soluzioni di compatibilità.
Molti siti web esistenti contengono il seguente codice HTML:
<div id="nav">, <div>, o <div id="footer">,
per indicare i link di navigazione, l'intestazione e la coda.
HTML5 fornisce nuovi elementi semantici per chiarire le diverse parti di una pagina web:
|
<section> Il tag definisce una sezione (sezione, sezione) nel documento. Ad esempio, capitoli, intestazioni, piè di pagina o altre parti del documento.
Secondo il documento HTML5 del W3C: la sezione contiene un insieme di contenuti e il loro titolo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial Web (oldtoolbag.com)</title> </head> <body> <section> <h1>HTML5</h1> <p>È una nuova versione del linguaggio HTML che include nuovi elementi, attributi e comportamenti, e contiene una serie di tecnologie che possono rendere i siti web e le applicazioni Web più variegati e potenti. Queste tecnologie sono spesso chiamate "HTML5 e i suoi amici", solitamente abbreviate in HTML5.</p> </section> <section> <h1>CSS3</h1> <p>Una delle principali rivoluzioni nel CSS è stata la decisione del W3C di dividere CSS3 in una serie di moduli. I produttori di browser innovano rapidamente secondo il ritmo del CSS, pertanto, attraverso il metodo modulare, gli elementi della specifica CSS3 possono evolvere a diverse velocità, poiché diversi produttori di browser supportano solo determinate caratteristiche. Ma diversi browser supportano caratteristiche diverse in momenti diversi, il che rende complicata la sviluppo multi-browser. </p> </section> </body> </html>Prova a vedere ›/›
Il tag <article> definisce contenuto indipendente.
Esempio di utilizzo dell'elemento <article>:
Post del forum
Post del blog
Notizia
Commento
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial Web (oldtoolbag.com)</title> </head> <body> <article> <h1>CSS3 </h1> <p>SS3 è la versione aggiornata della tecnologia CSS ( Fogli di Stile Cascading ), iniziata nel 1999 e completata il 23 maggio 2001 con il lavoro草案 di W3C, Inclusi i moduli di modello di contenitore, moduli di elenco, metodi di link ipertestuali, moduli di linguaggio, sfondi e bordi, effetti di testo, layout a più colonne, ecc.</p> </article> </body> </html>Prova a vedere ›/›
Il tag <nav> definisce la parte dei link di navigazione.
L'elemento <nav> viene utilizzato per definire la parte della pagina dedicata ai link di navigazione, ma non tutti i link devono essere inclusi nell'elemento <nav>!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial Web (oldtoolbag.com)</title> </head> <body> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> </body> </html>Prova a vedere ›/›
Il tag <aside> definisce il contenuto al di fuori dell'area principale della pagina (ad esempio, la barra laterale).
Il contenuto del tag aside dovrebbe essere correlato al contenuto dell'area principale.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Esempio HTML5 da it.oldtoolbag.com</title> </head> <body> <article> <h1>Intestazione per Articolo</h1> <p>Testo che appare sotto l'articolo</p> </article> <aside> <p>Testo che appare sotto aside</p> </aside> </body> </html>Prova a vedere ›/›
L'elemento <header> descrive l'area superiore del documento.
L'elemento <header> viene principalmente utilizzato per definire l'area di presentazione dell'introduzione del contenuto.
Nella pagina puoi utilizzare più elementi <header>.
Di seguito è riportato un esempio che definisce l'intestazione dell'articolo:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Esempio HTML5 da it.oldtoolbag.com</title> </head> <body> <header> <img src="/static/images/logo-n.png" alt="Logo"> </header> <article> <h1>Intestazione per Articolo</h1> <p>Testo che appare sotto l'articolo</p> </article> </body> </html>Prova a vedere ›/›
L'elemento <footer> descrive la parte inferiore della pagina del documento.
L'elemento <footer> dovrebbe contenere l'elemento che lo contiene.
Un piè di pagina solitamente contiene informazioni sull'autore, i diritti d'autore, i termini di utilizzo dei link, le informazioni di contatto, ecc.
Nel documento puoi utilizzare più elementi <footer>.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Esempio HTML5 da it.oldtoolbag.com</title> </head> <body> <article> <h1>Intestazione per Articolo</h1> <p>Testo che appare sotto l'articolo</p> </article> <footer> <p>Copyright ©2013</p> </footer> </body> </html>Prova a vedere ›/›
L'elemento <figure> definisce un contenuto fluttuante indipendente (immagini, grafici, foto, codice, ecc.).
Il contenuto dell'elemento <figure> dovrebbe essere correlato al contenuto principale, ma se rimosso, non dovrebbe influenzare il flusso del documento.
<figcaption> definisce il titolo dell'elemento <figure>.
<figcaption>l'elemento dovrebbe essere collocato nella posizione prima o ultima dell'elemento "figure".
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial Web (oldtoolbag.com)</title> </head> <body> <figure> <img src="venglobe.gif" alt="venglobe" width="304" height="228"> <figcaption>venglobe venglobe venglobe.</figcaption> </figure> </body> </html>Prova a vedere ›/›
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>elemento semantico</title> </head> <body> <!--elemento strutturale--> <header>intestazione</header> <section>indica un paragrafo: usato per descrivere la sezione di un'area</section> <footer>parte di piè di pagina dell'area</footer> <nav>menu di navigazione</nav> <article>indica il contenuto principale dell'articolo</article> <!--elemento bloccante usato per delimitare aree--> <aside></aside> <figure> <figcaption></figcaption> </figure> <code>indica un segmento di codice</code> <dialog>indica una conversazione</dialog> <dt>parlatore</dt><dd>contenuto</dd> </dialog> <!--elemento semantico--> <mtter>valore numerico in un intervallo</mtter> <time></time> <progress>barra di progresso</progress> <video>video</video> <audio>Audio</audio> <!--Elementi di interazione--> <details>Un contenuto specifico, visualizzato tramite un metodo</details> <datagrid>Usato per controllare la visualizzazione dei dati client</datagrid> <menu>Menu di interazione dinamica</menu> <command>Nome</command> <!--Mostra esempio di articolo--> <article> <header> <h1>Etichette del tag head di HTML</h1> <time>12 dicembre 2015</time> </header> <p>Le etichette e gli elementi nel tag head di HTML sono molti, riguardano il rendering delle pagine web dai browser, SEO, ecc., e i内核 dei vari browser e i produttori di browser nazionali hanno alcuni loro tag e elementi, il che causa molte differenze. Nell'era della mobilità, la struttura del head e gli elementi meta mobili sono ancora più importanti. Comprendere il significato di ogni etichetta e scrivere tag di head che soddisfano le tue esigenze è l'obiettivo di questo articolo. Questo articolo si basa sull'articolo di Yi Si per estendere e riassumere l'introduzione ai significati e agli scenari di utilizzo degli elementi e delle etichette comuni nel head.</p> <footer> <p>http://www.baidu.com</p> </footer> </article> <!--Commenti--> <section> <h2>Commenti</h2> <article> <header> <h3>Li Si</h3> <p><time pubdata datatime="2013-09-23 10:00 - 11:00">Un'ora fa</time></p> </header> <p>Contenuto dei commenti</p> </article> <article> <header> <h3>Li Si</h3> <p><time pubdata datatime="2013-09-23 10:00 - 11:00">Un'ora fa</time></p> </header> <p>Contenuto dei commenti</p> </article> </section> </body> </html>Prova a vedere ›/›
Tutti gli elementi elencati sono elementi bloccati (eccetto <figcaption>).
Per far sì che questi blocchi ed elementi funzionino in tutte le versioni dei browser, devi impostare alcune proprietà nel file delle stili (il seguente codice di stile permette ai browser di versione precedente di supportare gli elementi bloccati descritti in questo capitolo):
header, section, footer, aside, nav, article, figure
{
display: block;
}
IE8 e versioni precedenti non possono rendere gli effetti CSS su questi elementi, quindi non puoi utilizzare <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure> o altri elementi HTML5.
Soluzione: Puoi utilizzare lo script JavaScript HTML5 Shiv per risolvere i problemi di compatibilità di IE.
Indirizzo di download HTML5 Shiv:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js
Dopo il download, inserisci il seguente codice nella pagina web:
<![if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
Il codice sopra viene caricato nel browser quando la versione è inferiore a IE9, viene caricato il file html5shiv.js. Devi metterlo all'interno dell'elemento <head>, perché i browser IE devono caricare questi nuovi elementi HTML5 dopo aver caricato l'intestazione.