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

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

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

Адам Фриман

9.4. Работа с заранее отформатированным контентом

Элемент pre позволяет изменить способ, которым браузер работает с содержанием, таким образом, пробелы не будут объединены в один, и сохранится форматирование. Это может быть полезно, когда исходное форматирование блока контента является важным. Тем не менее, не злоупотребляйте этим элементом, так как такой подход подрывает ту гибкость, которая приходит с использованием элементов и стилей для управления презентацией. В таблице 9-4 представлен элемент pre.

Таблица 9-4: Элемент pre
Элемент pre
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }

Элемент pre может быть, в частности, особенно полезным, когда вы используете его с элементом code. Например, форматирование в языках программирования, как правило, является значительным, и вы, возможно, не захотите воссоздавать форматирование, используя элементы. В листинге 9-4 показано, как используется элемент pre.

Листинг 9-4: Использование элемента pre
<!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>
		.favorites {
			background: grey;
			color: white;
			border: thin solid black;
			padding: 0.2em;
		}
	</style>
</head>
<body>
	<pre><code>
	var fruits = ["apples", "oranges", "mangoes", "cherries"];
	for (var i = 0; i < fruits.length; i++) {
		document.writeln("I like " + fruits[i]);
	}
	</code></pre>
	<div class="favorites">
		<p>
			I like apples and oranges.
	I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.
		</p>
		<p>
			My favorite kind of orange is the mandarin, properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.
		</p>
	</div>
</body>
</html>

В листинге 9-4 я использовал элемент pre с JavaScript кодом. Этот код не будет выполнен, поскольку он не находится в элементе script, но форматирование кода будет сохранено. Браузер не будет делать ничего, чтобы переформатировать содержание в элементе pre, то есть пробелы или табуляции для каждой строки будут отображаться в окне браузера. Поэтому отдельные выражения в элементе pre написаны без отступа, чтобы соответствовать структуре HTML документа. Вы можете увидеть, как браузер отображает отформатированный контент, на рисунке 9-3.

Рисунок 9-3: Отображение заранее отформатированного контента при помощи элемента pre