7 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать нумерацию в 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. Многоуровневый нумерованный список

    Нумерованные и маркированные списки в 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 » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

    Самый простой — перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.

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

    По умолчанию в качестве маркера списка используется чёрный кружок (disk). Добавив в тег атрибут type и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle) или чёрный квадрат (square).

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

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

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

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

    1. type. Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).

    2. start. Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение — номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.

    3. reversed. Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.

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

    Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов — отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.

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

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

    — контейнер, содержащий список.

    Область применения списков определений — глоссарии, справочники, тесты, словари и другие ёмкие перечисления вида «Термин — объяснение».

    Вот пример списка определений:

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

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

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

    Полезные ссылки:

    • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
    • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
    • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
    • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

    Источники:

    http://html5book.ru/html-lists
    http://www.internet-technologies.ru/articles/numerovannye-i-markirovannye-spiski-v-html.html
    http://www.seostop.ru/sozdanie-saita/html-css/spiski.html

    Читать еще:  Полезные свойства имбиря маринованного
  • Ссылка на основную публикацию
    Статьи c упоминанием слов:
    Adblock
    detector