Lista uporządkowana HTML - Rodzaje atrybutów ze składnią i przykładami

Spisie treści:

Anonim

Wprowadzenie do listy uporządkowanej HTML

W tej sekcji nauczymy się, jak zaimplementować Listy uporządkowane w HTML. Jak opisać lub wyświetlić uporządkowaną listę? Jest to bardzo proste i łatwe, służą do opisu listy informacji w treści. Inną techniką jest to, że pojedyncza lista może zawierać wiele elementów list. Listy w HTML można podzielić na trzy typy, są to:

  1. Uporządkowana lista
  2. Lista nieuporządkowana
  3. Lista definicji

W tym artykule przejdziemy do specyfikacji uporządkowanej listy z przykładem. Lista uporządkowana określa określone uporządkowane informacje, gdy lista jest tworzona, na przykład pokazuje informacje o rzędnych lub numerację informacji.

Składnia listy uporządkowanej

Lista uporządkowana jest tworzona za pomocą znacznika o nazwie

    element i kończy się na
etykietka.

Przykłady uporządkowanej listy

Zobaczmy przykład wymieniony poniżej:

Przykład 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

Wynik:

To da ci wynik jak

Przykład nr 2

Lista uporządkowana z kolorami. W poniższym przykładzie użyliśmy pewnej właściwości counter, która definiuje elementy listy automatycznego zliczania w

  • . Jest to tylko wewnętrzna zmienna CSS, która umożliwia funkcje zliczania.



    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

    Wynik:

    Typy atrybutów dla listy uporządkowanej HTML

    Aby przedstawić uporządkowaną listę, istnieje pięć ważnych rodzajów atrybutów dla tego znacznika. Jako HTML

      Tag reprezentuje listę pozycji na liście uporządkowanej. Mogą być w porządku alfanumerycznym, numerycznym lub po prostu alfabetycznym, pod warunkiem że najważniejsza jest kolejność. Oto możliwe atrybuty listy uporządkowanej:

      1. Atrybut Type

      Ten atrybut określa typ numeracji, który ma być zastosowany na liście.

      • type = 'a' - porządek alfabetyczny
      • type = 'A' - Nadaje duże litery Porządek alfabetyczny
      • type = 'i' - Podaje małe litery alfabetu rzymskiego
      • type = 'I'- Podaje wielkie litery rzymskie

      Ten rodzaj numeracji wymieniono poniżej:

      1. Typ atrybutu = „a”

      Do utworzenia listy alfabetycznie małymi literami używa się tego typu. Poniższy przykład pokazuje uporządkowaną listę małymi literami i zapisano ją kursywą.

      Przykład:



      HTML Ordered List types

      ol li span (
      font-weight: normal;
      )

      Czy wiedziałeś o tym:

      Umiejętności wymagane, aby zostać naukowcem danych


      1. kroki
      2. Powinna być wcześniejsza wiedza na temat programowania SAS i R.
      3. Powinny mieć duży kaliber kreatywności i analizy

      Wynik:

      2. Typ atrybutu = „A”

      Uporządkowana lista może mieć typ atrybutu małej litery alfabetu. Poniższy przykład pokazuje, jak używać tego atrybutu w strukturze listy, a także jak pogrubić litery. Aby pogrubiona lista była pogrubiona, należy ją zadeklarować za pomocą znacznika.

      Przykład:



      Example for Nested list

      Stolice Stanów Zjednoczonych

      ol (
      font-weight: pogrubiony;
      )
      ol li span (
      grubość czcionki: normalna;
      )

      1. Alabama
        • Montgomery
      2. Arizona
        • Feniks
      3. Kalifornia
        • Sacramento
      4. Nowa koszulka
        • Trenton
      5. Waszyngton
        • Olympia
      6. Pennsylvannia
        • Harisburg

      Wynik:

      3. Typ atrybutu = „i”

      Ta funkcja wskazuje małe litery rzymskie.

      Przykład:



      HTML Ordered List types

      Samouczek listy HTML EDUCBA:


      1. Uporządkowana lista
      2. lista nieuporządkowana
      3. Lista definicji

        1. Wprowadzenie do listy
        2. Składnia listy
        3. Typy z przykładem
      4. Migawki

      wynik:

      4. Typ atrybutu = „I”

      Ta funkcja podaje dane wyjściowe w górnych cyfrach rzymskich.

      Przykład:



      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

        Wynik:

        2. Atrybut początkowy

        Atrybut początkowy określa wartość początkową dla uporządkowanych numerów list. Możesz zacząć od dowolnej liczby od początku, a nie tylko od domyślnej liczby „1”. Przykład: start = 6. Jest teraz używany w HTML5.

        Przykład:

        W poniższym przykładzie użyłem typu stylu do upper_alpha wraz z początkiem od = 3, dlatego wynik jest pokazany z 'C'.



        Example for Nested list

        NAJBOGATSZE KRAJE NA ŚWIECIE

        ol (list-style-type: upper-alpha;
        font-weight: pogrubiony;
        )
        ol li span (
        font-weight: normal;)

        1. Katar znany ze swoich zasobów ropy naftowej i petrochemicznej
        2. Norwegia znana z piękna przyrody dzięki producentowi ropy naftowej
        3. Singapur z globalnym centrum handlowym

        Wynik:

        3. Odwrotny atrybut

        Jest to nowy atrybut wprowadzony w HTML5, który wskazuje, że elementy są wyświetlane w odwrotnej kolejności w przeglądarkach internetowych. Używać,

          jest to atrybut boolowski przyjmujący dowolną wartość w celu odwrócenia licznika. Zdeklarowany
            w
              etykietka.

              Przykład:



              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

              Wynik:

              Wniosek

              Dlatego do końca podsumowałem, co zrobiła uporządkowana lista i jest ona prawie obsługiwana we wszystkich przeglądarkach. Oczywiście możesz utworzyć dowolną liczbę list w elemencie tagu HTML, w tym artykule skupiliśmy się na wybranych przykładach, aby zrozumieć podstawową implementację. Zatem nauka tego tematu może nie być najtrudniejszą pracą, jak

              1. znacznik użyty tutaj jest bardzo prosty do zapamiętania.

                Polecane artykuły

                To był przewodnik po liście uporządkowanej HTML. Tutaj omawiamy ich typy z różnymi atrybutami HTML wraz z przykładami. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

                1. Ramki HTML
                2. Atrybut stylu HTML
                3. Co to jest HTML5?
                4. Edytory tekstu HTML