Теги для маркированного списка в html. Нумерованные списки
- 4.5 out of 5 based on 2 votes
Очень часто определенную информацию на сайте необходимо представить в виде списков.
Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.
Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим, как их создавать по порядку.
Маркированный список.
Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов
- . При этом напротив каждого элемента списка добавляется маркер, по умолчанию это маркер в виде кружка. При помощи тегов создается контейнер, внутри которого располагаются элементы списка: .
Код маркированного списка будет выглядеть так:
- Вариант такой
- Вариант сякой
- Вариант эдакий
Можете попробовать создать 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-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
маркированный список —
- — каждый элемент списка
- отмечается маркером,
нумерованный список —- — каждый элемент списка
- отмечается цифрой,
список определений — — состоит из пар термин- —
- определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега
. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.Браузеры по умолчанию добавляют следующее форматирование блоку списка:
Каждый элемент списка создаётся с помощью парного тега
- (от англ. List Item) .
- доступны .
- Microsoft
- Apple
2. Нумерованный список
Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента
- отмечается цифрой,
- . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
- доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
- , то остальная нумерация будет пересчитана относительно нового значения.
Для тега
- доступны следующие атрибуты:
- Microsoft
- Apple
- и
- доступны .
- Режиссер:
- Петр Точилин
- В ролях:
- Андрей Гайдулян
- Алексей Гаврилов
- Виталий Гогунский
- Мария Кожевникова
4. Вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов . Разметка для вложенного списка будет следующей:
- Пункт 1.
- Пункт 2.
- Подпункт 2.1.
- Подпункт 2.2.
- Подпункт 2.2.1.
- Подпункт 2.2.2.
- Подпункт 2.3.
- Пункт 3.
Рис. 4. Вложенный список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,".") ". "; }
Рис. 5. Многоуровневый нумерованный список
Таблица 1. Атрибуты тега
Атрибут Описание, принимаемое значение reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция - первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например,
- .
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).3. Список определений
Списки определений создаются с помощью тега
Блок списка определений имеет следующие стили браузера по умолчанию:
Для тегов
- ,
В языке разметки гипертекста 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
- Элемент #1
- Элемент #2
- Элемент #3
- ...
- A - задает маркеры в виде прописных латинских букв (A, B, C..);
- a - задает маркеры в виде строчных латинских букв (a, b, c..);
- I - задает маркеры в виде больших римских цифр (I, II, III, IV..);
- i - задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..);
- 1 (по умолчанию) - задает маркеры в виде арабских цифр (1, 2, 3..);
-
. Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Примечание
Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value="" у тега
-
, которому присваивается какое-то числовое значение. Например
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #10
- Элемент #11
- Элемент #12
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- .
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Пример 5. Реверсивный нумерованный список в html
Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Здравствуйте, уважаемые читатели блога сайт. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI - нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.
Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через .
Маркированные списки на основе тэгов UL и LI
Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.
Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.
Давайте посмотрим, например, маркированный вариант, который может выглядеть так:
- Первая строка
- Вторая
- Последний элемент
Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).
Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.
Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):
- — закрашенный кружок (по умолчанию);
- — не закрашенный кружок;
- – квадрат
В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.
Пример маркированного списка с различными типами маркера для каждого пункта:
- Маркер в виде закрашенного диска
- Маркер в виде не закрашенного диска
- Квадрат
Нумерованные списки в Html на основе тэга OL
Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.
Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:
- Первая строка
- Второй пункт
- Третья строка
Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:
- — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
- — заглавные буквы в качестве нумерации;
- — строчные буквы;
- — заглавные римские цифры;
- — строчные римские цифры;
Пример нумерованного списка с различными типами нумерации для каждого пункта:
- с нумерацией большими римскими цифрами
- Нумерация маленькими латинскими буквами
- Нумерация малыми римскими цифрами
При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:
- Первый элемент, номер которого задан в теге OL атрибутом start="23"
- Следующий пункт, с номером на единицу большим
- Еще на единицу больше
Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:
- Первый пункт с номером один
- Этот элемент получит номер, указанный в атрибуте value="32"
- Пункт с большим номером
Оформление внешнего вида списков в CSS (таблицах стилей)
Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а , для которых прописываются соответствующие свойства.
Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.
- Первый пункт
- Второй
- Последний
Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .
Специальные и вложенные списки в Html коде
Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.
Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).
- Первый термин
- Описание
- Второй термин
- Его описание
Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).
Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.
Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.
Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:
- Первый пункт основного нумерованного
- Второй пункт
- Первый элемент вложенного маркированного
- Второй
- Третий и последний пункт маркированного
- Третий элемент нумерованного
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на
");">Вам может быть интересно
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Код при этом выглядит так:
Изменение маркеров тега
- с помощью CSS
Элементы маркированного списка, создаваемые тегом
-
, могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например
А так это выглядит на странице:
C помощью CSS мы можем задать и другие типы отображения маркеров. Но нужно помнить, что при задании какого-либо стиля тегу
- , он распространяется на все элементы списка.
Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список.
Синтаксис тега
Где атрибут type="value" может принимать следующие значения
Атрибут start="value" задает начальное значение (стартовое значение) отчета.
Атрибут reversed задает обратный счет (в случае необходимости).
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег
Примеры с нумерованными списками в html (
- )
Пример 1. Нумерованный список html в виде латинских букв
Пример с заглавными буквами
Пример со строчными буквами
Вот как это выглядит на странице:
Пример 2. Нумерованный список html в виде римских букв
Пример с заглавными буквами
Вот как это выглядит на странице:
Пример со строчными буквами
Вот как это выглядит на странице:
Пример 3. Нумерованный список html разная позиция старта
Пример, который показывает возможности атрибута start , который позволяет задавать стартовое значение счетчика.
Вот как это выглядит на странице:
Пример 4. Изменение счета в нумерованных списках html
Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах
Синтаксис тега
Этот код преобразуется в маркированный список на сайте:
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Что может являться содержимым маркированного списка?Это могут быть различные тексты, включая одиночные слова, фразы и абзацы, изображения, вложенные списки, куски php-кода и многое другое, нуждающееся в простой маркировке.
Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег
-
является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.
Допускается вложения "список в списке"
Например
Атрибуты и свойства тега
Широко распространённым атрибутом тега
-
является атрибут type
, указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения
1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.
2. type="circle" - маркер в виде прозрачного кружка
Например:
3. type="square" - маркер в виде квадратика
Например:
А вот как это выглядит на странице:
В CSS тип маркера задается с помощью атрибута list-style-type :
Рассмотрим какие значения может принимать list-style-type :
Примечание 2
Атрибут можно назначить как самому тегу
-
, так и тегам
Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.
Вид списка:
Вид списка:
Нумерация строчными буквами латинского алфавита:
Вид списка:
Вид списка:
Вид списка:
Список определений в HTML.
Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов
Значение disc используется по умолчанию.
Пример создания маркированного списка с маркерами в виде окружности:
В результате список примет, следующий вид:
Создание маркированного списка с маркерами в виде квадратиков:
Список будет иметь вид:
Атрибут type можно применять не только к тегу
- , но и к тегу