Список упорядкованих HTML - Типи атрибутів із синтаксисом та прикладами

Зміст:

Anonim

Вступ до списку упорядкованих HTML

У цьому розділі ми дізнаємось, як реалізувати упорядковані списки в HTML. Як описати або відобразити упорядкований список? Це дуже просто і легко, вони використовуються для опису списку інформації у змісті. І інша техніка - це єдиний список, може мати на них кілька списків елементів. Списки в HTML можна класифікувати на три типи, це:

  1. Замовлений список
  2. Не упорядкований список
  3. Список визначень

У цій статті ми переглянемо упорядковану специфікацію списку з прикладом. Упорядкований список визначає конкретну упорядковану інформацію, коли список створений, наприклад, він показує інформацію про ординати або нумерування інформації.

Синтаксис упорядкованого списку

Упорядкований список створюється за допомогою тегу з назвою

    елемент і закінчується с
тег.

Приклади упорядкованого списку

Давайте подивимось приклад, згаданий нижче:

Приклад №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

Вихід:

Це дасть вам подібний результат

Приклад №2

Замовлений список з кольорами. У наступному прикладі ми використали певну властивість лічильника, визначає автоматичний підрахунок елементів списку в

  • . Це лише внутрішня змінна CSS для включення функцій підрахунку.



    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

    Вихід:

    Типи атрибутів для списку упорядкованих HTML

    Для подання упорядкованого списку існує п'ять важливих типів атрибутів для цього тегу. Як HTML

      Тег являє собою список елементів у упорядкованому списку, вони можуть бути або алфавітно-числовим, або просто алфавітним порядком за умови, що порядок є основною справою. Ось можливі атрибути списку упорядкованих:

      1. Атрибут Type

      Цей атрибут дає тип нумерації, який буде використаний у списку.

      • type = 'a' - Надає алфавітний порядок
      • type = 'A'- Надає верхній регістр в алфавітному порядку
      • type = 'i' - надає римський номер нижнього регістру
      • type = 'Я- Надає римські номери верхнього регістру

      Даний тип нумерації згаданий нижче:

      1. Тип атрибута = 'a'

      Для складання списку в алфавітному регістрі використовується цей тип. Наступний приклад показує впорядкований список у малому регістрі та складається його курсивом.

      Приклад:



      HTML Ordered List types

      ol li span (
      font-weight: normal;
      )

      Ви знали, що:

      Навички, необхідні, щоб стати науковцем даних


      1. кроки
      2. Повинні бути попередні знання в програмуванні SAS та R.
      3. Вони повинні мати сильний калібр у творчості та аналізі

      Вихід:

      2. Тип атрибута = 'A'

      Впорядкований список може мати тип атрибуту з малої літери алфавіту. Наведений нижче приклад демонструє, як використовувати цей атрибут у структурі списку, а також як робити букви жирним шрифтом. Щоб мати упорядкований список жирним шрифтом, його потрібно оголосити за допомогою тегу.

      Приклад:



      Example for Nested list

      Столиці штатів Сполучених Штатів

      ol (
      шрифт: жирніше;
      )
      ol li span (
      шрифт: нормальний;
      )

      1. Алабама
        • Монтгомері
      2. Арізона
        • Фенікс
      3. Каліфорнія
        • Сакраменто
      4. Нью Джерсі
        • Трентон
      5. Вашингтон
        • Олімпія
      6. Пенсильванія
        • Харисбург

      Вихід:

      3. Тип атрибута = 'i'

      Ця функціональність вказує на малі римські букви.

      Приклад:



      HTML Ordered List types

      Підручник із списку HTML EDUCBA:


      1. Замовлений список
      2. не упорядкований список
      3. Список визначень

        1. Вступ до списку
        2. Синтаксис списку
        3. Типи з прикладом
      4. Знімки

      вихід:

      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


        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

        Вихід:

        2. Початковий атрибут

        Атрибут start визначає початкове значення для упорядкованих номерів списку. Ви можете почати з будь-якого числа з самого початку, а не лише з номера за замовчуванням '1'. Приклад: старт = 6. Зараз він використовується в HTML5.

        Приклад:

        У наступному прикладі я використовував тип стилю для верхнього_алфа разом із початком від = 3, тому вихідний показник відображається з 'C'.



        Example for Nested list

        НАЙБІЛЬШІ КРАЇНИ СВІТУ

        ol (список-стиль-тип: верхній-альфа;
        шрифт: жирніше;
        )
        ol li span (
        шрифт: нормальний;)

        1. Катар відомий своїми запасами нафти та нафтохімії
        2. Норвегія відома красою природи з виробником нафти
        3. Сінгапур з глобальним торговим центром

        Вихід:

        3. Зворотний атрибут

        Це новий атрибут, введений у HTML5, який вказує, що елементи відображаються у зворотному порядку у веб-браузерах. Використовувати,

          це булевий атрибут, який приймає до нього будь-яке значення, щоб повернути лічильник. Задекларовано
            в
              тег.

              Приклад:



              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

              Вихід:

              Висновок

              Тому до кінця я підсумував те, що зробив упорядкований список, і він майже підтримується у всіх браузерах. Звичайно, ви можете створити будь-яку кількість списків в елементі HTML-тегу, в цій статті ми просто зосередилися на вибраних прикладах, щоб зрозуміти основні варіанти реалізації. Таким чином, вивчення цієї теми може бути не найскладнішою роботою, як

              1. Тег, що використовується тут, запам'ятовується дуже просто.

                Рекомендовані статті

                Це керівництво до списку упорядкованих HTML. Тут ми обговорюємо їх типи з різними атрибутами HTML разом із прикладами. Ви також можете переглянути наступні статті, щоб дізнатися більше -

                1. HTML Frames
                2. Атрибут стилю HTML
                3. Що таке HTML5?
                4. Текстові редактори HTML