Hoe verschillende soorten lijsten in HTML te implementeren?



Dit artikel geeft u een gedetailleerde en uitgebreide kennis van verschillende soorten lijsten in HTML met voorbeelden en code.

Lijsten zijn een van de belangrijkste manieren om gegevens en informatie weer te geven, waarbij elk record op één regel wordt weergegeven. Er zijn verschillende manieren om gegevens in een lijst weer te geven, bijvoorbeeld op een geordende manier of op een ongeordende manier. Ik behandel de volgende onderwerpen in deze lijst in artikel:

Typen lijsten in HTML

Voordat we beginnen met het maken van een lijst, kijken we eerst naar de HTML-tags:





    • Wordt gebruikt om een ​​ongeordende lijst te definiëren
      1. Wordt gebruikt om een ​​geordende lijst te definiëren
      2. Wordt gebruikt om een ​​lijstitem te definiëren
      3. Wordt gebruikt om een ​​beschrijvingslijst te definiëren
      4. Wordt gebruikt om een ​​term in een beschrijvingslijst te definiëren
      5. Wordt gebruikt om de term in een beschrijvingslijst te beschrijven

    Laten we eens kijken hoe u verschillende soorten lijsten in HTML kunt maken.

    Ongeordende lijst

    Om een ​​ongeordende lijst in HTML te definiëren gebruiken we

      tag en vervolgens definiëren we de lijst met items in
    • label. Standaard is de lijst met items gemarkeerd met opsommingstekens (kleine zwarte cirkels).



       

      Sport

      • Cricket
      • Amerikaans voetbal
      • Basketbal

      Uitgang:

      Ongeordende lijst in HTML

      Ongeordende HTML-lijst: verschillende itemmarkeringen



      U kunt kiezen uit een lijst met markeringen met behulp van de CSS-eigenschap list-style. Laten we eens kijken naar verschillende CSS-eigenschap van het lijststijltype die u kunt gebruiken om verschillende stijl van markeringen te definiëren:

      • schijf : Stelt de lijstitemmarkering in op opsommingsteken
      • cirkel : Stelt de markering van het lijstitem in op een cirkel
      • vierkant : Stelt de markering van het lijstitem in op een vierkant
      • geen : De lijstitems worden niet gemarkeerd

      Schijf:

       

      Sport

      • Cricket
      • Amerikaans voetbal
      • Basketbal

      Uitgang:

      Schijf in HTMLCirkel:

       

      Sport

      • Cricket
      • Amerikaans voetbal
      • Basketbal

      Uitgang:

      Cirkellijst in HTMLVierkant:

       

      Sport

      • Cricket
      • Amerikaans voetbal
      • Basketbal

      Uitgang:

      SquareGeen:

       

      Sport

      • Cricket
      • Amerikaans voetbal
      • Basketbal

      Uitgang:

      NoneNu we hebben begrepen hoe we een ongeordende lijst in HTML kunnen maken, gaan we kijken hoe we een geordende lijst in HTML kunnen maken.

      Bestelde lijst

      Om een ​​geordende lijst in HTML te definiëren gebruiken we

        tag en vervolgens definiëren we de lijst met items in
      1. label.
        De lijst met items is standaard gemarkeerd met cijfers.

         

        Sport

        1. Cricket
        2. Amerikaans voetbal
        3. Basketbal

        Uitgang:

        Bestelde lijst in HTMLLaten we nu eens kijken naar enkele varianten van geordende lijsten.

        Geordende HTML-lijst - Typekenmerk

        Er zijn verschillende soorten itemmarkeringen voor een geordende lijst:

        • type = ”1 ″ De lijstitems worden genummerd met cijfers (standaard)

        • type = 'A' De lijstitems worden genummerd met hoofdletters

        • type = 'a' De lijstitems worden genummerd met kleine letters

        • type = 'I' De lijstitems worden genummerd met Romeinse cijfers in hoofdletters

        • type = 'i' De lijstitems worden genummerd met Romeinse cijfers in kleine letters

        Nummers:

         

        Sport

        1. Cricket
        2. Amerikaans voetbal
        3. Basketbal

        Uitgang:

        NumbersHoofdletters:

         

        Sport

        1. Cricket
        2. Amerikaans voetbal
        3. Basketbal

        Uitgang:

        HoofdletterKleine letters:

         

        Sport

        1. Cricket
        2. Amerikaans voetbal
        3. Basketbal

        Uitgang:

        Kleine letterRoman Nu in hoofdletters mber s:

         

        Sport

        1. Cricket
        2. Amerikaans voetbal
        3. Basketbal

        Uitgang:

        Romeins nummer in hoofdletters

        Romeinse cijfers in kleine letters:

        hoe je een iterator gebruikt
         

        Sport

        1. Cricket
        2. Amerikaans voetbal
        3. Basketbal

        Uitgang:

        Romeinse cijfers in kleine letters

        HTML-beschrijvingslijsten

        U kunt ook beschrijvingslijsten in HTML maken. Een beschrijvingslijst wordt gebruikt om een ​​lijst met termen te maken en er een beschrijving aan toe te voegen. U maakt een beschrijvingslijst met

        label.
        tag definieert de term &
        tag voegt een beschrijving toe.

         

        Sport

        Cricket
        Cricket is een bat-and-ball-spel dat wordt gespeeld tussen twee teams van elf spelers op een veld in het midden waarvan een veld van 20 meter is met aan elk uiteinde een wicket, elk bestaande uit twee beugels die op drie stronken zijn verdeeld.
        Tafeltennis
        Tafeltennis, ook wel pingpong genoemd, is een sport waarbij twee of vier spelers een lichtgewicht bal heen en weer slaan over een tafel met kleine rackets. Het spel speelt zich af op een harde tafel die wordt gedeeld door een net.

        Uitgang:

        Geneste lijst in HTML

        U kunt ook een geneste lijst in HTML maken.

         

        Sport

        • Tafeltennis
        • Cricket
          • Virat Kohli
          • Joe Root
      2. Basketbal

    Uitgang:

    Nadat u de bovenstaande fragmenten hebt uitgevoerd, zou u hebben begrepen hoe u lijsten in HTML kunt maken. Ik hoop dat deze blog informatief en een meerwaarde voor je is.

    Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.

    Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van de blog 'Lijst in HTML' en we nemen zo spoedig mogelijk contact met u op.