Zoznam popisov poskytuje sémantický spôsob, ako štruktúrovať a prezentovať informácie vytvárajúce vzťah medzi termínmi a ich zodpovedajúcimi popismi. Vďaka tomu sú údaje alebo informácie dostupnejšie a zrozumiteľnejšie. Tvorcovia môžu použiť zoznamy popisov na miestach, ako sú glosáre, slovníky, sekcie často kladených otázok, špecifikácie produktu atď. Tento článok demonštruje postup používania zoznamu popisov v HTML.
Ako používať zoznam popisov v HTML?
Zoznam popisov pozostáva z „ “, “ “ a „ ” a používa sa na reprezentáciu kolekcie výrazov a ich zodpovedajúcich definícií. Prezentuje/zobrazuje obsah v štruktúrovanej forme, v ktorej popis presahuje jednoduchý zoznam odrážok. Vlastnosti CSS možno použiť aj na zoznam popisov a vytvoriť tak vizuálne príťažlivé rozhranie.
Navštívte nižšie uvedený útržok kódu a vytvorte zoznam popisov v HTML:
< telo >
< div >
< h2 > Trhové podiely notebookov h2 >
< dl >
< dt > Hp dt >
< dd > V kategórii Desktop Systems and laptops má podiel 30 % dd >
< dt > Dell dt >
< dd > V kategórii Desktop Systems and laptops má podiel 24 % dd >
< dt > Lenovo dt >
< dd > V kategórii Desktop Systems and laptops má podiel 14 % dd >
dl >
div >
telo >
Vysvetlenie vyššie uvedeného útržku kódu:
-
- Najprv rodič „ div bol vytvorený prvok, ktorý funguje ako kontajner pre prvok zoznamu popisov a ďalšie prvky HTML ako „ “.
- Ďalej zoznam popisov „
- Potom názov/výraz popisu „ Značka ” sa používa na definovanie popisu položiek, ktorých popis bude pridaný.
- Potom popisné údaje „ “ je vložená značka, ktorá obsahuje popis/informácie súvisiace s položkou popisu.
Po skončení fázy kompilácie sa prvky HTML objavia na webovej stránke takto:
Výstup ukazuje, že bol vygenerovaný zoznam popisov.
Príklad 1: Priradenie viacerých popisov k jednému výrazu
Je možné vytvoriť tabuľku popisu, v ktorej je viac ako jeden popis pre jeden výraz. Môže to byť obzvlášť užitočné, ak existuje viac ako jeden význam alebo metóda, pomocou ktorej možno vysvetliť opisný výraz.
Kód pre vyššie uvedený scenár je uvedený nižšie:
< div >< h2 > Trhové podiely notebookov h2 >
< dl >
< dt > Hp dt >
< dd > V kategórii Desktop Systems and laptops má podiel 30 % v 2018 dd >
< dd > V kategórii Desktop Systems and laptops má podiel 23 % v 2017 dd >
< dt > Dell dt >
< dd > V kategórii Desktop Systems and laptops má podiel 24 % v 2018 dd >
< dd > V kategórii Desktop Systems and laptops má podiel 27 % v 2017 dd >
< dt > Lenovo dt >
< dd > V kategórii Desktop Systems and laptops má podiel 14 % v 2018 a 9 % v 2017 dd >
dl >
div >
Vo vyššie uvedenom kóde:
-
- Najprv sa vytvorí zoznam popisov pomocou „ dl “, “ dt “ a „ dd “prvky.
- Ďalej, viacero „ “ tagy sa používajú pod jedným “ dt ' element. K jednému výrazu priraďuje viacero popisov.
Po fáze kompilácie:
Výstup ukazuje, že pre jeden výraz bolo pridaných viacero popisov.
Príklad 2: Priradenie viacerých výrazov k jednému popisu
Vývojári môžu tiež vytvoriť popisný zoznam, ktorý pozostáva z viacerých popisných výrazov s jedným popisným údajom. Je to užitočné najmä vtedy, keď sú viaceré výrazy podobné alebo majú rovnakú funkčnosť. Pomocou tejto techniky možno všetky tieto pojmy opísať naraz:
< div štýl = 'margin: 20px' >< h2 > Trhové podiely notebookov h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > V kategórii Desktop Systems and laptops má podiel 30 % v 2018 dd >
< dd > V kategórii Desktop Systems and laptops má podiel 23 % v 2017 dd >
< dt > Lenovo dt >
< dd > V kategórii Desktop Systems and laptops má podiel 14 % v 2018 a 9 % v 2017 dd >
dl >
div >
Vo vyššie uvedenom bloku kódu sa vytvorí zoznam popisov a viaceré „ 'značky sa používajú s jedným ' ” tag.
Po skončení fázy kompilácie:
Vyššie uvedená snímka ukazuje, že s jedným popisným údajom je priradených viacero výrazov.
Záver
Zoznam popisov sa vytvára pomocou zoznamu popisov “ “, ktorá vytvára kontajner pre položky zoznamu a ich popis. Okrem toho, „ Značka ” označuje názov položky, ktorej popis bude poskytnutý. Kým ' ” tag ukladá zodpovedajúci popis. Tento článok demonštroval využitie zoznamu popisov v HTML.