Добавление верхних и нижних колонтитулов
Элемент header обозначает верхний колонтитул раздела. Он может содержать любой контент, который вы хотите обозначить как верхний колонтитул, в том числе название или логотип. Что касается других элементов, элемент header обычно содержит один элемент h1-h6 или элемент hgroup, также он может также содержать элементы навигации по разделу. Вы можете больше узнать об элементе nav (обсуждаемом в предстоящем разделе «Добавление навигационных блоков»), чтобы получить более подробную информацию о навигации. В таблице 10-6 представлен элемент header.
Таблица 10-6: Элемент header| Элемент | header |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы. header не может быть потомком элемента address или элемента footer, а также потомком другого элемента header |
| Локальные атрибуты | Нет |
| Содержание | Потоковый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | header { display: block; } |
Элемент footer является парой элемента header и представляет собой нижний колонтитул раздела. Элемент footer обычно содержит краткую информацию о разделе и может включать в себя сведения об авторе, информацию о правах, ссылки на связанный контент, логотипы и так далее. В таблице 10-7 представлен элемент footer.
Таблица 10-7: Элемент footer| Элемент | footer |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы. footer не может быть потомком элемента address или элемента header, а также потомком другого элемента footer |
| Локальные атрибуты | Нет |
| Содержание | Потоковый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | footer { display: block; } |
В листинге 10-5 представлены элементы header и footer.
Листинг 10-5: Использование элементовheaderиfooter
<!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 {
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 *, footer > * {
background: transparent;
color: black;
}
body > section, body > section > section,
body > section > section > section {
margin-left: 10px;
}
body > header, body > footer {
border: medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
</header>
<section>
<header>
<hgroup>
<h1>Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
</header>
I like apples and oranges.
<section>
<h1>Additional fruits</h1>
I also like bananas, mangoes, cherries, apricots, plums,
peaches and grapes.
<section>
<h1>More information</h1>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</section>
</section>
</section>
<section>
<header>
<h1>Activities I like</h1>
</header>
<section>
<p>
I like to swim, cycle and run. I am in training for my first
triathlon, but it is hard work.
</p>
<h1>Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint, Olympic and so on.
<section>
<h1>The kind of triathlon I am aiming for</h1>
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>
</section>
</section>
</section>
<footer id="mainFooter">
©2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
</footer>
</body>
</html>
В этом примере я определил три элемента header. Если верхний колонтитул является дочерним элементом элемента body, то считается, что это верхний колонтитул (header) для всего документа (но будьте осторожны, это не то же самое, что элемент head, который я описал в главе 7). Если элемент header является частью раздела (подразумеваемого или определенного явно с помощью элемента section), то это верхний колонтитул (header) этого раздела. Я добавил в документ некоторые стили, чтобы было проще увидеть иерархические отношения между различными разделами и колонтитулами. Все это показано на рисунке 10-6.
Обратите внимание на размеры шрифтов. Предположительно поэтому Google Chrome и Firefox переопределяют элементы h1-h6, когда они находятся в элементе section. Это делается для того, чтобы можно было отличить заголовки верхнего уровня h1 от тех, которые вложены в разделы. Это не может служить оправданием беспричинному переопределению стилей, но это имеет место быть.
Рисунок 10-6: Использование элемента header
Результат использования элемента footer можно увидеть на рисунке 10-7.
Рисунок 10-7: Добавление элемента footer
