HTML <div> tagg

Definition och användning

<div> Etiketter definierar avsnitt eller delar (partitioner eller avsnitt, division/section) i HTML-dokument.

<div> Etiketter kan dela upp dokument i oberoende, olika delar. Det kan användas som ett strikt organisatoriskt verktyg och är inte kopplat till någon formatering.

innehåll av alla typer kan placeras <div> inuti!<div> taggen kan användas som en behållare för HTML-element, och sedan använda CSS för att ställa in stilar eller JavaScript för att utföra operationer.

om id eller class att markera <div>om class eller id egenskapen, kan du enkelt <div> taggar för att ställa in stilar.

Observera:standardmässigt använder webbläsare alltid <div> elementet med en radbrytning innan och efter.

användning

<div> är en blockelement. Detta innebär att dess innehåll automatiskt börjar en ny rad. Faktiskt är radbrytningen <div> inbyggda unika formatpresentationer. Det är möjligt att <div> s class eller id stil på varje

det är inte nödvändigt att tillämpa extra <div> båda klass eller id, även om detta också har vissa fördelar.

man kan lägga till samma <div> element tillämpning class eller id egenskaper, men det är vanligare att endast använda en av dem. Deras huvudsakliga skillnad är att class används för elementgrupper (liknande element, eller kan förstås som en typ av element), medan id används för att identifiera enskilda unika element.

Se också:

HTML-tutorial:HTML blockelements och inlineelements

HTML-tutorial:HTML layout

HTML DOM-referenshandbok:Div-objekt

exempel

Denna del av dokumentet använder CSS för att ställa in stilar: <div>.

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>detta är titeln i div-elementet</h2>
  <p>detta är några texter i div-elementet.</p>
</div>
</body>
</html>

Prova själv

fallstudie

<body>
 <h1>ny webbplats</h1>
  <p>några texter. några texter. några texter...</p>
  ...
 <div class="news">
  <h2>nyhetstoppen 1</h2>
  <p>några texter. några texter. några texter...</p>
  ...
</div>
 <div class="news">
  <h2>nyhetstoppen 2</h2>
  <p>några texter. några texter. några texter...</p>
  ...
 </div>
 ...
</body>

Exempel förklaring

Som du ser, detta HTML-snit visar strukturen för en nyhetssajt. Varje div kombinerar rubriken och sammanfattningen av varje nyhet, vilket innebär att div lägger till extra struktur till dokumentet. Samtidigt eftersom dessa div är av samma typ av element kan de identifieras med class="news", vilket inte bara lägger till lämplig semantik till div, utan också gör det möjligt att använda stil för att formatera div, vilket är en tvåvinst.

Tips:För att lära dig mer om användningen av class och id, läs kapitlet 'Strukturerad markering' i W3school, avsnittet 'div, id och andra hjälpare'.

Globala egenskaper

<div> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<div> Etiketterna stöder också Händelseegenskaper i HTML.

Standarda CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <div> Element:

div {
  display: block;
}

Prova själv

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd