Содержание

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

Рейтинг: 3 из 5, голосов 8

02 октября 2019 г.

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

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

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

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

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

Синтаксис

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

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

  1. Создание дизайна
  2. Верстка
  3. Интеграция
  4. Продвижение

Пример использования <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> Да Да Да Да Да

Атрибуты тега <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…).

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

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

Атрибут
Значение		 Описание
compact

compact
пусто

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

by Lebedev

Правильная нумерация в смешанных нумерованных и маркированных списках HTML с помощью CSS

В предыдущей статье было рассмотрено решение, как сделать правильную нумерацию во вложенных нумерованных списках HTML с помощью CSS. И это решение работает до тех пор, пока на странице нет маркированных списков. Как только появляется маркированный список, включается вывод счётчика элементов li, и ненумерованные элементы списка также начинают нумероваться. И это ещё не всё: нумерация вложенных маркированных списков влияет на правильность нумерации нумерованных элементов этого списка. Короче, бардак. В этой статье рассмотрим, как привести в порядок нумерацию в смешанных нумерованных и маркированных списках HTML с помощью CSS уточнив, какие именно элементы списков li считать.

Проблема нумерации во вложенных смешанных нумерованных и маркированных списках HTML

Итак, имеем вложенный в нумерованный список маркированный список. Например, такой:

<ol>
	<li>1.</li>
	<li>2.
		<ol>
			<li>2.1
				<ul>
					<li>маркированный 1
						<ul>
							<li>маркированный 2
								<ol>
									<li>2.1.1</li>
									<li>2.1.2</li>
								</ol>
							</li>
						</ul>
					</li>
					<li>маркированный 1</li>
				</ul>
			</li>
			<li>2.2</li>
		</ol>
	</li>
</ol>

И css-код для его правильной нумерации (как обычно она делается в договорах):

