Qual è la differenza tra i tag HTML < div > e < span > ;?
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Vorrei chiedere alcuni semplici esempi che mostrano gli usi di < div > e < span > . Li ho visti entrambi usati per contrassegnare una sezione di una pagina con un id o class , ma sono interessato a sapere se ci sono momenti in cui si preferisce l'altro.
Soluzione
div è un elemento a blocchi, span è in linea.
Ciò significa che per usarli semanticamente, i div dovrebbero essere usati per avvolgere sezioni di un documento, mentre gli span dovrebbero essere usati per avvolgere piccole parti di testo, immagini, ecc.
Ad esempio:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Nota che è illegale posizionare un elemento a livello di blocco all'interno di un elemento inline, quindi:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
... è illegale.
MODIFICA: A partire da HTML5, alcuni elementi di blocco possono essere inseriti all'interno di alcuni elementi incorporati. Vedi il riferimento MDN qui per un elenco abbastanza chiaro. Quanto sopra è ancora illegale, poiché < span > accetta solo contenuti di fraseggio e < div > è contenuto di flusso.
Hai chiesto alcuni esempi concreti, quindi uno è preso dal mio sito web di bowling, BowlSK :
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Ok, cosa sta succedendo? Nella parte superiore della mia pagina ho una sezione logica, l'intestazione " ;. " ;. Dato che questa è una sezione, uso un div (con un id appropriato). All'interno di questo, ho un paio di sezioni: la barra degli utenti e il titolo della pagina attuale. Il titolo utilizza il tag appropriato, h1 . La barra degli utenti, essendo una sezione, è racchiusa in un div . All'interno di questo, il nome utente è racchiuso in un span , in modo che io possa cambiare lo stile. Come puoi vedere, ho anche racchiuso un span attorno a 2 lettere nel titolo - questo mi permette di cambiare il loro colore nel mio foglio di stile.
Si noti inoltre che HTML5 include una nuova vasta serie di elementi che definiscono strutture di pagine comuni, come articolo, sezione, navigazione, ecc. Sezione 4.4 della HTML 5 bozza di lavoro li elenca e fornisce suggerimenti sul loro utilizzo. HTML5 è ancora una specifica funzionante, quindi nulla è "finale" tuttavia, ma è altamente dubbio che uno di questi elementi vada ovunque. C'è un hack javascript che dovrai usare se vuoi dare uno stile a questi elementi in una versione precedente di IE - devi fondamentalmente creare uno di ogni elemento usando document.createElement prima di uno di quegli elementi sono specificati nella tua fonte. Ci sono un sacco di librerie che si prenderanno cura di te per te: una rapida ricerca su Google ha mostrato html5shiv .
Altri suggerimenti
Solo per completezza, ti invito a pensarci in questo modo:
- Ci sono molti elementi a blocchi (interruzioni di riga prima e dopo) definiti in HTML e molti tag incorporati (senza interruzioni di riga).
- Ma nell'HTML moderno tutti gli elementi dovrebbero avere significati : un
< p >è un paragrafo, un< li >è un elemento dell'elenco, ecc. e dovremmo usare il tag giusto per lo scopo giusto, non come ai vecchi tempi in cui rientravamo usando< blockquote >se il contenuto era un citazione o no. - Quindi, cosa fai quando non è privo di significato per ciò che stai cercando di fare? Non c'è significato in una colonna larga 400 px, vero? Vuoi solo che la tua colonna di testo sia larga 400 px perché adatta al tuo design.
- Per questo motivo, hanno aggiunto altri due elementi all'HTML: gli elementi generici o privi di significato
< div >e< span >, perché altrimenti le persone tornare ad abusare degli elementi che hanno significati.
Ci sono già buone risposte dettagliate qui, ma nessun esempio visivo, quindi ecco una breve illustrazione:
< div > è un tag di blocco, mentre < span > è un tag in linea.
< div > è un elemento a livello di blocco e < span > è un elemento inline.
Se vuoi fare qualcosa con del testo incorporato, < span > è la strada da percorrere poiché non introdurrà interruzioni di riga che un < div > avrebbe fatto.
Come notato da altri, ci sono alcune semantiche implicite in ognuna di queste, in particolare il fatto che un < div > implica una divisione logica nel documento, simile a forse una sezione di un documento o qualcosa del genere, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
La vera differenza importante è già menzionata nella risposta di Chris. Tuttavia, le implicazioni non saranno ovvie per tutti.
Come elemento inline, < span > può contenere solo altri elementi inline. Il seguente codice è pertanto errato:
<span><p>This is a paragraph</p></span>
Il codice sopra non è valido. Per racchiudere gli elementi a livello di blocco, è necessario utilizzare un altro elemento a livello di blocco (come < div > ). D'altra parte, < div > può essere utilizzato solo in luoghi in cui gli elementi a livello di blocco sono legali.
Inoltre, queste regole sono fisse in (X) HTML e sono non alterate dalla presenza di regole CSS! Quindi i seguenti codici sono anche sbagliati!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Il significato di " block element " è implicito ma mai dichiarato esplicitamente. Se ignoriamo tutta la teoria (la teoria è buona), il seguente è un confronto pragmatico. Quanto segue:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
produce:
This paragraph has a span.
This paragraph
has
a div.
Ciò dimostra che non solo dovrebbe un div non essere usato in linea, semplicemente non produrrà l'effetto desiderato.
Come menzionato in altre risposte, per impostazione predefinita div verrà visualizzato come elemento a blocchi, mentre span verrà reso in linea nel suo contesto. Ma nessuno dei due ha alcun valore semantico; esistono per permetterti di applicare uno stile e un'identità a qualsiasi dato contenuto. Usando gli stili, puoi fare in modo che un div si comporti come un span e viceversa.
Uno degli stili utili per div è inline-block
Esempi:
Ho usato inline-block per un grande successo, in progetti web di gioco.
Div è un elemento a blocchi e span è un elemento inline e la sua larghezza dipende dal contenuto di se stesso dove div non
Direi che se conosci un po 'di spagnolo per guardare questo pagina , dove è correttamente spiegato.
Tuttavia, una definizione veloce sarebbe che div è per dividere le sezioni e span è per applicare un qualche tipo di stile a un elemento all'interno di un altro elemento a blocchi come div .
Volevo solo aggiungere un po 'di contesto storico al modo in cui ci fu span vs div
Storia di span :
Il 3 luglio 1995, Benjamin C. W. Sittler propone un testo generico contenitore per applicare gli stili a determinati blocchi di testo. Il rendering è neutro, tranne se utilizzato insieme a foglio di stile. C'è un dibattito attorno a contro leggibilità, significato. Bert Bos parla della natura di estensibilità dell'elemento attraverso l'attributo class (con valori come città, persona, data, ecc.). Paul Prescod è preoccupato che entrambi gli elementi sarà abusato. Si oppone al testo che menziona che "qualsiasi nuovo" elemento dovrebbe essere su un vecchio " e aggiungendo " Se creiamo un tag con nessuna semantica può essere usata ovunque senza mai sbagliare. Noi deve costringere gli autori a taggare correttamente la semantica del loro documento. Noi devono costringere i produttori di editor a rendere esplicita tale scelta nella loro . Interfacce "
Dalla bozza RFC che introduce span :
Innanzitutto, un generico tainer è necessario per contenere gli attributi LANG e BIDI casi in cui nessun altro elemento è appropriato; lo SPAN ele- è stato introdotto a tale scopo.
Storia di div :
Gli elementi DIV possono essere utilizzati per strutturare i documenti HTML come una gerarchia di divisioni.
...
CENTER è stato introdotto da Netscape prima che aggiungessero il supporto per Elemento DIV HTML 3.0. È mantenuto in HTML 3.2 a causa della sua diffusione diffusa.
In breve, entrambi gli elementi sono nati dall'esigenza di un contenitore semanticamente generico. Span è stato proposto come sostituto più generico di un elemento < text > per lo stile del testo. Div è stato proposto come un modo generico per dividere le pagine e ha avuto l'ulteriore vantaggio di sostituire il tag < center > per i contenuti allineati al centro. Div è sempre stato un elemento a blocchi a causa della sua storia come divisore di pagina. Lo span è sempre stato un elemento in linea perché il suo scopo originale era lo stile del testo e oggi div e span sono entrambi arrivati ??a essere elementi generici con blocco predefinito e proprietà di visualizzazione in linea rispettivamente.
In HTML ci sono tag che aggiungono struttura o semantica al contenuto. Ad esempio il tag < p > viene utilizzato per identificare un paragrafo. Un altro esempio è il tag < ol > per un elenco ordinato.
Quando non è disponibile un tag adatto in HTML, come mostrato sopra, i tag < div > e < span > vengono generalmente utilizzati.
Il tag < div > viene utilizzato per identificare una sezione / divisione a livello di blocco di un documento che presenta un'interruzione di riga sia prima che dopo di essa.
Esempi di utilizzo dei tag div sono intestazioni, piè di pagina, navigazioni ecc. Tuttavia, in HTML 5 questi tag sono già stati forniti.
Il tag < span > viene utilizzato per identificare una sezione / divisione in linea di un documento.
Ad esempio un tag span può essere usato per aggiungere pittogrammi in linea a un elemento.
Ricorda, fondamentalmente e anche loro stessi non svolgono alcuna funzione. Sono non specifici sulla funzionalità solo per i loro tag .
Possono essere personalizzati solo con l'aiuto dei CSS.
Ora che arriva alla tua domanda:
Il tag SPAN insieme ad alcuni stili sarà utile per mantenere una riga, diciamo in un paragrafo, nell'html. Questo è un tipo di livello di riga o di istruzione in HTML.
Esempio:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
La funzionalità dei tag DIV come detto può essere visibile solo con lo stile, può contenere blocchi di grandi dimensioni di codice HTML.
DIV è a livello di blocco
Esempio:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
Entrambi hanno il loro tempo e il caso in cui utilizzare, in base alle vostre esigenze.
Spero di essere chiaro con la risposta. Grazie.
< div > è un elemento a blocchi.
Come tutti i paragrafi o qualsiasi contenuto scritto all'interno di un div, possiamo applicare css a tutti gli elementi nel div. Dando solo stile al solo div.
< span > è un elemento incorporato.
Che cosa vengono apportate tutte le modifiche CSS che si riflettono solo su quell'elemento.
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
