HTML <ul> тег

  • Предыдущая страница <u>
  • Следующая страница <var>

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

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

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

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

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

См. также:

HTML Уроки:HTML список

HTML DOM РуководствоОбъект Ul

CSS Уроки:Настройка стиля списка

Пример

Пример 1

Несортированный HTML-список:

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами

Пример 2

Настройка различных типов стилей списка (используя 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>

Попробуйте сами

Пример 3

Увеличение и уменьшение высоты строк в списке (используя 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>

Попробуйте сами

Пример 4

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

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Пуэр</li>
      <li>Зеленый чай</li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>

Попробуйте сами

Пример 5

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

<ul>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Пуэр</li>
      <li>Зеленый чай
        <ul>
          <li>Бiluochun</li>
          <li>Лунный чай</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Молоко</li>
</ul>

Попробуйте сами

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

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

атрибуты событий

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

Настройки 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;
}

Попробуйте сами

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <u>
  • Следующая страница <var>