Новые Типы Значений Атрибутов Элементов Ввода
Уроки HTML5
| HTML5 - это следующее поколение HTML. Уроки HTML5 расскажут вам о новых особенностях HTML5. |
Примеры в Каждом Уроке
В нашем HTML редакторе вы можете отредактировать код HTML и, кликнув кнопку, увидеть результат.
Пример
|
Щелкните на кнопке "Попробуйте сами", чтобы посмотреть, как это работает
Начните изучать HTML5 прямо сейчас!
HTML5 Справочник
На уроках HTML5 вы найдете полные справочники тегов, глобальных атрибутов, стандартных событий, и многое другое.
HTML5
HTML5 улучшает функциональную совместимость и уменьшает стоимость разработки, утверждая точные правила о том, как трактовать все HTML элементы и как обрабатывать ошибки.
В качестве новых особенностей HTML5 можно упомянуть функции для внедрения аудио, видео, графики, веб хранилища на стороне клиента и интерактивные документы. HTML5 также содержит новые элементы, например <nav>, <header>, <footer>, и <figure>.
Группа по разработке HTML5 включает Microsoft, IBM, Apple, Google, AOL, Mozilla, Nokia, Opera и не одну сотню других производителей.
Замечание: HTML5 пока не является рекомендацией W3C!
Упорядочено по Алфавиту
Новый : Новые теги в HTML5.
| Тег | Описание |
| <!--...--> | Определяет комментарий |
| <!DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылку |
| <abbr> | Определяет аббревиатуру |
| <acronym> | Не поддерживается в HTML5 |
| <address> | Определяет элемент "адрес" |
| <applet> | Не поддерживается в HTML5 |
| <area> | Определяет участок на карте изображения |
| <article>Новый | Определяет статью |
| <aside>Новый | Определяет контент - отступление от основного содержания страницы |
| <audio>Новый | Определяет звуковой контент |
| <b> | Определяет жирный текст |
| <base> | Определяет базовый адрес URL для всех ссылок на странице |
| <basefont> | Не поддерживается в HTML5 |
| <bdo> | Определяет направление отображения текста |
| <big> | Не поддерживается в HTML5 |
| <blockquote> | Определяет длинную цитату |
| <body> | Определяет элемент body (тело страницы) |
| <br> | Вставка переноса строки |
| <button> | Определяет кнопку |
| <canvas>Новый | Определяет графику |
| <caption> | Определяет заголовок таблицы |
| <center> | Не поддерживается в HTML5 |
| <cite> | Определяет цитирование |
| <code> | Определяет текст компьютерного кода |
| <col> | Определяет атрибуты для колонок таблицы |
| <colgroup> | Определяет группы колонок таблицы |
| <command>Новый | Определяет командную кнопку |
| <datalist>Новый | Определяет выпадающий список |
| <dd> | Определяет описание термина в списке определений |
| <del> | Определяет удаленный текст |
| <details>Новый | Определяет детали элемента |
| <dfn> | Определяет термин |
| <dir> | Не поддерживается в HTML5 |
| <div> | Служит для группировки элементов |
| <dl> | Определяет список определений |
| <dt> | Определяет термин |
| <em> | Определяет акцентированный текст |
| <embed>Новый | Определяет внешний интерактивный контент или плагин |
| <fieldset> | Определяет набор полей |
| <figcaption>Новый | Определяет заголовок элемента figure |
| <figure>Новый | Определяет группу медиа контента и ее заголовок |
| <font> | Не поддерживается в HTML5 |
| <footer>Новый | Определяет нижний колонтитул (подвал) для раздела или страницы |
| <form> | Определяет форму |
| <frame> | Не поддерживается в HTML5 |
| <frameset> | Не поддерживается в HTML5 |
| <h1> - <h6> | Определяет заголовки 1 - 6 |
| <head> | Определяет информацию о документе |
| <header>Новый | Определяет верхний колонтитул (заголовок) для раздела или страницы |
| <hgroup>Новый | Определяет информацию о разделе документа |
| <hr> | Определяет горизонтальную линию |
| <html> | Определяет html документ |
| <i> | Определяет курсивный (наклонный) текст |
| <iframe> | Определяет встроенное окно (фрейм) |
| <img> | Определяет изображение |
| <input> | Определяет поле ввода |
| <ins> | Определяет вставленный текст |
| <keygen>Новый | Определяет генератор ключей на форме |
| <kbd> | Определяет текст с клавиатуры |
| <label> | Определяет подпись для элемента управления form |
| <legend> | Определяет заголовок в наборе полей |
| <li> | Определяет пункт списка |
| <link> | Определяет ссылку на ресурс |
| <map> | Определяет карту изображения |
| <mark>Новый | Определяет помеченный текст |
| <menu> | Определяет список меню |
| <meta> | Определяет метаинформацию |
| <meter>Новый | Определяет измерение в предопределенном диапазоне |
| <nav>Новый | Определяет ссылки навигации |
| <noframes> | Не поддерживается в HTML5 |
| <noscript> | Определяет участок кода, который будет использоваться, если не работают скрипты |
| <object> | Определяет встроенный объект |
| <ol> | Определяет упорядоченный список |
| <optgroup> | Определяет группу опций |
| <option> | Определяет опцию в выпадающем списке |
| <output>Новый | Определяет некоторые типы вывода |
| <p> | Определяет параграф |
| <param> | Определяет параметр для объекта |
| <pre> | Определяет предварительно отформатированный текст |
| <progress>Новый | Определяет прогресс выполения задачи любого сорта |
| <q> | Определяет короткую цитату |
| <rp>Новый | Используется в ruby комментариях для определения, что показывать, если браузер не поддерживает элемент ruby (агат) |
| <rt>Новый | Определяет объяснение ruby комментариев |
| <ruby>Новый | Определяет ruby комментарий |
| <s> | Определяет текст, который является некорректным |
| <samp> | Определяет образец компьютерного кода |
| <script> | Определяет скрипт |
| <section>Новый | Определяет раздел (рубрику, секцию) |
| <select> | Определяет список выбора |
| <small> | Определяет небольшой текст |
| <source>Новый | Определяет медиа ресурсы, источники |
| <span> | Используется для группировки элементов |
| <strike> | Не поддерживается в HTML5 |
| <strong> | Определяет акцентированный текст |
| <style> | Определяет определение стиля |
| <sub> | Определяет подстрочный текст |
| <summary>Новый | Определяет заголовок элемента "детали" |
| <sup> | Определяет надстрочный текст |
| <table> | Определяет таблицу |
| <tbody> | Определяет тело таблицы |
| <td> | Определяет ячейку таблицы |
| <textarea> | Определяет текстовая область |
| <tfoot> | Определяет нижний колонтитул таблицы |
| <th> | Определяет заголовок столбца/строки таблицы |
| <thead> | Определяет заголовок таблицы |
| <time>Новый | Определяет время/дату |
| <title> | Определяет заголовок документа |
| <tr> | Определяет столбец таблицы |
| <tt> | Не поддерживается в HTML5 |
| <u> | Не поддерживается в HTML5 |
| <ul> | Определяет неупорядоченный список |
| <var> | Определяет переменную |
| <video>Новый | Определяет видео |
| <wbr>Новый | Определяет возможный перенос слова |
| <xmp> | Не поддерживается в HTML5 |
|
|
|
|
|
|
|
|
|
|
|
|
HTML5 - это следующее поколение HTML.
Что Такое HTML5?
HTML5 будет новым стандартом для HTML, XHTML, и для HTML DOM.
Предыдущая версия HTML появилась в 1999. Интернет значительно изменился с тех пор.
Внедрение и разработка HTML5 по-прежнему продолжаются. Однако, большинство современных браузеров уже имеют поддержку HTML5.
Как Появился HTML5?
HTML5 - это результат совместных усилий Консорциума Всемирной Паутины (W3C) и Группы Разработки Техгологий Веб-Приложений Гипертекста (англ. Web Hypertext Application Technology Working Group или WHATWG) - быстрорастущего сообщества людей, заинтересованных в развитии Интернета, основанного в 2004 году производителями браузеров: Apple, Mozilla Foundation и Opera Software.
WHATWG работало с веб формами и приложениями, а W3C работал над XHTML 2.0. В 2006 они решили скооперироваться и создать новую версию HTML.
Было установлено несколько постулатов для HTML5:
- Новые особенности должны базироваться на HTML, CSS, DOM, и JavaScript
- Уменьшение необходимости внешних программных модулей (таких как Flash)
- Улучшенная обработка ошибок
- Больше разметки - чтобы заменить скрипты
- HTML5 должен быть аппаратно независимым
- Процесс разработки должен быть общедоступен
Новые Особенности
Некоторые из наиболее интересных нововведений в HTML5:
- Элемент холст (canvas) для рисования
- Видео (video) и аудио (audio) элементы для проигрывания фильмов и музыки
- Улучшенная поддержка для локального оффлайн хранилища
- Новые специфичные элементы контента, например, article - статья, footer - нижний колонтитул (подвал), header - верхний колонтитул (заголовок), nav - навигация, section - раздел
- Новые элементы управления формы, например calendar - календарь, date- дата, time - время, email - электронная почта, url - адрес, search - поиск
Поддержка Браузеров
HTML5 пока еще не является официальным стандартом и ни один браузер полностью не поддерживает HTML5.
Но все основные браузеры (Safari, Chrome, Firefox, Opera, Internet Explorer) продолжают добавлять новые особенности HTML5 в свои последние версии.
Новые Элементы в HTML5
Интернет значительно изменился с момента появления стандарта HTML 4.01 в 1999.
Сегодня некоторые элементы HTML 4.01 являются устаревшими, никогда не используются, или используются не по назначению. Эти элементы удалены или исправлены в HTML5.
Чтобы лучшим образом обрабатывать сегодняшние интернет потребности, HTML5 также включает новые элементы для улучшения структуры, рисования, медиа контента, и обработки форм.
Новые Элементы Разметки
Новые элементы для улучшения структуры:
| Тег | Описание |
| <article> (статья) | Определяет независимый, самодостаточный контент: это может быть новостная статья, пост блога, форума или другие статьи, которые могут распространяться независимо от остального содержимого сайта |
| <aside> (отступление) | Для контента - отступления от темы, в которой он размещен. Отступление должно быть связано с окружающим контентом |
| <command> (команда) | Кнопка, или переключатель (радио кнопка), или флажок |
| <details> (детали) | Для описания подробностей документа или частей документа |
| <summary> (резюме) | Заголовок (краткое содержание, резюме) внутри элемента details |
| <figure> (иллюстрация, рисунок) | Для группировки отдельно стоящего содержимого, может быть видео |
| <figcaption> (заголовок) | Заголовок раздела иллюстрации, рисунка, схемы и т.п. |
| <footer> (нижний колонтитул, подвал) | Для создания нижнего колонтитула документа или раздела, может включать, например, имя автора, число, когда документ был опубликован, контактную информацию, информацию об авторском праве |
| <header> (заголовок) | Для создания вступительной части документа или раздела, может включать панель навигации |
| <hgroup> | Для группы заголовков с использованием <h1> - <h6>, где наибольший - это главный заголовок раздела, а остальные - это подзаголовки |
| <mark> | Для текста, который необходимо выделить |
| <meter> | Для измерения, используется только если максимальное и минимальное значения известны |
| <nav> | Для панели навигации |
| <progress> | Прогресс состояния работы |
| <ruby> | Для аннотации агатом (агат - от англ. ruby - типографский шрифт, кегль которого равен 5,5 пунктам, используется для уточнения чтения иероглифов в китайском и японском языке) |
| <rt> | Для объяснения ruby-комментария |
| <rp> | Что показывать браузерам, которые не поддерживают элемент ruby |
| <section> | Для раздела (колонки, рубрики) в документе. Используется для создания глав, заголовков, нижних колонитулов или других разделов документа |
| <time> (время) | Для определения времени или даты, или того и другого |
| <wbr> | Разделени слов. Для определения возможности разделения слова с целью переноса на другую строку посредством дефиса. |
Новые Медиа Элементы
HTML5 обеспечивает новый стандарт для медиа содержимого:
| Тег | Описание |
| <audio> (аудио) | Для мультимедийного контента, звуков, музыки или других аудио потоков |
| <video> | Для видео контента, например, фильмов, клипов или других видео потоков |
| <source> | Медиа источники ресурсов, определенных в аудио или видео элементах |
| <embed> | Для встроенного контента, например плагинов |
Элемент Холст
Элемент canvas (холст) испольpует JavaScript для создания рисунков на веб странице.
| Тег | Описание |
| <canvas> | Для создания графики с помощью скрипта |
Новые Элементы Формы
HTML5 предлагает новые элементы формы с дополнительной функциональностью:
| Тег | Описание |
| <datalist> | Список опций для вводимых значений |
| <keygen> | Генерация ключей для аутентификации пользователей |
| <output> | Для различных типов вывода, таких как вывод, написанный скриптом |
Новые Типы Значений Атрибутов Элементов Ввода
Также атрибут type элемента input имеет новые значения - для улучшенного контроля перед отправкой введенных данных на обработку:
| Тип | Описание |
| tel | Вводимое значение представляет телефонный номер |
| search | Поле ввода является поисковым полем |
| url | Вводимое значение - это адрес URL |
| Вводимое значение - один или несколько адресов email | |
| datetime | Вводимое значение представляет дату и/или время |
| date | Ввод даты |
| month | Ввод месяца |
| week | Ввод недели |
| time | Ввод времени |
| datetime-local | Вводимое значение - это местные дата/время |
| number | Ввод числового значения |
| range | Ввод числа в заданном диапазоне |
| color | Ввод цвета в шестнадцатеричном формате, например #FF7700 |
Многие современные вебсайты показывают видео. HTML5 обеспечивает стандарт для поддержки видео
Поддерживает ли ваш браузер видео HTML5?
|
Видео в Интернете
Прежде не было единого стандарта для демонстрации видео на веб странице.
Сегодня большинство видеоклипов воспроизводятся посредством плагинов (например flash). Однако, не все браузеры имеют одни и те же плагины.
HTML5 определяет стандартный способ включения видео - с помощью элемента video.
Видео Форматы
На текущий момент, существует 3 поддерживаемых видео формата для элемента video:
| Формат | IE | Firefox | Opera | Chrome | Safari |
| Ogg | Нет | 3.5+ | 10.5+ | 5.0+ | Нет |
| MPEG 4 | 9.0+ | Нет | Нет | 5.0+ | 3.0+ |
| WebM | Нет | 4.0+ | 10.6+ | 6.0+ | Нет |
- Ogg = Ogg файлы с видео кодеком Theora и аудио кодеком Vorbis
- MPEG4 = MPEG 4 файлы с видео кодеком H.264 и аудио кодеком AAC
- WebM = WebM файлы с видео кодеком VP8 и аудио кодеком Vorbis
Как Это Работает
Вот все что требуется для воспроизведения видео в HTML5:
| <video src="movie.ogg" controls="controls"> </video> |
Атрибут control - для добавления кнопок play (воспроизведение), pause (пауза), и volume (громкость).
Также желательно добавлять атрибуты width (ширина) и height (высота).
Вставьте альтернативный контент между тегами <video> и </video> для браузеров, которые не поддерживают элемент video:
Пример
|
Пример выше использует Ogg файл и будет работать в Firefox, Opera и Chrome.
Чтобы видеоклип работал также и в Internet Explorer, Safari и будущих версиях Chrome, мы должны добавить файлы MPEG4 и WebM.
Элемент video допускает несколько элементов-источников source. Элементы-источники могут ссылаться на различные видео файлы. Браузер выберет первый распознаваемый формат:
Пример
|
Все <video> Атрибуты
| Атрибут | Значение | Описание |
| audio | muted | Определение состояния аудио по умолчанию. На данный момент, допустимо только "muted" |
| autoplay | autoplay | Если указан, то видео начнет воспроизводиться как только будет готово к воспроизведению |
| controls | controls | Если указан, кнопки управления (кнопка play и другие) будут показаны |
| height | пикселы | Устанавливает высоту видеоплеера |
| loop | loop | Если указан, то видео будет воспроизводиться снова и снова |
| poster | адрес url | Указывает адрес изображения, представляющего видеоклип |
| preload | preload | Если указан, видео будет загружаться при загрузке страницы и сразу готово к запуску. Игнорируется, если "autoplay" присутствует |
| src | адрес url | Адрес URL видеоклипа для воспроизведения |
| width | пикселы | Установка ширины видеоплеера |
HTML5 обеспечивает стандарт для воспроизведения аудио.
Аудио в Интернете
Прежде не было единого стандарта для проигрывания аудио в интернете.
Сегодня, большинство аудиотреков проигрываются через плагины (например, flash). Однако, не во всех браузерах установлены одни и те же плагины.
HTML5 Определяет общий способ включения аудио - с помощью элемента audio.
Элемент audio может воспроизводить звуковые файлы, или аудио потоки.
Аудио Форматы
На текущий момент существует 3 основных формата для элемента audio:
| Формат | IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
| Ogg Vorbis | Нет | Да | Да | Да | Нет |
| MP3 | Да | Нет | Нет | Да | Да |
| Wav | Нет | Да | Да | Да | Да |
Как Это Работает
Чтобы проиграть аудио файл в HTML5, необходимо добавить следующий код:
| <audio src="song.ogg" controls="controls"> </audio> |
Атрибут control используется для добавления кнопок управления (play, pause, volume).
Вставьте альтернативный контент между тегами <audio> и </audio> для браузеров, которые не поддерживают элемент audio:
Пример
|
Пример выше использует файл Ogg и будет работать в Firefox, Opera и Chrome.
Чтобы заставить его работать также и в Internet Explorer и Safari, добавьте MP3 аудио файл.
Элемент audio позволяет использовать несколько элементов source. Элементы источники могут указывать на различные аудио файлы. Браузер будет использовать первый пригодный файл:
Пример
|
Все <audio> Атрибуты
| Атрибут | Значение | Описание |
| autoplay | autoplay | Указывает, что аудио начнет проигрываться, как только будет к этому готово. |
| controls | controls | Отображает кнопки управления, такие как play. |
| loop | loop | Аудио будет проигрываться циклически |
| preload | preload | Указывает, что аудио должно загружаться вместе с загрузкой веб страницы. Игнорируется, если присутствует autoplay. |
| src | адрес url | Определяет адрес аудио, которое будет проигрываться |
Элемент canvas (холст) используется для рисования графики на веб странице.
Что Такое Холст?
HTML5 элемент canvas использует JavaScript для рисования графики на веб странице.
Холст - это прямоугольная площадь, и вы можете контролировать каждый пиксел на ней.
Элемент canvas имеет несколько методов для рисования траекторий, прямоугольников, окружностей, символов и добавления изображений.
Создание Элемента Холст
Добавьте элемент canvas к странице HTML5.
Укажите идентификатор id, ширину width, и высоту height для элемента:
| <canvas id="myCanvas" height="100"></canvas> |
Рисуйте с Помощью JavaScript
Сам по себе элемент canvas не имеет возможностей рисования. Все рисование должно выполняться в скрипте:
|
JavaScript использует идентификатор id, чтобы найти элемент canvas:
| var c=document.getElementById("myCanvas"); |
Затем создается объект контекста:
| var cxt=c.getContext("2d"); |
Объект getContext("2d") - это встроенный в HTML5 объект с многочисленными методами для рисования траекторий, прямоугольников, окружностей, символов и много другого.
Следующие две строки рисуют красный прямоугольник:
| cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); |
Метод fillStyle делает его красным, а метод fillRect указывает форму, положение и размер прямоугольника.
Координаты
Метод fillRect выше имеет параметры (0,0,150,75).
Это означает: Нарисовать прямоугольник размером 150x75 на холсте, начиная с левого верхнего угла (0,0).
Координаты холста X и Y используются для позиционирования рисуемых фигур на холсте.
Переместите мышь над прямоугольником ниже, чтобы увидеть координаты:
| X | ||
| Y | ||
Еще Примеры Работы с Холстом
Ниже приведены дополнительные примеры рисования на элементе canvas:
| Пример - Линия
Рисует линию, указывая где начать и где остановиться:
|
| Пример - Круг
Рисует круг, задав размер, цвет и положение:
|
| Пример - Градиент
Рисует градиентный фон с указанными цветами:
|
| Пример - Изображение
Вставляет изображение на холст:
 Мы поможем в написании ваших работ! |