Список описаний

Изучаем нумерованные и маркированные списки в HTML

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

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

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

Как создать маркированный список — ul что это за тег?

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

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

Атрибут type

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

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

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

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

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

.

Как создать нумерованный список — тег ol

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

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

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

Как сделать нумерованный список в HTML с определенного номера

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

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

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

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

Нумерованный список HTML — обратный порядок

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

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

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

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

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

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

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

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

Нумерованные и маркированные списки в HTML- заключение

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

Источник

Атрибут reversed

Меняет нумерацию в списке на обратный порядок, вместо 1,2,3 будет выводиться 3,2,1.

Синтаксис

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

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

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Списки

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

В HTML существует три вида списков:

• маркированный (неупорядоченный) список;
• нумерованный (упорядоченный) список;
• список описаний.

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

(от англ. Unordered List), а каждый пункт списка начинается с элемента
(от англ. List Item), как показано ниже.

В примере 1 приведён код HTML для добавления маркированного списка на веб-страницу.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка

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

можно вкладывать в другой, опять же, внутрь
(пример 2).

Пример 2. Вложенные списки

Результат данного примера показан на рис. 2.

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

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

(от англ. Ordered List), который и применяется для создания списка. Каждый пункт нумерованного списка обозначается элементом
, как показано ниже.

, то по умолчанию применяется список с арабскими числами (1, 2, 3,…), как показано в примере 3.

Пример 3. Создание нумерованного списка

Результат данного примера показан на рис. 3.

Рис. 3. Вид нумерованного списка

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

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

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

. Его возможные значения приведены в табл. 1.

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

Пример 4. Нумерация списка

Результат данного примера показан на рис. 4.

Рис. 4. Нумерованный список с римскими числами

В таком случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с пяти.

Для value есть два вполне логичных условия использования:

• значение value должно быть целым числом;
• value можно добавлять только к
• внутри списка
  .

В примере 5 показано использование атрибута value для создания обратной нумерации.

Джентльмены удачи (1971) Бриллиантовая рука (1968) В бой идут одни «старики» (1973) Операция «Ы» и другие приключения Шурика (1965) Иван Васильевич меняет профессию (1973)

Результат данного примера показан на рис. 5.

можно добавить атрибут reversed , как показано в примере 6.

Результат данного примера показан на рис. 6.

Атрибут reversed не поддерживается браузерами IE и Edge.

Список описаний

Список описаний состоит из двух элементов — термина и его описания. Сам список задаётся с помощью элемента (от англ. Description List), термин — элементом (от англ. Definition Term), а его описание — с помощью элемента (от англ. Description). Вложение элементов для создания списка продемонстрировано в примере 7.

Пример 7. Общая структура списка описаний

Первый термин

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

Второй термин

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

Список описаний хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т. д. В примере 8 показано одно из возможных использований этого вида списка.

Пример 8. Создание списка описания

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Результат примера показан на рис. 7.

Рис. 7. Вид списка описаний

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

Источник