SlideShare a Scribd company logo
1 of 23
“ОБЗОР ВОЗМОЖНОСТЕЙ HTML5”


 Тромпак Виталий
               .NET Developer
Преимущества:

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

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

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

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

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

     Улучшенные формы
Структура документа HTML 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">
Новые теги

     <menu>        <hgroup>   <keygen>   <ruby >




     <section>      <nav>     <mark>      <rt>




      <figure>     <dialog>   <header>   <wbr>




    <figcaption>   <footer>     <rt>     <time>
Новые теги

  <audio>                <meter>      <canvas>




  <video>            <source>          <audio>




  <output>           <datalist>       <details>



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

            Autoplay      Controls


                            Src


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


             Autoplay       Controls



                                Height



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

   –   acronym        –frameset
   –   applet         –isindex
   –   basefont       –noframes
   –   big            –noscript
                      –s
   –   center         –strike
   –   dir            –tt
   –   font           –u
   –   frame
Новые события относятся к тегу <body>:
Атрибуты        Описания
onafterprint    Скрипт выполняется после того как документ напечатан
onbeforeprint   Скрипт выполняется до того как документ напечатан
onbeforeonload Скрипт выполняется перед загрузкой документа
onerror         Скрипт выполняется при возникновении ошибки
onhaschange     Скрипт выполняется, когда документ изменился
onmessage       Скрипт выполняется, когда сообщение срабатывает
onoffline       Скрипт выполняется, когда документ переходит в
                автономный режим
ononline        Скрипт выполняется, когда документ поступает онлайн
onpagehide      Скрипт выполняется, когда окно скрыто
onpageshow      Скрипт выполняется, когда окно становится видимым
onpopstate      Скрипт выполняется, когда история окна изменяется
Атрибуты    Описания
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            Скрипт выполняется, когда есть ошибки в выборке
                     данных медиа (тупик)
Новые атрибуты
     contenteditable

     tabindex

     draggable

     hidden

     spellcheck

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

  Autocomplete   Required
  Novalidate     Placeholder
  Maxlength      Autofocus
    Pattern      Step
    Readonly      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.html
http://web.izjum.com/javascript-localstorage
http://vkurseweba.ru/blog/html5-i-budushee-web
http://xhtml.co.il/ru/
http://htmlbook.ru/html

Обратная связь
VitalTrompak@gmail.com
http://www.facebook.com/profile.php?id=100001799077813

Блог
http://dev.net.ua/blogs/vitaliitrompak/

More Related Content

What's hot

Инструментируй это
Инструментируй этоИнструментируй это
Инструментируй этоRoman Dvornov
 
Alexander manuhin selenium_php_v2.0
Alexander manuhin selenium_php_v2.0Alexander manuhin selenium_php_v2.0
Alexander manuhin selenium_php_v2.0matroskin1980
 
Система обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на GroovyСистема обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на GroovyRegn
 
JavaScript Базовый. Занятие 04.
JavaScript Базовый. Занятие 04.JavaScript Базовый. Занятие 04.
JavaScript Базовый. Занятие 04.Igor Shkulipa
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.Igor Shkulipa
 
Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...
Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...
Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...Denis Tsvettsih
 
Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"
Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"
Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"Yandex
 
Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)
Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)
Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)Ontico
 
Документирование исходных текстов (javadoc)
Документирование исходных текстов (javadoc)Документирование исходных текстов (javadoc)
Документирование исходных текстов (javadoc)Fedor Malyshkin
 
Selenium, а давай подождем?
Selenium, а давай подождем?Selenium, а давай подождем?
Selenium, а давай подождем?SQALab
 
Автоматизация функционального тестирования REST API
Автоматизация функционального тестирования REST APIАвтоматизация функционального тестирования REST API
Автоматизация функционального тестирования REST APIPavel Asanov
 
Модульная структура
Модульная структураМодульная структура
Модульная структураDenis Tsvettsih
 
FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentationIvan Filimonov
 
Скриптовой язык Groovy и его применение в рамках разработки ПО
Скриптовой язык Groovy и его применение в рамках разработки ПОСкриптовой язык Groovy и его применение в рамках разработки ПО
Скриптовой язык Groovy и его применение в рамках разработки ПОFedor Malyshkin
 
Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныRoman Dvornov
 
