Нумерованные списки html
Такой список представляет собой перечень «пронумерованный» каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для нумерованного списка: Результат: Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:
— type=»A» — нумерация заглавными латинскими буквами (A, B, C).
— type=»a» — нумерация прописными латинскими буквами (a, b, c).
— type=»I» — нумерация большими римскими цифрами (I, II, III) .
— type=»i» — нумерация маленькими римскими цифрами (i, ii, iii).
Пример кода с римскими цифрами: Результат: Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).
Пример кода: Результат: У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.
Пример кода: Результат:
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для маркированного списка: Результат: По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:
— type=»disc» — закрашенный кружочек.
— type=»circle» — пустой кружочек.
— type=»square» — закрашенный квадратик.
Пример кода для маркированных списков: Результат:
Списки определений
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения — в теги <dd></dd>.
Пример кода списка определений: Результат:
Вложенные списки
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков.
Пример кода многоуровневого списка: Результат: Уровень вложенности может быть любым, главное не запутайтесь. На этом седьмой урок закончен. В следующем уроке мы рассмотрим работу с изображениями.
www.site-do.ru
Поддержка браузерами
Описание
Маркированный (неупорядоченный) список представляет собой множество элементов, между которыми нет порядка следования. Самые распространенные неупорядоченные списки в интернете — списки гиперссылок на другие документы (например: меню, представляющее собой ненумерованный список HTML).
Для создания маркированного списка в HTML используется тег <ul>
(unordered list), который сообщает браузеру, что всё, следующее за ним, вплоть до закрывающего тега
</ul>, представляет собой маркированный список. Каждый элемент маркированного списка определяется тегом <li>. Кроме этого, в элементы списка можно вставить практически любое содержимое, включая другие списки, изображения, текст и т.д.
HTML тег <ul> является блочным элементом, при отображении он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого. По умолчанию браузер предваряет каждый элемент списка специальным маркером и располагает каждый элемент с новой строки, применяя к нему небольшой отступ от левого края.
Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.
Для создания нумерованных (упорядоченных) списков используйте тег <ol>.
Атрибуты
Тег <ul> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }
Пример
<ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul>
Результат данного примера в окне браузера:
puzzleweb.ru
Маркированные HTML списки — теги ul и li
Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным.
<ul> <li>1 элемент маркированного списка</li> <li>2 элемент маркированного списка</li> <li>3 элемент маркированного списка</li> </ul> |
|
По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:
<ul> <li type="disc">1 элемент маркированного списка</li> <li type="disc">2 элемент маркированного списка</li> <li type="disc">3 элемент маркированного списка</li> </ul> |
|
<ul> <li type="circle">1 элемент маркированного списка</li> <li type="circle">2 элемент маркированного списка</li> <li type="circle">3 элемент маркированного списка</li> </ul> |
|
<ul> <li type="square">1 элемент маркированного списка</li> <li type="square">2 элемент маркированного списка</li> <li type="square">3 элемент маркированного списка</li> </ul> |
|
Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type.
<ul> <li type="disc">1 элемент маркированного списка</li> <li type="circle">2 элемент маркированного списка</li> <li type="square">3 элемент маркированного списка</li> </ul> |
|
Нумерованные HTML списки — теги ol и li
Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:
- A — заглавные латинские буквы;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры;
- 1 — арабские цифры
<ol> <li type="A">1 элемент нумерованного списка</li> <li type="A">2 элемент нумерованного списка</li> <li type="A">3 элемент нумерованного списка</li> </ol> |
|
<ol> <li type="a">1 элемент нумерованного списка</li> <li type="a">2 элемент нумерованного списка</li> <li type="a">3 элемент нумерованного списка</li> </ol> |
|
<ol> <li type="I">1 элемент нумерованного списка</li> <li type="I">2 элемент нумерованного списка</li> <li type="I">3 элемент нумерованного списка</li> </ol> |
|
<ol> <li type="i">1 элемент нумерованного списка</li> <li type="i">2 элемент нумерованного списка</li> <li type="i">3 элемент нумерованного списка</li> </ol> |
|
<ol> <li type="1">1 элемент нумерованного списка</li> <li type="1">2 элемент нумерованного списка</li> <li type="1">3 элемент нумерованного списка</li> </ol> |
|
Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.
<ol reversed> <li type="1">1 элемент нумерованного списка</li> <li type="1">2 элемент нумерованного списка</li> <li type="1">3 элемент нумерованного списка</li> </ol> |
|
Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):
<ol start="5"> <li type="1">1 элемент нумерованного списка</li> <li type="1">2 элемент нумерованного списка</li> <li type="1">3 элемент нумерованного списка</li> </ol> |
|
<ol start="4"> <li type="I">1 элемент нумерованного списка</li> <li type="I">2 элемент нумерованного списка</li> <li type="I">3 элемент нумерованного списка</li> </ol> |
|
goldbusinessnet.com
Маркированные списки на основе тэгов UL и LI
Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.
Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.
Давайте посмотрим, например, маркированный вариант, который может выглядеть так:
- Первая строка
- Вторая
- Последний элемент
Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).
Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.
Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):
- <ul type=»disc»> — закрашенный кружок (по умолчанию);
- <ul type=»circle»> — не закрашенный кружок;
- <ul type=»square»> – квадрат
В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.
Пример маркированного списка с различными типами маркера для каждого пункта:
- Маркер в виде закрашенного диска
- Маркер в виде не закрашенного диска
- Квадрат
Нумерованные списки в Html на основе тэга OL
Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.
Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:
- Первая строка
- Второй пункт
- Третья строка
Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:
- <ol type=»1″> — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
- <ol type=»A»> — заглавные буквы в качестве нумерации;
- <ol type=»a»> — строчные буквы;
- <ol type=»I»> — заглавные римские цифры;
- <ol type=»i»> — строчные римские цифры;
Пример нумерованного списка с различными типами нумерации для каждого пункта:
- с нумерацией большими римскими цифрами
- Нумерация маленькими латинскими буквами
- Нумерация малыми римскими цифрами
При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:
- Первый элемент, номер которого задан в теге OL атрибутом start=»23″
- Следующий пункт, с номером на единицу большим
- Еще на единицу больше
Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:
- Первый пункт с номером один
- Этот элемент получит номер, указанный в атрибуте value=»32″
- Пункт с большим номером
Оформление внешнего вида списков в CSS (таблицах стилей)
Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи селекторов класса или Id, для которых прописываются соответствующие свойства.
В правилах CSS, прописанных для этого класса или Id, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое. Подробности смотрите в статье про свойства таблиц стилей List style ( type, image, position).
Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.
<ul classs="vash_class"> <li>Первый пункт</li> <li>Второй</li> <li>Последний</li> </ul>
Но а о тонкостях работы с CSS мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .
ktonanovenkogo.ru
Создание HTML-списков
- Содержание:
- 1. Маркированный список <ul>
- 2. Нумерованный список <ol>
- 3. Список определений <dl>
- 4. Вложенный список
- 5. Многоуровневый нумерованный список
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
Браузеры по умолчанию добавляют следующее форматирование блоку списка:
ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).
Для тега <ul> доступны глобальные атрибуты.
<ul> <li>Microsoft</li> <li>Google</li> <li>Apple</li> <li>IBM</li> </ul>
2. Нумерованный список
Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.
Для тега <ol> доступны следующие атрибуты:
| Атрибут | Описание, принимаемое значение |
|---|---|
| reversed | Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). |
| start | Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">. |
| type | Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv). |
<ol> <li>Microsoft</li> <li>Google</li> <li>Apple</li> <li>IBM</li> </ol>
3. Список определений
Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.
Блок списка определений имеет следующие стили браузера по умолчанию:
dl {margin-top: 1em; margin-bottom: 1em;}
Для тегов <dl>, <dt> и <dd> доступны глобальные атрибуты.
<dl> <dt>Режиссер:</dt> <dd>Петр Точилин</dd> <dt>В ролях:</dt> <dd>Андрей Гайдулян</dd> <dd>Алексей Гаврилов</dd> <dd>Виталий Гогунский</dd> <dd>Мария Кожевникова</dd> </dl>
4. Вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
<ul> <li>Пункт 1.</li> <li>Пункт 2. <ul> <li>Подпункт 2.1.</li> <li>Подпункт 2.2. <ul> <li>Подпункт 2.2.1.</li> <li>Подпункт 2.2.2.</li> </ul> </li> <li>Подпункт 2.3.</li> </ul> </li> <li>Пункт 3.</li> </ul>
5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
<ol> <li>пункт</li> <!-1.-> <li>пункт <ol> <li>пункт</li> <!-2.1.-> <li>пункт</li> <!-2.2.-> <li>пункт <ol> <li>пункт</li> <!-2.3.1.-> <li>пункт</li> <!-2.3.2.-> <li>пункт</li> <!-2.3.3.-> </ol> </li> <!-2.3.-> <li>пункт</li> <!-2.4.-> </ol> </li> <!-2.-> <li>пункт</li> <!-3.-> <li>пункт</li> <!-4.-> </ol>
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
html5book.ru