Что собой представляет маркированный и нумерованный список?

Содержание

WEB-дизайн Основы HTMLСписки

Списки.

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

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

    и

. А каждый элемент списка помещается внутрь тегов
и . Вот пример:

  • Первый элемент
  • Второй элемент
  • Третий элемент

Вот результат примера приведенного выше:

  • Первый элемент
  • Второй элемент
  • Третий элемент

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

обязателен. Внутри элемента списка можно помещать ссылки, параграфы, изображения, другие списки, переносы строк, и др.

Маркеры списка могут быть трех видов: закрашенный круг, окружность и квадрат. Тип маркера задается с помощью параметра type тега

    . Параметр type может принимать следующие значения: disc , circle и square .

Ниже показаны маркеры в виде окружности и квадрата.

  • Первый элемент
  • Второй элемент
  • Третий элемент

  • Первый элемент
  • Второй элемент
  • Третий элемент

А вот как это выглядит:

  • Первый элемент
  • Второй элемент
  • Третий элемент

  • Первый элемент
  • Второй элемент
  • Третий элемент

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

    и

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

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

И выглядит это вот так:

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Тип маркера также задается с помощью параметра type тега

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

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

С помощью параметра start тега

    можно задать стартовое значение маркера. Ниже приведен пример списка с использованием римских чисел начинающихся с 8.

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

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

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

Списки встречаются везде. Они используются для:

  • разбивки больших сегментов текста на части;
  • выделения важных моментов;
  • изложения « плана действий » и перечня мероприятий ( нумерованный список в HTML ).

Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?

Маркированные списки (или ненумерованные списки)

Первый вид списка, который мы рассмотрим, это маркированный.

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

Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример:

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

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и в нумерованном списке HTML ):

Элементы списка — тег

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

  • . Часто можно обойтись и без
  • , но я бы рекомендовал придерживаться этого правила.

    Приведенный выше список помещен в отдельный тег

      , но каждый
      также поддерживает собственный атрибут type , и таким образом можно создать следующий список:

    Отступ маркированного списка

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

    Упорядоченный / нумерованный список — тег

    Если вы хотите упорядочить элементы списка, тогда тег

      поможет в этом. По умолчанию он задает нумерованный список HTML :

    что на выходе дает нам:

    A. Элемент 1
    B. Элемент 2
    C. Элемент 3

    Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

    Начало нумерованного списка с определенного номера

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

    Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 ( или буквы А ). Это бы внесло неразбериху в ваше руководство!

    К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера:

    Что дает нам следующее:
    4. Шаг четыре
    5. Шаг пять
    6. Шаг шесть

    Обратный порядок

    Если вы хотите вывести номера ( или буквы ) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed :

    В результате список будет выглядеть следующим образом:
    5. Пятый пункт.
    4. Четвертый пункт.
    3. Третий пункт.
    2. Второй пункт.
    1. Первый пункт.

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

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

    • Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    • Элемент верхнего уровня

    Вы можете использовать комбинацию тегов

      и

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

    1. Элемент верхнего уровня
    o Подчиненный элемент 1
    o Подчиненный элемент 2
    2. Элемент верхнего уровня

    Используйте нумерованные списки HTML на своих страницах.

    Заключение

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

    Данная публикация представляет собой перевод статьи « Numbered and Bullet Point Lists in HTML » , подготовленной дружной командой проекта Интернет-технологии.ру

    1.8. HTML-списки

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

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

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

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

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

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

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

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

    Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

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

    Каждый элемент списка создаётся с помощью парного тега (от англ. List Item).

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

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

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

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

    Для тега

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

    Для тега

      доступны следующие атрибуты:

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

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

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

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

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

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

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

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

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

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

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

    Источники:

    http://www.html.svoymaster.com/html/spiski.html
    http://www.internet-technologies.ru/articles/numerovannye-i-markirovannye-spiski-v-html.html
    http://html5book.ru/html-lists

    Читать еще:  Липолиз отзывы до и после фото: липолазер до и после
  • Ссылка на основную публикацию
    Статьи на тему:

    Adblock
    detector
    ×
    ×
    ×
    ×