Table Of ContentМэтью Мак-Дональд
Санкт-Петербург
«БХВ-Петербург»
2012
УДК 681.3.068
ББК 32.973.26-018.1
М15
Мак-Дональд М.
М15 HTML5. Недостающее руководство: Пер. с англ. — СПб.:
БХВ-Петербург, 2012. — 480 с.: ил.
ISBN 978-5-9775-0805-6
Доступно и в занимательной форме рассказано, как HTML превратился в
HTML5. Рассмотрены семантические элементы и новые стандарты языка. Описано,
как создавать современные веб-страницы, в том числе улучшенные веб-формы,
поддерживать аудио и видео, рисовать на холсте, совершенствовать оформление
веб-страниц с помощью CSS3. Даны практические рекомендации по созданию ин-
теллектуальных веб-приложений, хранению данных, разработке автономных при-
ложений. Показано, как реализовать взаимодействие с веб-сервером, геолокацию,
фоновые вычисления, управление историей просмотров и браузерную совмести-
мость с элементами HTML5.
Для веб-разработчиков
УДК 681.3.068
ББК 32.973.26-018.1
Группа подготовки издания:
Главный редактор Екатерина Кондукова
Зам. главного редактора Евгений Рыбаков
Зав. редакцией Елена Васильева
Перевод с английского Сергея Таранушенко
Редактор Анна Кузьмина
Компьютерная верстка Ольги Сергиенко
Корректор Зинаида Дмитриева
Оформление обложки Марины Дамбиевой
Authorized translation of the English edition of HTML5: The Missing Manual by Matthew MacDonald, ISBN: 978-1-449-
30239-9, Copyright © 2011 O'Reilly Media, Inc. This translation is published and sold by permission of O'Reilly Media,
Inc., the owner of all rights to publish and sell the same.
Авторизованный перевод английской редакции книги: ISBN: 978-1-449-30239-9, Copyright © 2011 O'Reilly Media,
Inc. Перевод опубликован и продается с разрешения O'Reilly Media, Inc., собственника всех прав на публикацию и
продажу издания.
Подписано в печать 30.04.12.
Формат 70 1001/16. Печать офсетная. Усл. печ. л. 38,7.
Тираж 2000 экз. Заказ №
"БХВ-Петербург", 190005, Санкт-Петербург, Измайловский пр., 29.
Первая Академическая типография "Наука"
199034, Санкт-Петербург, 9 линия, 12/28
ISBN 978-1-449-30239-9 (англ.) © 2011 O'Reilly Media, Inc.
ISBN 978-5-9775-0805-6 (рус.) © Перевод на русский язык "БХВ-Петербург", 2012
Оглавление
Об авторе ........................................................................................................................ 13
Благодарности ............................................................................................................... 13
Введение .......................................................................................................................... 15
Что нужно знать для работы с этой книгой? .............................................................................. 16
Написание кода HTML5 ....................................................................................................... 17
Просмотр страницы HTML5 ................................................................................................ 18
Когда HTML5 будет готов?.......................................................................................................... 18
О чем эта книга?............................................................................................................................ 19
Онлайновые ресурсы .................................................................................................................... 21
Недостающий CD .................................................................................................................. 21
Сайт для тестирования примеров книги.............................................................................. 21
ЧАСТЬ I. ЗНАКОМСТВО С НОВЫМ ЯЗЫКОМ ................................................. 23
Глава 1. Представляем HTML5 ................................................................................. 25
История языка HTML5 ................................................................................................................. 25
Язык XHTML 1.0: строго по правилам ............................................................................... 26
XHTML 2: неожиданный провал ......................................................................................... 27
HTML5: возвращение к жизни ............................................................................................. 27
HTML: живой язык ............................................................................................................... 29
Три основных принципа HTML5 ................................................................................................. 30
Принцип 1. Не рвити Паутину ............................................................................................. 30
Принцип 2. Асфальтируйте тропинки ................................................................................. 32
Принцип 3. Будьте практичными......................................................................................... 32
Первое знакомство с разметкой HTML5 .................................................................................... 33
Описание типа документа HTML5 ...................................................................................... 35
Кодировка символов ............................................................................................................. 37
Язык........................................................................................................................................ 37
Добавление таблицы стилей ................................................................................................. 38
Добавление JavaScript-кода .................................................................................................. 38
Конечный результат .............................................................................................................. 39
6 Оглавление
Углубленное знакомство с синтаксисом HTML5......................................................................... 40
Ослабленные правила ........................................................................................................... 40
Проверка кода HTML5 ......................................................................................................... 41
Возвращение XHTML ........................................................................................................... 44
Семейство элементов HTML5 ..................................................................................................... 46
Добавленные элементы ........................................................................................................ 46
Удаленные элементы ............................................................................................................ 47
Адаптированные элементы .................................................................................................. 47
Полужирное и курсивное форматирование ............................................................... 48
Подкорректированные элементы ......................................................................................... 49
Стандартизированные элементы ......................................................................................... 50
Современное использование HTML5 .......................................................................................... 51
Поддерживает ли браузер вашу разметку? ......................................................................... 52
Статистика популярности браузеров ................................................................................... 55
Определение возможностей с помощью Modernizr ........................................................... 57
Замена отсутствующих возможностей заполнителями ..................................................... 60
Глава 2. Новый способ структурирования страниц .............................................. 62
Что такое семантические элементы? ........................................................................................... 63
Модифицирование традиционной HTML-страницы ................................................................. 65
Структурирование страницы старым способом ................................................................. 66
Структурирование страницы с помощью HTML5 ............................................................. 69
Подзаголовки, созданные элементом <hgroup> ................................................................ 72
Вставка рисунков с помощью элемента <figure> .............................................................. 73
Добавление боковой панели с помощью элемента <aside> ............................................. 76
Браузерная совместимость для семантических элементов ........................................................ 77
Разработка сайта с использованием семантических элементов ................................................ 80
Верхние колонтитулы ........................................................................................................... 80
Создание навигационных ссылок с помощью элемента <nav> ........................................ 83
Нижние колонтитулы ............................................................................................................ 88
Блоки ...................................................................................................................................... 91
Система HTML5 для создания схемы документа ...................................................................... 92
Как просмотреть схему веб-страницы? ............................................................................... 93
Базовые схемы ....................................................................................................................... 94
Элементы для создания блоков ............................................................................................ 96
Решение проблемы со схемой .............................................................................................. 98
Глава 3. Разметка со смыслом ................................................................................. 102
Повторение семантических элементов ..................................................................................... 103
Обозначение дат и времени с помощью элемента <time> .............................................. 104
JavaScript-вычисления и элемент <output> ...................................................................... 106
Выделение текста цветом с помощью элемента <mark> ................................................ 107
Другие стандарты, улучшающие семантику ............................................................................. 109
Стандарт Accessible Rich Internet Applications .................................................................. 110
Стандарт Resource Description Framework ........................................................................ 111
Микроформаты.................................................................................................................... 111
Обозначение контактной информации с помощью микроформата hCard ............ 112
Обозначение событий с помощью микроформата hCalendar ................................. 117
Микроданные ...................................................................................................................... 118
Оглавление 7
Расширенные фрагменты страницы .......................................................................................... 121
Расширенные результаты поиска....................................................................................... 122
Движок для поиска кулинарных рецептов ........................................................................ 126
ЧАСТЬ II. СОЗДАНИЕ СОВРЕМЕННЫХ ВЕБ-СТРАНИЦ ............................. 131
Глава 4. Продвинутые веб-формы .......................................................................... 133
Что такое форма? ........................................................................................................................ 134
Модернизация традиционной HTML-формы ........................................................................... 136
Добавление подсказок ........................................................................................................ 140
Фокус: правильное начало ................................................................................................. 142
Проверка: ошибкам — нет! ........................................................................................................ 142
Как работает проверка HTML5? ........................................................................................ 143
Отключение проверки ........................................................................................................ 145
Оформление результатов проверки ................................................................................... 146
Проверка с помощью регулярных выражений ................................................................. 147
Специализированная проверка .......................................................................................... 149
Поддержка проверки браузерами ...................................................................................... 150
Новые типы элемента <input> ................................................................................................... 154
Адреса электронной почты ................................................................................................ 156
URL-адреса .......................................................................................................................... 157
Поля поиска ......................................................................................................................... 157
Телефонные номера ............................................................................................................ 158
Числа .................................................................................................................................... 158
Ползунки .............................................................................................................................. 159
Дата и время ........................................................................................................................ 160
Цвет ...................................................................................................................................... 161
Новые элементы .......................................................................................................................... 162
Подсказки ввода <datalist> ................................................................................................ 162
Индикатор выполнения <progress> и счетчик <meter> .................................................. 165
Элементы <command> и <menu> для создания кнопок команд и меню ....................... 168
Веб-страница как HTML-редактор ............................................................................................ 168
Редактирование элементов с помощью атрибута contentEditable................................... 169
Редактирование страницы с помощью атрибута designMode ......................................... 171
Глава 5. Аудио и видео ............................................................................................... 174
Основные сведения о воспроизведении видео в современных программах .......................... 175
Представляем видео и аудио HTML5 ........................................................................................ 176
Воспроизведение аудио с помощью элемента <audio> .................................................. 177
Воспроизведения видео с помощью элемента <video> ................................................... 179
Войны форматов и резервные решения .................................................................................... 181
Знакомимся с форматами ................................................................................................... 182
Поддержка браузерами форматов мультимедиа .............................................................. 184
Множество форматов: как понравиться всем браузерам ................................................. 186
Элемент <source> ............................................................................................................... 187
Резервное решение Flash .................................................................................................... 188
Управление плеером посредством JavaScript ........................................................................... 193
Добавление звуковых эффектов ........................................................................................ 193
Создание своего видеопроигрывателя .............................................................................. 197
8 Оглавление
Проигрыватели на JavaScript.............................................................................................. 201
Субтитры и доступность ..................................................................................................... 203
Глава 6. Основы рисования на холсте .................................................................... 205
Базовые возможности холста ..................................................................................................... 206
Прямые линии ..................................................................................................................... 208
Пути и фигуры ..................................................................................................................... 211
Кривые линии ...................................................................................................................... 214
Трансформации ................................................................................................................... 217
Прозрачность ....................................................................................................................... 220
Создание простой программы рисования ................................................................................. 223
Подготовка к рисованию .................................................................................................... 223
Рисование на холсте ............................................................................................................ 225
Сохранение содержимого холста....................................................................................... 227
Совместимость холста с браузерами ......................................................................................... 231
Холст на заполнителе ......................................................................................................... 231
Резервное решение для холста и определение возможностей ........................................ 233
Глава 7. Продвинутые методы работы с холстом ................................................ 235
Что еще можно рисовать на холсте? ......................................................................................... 235
Вставка в холст изображений ............................................................................................ 236
Обрезка, разрезка и изменение размеров изображения ................................................... 238
Вставка в холст текста ........................................................................................................ 240
Тени и вычурные заливки .......................................................................................................... 241
Создание теней .................................................................................................................... 242
Заполнение фигур изображениями .................................................................................... 244
Градиентная заливка фигур ................................................................................................ 245
Обобщая сказанное: рисуем график .................................................................................. 249
Как сделать фигуры интерактивными? ..................................................................................... 254
Отслеживание нарисованного содержимого .................................................................... 255
Проверка на столкновение посредством сравнения координат ...................................... 259
Анимация на холсте .................................................................................................................... 261
Простая анимация ............................................................................................................... 262
Анимация нескольких объектов ........................................................................................ 263
Практический пример: игра "Лабиринт" .................................................................................. 268
Подготовительные работы ................................................................................................. 270
Анимация значка ................................................................................................................. 272
Проверка на столкновение с использованием цвета пикселов........................................ 274
Глава 8. Совершенствование стилей с помощью CSS3 ....................................... 278
Современное использование CSS3 ............................................................................................ 279
Стратегия 1: используйте то, что можно ........................................................................... 279
Стратегия 2: рассматривайте возможности CSS3 как усовершенствования ................. 280
Стратегия 3: добавляйте резервные решения с помощью Modernizr ............................. 281
Стили, специфичные для конкретных браузеров ............................................................. 284
Типография для Интернета ........................................................................................................ 286
Форматы веб-шрифтов ....................................................................................................... 287
Наборы шрифтов ................................................................................................................. 289
Веб-шрифты Google ............................................................................................................ 292
Оглавление 9
Использование своих шрифтов .......................................................................................... 295
Размещение текста в несколько колонок .......................................................................... 296
Адаптация к разным устройствам ............................................................................................. 298
Запросы о возможностях отображения ............................................................................. 299
Продвинутые запросы о возможностях ............................................................................ 303
Полная замена таблицы стилей .......................................................................................... 305
Распознавание мобильных устройств................................................................................ 306
Рисование эффектных рамок ..................................................................................................... 308
Прозрачность ....................................................................................................................... 308
Скругление углов ................................................................................................................ 310
Фон ....................................................................................................................................... 311
Тени ...................................................................................................................................... 313
Градиенты ............................................................................................................................ 314
Создание эффектов перехода ..................................................................................................... 316
Простой цветовой переход ................................................................................................. 317
Еще несколько идей с переходами .................................................................................... 319
Трансформации ................................................................................................................... 320
ЧАСТЬ III. СОЗДАНИЕ ИНТЕЛЛЕКТУАЛЬНЫХ ВЕБ-ПРИЛОЖЕНИЙ ..... 325
Глава 9. Хранение данных ........................................................................................ 327
Основы веб-хранилища .............................................................................................................. 328
Сохранение данных ............................................................................................................. 329
Практический пример: сохранение текущего состояния игры ....................................... 331
Поддержка веб-хранилища браузерами ............................................................................ 334
Продвинутые методы работы с веб-хранилищем .................................................................... 334
Удаление элементов ............................................................................................................ 334
Поиск всех сохраненных элементов .................................................................................. 335
Сохранение чисел и дат ...................................................................................................... 336
Сохранение объектов .......................................................................................................... 337
Реагирование на изменения в хранилище ......................................................................... 339
Чтение файлов ............................................................................................................................. 341
Получение файла ................................................................................................................. 342
Поддержка браузерами интерфейса File API .................................................................... 342
Чтение текстового файла .................................................................................................... 343
Замена элемента <input> .................................................................................................... 345
Одновременное считывание нескольких файлов ............................................................. 346
Чтение файла изображения ................................................................................................ 346
Глава 10. Автономные приложения ........................................................................ 351
Кэширование файлов с помощью манифеста ........................................................................... 352
Создание манифеста ........................................................................................................... 353
Использование манифеста .................................................................................................. 356
Помещение манифеста на веб-сервер ............................................................................... 356
Обновление файла манифеста ............................................................................................ 359
Браузерная поддержка автономных приложений............................................................. 362
Практические методы кэширования ......................................................................................... 362
Доступ к онлайновым файлам ........................................................................................... 363
Добавление резервных решений ........................................................................................ 364
