Html ol тег: Тег | htmlbook.ru — Программирование на Python и Objective-C в Mac OS

Содержание

Атрибут type | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Устанавливает вид маркера.

Синтаксис

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

Значения

Нумерованные списки представляют собой набор элементов с их порядковыми номерами.
Вид и тип нумерации зависит от атрибутов тега <ol>,
который и используется для создания списка. В качестве маркеров могут быть следующие
значения:

заглавные латинские буквы;
строчные латинские буквы;
заглавные римские цифры;
строчные римские цифры;
арабские цифры.

В табл. 1 приведены различные значения атрибута type тега <ol> и результат их применения.

Табл 1. Параметры нумерованного списка
Код	Пример
<ol type=»A»> … </ol>	Чебурашка Крокодил Гена Шапокляк
<ol type=»a»> … </ol>	Чебурашка Крокодил Гена Шапокляк
<ol type=»I»> … </ol>	Чебурашка Крокодил Гена Шапокляк
<ol type=»i»> … </ol>	Чебурашка Крокодил Гена Шапокляк
<ol type=»1″> … </ol>	Чебурашка Крокодил Гена Шапокляк

Значение по умолчанию

Аналог CSS

list-style-type

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег OL, атрибут type</title>
 </head>
 <body>

  <ol type="a">
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ol>

 </body>
</html>

Тег — упорядоченный список

Поддержка браузерами

Описание

Нумерованный (упорядоченный) список — это HTML список, в котором порядок элементов имеет существенное значение. Примером может служить инструкция по установке веб-сервера, рецепты, оглавления книг и т.д., всё это относится к упорядоченным спискам.

Для создания нумерованного списка в HTML используется тег <ol> (ol сокращение от англ. ordered list — упорядоченный список), который информирует браузер, что все его содержимое, вплоть до закрывающего тега </ol>, представляет собой нумерованный список. Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Элементы для нумерованных списков определяются с помощью тега <li>, каждый такой элемент, помимо текстового содержимого, может включать в себя практически любые HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Атрибуты

reversed:

Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута:


<ol reversed>
<ol reversed="reversed">
<ol reversed="">

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

start:

Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке.
Пример »

type:

Определяет вид маркера, который будет использоваться для элементов списка:

1 — десятичные числа (1, 2, 3, 4 …).

A — латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D …).

a — латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d …).

I — римские цифры в верхнем регистре (I, II, III, IV …).

i — римские цифры в нижнем регистре (i, ii, iii, iv …).

Пример »

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

Стиль по умолчанию

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

Пример


<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

Результат данного примера в окне браузера:

: The Ordered List element — HTML

HTML-элемент <ol> используется для упорядоченного списка — в частности для пронумерованного списка.

Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте https://github.com/mdn/interactive-examples и отправьте нам pull request.

Категории контента	Основной поток, и если дочерний элемент `<ol>` включает в себя хотя бы один элемент `<li>`, явный контент.
Разрешённое содержимое	Ноль или больше `<li>` элементов, которые, в свою очередь, содержат вложенные элементы `<ol>` или `<ul>`.
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители	Любой элемент, который принимает основной поток.
Разрешённые ARIA-роли	`directory`, `group`, `listbox`, `menu`, `menubar`, `radiogroup`, `tablist`, `toolbar`, `tree`, `presentation`
DOM-интерфейс	`HTMLOListElement` (en-US)

Этот элемент включает глобальные атрибуты.

reversed

Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.

start

Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация type в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», используйте start="4".

type

Задаёт тип нумерации:

a для строчных букв
A для заглавных букв
i для строчной Римской нумерации
I для заглавной Римской нумерации
1 для цифр (по умолчанию)

указанный тип используется для всего списка, если только не указан любой другой атрибут type в элементе <li>.

Note: Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS list-style-type (en-US).

Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.

Элементы <ol> и <ul> могут быть вложены (nested) на любом уровне, чередуясь между элементами <ol> и <ul>.

Оба элемента <ol> и <ul> используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение, как в данных примерах:

Инструкции рецепта
Направление по заданному маршруту
Список ингредиентов на информации о питании, в убывающих пропорциях.

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

Обычный список

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Результат HTML кода выше:

Список с Римскими числами

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>

Результат HTML кода выше:

Используя свойство

start

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Результат HTML кода выше:

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

<ol>
  <li>first item</li>
  <li>second item  
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            
  <li>third item</li>
</ol>

Результат HTML кода выше:

Неупорядоченный список внутри упорядоченного списка

<ol>
  <li>first item</li>
  <li>second item  
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            
  <li>third item</li>
</ol>

Результат HTML кода выше:

BCD tables only load in the browser

