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

Списки

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

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

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

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

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

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

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

Списки — Основы верстки контента

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

• Маркированные;
• Нумерованные;
• Списки определений.

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

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

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

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

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег — сокращение от List Item. Так браузер отделяет списки друг от друга.

Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега . Внутри каждого из этих тегов помещается один пункт списка.

  Маркированные; Нумерованные; Списки определений.  

Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

 Теги в HTML  Параграфы Списки  Маркированные; Нумерованные; Списки определений.    

У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.

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

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

— сокращение от Ordered List. Примером такого списка может служить список дел на день.

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке Лечь спать  

Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке  Купить цветы Купить конфеты   Лечь спать  

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

С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

В качестве контейнера для списков определений используется тег от английского Definition List, внутри которого не привычная схема , а система из двух тегов:

1. — термин. От английского Definition Term;
2. — определение. От английского Definition Description.

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

  HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей  

Стилизация списков

Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type . Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square .

Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .

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

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

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

Картинка в качестве маркера списка

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

Чтобы установить маркер в виде своего изображения, используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:

.list-image  list-style-image: url("./good.png"); > 

Открыть доступ

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

1.8. HTML-списки

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

• маркированный список —
  — каждый элемент списка
  • отмечается маркером,
  • нумерованный список —
    — каждый элемент списка
  • отмечается цифрой,
  • список определений — — состоит из пар термин — определение.

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

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

  Создание HTML-списков

  • Содержание:
  • 1. Маркированный список
  • 2. Нумерованный список
  • 3. Список определений
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

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

  . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

  Браузеры по умолчанию добавляют следующее форматирование блоку списка:

  • Microsoft
  • Google
  • Apple
  • IBM

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

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

  Блок списка также имеет стили браузера по умолчанию:

  доступны следующие атрибуты:
  1. Microsoft
  2. Google
  3. Apple
  4. IBM

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

  Списки определений создаются с помощью элемента . Для добавления термина применяется элемент , а для вставки определения — элемент .

  Блок списка определений имеет следующие стили браузера по умолчанию:

   
  Режиссер:
   
  Петр Точилин
   
  В ролях:
   
  Андрей Гайдулян
   
  Алексей Гаврилов
   
  Виталий Гогунский
   
  Мария Кожевникова
   

  Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

  4. Как создать вложенный список

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

  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.
      • Пункт 1.
      • Пункт 2.
        • Подпункт 2.1.
        • Подпункт 2.2.
          • Подпункт 2.2.1.
          • Подпункт 2.2.2.

          5. Многоуровневый нумерованный список

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

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

          • counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
          • counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
          • content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

          ol < /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; >li:before < /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li, ".") ". "; >

          Списки в 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. Интеграция

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

          Похожие публикации:

          1. Где находится штаб квартира фиат
          2. Как удалить инфоблок битрикс
          3. Почему глохнет бензопила при нагрузке
          4. Чем внешне отличаются точка доступа и маршрутизатор wifi