HTML DIV Struktur

HTML div-elementer tillate utviklere å dele en webside i seksjoner. Div-elementet gir ikke noen spesialist presentasjon eller atferd, men bare definerer en del av et større HTML struktur. For å inkludere disse elementene i websider, utviklere bruke div koder. En div element i en side kan ha noen form for web-innhold, inkludert tekst og media. Div-elementet kan også inkludere valgfrie attributter som en del av sin markering struktur.

element tagger

Div-elementet i HTML bruker en åpning tag, noe av innholdet, og deretter en avsluttende koden. Følgende eksempel markup demonstrerer en enkel div element med litt tekst inni den:

<Div> Noen websideinnhold </ div>

Innholdet i div er det som ser ut mellom åpning og lukking koder. I XHTML må div koder kun inneholde små bokstaver. Hvis en div element inkluderer ikke både åpning og lukking koder, er det ikke gyldig og kan føre til feil når brukere surfer på siden.

Innhold

Div-elementet er ikke designet for å holde en bestemt type innhold, slik at en div kan definere sidedeler for tekst, data, bilder, video og andre medieelementer. En div element kan også inneholde andre HTML-elementer inni den, inkludert andre div-elementer. Hovedformålet med å bruke en div er å skape et godt definert sidedel. Utviklere bruker ofte div-elementer for å gjennomføre sidedesign og oppsett i forbindelse med Cascading Style Sheet kode.

Attributter

I HTML kan div elementer inkluderer attributter. Attributter gir tilleggsinformasjon om et element og vises i åpningselementet tag. Følgende eksempelkode demonstrerer en div med en ID-attributt:

<Div id = "innhold"> Side innhold </ div>

Dette attributtet kan bidra til å skape et sideoppsett dersom CSS-kode for området identifiserer den som følger:

Innholdet {color: # 333333;}

ID-attributter identifisere elementer unikt innenfor en nettside, slik at den samme ID-attributtet verdien bør ikke vises mer enn en gang innen samme side. Utviklere kan også lage grupper av elementer med henblikk på styling dem i CSS ved hjelp av attributter i klassen. Div-elementet kan ta en rekke ekstra attributter, inkludert hendelseslyttere angivelse Javascript-funksjoner til å utføre på brukermedvirkning.

nesting

HTML div-elementer kan vises innen nestede side strukturer. Følgende eksempelkode demonstrerer blant annet en bildeelement inne i et div-element:

<Div> <img alt = "cat" /> </ div>

En div kan også omfatte barn div-elementer i det, i så fall rundt div er den overordnede element. Følgende syntaks demonstrerer nestet div-elementer:

<Div class = "utenfor">

<Div class = "innsiden"> Noe inni innhold </ div>

<Div class = "innsiden"> Noe mer inne innhold </ div>

</ Div>

Nestede strukturer er vanlig i HTML, men det kan føre til utviklere for å gjøre feil i sin markup-kode, som kan påvirke utseendet til en side i nettleseren. Validere websider kan bidra til å løse disse feilene.