Обзор возможностей HTML5
Download as PPTX, PDF0 likes663 views
Документ представляет собой обзор возможностей HTML5, включая новые теги, атрибуты и события, которые улучшают интерактивность, семантику и доступность веб-приложений. Он также обсуждает методы хранения данных на клиентской стороне через localStorage и sessionStorage, а также описывает использование кэша и API истории. Документ содержит примеры кода и полезные ссылки для дальнейшего изучения.
![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]): Обновляет текущий
элемент истории](https://image.slidesharecdn.com/1-111129024746-phpapp01/85/HTML5-22-320.jpg)
Обзор возможностей HTML5
- 1. “ОБЗОР ВОЗМОЖНОСТЕЙ HTML5” Тромпак Виталий .NET Developer
- 3. Преимущества: Интерактивность Улучшенная семантика Улучшенная доступность Улучшенное хранение данных Автономный кэш Улучшенные формы
- 5. <!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" /> <!doctype html> < meta charset="UTF-8">
- 6. Новые теги <menu> <hgroup> <keygen> <ruby > <section> <nav> <mark> <rt> <figure> <dialog> <header> <wbr> <figcaption> <footer> <rt> <time>
- 7. Новые теги <audio> <meter> <canvas> <video> <source> <audio> <output> <datalist> <details> <progress> <command>
- 8. Атрибуты тега <audio> Autoplay Controls Src Loop Preload
- 9. Атрибуты тега <video> Autoplay Controls Height Loop Width Preload Poster
- 10. Теги которые не поддерживает HTML5 – acronym –frameset – applet –isindex – basefont –noframes – big –noscript –s – center –strike – dir –tt – font –u – frame
- 11. Новые события относятся к тегу <body>: Атрибуты Описания onafterprint Скрипт выполняется после того как документ напечатан onbeforeprint Скрипт выполняется до того как документ напечатан onbeforeonload Скрипт выполняется перед загрузкой документа onerror Скрипт выполняется при возникновении ошибки onhaschange Скрипт выполняется, когда документ изменился onmessage Скрипт выполняется, когда сообщение срабатывает onoffline Скрипт выполняется, когда документ переходит в автономный режим ononline Скрипт выполняется, когда документ поступает онлайн onpagehide Скрипт выполняется, когда окно скрыто onpageshow Скрипт выполняется, когда окно становится видимым onpopstate Скрипт выполняется, когда история окна изменяется
- 12. Атрибуты Описания onredo Скрипт выполняется, когда документ выполняет повтор onresize Скрипт выполняется при изменении размеров окна onstorage Скрипт запускается при загрузке документа onundo Скрипт выполняется, когда документ выполняет "отменить" onunload Скрипт выполняется, когда пользователь покидает документ
- 13. События выполняются по действиям внутри HTML form. Атрибуты Описания oncontextmenu Скрипт выполняется, когда контекстное меню срабатывает onformchange Скрипт выполняется, когда форма изменена onforminput Скрипт выполняется, когда форма получает пользовательский ввод oninput Скрипт выполняется, когда элемент получает пользовательский ввод oninvalid Скрипт выполняется, когда элемент недействителен
- 14. События мышки Атрибуты Описания ondrag Скрипт выполняется при перетаскивании элемента ondragend Скрипт выполняется по окончании перетаскивания элемента ondragenter Скрипт выполняется, когда элемент перетащен в допустимую цель ondragleave Скрипт выполняется, когда элемент покидает допустимую цель ondragover Скрипт выполняется, когда элемент перетаскивают над допустимой целью падения ondragstart Скрипт выполняется в начале операции перетаскивания ondrop Скрипт выполняется, когда перетаскиваемый элемент отпущен onmousewheel Скрипт выполняется, когда колеса мышки вращаются onscroll Скрипт выполняется, когда полоса прокрутки элемента прокручивается
- 15. События медиа Атрибуты Описания oncanplay Скрипт выполняется, когда медиа может начать играть, но, возможно будет остановлено для буферизации oncanplaythrough Скрипт выполняется, когда медиа может быть проиграно до конца, без остановок для буферизации ondurationchange Скрипт выполняется, когда длина медиа изменилась onemptied Скрипт выполняется, когда ресурс медиа элемента вдруг становится пустым (сетевые ошибки, ошибки при загрузке и т.д.) onended Скрипт выполняется, когда медиа дошло до конца onerror Скрипт выполняется при возникновении ошибки во время загрузки элемента onloadeddata Скрипт выполняется, когда данные медиа загрузились onloadedmetadata Скрипт выполняется, когда продолжительность и другие данные медиа-элемента загрузились onloadstart Скрипт выполняется, когда браузер начинает загружать медиа-данные
- 16. Атрибуты Описания onpause Скрипт выполняется, когда медиа приостановлено onplay Скрипт выполняется, когда медиа, собирается начать играть onplaying Скрипт выполняется, когда медиа начинает играть onprogress Скрипт выполняется, когда браузер получает медиа- данные onratechange Скрипт выполняется, когда скорость проигрываемых медиа данных изменилась onreadystatechange Скрипт выполняется, когда готовое состояние изменилось onseeked Скрипт выполняется, когда атрибут медиа-элемента seeking больше не true, и поиск закончился onseeking Скрипт выполняется, когда атрибут медиа-элемента seeking равен true, и поиск начался onstalled Скрипт выполняется, когда есть ошибки в выборке данных медиа (тупик)
- 17. Новые атрибуты contenteditable tabindex draggable hidden spellcheck contextmenu
- 18. Атрибуты форм Autocomplete Required Novalidate Placeholder Maxlength Autofocus Pattern Step Readonly List
- 19. JS: Geolocation API if (navigator.geolocation) { // Работает } Функция getCurrentPosition navigator.geolocation.getCurrentPosition( function(position) { console.log(position.coords.latitude, position.coords.longitude); }); latitude (широта) longitude (долгота). Метод динамического слижения watchPosition .
- 20. Хранение данных на стороне клиента localStorage - хранит данные без ограничения времени <script> localStorage.lastname="Lisa"; document.write(localStorage.lastname); </script> localStorage.clear(); - очистить всё хранилище sessionStorage - хранит данные одного сеанса <script> sessionStorage.lastname="Lisa"; document.write(sessionStorage.lastname); </script>
- 21. 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
- 22. 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]): Обновляет текущий элемент истории