Содержание
Тег HTML маркированный список
Тег <ul> в HTML определяет маркированный список (неупорядоченный список).
Маркированный список широко используется к коде HTML страниц. Помимо прямого применения тега <ul> для структурирования данных в виде маркированных списков, связку <ul> — <li> часто используют для верстки меню сайта, как одноуровневого, так и многоуровневого.
Вид маркера, отображаемого возле пунктов списка <ul> можно задать с помощью CSS свойств.
Элемент списка определяется тегом <li> и должен находиться внутри тега <ul>.
Чтобы создать многоуровневый список, необходимо поместить код вложенного списка в элемент <li>, для которого нужно создать подуровень.
Помимо маркированного списка в HTML можно создать нумерованный список. Для этого следует использовать тег <ol>.
Тип маркера, его положение можно изменить при помощи CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.
Синтаксис
<ul>элементы_списка_li</ul>
Отображение в браузере
- Меркурий
- Венера
- Земля
- Марс
- Юпитер
- Сатурн
- Уран
- Нептун
Пример использования <ul> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Маркированный список ul в HTML</title>
</head>
<body>
<ul>
<li>Меркурий</li>
<li>Венера</li>
<li>Земля</li>
<li>Марс</li>
<li>Юпитер</li>
<li>Сатурн</li>
<li>Уран</li>
<li>Нептун</li>
</ul>
</body>
</html>
Поддержка браузерами
Атрибуты тега <ul>
В HTML5 тег <ul> не имеет атрибутов. При необходимости используйте CSS. Тег <ul> также поддерживает глобальные HTML атрибуты.
Устаревшие атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact |
compact
|
Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта. |
type |
disc
|
Определяет тип маркера пунктов списка. |
HTML тег
Тег <ul> используется для создания маркированного (неупорядоченного) списка, где изменение порядка следования пунктов существенно не меняет его смысл.
Каждый элемент в маркированном списке должен быть вложен в тег <li>. В случае, если к списку применены CSS стили, содержимое тега <li> также принимает их.
Тег <ul> является блочным элементом и занимает всю доступную ему ширину, а его высота зависит от количества содержимого.
По умолчанию, маркированные списки отображаются на веб-странице в виде списка и начинаются с маленького чёрного круга и небольшим отступом от левого края.
Для создания нумерованных списков используется тег <ol>.
Синтаксис¶
Содержимое элемента заключается между открывающим (<ul>) и закрывающим (</ul>) тегами.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</body>
</html>
Попробуйте сами!
Результат¶
Установленный по умолчанию маркер элементов (черный кружок) можно изменить при помощи атрибута type.
Пример¶
<!DOCTYPE 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 .
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа.</title>
</head>
<body>
<h3>Примеры маркированных списков.</h3>
<ul>
<li>Прохладительные напитки</li>
<li>Горячие напитки</li>
<li>Мороженое</li>
</ul>
<ul>
<li>Кока-кола</li>
<li>Фанта</li>
<li>Чай со льдом</li>
</ul>
<ul>
<li>Кока-кола</li>
<li>Фанта</li>
<li>Чай со льдом</li>
</ul>
</body>
</html>
Попробуйте сами!
Результат¶
Атрибуты¶
Тег <ul> поддерживает также глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <ul> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <ul>:
Цвет текста внутри тега <ul>:
Стили форматирования текста для тега <ul>:
Другие свойства для тега <ul>:
HTML и CSS с примерами кода
Тег <ul>
(от англ. unordered list — неупорядоченный список) устанавливает маркированный (неупорядоченный) список.
Каждый пункт списка должен начинаться с элемента <li>
.
Текстовые блоки
Синтаксис
<ul>
<li>пункт маркированного списка</li>
</ul>
Закрывающий тег обязателен.
Атрибуты
Для этого элемента доступны универсальные атрибуты.
compact
- Не используйте этот атрибут, так как он устарел: вместо этого используйте CSS. Чтобы получить эффект, аналогичный атрибуту
compact
, можно использовать свойствоline-height
со значением80%
. - Этот логический атрибут означает, что список должен отображаться в компактном стиле. Интерпретация этого атрибута зависит от пользовательского агента, и он работает не во всех браузерах.
type
- Не используйте этот атрибут, так как он устарел; вместо этого используйте свойство CSS
list-style-type
. - Этот атрибут устанавливает стиль маркера для списка. Значения, определенные в HTML 3.2 и HTML 4.0 / 4.01:
-
- Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его:
triangle
.
- Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его:
-
Если этот элемент отсутствует, и если к элементу не применяется свойство CSS
list-style-type
, пользовательский агент выбирает тип маркера в зависимости от уровня вложенности списка.
Спецификации
Примеры
Пример 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UL</title>
</head>
<body>
<ul>
<li>Баал</li>
<li>Агарес</li>
<li>Марбас</li>
<li>Пруфлас</li>
<li>Аамон</li>
</ul>
</body>
</html>
Пример 2
Вложенные списки
<ul>
<li>first item</li>
<li>
second item
<!-- Внимание, закрывающий тег </li> здесь не размещаем -->
<ul>
<li>second item first subitem</li>
<li>
second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>
second item second subitem first sub-subitem
</li>
<li>
second item second subitem second sub-subitem
</li>
<li>
second item second subitem third sub-subitem
</li>
</ul>
</li>
<!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Здесь размещается закрывающий тег </li> -->
</li>
<li>third item</li>
</ul>
Пример 3
Упорядоченный список внутри неупорядоченного списка
<ul>
<li>first item</li>
<li>
second item
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
См. также
Ссылки
- Тег
<ul>
MDN (рус.)
Тег | HTML справочник
HTML теги
Значение и применение
Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).
По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact | compact | Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height: 80%). |
type | disc square circle |
Не поддерживается в HTML5. Определяет вид маркера для использования в списке. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <ul></title> </head> <body> <ul> <li>Светлое</li> <li>Тёмное</li> <li>Пятница</li> </ul> </body> </html>
Выглядеть на странице это будет соответственно так:
- Светлое
- Тёмное
- Пятница
Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера.
Возможные значения свойства:
Атрибут | Значение |
---|---|
list-style-type:none | Убирает маркер. |
list-style-type:disc | Маленький черный круг. Это значение по умолчанию. |
list-style-type:circle | Круг пустой внутри. |
list-style-type:square | Маркер в виде квадрата. |
Ниже приведен пример использования стилей CSS внутри маркированного списка:
<!DOCTYPE html> <html> <head> <title>Пример изменения типа маркера маркированного списка</title> </head> <body> <ul style = "list-style-type:none"> <!-- маркер отсутствует --> <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> <ul style = "list-style-type:square"> <!-- маркер в форме квадрата --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> </body> </html>
Результат нашего примера:
Маркированные списки.
Отличия HTML 4.01 от HTML 5
В HTML5 удалены атрибуты compact и type.
Значение CSS по умолчанию
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; padding-left: 40px; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги
| HTML | WebReference
Элемент <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный список. Каждый пункт списка должен начинаться с элемента <li>.
Синтаксис
<ul>
<li>пункт маркированного списка</li>
</ul>
Закрывающий тег
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>UL</title>
</head>
<body>
<ul>
<li>Баал</li>
<li>Агарес</li>
<li>Марбас</li>
<li>Пруфлас</li>
<li>Аамон</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид маркированного списка в браузере
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 10.10.2018
Редакторы: Влад Мержевич
Тег ul
Пример
Неупорядоченный список HTML:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Подробнее примеры ниже.
Определение и использование
Тег <ul> определяет неупорядоченный (маркированный) список.
Используйте тег <ul> вместе с <li> тег для создания неупорядоченных списков.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<ul> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Используйте CSS для стилей списков.
Совет: Для создания упорядоченных списков используйте тег <ol>
.
Различия между HTML 4,01 и HTML5
Атрибуты «compact» и «type» Не поддерживается в HTML5.
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact | compact | Не поддерживается в HTML5. Указывает, что список должен отображать меньше, чем обычный |
type | disc square circle |
Не поддерживается в HTML5. Указывает тип маркера для использования в списке |
Глобальные атрибуты
Тег <ul> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <ul> также поддерживает Атрибуты событий в HTML.
Попробуйте примеры
Вложенный список
Список внутри списка.
Другой вложенный список
Более сложный вложенный список.
Похожие страницы
HTML Учебник: HTML Lists
HTML DOM Ссылки: Ul Object
CSS Учебник: Styling Lists
Параметры CSS по умолчанию
В большинстве обозревателей элемент <ul> будет отображаться со следующими значениями по умолчанию:
Пример
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
| Справочник HTML
Элемент <ul> (от англ. «unordered list» ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент <ul> применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.
Тег <ul> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.
Пункты для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.
Примечание: Если к <ul> применяется CSS свойство, то элементы <li> наследуют эти свойства.
Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег <ol>.
Синтаксис
<ul>
...
<li> ... </li>
...
</ul>
Закрывающий тег
Обязателен.
Атрибуты
- compactУстарел в HTML5
- Сокращает отступы и расстояния между строками.
- typeHTML5
- Устанавливает вид маркера списка.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <ul> со следующими значениями CSS по умолчанию:
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Различия между HTML 4.01 и HTML5
Атрибуты compact и type не поддерживаются в HTML5.
Пример использования:
Неупорядоченный HTML список:
Спецификации
Поддержка браузерами
Элемент | ||||||
<ul> | 1+ | 1+ | 1+ | 1+ | 1+ | 1+ |
Элемент | ||||
<ul> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start
Как изменить номер данного элемента списка:
Применение атрибута value
Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type
Как создать вложенные списки:
Вложенные списки
Учебник HTML
HTML уроки: HTML Списки
HTML Элементы
HTML тег ul
Пример
Неупорядоченный список HTML:
- Кофе
- Чай
- Молоко
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег
- определяет неупорядоченный (маркированный) список.
- для
создавать неупорядоченные списки.Совет: Используйте CSS для стилизации списков.
Совет: Для упорядоченных списков используйте
-
ярлык.
- Кофе
- Чай
- Молоко
- Кофе
- Чай
- Молоко
- Кофе
- Чай
- Молоко
- Кофе
- Чай
- Черный чай
- Зеленый чай
- Молоко
- Кофе
- Чай
- Черный чай
- Зеленый чай
- Китай
- Африка
- Молоко
- Google Chrome
- Internet Explorer
Поддержка браузера
Элемент Есть Есть Есть Есть Есть
Глобальные атрибуты
Тег
- также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
- также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Установите различные типы стилей списков (с помощью CSS):
Кофе
Чай
МолокоПопробуй сам »
Пример
Увеличить и уменьшить высоту строки в списках (с помощью CSS):
Кофе
Чай
МолокоПопробуй сам »
Пример
Создать список внутри списка (вложенный список):
Попробуй сам »
Пример
Создать более сложный вложенный список:
Попробуй сам »
Связанные страницы
Учебное пособие по HTML: списки HTML
Ссылка на HTML DOM: Ul Object
Учебное пособие по CSS: списки стилей
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент
- со следующими значениями по умолчанию:
Пример
ul {
display: block;
list-style-type: диск;
margin-top: 1em;
нижнее поле: 1 см;
маржа слева: 0;
поле справа: 0;
padding-left: 40 пикселей;
}Попробуй сам »
HTML-тег — GeeksforGeeks
Пример: В этом примере мы создали неупорядоченный список компонентов компьютера с помощью тега
- .
Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.
HTML
<
html
>
<
корпус
>
h3
> Добро пожаловать в GeekforGeeks
h3
>
<
ul
>
<
li
> Мышь
li
>
<
li
> Клавиатура
li
>
<
li
> Динамик
li
>
<
li
> Монитор
li
>
ul
>
9 0006корпус
>
html
>
Выход:
Тег
80- элементов списка. Тег
- требует открывающего и закрывающего тегов. Используя стиль CSS, вы можете легко создать неупорядоченный список.
Синтаксис:
- список элементов
Атрибут: Этот тег содержит два атрибута, которые перечислены ниже:
Примечание: Атрибуты
- не поддерживаются HTML 5.
Пример 1:
HTML
<
html
>
голова
<
title
> HTML ul tag
title
>
head
>
<
body
>
<
h2
> GeeksforGeeks
h2
>
900 20
<
h3
> HTML ul tag
h3
>
<
p
> Список курсов GeeksforGeeks:
p
>
<
ul
>
<
li
> Компьютерщики
li
>
li
> Sudo
li
>
<
li
> Gfg
li
>
<
li
> Ворота
li
>
<
li
> Размещение
li
>
900 20
ul
>
корпус
>
html
>
Выход:
Пример 2: Вложенный неупорядоченный список, список внутри других списков называется вложенным списком.
HTML
<
html
>
<
голова
>
9
title
> Вложенный неупорядоченный список
title
>
head
>
<
body
>
<
h3
> Добро пожаловать в GeeksforGeeks
h3
>
<
ul
>
<
li
> Оборудование
li
>
<
li
>
Программное обеспечение
9000 6<
ul
>
<
li
> Системное программное обеспечение
li
>
<
li
> Прикладное программное обеспечение
li
>
ul
>
li
>
<
li
> MacBook
li
>
ul
>
корпус
>
html
>
Вывод:
Пример 3: Сложный вложенный неупорядоченный список.
HTML
<
html
>
<
голова
>
9
title
> Вложенный неупорядоченный список
title
>
head
>
<
body
>
<
h3
> Добро пожаловать в GeeksforGeeks
h3
>
<
ul
>
<
li
> Оборудование
li
>
<
li
>
Программное обеспечение
9000 6<
ul
>
<
li
> Системное программное обеспечение
li
>
<
li
> Прикладное программное обеспечение
li
>
<
ul
>
<
li
> Skype
li
>
<
li
> Slack
li
>
ul
>
<
li
> Пакет продуктов Microsoft
li
>
<
ul
>
<
li
> Офис
li
>
<
li
> Excel
li
>
<
li
> Word
li
>
<
li
> PowerPoint
li
>
ul
>
ul
>
li
>
<
li
> MacBook
li
>
ul
>
корпус
>
html
>
Вывод:
Поддерживаемые браузеры:
- Элемент
- Списки Упорядочение веб-страниц: вот HTML-код для их создания
- Что делает
- HTML-тег
- Элемент
- используется для определения неупорядоченного списка элементов. Используйте неупорядоченный список, чтобы содержать элементы
- , которые не нужно указывать в числовом порядке и которые можно переставлять без изменения значения списка.
- Дисплей
- блок
- Использование
- семантика
Используйте тег
- вместе с тегом
Firefox 912
HTML-тег »
Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее
Пример кода
Элементы неупорядоченного списка:
- В любом порядке.
- Все равно будет иметь смысл.
Элементы неупорядоченного списка:
- Упорядочены в любом порядке
- Все равно будет иметь смысл
Все о списках
Возможно, вы этого не знаете, но веб-разработчики любят списки.Они используют их постоянно. Как веб-разработчики, мы взяли на себя обязательство предоставить обширное руководство по спискам, которое охватывает все основы: неупорядоченные списки, упорядоченные списки, списки определений, списки обратного отсчета, вложенные списки - и даже затрагивает некоторые сложные темы.
Прочтите наше руководство по спискам, чтобы узнать почти все, что нужно знать о списках HTML.
Списки элементов, порядок которых не имеет значения
Веб-разработчикам доступны два основных типа списков: упорядоченные списки и неупорядоченные списки.Если порядок элементов в списке имеет значение, используйте упорядоченный список. Если порядок элементов в списке не имеет значения, используйте неупорядоченный список.
По умолчанию упорядоченные списки отображаются с числами в качестве маркера элемента списка, а неупорядоченные списки отображаются с маркерами. В результате многие веб-разработчики и авторы контента будут выбирать между неупорядоченными и упорядоченными списками в зависимости от того, хотят ли они цифр или маркеров рядом с элементами своего списка.
Это ошибка.
Маркер элемента списка можно изменить с помощью CSS, но семантическое значение, передаваемое выбором типа списка, не может быть изменено с помощью CSS.
Например:
Вы можете использовать числа в качестве маркера элемента списка для неупорядоченного списка, используя простой CSS:
- Это предмет
- Это предмет
- Ищете товар? Вы его нашли!
<стиль>
.numbered {
тип-стиль-список: десятичный;
}
Вот как этот список отображается в браузере:
Адам - технический писатель, специализирующийся на документации и руководствах для разработчиков.
Атрибуты тега HTML
Имя атрибута | Значения | Примечания |
---|---|---|
|
Используется для установки типов списков. |
h58: Использование ol, ul и dl для списков или групп ссылок
Целью этого метода является создание списков связанных элементов с использованием элементов списка
подходящие для их целей. Элемент ol
используется, когда список
заказанный, а элемент ul
используется, когда список неупорядочен.Определение
списки ( дл
) используются для группировки терминов с их определениями. Хотя использование
такой разметки может сделать списки более удобочитаемыми, не все списки нуждаются в разметке. Например,
предложения, содержащие списки, разделенные запятыми, могут не нуждаться в разметке списка.
Когда используется разметка, которая визуально форматирует элементы в виде списка, но не указывает
список отношений, пользователи могут испытывать трудности с навигацией по информации. Пример
такого визуального форматирования включает в себя звездочки в содержании в начале каждого
элемент списка и использование элементов
для разделения элементов списка.
Некоторые вспомогательные технологии позволяют пользователям переходить от списка к списку или от элемента к элементу.
Таблицы стилей можно использовать для изменения представления списков при сохранении их
честность.
Структура списка ( ul
/ ol
) также полезна для группировки гиперссылок. Когда это будет сделано, это поможет пользователям программ чтения с экрана перейти от первого элемента в списке к его концу или перейти к следующему списку. Это помогает им обойти группы ссылок, если они захотят.
В этом примере ссылки сгруппированы с использованием ul
и li
элементы.
Пример кода:
Категории продуктов
CSS можно использовать для стилизации элементов списка, поэтому этот метод можно использовать с
разнообразие внешнего вида.
Вот стиль, который удаляет маркеры списка и левое заполнение, которое создает
отступ и перемещение отдельных элементов списка по горизонтали.
Пример кода:
ul.navigation {
стиль списка: нет;
отступ: 0;
}
ул.navigation li {
дисплей: встроенный;
}
Этот стиль удаляет маркеры списка и левое заполнение и отображает элементы в
плавающий блок.
Пример кода:
ul.navigation {
стиль списка: нет;
отступ: 0;
}
ul.navigation li {
дисплей: блок;
плыть налево;
}
Ресурсы предназначены только для информационных целей, без какой-либо поддержки.
Процедура
-
Убедитесь, что содержимое, имеющее внешний вид списка (с маркерами или без них), помечено как неупорядоченный список.
-
Убедитесь, что содержимое, имеющее визуальный вид нумерованного списка, помечено как упорядоченный список.
-
Убедитесь, что содержимое помечено как список определений, если термины и их определения представлены в форме списка.
Ожидаемые результаты
Если это достаточный метод для критерия успеха, неудача этой процедуры тестирования не обязательно означает, что критерий успеха не был удовлетворен каким-либо другим способом, только то, что этот метод не был успешно реализован и не может использоваться для подтверждения соответствия.
UL - неупорядоченный список
UL - неупорядоченный список
Синтаксис | |
---|---|
Характеристики атрибутов |
|
Содержание | Один или несколько элементов LI |
Содержится в | APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH |
Элемент UL определяет неупорядоченный список .Элемент содержит один или несколько элементов LI , которые определяют фактические элементы списка.
В отличие от упорядоченного списка ( OL ), элементы неупорядоченного списка не имеют последовательности . Теоретически пользователи могут изменять порядок элементов в неупорядоченном списке ( , например, , в алфавитном порядке).
Визуальные браузеры обычно отображают UL с маркером перед каждым элементом списка, но авторы могут предлагать различные презентации с использованием таблиц стилей.Свойство стиля списка каскадных таблиц стилей позволяет авторам подавлять маркеры, использовать изображения в качестве маркеров элементов списка и т. Д.
Устаревший атрибут TYPE из UL предлагает стиль маркера для визуальных браузеров. Возможные значения:
- диск (закрашенный круг)
- квадрат (квадратный контур)
- круг (контур круга)
Стиль маркера для отдельного элемента списка можно предложить с помощью атрибута TYPE для LI .Свойство list-style-type CSS обеспечивает большую гибкость в предложении стилей маркеров.
Устаревший атрибут COMPACT предполагает, что визуальные браузеры визуализируют список компактно, возможно, с уменьшенным интервалом между элементами. Этот атрибут плохо поддерживается браузерами.
Дополнительная информация
Неупорядоченный список HTML | Маркированный список HTML
Неупорядоченный список HTML или маркированный список отображает элементы в маркированном формате.Мы можем использовать неупорядоченный список, где нам не нужно отображать элементы в каком-либо определенном порядке. Тег HTML ul используется для неупорядоченного списка. Маркированный список может быть 4 типов:
Для представления различных упорядоченных списков в теге
- есть 4 типа атрибутов.
- HTML
- Java
- JavaScript
- SQL
- HTML
- Java
- JavaScript
- SQL
- HTML
- Java
- JavaScript
- SQL
- HTML
- Java
- JavaScript
- SQL
- HTML
- Java
- JavaScript
- SQL
- HTML
- Java
- JavaScript
- SQL
Тип | Описание |
---|---|
Тип «диск» | Это стиль по умолчанию. В этом стиле элементы списка отмечены маркерами. |
Тип «круг» | В этом стиле элементы списка отмечены кружками. |
Тип «квадрат» | В этом стиле элементы списка отмечены квадратами. |
Тип «нет» | В этом стиле элементы списка не выделяются. |
Пример неупорядоченного списка HTML
Проверить это сейчас
Выход:
ul type = "circle"
Проверить это сейчас
Выход:
ul type = "квадрат"
Проверить это сейчас
Выход:
ul type = "none"
Проверить это сейчас
Выход:
Примечание. Атрибут type не поддерживается в HTML5, вместо type вы можете использовать свойство CSS типа list-style-type.Ниже приведен пример, показывающий свойство CSS для тега ul.
Код:
.
Атрибут типа со свойством CSS
Проверить это сейчас
Выход:
Поддерживающие браузеры
HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом
- , с синтаксисом и примерами.
Описание
Тег HTML
- определяет неупорядоченный список в документе HTML. Этот тег также обычно называют элементом
- .
Синтаксис
В HTML синтаксис тега
- :
- Первый элемент
- Второй элемент
- Третий пункт
Пример вывода
Атрибуты
В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу
- :
- HTML-элемент
- находится внутри тега .
- Тег
- состоит из тегов
- .
- Используйте тег
- , когда элементы списка не имеют числового порядка.
- Вы можете вкладывать списки
- ,
- и
Совместимость с браузером
Тег
- совместим со следующими браузерами:
- Хром
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Мобильный Safari
Пример
Мы обсудим тег
- ниже, исследуя примеры использования тега
- в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.
HTML5 Документ
Если вы создали новую веб-страницу в HTML5, ваш тег
- может выглядеть так:
Пример HTML5 от www.techonthenet.com - Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
В этом примере документа HTML5 мы создали неупорядоченный список с помощью тега
- , который содержит четыре элемента списка, найденных в четырех тегах
- .
HTML 4.01 Переходный документ
Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег
- может выглядеть так:
HTML 4.01 Transitional Example by www.techonthenet.com - Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
В этом HTML 4.01 Пример переходного документа, мы создали неупорядоченный список с помощью тега
- , который содержит четыре элемента списка, найденных в четырех тегах
- .
Переходный документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег
- может выглядеть так:
Переходный пример XHMTL 1.0 от www.techonthenet.com - Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
В этом примере переходного документа XHTML 1.0 мы создали неупорядоченный список с помощью тега
- , который содержит четыре элемента списка, найденных в четырех тегах
- .
Строгий документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег
- может выглядеть так:
Строгий пример XHTML 1.0 от www.techonthenet.com - Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
В этом XHTML 1.0 Пример строгого документа, мы создали неупорядоченный список с помощью тега
- , который содержит четыре элемента списка, найденных в четырех тегах
- .
XHTML 1.1, документ
Если вы создали новую веб-страницу в XHTML 1.1, ваш тег
- может выглядеть так:
XHTML 1.1 Пример с сайта www.techonthenet.com - Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
В этом примере документа XHTML 1.1 мы создали неупорядоченный список с помощью тега
- , который содержит четыре элемента списка, найденных в четырех тегах
- .
.
Атрибут | Описание | Совместимость с HTML |
---|---|---|
компактный | Логическое значение, указывающее, что список должен отображаться в компактном стиле | Устарело, используйте CSS |
тип | Стиль маркера для списка.Это может быть любое из следующих значений: круг, диск, квадрат. Вместо этого используйте свойство CSS list-style-type. | Устарело, используйте CSS |