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

Списки html.

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

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

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

Нумерованный список открывается с помощью тега &ltol&gt и закрывается соответственно тегом &lt/ol&gt. Каждая отдельная позиция (элемент) списка находится внутри тега &ltli&gt. Теперь давайте сами создадим нумерованный список, код будет выглядеть так:

Сохраняем внесенные изменения в Notepad и открываем файл в браузере:

По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега &ltol&gt нужно задать атрибут start и дать ему значение 5.

К примеру, если мы хотим, чтобы наш список нумеровался при помощи маленьких латинских букв, то для тега &ltol&gt нужно задать атрибут type со значением a. На практике это будет выглядеть так:

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

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

Маркированный список открывается с помощью тега &ltul&gt и закрывается соответственно тегом &lt/ul&gt. Каждая отдельная позиция (элемент) списка находится внутри тега &ltli&gt, так же как и в случае с нумерованным списком.

Теперь давайте создадим список используя для маркировки черные квадратики (square).

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

Каждый отдельный элемент списка находиться между тегами &ltli&gt и &lt/li&gt. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один список. Без наглядного примера в этом сложно разобраться, так что все внимание на рисунок:

Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список открывающийся тегом &ltol&gt и закрывающийся тегом &lt/ol&gt. Первый элемент нашего нумерованного списка открывается тегом &ltli&gt, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом &lt/li&gt, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом &lt/li&gt. Затем уже идут следующие элементы нашего основного нумерованного списка.

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

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

Список определений открывается тегом &ltdl&gt и закрывается тегом &lt/dl&gt. Каждый отдельный термин заключается между &ltdt&gt и &lt/dt&gt. Далее пишется определение к термину, оно находится между тегами &ltdd&gt и &lt/dd&gt.

Сейчас мы сделаем список определений состоящий из двух терминов. Код будет следующим:

Сохраняем изменения и смотрим результат в браузере:

Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru

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

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

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

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

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

Атрибут type

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете использовать комбинацию тегов

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

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

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

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

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

Вадим Дворников автор-переводчик статьи « Numbered and Bullet Point Lists in HTML »

HTML Списки

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег имеет следующий синтаксис:

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

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

Пошаговая инструкция

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

Здесь: type – символы списка:

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега .
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Пример: Применение атрибутов type и start.

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

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

Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

Пример: Применение свойства CSS list-style-type

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

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег имеет следующий синтаксис:

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

Пример: Маркированный список

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

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

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

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

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

Как сделать нумерованный список в 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 будет выбранным, то есть стоять в начале выпадающего списка. Его можно оставить пустым.

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

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

Тег	Значение	Перевод
	Unordered list	Неупорядоченный список
	List item	Элемент списка
	Order list	Упорядоченный список
Description list	Список описаний (определений)
Description list term	Термин (списка описаний)
Description list description	Описание термина (списка описаний)
Select	Выбор
Option	Вариант.

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

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

Урок 3. Как сделать список в HTML

Доброго времени суток!

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

Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

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

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

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

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

А вот так выглядит в браузере:

1.1 Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

1.2 Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

Сразу смотрим как этот код будет выглядеть в браузере:

1.3 Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

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

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — валидация сайта.

Ошибка будет следующая:

Из пояснения становится понятно, что этот атрибут является устаревшим и нужно использовать CSS вместо этого атрибута, чтобы задать вид маркера у списка. Как это сделать читайте в этом уроке по CSS — Урок 8. Оформление списков.

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

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

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

Таким образом выглядит нумерованный список со стандартными настройками в браузере:

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1 Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

2.2 Своя нумерация в списке HTML

Вот как это будет отображаться на реальном сайте:

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

Важное замечание: в нумерованном списке валидатор не выдаст ошибку, здесь можно использовать данные атрибуты, но также можно задать нумерацию и с помощью CSS. Подробнее об этом здесь — Урок 8. Оформление списков.

Ну а сейчас перейдем к вложенным спискам HTML.

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

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

Обратите внимание, как выглядит многоуровневый список в браузере:

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

). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

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

