HTML
Div Element
Sök…
Introduktion
Div-elementet i HTML är ett behållarelement som kapslar in andra element och kan användas för att gruppera och separera delar av en webbsida. En div i sig representerar inte i sig något utan är ett kraftfullt verktyg inom webbdesign. Detta ämne täcker avsnittet och tillämpningarna för div-elementet.
Syntax
<div>example div</div>
Nesting
Det är vanligt att placera flera <div> i en annan <div> . Detta kallas vanligen "häckande" element och möjliggör ytterligare uppdelning av delar i underavsnitt eller hjälputvecklare med CSS-styling.
<div class="outer-div"> används för att gruppera två <div class="inner-div"> element; var och en innehåller ett <p> element.
<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>
Detta ger följande resultat (CSS-stilar tillämpas för tydlighet):
Häckande inline- och blockelement Medan du häckar element bör du tänka på att det finns inline- och blockelement. medan blockelement "lägger till en radbrytning i bakgrunden", vad betyder, andra kapslade element visas automatiskt i nästa rad, inlineelement kan placeras bredvid varandra som standard
Undvik djup <div> häcknings
En djup och ofta använda kapslade containerlayouter visar en dålig kodningsstil.
Rundade hörn eller liknande funktioner skapar ofta en sådan HTML-kod. För de flesta av de senaste generationens webbläsare finns CSS3 motsvarigheter. Försök att använda så lite som möjligt HTML-element för att öka förhållandet mellan innehåll och tagg och minska sidbelastningen, vilket resulterar i en bättre ranking i sökmotorerna.
div avsnitt Elementet ska inte kapslas djupare än 6 lager.
Grundläggande användning
Elementet <div> vanligtvis ingen specifik semantisk betydelse av sig självt, helt enkelt representerande en division och används vanligtvis för gruppering och kapsling av andra element i ett HTML-dokument och separering av dem från andra grupper av innehåll. Som sådan beskrivs varje <div> bäst med sitt innehåll.
<div>
<p>Hello! This is a paragraph.</p>
</div>
div elementet är vanligtvis ett element på blocknivå, vilket innebär att det skiljer ett block i ett HTML-dokument och upptar sidans maximala bredd. Webbläsare har vanligtvis följande standard CSS-regel:
div {
display: block;
}
Det uppmuntras starkt av World Wide Web Consortium (W3C) att se div-elementet som ett element av sista utväg, för när inget annat element är lämpligt. Användningen av mer lämpliga element istället för div-elementet leder till bättre tillgänglighet för läsarna och enklare underhållbarhet för författare.
Till exempel skulle ett blogginlägg markeras med <article> , ett kapitel med <section> , en sidas navigationshjälpmedel med <nav> och en grupp <fieldset> med <fieldset> .
div-element kan vara användbara för stilistiska ändamål eller för att radera flera stycken i ett avsnitt som alla ska antecknas på liknande sätt.