Обзор возможностей HTML5

Тромпак Виталий

“ОБЗОР ВОЗМОЖНОСТЕЙ HTML5”

.NET Developer

Интерактивность

Улучшенная семантика

Улучшенная доступность

Улучшенное хранение

данных

Автономный кэш

Улучшенные формы

Преимущества:

Структура документа HTML 5

<!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" />

Новые теги

<menu>

<section>

<figure>

<figcaption> <footer>

<dialog>

<nav>

<hgroup> <keygen>

<mark>

<header>

<rt> <time>

<wbr>

<rt>

<ruby >

Новые теги

<audio>

<video>

<output>

<progress>

<command>

<datalist>

<source>

<meter> <canvas>

<audio>

<details>

Атрибуты тега <audio>

Autoplay

Controls

Loop

Preload

Src

Атрибуты тега <video>

Autoplay

Controls

Height

Loop

PosterPreload

Width

Теги которые не поддерживает HTML5

– acronym– applet– basefont– big– center– dir– font– frame

–frameset–isindex–noframes–noscript–s–strike–tt–u

Атрибуты Описанияonafterprint Скрипт выполняется после того как документ

напечатан

onbeforeprint

Скрипт выполняется до того как документ напечатан

onbeforeonload

Скрипт выполняется перед загрузкой документа

onerror Скрипт выполняется при возникновении ошибки

onhaschange Скрипт выполняется, когда документ изменился

onmessage Скрипт выполняется, когда сообщение срабатывает

onoffline Скрипт выполняется, когда документ переходит в автономный режим

ononline Скрипт выполняется, когда документ поступает онлайн

onpagehide Скрипт выполняется, когда окно скрыто

onpageshow Скрипт выполняется, когда окно становится видимым

onpopstate Скрипт выполняется, когда история окна изменяется

Новые события относятся к тегу <body>:

Атрибуты Описания

onredo Скрипт выполняется, когда документ выполняет повтор

onresize Скрипт выполняется при изменении размеров окна

onstorage Скрипт запускается при загрузке документа

onundo Скрипт выполняется, когда документ выполняет "отменить"

onunload Скрипт выполняется, когда пользователь покидает документ

События выполняются по действиям внутри HTML form.Атрибуты Описания

oncontextmenu

Скрипт выполняется, когда контекстное меню срабатывает

onformchange

Скрипт выполняется, когда форма изменена

onforminput Скрипт выполняется, когда форма получает пользовательский ввод

oninput Скрипт выполняется, когда элемент получает пользовательский ввод

oninvalid Скрипт выполняется, когда элемент недействителен

События мышкиАтрибуты Описания

ondrag Скрипт выполняется при перетаскивании элемента

ondragend Скрипт выполняется по окончании перетаскивания элемента

ondragenter Скрипт выполняется, когда элемент перетащен в допустимую цель

ondragleave Скрипт выполняется, когда элемент покидает допустимую цель

ondragover Скрипт выполняется, когда элемент перетаскивают над допустимой целью падения

ondragstart Скрипт выполняется в начале операции перетаскивания

ondrop Скрипт выполняется, когда перетаскиваемый элемент отпущен

onmousewheel

Скрипт выполняется, когда колеса мышки вращаются

onscroll Скрипт выполняется, когда полоса прокрутки элемента прокручивается


oncanplay Скрипт выполняется, когда медиа может начать играть, но, возможно будет остановлено для буферизации

oncanplaythrough

Скрипт выполняется, когда медиа может быть проиграно до конца, без остановок для буферизации

ondurationchange

Скрипт выполняется, когда длина медиа изменилась

onemptied Скрипт выполняется, когда ресурс медиа элемента вдруг становится пустым (сетевые ошибки, ошибки при загрузке и т.д.)

onended Скрипт выполняется, когда медиа дошло до конца

onerror Скрипт выполняется при возникновении ошибки во время загрузки элемента

onloadeddata Скрипт выполняется, когда данные медиа загрузились

onloadedmetadata

Скрипт выполняется, когда продолжительность и другие данные медиа-элемента загрузились

onloadstart Скрипт выполняется, когда браузер начинает загружать медиа-данные

События медиа


onpause Скрипт выполняется, когда медиа приостановлено

onplay Скрипт выполняется, когда медиа, собирается начать играть

onplaying Скрипт выполняется, когда медиа начинает играть

onprogress Скрипт выполняется, когда браузер получает медиа-данные

onratechange Скрипт выполняется, когда скорость проигрываемых медиа данных изменилась

onreadystatechange

Скрипт выполняется, когда готовое состояние изменилось

onseeked Скрипт выполняется, когда атрибут медиа-элемента seeking больше не true, и поиск закончился

onseeking Скрипт выполняется, когда атрибут медиа-элемента seeking равен true, и поиск начался

onstalled Скрипт выполняется, когда есть ошибки в выборке данных медиа (тупик)

Новые атрибуты

contenteditab

le

tabindex

draggable

hidden

spellcheck

contextmenu

Атрибуты форм

AutocompleteNovalidateMaxlength Pattern Readonly

Required Placeholder Autofocus Step List

JS: Geolocation API

if (navigator.geolocation) {// Работает}

Функция getCurrentPosition

navigator.geolocation.getCurrentPosition(function(position) {console.log(position.coords.latitude, position.coords.longitude);});

latitude (широта) longitude (долгота).

Метод динамического слижения watchPosition .

Хранение данных на стороне клиента localStorage - хранит данные без ограничения времени

<script> localStorage.lastname="Lisa";

document.write(localStorage.lastname); </script>

localStorage.clear(); - очистить всё хранилище

sessionStorage - хранит данные одного сеанса

<script> sessionStorage.lastname="Lisa";

document.write(sessionStorage.lastname); </script>

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

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]):

Обновляет текущий элемент истории

Ссылки

Полезные источники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/

Technology

Обзор возможностей HTML5