Нумерация в html – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML

Содержание

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

. В качестве значения указывается любое целое положительное число. При этом неважно, какой тип нумерации установлен, даже если в качестве списка используются латинские буквы. Если одновременно для списка применяются атрибуты start и value , то последний имеет большее преимущество, и нумерация отображается с числа, указанного value , как показано в примере 1.

Пример 1. Изменение нумерации списка

Списки
  1. Следует тщательно позаботиться о своем рабочем месте.
  2. Освещение в помещении отрегулировать таким образом, чтобы источник света находился сбоку или сзади оператора.
  3. Bo избежание медицинских осложнений стул рекомендуется выбирать с мягким сидением.

Первый элемент списка в данном примере будет начинаться с римской цифры IV, поскольку указан атрибут start="4" , затем идет номер V, а последний элемент следует не по порядку и назначается номером X (рис. 1).

Рис. 1. Римские цифры в списке

Написание чисел

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 2 или нечто подобное.

Рис. 2. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью свойств content и counter-increment . Вначале для селектора ol требуется задать counter-reset : item , это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счётчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none .

Свойство content, как правило, работает в сочетании с псевдоэлементами ::after и ::before . Так, конструкция li::before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 2).

Пример 2. Создание своей нумерации

Li::before { content: counter(item) ") "; /* Добавляем к числам скобку */ counter-increment: item; /* Задаём имя счетчика */ }

Свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. counter-increment необходим для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item . Окончательный код показан в примере 3.

Пример 3. Изменение вида списка

Списки
  1. Первый
  2. Второй
  3. Третий
  4. Четвертый

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

Нумерованный список. HTML, XHTML и CSS на 100%

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

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

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

Для создания упорядоченных списков применяется элемент OL, которому требуется наличие закрывающего тега, а все пункты списка находятся внутри этого элемента.

У элемента OL есть атрибут type, который задает формат символов, используемых для нумерации.

Следующие значения атрибута type указывают, что пункты будут нумероваться с помощью:

• A – заглавных букв латинского алфавита;

• a – строчных букв латинского алфавита;

• I – заглавных римских цифр;

• i – строчных римских цифр;

• 1 – арабских цифр.

Вторым атрибутом элемента OL является атрибут start, указывающий, с какого числа начинать нумерацию всего списка.

В листинге 2.8 приведен пример кода для создания упорядоченных списков с разной нумерацией.

Листинг 2.8. Упорядоченные списки

<html>

<head>

<title>Списки</title>

<body>

<ol type="1" start="6">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="A">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="a">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="I">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

<ol type="i">

<li>Достать ключ</li>

<li>Вставить ключ в замочную скважину</li>

<li>Повернуть ключ по часовой стрелке на два оборота</li>

<li>Достать ключ из замка</li>

<li>Открыть дверь</li>

</ol>

</body>

</html>

Фрагмент отображения в браузере кода из листинга 2.8 показан на рис. 2.8.

Рис. 2.8. Упорядоченные списки

В примере созданы списки с различными типами нумерации, для списка с арабской нумерацией задан стартовый номер 6.

При создании упорядоченных списков на элемент LI можно возложить дополнительные функции. Как и в примере с маркированными списками, в элементе LI можно задать вид нумерации конкретного пункта с помощью атрибута type. Помимо этого, с помощью атрибута value можно задать номер, с которого будет продолжена нумерация списка.

В примере из листинга 2.9 представлен код для создания списка с разными типами нумерации и различным порядком следования элементов.

Листинг 2.9. Список с разными типами нумерации

<html>

<head>

<title>Списки</title>

<body>

<ol type="1" >

<li type="1" value="10">Закрой дверь</li>

<li>Сходи в магазин</li>

<li value="1">Открой дверь</li>

<li>Возьми деньги</li>

<li type="I">Иди налево</li>

<li type="I">Потом поверни направо</li>

<li>Увидишь магазин</li>

</ol>

</body>

</html>

Результат обработки листинга 2.9 представлен на рис. 2.9.

