Нумерація списку в html. Маркери нумеровані списки html - Уроки HTML

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

, Який і застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом
1. , Як показано нижче.
   1. Перший пункт
   2. другий пункт
   3. третій пункт

   Якщо не вказувати жодних додаткових атрибутів і просто написати тег

   , То за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...), як показано в прикладі 11.3.

   Приклад 11.3. Створення нумерованого списку

   Робота з часом

   1. створення пунктуальності (ніколи не будете нікуди спізнюватися);
   2. вилікування від пунктуальності (ніколи нікуди не будете поспішати);
   3. зміна сприйняття часу і годин.
   
   
   

   результат даного прикладу показаний на рис. 11.3.

   Мал. 11.3. Вид нумерованого списку

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

   Як нумерують елементів можуть виступати наступні значення:

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

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

   . Його можливі значення наведені в табл. 11.2.
   Табл. 11.2. Типи нумерованого списку

   Тип списку	код HTML	приклад
   Арабські числа		1. Чебурашка 2. Крокодил Гена 3. Шапокляк
   Прописні букви латинського алфавіту		A. Чебурашка B. Крокодил Гена C. Шапокляк
   Малі літери латинського алфавіту		a. Чебурашка b. Крокодил Гена c. Шапокляк
   Римські числа в верхньому регістрі		I. Чебурашка II. Крокодил Гена III. Шапокляк
   Римські числа в нижньому регістрі		i. Чебурашка ii. Крокодил Гена iii. Шапокляк

   Щоб почати список з певного значення, використовується атрибут start тега

   . При цьому не має значення, який тип списку встановлений за допомогою type, атрибут start однаково працює і з римськими і з арабськими числами. У прикладі 11.4 показано створення списку з використанням римських цифр в верхньому регістрі, що починаються з восьми.

   Приклад 11.4. нумерація списку

   8. Король Магнум XLIV
   9. Король Зігфрід XVI
   10. Король Сигізмунд XXI
   11. Король Хусбрандт I
   
   
   

   Результат даного прикладу показаний на рис. 11.4.

   

   Мал. 11.4. Нумерований список з римськими числами

   В мові HTML існує два види списків: нумеровані і ненумеровані. Їх створення практично однакове. Навіть теги відрізняються на один символ. Також можна створювати які можуть включати в себе як нумеровані, так і маркерні.

   Ці списки можна перетворювати як завгодно. Все залежить від вашої фантазії. Спочатку ми розглянемо стандартні списки, такі ж як в редакторі Word, А потім будемо їх покращувати і оформляти до невпізнання.

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

   Звичайний нумерований можна створити за допомогою ключових слів:

   1. Перший пункт списку
   2. Другий пункт списку
   3. Третій пункт списку

   Прості списки виглядають ось так

   Згідно зі стандартами, кожен пункт списку повинен бути всередині відкриває і закриває тега li. Але якщо ви не поставите закриває тег, то результат буде точно таким же. Оброблювач вельми розумний. Під час перетворення списку він аналізує відкривають теги. Якщо він бачить новий

   4. , То автоматично перед ним ставить
   .

   Таким чином, списки можна робити так, як показано нижче.

   

   Але з точки зору професіоналів це некоректно.

   

   Ненумеровані (або ж маркерні) списки створюються точно так же, тільки замість тега ol, пишеться ul.

   У немає цифр або букв - тільки різні символи, Які називаються маркерами.

   

   Багаторівневий нумерований список HTML

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

   

   Для того щоб створити список, зазначений в прикладі вище, потрібно написати наступне.

   

   Зверніть увагу, що в цьому коді, на відміну від перших прикладів, доданий атрибут type. Завдяки йому можна вказати вид сортування як для нумерованих, так і для маркерних списків.

   Для нумерованих вказуємо алфавіт або тип цифр, а для інших випадків - тип маркера.

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

   Можна вказати атрибут type з будь-яким значенням з таблиці. Або в класі стилю css вказати list-style-type з бажаним типом сортування.

   

   Переклад значень досить простий. Досить базових знань англійської мови. Але навіть якщо ви не можете перевести слова "коло", "квадрат" і т. П., То можна візуально зрозуміти, яким буде результат при вказівці цих значень в атрибуті type.

   Для нумерованих списків потрібно використовувати такі варіанти:

   • 1 - арабські цифри;
   • A - заголовні;
   • a - малі латинські літери;
   • I - заголовні римські цифри;
   • i - рядкові римські цифри.

   За замовчуванням завжди використовується список з Тобто, якщо ви нічого не вказали, це рівносильно type \u003d "1".

   Крім цього, нумеровані списки можна починати з будь-якої бажаної позиції. За замовчуванням - висновок від 1. Але при бажанні можна почати хоч з ста. Для цього потрібно вказати атрибут start з будь-яким значенням.

   

   Крім цього, можна зробити висновок в зворотному порядку. Для цього потрібно написати reversed.

   

   оформлення списків

   Нумерований список HTML можна оформити настільки красиво, що не відразу можна здогадатися, що це звичайний список, а не картинка, зроблена в Photoshop.

   Ось приклади красивих списків.

   

   Як видно з прикладу, можна змінювати зовнішній вигляд нумерації і самих елементів.

   Створити звичайний список можна ось так.

   

   У стилях css потрібно вказати оформлення для тегів ol. Зверніть увагу, що в цьому випадку настройки будуть застосовані до всіх списками всього сайту, де використовується цей файл стилів.

   

   Розглянемо спочатку варіант з круглим оформленням списку. Поверніться до коду списку. Там вказано клас rounded-list. Ось саме з цим класом потрібно повозитися, щоб зробити таку красу. Назвати клас ви можете як хочете.

   

   

   

   Тепер розглянемо квадратне оформлення.

   

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

   Професійний верстальник повинен передбачити і розуміти, що не всі користувачі використовують сучасні комп'ютери. Не у всіх встановлені Windows 7, 8, 10. Існує відсоток користувачів, хто до сих пір сидить на Windows XP і використовує старі версії браузера Internet Explorer.

   Як правило, майже всі сучасні дизайнерські поліпшення елементів ними не підтримуються. Користувачеві буде здаватися, що над дизайном сайту взагалі не працювали. Що все з'їхало. Елементи наїжджають один на одного. Щоб цього уникнути, потрібно прораховувати всі варіанти.

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

   Робіть щось підходяще для всіх або враховуйте всі варіанти браузерів.

   Різниця лише в тому, що цей тег строго зроблений для нумерації списків. Назва тега прийшло від англійського скорочення "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 задає зворотний рахунок (у разі потреби).

   тег

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

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

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

      Примітка

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

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

      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 при виведенні нових елементів в тегах

   3. .

      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

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

      Найпростіший - перед кожним його елементом стоїть маркер - гурток, квадрат або коло. Послідовність елементів в маркірованих списках не важлива.

      Щоб його створити, потрібно використовувати всього два тега:

      і
      • .
        - це контейнер, який містить список, елементи якого задаються тегом
        • .
          • камінь
          • Ножиці
          • папір
          
          
          

          За замовчуванням в якості маркера списку використовується чорний кружок ( disk). Додавши в тег

          атрибут type і присвоївши йому відповідне значення, маркер можна змінити на окружність ( circle) Або чорний квадрат ( square).

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

          Для створення нумерованих списків використовуються теги

          і
          1. . контейнер
             визначає початок і кінець списку, тег
             1. задає початок і кінець його елемента - все, як у маркірованих списках, тільки
                замінено на
                .
                1. камінь
                2. Ножиці
                3. папір
                
                
                

                

                Так як з нумерований списками не завжди все так просто, для тега

                створили такі атрибути (зверніть увагу: нижче якраз наведено нумерований список):

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

                2. start. Не завжди нумерація повинна починатися з одиниці. Цей атрибут дозволяє задати початкове значення - номер першого елемента списку. У ньому можна вказати, щоб звіт починався, наприклад, з числа 100 або букви K.

                3. reversed. Якщо список повинен йти не з 1 до 10, а з 10 до 1, то необхідно використовувати цей атрибут. Якщо він заданий, нумерація буде вестися в зворотному порядку.

                Для того, щоб задати довільний номер елементу в середині списку, потрібно використовувати в тезі

                1. атрибут :

                2. Сорок п'ятий елемент після тридцять восьмого

                Змінивши номер одного елемента в середині списку, ви зміните і нумерацію всіх наступних за ним елементів - звіт почнеться зі значення в атрибуті value. Наприклад, якщо елементу 18 ви присвоїли номер 35, то такі його елементи будуть мати номери не 19, 20, 21, а 36, 37, 38.

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

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

                - контейнер, що містить список.

                - тег терміна.

                - тег визначення

                Область застосування списків визначень - глосарії, довідники, тести, словники та інші ємні перерахування виду «Термін - пояснення».

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

                дескриптор

                Основна одиниця мови розмітки, відома всім як "Тег".

                Атрибут

                Властивість тега, що дає йому додаткові можливості оформлення тексту.

                мітка

                Одиночний тег, який не потрібно закривати.

                
                
                

                

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

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

                Мови програмування поділяються на:

                • структурні
                1. Pascal
                2. Oberon
                1. Limbo
                • Об'єктно-орієнтовані
                1. Java
                • функціональні
                1. Lisp
                2. Python

                
                
                

                У мові розмітки html розрізняють 3 види списків - впорядковані (нумеровані), невпорядковані (ненумеровані) і списки визначень (definition list).

                Для побудови такого списку потрібні 2 види елементів: 'ul' (скорочення від unordered list, тобто невпорядкований список) і 'li' (елемент списку). Все, що написано всередині 'li', позначається маркером.

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

                типи маркерів

                Є спеціальний атрибут type, який ставиться в обох елементах списку. Це тип вашого маркера. Всього 3 типи: окружність, диск і квадрат:

                - квадрат
                - диск
                - окружність

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

                Нумерований список (ordered list)

                Для побудови списку також потрібно 2 елементи: 'ol' і 'li' (елемент списку). Маркери замінюються на цифри з крапкою. Приклад простого списку:

                1. перший елемент
                2. другий елемент
                3. останній елемент

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

                типи нумерації

                Є спеціальний атрибут type, який ставиться в елементі 'ol' або 'li'. Це тип вашого списку. Всього 5 типів:

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

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

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

                Список визначень був розроблений для словникових статей.

                Є загальний контейнер 'dl'. Усередині нього стоять 'dt' (definition termin - термін) і 'dd' (definition description - опис). Найпростіший приклад:

                Відділ маркетингу

                Даний відділ займається просуванням товарів і послуг

                Фінансовий відділ

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

                Всі елементи всіх списків - блокові. Але всередині елемента 'dt' можна ставити тільки рядкові елементи. В елементи 'dd' і 'li' можна ставити все, що завгодно. Звідси з'являються вкладені списки.

                Вкладені (змішані списки)

                Це багаторівневі списки, всередині яких є ієрархія. Часто такі списки застосовуються при побудові карти сайту. приклад:

                змішаний список

                НОВИНА ДНЯ

                Сьогодні йде дощ

                Дощ буде йти весь день

                НОВИНА НОЧІ

                Вночі йтиме дощ

                Завтра почнеться новий день