Урок 6 из 25
В прогрессе

6) Списки

 

Списки

  • Нумерованный (упорядоченный) список.
  • Маркированный (неупорядоченный) список.
  • Список описаний.

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

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

Давайте рассмотрим примеры использования:

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

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

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

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

Например:

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

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

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

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

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

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

Результат нашего примера:

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

Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a») число, указанное в значении атрибута, является порядковым номером буквы в алфавите. Например, start = «4» будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). Значения должны быть целочисленными, допускается использование отрицательных значений.


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

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

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

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

Но и это еще не все, атрибут reversedhtml5 элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.

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

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

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

Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).

По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.

Давайте рассмотрим примеры использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <ul></title>
	</head>
	<body>
		<ul>
			<li>Светлое</li>
			<li>Тёмное</li>
			<li>Пятница</li>
		</ul>
	</body>
</html>

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

  • Светлое
  • Тёмное
  • Пятница

Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style. Более подробно про этот атрибут можно почитать в следующей статье «HTML стили«.

Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:

Атрибут Значение
list-style-type:none Убирает маркер.
list-style-type:disc Маленький черный круг. Это значение по умолчанию.
list-style-type:circle Круг пустой внутри.
list-style-type:square Маркер в виде квадрата.

Ниже приведен пример использования стилей CSS внутри маркированного списка:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример изменения типа маркера маркированного списка</title>
	</head>
	<body>
		<ul style = "list-style-type:none">  <!-- маркер отсутствует -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:disc">  <!-- маленький черный круг -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:circle">  <!-- круг пустой внутри -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:square">  <!-- маркер в форме квадрата -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>		
	</body>
</html>

Результат нашего примера:

Рис. 15 Маркированные списки.
Рис. 15 Маркированные списки.

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

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

Список описаний

Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.

Тег <dl> (HTML Description List Element) определяет список, тег <dt> (HTML Definition Term Element) определяет его имя, а тег <dd> (HTML Description Element) описывает его значение.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования списка описаний</title>
	</head>
	<body>
		<dl>
			<dt>Жамевю</dt>
			<dd>состояние, противоположное дежавю, внезапно наступающее ощущение того, что хорошо знакомое место
			или человек кажутся совершенно неизвестными или необычным.</dd>
			<dt>Фасцинация</dt>
			<dd>повышение эффективности воспринимаемого материала через использование сопутствующих (фоновых) воздействий.</dd>
		</dl>
	</body>
</html>

Как вы можете заметить значение списка описаний (элемент <dd>) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:

Рис. 16 Список описаний.

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

Домашнее задание:

1.1) создать сайт КЛИК

(попробуйте самостоятельно изучить псевдокласс :hover

1.2) создать сайт КЛИК

2) залить на хост

3) ссылку скинуть в дискорд