Ul with number html

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

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

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

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

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

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

в качестве дочерних элементов может содержать только теги
1. , то есть всё содержимое нумерованного списка должно размещаться внутри элементов
2. . Тег
3. , в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

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

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

Виды маркеров

Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:

Значение	Описание
1	Десятичные числа (1, 2, 3..)
a	Список в алфавитном порядке, строчные буквы (a, b, c..)
A	Список в алфавитном порядке, заглавные буквы (A, B, C..)
i	Римские цифры, строчные (i, ii, iii, iv..)
I	Римские цифры, заглавные (I, II, III, IV..)

Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

Изменение маркеров у списков:

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

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

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

Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

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

Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть здесь.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

Unordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with bullets (small black circles) by default:

Example

Ordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with numbers by default:

Example

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The tag defines the description list, the tag defines the term (name), and the tag describes each term:

Example

HTML List Tags

Tag	Description
	Defines an unordered list
	Defines an ordered list
	Defines a list item
	Defines a description list
	Defines a term in a description list
	Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Списки

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

• – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
• – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
• – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

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

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

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

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

1. Достать ключ
2. Вставить ключ в замок
3. Повернуть ключ на два оборота
4. Достать ключ из замка
5. Открыть дверь

1. Достать ключ
2. Вставить ключ в замок
3. Повернуть ключ на два оборота
4. Достать ключ из замка
5. Открыть дверь

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Ul with number html

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

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

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

• decimal : десятичные числа, отсчет идет от 1
• decimal-leading-zero : десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99
• lower-roman : строчные римские цифры, например, i, ii, iii, iv, v
• upper-roman : заглавные римские цифры, например, I, II, III, IV, V…
• lower-alpha : строчные римские буквы, например, a, b, c. z
• upper-alpha : заглавные римские буквы, например, A, B, C, … Z

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

Для ненумерованного списка атрибут list-style-type может принимать следующие значения:

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image . Он задает изображение, которое будет отображаться рядом с элементом списка:

Стиль list-style-image в качестве значения принимает url(phone_touch.png) , где «phone_touch.png» — это название файла изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей index.html у меня находится файл изображения phone_touch.png.

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

Одним из распространенных способов стилизации списков представляет создание горизонтального списка. Для этого для всех элементов списка надо установить стиль display:inline :

Источник

Читайте также:  Css hiding part of text