Обзор возможностей html5
TRANSCRIPT
![Page 1: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/1.jpg)
Тромпак Виталий
“ОБЗОР ВОЗМОЖНОСТЕЙ HTML5”
.NET Developer
![Page 2: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/2.jpg)
![Page 3: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/3.jpg)
Интерактивность
Улучшенная семантика
Улучшенная доступность
Улучшенное хранение
данных
Автономный кэш
Улучшенные формы
Преимущества:
![Page 4: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/4.jpg)
Структура документа HTML 5
![Page 5: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/5.jpg)
<!doctype html>< meta charset="UTF-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-
US"><meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
![Page 6: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/6.jpg)
Новые теги
<menu>
<section>
<figure>
<figcaption> <footer>
<dialog>
<nav>
<hgroup> <keygen>
<mark>
<header>
<rt> <time>
<wbr>
<rt>
<ruby >
![Page 7: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/7.jpg)
Новые теги
<audio>
<video>
<output>
<progress>
<command>
<datalist>
<source>
<meter> <canvas>
<audio>
<details>
![Page 8: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/8.jpg)
Атрибуты тега <audio>
Autoplay
Controls
Loop
Preload
Src
![Page 9: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/9.jpg)
Атрибуты тега <video>
Autoplay
Controls
Height
Loop
PosterPreload
Width
![Page 10: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/10.jpg)
Теги которые не поддерживает HTML5
– acronym– applet– basefont– big– center– dir– font– frame
–frameset–isindex–noframes–noscript–s–strike–tt–u
![Page 11: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/11.jpg)
Атрибуты Описанияonafterprint Скрипт выполняется после того как документ
напечатан
onbeforeprint
Скрипт выполняется до того как документ напечатан
onbeforeonload
Скрипт выполняется перед загрузкой документа
onerror Скрипт выполняется при возникновении ошибки
onhaschange Скрипт выполняется, когда документ изменился
onmessage Скрипт выполняется, когда сообщение срабатывает
onoffline Скрипт выполняется, когда документ переходит в автономный режим
ononline Скрипт выполняется, когда документ поступает онлайн
onpagehide Скрипт выполняется, когда окно скрыто
onpageshow Скрипт выполняется, когда окно становится видимым
onpopstate Скрипт выполняется, когда история окна изменяется
Новые события относятся к тегу <body>:
![Page 12: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/12.jpg)
Атрибуты Описания
onredo Скрипт выполняется, когда документ выполняет повтор
onresize Скрипт выполняется при изменении размеров окна
onstorage Скрипт запускается при загрузке документа
onundo Скрипт выполняется, когда документ выполняет "отменить"
onunload Скрипт выполняется, когда пользователь покидает документ
![Page 13: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/13.jpg)
События выполняются по действиям внутри HTML form.Атрибуты Описания
oncontextmenu
Скрипт выполняется, когда контекстное меню срабатывает
onformchange
Скрипт выполняется, когда форма изменена
onforminput Скрипт выполняется, когда форма получает пользовательский ввод
oninput Скрипт выполняется, когда элемент получает пользовательский ввод
oninvalid Скрипт выполняется, когда элемент недействителен
![Page 14: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/14.jpg)
События мышкиАтрибуты Описания
ondrag Скрипт выполняется при перетаскивании элемента
ondragend Скрипт выполняется по окончании перетаскивания элемента
ondragenter Скрипт выполняется, когда элемент перетащен в допустимую цель
ondragleave Скрипт выполняется, когда элемент покидает допустимую цель
ondragover Скрипт выполняется, когда элемент перетаскивают над допустимой целью падения
ondragstart Скрипт выполняется в начале операции перетаскивания
ondrop Скрипт выполняется, когда перетаскиваемый элемент отпущен
onmousewheel
Скрипт выполняется, когда колеса мышки вращаются
onscroll Скрипт выполняется, когда полоса прокрутки элемента прокручивается
![Page 15: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/15.jpg)
Атрибуты Описания
oncanplay Скрипт выполняется, когда медиа может начать играть, но, возможно будет остановлено для буферизации
oncanplaythrough
Скрипт выполняется, когда медиа может быть проиграно до конца, без остановок для буферизации
ondurationchange
Скрипт выполняется, когда длина медиа изменилась
onemptied Скрипт выполняется, когда ресурс медиа элемента вдруг становится пустым (сетевые ошибки, ошибки при загрузке и т.д.)
onended Скрипт выполняется, когда медиа дошло до конца
onerror Скрипт выполняется при возникновении ошибки во время загрузки элемента
onloadeddata Скрипт выполняется, когда данные медиа загрузились
onloadedmetadata
Скрипт выполняется, когда продолжительность и другие данные медиа-элемента загрузились
onloadstart Скрипт выполняется, когда браузер начинает загружать медиа-данные
События медиа
![Page 16: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/16.jpg)
Атрибуты Описания
onpause Скрипт выполняется, когда медиа приостановлено
onplay Скрипт выполняется, когда медиа, собирается начать играть
onplaying Скрипт выполняется, когда медиа начинает играть
onprogress Скрипт выполняется, когда браузер получает медиа-данные
onratechange Скрипт выполняется, когда скорость проигрываемых медиа данных изменилась
onreadystatechange
Скрипт выполняется, когда готовое состояние изменилось
onseeked Скрипт выполняется, когда атрибут медиа-элемента seeking больше не true, и поиск закончился
onseeking Скрипт выполняется, когда атрибут медиа-элемента seeking равен true, и поиск начался
onstalled Скрипт выполняется, когда есть ошибки в выборке данных медиа (тупик)
![Page 17: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/17.jpg)
Новые атрибуты
contenteditab
le
tabindex
draggable
hidden
spellcheck
contextmenu
![Page 18: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/18.jpg)
Атрибуты форм
AutocompleteNovalidateMaxlength Pattern Readonly
Required Placeholder Autofocus Step List
![Page 19: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/19.jpg)
JS: Geolocation API
if (navigator.geolocation) {// Работает}
Функция getCurrentPosition
navigator.geolocation.getCurrentPosition(function(position) {console.log(position.coords.latitude, position.coords.longitude);});
latitude (широта) longitude (долгота).
Метод динамического слижения watchPosition .
![Page 20: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/20.jpg)
Хранение данных на стороне клиента localStorage - хранит данные без ограничения времени
<script> localStorage.lastname="Lisa";
document.write(localStorage.lastname); </script>
localStorage.clear(); - очистить всё хранилище
sessionStorage - хранит данные одного сеанса
<script> sessionStorage.lastname="Lisa";
document.write(sessionStorage.lastname); </script>
![Page 21: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/21.jpg)
HTML5 appcache<html manifest='manifest.appcache'>
CACHE MANIFEST CACHE: #images /images/image1.png /images/image2.png #pages /pages/page1.html /pages/page2.html #CSS /style/style.css #scripts /js/script.js FALLBACK: / /offline.html MIME для веб-сервера AddType text/cache-manifest .appcache
![Page 22: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/22.jpg)
History API Основные методы объекта History:
window.history.length
window.history.state: Возвращает текущий объект
истории
window.history.go(n)
window.history.back() (-1)
window.history.forward()
window.history.pushState(data, title [, url]): Добавляет
элемент истории.
window.history.replaceState(data, title [, url]):
Обновляет текущий элемент истории
![Page 23: Обзор возможностей HTML5](https://reader035.vdocuments.pub/reader035/viewer/2022062319/557ee83fd8b42ad17d8b45a8/html5/thumbnails/23.jpg)
Ссылки
Полезные источникиhttp://oxdef.info/papers/html5/index.htmlhttp://web.izjum.com/javascript-localstoragehttp://vkurseweba.ru/blog/html5-i-budushee-webhttp://xhtml.co.il/ru/http://htmlbook.ru/html
Обратная связь[email protected]://www.facebook.com/profile.php?id=100001799077813
Блогhttp://dev.net.ua/blogs/vitaliitrompak/