Новые Типы Значений Атрибутов Элементов Ввода
Уроки 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:
Пример - Линия
Рисует линию, указывая где начать и где остановиться:
|
Пример - Круг
Рисует круг, задав размер, цвет и положение:
|
Пример - Градиент
Рисует градиентный фон с указанными цветами:
|
Пример - Изображение
Вставляет изображение на холст:
Мы поможем в написании ваших работ! |