Oprettet fre. d. 05. oktober 2012 kl. 13:31:48

miclyk
miclyk (21.640 point. Point ude: 0)

<div>...</div> vs <div ... />

Hvad er forskellen på <div>...</div> og <div... />?

Ex.1:
<div style="width: 100px; height: 100px; background-color: Red;"></div>
<div style="width: 100px; height: 100px; background-color: Green;" />

Ex.2:
<div style="width: 100px; height: 100px; background-color: Red;" />
<div style="width: 100px; height: 100px; background-color: Green;" />

I Ex.1 placeres de to div'ere ovenOVER hinanden. I Ex.2 placeres de ovenPÅ hinanden.

Hvorfor?

Skrevet fre. d. 05. oktober 2012 kl. 13:56:29| #1

kalp
kalp (246.648 point)
<div/> er ikke gyldigt - derfor det ikke virker.
Du skal lukke en div korrekt og derfor er det <div></div> som er det rigtige at gøre.

Skrevet fre. d. 05. oktober 2012 kl. 13:57:22| #2


Skrevet fre. d. 05. oktober 2012 kl. 14:41:48| #3

olebole
olebole (216.748 point)
<ole>

@kalp: Det er ikke korrekt  =)

Syntaksen <div />, som under XML betyder 'lukning af et tag', er fuldt ud valid under HTML (til og med HTML4.01) - helt fra den allerførste version - men det betyder noget helt andet end under XML. Faktisk er syntaksen så gammel, at den hører til under SGML - et opmærkningssprog fra 80'erne, som var inspirationskilden til HTML,

<div/noget

- betyder under HTML det samme som:

<div>noget</div>

Derfor burde koden:

Ole<br/>Bole

- i virkeligheden vises som:

Ole
>Bole

- men den del af HTML-standarden er der ingen browsere, der i dag overholder. Formodentlig på grund af WWW's temmelig ulykkelige intermezzo med XHTML.

Med hensyn til spørgsmålet, så er den korrekte måde at lukke et DIV element denne:

<div style="width: 100px; height: 100px; background-color: Red;"></div>


Syntaksen:

<div style="width: 100px; height: 100px; background-color: Green;" />

- er som sagt valid under HTML (til og med HTML4.01), men lukker ikke DIV'et. Under XHTML og HTML5's XHTML-flavour må den slags lukninger dog kun bruges til 'tomme' elementer som f.eks. IMG, INPUT og LINK

/mvh
</bole>

Skrevet fre. d. 05. oktober 2012 kl. 14:50:13| #4

kalp
kalp (246.648 point)
Det er sandt nok og jeg burde selvfølgelig angive information om version, men ud fra hans kommentar så lyder det ikke, som om at han udvikler til hverken HTML5 eller XHTML:)

Skrevet fre. d. 05. oktober 2012 kl. 15:20:59| #5

olebole
olebole (216.748 point)
Nej, men under HTML til og med version 4.01 er syntaksen:

<div style="width: 100px; height: 100px; background-color: Green;" />

- fuldt ud valid, selvom den betyder noget andet, end mange tror  =)

Skrevet fre. d. 05. oktober 2012 kl. 15:24:34| #6

miclyk
miclyk (21.640 point)
Tak for jeres hurtige og fyldestgørende svar :)

Skrevet fre. d. 05. oktober 2012 kl. 15:31:02| #7

miclyk
miclyk (21.640 point)
@olebole: Bare nysgerrig, men hvad betyder det så i 4.01 hvis det ikke er et ulukket tag?

Skrevet fre. d. 05. oktober 2012 kl. 15:41:59| #8

olebole
olebole (216.748 point)
Jeg skal lige have rettet en fejl: Net-enabling tags, som fænomenet kaldes, er tilladt under HTML4.01 Transitiona ... ikke under Strict  *o)

#7: Koden i #5 betyder i virkeligheden: Et DIV, som er 100px på hver led - er grønt - og indeholder et '>'. Det er der dog, så vidt jeg ved, ingen nutidige browsere, der viser  =)

Skrevet fre. d. 05. oktober 2012 kl. 16:43:08| #9

miclyk
miclyk (21.640 point)
@olebole: Hvis du også skriver et svar så deler jeg pointene imellem jer.

Skrevet fre. d. 05. oktober 2012 kl. 17:15:00| #10

olebole
olebole (216.748 point)
Ellers tak, jeg samler ikke point  =)

Skrevet fre. d. 05. oktober 2012 kl. 17:16:39| #11


Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   


Seneste spørgsmål

List style ved linjeskift

Oprettet den 19. maj 2013 kl. 23.57
sarcar giver 60 point for svar | Giv et svar »

line.height

Oprettet den 19. maj 2013 kl. 18.16
ZeBa giver 30 point for svar | Giv et svar »

Fat footer skal fylde hele sidens bredde

Oprettet den 17. maj 2013 kl. 14.42
13thsky giver 60 point for svar | Giv et svar »








Tips & Tricks fra PC World

Teaser billede

Fem smarte funktioner i din Mac som du sikkert ikke kender

Her har du fem muligheder for at tweake din Mac på en fed måde.


Anmeldelser fra PC World

Teaser billede

Test: Samsung Galaxy S4 er et hit - trods gøglertricks

Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Ny opfindelse: Oplad din mobil på 20 sekunder

Måske er det snart slut med at lade mobilen op hver aften. Med ny opfindelse kan telefonen få fuld energi på sølle 20 sekunder.


Nyheder fra Computerworld

Teaser billede

Galleri: De 10 vildeste datacentre i verden

I en gammel kirke, i et oppusteligt telt, på nedlagte militæranlæg eller midt i ørkenen. Der er ingen grænser for, hvor man kan banke et datacenter op. Her er de 10 sejeste anlæg i verden. I...


IT Kurser
Samarbejdspartnere

Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger