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

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

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

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

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

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

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

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

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

Маркери

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

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

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

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

Відео: 7. HTML списки

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

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

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

Варіанти сортування списків

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

підтримка браузерів

Важливо розуміти, що не всі браузери підтримують всі атрибути css.

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

Те ж саме стосується і оформлення нумерації.

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

Відео: HTML меню для сайту. Як в HTML зробити меню? Тег li. Тег ul. Тег ol. # 31

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

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

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

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