Для создания элемента списка используют тег. Нумерованные списки
Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список.
Синтаксис тега
- Элемент #1
- Элемент #2
- Элемент #3
- ...
Где атрибут type="value" может принимать следующие значения
- A - задает маркеры в виде прописных латинских букв (A, B, C..);
- a - задает маркеры в виде строчных латинских букв (a, b, c..);
- I - задает маркеры в виде больших римских цифр (I, II, III, IV..);
- i - задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..);
- 1 (по умолчанию) - задает маркеры в виде арабских цифр (1, 2, 3..);
Атрибут start="value" задает начальное значение (стартовое значение) отчета.
Атрибут reversed задает обратный счет (в случае необходимости).
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег
Примечание
Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value="" у тега
- Элемент #1
- Элемент #2
- Элемент #3
Примеры с нумерованными списками в html ()
Пример 1. Нумерованный список html в виде латинских букв
Пример с заглавными буквами
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
- Элемент #10
- Элемент #11
- Элемент #12
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 2. Нумерованный список html в виде римских букв
Пример с заглавными буквами
- Элемент #1
- Элемент #2
- Элемент #3
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
- Элемент #1
- Элемент #2
- Элемент #3
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 3. Нумерованный список html разная позиция старта
Пример, который показывает возможности атрибута start , который позволяет задавать стартовое значение счетчика.
- Элемент #1
- Элемент #2
- Элемент #3
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 4. Изменение счета в нумерованных списках html
Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Пример 5. Реверсивный нумерованный список в html
Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
В языке разметки гипертекста HTML имеется тег
-
, используемый для создания маркированных списков. Он поддерживается всеми современными браузерами и позволяет выводить элементы в порядке, не нуждающемся в нумерации. Например, очень часть с помощью него выводятся пункты меню и все что касается списков на странице: блюд, продуктов, оборудования, инструментов и многое другое, что нужно перечислить без указания на приоритетность того или иного пункта.
- Элемент #1
- Элемент #2
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
-
- Элемент #2-1
- Элемент #2-2
- Элемент #2-3
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- ...
- disc - маркер в виде кружка (пример был выше)
- circle - маркер в виде прозрачного кружка (пример был выше)
- square - маркер в виде квадратика (пример был выше)
- decimal - маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
- decimal-leading-zero - маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
- lower-roman - маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
- upper-roman - маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
- lower-latin - маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
- upper-latin - маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
- lower-greek - маркер в виде списка греческим алфавитом маленькими буквами
- upper-greek - маркер в виде списка греческим алфавитом большими буквами
-
. При задании атрибута тегу
-
все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- . При этом напротив каждого элемента списка добавляется маркер, по умолчанию это маркер в виде кружка. При помощи тегов создается контейнер, внутри которого располагаются элементы списка: .
Код маркированного списка будет выглядеть так:
- Вариант такой
- Вариант сякой
- Вариант эдакий
Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:
Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега
- есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:
- disc - круг;
- circle - окружность;
- square - квадрат.
- Вариант такой
- Вариант сякой
- Вариант эдакий
- Вариант такой
- Вариант сякой
- Вариант эдакий
- . Таким образом можно создать список с разнообразными маркерами.
- Вариант такой
- Вариант сякой
- Вариант эдакий
В результате получится следующее:
Нумерованные списки.
Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега
- и вложенных в его тегов
-
- Первая строчка LI>
- Вторая строчка
- Третья строчка
Выглядит такой список следующим образом:
По умолчанию нумерация производится арабскими цифрами. Но у тега
- есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type="A") или строчными (type="a") латинскими буквами, римскими цифрами в верхнем (type="I") и нижнем (type="i") регистре.
- . Тег
- создает контейнер для списка, тег
- устанавливает термин, а тег
- описание или определение термина.
Записывается данный список следующим образом:
- Термин 1
- Определение термина 1
- Термин 2
- Определение термина 2
- Термин 3
- Определение термина 3
В результате получится следующий список:
Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения.
Вложенные или многоуровневые списки в HTML.
Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков.
Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.
- Вариант такой
- Первая строчка LI>
- Вторая строчка
- Третья строчка
- Вариант сякой
- Первая строчка LI>
- Вторая строчка
- Третья строчка
- Вариант эдакий
- Первая строчка LI>
- Вторая строчка
- Третья строчка
Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.
Вид списка:
Вид списка:
Нумерация строчными буквами латинского алфавита:
Вид списка:
Вид списка:
Вид списка:
Список определений в HTML.
Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов
Значение disc используется по умолчанию.
Пример создания маркированного списка с маркерами в виде окружности:
В результате список примет, следующий вид:
Создание маркированного списка с маркерами в виде квадратиков:
Список будет иметь вид:
Атрибут type можно применять не только к тегу
- , но и к тегу
Код при этом выглядит так:
Изменение маркеров тега
- с помощью CSS
Элементы маркированного списка, создаваемые тегом
-
, могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например
А так это выглядит на странице:
C помощью CSS мы можем задать и другие типы отображения маркеров. Но нужно помнить, что при задании какого-либо стиля тегу
- , он распространяется на все элементы списка.
- 4.5 out of 5 based on 2 votes
Очень часто определенную информацию на сайте необходимо представить в виде списков.
Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.
Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим, как их создавать по порядку.
Маркированный список.
Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов
Синтаксис тега
Этот код преобразуется в маркированный список на сайте:
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Что может являться содержимым маркированного списка?Это могут быть различные тексты, включая одиночные слова, фразы и абзацы, изображения, вложенные списки, куски php-кода и многое другое, нуждающееся в простой маркировке.
Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег
-
является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.
Допускается вложения "список в списке"
Например
Атрибуты и свойства тега
Широко распространённым атрибутом тега
-
является атрибут type
, указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения
1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.
2. type="circle" - маркер в виде прозрачного кружка
Например:
3. type="square" - маркер в виде квадратика
Например:
А вот как это выглядит на странице:
В CSS тип маркера задается с помощью атрибута list-style-type :
Рассмотрим какие значения может принимать list-style-type :
Примечание 2
Атрибут можно назначить как самому тегу
-
, так и тегам