Beskrivelseslisten giver en semantisk måde at strukturere og præsentere information, der skaber en relation mellem termer og deres tilsvarende beskrivelser. Det gør data eller information mere tilgængelig og forståelig. Skaberne kan bruge beskrivelseslister på steder som ordlister, ordbøger, FAQ-sektioner, produktspecifikationer osv. Denne artikel demonstrerer proceduren for at bruge en beskrivelsesliste i HTML.
Hvordan bruger man beskrivelsesliste i HTML?
Beskrivelseslisten består af ' ', ' ', og ' ” tags, og det bruges til at repræsentere en samling af termer og deres tilsvarende definitioner. Det præsenterer/viser indholdet i en struktureret form, hvor beskrivelsen går ud over en simpel punktliste. CSS-egenskaberne kan også anvendes på beskrivelseslisten for at skabe en visuelt tiltalende grænseflade.
Besøg nedenstående kodestykke for at oprette en beskrivelsesliste i HTML:
< legeme >
< div >
< h2 > Laptop markedsandele h2 >
< dl >
< dt > Hp dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 30 % dd >
< dt > Dell dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 24 % dd >
< dt > Lenovo dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 14 % dd >
dl >
div >
legeme >
Forklaringen på ovenstående kodestykke:
-
- I første omgang var forælderen ' div '-elementet er blevet oprettet, der fungerer som en beholder for beskrivelseslisteelementet og andre HTML-elementer som ' ”.
- Dernæst beskrivelseslisten '
- Derefter beskrives navnet/udtrykket ' ” tag bruges til at definere beskrivelsen af de varer, hvis beskrivelse vil blive tilføjet.
- Derefter vil beskrivelsesdataene ' ” indsættes tag, der indeholder beskrivelsen/informationen relateret til beskrivelseselementet.
Efter afslutningen af kompileringsfasen vises HTML-elementerne på websiden således:
Outputtet viser, at beskrivelseslisten er blevet genereret.
Eksempel 1: Tildel flere beskrivelser til en enkelt term
Beskrivelsestabellen kan oprettes, hvor der er mere end én beskrivelse for et enkelt udtryk. Det kan være særligt nyttigt, hvis der er mere end én betydning eller metode, hvormed beskrivelsesudtrykket kan forklares.
Koden for ovenstående scenarie er vist nedenfor:
< div >< h2 > Laptop markedsandele h2 >
< dl >
< dt > Hp dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 30 % i 2018 dd >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 23 % i 2017 dd >
< dt > Dell dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 24 % i 2018 dd >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 27 % i 2017 dd >
< dt > Lenovo dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 14 % i 2018 og 9 % i 2017 dd >
dl >
div >
I ovenstående kode:
-
- Først oprettes beskrivelseslisten ved hjælp af ' dl ', ' dt ' og ' dd ' elementer.
- Dernæst flere ' ' tags bruges under en enkelt ' dt ' element. Den tildeler flere beskrivelser til et enkelt udtryk.
Efter kompileringsfasen:
Outputtet viser, at der er tilføjet flere beskrivelser for et enkelt udtryk.
Eksempel 2: Tildel flere termer til en enkelt beskrivelse
Udviklerne kan også oprette en beskrivelsesliste, der består af flere beskrivelsesudtryk med enkelt beskrivelsesdata. Det er især nyttigt, når flere udtryk er ens eller har samme funktionalitet. Ved at bruge denne teknik kan alle disse udtryk beskrives på én gang:
< div stil = 'margin: 20px' >< h2 > Laptop markedsandele h2 >
< dl >
< dt > Hp dt >
< dt > Elitebog dt >
< dt > proBook dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 30 % i 2018 dd >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 23 % i 2017 dd >
< dt > Lenovo dt >
< dd > I Desktop Systems og bærbare computere kategori har en andel af 14 % i 2018 og 9 % i 2017 dd >
dl >
div >
I ovenstående kodeblok oprettes beskrivelseslisten, og flere ' ' tags bruges med en enkelt ' ” tag.
Efter afslutningen af kompileringsfasen:
Ovenstående snapshot viser, at flere termer er tildelt enkelt beskrivelsesdata.
Konklusion
Beskrivelseslisten oprettes ved hjælp af beskrivelseslisten ' ” tag, der opretter containeren for listeelementerne og deres beskrivelse. Desuden er ' ” tag angiver varens navn, hvis beskrivelse vil blive givet. Mens ' ” tag gemmer den tilsvarende beskrivelse. Denne artikel har demonstreret brugen af en beskrivelsesliste i HTML.