Смотрим его вид в браузере:

4. Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

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

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

4.2 Как сделать список HTML без значка

За это отвечает свойство list-style-type в CSS (подробнее здесь):

4.3 Как сделать список в HTML по центру

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

4.4 Как сделать список в HTML с картинками

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

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6 Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

5. Комбинированный список HTML

Чтобы сделать комбинированный список в HTML лучше всего использовать иконочные шрифты. Например, Flaticon или Fontawesome.

Эта информация уже для продвинутых, поэтому для начала необходимо будет изучить уроки по CSS.

6. Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

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

На этом со списками заканчиваем и переходите к следующему уроку по изображениям.

Если вам нужно больше, чем просто основы сайтостроения, а хотите освоить профессию Front-end разработчика, то обратите внимание на курс от онлайн-школу Нетология — «Front-end разработчик с нуля» и онлайн-школу Skillbox и курс «Front-end разработчик«.

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

Полное руководство по спискам в 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: элементы списка и их номера имеют разные цвета.

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

Списки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

В повседневной жизни мы часто записываем информацию в виде списков :

На сайтах тоже часто часть информации оформляется в виде списков. Итак, учимся делать списки в HTML!

Всего выделяют 4 вида списков:

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

Как сделать ненумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег

.

Давайте посмотрим, как это работает на примере:

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

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

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

Так как же сделать нумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег

.

Пример упорядоченного (нумерованного) списка ниже:

По умолчанию элементы нумерованного списка помечаются арабскими цифрами (1, 2, 3, 4, 5 и т.д.). С помощью атрибута type можно это поменять:

Давайте к примеру пронумеруем наш список дел римскими цифрами

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

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

Список определений, (англ Description List, тег ) включает в себя элементы, которые

Например:

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

Иногда в элемент списка нужно включить еще один список. HTML позволяет «вкладывать» один список в другой, при этом вложенные списки отображаются с большим отступом по сравнению с родительским списком. К тому же, для неупорядоченных (ненумерованных) списков, браузер обычно изменяет вид маркеров вложенного списка.

Вот как это выглядит:

Списки можно комбинировать между собой, например:

Смотрим как это выглядит в HTML:

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

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

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

В дополнение к трём разным типам списков доступных в HTML есть несколько путей для стилизации этих списков через CSS. Например, мы можем выбрать, какой тип маркера указать для списка. Маркер может быть квадратным, круглым, числом, буквой или, возможно, отсутствовать. Кроме того, мы можем решить, как должен отображаться список — по вертикали или горизонтали. Все эти варианты играют важную роль при стилизации наших веб-страниц.

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

Демонстрация маркированного списка

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

Нумерованный или упорядоченный список элементов

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

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

Демонстрация нумерованного списка

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

Атрибут start

Атрибут start определяет номер, с которого должен начинаться нумерованный список. По умолчанию списки начинаются с 1, однако могут возникнуть ситуации, когда список должен начинаться с 30 или с другого числа. Когда мы используем атрибут start для элемента

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

Атрибут start принимает только целые значения, хотя в нумерованных списках могут применяться разные системы нумерации, например, римские числа.

Демонстрация атрибута start

Атрибут reversed

Атрибут reversed при добавлении к элементу

позволяет списку отображаться в обратном порядке. Список из пяти пунктов пронумерованных от 1 до 5 может быть задан обратно и нумероваться от 5 до 1.

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

.

Демонстрация атрибута reversed

Атрибут value

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

Демонстрация атрибута value

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

Другой тип списка который вы видели в Интернете (но не так часто, как маркированные или нумерованные списки) — это список описаний. Такие списки применяются для обозначения нескольких терминов и их описаний, как в глоссарии, к примеру.

Список описания может содержать множество терминов и описаний, один за другим. Кроме того, такой список может содержать несколько терминов на одно описание, а также несколько описаний на термин. Один термин может иметь несколько значений и допускать несколько описаний. И наоборот, одно описание может подходить к нескольким терминам.

