Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Редактор Поддержка Обновить

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <ol>



Пример

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

<ol>
 <li>Кофе</li>
 <li>Чай</li>
 <li>Молоко</li>
</ol>

<ol start="50">
 <li>Кофе</li>
 <li>Чай</li>
 <li>Молоко</li>
</ol>
Попробуйте сами »


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

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

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

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

Совет: Для неупорядоченного списка используйте тег <ul>


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

Элемент
<ol> Да Да Да Да Да

Атрибуты <ol>

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

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

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


События атрибутов <ol>

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


Еще примеры <ol>

Пример

Установите различные типы списков (с помощью 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>
Попробуйте сами »
Пример

Отображение всех различных типов списков, доступных с помощью 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>
Попробуйте сами »
Пример

Уменьшение и расширение высоты строки в списках (с помощью 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>
Попробуйте сами »
Пример

Вложите неупорядоченный список в упорядоченный список:

<ol>
  <li>Кофе</li>
  <li>Чай
    <ul>
      <li>Black tea</li>
      <li>Зеленый чай</li>
    </ul>
  </li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Связные страницы <ol>

HTML учебник: HTML Списки

HTML DOM справочник: Объект ol

CSS Учебник: Стили списка


Настройки CSS по умолчанию <ol>

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

Пример
ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
Попробуйте сами »