Настройка базовой структуры документа
Давайте начнем с элементов документа. Это строительные блоки, которые определяют форму вашего HTML документа и устанавливают начальный контекст для браузера. На данный момент существуют только четыре элемента документа, но они всегда необходимы в любом HTML документе.
Элемент doctype
Элемент doctype является уникальным и имеет свою собственную категорию. Вы должны начинать каждый HTML документ, который вы создаете, с элемента doctype; это элемент, который говорит браузеру, что он будет иметь дело с HTML. Большинство браузеров все же будут отображать содержимое правильно, даже если вы опустите элемент doctype, но это плохая практика – полагаться, что браузеры будут вести себя таким образом. В таблице 7-2 приведено описание элемента doctype.
Таблица 7-2: Элемент doctype| Элемент | doctype |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Нет |
| Локальные атрибуты | Нет |
| Содержание | Нет |
| Стиль тегов | Один открывающий тег |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | DTD, который был необходим в HTML 4, является устаревшим в HTML5 |
| Соглашение по стилям | Нет |
Существует только один способ использования элемента doctype в HTML5, и он показан в листинге 7-1. По мере того, как вы будете прорабатывать эту главу, вы будете применять каждый элемент для создания простого, но полного HTML5 документа. В листинге 7-1 показана первая строка.
Листинг 7-1: Использование элемента doctype<!DOCTYPE HTML>Этот элемент говорит браузеру две вещи: он имеет дело с HTML, и с какой версией спецификации HTML будет связано содержание. Вы не должны указывать номер версии. Браузер автоматически определит, что вы используете HTML5 (потому что этот элемент имеет несколько иную форму в HTML5, чем в предыдущих версиях HTML). Для этого элемента нет закрывающего тега. Вы просто ставите один тег в начале документа.
Элемент html
Элемент html, который более правильно назвать корневым элементом, указывает на начало HTML внутри документа. В таблице 7-3 приведено описание элемента html.
Таблица 7-3: Элемент html| Элемент | html |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Нет |
| Локальные атрибуты | manifest (для более подробной информации смотрите главу 40) |
| Содержание | Один элемент head и один элемент body |
| Стиль тегов | Открывающий и закрывающий теги, включающие другие элементы |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML5 был добавлен новый атрибут manifest; атрибуты версии HTML4 сейчас считаются устаревшими |
| Соглашение по стилям | html { display: block; }
html:focus { outline: none;} |
Элемент html указывает на начало HTML разметки в документе. В листинге 7-2 показано использование элемента html.
Листинг 7-2: Использование элемента html<!DOCTYPE HTML>
<html>
...content and elements omitted...
</html>Элемент head
Элемент head содержит метаданные для документа. В HTML метаданные предоставляют браузеру информацию о содержании и разметке в документе, но также могут включать скрипты и ссылки на внешние ресурсы (такие как таблицы стилей CSS). Вы увидите элементы метаданных далее в этой главе. В таблице 7-4 приведено описание элемента head.
Таблица 7-4: Элемент head| Элемент | head |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент html |
| Локальные атрибуты | Нет |
| Содержание | Требуется один элемент title; остальные элементы метаданных не обязательны |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | Нет |
В листинге 7-3 показано использование элемента head. Каждый HTML документ должен содержать элемент head, и этот, в свою очередь, должен содержать элемент title, как показано в листинге. Полную информацию об элементе title вы найдете далее в этой главе.
Листинг 7-3: Использование элемента head<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
</head>
</html>Элемент body
Элемент body инкапсулирует содержание HTML документа, в отличие от элемента head, который инкапсулирует метаданные и информацию о документе. Элемент body всегда следует за элементом head, так что это второй дочерний элемент элемента html. В таблице 7-5 приведено описание элемента body.
Таблица 7-5: Элемент body| Элемент | body |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент html |
| Локальные атрибуты | Нет |
| Содержание | Все потоковые и фразовые элементы |
| Стиль тегов | Требуются открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Атрибуты alink, background, bgcolor, link, margintop, marginbottom, marginleft, marginright, marginwidth, text и vlink устарели; результат, который достигался при помощи этих атрибутов, сейчас достигается при помощи CSS |
| Соглашение по стилям | Нет |
В листинге 7-4 показано использование элемента body.
Листинг 7-4: Использование элемента body<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>
I like <code id="applecode">apples</code> and oranges.
</p>
<a href="http://apress.com">Visit Apress.com</a>
</body>
</html>Я добавил в элемент body некоторое простое содержание. Отдельные элементы, которые я использовал (р, code и a) описаны в главах 8 и 9. Вы достигли той точки, когда у вас есть простой, но полный, HTML документ. Вы можете увидеть, как браузер отображает этот документ, на рисунке 7-1.
Рисунок 7-1: Отображение простого HTML документа в браузере
