вам нужен нумерованный список какой элемент вы используете

Списки 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: Нумерованный и маркированный список

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типы нумерации в HTML списке

Разные типы нумерации в списках:

Многоуровневый список 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

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

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

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

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

Как создать маркированный список — 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- заключение

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

Источник