Что такое ul в html
-
позначає невпорядкований перелік елементів, який зазвичай зображується як список з маркерами.
Спробуйте його в дії
Атрибути
Цей булів атрибут вказує на те, що перелік повинний бути виведений у компактному стилі. Інтерпретація цього атрибута залежить від користувацького агента, і працює не у всіх браузерах.
Застереження: Не слід вживати цей атрибут, бо він є нерекомендованим – замість нього слід використовувати засоби CSS. Для досягнення ефекту, подібного до атрибута compact , можна використати властивість CSS line-height зі значенням 80% .
Цей атрибут задає маркери, які будуть використані у переліку. Значення, визначені в HTML3.2, і перехідній версії HTML 4.0/4.01:
Четверте значення було визначено інтерфейсом WebTV, але не всі браузери його підтримують: triangle .
Якщо атрибут type не вказано, і до елемента не застосована властивість CSS list-style-type , то браузер обере тип маркера залежно від глибини вкладеності переліку.
Застереження: Не слід використовувати цей атрибут, бо він є нерекомендованим, – замість нього застосовуйте властивість CSS list-style-type .
Примітки щодо застосування
-
Елемент
-
призначений для групування колекції елементів без числового впорядкування, тобто коли їхній порядок в переліку не має ніякого значення. Зазвичай невпорядковані переліки виводяться з маркерами, котрі можуть приймати декілька форм, як то крапки, кола чи квадрата. Стиль маркерів не описується в HTML сторінки, але може бути заданий у CSS, за допомогою властивості list-style-type .
Елементи
-
і можна вкладати одне в одного як завгодно глибоко. На кожному рівні можна використати як впорядкований, так і невпорядкований перелік.
І елементи
-
, і елементи позначають перелік з елементів. Різниця полягає в тому, що в порядок елементів має значення. Щоб визначити, який елемент вжити, спробуйте змінити порядок елементів: якщо зміст змінився — слід використати , а інакше – можна обмежитись
-
.
Приклади
Простий приклад
ul> li>перший елементli> li>другий елементli> li>третій елементli> ul> HTML тег
-
используется для создания маркированного (неупорядоченного) списка, где изменение порядка следования пунктов существенно не меняет его смысл.
-
является блочным элементом и занимает всю доступную ему ширину, а его высота зависит от количества содержимого.
По умолчанию, маркированные списки отображаются на веб-странице в виде списка и начинаются с маленького чёрного круга и небольшим отступом от левого края.
Для создания нумерованных списков используется тег .
Синтаксис
-
) и закрывающим (
Пример
html> html> head> title>Заголовок документа title> head> body> ul> li>Элемент списка li> li>Элемент списка li> li>Элемент списка li> ul> body> html>Результат
Установленный по умолчанию маркер элементов (черный кружок) можно изменить при помощи атрибута type .
Пример
html> html> head> title>Заголовок документа title> head> body> ul type="circle"> li>Элемент списка li> li>Элемент списка li> li>Элемент списка li> ul> ul type="square"> li>Элемент списка li> li>Элемент списка li> li>Элемент списка li> ul> body> html>Результат
Для изменения типа маркера можно использовать CSS свойства list-style-type или list-style-image .
Пример
html> html> head> title>Заголовок документа. title> head> body> h2>Примеры маркированных списков. h2> ul style="list-style-type: square"> li>Прохладительные напитки li> li>Горячие напитки li> li>Мороженое li> ul> ul style="list-style-type: disc"> li>Кока-кола li> li>Фанта li> li>Чай со льдом li> ul> ul style="list-style-type: circle"> li>Кока-кола li> li>Фанта li> li>Чай со льдом li> ul> body> html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| compact | compact | Сокращает отступы и расстояния между строками. Не поддерживается в HTML5. |
| type | disc square circle |
Устанавливает вид маркера списка. Не поддерживается в HTML5. |
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
html теґ
-
(Unordered List Element). Кожен елемент списку повинен починатися з тега
(скорочене від англійського list item — елемент списку).
Між відкритим і закритим тегами ul повинен бути один або кілька елементів li
За замовчуванням, марковані списки відображаються на веб-сторінці у вигляді списку, який починається з маленького чорного кола.
Використовуйте CSS для стилізації списків.
Синтаксис
| Атрибут | Опис атрибута |
|---|---|
| compact | Вказує, що список має бути меншим ніж зазвичай |
| type | Визначає як буде позначено кожен елемент списку |
Вказує додаткову текстову підказку
Повідомляє браузеру переводити вказаний текст в елементі чи ні.
Контекстне меню для елемента
Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш.
Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS).
Визначає чи можна перетягувати елемент.
Дозволяє редагувати текст в середні тегу.
Вказує напрямок тексту.
Приховує вміст елемента від перегляду.
Задає унікальний ідентифікатор для елемента.
Визначає основну мову вмісту елемента
Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента.
Задає вбудований (inline) CSS стиль для елемента.
Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші `Tab`.
Вказує, що робити з перетягувати елементи.
Більше інформації про загальні атрибути за посиланням Загальні атрибути в html.
| Подія | Опис події |
|---|---|
| onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
| onafterprint | Скрипт виконується тільки після як документ надрукований. |
| onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
| onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
| onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
| onload | Викликається після того як завантаження елемента завершене. |
| onmessage | Скрипт виконується коли викликане повідомлення. |
| onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
| ononline | Спрацьовує коли браузер починає працювати в режимі онлай. |
| onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
| onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
| onpopstate | Скрипт виконується коли змінено історію одного вікна. |
| onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
| onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
| onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
| onblur | Скрипт виконується, коли елемент втрачає фокус. |
| onchange | Викликається в той момент, коли значення елемента змінюється. |
| oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
| onfocus | Викликається в той момент, коли елемент отримує фокус. |
| oninput | Скрипт викликається коли користувач вводить дані поле. |
| oninvalid | Скрипт виконується, коли елемент недійсний. |
| onreset | Викликається, коли натискається у формі кнопка типу Reset. |
| onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
| onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
| onsubmit | Викликається при відправленні форми. |
| onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
| onkeypress | Викликається коли корисрувач натиснув на клавішу. |
| onkeyup | Викликається коли користувач відпускає клавішу. |
| ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
| ondrag | Періодично викликається при операції перетягування. |
| ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
| ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
| ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення. |
| ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
| ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
| ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
| onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
| onmousemove | Викликається, коли курсор миші переміщається над елементом. |
| onmouseout | Викликається, коли курсор виходить за межі елемента. |
| onmouseover | Виконується, коли курсор наводиться на елемент. |
| onmouseup | Викликається, коли користувач відпускає кнопку миші. |
| onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
| onwheel | Викликається, коли користувач прокручує коліщатко миші. |
| oncopy | Викликається, коли користувач копіює вміст елемента. |
| oncut | Викликається, коли користувач вирізає вміст елемента. |
| onpaste | Викликається, коли користувач вставляє вміст в елемент. |
| onabort | Виконується при перериванні якоїсь події. |
| oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
| oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію. |
| oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
| ondurationchange | Викликається коли змінюється довжина медіа файлу. |
| onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
| onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
| onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
| onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
| onloadeddata | Викликається коли медіа данні завантажено. |
| onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера. |
| onpause | Викликається коли відтворення медіа даних призупинено. |
| onplaying | Викликається коли розпочато відтворення медіа даних. |
| onprogress | Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. |
| onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
| onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
| onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
| onstalled | Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані. |
| onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження. |
| ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
| onvolumechange | Викликається коли змінюється гучність звуку. |
| onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
| ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
| onerror | Викликається якщо при завантаженні елемента сталася помилка. |
| onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
Більше інформації про html події за посиланням Атрибути подій в html.
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
HTML тег
Маркированный (неупорядоченный) список представляет собой множество элементов, между которыми нет порядка следования. Самые распространенные неупорядоченные списки в интернете — списки гиперссылок на другие документы (например: меню, представляющее собой ненумерованный список HTML).
-
(unordered list), который сообщает браузеру, что всё, следующее за ним, вплоть до закрывающего тега
-
является блочным элементом, при отображении он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого. По умолчанию браузер предваряет каждый элемент списка специальным маркером и располагает каждый элемент с новой строки, применяя к нему небольшой отступ от левого края.
Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.
Для создания нумерованных (упорядоченных) списков используйте тег .
Атрибуты
Стиль по умолчанию
Пример
Результат данного примера в окне браузера:
