Поиск…


Вступление

HTML предлагает три способа указания списков: упорядоченные списки, неупорядоченные списки и списки описания. В упорядоченных списках используются порядковые последовательности, указывающие порядок элементов списка, неупорядоченные списки используют определенный символ, такой как пуля, чтобы перечислять элементы в не обозначенном порядке, а в списках описания используются отступы для перечисления элементов со своими дочерними элементами. В этом разделе объясняется реализация и комбинация этих списков в разметке 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>

замечания

Смотрите также

Вы можете добавить свойство CSS типа стиля в <ul> , чтобы изменить, какой значок используется для отметки каждого элемента списка, например <ul style="list-style-type:disc"> . Разрешены следующие типы списка:

  • «list-style-type: disc» - это точка по умолчанию.
  • «list-style-type: circle» - это незаполненный круг.
  • «list-style-type: square» - это заполненный квадрат.
  • «Тип списка-типа: нет» не использует никакой отметки.

Вы также можете добавить атрибут типа в <ol> , чтобы изменить способ нумерации, например <ol type="1"> . Разрешены следующие типы:

  • Тип = "1" является формой по умолчанию.
  • type = "A" использует заглавные буквы в алфавитном порядке
  • type = "a" использует строчные буквы в алфавитном порядке
  • type = "I" использует римские цифры с прописными буквами
  • type = "i" использует римские цифры с строчными буквами

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

Неупорядоченный список может быть создан с помощью <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>

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

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

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

<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 принимают только число - даже если упорядоченный список настроен на отображение в виде римских цифр или букв.

5

Вы можете полностью изменить нумерацию путем добавления reversed в вашем ol элементе:

<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">
Тип Описание Примеры
1 Значение по умолчанию - десятичные числа 1,2,3,4
a В алфавитном порядке (в нижнем регистре) а, б, в, г
A В алфавитном порядке (в верхнем регистре) А, В, С, D
i Римские цифры (строчные буквы) I, II, III, IV
I Римские цифры (в верхнем регистре) I, II, III, IV

Вы должны использовать 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>


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow