Liste ordonnée HTML - Types d'attributs avec syntaxe et exemples

Table des matières:

Anonim

Introduction à la liste ordonnée HTML

Dans cette section, nous apprendrons comment implémenter des listes ordonnées en HTML. Comment décrire ou afficher une liste ordonnée? C'est très simple et facile, ils sont utilisés pour décrire la liste des informations dans le contenu. Et une autre technique est qu'une seule liste peut avoir plusieurs éléments de listes. Les listes en HTML peuvent être classées en trois types, elles sont:

  1. Liste ordonnée
  2. Liste non ordonnée
  3. Liste des définitions

Dans cet article, nous allons parcourir la spécification de la liste ordonnée avec un exemple. La liste ordonnée définit les informations ordonnées spécifiques lorsqu'une liste est créée, par exemple, elle affiche des informations ordonnées ou numérote les informations.

Syntaxe de la liste ordonnée

La liste ordonnée est créée à l'aide d'une balise nommée

    élément et se termine par
étiquette.

Exemples de liste ordonnée

Voyons quelques exemples mentionnés ci-dessous:

Exemple 1



HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines



HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines



HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines


    HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  1. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    2. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  2. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    3. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  3. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    4. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  4. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    5. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  5. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    6. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  6. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines

Production:

Cela vous donnera le résultat comme

Exemple # 2

