Руководство по HTML5
Адам Фриман
Настройка базовой структуры документа
Давайте начнем с элементов документа. Это строительные блоки, которые определяют форму вашего 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 документа в браузере