Другие элементы HTML списка: <ul>, <li>, <menu>
CSS-свойства, которые могут быть полезны для стилизации <ol> элемента:
- свойство list-style (en-US), для порядковых показов
- CSS счётчики, для более сложных вложенных списков
- свойство line-height, для замены убранного свойства compact
- Свойство margin, для контроля отступа в списке

Тег | HTML справочник

HTML теги

Значение и применение

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).

Поддержка браузерами

Атрибуты

Атрибут	Значение	Описание
compact	compact	Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height: 80%). Используйте CSS вместо данного атрибута.
reversed	reversed	Указывает, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
start	number	Определяет начальное значение нумерованного (упорядоченного) списка. Значения должны быть целочисленными, допускается использование отрицательных значений. При использовании с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…).
type	1(по умолчанию) A(большие) a(строчные) I(римские большие) i(римские маленькие)	Определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <ol> </title>
	</head>
	<body>
		<ol> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.

Например:

<ol start = "101">  <!--список начнётся с номера 101-->

Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).

Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута type HTML тега <оl></title>
</head>
<body>
	<ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
</body>
</html>

Виды нумерованных списков.

Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):

<!DOCTYPE html>
<html>
<head>
<title>Пример нумерованного списка, вложенного в другой нумерованный список</title>
</head>
<body>
	<ol> 
		<li>Первый пункт
			<ol>  <!--открываем новый нумерованный список внутри элемента списка--> 
				<li>Первый пункт</li&gt
				<li>Второй пункт</li>
				<li>Третий пункт</li>
			</оl>
		</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
</body>
</html>

Выглядеть на странице это будет соответственно так:

Первый пункт.
1. Первый пункт.
2. Второй пункт.
3. Третий пункт.
Второй пункт.
Третий пункт.

Отличия HTML 4.01 от HTML 5

В HTML5 добавлен новый атрибут reversed, атрибут compact больше не поддерживается в HTML5 .

Значение CSS по умолчанию

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

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

Тег HTML нумерованный список

Тег <ol> в HTML определяет нумерованный список.

Список, созданный с помощью тега <ol> может иметь числовую или буквенную нумерацию. По умолчанию используется нумерация арабскими цифрами (1, 2, 3…). Тип нумерации можно изменить с помощью атрибута type.

Элемент списка определяется тегом <li>.

Помимо нумерованного списка в HTML можно создать маркированный список. Для этого следует использовать тег <ul>.

Расширенный набор типов нумерации доступен при использовании CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.

Синтаксис

<ol>элементы_списка_li</ol>

Отображение в браузере

Создание дизайна

Верстка

Интеграция

Продвижение

Пример использования <ol> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Нумерованный список ol в HTML</title>
</head>
<body>
<ol>
<li>Создание дизайна</li>
<li>Верстка</li>
<li>Интеграция</li>
<li>Продвижение</li>
</ol>
</body>
</html>

Поддержка браузерами

Атрибуты тега <ol>

Атрибут	Значение	Описание
reversed	reversed пусто	Логический атрибут. Указывает на использовании обратной нумерации (9, 8, 7, 6, 5…).
start	число	Устанавливает стартовый номер для нумерации.
type	1 A a I i	Тип нумерации списка: 1 — арабские цифры (1, 2, 3, 4, 5…). A — английский алфавит. Заглавные (прописные) буквы (A, B, C, D, E…). a — английский алфавит. Строчные буквы (a, b, c, d, e…). I — Римские цифры. Заглавные (прописные) символы (I, II, III, IV, V…). i — Римские цифры. Строчные символы (i, ii, iii, iv, v…).

Атрибут

Значение

Описание

reversed

reversed
пусто

Логический атрибут. Указывает на использовании обратной нумерации (9, 8, 7, 6, 5…).

start

число

Устанавливает стартовый номер для нумерации.

type

1
A
a
I
i

Тип нумерации списка:

1 — арабские цифры (1, 2, 3, 4, 5…).
A — английский алфавит. Заглавные (прописные) буквы (A, B, C, D, E…).
a — английский алфавит. Строчные буквы (a, b, c, d, e…).
I — Римские цифры. Заглавные (прописные) символы (I, II, III, IV, V…).
i — Римские цифры. Строчные символы (i, ii, iii, iv, v…).

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

Устаревшие атрибуты

Атрибут	Значение	Описание
compact	compact пусто	Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта. В HTML5 используйте CSS.

Атрибут

Значение

Описание

compact

compact
пусто

Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта. В HTML5 используйте CSS.

Тег ol

Пример

2 различных упорядоченных списков:

Coffee

Tea

Milk

<ol start=»50″>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>
</ol>

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

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

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

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

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

Советы и примечания

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

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

Различия между HTML 4,01 и HTML5

Атрибуты «start» и»type» были Устаревшие
в HTML 4,01, но поддерживаются в HTML5.

«reversed» атрибут является новым в HTML5.

Атрибут «compact» не поддерживается в HTML5.

