Главная страница   /   10.9. Создание раздела с дополнительной информацией (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

10.9. Создание раздела с дополнительной информацией

Элемент details создает раздел документа, который пользователь может открыть и расширить, чтобы получить более подробную информацию по данной теме. В таблице 10-12 представлен элемент details.

Таблица 10-12: Элемент details
Элемент details
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы
Локальные атрибуты open
Содержание Элемент summary (опционально) и потоковый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям details { display: block; }

Элемент details обычно содержит элемент summary, который создает ярлык или название для раздела с дополнительной информацией. В таблице 10-13 представлен элемент summary.

Таблица 10-13: Элемент summary
Элемент summary
Тип элемента N/A
Разрешенные родительские элементы Элемент details
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям summary { display: block; }

В листинге 10-10 показано, как используются оба элемента details и summary.

Листинг 10-10: Использование элементов summary и details
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		h1, h2, h3, article > footer {
			background: grey;
			color: white;
		}

		hgroup > h1 {
			margin-bottom: 0;
			margin-top: 0;
		}

		hgroup > h2 {
			background: grey;
			color: white;
			font-size: 1em;
			margin-top: 0px;
			margin-bottom: 2px;
		}

		body > header *, body > footer * {
			background: transparent;
			color: black;
		}

		body > article > section,
		body > article > section > section {
			margin-left: 10px;
		}

		body > header {
			border: medium solid black;
			padding-left: 5px;
			margin: 10px 0 10px 0;
		}

		article {
			border: thin black solid;
			padding: 10px;
			margin-bottom: 5px;
		}

		details {
			border: solid thin black;
			padding: 5px;
		}

			details > summary {
				font-weight: bold;
			}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Things I like</h1>
			<h2>by Adam Freeman</h2>
		</hgroup>
	</header>
	<article>
		<header>
			<hgroup>
				<h1 id="activitiesilike">Activities I like</h1>
				<h2>It hurts, but I keep doing it</h2>
			</hgroup>
		</header>
		<section>
			<p>
				I like to swim, cycle and run. I am in training for my first
	triathlon, but it is hard work.
			</p>
			<details>
				<summary>Kinds of Triathlon</summary>
				There are different kinds of triathlon - sprint, Olympic and so on.
	I am aiming for Olympic, which consists of the following:
				<ol>
					<li>1.5km swim</li>
					<li>40km cycle</li>
					<li>10km run</li>
				</ol>
			</details>
		</section>
	</article>
</body>
</html>

Вы можете увидеть, как браузер отображает эти элементы, на рисунке 10-13. Не все браузеры поддерживают должным образом элемент details. Например, у IE9 есть с этим сложности.

Рисунок 10-13: Использование элементов summary и details

Как вы видите по рисунку, браузер предоставляет своеобразную панель управления интерфейсом, которая при активации открывается и отображает содержимое элемента details. Если элемент details закрыт, тогда видно только содержание элемента summary. Если вы хотите, чтобы элемент details был открыт, когда страница отображается в первый раз, нужно применить атрибут open.