Какие существуют типы списков в html
Перейти к содержимому

Какие существуют типы списков в html

  • автор:

Списки

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

    , который устанавливает маркированный список, или
    , определяющий список нумерованный. Каждый элемент списка должен начинаться с тега
    .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

Списки

Списком называется взаимосвязанный набор отдельных фраз или предложений. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.

В HTML существует три вида списков:

  • маркированный (неупорядоченный) список;
  • нумерованный (упорядоченный) список;
  • список описаний.

Маркированный список

    (от англ. Unordered List), а каждый пункт списка начинается с элемента
    (от англ. List Item), как показано ниже.

  • Первый пункт
  • Второй пункт
  • Третий пункт

В примере 1 приведён код HTML для добавления маркированного списка на веб-страницу.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1.

Вид маркированного списка

Рис. 1. Вид маркированного списка

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

    можно вкладывать в другой, опять же, внутрь
    (пример 2).

Пример 2. Вложенные списки

Результат данного примера показан на рис. 2.

Вложенные списки

Рис. 2. Вложенные списки

Обратите внимание, что у вложенного списка меняется вид маркеров.

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

    (от англ. Ordered List), который и применяется для создания списка. Каждый пункт нумерованного списка обозначается элементом
    , как показано ниже.

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт

    , то по умолчанию применяется список с арабскими числами (1, 2, 3,…), как показано в примере 3.

Пример 3. Создание нумерованного списка

Результат данного примера показан на рис. 3.

Вид нумерованного списка

Рис. 3. Вид нумерованного списка

Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста.

В качестве нумерующих элементов могут выступать следующие значения:

  • арабские числа (1, 2, 3, …);
  • прописные латинские буквы (A, B, C, …);
  • строчные латинские буквы (a, b, c, …);
  • прописные римские числа (I, II, III, …);
  • строчные римские числа (i, ii, iii, …).

    . Его возможные значения приведены в табл. 1.

    . При этом не имеет значения, какой тип списка установлен с помощью type , атрибут start одинаково работает и с римскими и с арабскими числами. В примере 4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

Пример 4. Нумерация списка

Результат данного примера показан на рис. 4.

Нумерованный список с римскими числами

Рис. 4. Нумерованный список с римскими числами

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

Для value есть два вполне логичных условия использования:

  • значение value должно быть целым числом;
  • value можно добавлять только к
  • внутри списка
    .

В примере 5 показано использование атрибута value для создания обратной нумерации.

Пример 5. Атрибут value

    Джентльмены удачи (1971) Бриллиантовая рука (1968) В бой идут одни «старики» (1973) Операция «Ы» и другие приключения Шурика (1965) Иван Васильевич меняет профессию (1973)

Результат данного примера показан на рис. 5.

Обратный список

Рис. 5. Обратный список

    можно добавить атрибут reversed , как показано в примере 6.

Пример 6. Обратный список

Результат данного примера показан на рис. 6.

Обратный список

Рис. 6. Обратный список

Атрибут reversed не поддерживается браузерами IE и Edge.

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

Список описаний состоит из двух элементов — термина и его описания. Сам список задаётся с помощью элемента (от англ. Description List), термин — элементом (от англ. Definition Term), а его описание — с помощью элемента (от англ. Description). Вложение элементов для создания списка продемонстрировано в примере 7.

Пример 7. Общая структура списка описаний

Первый термин
Описание первого термина
Второй термин
Описание второго термина

Список описаний хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т. д. В примере 8 показано одно из возможных использований этого вида списка.

Пример 8. Создание списка описания

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

Сепульки
Важный элемент цивилизации ардритов с планеты Энтеропия.
Сепулькарии
Устройства для сепуления.
Сепуление
Занятие ардритов с планеты Энтеропия.

Результат примера показан на рис. 7.

Вид списка описаний

Рис. 7. Вид списка описаний

Как видно на картинке, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

Какие существуют типы списков в html