Рис. 2.9. Упорядоченный список с разной нумерацией

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

Данный текст является ознакомительным фрагментом.

Читать книгу целиком

Поделитесь на страничке

Следующая глава >

Как создать нумерованные и маркированные списки в HTML - Урок 4 (Для начинающих)

Продолжим изучать основы html. В этом уроке мы разберем, как создать нумерованные и маркированные списки.
Отличие между нумерованными и маркированными списками незначительное. В нумерованном списке каждому пункту присваивается номер, а в маркированном - в каждом пункте выводятся символы-буллеты (bullets), например, закрашенный черный кружок, окружность и квадратик.

Маркированный список HTML страницы.

Для того, чтобы создать маркированный список, следует применить теги:
<ul><li>……</li></ul>.

<ul> - начало списка

<li> - начало отдельного элемента списка

</li> - конец отдельного элемента списка

</ul> - конец списка

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Маркированный список HTML страницы </title>
</head>
<body>

<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>

</body>
</html>

Результат:
Маркированный список HTML страницы

Атрибут TYPE для маркированных списков

Если к тегу <ul> добавить атрибут TYPE, можно изменить стиль маркирования:

ENGINE="disc" – черный кружочек
type="circle" – белый кружочек
type="square" – черный квадратик

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Маркированный список HTML страницы </title>
</head>
<body>

<ul type="square">
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>

</body>
</html>

Обратите внимание на пункт 9, вы там заметите, как к тегу <ul> был добавлен атрибут type="square" – закрашенный квадратик в черный цвет.

Результат:

Атрибут TYPE для маркированных списков

Пронумерованный список HTML страницы.

Для того, чтобы создать нумерованный список следует применить теги:
<ol><li>……</li></ol>.

<ol> - начало списка

<li> - начало отдельного элемента списка

</li> - конец отдельного элемента списка

</ol> - конец списка

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Нумерованный список HTML страницы </title>
</head>
<body>

<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>

</body>
</html>

По умолчанию нумерованный список нумеруется по порядку 1,2,3...

Результат:

Пронумерованный список HTML страницы

Атрибут TYPE и START для нумерованных списков.

Если к тегу <ol> добавить атрибут TYPE, можно добавить стиль нумерации пунктов списка

"A" – заглавные буквы A, B, C ...
"a" – строчные буквы a, b, c ...
"I" – большие римские числа I, II, III ...
"i" – маленькие римские числа i, ii, iii ...
"1" – арабские числа 1, 2, 3 ...

Если к тегу <ol> добавить атрибут START, можно задать любое число, с которого будет идти нумерация.

Пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Пронумерованный список HTML страницы </title>
</head>
<body>

<!-- пример списка с арабскими числами -->
Чтобы создать сайт, нужно знать:
<ol type="1" >
<li> html </li>
<li> css </li>
<li> и ознакомиться с php </li>
</ol>

<!-- пример списка с большими римскими числами -->
Если хотите быстро создать сайт, изучите такие программы:
<ol type="I" >
<li> Adobe Dreamweaver </li>
<li> WordPress </li>
<li> Photoshop </li>
</ol>

<!-- пример списка с маленькими буквами -->
Чтобы увеличить посещаемость сайта, нужно:
<ol type="a" >
<li> добавлять постоянно новые статьи </li>
<li> добавлять постоянно новые статьи</li>
<li> и еще раз добавлять постоянно новые статьи</li>
</ol>
<!-- пример списка не с начала -->
Чтобы стать успешным:
<ol type ="1" start="2" >
<li> не бойся начать все заново </li>
<li> не бойся делать ошибки </li>
<li> не останавливайся на начатом</li>
</ol>
</body>
</html>

Результат:

Атрибут TYPE и START для нумерованных списков

Переходим к уроку 5 - "Как сделать ссылку в HTML"

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: html, основы

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

Правильная нумерация в смешанных нумерованных и маркированных списках 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;
}

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

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

Как видно, счётчик, прописанный для элементов 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;
}

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

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

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

Резюме

