Come implementare diversi tipi di elenchi in HTML?



Questo articolo ti fornirà una conoscenza dettagliata e completa dei diversi tipi di List in HTML con esempi e codice.

Gli elenchi sono uno dei modi importanti per rappresentare dati e informazioni in cui ogni record viene visualizzato in una singola riga. Esistono vari modi per rappresentare i dati in un elenco, ad esempio in modo ordinato o in modo non ordinato. Tratterò i seguenti argomenti in questo elenco in articolo:

Tipi di elenco in HTML

Prima di iniziare a creare un elenco, esaminiamo prima i tag HTML:





    • Utilizzato per definire un elenco non ordinato
      1. Utilizzato per definire un elenco ordinato
      2. Utilizzato per definire una voce di elenco
      3. Utilizzato per definire un elenco di descrizioni
      4. Utilizzato per definire un termine in un elenco di descrizioni
      5. Utilizzato per descrivere il termine in un elenco di descrizioni

    Vediamo come creare diversi tipi di elenco in HTML.

    Lista non ordinata

    Per definire un elenco non ordinato in HTML usiamo

      tag e quindi definiamo l'elenco degli elementi in
    • etichetta. Per impostazione predefinita, l'elenco di elementi è contrassegnato da punti elenco (ad esempio piccoli cerchi neri).



       

      Gli sport

      • Cricket
      • Calcio
      • Baseball

      Produzione:

      Elenco non ordinato in HTML

      Elenco HTML non ordinato: indicatori di elementi diversi



      Puoi scegliere da un elenco di marcatori utilizzando la proprietà del tipo di elenco stile CSS. Diamo un'occhiata a diverse proprietà del tipo di elenco CSS che puoi utilizzare per definire diversi stili di marcatori:

      come usare charat in java
      • disco : Imposta il marcatore della voce di elenco su Punto elenco
      • cerchio : Imposta il contrassegno della voce di elenco su un cerchio
      • piazza : Imposta l'indicatore della voce di elenco su un quadrato
      • nessuna : Gli elementi dell'elenco non verranno contrassegnati

      Disco:

       

      Gli sport

      • Cricket
      • Calcio
      • Baseball

      Produzione:

      Disco in HTMLCerchio:

       

      Gli sport

      • Cricket
      • Calcio
      • Baseball

      Produzione:

      Circle-List in HTMLPiazza:

       

      Gli sport

      • Cricket
      • Calcio
      • Baseball

      Produzione:

      SquareNessuna:

       

      Gli sport

      • Cricket
      • Calcio
      • Baseball

      Produzione:

      NoneOra, dopo aver capito come creare un elenco non ordinato in HTML, vediamo come creare un elenco ordinato in HTML.

      Lista ordinata

      Per definire un elenco ordinato in HTML utilizziamo

        tag e quindi definiamo l'elenco degli elementi in
      1. etichetta.
        Per impostazione predefinita, l'elenco degli elementi è contrassegnato da numeri.

         

        Gli sport

        1. Cricket
        2. Calcio
        3. Baseball

        Produzione:

        Elenco ordinato in HTMLOra diamo un'occhiata ad alcune delle varianti degli elenchi ordinati.

        Elenco HTML ordinato - Tipo di attributo

        Esistono diversi tipi di marcatori articolo per un elenco ordinato:

        • tipo = '1' Gli elementi dell'elenco verranno numerati con numeri (impostazione predefinita)

        • tipo = 'A' Gli elementi dell'elenco verranno numerati con lettere maiuscole

        • tipo = 'a' Gli elementi dell'elenco verranno numerati con lettere minuscole

        • tipo = 'I' Gli elementi dell'elenco verranno numerati con numeri romani maiuscoli

        • tipo = 'i' Gli elementi dell'elenco verranno numerati con numeri romani minuscoli

        Numeri:

         

        Gli sport

        1. Cricket
        2. Calcio
        3. Baseball

        Produzione:

        NumbersLettere maiuscole:

         

        Gli sport

        1. Cricket
        2. Calcio
        3. Baseball

        Produzione:

        Lettera maiuscolaLettere minuscole:

         

        Gli sport

        1. Cricket
        2. Calcio
        3. Baseball

        Produzione:

        Lettera minuscolaRoman Nu maiuscolo mber S:

         

        Gli sport

        1. Cricket
        2. Calcio
        3. Baseball

        Produzione:

        Numero romano maiuscolo

        Numeri romani minuscoli:

        come aprire aws cli
         

        Gli sport

        1. Cricket
        2. Calcio
        3. Baseball

        Produzione:

        Numeri romani minuscoli

        Elenchi di descrizione HTML

        Puoi anche creare elenchi di descrizioni in HTML. Un elenco di descrizioni viene utilizzato per creare un elenco di termini e aggiungervi una descrizione. Si crea un elenco di descrizioni utilizzando

        etichetta.
        tag definisce il termine &
        il tag aggiunge una descrizione.

         

        Gli sport

        Cricket
        Il cricket è una partita di bat-and-ball giocata tra due squadre di undici giocatori su un campo al centro del quale si trova un campo di 20 metri con un wicket a ciascuna estremità, ciascuna composta da due balle bilanciate su tre monconi.
        Tennis da tavolo
        Il ping pong, noto anche come ping-pong, è uno sport in cui due o quattro giocatori colpiscono una pallina leggera avanti e indietro su un tavolo usando piccole racchette. Il gioco si svolge su un tavolo rigido diviso da una rete.

        Produzione:

        Elenco nidificato in HTML

        Puoi anche creare un elenco nidificato in HTML.

         

        Gli sport

        • Tennis da tavolo
        • Cricket
          • Virat kohli
          • Joe Root
      2. Pallacanestro

    Produzione:

    Ora, dopo aver eseguito gli snippet di cui sopra, avresti capito come creare elenchi in HTML. Spero che questo blog sia informativo e un valore aggiunto per te.

    Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con le tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

    Hai domande per noi? Per favore, menzionalo nella sezione commenti del blog 'List in HTML' e ti risponderemo.