Демонстрация списка описания

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

Особенность, которая делает списки очень мощными — это возможность вложения. Каждый список может быть помещён в другой список и они могут быть вложены неоднократно. Но возможность вкладывать списки бесконечно не даёт свободу делать это. Списки должны быть зарезервированы специально там, где они сохраняют наиболее семантическое значение.

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

Демонстрация вложенных списков

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

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

Стилизация пунктов списка

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

Свойство list-style-type

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

Демонстрация свойства list-style-type

Значения list-style-type

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

Значение list-style-type	Содержимое
none	Нет пунктов списка
disc	Однотонный кружок
circle	Пустая окружность
square	Однотонный квадрат
decimal	Десятичные числа
decimal-leading-zero	Десятичные числа начинающиеся с нуля
lower-roman	Строчные римские числа
upper-roman	Заглавные римские числа
lower-greek	Строчные греческие числа
lower-alpha / lower-latin	Строчные латинские буквы
upper-alpha / upper-latin	Заглавные латинские буквы
armenian	Традиционная армянская нумерация
georgian	Традиционная грузинская нумерация

Использование изображения в качестве маркера списка

Подробнее — значение none свойства list-style-type удалит существующие маркеры списка. Свойство background задаст фоновое изображение вместе с его положением и повтором, если необходимо. А свойство padding обеспечит пространство слева от текста для фоновой картинки.

Демонстрация изображения в качестве маркера

Свойство list-style-position

Демонстрация свойства list-style-position

Универсальное свойство list-style

Горизонтальное отображение списка

Отображение списка

Демонстрация списка с inline-block

Списки с float

Демонстрация списка с float

Как и с любыми обтекаемыми элементами это нарушает поток страницы. Мы не должны забывать очищать float и возвращать страницу в обычный поток — наиболее распространённым методом через clearfix.

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

Демонстрация навигационного списка

На практике

Теперь, когда мы знаем, как создавать списки в HTML и CSS, давайте оглянемся на наш сайт Styles Conference и посмотрим, где мы могли бы использовать списки.

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

Помня об этом, разметка для навигационного меню внутри нашего элемента будет выглядеть так:

В том же духе, разметка для навигационного меню внутри нашего элемента будет выглядеть так:

Не забывайте внести эти изменения во все наши HTML-файлы.

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

В наш файл main.css, ниже стилей навигации добавим следующий CSS:

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

Пока наш HTML ниже раздела со вступлением выглядит следующим образом:

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

Кроме того, закрывающий тег элемента

Внутри колонки 2/3 размеченный элементом

Учитывая это содержимое, раздел спикера будет выглядеть следующим образом:

В колонку 1/3 размеченной элементом мы собираемся добавить элемент

Прежде чем перейти к каким-либо стилям, давайте добавим неупорядоченный список в элемент

Теперь наш HTML для спикера будет выглядеть следующим образом:

Наконец, выровняем по центру весь текст внутри элемента.

В целом, наш CSS для класса speaker-info выглядит следующим образом:

Остановимся на минутку и разберём, почему мы используем здесь элемент

Мы размещаем элемент

Наше меню навигации в настоящее время завершено и страница Спикеры начала принимать свою форму.

Рис. 8.01. Наша страница Спикеры после обновления навигационных меню и добавления колонки

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Списки довольно часто применяются в HTML, нередко в местах, которые не явны или очевидны. Главное, насколько это возможно, использовать их семантически и там, где они подходят лучше всего.

Подводя итоги, в этом уроке мы рассмотрели следующее:

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

Списки HTML

Какие бывают списки

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

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

Наиболее часто используемые значения свойства list-style-type :

Внимание!

Маркеры нумерованных списков выравниваются по правому краю! Поэтому, при достаточно больших числах (например 1802 или XXVII) маркер смещается влево и может выйти за пределы родительского блока!

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

Заключаются между тегами

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

Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type :

Интересная особенность

Точно так-же значение none можно присвоить свойству list-style-type: none тега ol