Для распознания данного вида списка браузером используются два вида тегов, такие как: &ltul> и &ltli> они считаться двойными тегами, так как у них есть закрывающиеся теги &lt/ul> и &lt/li>.

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста.

Но давайте посмотрим, как в коде выглядит маркированные списки:
&lthtml>
&lthead>
&lttitle>Моя первая html страница&lt/title>
&lt/head>
&ltbody>
&ltp>Фрукты&lt/p>
&ltul>
&ltli>Банан&lt/li>
&ltli>Яблоко&lt/li>
&ltli>Персик&lt/li>
&lt/ul>
&lt/body>
&lt/html>

А вот так выглядит в браузере:

2.Стандартные маркеры для маркированного списка

На изображении выше (Рис 7.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

3.Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

&lthtml>
&lthead>
&lttitle>Пример маркированного списка с маркером в виде пустого круга&lt/title>
&lt/head>
&ltbody>
&ltp>Звезды:&lt/p>
&ltul type=»circle»>
&ltli>Сириус&lt/li>
&ltli>Арктур&lt/li>
&ltli>Поллукс&lt/li>
&ltli>Бетельгейзе&lt/li>
&ltli>Солнце&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Сразу смотрим, как это выглядит в браузере:

4.Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка: &lthtml>
&lthead>
&lttitle>Пример маркированного списка с маркером в виде квадрата&lt/title>
&lt/head>
&ltbody>
&ltp>Виды птиц:&lt/p>
&ltul type=»square»>
&ltli>Ара зеленокрылый&lt/li>
&ltli>Дрозд рябинник&lt/li>
&ltli>Индейка палевая&lt/li>
&lt/ul>
&lt/body>
&lt/html>

Обратите внимание на маркер, он стал квадратным:

С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.

5.Нумерованные списки в HTML (упорядоченные списки)

В отличие от предыдущего вида списков, в нумерованных списках есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно, когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега &ltol>&lt/ol>. Как это выглядит на практике:

Пример нумерованного списка:
&lthtml>
&lthead>
&lttitle>Пример стандартного нумерованного списка&lt/title>
&lt/head>
&ltbody>
&ltp>От одного до пяти:&lt/p>
&ltol>
&ltli>Первый&lt/li>
&ltli>Второй&lt/li>
&ltli>Третий&lt/li>
&ltli>Четвертый&lt/li>
&ltli>Пятый&lt/li>
&lt/ol>
&lt/body>
&lt/html>

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

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

  1. Бадминтон
  2. Бейсбол
  3. Бокс
  1. Джомолунгма
  2. Чогори
  3. Канченджанга
  1. Summit Plummet
  2. Tantrum Alley
  3. Insano
  1. Филиппинское море
  2. Аравийское море
  3. Коралловое море
  1. Красный
  2. Зеленый
  3. Синий

6.Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз, либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

&lthtml>
&lthead>
&lttitle>Вложенный маркированный список HTML&lt/title>
&lt/head>
&ltbody>
&ltul>
&ltli>Citroen
&ltul>
&ltli>Berlingo&lt/li>
&ltli>C1&lt/li>
&ltli>C2&lt/li>
&ltli>C3 Picasso&lt/li>
&ltli>C4 Grand Picasso&lt/li>
&lt/ul>
&lt/li>
&ltli>KIA&lt/li>
&ltli>Toyota&lt/li>
&ltli>Audi&lt/li>
&ltli>Lexus&lt/li>
&lt/ul>
&lt/body>
&lt/html>

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

Мы делали многоуровневый список с помощью маркированного (тег &ltul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры. Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
&lthtml>
&lthead>
&lttitle>Нумерованные, маркированные и многоуровневые списки в HTML&lt/title>
&lt/head>
&ltbody>
&ltul>
&ltli>Первая группа тюльпанов
&ltol>
&ltli>Первый класс
&ltul>
&ltli>Простые ранние тюльпаны&lt/li>
&lt/ul>
&lt/li>
&ltli>Второй класс
&ltul>
&ltli>Махровые тюльпаны&lt/li>
&lt/ul>
&lt/li>
&lt/ol>
&lt/li>
&lt/ul>
&lt/body>
&lt/html>

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.

Практическое задание 1

&lth4>Неупорядоченный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>

Сохраните файл под именем 18ul.html

Практическое задание 2

Упорядоченные списки
&lthtml>
&ltbody>

&lth4>Упорядоченный список:&lt/h4>
&ltol>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ol>

&lt/body>
&lt/html>
Сохраните файл под именем 19ol.html
Практическое задание 3
Списки определений
&lthtml>
&ltbody>

&ltdl>
&ltdt>элемент 1&lt/dt>
&ltdd>описание элемента 1&lt/dd>
&ltdt>элемент 2&lt/dt>
&ltdd>описание элемента 2&lt/dd>
&lt/dl>

Сохраните файл под именем 20dl.html

Дополнительное задание по спискам:
1.Различные типы упорядоченных списков

&lth4>Список проектов с цифрами:&lt/h4>
&ltol>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с буквами:&lt/h4>
&ltol type=»A»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с буквами нижнего регистра:&lt/h4>
&ltol type=»a»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с римскими цифрами:&lt/h4>
&ltol type=»I»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

&lth4>Список с римскими цифрами в нижнем регистре:&lt/h4>
&ltol type=»i»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ol>

Сохраните файл под именем 21ol.html

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

&lth4>Список со значком кругом:&lt/h4>
&ltul type=»disc»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

&lth4>Список со значком окружностью:&lt/h4>
&ltul type=»circle»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

&lth4>Список со значком квадратом:&lt/h4>
&ltul type=»square»>
&ltli>intuit.ru&lt/li>
&ltli>osp.ru&lt/li>
&ltli>file.ru&lt/li>
&lt/ul>

Сохраните файл под именем 22ul.html

3.Вложенный список

&lth4>Вложенный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltul>
&ltli>элемент 2.1&lt/li>
&ltli>элемент 2.2&lt/li>
&lt/ul>
&ltli>элемент 3&lt/li>
&lt/ul>

&lth4>Вложенный список:&lt/h4>
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltul>
&ltli>элемент 2.1&lt/li>
&ltli>элемент 2.2&lt/li>
&ltul>
&ltli>элемент 2.2.1&lt/li>
&ltli>элемент 2.2.2&lt/li>
&lt/ul>
&lt/li>
&lt/ul>
&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>

Сохраните файл под именем 23vlog.html

4.Список определений

&lth4>Список определений:&lt/h4>
&ltdl>
&ltdt>элемент 1&lt/dt>
&ltdd>описание элемента 1&lt/dd>
&ltdt>элемент 2&lt/dt>
&ltdd>описание элемента 2&lt/dd>
&lt/dl>

Сохраните файл под именем 24dl.html

Задание для самостоятельной работы № 1

1.Составить HTML-кода для предложенной страницы.
2.Предусмотреть заголовки, абзацы, списки, а также горизонтальные линии.

Списки в HTML. Все о HTML списках

В HTML для создания списков используются теги группы lists. К ним относятся:

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете, нажав по названию тега.

Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

Маркированный список

Пример простого маркированного списка HTML

  • Яблоки
  • Абрикосы
  • Бананы
  • Сливы
Исходный код простого маркированного списка:

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).

Список с разными типами маркеров:

  • Disc — закрашенный круг, точка.
  • Circle — окружность, пустая внутри.
  • Square — квадрат.

Исходный код списка с разными типами маркеров:

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

  • Маркер внутри (inside)
  • Маркер снаружи (outside)

Исходный код списка с разным положением маркеров:

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

Пример списка со своей картинкой в роли маркера:

  1. Дизайн
  2. Верстка
  3. Интеграция

Исходный код списка со своим маркером — картинкой:

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

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