Liste ordonnée avec des couleurs. Dans l'exemple suivant, nous avons utilisé la propriété certain compteur, définit les éléments de liste de comptage automatique dans le

  • . C'est juste une variable interne de CSS pour activer les fonctions de comptage.



    HTML Ordered List with colors

    ol li (
    counter-increment: list;
    list-style-type: none;
    position: relative;
    )
    ol li:before (
    color: #ff0000;
    content: counter(list) ".";
    left: -22px;
    position: absolute;
    text-align: center;
    width: 24px;
    )
    Norway is a Scandinavian Country
    Oslo is the capital city
    norway is known for its beauty, hiking, fishing
    Ranked among the toppest country in europe



      HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    1. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      2. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    2. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      3. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    3. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      4. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    4. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      5. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



    HTML Ordered List with colors

    ol li (
    counter-increment: list;
    list-style-type: none;
    position: relative;
    )
    ol li:before (
    color: #ff0000;
    content: counter(list) ".";
    left: -22px;
    position: absolute;
    text-align: center;
    width: 24px;
    )
    Norway is a Scandinavian Country
    Oslo is the capital city
    norway is known for its beauty, hiking, fishing
    Ranked among the toppest country in europe

    Production:

    Types d'attributs pour la liste ordonnée HTML

    Pour représenter la liste ordonnée, il existe cinq types d'attributs importants pour cette balise. Comme le HTML

      balise représente la liste des éléments de la liste ordonnée, ils peuvent être dans l'ordre alphanumérique, numérique ou simplement alphabétique, à condition que l'ordre soit la chose principale. Voici les attributs possibles de la liste ordonnée:

      1. L'attribut Type

      Cet attribut donne le type de numérotation à utiliser dans la liste.

      • type = 'a' - Donne l'ordre alphabétique
      • type = 'A'- Donne les majuscules Ordre alphabétique
      • type = 'i' - Donne un chiffre romain en minuscules
      • type = 'I'- Donne des chiffres romains en majuscules

      Ces types de numérotation sont mentionnés ci-dessous:

      1. Type d'attribut = "a"

      Pour faire la liste en minuscules alphabétiques, ce type est utilisé. L'exemple suivant montre la liste ordonnée en minuscules et l'a fait en italique.

      Exemple:



      HTML Ordered List types

      ol li span (
      font-weight: normal;
      )

      Saviez-vous que:

      Compétences requises pour devenir scientifique des données


      1. pas
      2. Il doit y avoir une connaissance préalable en programmation SAS et R.
      3. Ils devraient avoir un fort calibre de créativité et d'analyse

      Production:

      2. Type d'attribut = «A»

      Une liste ordonnée peut avoir un type d'attribut de l'alphabet en minuscules. L'exemple ci-dessous montre comment utiliser cet attribut dans la structure de liste et comment mettre les lettres en gras. Pour avoir la liste ordonnée en gras, elle doit être déclarée à l'aide de la balise.

      Exemple:



      Example for Nested list

      Capitales des États-Unis

      ol (
      font-weight: plus audacieux;
      )
      ol li span (
      poids de police: normal;
      )

      1. Alabama
        • Montgomery
      2. Arizona
        • Phénix
      3. Californie
        • Sacramento
      4. New Jersey
        • Trenton
      5. Washington
        • Olympie
      6. Pennsylvanie
        • Harisburg

      Production:

      3. Type d'attribut = «i»

      Cette fonctionnalité indique les lettres romaines minuscules.

      Exemple:



      HTML Ordered List types

      EDUCBA HTML List Tutorial:


      1. Liste ordonnée
      2. liste non ordonnée
      3. Liste de définitions

        1. Introduction à la liste
        2. Syntaxe d'une liste
        3. Types avec un exemple
      4. Instantanés

      production:

      4. Type d'attribut = "I"

      Cette fonctionnalité donne la sortie en chiffres romains supérieurs.

      Exemple:



      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears



      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears

      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears


        HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      1. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        2. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      2. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        3. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      3. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        4. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears


        HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      1. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


          HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears


        1. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



          2. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears


        2. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



          3. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears


        3. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



          4. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



        HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        2. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears

        Production:

        2. L'attribut de démarrage

        L'attribut start définit la valeur de début pour les numéros de liste ordonnés. Vous pouvez commencer avec n'importe quel numéro depuis le début et pas seulement avec le numéro par défaut «1». Exemple: start = 6. Il est maintenant utilisé en HTML5.

        Exemple:

        Dans l'exemple suivant, j'ai utilisé le type de style à upper_alpha avec le début de = 3, donc la sortie est affichée à partir de 'C'.



        Example for Nested list

        PAYS LES PLUS RICHES DU MONDE

        ol (type de type liste: alpha supérieur;
        font-weight: plus audacieux;
        )
        ol li span (
        font-weight: normal;)

        1. Quatar connu pour ses réserves de pétrole et de pétrochimie
        2. La Norvège connue pour la beauté de la nature avec un producteur de pétrole
        3. Singapour avec un centre commercial mondial

        Production:

        3.L'attribut inverse

        Il s'agit du nouvel attribut introduit en HTML5 qui indique que les éléments sont affichés dans l'ordre inverse dans les navigateurs Web. Utiliser,

          c'est un attribut booléen qui prend n'importe quelle valeur pour inverser le compteur. Déclaré
            dans le
              étiquette.

              Exemple:



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever


                HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              1. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                4. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever

              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever


                HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              1. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                4. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              4. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                5. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              5. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                6. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever

              Production:

              Conclusion

              Par conséquent, à la fin, j'ai résumé ce que la liste ordonnée a fait et elle est presque prise en charge dans tous les navigateurs. Certes, vous pouvez créer n'importe quel nombre de listes dans l'élément de balise HTML, dans cet article, nous nous sommes concentrés sur des exemples sélectionnés pour comprendre l'implémentation de base. Ainsi, l'apprentissage de ce sujet n'est peut-être pas la tâche la plus difficile,

              1. La balise utilisée ici est très simple à retenir.

                Articles recommandés

                Cela a été un guide pour la liste ordonnée HTML. Ici, nous discutons de leurs types avec différents attributs de HTML ainsi que des exemples. Vous pouvez également consulter les articles suivants pour en savoir plus -

                1. Cadres HTML
                2. Attribut de style HTML
                3. Qu'est-ce que HTML5?
                4. Éditeurs de texte HTML