Как написать XAML-приложение без Message Bus
Как написать XAML-приложение без Message Bus Как написать XAML-приложение без Message Bus
Как написать XAML-приложение без Message Bus Denis Tsvettsih
 
Разработка WPF приложений в стиле ViewModel First
Разработка WPF приложений в стиле ViewModel FirstРазработка WPF приложений в стиле ViewModel First
Разработка WPF приложений в стиле ViewModel FirstDenis Tsvettsih
 

What's hot (20)

Selenium vs AJAX
Selenium vs AJAXSelenium vs AJAX
Selenium vs AJAX
 
Инструментируй это
Инструментируй этоИнструментируй это
Инструментируй это
 
Alexander manuhin selenium_php_v2.0
Alexander manuhin selenium_php_v2.0Alexander manuhin selenium_php_v2.0
Alexander manuhin selenium_php_v2.0
 
Система обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на GroovyСистема обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на Groovy
 
JavaScript Базовый. Занятие 04.
JavaScript Базовый. Занятие 04.JavaScript Базовый. Занятие 04.
JavaScript Базовый. Занятие 04.
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.
 
Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...
Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...
Объять необъятное, или как использовать несколько MVVM фреймворков в одном XA...
 
Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"
Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"
Владимир Алаев "Разработка на Node.js: инструменты, библиотеки, сервисы"
 
Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)
Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)
Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)
 
Документирование исходных текстов (javadoc)
Документирование исходных текстов (javadoc)Документирование исходных текстов (javadoc)
Документирование исходных текстов (javadoc)
 
Selenium, а давай подождем?
Selenium, а давай подождем?Selenium, а давай подождем?
Selenium, а давай подождем?
 
Автоматизация функционального тестирования REST API
Автоматизация функционального тестирования REST APIАвтоматизация функционального тестирования REST API
Автоматизация функционального тестирования REST API
 
Модульная структура
Модульная структураМодульная структура
Модульная структура
 
FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentation
 
Скриптовой язык Groovy и его применение в рамках разработки ПО
Скриптовой язык Groovy и его применение в рамках разработки ПОСкриптовой язык Groovy и его применение в рамках разработки ПО
Скриптовой язык Groovy и его применение в рамках разработки ПО
 
Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
 
php frameworks
php frameworksphp frameworks
php frameworks
 
Groovy
GroovyGroovy
Groovy
 
Как написать XAML-приложение без Message Bus
Как написать XAML-приложение без Message Bus Как написать XAML-приложение без Message Bus
Как написать XAML-приложение без Message Bus
 
Разработка WPF приложений в стиле ViewModel First
Разработка WPF приложений в стиле ViewModel FirstРазработка WPF приложений в стиле ViewModel First
Разработка WPF приложений в стиле ViewModel First
 

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

MS Swit 2012 - Windows 8 Application Lifecycle
MS Swit 2012 - Windows 8 Application LifecycleMS Swit 2012 - Windows 8 Application Lifecycle
MS Swit 2012 - Windows 8 Application LifecycleДенис Резник
 
Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"Andrew Mayorov
 
Илья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The Grinder
Илья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The GrinderИлья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The Grinder
Илья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The GrinderSQALab
 
Применение фреймворка GStreamer в системе видеонаблюдения
Применение фреймворка GStreamer в системе видеонаблюденияПрименение фреймворка GStreamer в системе видеонаблюдения
Применение фреймворка GStreamer в системе видеонаблюденияcorehard_by
 
06 net saturday eugene zharkov ''silverlight. to oob or not to oob''
06 net saturday eugene zharkov ''silverlight. to oob or not to oob''06 net saturday eugene zharkov ''silverlight. to oob or not to oob''
06 net saturday eugene zharkov ''silverlight. to oob or not to oob''DneprCiklumEvents
 
Silverlight 4, есть ли жизнь на десктопе?
Silverlight 4, есть ли жизнь на десктопе?Silverlight 4, есть ли жизнь на десктопе?
Silverlight 4, есть ли жизнь на десктопе?Eugene Zharkov
 
Дополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOMДополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOMDenis Latushkin
 
Behat в PHP с использованием Behat и Mink
Behat в PHP с использованием Behat и MinkBehat в PHP с использованием Behat и Mink
Behat в PHP с использованием Behat и Minktyomo4ka
 
Froglogic Squish
Froglogic Squish Froglogic Squish
Froglogic Squish SQALab
 
