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

Списки в HTML. Все о HTML списках

В HTML для создания списков используются теги группы lists. К ним относятся:

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

Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

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

Пример простого маркированного списка HTML

Исходный код простого маркированного списка:

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).

Список с разными типами маркеров:

• Disc — закрашенный круг, точка.
• Circle — окружность, пустая внутри.
• Square — квадрат.

Исходный код списка с разными типами маркеров:

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

Исходный код списка с разным положением маркеров:

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

Пример списка со своей картинкой в роли маркера:

Исходный код списка со своим маркером — картинкой:

Источник

Списки в HTML: синтаксис и примеры использования

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «HTML List – How to Use Bullet Points, Ordered, and Unordered Lists».

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

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

В этой статье мы рассмотрим элементы списков, их свойства, стили и, разумеется, — как создавать из них аккуратные списки.

Как сделать список в HTML

Списки в HTML бывают упорядоченные и неупорядоченные.

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

Примером упорядоченного списка может служить нумерованный список. Он может начинаться с номера 1, затем будут идти номера 2, 3, 4 и так далее.

Но для упорядочивания элементов не обязательно используются числа. Могут быть и буквы: список начнется с буквы A, затем будут идти B, C, D и так далее.

Вот пример упорядоченного списка с именами студентов и их оценками:

Кроме упорядоченных списков в HTML есть и неупорядоченные. Пример — список задач. В представленном ниже TODO-списке мы видим, что я настолько увлечен программированием, что пожертвовал ради него завтраком.

Есть еще один вид списков — список определений (description list). Его мы рассмотрим чуть позже, а сейчас давайте разберем, как создавать каждый вид списков.

Как создать упорядоченный список

(от ordered list — упорядоченный список).

и закрывающим
нам нужно определить элементы списка. Это делается при помощи тега
.

Вот полная HTML-структура упорядоченного списка:



Итак, у нас есть список пронумерованных элементов. Нумерация начинается с 1, а далее инкрементируется до 2 и 3. Откройте этот CodePen и попробуйте поиграть с использованием ol-li .

See the Pen Ordered List by Tapas Adhikary (@atapas) on CodePen.

Виды упорядоченных списков в HTML

атрибут type с нужным значением.

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



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



Можно использовать римские цифры. Для этого задайте значение I для атрибута type .



Попробуйте назначать свои значения для type в этом CodePen:

See the Pen Ordered List Types by Tapas Adhikary (@atapas) on CodePen.

Использование атрибута start в упорядоченных списках

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

Допустим, мы хотим начать список не с 1, а с 30. Для этого нужно прописать значение 30 для атрибута start :



Как создать неупорядоченный список

(от unordered list — неупорядоченный список).

Элементы списка при этом будут иметь маркировку по умолчанию — черные точки.

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



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

Как сделать элементы списка ссылками

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



Попробуйте сделать это самостоятельно:

Виды неупорядоченных списков

Как уже упоминалось, маркировку списков можно настраивать. Это делается при помощи CSS-свойства list-style .

Для свойства list-style есть четыре основных значения:

• none — перед элементами не будет вообще никаких значков
• circle — значки будут в виде незаполненных кружков
• disc — дефолтное значение, значки в виде черных точек
• square — значки-квадратики

Попробуйте поменять виды маркировки:

А вы знали, что существуют еще и списки определений?

В HTML есть еще один вид списков, но он используется не так уж часто. Это список определений. Определение — это небольшой текст о чем-либо (поясняющий что-либо).

В списке определений у нас будут определяемые термины и их определения.

Сам список создается при помощи тега .

Внутри списка указываются термины (при помощи тегов ) и определения (при помощи тегов ). Каждое определение идет сразу за термином, который оно поясняет.

Давайте рассмотрим это на примере.

Допустим, мы хотим дать некоторую информацию о кодинге, сплетнях (англ. gossip — сплетни, сплетничать) и сне.

Для начала мы ставим тег . Затем прописываем попарно теги и для кодинга, сплетен и сна соответственно.

 
Coding
 
An activity to keep you happy, even in sleep.
 
Gossiping
 
Can't live without it.
 
Sleeping
 
My all time favorite.
 



See the Pen Description List by Tapas Adhikary (@atapas) on CodePen.

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

Но если вы учитываете семантику HTML, не стоит забывать о списках определений.

Как создать хедер страницы при помощи элементов списка

Давайте теперь рассмотрим практический пример использования списков на веб-странице. Мой любимый — применение элементов списка в хедере.

Давайте создадим очень простой хедер с лого и тремя ссылками: Home, Products и About Us. наша HTML-структура будет выглядеть так:

Здесь мы взяли неупорядоченный список с тремя элементами для ссылок на страницы Home, Products и About Us. Вы также видите span -элемент с текстом Logo, который обозначает лого. Здесь позже можно будет использовать подходящую картинку.

На данный момент наш хедер выглядит так:



Но это не то, что нам нужно. Поэтому мы добавим несколько CSS-правил и свойств, чтобы наш список начал больше походить на хедер страницы.

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



Опять же, вы можете попробовать что-то поменять в этом коде и посмотреть, что будет.

Надеюсь, статья будет полезной для вас и поможет лучше разобраться в HTML-списках.

Источник

Списки

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

В 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. Вид списка описаний

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

Источник