Руководство по HTML5
Адам Фриман
Работа с заранее отформатированным контентом
Элемент 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