Cum se utilizează lista de descriere în HTML?

Cum Se Utilizeaza Lista De Descriere In Html



Lista de descriere oferă o modalitate semantică de structurare și prezentare a informațiilor, creând o relație între termeni și descrierile lor corespunzătoare. Face datele sau informațiile mai accesibile și mai ușor de înțeles. Creatorii pot utiliza liste de descriere în locuri precum glosare, dicționare, secțiuni de întrebări frecvente, specificații de produs etc. Acest articol demonstrează procedura de utilizare a unei liste de descriere în HTML.

Cum se utilizează lista de descriere în HTML?

Lista de descriere constă din „

”, “
', și '
” etichete și este folosit pentru a reprezenta o colecție de termeni și definițiile lor corespunzătoare. Prezintă/afișează conținutul într-o formă structurată în care descrierea depășește o simplă listă cu marcatori. Proprietățile CSS pot fi, de asemenea, aplicate listei de descriere pentru a crea o interfață atractivă din punct de vedere vizual.







Accesați fragmentul de cod de mai jos pentru a crea o listă de descriere în HTML:



< corp >
< div >
< h2 > Cote de piață pentru laptopuri h2 >
< dl >
< dt > Hp dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 30 % dd >
< dt > Dell dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 24 % dd >
< dt > Lenovo dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 14 % dd >
dl >
div >
corp >


Explicația fragmentului de cod de mai sus:



    • La început, părintele „ div „ a fost creat elementul care acționează ca un container pentru elementul de listă de descriere și alte elemente HTML precum „

      ”.

    • În continuare, lista de descriere „
      ” eticheta este utilizată pentru configurarea mediului pentru lista de descriere.
    • Apoi, numele/termenul descrierii „
      ” eticheta este folosită pentru a defini descrierea articolelor a căror descriere urmează să fie adăugată.
    • După aceea, datele de descriere „
      ” se inserează eticheta care conține descrierea/informațiile legate de articolul de descriere.

După sfârșitul fazei de compilare, elementele HTML apar pe pagina web astfel:






Rezultatul arată că lista de descriere a fost generată.

Exemplul 1: Atribuiți mai multe descrieri unui singur termen



Tabelul de descriere poate fi creat în care există mai multe descriere pentru un singur termen. Poate fi util în special dacă există mai multe semnificații sau metode prin care termenul de descriere poate fi explicat.

Codul pentru scenariul de mai sus este prezentat mai jos:

< div >
< h2 > Cote de piață pentru laptopuri h2 >
< dl >
< dt > Hp dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 30 % în 2018 dd >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 23 % în 2017 dd >
< dt > Dell dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 24 % în 2018 dd >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 27 % în 2017 dd >
< dt > Lenovo dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 14 % în 2018 și 9 % în 2017 dd >
dl >
div >


În codul de mai sus:

    • Mai întâi, lista de descriere este creată cu ajutorul „ dl ”, “ dt ' și ' dd ” elemente.
    • În continuare, mai multe „
      etichetele „ sunt utilizate sub un singur „ dt ' element. Acesta atribuie mai multe descrieri unui singur termen.

După faza de compilare:


Rezultatul arată că au fost adăugate mai multe descrieri pentru un singur termen.

Exemplul 2: Atribuiți mai mulți termeni unei singure descrieri

Dezvoltatorii pot crea, de asemenea, o listă de descrieri care constă din mai mulți termeni de descriere cu date de descriere unice. Este util mai ales atunci când mai mulți termeni sunt similari sau au aceeași funcționalitate. Folosind această tehnică, toți acești termeni pot fi descriși simultan:

< div stil = 'marja: 20px' >
< h2 > Cote de piață pentru laptopuri h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 30 % în 2018 dd >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 23 % în 2017 dd >
< dt > Lenovo dt >
< dd > În categoria Sisteme desktop și laptopuri are o cotă de 14 % în 2018 și 9 % în 2017 dd >
dl >
div >


În blocul de cod de mai sus, lista de descriere este creată și mai multe „

etichetele ” sunt utilizate cu un singur “
' etichetă.

După încheierea fazei de compilare:


Instantaneul de mai sus arată că mai mulți termeni sunt alocați cu o singură descriere.

Concluzie

Lista de descriere este creată folosind lista de descriere „

” etichetă care creează containerul pentru articolele din listă și descrierea acestora. În plus, „
Eticheta ” denotă numele articolului a cărui descriere va fi furnizată. In timp ce '
” eticheta stochează descrierea corespunzătoare. Acest articol a demonstrat utilizarea unei liste de descriere în HTML.