HTML <div> Tag

Definition og brug

<div> Etiketter definerer opdelinger eller dele (afsnit eller sektioner, division/section) i HTML-dokumenter.

<div> Etiketter kan opdele dokumenter i uafhængige, forskellige dele. De kan bruges som en streng organisatorisk værktøj, og er ikke forbundet med nogen formatering.

任何类型的内容都可以放在 <div> 标签内！<div>

etiketter er tilgængelige! id eller class etiketter kan bruges som containere for HTML-elementer, og derefter kan stilen sættes med CSS eller opereres med JavaScript. <div>hvis brug af class eller id kan let bruges til at <div> etiketterne til at sætte stil.

Bemærk:som standard bruger browsere altid at sætte stil på <div> placere en linjeskiftscharacter foran og efter elementet.

brug

<div> er en blokkomponent. Dette betyder, at indholdet automatisk starter en ny række. Faktisk er linjeskiftet <div> indbygget unik formateringspræstation. Det kan opnås ved at <div> med class eller id stil til hver

man behøver ikke at anvende ekstra <div> klasser eller id'er, selvom der også er visse fordele ved at gøre det.

man kan tilføje samme <div> element anvendelse class eller id egenskaber, men ofte anvendes kun en af dem. De to hovedforskelle er, at class bruges til grupper af elementer (lignende elementer, eller man kan forstå det som en klasse af elementer), mens id bruges til at identificere en enkelt, unik element.

Se også:

HTML tutorial:HTML Blokkelementer og inlineelementer

HTML tutorial:HTML Layout

HTML DOM reference manual:Div-objektet

eksempel

Dette er de <div>-dele, der bruger CSS til at sætte stil i dokumentet:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Dette er titlen i et div-element</h2>
  <p>Dette er nogle tekst i en div-element.</p>
</div>
</body>
</html>

Prøv det selv

case study

<body>
 <h1>ny hjemmeside</h1>
  <p>nogle ord. nogle ord. nogle ord...</p>
  ...
 <div class="news">
  <h2>nyhedsoverskrift 1</h2>
  <p>nogle ord. nogle ord. nogle ord...</p>
  ...
</div>
 <div class="news">
  <h2>nyhedsoverskrift 2</h2>
  <p>nogle ord. nogle ord. nogle ord...</p>
  ...
 </div>
 ...
</body>

Eksempel forklaring

Som du kan se, det her HTML simulerer strukturen af en nyhedswebsted. Hver div kombinerer titlen og resuméet af hver nyhed, hvilket betyder, at div tilføjer ekstra struktur til dokumentet. Samtidig, fordi disse div'er er af samme type elementer, kan de identificeres ved class="news", hvilket ikke kun tilføjer passende semantik til div'erne, men også gør det lettere at formatere dem med stil, hvilket er en dobbelt gevinst.

Tip:For at lære mere om brugen af class og id, se kapitlet 'Struktureret mærkning' i W3school, afsnittet 'div, id og andre hjælpere'.

Globale egenskaber

<div> Tagget understøtter også Globale egenskaber i HTML.

eventegenskaber

<div> Tagget understøtter også Eventegenskaber i HTML.

Standard CSS-indstillinger

De fleste browsere bruger følgende standardværdier til visning <div> Element:

div {
  display: block;
}

Prøv det selv

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support