Il il tag è stato introdotto con HTML5 un po 'di tempo fa, sebbene tu possa ancora non aver familiarità con ciò che fa, o come possa essere usato in molte situazioni diverse. In questo tutorial imparerai la differenza tra e altri tag simili, e come puoi iniziare a usarlo per migliorare il modo in cui raggruppa elementi nel tuo markup.
Questo è un tutorial per principianti, ma servirà anche come utile ripasso per gli altri.
Usi tipici per
Vediamo innanzitutto cosa ha da dire il dottore HTML5 in merito:
L'elemento figure rappresenta un'unità di contenuto, opzionalmente con una didascalia, che è autonomo, che viene tipicamente referenziato come una singola unità dal flusso principale del documento e che può essere spostato lontano dal flusso principale del documento senza influenzando il significato del documento. -Richard Clark
Così la figura elemento specifica contenuto autonomo, come illustrazioni e foto. Ciò significa che utilizzerai sempre il figura tag per casa qualcos'altro.
Un malinteso comune è quello figura può essere utilizzato solo per immagini. Infatti, può essere utilizzato per raggruppare qualsiasi numero di cose diverse insieme, inclusi, ma non limitati a, immagini, video, audio e blocchi di codice.
Definizione della struttura della pagina
Il figura è una radice di sezionamento, il che significa che isola efficacemente il suo contenuto dalla struttura del suo antenato. Qualunque cosa ci sia dentro la figura non contribuisce al contorno del documento al di fuori di esso. Si comporta come un elemento strutturale della pagina e può quindi contenere le proprie intestazioni, iniziando con un e lavorando lungo la gerarchia attraverso , e così via, ma questo non ha alcun rapporto con la gerarchia esterna:
La gerarchia all'interno della figura non ha alcuna influenza sul profilo del suo antenato
Elementi come questo sono spesso usati per introdurre contenuti esterni nel documento, ad esempio una citazione. è un altro esempio di un elemento radice di sezionamento.
immagini
Ecco un tipico esempio di come figura tag può essere utilizzato per visualizzare un'immagine.
Ora, potresti pensare: "Perché preoccuparsi di avvolgere il mio tag img in un ulteriore markup?" Questa è una domanda giusta, ma inizia ad avere senso una volta che ti rendi conto che a può contenere più di un elemento figlio, come una didascalia.
C'è anche un tag per una didascalia di figura, o meglio, figcaption. Tenendo conto di questo, saresti in grado di usarlo nel modo seguente.
Che cosa succede? Sono una didascalia!
Immagini multiple
Usando solo una serie di img gli elementi per visualizzare le immagini insieme funzionano bene, anche se ogni singola immagine sarebbe indipendente come un proprio blocco di codice, completamente estraneo a qualsiasi altro. Nei casi in cui le immagini condividono una relazione di qualche tipo figura viene in soccorso. Queste tre immagini sono correlate e condividono un singolo riepilogo nel figcaption.
Tre immagini diverse, raggruppate insieme come una figura, e recitate in didascalie.
utilizzando per i blocchi di codice
Il figura il talento dell'elemento per il raggruppamento di elementi a tema comune non finisce qui. Forse si desidera raggruppare un codice inline, insieme ad una didascalia, ad esempio in un tutorial, quindi è possibile utilizzarlo figura e figcaption nel seguente modo:
La vita è buona, ha detto HTML5 a XHTML.
In questo blocco di codice, vediamo HTML5 che parla all'XHTML.
figura può essere usato in questo modo con codice, pre, e SAMP, semplificare il raggruppamento dei blocchi di codice.
Avvolgendo
Questo è tutto! Hai imparato a usare il figura elemento, insieme a figcaption e altri elementi per raggruppare più oggetti insieme. Come usi il figura elemento al momento? Questo cambierà a seguito della lettura di questo suggerimento? Diteci nei commenti!
Share
Accentsconagua
La gerarchia all'interno della figura non ha alcuna influenza sul profilo del suo antenato
