САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

Обновляется!!! Справочник JavaScript

HTML Тег <ul>


Пример

Неупорядоченный HTML список:

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Определение и использование

Тег <ul> определяет неупорядоченный (маркированный) список.

Используйте тег <ul> вместе с тегом <li>, что позволяет создавать неупорядоченные списки.

Совет: Используйте CSS для стиля списков.

Совет: Для упорядоченных списков используйте тег <ol>.


Поддержка браузеров

Элемент
<ul> Да Да Да Да Да

Глобальные атрибуты

Тег <ul> также поддерживает Глобальные атрибуты в HTML.


События атрибутов

Тег <ul> также поддерживает События атрибутов в HTML.



Еще примеры

Пример

Выделяют различные типы стилей (с помощью CSS):

<ul style="list-style-type:circle">
  <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:square">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Пример

Расширение и уменьшение высоты строк в списках (с помощью CSS):

<ul style="line-height:180%">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

<ul style="line-height:80%">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Пример

Создайте список внутри списка (вложенный список):

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Черный чай</li>
      <li>Зеленый чай</li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Пример

Создайте более сложный вложенный список:

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Черный чай</li>
      <li>Зеленый чай
        <ul>
          <li>Китайский</li>
          <li>Африканский</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

Связанные страницы

HTML Учебник: HTML Списки

HTML DOM Справочник: Объект Ul

CSS Учебник: Стили списка


Настройки 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;
}
Попробуйте сами »