Главная страница   /   9.8. Работа с фигурами (Руководство по HTML5

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

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

Адам Фриман

9.8. Работа с фигурами

Последний из группирующих элементов относится к фигурам. HTML5 определяет фигуру как «единицу содержания, опционально с заголовком, которая является самодостаточной, на которую обычно ссылаются как на единое целое в основным потоке документа и которая может быть удалена из основного потока документа без ущерба для смысла документа». Это достаточно общее определение, выходящее за рамки имеющегося традиционного представления о фигуре, которая является некоторой формой иллюстрации или диаграммы. Фигура определяется при помощи элемента figure, который приводится в таблице 9-12.

Таблица 9-12: Элемент figure
Элемент figure
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы
Локальные атрибуты Нет
Содержание Потоковый контент и опционально один элемент figcaption
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям
figure { display: block; margin-before: 1em;
margin-after: 1em; margin-start: 40px;
margin-end: 40px; }

Опционально элемент figure может содержать элемент figcaption, который обозначает заголовок фигуры. В таблице 9-13 представлен элемент figcaption.

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

В листинге 9-12 показано, как вместе используются элементы figure и figcaption.

Листинг 9-12: Использование элементов figure и figcaption
<!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" />
</head>
<body>
	I like apples and oranges.
	<figure>
		<figcaption>Listing 23. Using the code element</figcaption>
		<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
			document.writeln("I like " + fruits.length + " fruits");
		</code>
	</figure>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

В этом примере я использовал элемент figure для создания фигуры вокруг элемента code. Чтобы добавить заголовок, я использовал элемент figcaption. Обратите внимание, что figcaption должен быть первым или последним дочерним элементом у figure. Вы можете увидеть, как браузер применяет стили для этих элементов, на рисунке 9-10.

Рисунок 9-10: Использование элементов figure и figcaption