Seznam popisů poskytuje sémantický způsob, jak strukturovat a prezentovat informace vytvářející vztah mezi pojmy a jejich odpovídajícími popisy. Díky tomu jsou data nebo informace dostupnější a srozumitelnější. Tvůrci mohou používat seznamy popisů na místech, jako jsou glosáře, slovníky, sekce FAQ, specifikace produktu atd. Tento článek demonstruje postup použití seznamu popisů v HTML.
Jak používat seznam popisů v HTML?
Seznam popisů se skládá z „ “, “ ', a ' ” a používá se k reprezentaci kolekce termínů a jejich odpovídajících definic. Prezentuje/zobrazuje obsah ve strukturované formě, ve které popis přesahuje jednoduchý seznam odrážek. Vlastnosti CSS lze také použít na seznam popisů a vytvořit vizuálně přitažlivé rozhraní.
Navštivte níže uvedený fragment kódu a vytvořte seznam popisů v HTML:
< tělo >
< div >
< h2 > Tržní podíly notebooků h2 >
< dl >
< dt > Hp dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 30 % dd >
< dt > Dell dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 24 % dd >
< dt > Lenovo dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 14 % dd >
dl >
div >
tělo >
Vysvětlení výše uvedeného fragmentu kódu:
-
- Nejprve rodič „ div “ byl vytvořen prvek, který funguje jako kontejner pro prvek seznamu popisu a další prvky HTML jako „ “.
- Dále seznam popisů „
- Poté popisný název/výraz „ ” tag se používá k definování popisu položek, jejichž popis bude přidán.
- Poté popisná data „ “ je vložen tag, který obsahuje popis/informace týkající se položky popisu.
Po skončení fáze kompilace se prvky HTML zobrazí na webové stránce takto:
Výstup ukazuje, že byl vygenerován popisný seznam.
Příklad 1: Přiřazení více popisů jednomu termínu
Lze vytvořit tabulku popisu, ve které je více než jeden popis pro jeden termín. To může být zvláště užitečné, pokud existuje více než jeden význam nebo metoda, kterou lze vysvětlit popisný termín.
Kód pro výše uvedený scénář je uveden níže:
< div >< h2 > Tržní podíly notebooků h2 >
< dl >
< dt > Hp dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 30 % v 2018 dd >
< dd > V kategorii stolních počítačů a notebooků má podíl 23 % v 2017 dd >
< dt > Dell dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 24 % v 2018 dd >
< dd > V kategorii stolních počítačů a notebooků má podíl 27 % v 2017 dd >
< dt > Lenovo dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 14 % v 2018 a 9 % v 2017 dd >
dl >
div >
Ve výše uvedeném kódu:
-
- Nejprve se vytvoří seznam popisů pomocí „ dl “, “ dt ' a ' dd ' Prvky.
- Dále, více “ “ tagy se používají pod jedním “ dt prvek. Přiřazuje více popisů k jednomu termínu.
Po fázi kompilace:
Výstup ukazuje, že pro jeden výraz bylo přidáno více popisů.
Příklad 2: Přiřazení více pojmů k jednomu popisu
Vývojáři mohou také vytvořit popisný seznam, který se skládá z více popisných výrazů s jedním popisným údajem. To je zvláště užitečné, když je více výrazů podobných nebo mají stejnou funkci. Pomocí této techniky lze všechny tyto pojmy popsat najednou:
< div styl = 'margin: 20px' >< h2 > Tržní podíly notebooků h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 30 % v 2018 dd >
< dd > V kategorii stolních počítačů a notebooků má podíl 23 % v 2017 dd >
< dt > Lenovo dt >
< dd > V kategorii stolních počítačů a notebooků má podíl 14 % v 2018 a 9 % v 2017 dd >
dl >
div >
Ve výše uvedeném bloku kódu se vytvoří seznam popisů a několik „ “ tagy se používají s jedním “ ” tag.
Po skončení fáze kompilace:
Výše uvedený snímek ukazuje, že s jedním popisným údajem je přiřazeno více termínů.
Závěr
Seznam popisů se vytváří pomocí seznamu popisů “ ” tag, který vytvoří kontejner pro položky seznamu a jejich popis. Dále, „ Značka ” označuje název položky, jejíž popis bude poskytnut. Zatímco „ ” tag ukládá odpovídající popis. Tento článek demonstroval využití seznamu popisů v HTML.