HTML <ol> тег

  • Предыдущая страница <object>
  • Следующая страница <optgroup>

Определение и использование

<ol> Тег определяет упорядоченный список. Упорядоченный список может быть числовым или алфавитным.

<li> Тег используется для определения каждого элемента списка.

Совет:Используйте CSS для установки стиля списка.

Совет:Для unordered list используйте <ul> тег.

См. также:

Урок HTML:HTML список

Руководство по HTML DOM:Объект Ol

Урок CSS:Установить стиль списка

Пример

Пример 1

Два различных упорядоченных списка (первый список начинается с 1, второй с 50):

<ol>
  <li>кофе</li>
  <li>чай</li>
  <li>молоко</li>
</ol>
<ol start="50">
  <li>кофе</li>
  <li>чай</li>
  <li>молоко</li>
</ol>

Попробуйте сами

Пример 2

Установить различные типы списков (используя CSS):

<ol style="list-style-type:upper-roman">
<li>кофе</li>
<li>чай</li>
<li>молоко</li>
</ol>
<ol style="list-style-type:lower-alpha">
<li>кофе</li>
<li>чай</li>
<li>молоко</li>
</ol>

Попробуйте сами

Пример 3

Показать все доступные различные типы списков с помощью CSS:

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

Попробуйте сами

пример 4

Уменьшение и увеличение высоты строк списка (используя CSS):

<ol style="line-height:80%">
  <li>кофе</li>
  <li>чай</li>
  <li>молоко</li>
</ol>
<ol style="line-height:180%">
  <li>кофе</li>
  <li>чай</li>
  <li>молоко</li>
</ol>

Попробуйте сами

пример 5

Вложение unordered списка в ordered список:

<ol>
  <li>кофе</li>
  <li>чай</li>
    <ul>
      <li>лунь-цзин</li>
      <li>пуэр</li>
    </ul>
  </li>
  <li>молоко</li>
</ol>

Попробуйте сами

атрибут

атрибут значение описание
reversed reversed Определяет, что порядок элементов списка должен быть обратным (9,8,7 ...).
start число Определяет начальное значение упорядоченного списка.
тип
  • 1
  • A
  • a
  • I
  • i
 определяет тип маркера, который следует использовать в списке.

Глобальные атрибуты

<ol> Тег также поддерживает Глобальные атрибуты в HTML.

атрибуты событий

<ol> Тег также поддерживает Атрибуты событий в HTML.

Установки CSS по умолчанию

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <ol> Элемент:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <object>
  • Следующая страница <optgroup>