HTML-<div>-tagi

Määrittely ja käyttö

<div> Tunniste määrittelee HTML-asiakirjan osat (osat, osiointi tai luku, osa tai osa)

<div> Tunniste voi jakaa asiakirjan erillisiksi, eri osiksi. Se voidaan käyttää tarkkaan järjestelytyökaluna eikä se liity mihinkään muotoiluun.

mikä tahansa sisältö voidaan sijoittaa <div> sisällä!<div> tagi toimii HTML-elementin sisällön konttorina, ja sitä voidaan muotoilla CSS:n avulla tai käsitellä JavaScriptin avulla.

käytettävissä olevassa id tai class merkinnän <div>työn tehokkaammin. class tai id ominaisuus, mikä mahdollistaa <div> tagiin asetetaan tyylejä.

Huomioitavaa:Oletusarvoisesti selaimet aina <div> elementin ympärillä asettamalla rivinvaihtomerkki.

käyttö

<div> on lohko-elementti. Tämä tarkoittaa, että sen sisältö alkaa automaattisesti uudella rivillä. Todellisuudessa, rivinvaihto on <div> sisäänrakennettu ainutlaatuinen muotoilu. <div> jollekin class tai id lisätyylejä.

ei tarvitse soveltaa <div> luokka tai id, vaikka tämäkin on tietty hyöty.

voidaan lisätä samaan <div> Elementtien soveltaminen class tai id Ominaisuudet, mutta yleensä vain yksi niistä sovelletaan. Näiden kahden keskeinen ero on, että class käytetään elementtiyhmien (samankaltaiset elementit tai ymmärrettynä tietynlaisia elementtejä) tunnistamiseen, kun taas id käytetään yksittäisten ja ainutlaatuisten elementtien tunnistamiseen.

Lisäksi:

HTML-opas:HTML - lohko- ja rivielementit

HTML-opas:HTML - asettelu

HTML DOM -viittausopas:Div-objekti

Esimerkki

Dokumentissa käytetään CSS-tyylejä asettamaan tyylejä div-osille:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Tämä on div-elementin sisällä oleva otsikko</h2>
  <p>Tämä on div-elementin sisällä olevaa tekstiä.</p>
</div>
</body>
</html>

Kokeile itse

Analyysitapaus

<body>
 <h1>Uusi sivusto</h1>
  <p>Tässä on joitakin tekstejä. Tässä on joitakin tekstejä. Tässä on joitakin tekstejä...</p>
  ...
 <div class="news">
  <h2>Uutisotsikko 1</h2>
  <p>Tässä on joitakin tekstejä. Tässä on joitakin tekstejä. Tässä on joitakin tekstejä...</p>
  ...
</div>
 <div class="news">
  <h2>Uutisotsikko 2</h2>
  <p>Tässä on joitakin tekstejä. Tässä on joitakin tekstejä. Tässä on joitakin tekstejä...</p>
  ...
 </div>
 ...
</body>

Esimerkki selityksestä

Kuten näette, yllä oleva HTML-mall esittää uutisverkoston rakennetta. Jokainen div-yksikkö yhdistää uutisen otsikon ja tiivistelmän, mikä tarkoittaa, että div lisää dokumentille lisärakennetta. Samalla, koska nämä div-yksiköt kuuluvat samaan elementtiryhmään, voidaan käyttää class="news" -merkintää tunnistamaan nämä div-yksiköt. Tämä tekee div-yksiköistä sopivampia semanttisesti ja helpottaa niiden muotoilua tyyleillä edelleen, mikä on kaksinkertainen hyöty.

Vinkki:Lisätietoja class ja id käytöstä löydät W3schoolin rakenteellisen merkitsemisen luvusta 'div, id ja muut avustajat'.

Globaalit attribuutit

<div> Tunniste tukee myös HTML - globaalit attribuutit.

tapahtumamäärittely

<div> Tunniste tukee myös HTML - tapahtumamäärittely.

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <div> Elementti:

div {
  display: block;
}

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki