Як зробити нумерований список в html. HTML: Нумерований і маркований список. Нумерований список c атрибутом type \u003d "I"

Приклад коду списку визначень:

Списки визначень Термін 1 Визначення терміна 1 Термін 2 Визначення терміна 2

результат:

вкладені списки

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

Приклад коду багаторівневого списку:

вкладені списки

• тварини
  1. кішки
  2. собаки
• рослини
  1. дерева
  2. квіти

HTML підтримує списки трьох різних типів, для каждоrо з яких передбачені свої власні теrі:

• - нумерований (за допомогою цифр або букв) список, кожен елемент якого має порядковий номер (букву);
  1. - маркований (не нумеровані) список, поряд з кожним елементом якого поміщається маркер (а не цифрові або літерні символи, що позначають порядковий номер);

     • - список визначень складається з пар «ім'я / значення», в тому числі термінів і визначень.

     нумеровані списки

     У нумерований список браузер автоматично вставляє номери елементів по порядку, починаючи з деякого значення (зазвичай 1). Це дозволяє вставляти і видаляти пункти списку, не порушуючи нумерації, так як інші номери автоматично будуть перераховані.
     Нумеровані списки створюються за допомогою блочного елемента

     (Від англ. Ordered List - нумерований список). Далі в контейнер
     для кожного пункту списку поміщається елемент
     1. (Від англ. List Item - пункт списку). За замовчуванням застосовується нумерований список з арабськими числами.
        тег
        має наступний синтаксис:
        1. елемент 1
        2. елемент 2
        3. елемент 3

        Елементи нумерованого списку повинні містити кілька елементів списку, як показано в наступному прикладі:

        Приклад: Нумерований список

        • Спробуй сам »

        Покрокова інструкція

        1. дістати ключ
        2. Вставити ключ в замок
        3. Повернути ключ на два оберти
        4. Дістати ключ із замка
        5. Відкрити двері

        Покрокова інструкція

        1. дістати ключ
        2. Вставити ключ в замок
        3. Повернути ключ на два оберти
        4. Дістати ключ із замка
        5. Відкрити двері

        Іноді при перегляді існуючих кодів HTML ви будете зустрічати аргумент type в елементі

        , Який використовується для вказівки типу нумерації (літери, римські і арабські цифри і т.п.). синтаксис:

        Тут: type - символи списку:

        • A - великі латинські літери (A, B, C...);
        • a - малі латинські літери (a, b, c...);
        • I - великі римські цифри (I, II, III...);
        • i - маленькі римські цифри (i, ii, iii...);
        • 1 - арабські цифри (1, 2, 3...) (Застосовується за умовчанням).

        Якщо ви хочете, щоб список починався з номера, відмінного від 1, слід вказати це за допомогою атрибута start тега

        .
        У наступному прикладі показаний нумерований список з великими римськими цифрами і початковим значенням XLIX:

        Нумерацію можна починати і з допомогою атрибута value, Який додається до елементу

        1. наступним чином:

        7. В цьому випадку послідовна нумерація списку перерветься і з цього пункту нумерація почнеться заново, в даному випадку з семи.

           Приклад використання атрибута value тега

        8. , Який дозволяє змінити номер даного елемента списку:

           У цьому прикладі "Перший пункт списку" матиме номер 1, "Другий пункт списку" - номер 7, а "Третій пункт списку" - номер 8.

           Форматування нумерованих списків за допомогою CSS

           Для зміни номерів списків варто використовувати властивість list-style-type таблиці стилів CSS:

           Стилі оформлення нумерованих списків

           приклад	значення	опис
           а, b, с	lower-alpha	малі літери
           А, В, С	upper-alpha	Прописні літери
           i, ii, iii	lower-roman	Римські цифри, набрані малими літерами
           I, II, III	upper-roman	Римські цифри, набрані прописними буквами

           Приклад: Застосування властивості CSS list-style-type

           Маркери

           Маркери по суті схожі на нумеровані тільки вони не містять послідовної нумерації пунктів. Маркери створюються за допомогою блочного елемента

           (Від англ. Unordered List - ненумерований список). Кожен елемент списку, як і в нумерованих списках, починається з тега
           • . Браузер формує відступ для кожного пункту списку і автоматично відображає маркери.
             тег
             має наступний синтаксис:
             • Перший пункт
             • другий пункт
             • третій пункт

             У наступному прикладі видно, що, за замовчуванням, перед кожним елементом списку додається невеликий маркер у вигляді закрашеного гуртка:

             усередині тега

             • не обов'язково розміщувати тільки текст, допустимо помістити будь-який елемент потокового контенту (посилання, абзаци, зображення та ін.)

               вкладені списки

               Будь-який список може бути вкладений в інший. усередині елемента
             • допустимо створення вкладеного списку, або списку другого рівня. Для вкладення списку опишіть новий список всередині елемента
             • вже наявного списку. При вкладенні одного маркованого списку в інший браузер автоматично змінює стиль маркера для списку другого рівня. Будь-який список може бути вкладений в інший. Наступний приклад демонструє структуру маркованого списку, вкладеного в другій пункт нумерованного.

               Приклад: Вкладені списки

               • Спробуй сам »
               • понеділок
                 1. Відправити пошту
                 2. Візит до редактора
                    • вибір теми
                    • Дкаратівное оформлення
                    • заключний звіт
                 3. Вечірній перегляд повідомлень
               • вівторок
                 1. переглянути графік
                 2. Надіслати зображення
               • Середа ...
               • понеділок
                 1. Відправити пошту
                 2. Візит до редактора
                    • вибір теми
                    • Дкаратівное оформлення
                    • заключний звіт
                 3. Вечірній перегляд повідомлень
               • вівторок
                 1. переглянути графік
                 2. Надіслати зображення
               • Середа ...

               Змінюють формат маркірованих списків

               Для зміни зовнішнього вигляду маркера списків варто використовувати властивість list-style-type таблиці стилів CSS:

               У наступному прикладі розглянуті різні стилі оформлення маркованих списків:

               Приклад: Стилі оформлення маркованих списків

               • Спробуй сам »
               • Coffee
               • Coffee
               • Coffee
               • Coffee

               Disc:

               • Coffee
               • Milk

               Circle:

               • Coffee
               • Milk

               Square:

               • Coffee
               • Milk

               None:

               • Coffee
               • Milk

               Графічні маркери.

               У HTML є можливість створити список з графічними маркерами. Одна справа, коли маркерами списку є стандартні кружечки або квадратики, і зовсім інша - коли розробник сам підбирає маркер відповідно до дизайну сторінки. Для того, щоб зробити елементи списку красивими, часто використовують маленькі картинки.
               Щоб замінити звичайний маркер на графічний, замінимо властивість list-style-type на властивість list-style-image і вкажемо URL-адресу картинки:

               Приклад: Графічні маркери

               • Спробуй сам »

               Знаки зодіаку

               • Телець
               • Блізнeци

               Знаки зодіаку

               • Овен
               • Телець
               • Блізнeци

               Списки визначень (описів)

               Списки визначень дуже зручні для створення, наприклад, вашого особистого словника термінів. У кожного пункту списку визначень є дві частини: термін і його визначення.
               Ви ставите весь список в елемент

               (Від англ. Definition List - список визначень). Він включає в себе теги

               (Від англ. Definition Term - визначається слово, термін) і

               (Від англ. Definition Description - опис визначається терміна).
               Списки визначень часто використовують в науково-технічних і навчальних виданнях, оформляючи з їх допомогою глосарії, словники, довідники і т.д.

               Загальна структура списку описів має наступний вигляд:

               перший термін

               Опис першого терміну

               другий термін

               Опис другого терміну

               У наступному прикладі показано одне з можливих використань списку визначень:

               Приклад: Список визначень

               • Спробуй сам »

               Всесвітня павутина - від англ. World Wide Web (WWW) - розподілена система, що надає доступ до пов'язаних між собою документів, розташованим на різних комп'ютерах, підключених до Інтернету. Інтернет - сукупність мереж, які застосовують єдиний протокол обміну для передачі інформації. Сайт - набір окремих веб-сторінок, які пов'язані між собою посиланнями і єдиним оформленням.

               Всесвітня павутина

               - від англ. World Wide Web (WWW) - розподілена система, що надає доступ до пов'язаних між собою документів, розташованим на різних комп'ютерах, підключених до Інтернету.

               Інтернет

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

               сайт

               - набір окремих веб-сторінок, які пов'язані між собою посиланнями і єдиним оформленням.

               За замовчуванням, текст терміна притискається до лівого краю вікна браузера, а опис терміна розташовується нижче і зсувається вправо.

               - 4.5 out of 5 based on 2 votes

               Дуже часто певну інформацію на сайті необхідно представити у вигляді списків.

               Списки дозволяють упорядкувати і систематизувати різну інформацію і представити її для відвідувача в зручному вигляді.

               Списки в HTML можуть бути трьох різновидів: марковані списки, нумеровані списки і списки визначень. Розглянемо, як їх створювати по порядку.

               Маркований список.

               Даний вид списку використовується найбільш часто. Маркований список в HTML створюється за допомогою тегів

               • . При цьому навпроти кожного елемента списку додається маркер, за замовчуванням це маркер у вигляді гуртка. За допомогою тегів створюється контейнер, всередині якого розташовуються елементи до Вашого профілю.

                 Код маркованого списку буде виглядати так:

                 • варіант такої
                 • варіант сякий
                 • варіант такий собі

                 Можете спробувати створити HTML сторінку, використовуючи даний код і у вас, в результаті вийде наступний список:

                 

                 Як ви можете помітити, кожен елемент списку розташовується з нового рядка, при цьому зліва, зверху і знизу створюються певні відступи. Кожен пункт списку починається з маркера, в якості маркера може використовуватися зафарбований кружок (використовується за умовчанням), окружність або квадратик. У тега

                 є атрибут type, за допомогою якого, і задається стиль маркера. Даний атрибут має наступні значення:
                 • disc - коло;
                 • circle - окружність;
                 • square - квадрат.

                 Значення disc використовується за умовчанням.

                 Приклад створення маркованого списку з маркерами у вигляді кола:

                 • варіант такої
                 • варіант сякий
                 • варіант такий собі

                 В результаті список прийме, такий вигляд:

                 

                 Створення маркованого списку з маркерами у вигляді квадратиків:

                 • варіант такої
                 • варіант сякий
                 • варіант такий собі

                 Список буде мати вигляд:

                 

                 Атрибут type можна застосовувати не тільки до тегу

                 , Але і до тегу
                 • . Таким чином можна створити список з різноманітними маркерами.
                   • варіант такої
                   • варіант сякий
                   • варіант такий собі

                   В результаті вийде наступне:

                   

                   Нумеровані списки.

                   Нумеровані списки в HTML є списки, в яких кожен пункт має порядковий номер, створюються нумеровані списки за допомогою тега

                   і вкладених в його тегів

                   1. 1. перший рядок
                      2. Другий рядок
                      3. третій рядок

                      Виглядає такий список наступним чином:

                      

                      За замовчуванням нумерація проводиться арабськими цифрами. Але у тега

                      є атрибут type, за допомогою значень якого нумерацію можна робити великими (type \u003d "A") або малими (type \u003d "a") латинськими літерами, римськими цифрами у верхньому (type \u003d "I") і нижньому (type \u003d "i" ) регістрі.

                      Нижче наведені скорочені варіанти коду, і вид нумерації який може бути в тому чи іншому випадку.

                      Вид списку:

                      Вид списку:

                      

                      Нумерація малими літерами латинського алфавіту:

                      Вид списку:

                      

                      Вид списку:

                      

                      Вид списку:

                      

                      Список визначень в HTML.

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

                      . тег

                      створює контейнер для списку, тег

                      встановлює термін, а тег

                      опис або визначення терміна.

                      Записується даний список наступним чином:

                      термін 1

                      Визначення терміна 1

                      термін 2

                      Визначення терміна 2

                      термін 3

                      Визначення терміна 3

                      В результаті вийде наступний список:

                      

                      Як ви можете бачити, при цьому створюються відповідні відступи для терміна і тексту ухвали.

                      Вкладені або багаторівневі списки в HTML.

                      Іноді необхідно в один елемент певного виду списку вкласти інший список. У HTML є можливість необмежено влажівать одні списки в елементи інших списків.

                      Наприклад, ось код, за допомогою якого в елементи маркованого списку вкладені нумеровані списки.

                      • варіант такої
                        1. перший рядок
                        2. Другий рядок
                        3. третій рядок
                      • варіант сякий
                        1. перший рядок
                        2. Другий рядок
                        3. третій рядок
                      • варіант такий собі
                        1. перший рядок
                        2. Другий рядок
                        3. третій рядок

                      Різниця лише в тому, що цей тег строго зроблений для нумерації списків. Назва тега прийшло від англійського скорочення "Ordered List" - нумерований список.

                      синтаксис тега

                      1. Елемент # 1
                      2. Елемент # 2
                      3. Елемент # 3
                      4. ...

                 Де атрибут type \u003d "value" може набувати таких значень

                 • A - задає маркери у вигляді прописних латинських букв (A, B, C ..);
                 • a - задає маркери у вигляді малих латинських букв (a, b, c ..);
                 • I - задає маркери у вигляді великих римських цифр (I, II, III, IV ..);
                 • i - задає маркери у вигляді маленьких римських цифр (i, ii, iii, iv ..);
                 • 1 (за замовчуванням) - задає маркери у вигляді арабських цифр (1, 2, 3 ..);

                 Атрибут start \u003d "value" задає початкове значення (стартове значення) звіту.

                 Атрибут reversed задає зворотний рахунок (у разі потреби).

                 тег

                 вимагає обов'язкового використання закриває тега

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

                 • . Між відкриває і закриває тегами розташовуються окремі слова, фрази, абзаци, зображення, шматки коду і багато іншого, що є вмістом маркованого списку.

                   Примітка

                   Всередині списку є можливість змінювати рахунок на свій. Для цього є спеціальний атрибут value \u003d "" у тега

                 • , Якому присвоюється якесь числове значення. наприклад

                   1. Елемент # 1
                   10. Елемент # 2
                   11. Елемент # 3

                 Приклади з нумерований списками в html (

                 )

                 Приклад 1. Нумерований список html у вигляді латинських букв

                 Приклад з великими літерами

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Приклад з малими буквами

                 1. Елемент # 10
                 2. Елемент # 11
                 3. Елемент # 12

                 Ось як це виглядає на сторінці:

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Приклад 2. Нумерований список html у вигляді римських букв

                 Приклад з великими літерами

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Ось як це виглядає на сторінці:

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Приклад з малими буквами

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Ось як це виглядає на сторінці:

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Приклад 3. Нумерований список html різна позиція старту

                 Приклад, який показує можливості атрибута start, який дозволяє задавати стартове значення лічильника.

                 50. Елемент # 1
                 51. Елемент # 2
                 52. Елемент # 3

                 Ось як це виглядає на сторінці:

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3

                 Приклад 4. Зміна рахунку в нумерованих списках html

                 Нижче представлений приклад з можливістю змінювати значення лічильника за допомогою атрибута value при виведенні нових елементів в тегах

               • .

                 10. Елемент # 1
                 11. Елемент # 2
                 100. Елемент # 3
                 101. Елемент # 4

                 Ось як це виглядає на сторінці:

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3
                 4. Елемент # 4

                 Приклад 5. Реверсивний нумерований список в html

                 Нижче наведено приклад реверсивного нумерованого списку (рахунок в зворотному порядку).

                 10. Елемент # 1
                 11. Елемент # 2
                 12. Елемент # 3
                 13. Елемент # 4

                 Ось як це виглядає на сторінці:

                 1. Елемент # 1
                 2. Елемент # 2
                 3. Елемент # 3
                 4. Елемент # 4

                 Списки часто використовуються на веб-сторінках, тому дане питання досить актуальне. В HTML передбачено два типи списків: нумерований і ненумерований (маркований). Для побудови списків використовуються спеціальні теги. З основними тегами ми познайомимося в даному уроці. Давайте розглянемо типи списків в HTML по порядку і на реальних прикладах розберемося чим вони відрізняються, і як виводяться.

                 Нумеровані списки в HTML

                 Нумеровані списки в HTML - упорядкована послідовність елементів. У нумерованому списку перед кожним його елементом автоматично проставляється порядковий номер. Нумерований список має такий вигляд:

                 1. Перший елемент списку
                 2. Другий елемент списку
                 3. Третій елемент списку
                 4. Четвертий елемент списку
                 5. П'ятий елемент списку

                 В даному прикладі список буде виводитися арабськими цифрами. У нумерованих списків існують атрибути, за допомогою яких можна задати формат відображення нумерації списку:

                 1. Атрибути «I» або «i» - для нумерації римськими літерами (великими чи прописними);
                 2. Атрибути «A» або «a» - нумерація латинськими літерами (великими чи прописними);
                 3. Атрибут «start» - використовується для того, щоб нумерація починалася не з першого пункту, в якості параметра вказується порядковий номер, з якого потрібно формувати список.

                 Приклад. Нумерований список, який формується з римських букв і починається з другого елементу:

                 2. Перший елемент списку
                 3. Другий елемент списку
                 4. Третій елемент списку
                 5. Четвертий елемент списку
                 6. П'ятий елемент списку

                 Маркери в HTML

                 Ненумеровані списки також називають неупорядкованими або маркованими. Для виділення елементів такого списку використовуються спеціальні символи (маркери). Вид маркерів списку задається в HTML коді за допомогою спеціальних атрибутів. Приклад маркованого списку в HTML:

                 • Перший елемент списку
                 • Другий елемент списку
                 • Третій елемент списку
                 • Четвертий елемент списку
                 • П'ятий елемент списку

                 В даному випадку список буде формуватися з маркерів у вигляді жирної крапки. Атрибутами ненумерованого списку є:

                 1. «disc» - маркери у вигляді закрашеного гуртка
                 2. «circle» - маркери у вигляді порожнього гуртка
                 3. «square» - маркери у вигляді закрашеного квадрата

                 Приклад завдання певного маркера в списку:

                 • Перший елемент списку
                 • Другий елемент списку
                 • Третій елемент списку
                 • Четвертий елемент списку
                 • П'ятий елемент списку

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

                 Перший елемент списку
                 Другий елемент списку
                 Третій елемент списку
                 Четвертий елемент списку
                 П'ятий елемент списку

                 Також списки бувають вкладеними, вони складаються з декількох списків:

                 1. Перший елемент списку
                 2. Другий елемент списку
                 • Перший підпункт списку
                 • Другий підпункт списку
                 3. Третій елемент списку
                 4. Четвертий елемент списку
                 5. П'ятий елемент списку

                 Ось, мабуть і все, що хотілося розповісти про списках в HTML. Списки дуже часто зустрічаються на веб-сторінках. Для їх формування потрібно знати певні правила виведення.