Как сделать перечисление в html

Как сделать перечисление в html

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

Виды HTML-списков

Списки бывают следующих видов:

Так же в этом материале я расскажу, как сделать выпадающий список.

Рассмотрим каждый вид подробнее.

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

Маркированный список создается с помощью тега

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

Стиль по умолчанию:

display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Получим следующий результат:

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

Нумерованный список создается при помощи тега

— order list (упорядоченный список). Стандартно список нумеруется арабскими (традиционными) числами.

Стиль по умолчанию:

display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

Тип номера так же, как и в маркированном списке, задается с помощью свойства list-style-type. Возможные значения:

Тег

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

Атрибуты тега

Атрибут	Описание	Возможные значения
reversed	Указывает, что элементы списка расположены в обратном порядке.	Нет.
start	Задает первый порядковый номер списка.	Число.
type	Задает тип номера для использования в списке.	1: Десятичный: 1, 2, 3 и так далее. (По умолчанию) a: строчные буквы латинского алфавита: a, b, c и так далее. A: прописные буквы латинского алфавита: A, B, C и так далее. i: римские цифры в нижнем регистре: i, ii, iii и так далее. I: римские цифры в верхнем регистре: I, II, III и так далее.

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

Стиль по умолчанию (тега ):

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;

Вложенный список

Аналогично можно вкладывать списки уже во вложенные элементы.

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

Многоуровневым считают нумерованный список. Его отличие от вложенного списка в том, что бы нумерация шла по порядку.

Результат.

Выпадающий список

Как сделать выпадающий список в HTML? Довольно просто, с помощью тега

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

Расшифровка и перевод используемых тегов

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

На этом изучение списков HTML заканчивается.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник

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

Списки встречаются везде. Они используются для:

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

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

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

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

Атрибут type

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

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

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

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

Если вы хотите упорядочить элементы списка, тогда тег

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

что на выходе дает нам:

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

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

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

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

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

Что дает нам следующее:
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- заключение

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

Источник

Создание списков в 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.

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

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

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

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

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

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

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

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

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

Источник

1.8. HTML-списки

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

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

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

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

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью элемента

. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

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

Блок списка также имеет стили браузера по умолчанию:

Для элемента

доступны следующие атрибуты:

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

Блок списка определений имеет следующие стили браузера по умолчанию:

Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

4. Как создать вложенный список

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

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

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

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

Источник

Полное руководство по спискам в HTML и CSS

Хочешь знать больше про веб?

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

Перевод статьи «A complete guide about lists in HTML and CSS».

Что такое списки

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

Списки в HTML

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

Виды списков

В HTML списки бывают трех видов:

Что такое упорядоченный список?

Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.

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

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

Для создания упорядоченных списков используется тег (ordered list – «упорядоченный список»), а для каждого из его элементов – тег (list – «список»).

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

По умолчанию пункты списка обозначаются арабскими цифрами.

Это можно изменить, используя разные значения CSS-свойства list-style-type.

list-style-type: upper-alpha

list-style-type: upper-roman

list-style-type: lower-alpha

list-style-type: lower-roman

Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.

Что такое неупорядоченный список?

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

Примеры таких списков – списки покупок, списки запланированных дел.

Для создания упорядоченных списков используется тег (unordered list), а для каждого из его элементов – тег (как и в упорядоченном списке).

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

По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.

list-style-type: circle

list-style-type: square

list-style-type: disc

Дальше мы разберем и другие варианты стилей.

Что такое список определений?

Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них – термин, а второй – его определение.

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Что такое вложенные списки?

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

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Стиль списка

Для придания стилей списку используются три CSS-свойства.

list-style-type

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

Это свойство может принимать несколько значений:

С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

list-style-image

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

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

Поскольку значение этого свойства наследуется, для возвращения значения по умолчанию используется значение none.

list-style-position

Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

Пример применения значения inside

Пример применения значения outside

А теперь давайте поиграем с цветами списка

Расцвеченный маркированный список

Вариант 1: элементы списка и маркеры имеют один цвет.

Вариант 2: элементы списка и маркеры имеют разные цвета.

Расцвеченный нумерованный список

Вариант 1: элементы списка и их номера имеют один цвет.

Вариант 2: элементы списка и их номера имеют разные цвета.

Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

Источник