ol {
	list-style: none;
	counter-reset: li;
}
li:before {
	counter-increment: li; 
	content: counters(li,".
 
 ") ". ";
	color: red;
}

Как это работает, подробно описано в статье по ссылке в самом начале этой статьи. Выглядит этот список так:

Как видно, счётчик, прописанный для элементов li:before срабатывает без разбора для всех элементов li списка в документе и проставляет нумерацию не только нумерованным, но и маркированным элементам списка. Даже если у нас будет маркированный список с одним элементом, и ему будет присвоен и выведен его порядковый номер. Ну и, как видно на рисунке выше, нумерация в нумерованных вложенных списках также сбивается из-за того, что маркированные элементы участвуют в общей нумерации. Как же от этого избавиться?

Создание правильной нумерации в смешанных нумерованных и маркированных списках HTML с помощью CSS

Для того, чтобы нумерация срабатывала только в нумерованных элементах списка и ни в каких других, нужно это явно указать в описании элемента css, к которому мы хотим применить эти свойства: ol > li:before. Именно с помощью уточнения, ol > для элемента li мы чётко определяем группу элементов, к которым будет применяться свойство нумерации. К остальным элементам li это свойство применяться не будет.

В итоге получаем модифицированный css-код:

ol {
	list-style: none;
	counter-reset: li;
}
ol > li:before {
	counter-increment: li; 
	content: counters(li,".") ". ";
	color: red;
}

который и соберёт нам тот результат, который нужен:

Как видно на рисунке выше, теперь нумерация нумерованных элементов списка никак не нарушается вложением в него элементов ненумерованного списка и всё работает именно так, как задумывалось: есть сквозная нумерация, вложение ненумерованных списков никак на неё не влияет.

Резюме

Таким образом слегка модифицировав css-код мы получаем универсальное решение не только для нумерованных списков, но и создание правильной нумерации в смешанных нумерованных и маркированных списках HTML с помощью CSS.

Отображение чистых маркированных списков также будет работать и отображаться как надо.

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

<html>
<head>
	<title>Правильная нумерация в смешанных нумерованных и маркированных списках HTML с помощью CSS</title>
</head>
<body>
	<style>
		ol {
			list-style: none;
			counter-reset: li;
		}
		ol > li:before {
			counter-increment: li; 
			content: counters(li,".") ". ";
			color: red;
		}
	</style>
	<ol>
		<li>1.</li>
		<li>2.
			<ol>
				<li>2.1
					<ul>
						<li>маркированный 1
							<ul>
								<li>маркированный 2
									<ol>
										<li>2.1.1</li>
										<li>2.1.2</li>
									</ol>
								</li>
							</ul>
						</li>
						<li>маркированный 1</li>
					</ul>
				</li>
				<li>2.
 
 
 2</li>
			</ol>
		</li>
	</ol>
<body>
</html>

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:

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

HTML-элемент

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

    Этот элемент также принимает глобальные атрибуты.

    реверс

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

    начало

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

    тип

    Устанавливает тип нумерации:

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

    Указанный тип используется для всего списка, если для заключенного элемента

  1. не используется другой атрибут типа .

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

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

    Элементы

      и
        могут вкладываться сколь угодно глубоко, чередуя
          и
            , как вам угодно.

            Элементы

              и
                представляют собой список элементов. Разница с 9.0004
                  элемент, порядок имеет смысл. Например:

                  • Шаги в рецепте
                  • Пошаговые инструкции
                  • Список ингредиентов в убывающей пропорции на этикетках с информацией о пищевой ценности

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

                    — иначе можно использовать
                      .

                      Простой пример 

                       
                        
  
                      1. Плата
                        2. 
  
                      2. Fi
                        3. 
  
                      3. Фо
                        4. 
  
                      4. Фум
                        5.
                      Результат

                      Использование римских цифр 

                       
                        
  
                      1. Введение
                        2. 
  
                      2. Список жалоб
                        3. 
  
                      3. Заключение
                        4.
                      Результат

                      Использование стартового атрибута 

                       
                      Финишные места участников, не входящих в круг победителей:
                      
<старт = "4">
  
                    • Спидуок Стью
                      • 
  
                    • Сонтерин Сэм
                      • 
  
                    • Трудолюбивый Родригес
                      •
                  Результат

                  Списки вложения 

                   
                    
  
                  1. первый элемент
                    2. 
  
                  2. 
    второй элемент
    
    <ол>
      
                  3. второй элемент первый подэлемент
                    4. 
      
                  4. второй элемент второй подэлемент
                    5. 
      
                  5. второй элемент третий подэлемент
                    6. 
    
                  
  
  
  
                1. третий элемент
                  2.
                Результат

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

                 
                  
  
                1. первый элемент
                  2. 
  
                2. 
    второй элемент
    
    <ул>
      
                3. второй элемент первый подэлемент
                  4. 
      
                4. второй элемент второй подэлемент
                  5. 
      
                5. второй элемент третий подэлемент
                  6.
            1. третий элемент
            Результат
            Категории контента Содержимое потока, и если дочерние элементы
              включают по крайней мере один элемент
            1. , ощутимое содержание.
            Разрешенный контент Ноль или более
          • , <скрипт> и <шаблон> элементов.
            • Отсутствие тега Нет, начальный и конечный теги обязательны.
            Разрешенные родители Любой элемент, принимающий потоковое содержание.
            Неявная роль ARIA список
            Разрешенные роли ARIA каталог , группа , список , меню , строка меню , нет , презентация , радиогруппа , таблист , панель инструментов , дерево
            Интерфейс DOM HTMLOListElement
            902 18
            Спецификация
            Стандарт HTML
            # the-ol-element

            Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

            • Другие элементы HTML, связанные со списками:
                ,
              • ,
              • свойств CSS, которые могут быть особенно полезны для стилизации элемента
                  :
                  • свойство в стиле списка , чтобы выбрать способ отображения порядкового номера
                  • Счетчики CSS для обработки сложных вложенных списков
                  • свойство line-height для имитации устаревшего compact атрибут
                  • свойство margin для управления отступом списка

              Обнаружили проблему с содержанием этой страницы?

              • Отредактируйте страницу на GitHub.
              • Сообщить о проблеме с содержимым.
              • Посмотреть исходный код на GitHub.
              Хотите принять участие?

              Узнайте, как внести свой вклад.

              Последний раз эта страница была изменена участниками MDN.

              Нумерованный список HTML | HTML нумерованный список

              следующий → ← предыдущая

              Нумерованный список HTML или Нумерованный список отображает элементы в пронумерованном формате. HTML-тег ol используется для упорядоченного списка. Мы можем использовать упорядоченный список для представления элементов либо в формате числового порядка, либо в формате алфавитного порядка, либо в любом формате, в котором порядок подчеркивается. Нумерованный список может быть разного типа:

              • Цифровой номер (1, 2, 3)
              • Заглавная римская цифра (I II III)
              • Малый римский номер (i ii iii)
              • Заглавный алфавит (ABC)
              • Малый алфавит (a b c)

              Для представления различных упорядоченных списков в теге

                имеется 5 типов атрибутов.

                Тип Описание
                Тип "1" Это тип по умолчанию. В этом типе элементы списка нумеруются цифрами.
                Тип "I" В этом типе элементы списка нумеруются римскими цифрами в верхнем регистре.
                Тип "i" В этом типе элементы списка нумеруются строчными римскими цифрами.
                Тип "A" В этом типе элементы списка нумеруются прописными буквами.
                Тип "a" В этом типе элементы списка нумеруются строчными буквами.

                Пример упорядоченного списка HTML

                Давайте посмотрим на пример упорядоченного списка HTML, который отображает 4 темы в пронумерованном списке. Здесь мы не определяем type="1", потому что это тип по умолчанию.

                <ол>

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              Протестируйте сейчас

              Выход:

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              ол тип="I"

              Давайте посмотрим пример для отображения списка в верхнем регистре римскими цифрами.

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              Протестируйте сейчас

              Выход:

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              ол тип = "я"

              Давайте посмотрим на пример для отображения списка в нижнем регистре римских чисел.

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              Протестируйте сейчас

              Выход:

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              ол тип="А"

              Рассмотрим пример отображения списка в верхнем регистре.

              <ол тип="А">

            • HTML
            • Ява
            • JavaScript
            • SQL

              • Протестируйте сейчас

              Выход:

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              ол тип="а"

              Давайте посмотрим пример для отображения списка в нижнем регистре алфавита.

              <ол тип="а">

            • HTML
            • Ява
            • JavaScript
            • SQL

              • Протестируйте сейчас

              Выход:

              1. HTML
              2. Ява
              3. JavaScript
              4. SQL

              начальный атрибут

              Атрибут start используется с тегом ol, чтобы указать, с чего начинать элементы списка.

                : отображаются числовые значения, начинающиеся с "5".

                  : Будут показаны заглавные буквы, начинающиеся с "E".

                    : будут отображаться строчные буквы, начинающиеся с "e".

                      : будет отображаться латинское значение в верхнем регистре, начинающееся с "V".

                        : будет отображаться латинское значение в нижнем регистре, начинающееся с "v".

                        1. HTML
                        2. Ява
                        3. JavaScript
                        4. SQL

                        Протестируйте сейчас

                        Выход:

                        1. HTML
                        2. Ява
                        3. JavaScript
                        4. SQL

                        наоборот Атрибут:

                        Это логический атрибут HTML-тега

                          , новый в версии HTML5.

                          No related posts.

                          Добавить комментарий

                          Ваш адрес email не будет опубликован. Обязательные поля помечены *