Seznam opisov zagotavlja semantičen način strukturiranja in predstavitve informacij, ki ustvarja razmerje med izrazi in njihovimi ustreznimi opisi. Zaradi tega so podatki ali informacije bolj dostopni in razumljivi. Ustvarjalci lahko uporabijo sezname opisov na mestih, kot so glosarji, slovarji, razdelki s pogostimi vprašanji, specifikacije izdelkov itd. Ta članek prikazuje postopek za uporabo seznama opisov v HTML.
Kako uporabljati opisni seznam v HTML?
Seznam opisov je sestavljen iz ' ”, “ «, in » ” in se uporablja za predstavitev zbirke izrazov in njihovih ustreznih definicij. Predstavi/prikaže vsebino v strukturirani obliki, v kateri opis presega preprost seznam točk. Lastnosti CSS lahko uporabite tudi na seznamu opisov, da ustvarite vizualno privlačen vmesnik.
Obiščite spodnji delček kode, da ustvarite opisni seznam v HTML:
< telo >
< div >
< h2 > Tržni deleži prenosnikov h2 >
< dl >
< dt > Hp dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 30 % dd >
< dt > Dell dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 24 % dd >
< dt > Lenovo dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 14 % dd >
dl >
div >
telo >
Razlaga zgornjega delčka kode:
-
- Sprva je starš ' div ' je bil ustvarjen element, ki deluje kot vsebnik za element opisnega seznama in druge elemente HTML, kot je ' ”.
- Nato je seznam opisov '
- Nato ime opisa/izraz ' ” se uporablja za definiranje opisa elementov, katerih opis bo dodan.
- Po tem se opisni podatki ' ” je vstavljena oznaka, ki vsebuje opis/informacije, povezane z opisno postavko.
Po koncu faze prevajanja se elementi HTML prikažejo na spletni strani takole:
Izhod pokaže, da je bil seznam opisov ustvarjen.
1. primer: dodelitev več opisov enemu izrazu
Opisno tabelo lahko ustvarite tako, da je za posamezen izraz več kot en opis. Lahko je še posebej uporabno, če obstaja več kot en pomen ali metoda, s katero je mogoče razložiti opisni izraz.
Koda za zgornji scenarij je prikazana spodaj:
< div >< h2 > Tržni deleži prenosnikov h2 >
< dl >
< dt > Hp dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 30 % v 2018 dd >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 23 % v 2017 dd >
< dt > Dell dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 24 % v 2018 dd >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 27 % v 2017 dd >
< dt > Lenovo dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 14 % v 2018 in 9 % v 2017 dd >
dl >
div >
V zgornji kodi:
-
- Najprej je seznam opisov ustvarjen s pomočjo » dl ”, “ dt « in » dd ” elementi.
- Nato več ' » se oznake uporabljajo pod enim samim » dt ” element. Enemu izrazu dodeli več opisov.
Po fazi kompilacije:
Rezultat kaže, da je bilo za en izraz dodanih več opisov.
2. primer: dodelitev več izrazov enemu opisu
Razvijalci lahko ustvarijo tudi opisni seznam, ki je sestavljen iz več opisnih izrazov z enimi opisnimi podatki. Še posebej je uporabno, kadar je več izrazov podobnih ali imajo enako funkcionalnost. Z uporabo te tehnike lahko naenkrat opišemo vse te izraze:
< div stil = 'rob: 20px' >< h2 > Tržni deleži prenosnikov h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 30 % v 2018 dd >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 23 % v 2017 dd >
< dt > Lenovo dt >
< dd > V kategoriji namiznih sistemov in prenosnih računalnikov ima delež 14 % v 2018 in 9 % v 2017 dd >
dl >
div >
V zgornjem kodnem bloku je ustvarjen opisni seznam in več ' Oznake ' se uporabljajo z enim samim ' ' oznaka.
Po koncu faze kompilacije:
Zgornji posnetek prikazuje, da je več izrazov dodeljenih z enimi opisnimi podatki.
Zaključek
Opisni seznam je ustvarjen z opisnim seznamom ' ”, ki ustvari vsebnik za elemente seznama in njihov opis. Poleg tega je ' Oznaka označuje ime predmeta, katerega opis bo zagotovljen. Medtem ko je ' ” shrani ustrezen opis. Ta članek je prikazal uporabo opisnega seznama v HTML.