Интерактивность в Html5
Интерактивность в Html5Интерактивность в Html5
Интерактивность в Html5Alexander Samantsov
 
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)Noveo
 
Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush
 
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)Ontico
 
Redux и изоморфные приложения
Redux и изоморфные приложенияRedux и изоморфные приложения
Redux и изоморфные приложенияJohn Wezel
 
Windows Azure & NodeJS Microsoft SWIT 2012
Windows Azure & NodeJS Microsoft SWIT 2012 Windows Azure & NodeJS Microsoft SWIT 2012
Windows Azure & NodeJS Microsoft SWIT 2012 Dmytro Mindra
 
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2GoQA
 
Enterprise flex pure mvc, slides, russian
Enterprise flex pure mvc, slides, russianEnterprise flex pure mvc, slides, russian
Enterprise flex pure mvc, slides, russianSergiy Shychynov
 
Everything you wanted to know about writing async, high-concurrency HTTP apps...
Everything you wanted to know about writing async, high-concurrency HTTP apps...Everything you wanted to know about writing async, high-concurrency HTTP apps...
Everything you wanted to know about writing async, high-concurrency HTTP apps...JavaDayUA
 

Similar to Обзор возможностей HTML5 (20)

MS Swit 2012 - Windows 8 Application Lifecycle
MS Swit 2012 - Windows 8 Application LifecycleMS Swit 2012 - Windows 8 Application Lifecycle
MS Swit 2012 - Windows 8 Application Lifecycle
 
Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"
 
Илья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The Grinder
Илья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The GrinderИлья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The Grinder
Илья Евлампиев - Нагрузочное тестирование веб-приложений с помощью The Grinder
 
Применение фреймворка GStreamer в системе видеонаблюдения
Применение фреймворка GStreamer в системе видеонаблюденияПрименение фреймворка GStreamer в системе видеонаблюдения
Применение фреймворка GStreamer в системе видеонаблюдения
 
06 net saturday eugene zharkov ''silverlight. to oob or not to oob''
06 net saturday eugene zharkov ''silverlight. to oob or not to oob''06 net saturday eugene zharkov ''silverlight. to oob or not to oob''
06 net saturday eugene zharkov ''silverlight. to oob or not to oob''
 
Silverlight 4, есть ли жизнь на десктопе?
Silverlight 4, есть ли жизнь на десктопе?Silverlight 4, есть ли жизнь на десктопе?
Silverlight 4, есть ли жизнь на десктопе?
 
Дополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOMДополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOM
 
Behat в PHP с использованием Behat и Mink
Behat в PHP с использованием Behat и MinkBehat в PHP с использованием Behat и Mink
Behat в PHP с использованием Behat и Mink
 
Froglogic Squish
Froglogic Squish Froglogic Squish
Froglogic Squish
 
Интерактивность в Html5
Интерактивность в Html5Интерактивность в Html5
Интерактивность в Html5
 
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
Многопоточность, работа с сетью (Lecture 12 – multithreading, network)
 
Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush Toster
Pavel Dovbush Toster
 
Browser Persistence Bynet
Browser Persistence BynetBrowser Persistence Bynet
Browser Persistence Bynet
 
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)
 
Redux и изоморфные приложения
Redux и изоморфные приложенияRedux и изоморфные приложения
Redux и изоморфные приложения
 
Windows Azure & NodeJS Microsoft SWIT 2012
Windows Azure & NodeJS Microsoft SWIT 2012 Windows Azure & NodeJS Microsoft SWIT 2012
Windows Azure & NodeJS Microsoft SWIT 2012
 
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
 
Enterprise flex pure mvc, slides, russian
Enterprise flex pure mvc, slides, russianEnterprise flex pure mvc, slides, russian
Enterprise flex pure mvc, slides, russian
 
HTML 5
HTML 5HTML 5
HTML 5
 
Everything you wanted to know about writing async, high-concurrency HTTP apps...
Everything you wanted to know about writing async, high-concurrency HTTP apps...Everything you wanted to know about writing async, high-concurrency HTTP apps...
Everything you wanted to know about writing async, high-concurrency HTTP apps...
 

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

  • 1. “ОБЗОР ВОЗМОЖНОСТЕЙ HTML5” Тромпак Виталий .NET Developer
  • 2.
  • 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]): Обновляет текущий элемент истории