Divs och spänner är inte utbytbara i webbsidans uppbyggnad. Var och en tjänar olika syften, och att veta när du ska använda var och en hjälper dig att utveckla rena, lättanvända webbplatser.
Använda Div-elementet
Divs definiera logiska indelningar på din webbsida. A div- kort för uppdelning - är i grunden en ruta där du kan placera andra HTML-element som hör hemma. En uppdelning kan ha flera andra element i sig, såsom stycken, rubriker, listor, länkar, bilder etc. Det kan till och med ha andra divisioner inuti det för att ge ytterligare struktur och organisation.
Att använda div element, placera ett öppet tagga före det område på din sida som du vill ha som en separat division och en stängning
innehåll i div
Om du utformar detta område med CSS kan du lägga till en ID väljare till den inledande div-taggen:
Eller så kan du lägga till en klassväljare:
Du kan sedan arbeta med dessa element i CSS eller JavaScript.
Aktuella bästa metoder lutar mot att använda klassväljare istället för ID, delvis på grund av hur specifika ID-väljare är. Endera är dock acceptabelt, och du kan till och med ge en
div både ett ID och en klassväljare.Divs eller sektioner?
De div element skiljer sig från HTML5sektion element eftersom det inte ger det bifogade innehållet någon semantisk betydelse. Om du inte är säker på om innehållsblocket ska vara a div eller a sektion, tänk på syftet med elementet och innehållet.
- Om du behöver elementet helt enkelt för att lägga till stilar till det området på sidan bör du använda div element.
- Om innehållet har ett tydligt fokus och kan stå på egen hand, överväg att använda sektion element istället.
I slutändan båda divs och avsnitt beter sig på samma sätt, och du kan ge någon av dem attribut och utforma dem med CSS. Båda är blocknivåelement.
Använda spann
Spänna är ett inbyggt element som standard, till skillnad från div och sektion element. De spänna elementet används vanligtvis för att slå in en viss del av innehållet, t.ex. text, för att ge det en extra krok som du kan använda för att lägga till stilar. Utan några stilattribut, dock spänna har ingen effekt på texten alls.
En annan skillnad mellan spänna och div element är att div elementet innehåller en styckebrytning, medan spänna Elementet berättar bara webbläsaren att tillämpa tillhörande CSS-stilregler på det som omges av taggar:
Markerad text och icke markerad text.
Du kan lägga till.
class = "highlight"
eller liknande den spänna element för att utforma texten med CSS.
Spännelementet har inga obligatoriska attribut, men de tre som är mest användbara är desamma som de för div element:
- stil
- klass
- ID
Använda sig av spänna när du vill ändra innehållsstilen utan att definiera innehållet som ett nytt element på blocknivå i dokumentet.
Till exempel om du vill ha det andra ordet i ett h3 rubriken att vara röd, kan du omge det ordet med en spänna element som skulle utforma ordet som röd text. Ordet är fortfarande en del av h3 men visas i rött.