Таким образом слегка модифицировав 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>

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Нумерация в CSS — Примеры

Самый простой способ - использовать нумерованный список ol.
  1. кошка
  2. собака
<ol>
<li>кошка</li>
<li>собака</li>
</ol>
Атрибут start установит номер, с которого начнётся список. Для li его аналог value.
  1. конь
  2. корова
<ol start="3">
<li>конь</li>
<li value="10">корова</li>
</ol>
Атрибут type определит вид маркера как для ol, так и для отдельного пункта li.
type="A" type="a" type="I" type="i" type="1"
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
Для ненумерованного списка ul другие маркеры. Это условно, браузеры в настоящее время поддерживают любой вариант type для ul и ol.
type="disc" type="circle" type="square"
  • пункт
  • пункт
  • пункт
  • пункт
  • пункт
  • пункт
  • пункт
  • пункт
  • пункт

Также можно воспользоваться свойством list-style к тегам, которым присвоено display: list-item. Первое его значение показывает вид маркера, а именно:

armeniangeorgian decimal decimal-leading-zero lower-greek
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
lower-alphaupper-alpha lower-roman upper-roman none
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
circle disc square url(адрес_изо)
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
  1. пункт
  2. пункт
  3. пункт
Второе определяет будет ли маркер вынесен за границы элемента. По умолчанию outside.
  1. пункт
  2. пункт
  3. пункт
<ol>
   <li>пункт</li>
   <li>пункт</li>
   <li>пункт</li>
</ol>

А теперь коснёмся автоматической нумерации, сразу перейдя к образцу.

<style type="text/css">
  .numer { 
    counter-reset: schetchik 1;    /* задаётся имя и начальное значение отсчёта, по умолчанию 0 */
    }

  .numer dt {position: relative; padding-right: 20px; background: #f4f1e9; border-top:1px solid #666;}

  .numer dt:after {    /* это стиль числа, обязательно с :before или :after */
    content: " - " counter(schetchik, upper-alpha) " - ";    /* вставляется знак " - ", имя счётчика, определяется тип маркера и снова " - " */
    counter-increment: schetchik 2;    /* задаётся имя и значение, на которое будет увеличиваться счётчик, по умолчанию 1 */
    position: absolute;
    right: 0; top: 0;
    color: #f4f1e9;
    background: #666;
    } 
</style>

<dl>
<dt>Заголовок</dt>
<dd>Содержание</dd>
<dt>Заголовок</dt>
<dd>Содержание</dd>
<dt>Заголовок</dt>
<dd>Содержание</dd> 
</dl>
Зачем
Единственная причина, по которой имеет смысл так усложнять - красивый вид счётчика. К нему можно применить любые стили, скажем, расположить справа.
Пример
Где можно применить? Например, в комментариях (практическое применение).
Последствия
К теме поведенческих факторов: на такой список обратишь внимание. Фоновые же изображения к каждой цыфре добавлять не экономично.
Сноска CSS Автоматическая нумерация строк таблицы

Как в списке вывести римские цифры?

Для создания римской нумерации списка к элементу <ol> добавляется атрибут type со значением I (римские цифры в верхнем регистре — I, II, III) или значением i (римские цифры в нижнем регистре — i, ii, iii). В примере 1 показано создание списка с римскими цифрами.

Пример 1. Использование атрибута type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Римские цифры</title>
 </head>
 <body>
  <ol type="I">
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание, что нумерация выравнивается по точке.

Вид нумерованного списка

Рис. 1. Вид нумерованного списка

Также можно управлять типом нумерации через стили. Для этого к селектору ol или li надо добавить свойство list-style-type со значением upper-roman или lower-roman. В примере 2 показано создание списка с римскими цифрами в нижнем регистре.

Пример 2. Использование свойства list-style-type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Римские цифры</title>
  <style>
   li {
    list-style-type: lower-roman; /* Цифры i, ii, iii,… */
   }
  </style>
 </head>
 <body>
  <ol type="I">
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид нумерованного списка

Рис. 2. Вид нумерованного списка

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.09.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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