HTML
Списки

Вступление

Синтаксис

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

замечания

Неупорядоченный список

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

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Это создаст маркированный список (который является стандартом по умолчанию):

• Вещь
• Другой предмет
• Еще один пункт

Вы должны использовать ul для отображения списка элементов, где порядок элементов не важен. Если изменение порядка элементов делает неверный список, вы должны использовать <ol> .

Упорядоченный список

Упорядоченный список может быть создан с помощью <ol> и каждый элемент списка может быть создан с помощью <li> как в приведенном ниже примере:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Это приведет к пронумерованному списку (который является стилем по умолчанию):

1. Вещь
2. Другой предмет
3. Еще один пункт

Ручное изменение номеров

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

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Это приведет к пронумерованному списку (который является стилем по умолчанию):

3. Вещь
4. Некоторые другие предметы
5. Еще один пункт

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

<li value="7"></li>

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

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

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

Примечание. Атрибуты start и value принимают только число - даже если упорядоченный список настроен на отображение в виде римских цифр или букв.

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Изменение типа цифры

Вы можете легко изменить тип цифры, показанной в марке элемента списка, используя атрибут type

<ol type="1|a|A|i|I">

Вы должны использовать ol для отображения списка предметов, где предметы были преднамеренно заказаны, а заказ должен быть выделен. Если изменение порядка элементов НЕ делает неверным список, вы должны использовать <ul> .

Описание Список

Список описаний (или список определений , который был вызван до HTML5), может быть создан с помощью элемента dl . Он состоит из групп имен и значений, где имя указано в элементе dt , а значение задается в элементе dd .

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Демо-версия

Группа с именем-именем может иметь более одного имени и / или более одного значения (представляющего альтернативы):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Демо-версия

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

Вы можете вставлять списки для представления подпунктов элемента списка.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• пункт 1
• пункт 2
  • подпункт 2.1
  • подпункт 2.2
• пункт 3

Вложенный список должен быть дочерним элементом элемента li .

Вы можете также вставлять различные типы списков:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>