Более того! Нумерованный и маркированный списки отличаются только значением этого свойства!

ul = ol Результат будет идентичным!

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

Термин Описание. Термин Описание.

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

Вложенный список размещают в выбранном теге li родительского списка (после текста).

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

Внимание!

Вложенные списки наследуют свойства родительских, поэтому, в некоторых случаях, имеет смысл прописать для них свойства отдельно

Размеры и отступы списков

Для наглядности зададим для тегов ul и li рамки и цвет фона разного цвета.

Пояснения:

Левый внешний отступ отодвигает список от края содержащего родительского контейнера и обычно устанавливается 20-40px.
Внутренний отступ не устанавливается.

Для тега li отступы, обычно, не устанавливаются.
Высота строки простых списков часто задается line-height

Выравнивание списков

Список по центру

Автоматически центрировать список вне зависимости от длины строк достаточно просто

Горизонтальный список

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

Вариант 1. Сделать элементы списка строчными

Получаем список такого вида:

Вариант 2. Сделать элементы списка плавающими

Получаем такой же список:

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

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок.

Когда-то изначально свойство float именно для этого и было придумано!

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

HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

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

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Информация на сайте должна быть представлена в удобном и читабельном виде, для того чтобы информация была доступной ее нужно систематизировать. Для систематизации в HTML есть таблицы (про HTML таблицы мы поговорим несколько позже) и есть списки. В этой записи мы как раз-таки и поговорим про списки в HTML.

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

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

Для чего нужны списки в HTML

Мы уже разобрались с тем, как делить документ на разделы при помощи HTML заголовков и как разбивать сплошной текст в HTML на параграфы и абзацы, теперь поговорим про упорядочивание информации при помощи списков. HTML списки мы используем очень часто в документах. Например, мы можем создавать меню на сайте при помощи списков и ссылок. Первое простое меню мы создадим, когда поговорим про ссылки в HTML. Изначально списки были введены для того, чтобы упорядочить информацию в HTML документе.

Списки делают информацию более наглядной и удобной для восприятия. Например, вы составляете список покупок, берете лист бумаги и пишите:

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

Так же и в HTML: списки используются для того, чтобы сделать информацию удобной к восприятию и более читабельной, это первое и главное назначение списков в HTML. Второе применение спискам нашли верстальщики, которые используя списки и оформляя их при помощи CSS, создают самые разнообразные и интересные меню на сайте.

Отметим, что для дополнительного акцентирования на элементах списка можно использовать HTML тэги непосредственного форматирования текста и тэги логического форматирования, которые позволяют показать важность слов в HTML документе.

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

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

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

Маркированный HTML список. HTML атрибуты маркированных списков

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

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

Мы можем менять вид маркера при помощи специального HTML атрибута type. Маркер списка может быть отображен тремя разными способами: в виде диска, в виде окружности и в виде квадрата. Соответственно:

Значение по умолчанию для любого маркированного HTML списка в любом браузере: type=”disc”. CSS так же позволяет изменять вид маркера при помощи свойства list-style-type.

Давайте попрактикуемся в создании маркированных HTML списков, откройте любой редактор (можно даже Блокнот, но я бы рекомендовал вам попробовать бесплатный редактор с подсветкой синтаксиса Notepad++) и напишите следующий код:

Источники информации:
• http://www.internet-technologies.ru/articles/numerovannye-i-markirovannye-spiski-v-html.html
• http://wm-school.ru/html/html_lists.html
• http://abuzov.com/spiski-html/
• http://sitehere.ru/urok-3-spiski
• http://techrocks.ru/2019/06/17/lists-in-html-and-css/
• http://vertex-academy.com/tutorials/ru/spiski-v-html/
• http://webref.ru/layout/learn-html-css/creating-lists
• http://www.wantweb.ru/html-css/lists
• http://zametkinapolyah.ru/verstka-sajtov/html-spiski-i-vidy-spiskov-v-html-markirovannyj-html-spisok-numerovannyj-html-spisok-mnogourovnevye-spiski-v-html.html