Тег списка html: Теги для списков | htmlbook.ru — Вебджем.рф

Содержание

Тег — упорядоченный список

Поддержка браузерами

Описание

Нумерованный (упорядоченный) список — это HTML список, в котором порядок элементов имеет существенное значение. Примером может служить инструкция по установке веб-сервера, рецепты, оглавления книг и т.д., всё это относится к упорядоченным спискам.

Для создания нумерованного списка в HTML используется тег <ol> (ol сокращение от англ. ordered list — упорядоченный список), который информирует браузер, что все его содержимое, вплоть до закрывающего тега </ol>, представляет собой нумерованный список. Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Элементы для нумерованных списков определяются с помощью тега <li>, каждый такой элемент, помимо текстового содержимого, может включать в себя практически любые HTML-элементы (списки, изображения, заголовки, абзацы и др. ). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Атрибуты

reversed:

Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута:


<ol reversed>
<ol reversed="reversed">
<ol reversed="">

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

start:

Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке.

Пример »

type:

Определяет вид маркера, который будет использоваться для элементов списка:

1 — десятичные числа (1, 2, 3, 4 …).
A — латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D …).

a — латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d …).
I — римские цифры в верхнем регистре (I, II, III, IV …).
i — римские цифры в нижнем регистре (i, ii, iii, iv …).

Пример »

Тег <ol> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Пример


<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

Результат данного примера в окне браузера:

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>:

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.

Цвет текста внутри тега <ul>:

CSS свойство color определяет цвет контента и оформления текста.
CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <ul>:

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

Другие свойства для тега <ul>:

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.

CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег HTML ul

❮ Назад Полный справочник HTML Далее ❯

Пример

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

Кофе

Чай

Молоко

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

Другие примеры «Попробуйте сами» ниже.

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

Тег

Используйте тег

для создавать неупорядоченные списки.

Совет: Используйте CSS для оформления списков.
Совет: Для нумерованных списков используйте

Тег списка html: Теги для списков | htmlbook.ru

Тег — упорядоченный список

Поддержка браузерами

Описание

Атрибуты

Стиль по умолчанию

Пример

HTML тег

Пример

Результат

Пример

Результат

Пример

Результат

Как добавить стиль к тегу <ul> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <ul>:

Цвет текста внутри тега <ul>:

Стили форматирования текста для тега <ul>:

Другие свойства для тега <ul>:

Тег HTML ul

Пример

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

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

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

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

Дополнительные примеры

Пример

Пример

Пример

Пример

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

Настройки CSS по умолчанию

Пример

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Лучший способ реализации

Что такое список HTML?

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

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

Списки HTML-описаний

Добавить комментарий Отменить ответ

Рубрики