Меню
Спросить
< >

HTML списки

11 октября 2017
HTML списки

Всем привет, давно не было статей про HTML и вот я опомнился. Посмотрев в окно на интернет я решил написать статью про списки которые используются в HTML. Все мы в жизни хоть раз создавали всевозможные списки. Это может быть рецепт какого-нибудь вкуснейшего блюда, состоящее из пунктов в которые входят ингредиенты, это может быть список покупок, которые вы написали в виде нумерованного списка, чтобы не забыть, что купить. В HTML тоже есть списки, хотя не всегда они используются по назначению, например в некоторых уроках я использовал маркированный список ul в качестве навигационного меню для сайта. В общем широта применения списков в html, по мимо их стандартной задачи, зависит только от вашей фантазии. Поехали =)

Список ul

Первый список с которого мы начнем - это список ul. Кто читал предыдущие статьи или видео, тот уже знаком с данным списком. В HTML список UL - это маркированный список, то есть список, каждый пункт которого, отделяется маркером, по умолчанию в качестве маркера выступает черный кружок. Давайте запишем в тег body простейший список ul.

  1. <ul type="disc">
  2.     <li>Картофель - 300гр</li>
  3.     <li>Лук - 30тонн</li>
  4.     <li>Мясо - шашлык</li>
  5.     <li>Программист - бубен</li>
  6. </ul>

Теперь рассмотрим поближе. Сам тег UL является как бы контейнером для пунктов LI, все в целом это и есть список. То есть я думаю понятно, что тег LI содержит в себе текст каждого пункта. Помимо универсальных атрибутов, тег ul поддерживает атрибут type, значение которого, меняет вид маркера.
У списка UL всего три маркера:
- disc, он стоит по умолчанию, черный кружок,
- circle, тот же кружок, но без черного закрашивания,
- square, черный квадрат.

Список ol

Данный список схож со списком ul, только это не маркированный, а нумерованный список, то есть вместо маркеров выступают цифры либо символы, в зависимости от атрибута type. Давайте посмотрим как выглядит данный список в коде:

  1. <ol>
  2.     <li>Купить носок</li>
  3.     <li>Купить хлеб</li>
  4.     <li>Купить программиста</li>
  5.     <li>Купить бубен</li>
  6. </ol>

Сразу видно, что списки похожи, отличие лишь в том что ol - это нумерованный список. Так же данный тег поддерживает три атрибута, помимо универсальных. Начнем с атрибута type, какие значения он может содержать в себе:
- 1, данное значение стоит по умолчанию и означает, что нумерация будет в виде арабских цифр,
- A, буквенная нумерация, большие буквы,
- a, буквенная нумерация, маленькие буквы,
- I, английская большая буква "И", римская нумерация в верхнем регистре,
- i, английская маленькая буква "и", римская нумерация в нижнем регистре.
Попробуйте поиграть с значениями атрибута, чтобы увидеть как это все выглядит.
Следующий атрибут - reversed, не содержит никакого значения. Указав данный атрибут, нумерация обратится в обратный порядок. То есть, если было 1,2,3,... то будет 3,2,1,....
И третий атрибут - start, в качестве значения может содержать в себе любое целое число. Указав данный атрибут, вы тем самым укажите с какого номера начинать отсчет. То есть, если было 1,2,3,... указав значение 2 атрибуту start список будет с такой нумерацией - 2,3,4,....

Список dl

Данный список с ног до головы отличается от списков ul и ol. Список dl - это список определений, не знаю кто его так назвал, но естественно его возможности не только для определений. Структура кода у списка dl тоже отличается, если у маркированного и нумерованного списков пункты состояли из тегов li, то здесь два вида пунктов и состоят они из тега dt - пункт для терминов и тега dd - определение термина. Посмотрим как это выглядит в коде:

  1. <dl>
  2.     <dt>Список UL</dt>
  3.         <dd>это маркированный список</dd>
  4.     <dt>Список OL</dt>
  5.         <dd>это нумерованный список</dd>
  6.     <dt>Список DL</dt>
  7.         <dd>это список определений</dd>
  8. </dl>

Заключение

Со списками покончено, надеюсь мы еще к ним вернемся, спасибо за урок, всем пока =)

Предыдущая статья