Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Списки в HTML

spiski-v-html

В языке HTML, существует 3 типа списков:

  • Упорядоченный список (тег ol)
  • Неупорядоченный список (тег ul)
  • Список определений

В этом уроке, мы рассмотрим с вами два вида списков: упорядоченный и неупорядоченный.

Упорядоченный список (ol)

Упорядоченный список в HTML — это такой список где каждый элемент имеет свой порядковый номер (1, 2, 3, 4 и т.д.). Упорядоченный список в HTML, начинается и заканчивается тегами ol, каждый элемент списка обрамляется тегами li. Рассмотрим пример упорядоченного списка:

<ol>
  <li>Открыть программу</li>
  <li>Нажать кнопку</li>
  <li>Выбрать из списка</li>
  <li>Ввести данные</li>
  <li>Закрыть программу</li>
</ol>

Результат:

  1. Открыть программу
  2. Нажать кнопку
  3. Выбрать из списка
  4. Ввести данные
  5. Закрыть программу

Тегами упорядоченного списка удобно обрамлять различные пошаговые инструкции: рецепты изготовления, задания (квесты). Такие списки, где между первым элементом списка и последним имеется взаимосвязь (начинаем с первого и заканчиваем последним, постепенно проходя друг за другом все этапы).

Для форматирования упорядоченного списка имеется CSS-свойство list-type-style, данное свойство позволяет использовать вместо обычных (арабских) чисел, римские, а также буквы и др.

Неупорядоченный список (ul)

Неупорядоченный список в HTML — это список, где перед каждым элементом ставится маркер (черный кружок). Неупорядоченный список в HTML, начинается и заканчивается тегами ul, каждый элемент списка обрамляется тегами li. Рассмотрим пример неупорядоченного списка:

<ul>
 <li>Лето</li>
 <li>Осень</li>
 <li>Зима</li>
 <li>Весна</li>
</ul>

Результат:

  • Лето
  • Осень
  • Зима
  • Весна

Тегами неупорядоченного списка, удобно обрамлять различные списки наподобие: ингредиенты, список частей целого (времена года) и т.д. То есть те списки, где нет четкой взаимосвязи от начала и до конца. Например, если мы напишем зима, весна, лето, осень то целостность не нарушится, ибо это не инструкция. Однако если мы сначала введём данные не открыв программу, то произойдет ошибка, ибо прежде чем ввести данные нужно открыть программу.

Для форматирования неупорядоченного списка используется CSS-свойство list-type-style, данное свойство может изменять стандартный маркер (черный круг), на ромб, квадрат или обруч.

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: HTML, Статья
Статья создана: 8 Фев 2016
Статья обновлена: 8 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget