Списки

Последнее обновление: 08.04.2016

Для создания списков в HTML5 применяются элементы <ol> (по умолчанию нумерованный список) и <ul> (по умолчанию ненумерованный список):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Списки в HTML5</title>
	</head>
	<body>
		<h2>Нумерованный список</h2>
		<ol>
			<li>iPhone 6S</li>
			<li>Galaxy S7</li>
			<li>Nexus 5X</li>
			<li>Lumia 950</li>
		</ol>
		<h2>Ненумерованный список</h2>
		<ul>
			<li>iPhone 6S</li>
			<li>Galaxy S7</li>
			<li>Nexus 5X</li>
			<li>Lumia 950</li>
		</ul>
	</body>
</html>
Списки в HTML5

В нумерованном списке для нумерации элементов по умолчанию используется стандартные цифры от 1. В ненумерованном списке каждый элемент предваряется черной точкой.

При необходимости мы можем настроить нумерацию или отражаемый рядом с элементом символ с помощью стиля list-style-type. Данный стиль может принимать множество различных значений. Отметим только основные и часто используемые. Для нумерованных списков стиль list-style-type может принимать следующие значения:

  • decimal: десятичные числа, отсчет идет от 1

  • decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

  • lower-roman: строчные римские цифры, например, i, ii, iii, iv, v

  • upper-roman: заглавные римские цифры, например, I, II, III, IV, V…

  • lower-alpha: строчные римские буквы, например, a, b, c..., z

  • upper-alpha: заглавные римские буквы, например, A, B, C, … Z

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

<h2>list-style-type = decimal</h2>
<ol style="list-style-type:decimal;" start="3">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ol>
<h2>list-style-type = upper-roman</h2>
<ol style="list-style-type:upper-roman;">
	<li>iPhone 6S Plus</li>
	<li>Galaxy S7 Edge</li>
	<li>Nexus 6P</li>
	<li>Lumia 950 XL</li>
</ol>
<h2>list-style-type = lower-alpha</h2>
<ol style="list-style-type:lower-alpha;">
	<li>LG G 5</li>
	<li>Huawei P8</li>
	<li>Asus ZenFone 2</li>
</ol>
Нумерованный список в HTML5

Для ненумерованного списка атрибут list-style-type может принимать следующие значения:

  • disc: черный диск

  • circle: пустой кружочек

  • square: черный квадратик

Например:

<h2>list-style-type = disc</h2>
<ul style="list-style-type:disc;">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ul>
<h2>list-style-type = circle</h2>
<ul style="list-style-type:circle;">
	<li>iPhone 6S Plus</li>
	<li>Galaxy S7 Edge</li>
	<li>Nexus 6P</li>
	<li>Lumia 950 XL</li>
</ul>
<h2>list-style-type = square</h2>
<ul style="list-style-type:square;">
	<li>LG G 5</li>
	<li>Huawei P8</li>
	<li>Asus ZenFone 2</li>
</ul>
Неупорядоченный список в HTML5

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image. Он задает изображение, которое будет отображаться рядом с элементом списка:

<ul style="list-style-image:url(phone_touch.png);">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ul>
Картинки в списке в HTML5

Стиль list-style-image в качестве значения принимает url(phone_touch.png), где "phone_touch.png" - это название файла изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей index.html у меня находится файл изображения phone_touch.png.

Горизонтальный список

Одним из распространенных способов стилизации списков представляет создание горизонтального списка. Для этого для всех элементов списка надо установить стиль display:inline: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Горизонтальный список в HTML5</title>
		<style>
			ul#menu li {
				display:inline;
			}
		</style>
    </head>
    <body>
        <ul id="menu">
			<li>Главная</li>
			<li>Блог</li>
			<li>Форум</li>
			<li>О сайте</li>
		</ul>
    </body>
</html>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850