HTML5 HyperText Markup Language Язык разметки гипертекста. - презентация

1 HTML5 HyperText Markup Language Язык разметки гипертекста

2 Нововведения в html5 Элементы, позволяющие задавать структуру документа Новые возможности форм Стандартная реализация встроенных элементов (звук, видео) Программные средства для работы с графикой

3 Новые элементы article aside audio canvas command datalist details embed figcaption figure footer ruby section source summary svg time track video wbr header hgroup keygen mark math meter nav output progress rp rt

4 Структурные элементы nav – средства навигации article – основное содержание документа section – раздел header – заголовок (сайта, раздела и т.д.) hgroup – группа заголовков footer – «подвал» aside – «плавающее» содержание figure – иллюстрация (не обязательно изображение) figcapture – заголовок иллюстрации address – адрес

5 Элементы для размещения внешних объектов audio – аудиоплеер bgsound – не рекомендуется source – указание альтернативных ресурсов для плееров video – видеоплеер track – указание треков canvas – пространство для графики svg – элемент с командами векторной графики math – математическая формула в формате mathML embed – размещение внешнего элемента

6 Интерактивные элементы menu – меню command – команды меню details – раскрываемый блок summary – его заголовок datalist – список готовых значений в формах keygen – генерация ключей meter – индикатор степени progress – то же для динамической индикации

7 Элементы уровня строки mark – помеченные элементы output – для вывода результата вычислений в формах time – время ruby – Руби rt rp wbr – возможный перевод строки

8 Новые типы элемента input – адрес электронной почты url – url number – число date, month, week, time, datetime – дата и время range – указание значения бегунком color – выбор цвета tel, search – прочее

9 Дополнительные возможности форм Атрибуты: placeholder – замещаемый текст autofocus – автоматическое помещение в фокус min, max – число step – шаг required pattern Элементы: output, meter, progress

10 Примеры работы с графикой Your user agent does not support the HTML5 Canvas element. var myCanvas = document.getElementById("myCanvas"); var canvasContext = myCanvas.getContext("2d"); canvasContext.fillRect(100, 100, 100, 100);