Атрибуты

= Новый в HTML5.

Атрибут	Значение	Описание
compact	compact	Не поддерживается в HTML5. Указывает, что список должен отображать меньше, чем обычный
reversed	reversed	Указывает, что порядок списков должен быть по убыванию (9,8,7…)
start	number	Задает начальное значение упорядоченного списка
type	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;
}

HTML тег ol

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

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

Для настройки стилей списка используйте CSS.

Разница между HTML 4.01 и HTML5

Атрибуты start и type были запрещены в HTML 4.01, но поддерживаются в HTML5.

Атрибут reversed был добавлен в HTML5.

Атрибуты compact не поддерживаются в HTML5.

Атрибуты тега <ol>

Атрибут	Описание
compact	Включает отображение компактного упорядоченного списка
reversed	Устанавливает обратную нумерацию упорядоченного списка
start	Определяет стартовое значение первого элемента упорядоченного списка
type	Определяет вид маркера для упорядоченного HTML списка

Общие атрибуты

Тег <ol> поддерживает общие атрибуты и атрибуты-события.

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

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


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

HTML пример использования

Два разных упорядоченных HTML списков:


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

<ol start="50">
   <li>Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
</ol>

HTML тег ol

Пример

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

Кофе

Чай

Молоко

Кофе

Чай

Молоко

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

Тег

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

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

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

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

Элемент
	Есть	Есть	Есть	Есть	Есть

Атрибуты

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

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

Тег

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

Тег

Другие примеры

Пример

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

Кофе
Чай
Молоко

Кофе

Чай

Молоко

Попробуй сам »

Пример

Отображение всех различных типов списков, доступных с помощью CSS:

Попробуй сам »

Пример

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

Кофе
Чай
Молоко

<ол >

Кофе

Чай

Молоко

Попробуй сам »

Пример

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

Кофе

Чай
- Черный чай
- Зеленый чай

Молоко

Попробуй сам »

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

Учебное пособие по HTML: списки HTML

Ссылка на HTML DOM: Ol Object

Учебное пособие по CSS: списки стилей

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

Большинство браузеров будут отображать элемент

Пример

ol {
дисплей: блок;
список-стиль-тип: десятичный;
margin-top: 1em;
нижнее поле: 1em;
маржа слева: 0;
поле справа: 0;
padding-left: 40 пикселей;
}

Попробуй сам »

HTML ol type Атрибут

❮ HTML тег

Пример

Упорядоченный список с прописными римскими числами:

Кофе

Чай

Молоко

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

Атрибут типа определяет тип маркера для использования в списке (буквы или цифры).

Совет: Свойство CSS list-style-type предлагает больше типов, чем
атрибут типа (см. пример ниже).

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

Атрибут
тип	Есть	Есть	Есть	Есть	Есть

Синтаксис

Значения атрибутов

Значение	Описание
1	По умолчанию.Десятичные числа (1, 2, 3, 4)
a	Список в алфавитном порядке, строчные буквы (a, b, c, d)
А	Список в алфавитном порядке, прописные (A, B, C, D)
i	Римские цифры в нижнем регистре (i, ii, iii, iv)
I	Римские цифры, прописные (I, II, III, IV)

Другие примеры

Пример

Отображение всех различных типов списков, доступных с помощью CSS:

<стиль>
ол.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style- тип:
десятичный-ведущий-ноль;}
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 -тип:
lower-alpha;}
ol.l {тип-стиля списка: lower-greek;}
ol.м
{list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {список -style-type: upper-latin;}
ol.q {тип-стиля-списка: upper-roman;}
ol.r {тип-стиля-списка: none;}
ol.s {тип-стиля-списка : inherit;}

Попробуй сам »

❮ HTML тег

: элемент упорядоченного списка — HTML: язык разметки гипертекста

HTML-элемент

Категории содержимого

Содержимое потока, и если дочерние элементы элемента

,
ощутимое содержание.

Разрешенное содержание

Ноль или более

Пример вывода

Атрибуты

Помимо глобальных атрибутов, ниже приводится список атрибутов, относящихся к тегу

Атрибут	Описание	Совместимость с HTML
компактный	Логическое значение, указывающее, что список должен отображаться в компактном стиле	Устарело, используйте CSS
обратное	Логическое значение, указывающее, что элементы перечислены в обратном порядке	HTML5
начало	Целочисленное значение, указывающее начальное значение для элементов списка	HTML5
тип	Символьное значение, указывающее стиль нумерации для списка.Это может быть любое из следующих значений: a - означает нижний регистр A - означает верхний регистр i - означает римские цифры в нижнем регистре I - означает римские цифры в верхнем регистре 1 - означает числа	Устарело, используйте CSS

Примечание

HTML-элемент
1. Тег
  1. .
  2. Используйте тег
    1. Вы можете вкладывать списки