Popis opisa pruža semantički način strukturiranja i predstavljanja informacija stvarajući odnos između pojmova i njihovih odgovarajućih opisa. Čini podatke ili informacije dostupnijima i razumljivijima. Kreatori mogu koristiti popise opisa na mjestima kao što su pojmovnici, rječnici, odjeljci s često postavljanim pitanjima, specifikacije proizvoda itd. Ovaj članak demonstrira postupak za korištenje popisa opisa u HTML-u.
Kako koristiti popis opisa u HTML-u?
Popis opisa sastoji se od ' ”, “ ', i ' ” oznake i koristi se za predstavljanje zbirke pojmova i njihovih odgovarajućih definicija. Predstavlja/prikazuje sadržaj u strukturiranom obliku u kojem opis nadilazi jednostavan popis s nabrajanim točkama. CSS svojstva također se mogu primijeniti na popis opisa kako bi se stvorilo vizualno privlačno sučelje.
Posjetite donji isječak koda da biste izradili popis opisa u HTML-u:
< tijelo >
< div >
< h2 > Udjeli na tržištu prijenosnih računala h2 >
< dl >
< dt > Hp dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 30 % dd >
< dt > Dell dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 24 % dd >
< dt > Lenovo dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 14 % dd >
dl >
div >
tijelo >
Objašnjenje gornjeg isječka koda:
-
- Isprva, roditelj “ div ' stvoren je element koji djeluje kao spremnik za element popisa opisa i druge HTML elemente poput ' ”.
- Zatim, popis opisa '
- Zatim, naziv/pojam opisa ' ” oznaka se koristi za definiranje opisa stavki čiji će se opis dodati.
- Nakon toga podaci o opisu ' ” umetnuta je oznaka koja sadrži opis/informacije vezane uz stavku opisa.
Nakon završetka faze kompilacije, HTML elementi se pojavljuju na web stranici ovako:
Izlaz pokazuje da je popis opisa generiran.
Primjer 1: Dodijelite više opisa jednom pojmu
Tablica opisa može se kreirati u kojoj postoji više od jednog opisa za jedan pojam. Može biti osobito korisno ako postoji više od jednog značenja ili metoda kojima se opisni pojam može objasniti.
Kôd za gornji scenarij prikazan je u nastavku:
< div >< h2 > Udjeli na tržištu prijenosnih računala h2 >
< dl >
< dt > Hp dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 30 % u 2018 dd >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 23 % u 2017 dd >
< dt > Dell dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 24 % u 2018 dd >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 27 % u 2017 dd >
< dt > Lenovo dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 14 % u 2018 i 9 % u 2017 dd >
dl >
div >
U gornjem kodu:
-
- Prvo se kreira popis opisa uz pomoć ' dl ”, “ dt ' i ' dd ' elementi.
- Zatim, više ' ” oznake se koriste pod jednim “ dt ” element. Dodjeljuje više opisa jednom pojmu.
Nakon faze kompilacije:
Izlaz pokazuje da je za jedan pojam dodano više opisa.
Primjer 2: Dodijelite više pojmova jednom opisu
Razvojni programeri također mogu izraditi popis opisa koji se sastoji od više pojmova opisa s jednim opisnim podacima. Posebno je korisno kada je više izraza slično ili ima istu funkcionalnost. Koristeći ovu tehniku, svi ovi pojmovi mogu se opisati odjednom:
< div stil = 'margina: 20px' >< h2 > Udjeli na tržištu prijenosnih računala h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 30 % u 2018 dd >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 23 % u 2017 dd >
< dt > Lenovo dt >
< dd > U kategoriji stolnih računala i prijenosnih računala ima udio od 14 % u 2018 i 9 % u 2017 dd >
dl >
div >
U gornjem bloku koda stvara se popis opisa i višestruki ' ' oznake se koriste s jednom ' ” oznaka.
Nakon završetka faze kompilacije:
Gornja snimka pokazuje da je više pojmova dodijeljeno jednom opisnom podatku.
Zaključak
Popis opisa kreira se pomoću popisa opisa “ ” koja stvara spremnik za stavke popisa i njihov opis. Nadalje, ' ” oznaka označava naziv stavke čiji će se opis dati. Dok ' ” pohranjuje odgovarajući opis. Ovaj je članak pokazao korištenje popisa opisa u HTML-u.