Com utilitzar la llista de descripcions en HTML?

Com Utilitzar La Llista De Descripcions En Html



La llista de descripcions proporciona una manera semàntica d'estructurar i presentar la informació creant una relació entre els termes i les seves descripcions corresponents. Fa que les dades o la informació siguin més accessibles i comprensibles. Els creadors poden utilitzar llistes de descripcions en llocs com glossaris, diccionaris, seccions de preguntes freqüents, especificacions de producte, etc. Aquest article mostra el procediment per utilitzar una llista de descripcions en HTML.

Com utilitzar la llista de descripcions en HTML?

La llista de descripció consta de '

”, “
”, i “
” i s'utilitza per representar una col·lecció de termes i les seves definicions corresponents. Presenta el contingut en una forma estructurada en la qual la descripció va més enllà d'una simple llista de vinyetes. Les propietats CSS també es poden aplicar a la llista de descripcions per crear una interfície visualment atractiva.







Visiteu el fragment de codi següent per crear una llista de descripcions en HTML:



< cos >
< div >
< h2 > Quotes de mercat de portàtils h2 >
< dl >
< dt > Hp dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 30 % dd >
< dt > Dell dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 24 % dd >
< dt > Lenovo dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 14 % dd >
dl >
div >
cos >


L'explicació del fragment de codi anterior:



    • Al principi, els pares ' div S'ha creat un element que actua com un contenidor per a l'element de llista de descripció i altres elements HTML com ara '

      ”.

    • A continuació, la llista de descripció '
      ” s'utilitza per configurar l'entorn per a la llista de descripció.
    • A continuació, el nom/terme de la descripció '
      ” s'utilitza per definir la descripció dels elements la descripció dels quals s'afegirà.
    • Després d'això, les dades de descripció '
      ” s'insereix una etiqueta que conté la descripció/informació relacionada amb l'element de descripció.

Després del final de la fase de compilació, els elements HTML apareixen a la pàgina web així:






La sortida mostra que s'ha generat la llista de descripció.

Exemple 1: assigneu diverses descripcions a un sol terme



Es pot crear la taula de descripció en la qual hi ha més d'una descripció per a un sol terme. Pot ser especialment útil si hi ha més d'un significat o mètode pel qual es pot explicar el terme de descripció.

El codi de l'escenari anterior es mostra a continuació:

< div >
< h2 > Quotes de mercat de portàtils h2 >
< dl >
< dt > Hp dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 30 % en 2018 dd >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 23 % en 2017 dd >
< dt > Dell dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 24 % en 2018 dd >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 27 % en 2017 dd >
< dt > Lenovo dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 14 % en 2018 i 9 % en 2017 dd >
dl >
div >


En el codi anterior:

    • Primer, la llista de descripció es crea amb l'ajuda de ' dl ”, “ dt ' i ' dd ” elements.
    • A continuació, múltiples '
      Les etiquetes ' s'utilitzen sota un sol ' dt ” element. Assigna múltiples descripcions a un sol terme.

Després de la fase de compilació:


La sortida mostra que s'han afegit diverses descripcions per a un sol terme.

Exemple 2: assigneu diversos termes a una única descripció

Els desenvolupadors també poden crear una llista de descripcions que consta de diversos termes de descripció amb dades de descripció única. És especialment útil quan diversos termes són similars o tenen la mateixa funcionalitat. Mitjançant aquesta tècnica, tots aquests termes es poden descriure alhora:

< div estil = 'marge: 20 píxels' >
< h2 > Quotes de mercat de portàtils h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 30 % en 2018 dd >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 23 % en 2017 dd >
< dt > Lenovo dt >
< dd > A la categoria de sistemes d'escriptori i portàtils té una part de 14 % en 2018 i 9 % en 2017 dd >
dl >
div >


Al bloc de codi anterior, es crea la llista de descripció i múltiples '

Les etiquetes ' s'utilitzen amb un sol '
' etiqueta.

Després del final de la fase de compilació:


La instantània anterior mostra que s'assignen diversos termes amb dades de descripció única.

Conclusió

La llista de descripció es crea mitjançant la llista de descripcions '

” que crea el contenidor dels elements de la llista i la seva descripció. A més, el “
” l'etiqueta denota el nom de l'element la descripció del qual es proporcionarà. Mentre que '
” emmagatzema la descripció corresponent. Aquest article ha demostrat l'ús d'una llista de descripcions en HTML.