Описание тега html-lists
Списки в HTML могут быть упорядочены (обычно нумеруются с помощью <ol> тег) или неупорядоченный (обычно маркированный с использованием <ul> тег) и может содержать любое количество элементов списка (<li>), которые также могут содержать в себе вложенные списки.
Каждый раз, когда вы перечисляете вещи, которые должны следовать в логическом порядке, например инструкции, вы должны использовать упорядоченный список. Каждый раз, когда вы перечисляете вещи, порядок которых не имеет значения, например, список покупок, вы должны использовать неупорядоченный список.
Упорядоченный список
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Выход
- Пункт 1
- Пункт 2
- Пункт 3
Неупорядоченный список
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Выход
- Пункт 1
- Пункт 2
- Пункт 3
Списки вложенности
Вот пример того, как списки должны быть вложены друг в друга:
<ul>
<li>Test</li>
<li>Items
<ul>
<li>Test</li>
</ul>
</li>
<li>Test Test
<ul>
<li>Test</li>
</ul>
</li>
</ul>
Выход
- Контрольная работа
- Предметы
- Контрольная работа
- Тестовый тест
- Контрольная работа
Обратите внимание на то, как вложенный список является частью списка элемента. Другой список не может быть (семантически) открыт непосредственно внутри списка, он должен быть открыт в одном из его элементов списка.
Списки стилей
Есть несколько стилей, которые можно использовать для определения того, как будут отображаться списки. Значения по умолчанию для каждого свойства стиля выделены курсивом.
list-style-position: внутри, снаружи или наследовать.
Определяет, где будут отображаться маркеры или нумерация в списке. Если установлено значение inside, они будут отображаться в начале каждого элемента. Если установлено значение снаружи, они будут отображаться снаружи, где каждое число или маркер выровнены по правому краю и выталкиваются за пределы фактического списка.list-style-image: url, none, inherit
Определяет изображение, которое будет использоваться для маркировки списка, а не стандартный текстовый номер или маркер. Если изображение не может быть загружено, оно вернется к тому типу, который определен для списка.list-style-type
Определяет, какой тип маркировки или нумерации использовать для списка. Значение по умолчанию различается в зависимости от того, упорядочено оно или нет. Все следующие допустимые типы списков, которые вы можете использовать:- армянский
- круг
- cjk-идеографический
- десятичный (по умолчанию для упорядоченных списков)
- десятичный-ведущий-ноль (01, 02, 03 и т. д.)
- диск (по умолчанию для неупорядоченных списков)
- грузинский
- иврит
- хирагана
- хирагана-ироха
- наследовать
- катакана
- катакана-ироха
- нижняя альфа (a, b, c и т. д.)
- нижнегреческий
- нижняя латынь (то же, что нижняя альфа)
- нижний римский (i, ii, iii и т. д.)
- никто
- площадь
- верхняя альфа (A, B, C и т. д.)
- верхний латинский (то же, что верхний альфа)
- верхне-римский (I, II, III и т. д.)
list-style
Позволяет определить все три выше в одной декларации, в следующем порядке: список-стиль-тип, список-стиль-позиции, а затем список-стиль-образ. Вы также можете установить для него наследование или отсутствие, чтобы установить для всех трех свойств наследование или отсутствие.
Списки описаний (списки определений)
<dl> список описаний, <dt> термин (имя) и <dd>Теги значения (описания) могут использоваться для создания списков, которые связывают определенные имена со значениями. Например, в рецепте:
<dl>
<dt>Castor Sugar</dt>
<dd>Finely granulated white sugar.</dd>
<dt>Self-raising flour</dt>
<dd>A pre-mixed combination of flour and leavening agents (usually salt and baking powder).
</dd>
</dl>
Выход
Castor Sugar
Finely granulated white sugar.
Self-raising flour
A pre-mixed combination of flour and leavening agents (usually salt and baking powder).