HTML5 (Hyper Text Markup Language, версия 5) является общим термином для последних веб-технологий. Это также последняя итерация HTML. В октябре 2014 года она стала Рекомендацией W3C, в которой были представлены новые элементы и API.

html5 - это основной язык разметки технологий Интернета, используемый для структурирования и представления контента для Всемирной паутины. По состоянию на 28 октября 2014 года это последняя и полная пятая версия стандарта HTML Консорциума World Wide Web (W3C). Предыдущая версия HTML 4 была стандартизирована в 1997 году.

18 января 2011 года W3C представил логотип, который представляет использование или интерес к HTML5. В отличие от других значков, ранее выпущенных W3C, это не означает действительность или соответствие определенному стандарту. С 1 апреля 2011 года этот логотип является официальным.

Примечание: "Термин html5 широко используется в качестве модного слова для обозначения современных веб-технологий, многие из которых (хотя и далеко не все) разрабатываются в WHATWG, в некоторых случаях в сочетании с W3C и IETF". ( Что это за HTML5?)

По сравнению со своими предшественниками (HTML 4.1 и XHTML 1.0) HTML5 вводит новые элементы, а также некоторые функции JavaScript, в том числе:

  • <video> а также <audio> элементы для воспроизведения носителей
  • <canvas> элемент для процедурного рисования
  • новые элементы формы
  • новые типы ввода и атрибуты
  • новые элементы семантического секционирования, такие как:
    • <header>
    • <footer>
    • <nav>
    • <section>
    • <article>
    • <track>
  • Функция перетаскивания
  • API локального хранилища
  • API автономных веб-приложений
  • API устройства, такие как Camera Camera, Location API и т. Д.
  • 3D, графика и эффекты

Определение HTML5 было объявлено завершенным в декабре 2012 года (вместе с Canvas 2D). HTML5 был заменен Рекомендацией W3C на HTML 5.1 в ноябре 2016 года, а HTML5 - на декабрь 2017 года. Следующий раунд стандартизации HTML W3C теперь доступен как черновик HTML 5.3.


Похожие теги: html5-canvas, html5-video, html5-audio, /questions/tagged/html5-animation


HTML5 <video> Элемент

<video> Элемент указывает видео, например, видеоклип или другие видеопотоки.

В настоящее время существует 3 поддерживаемых формата видео для <video> элемент: MP4, WebM и Ogg:

<video> Элемент поддерживается в Internet Explorer 9+, Firefox, Opera, Chrome и Safari.

Примечание. Internet Explorer 8 и более ранние версии не поддерживают этот элемент.


HTML5 <audio> Элемент

<audio> элемент определяет звук, например музыку или другие аудиопотоки.

В настоящее время существует 3 поддерживаемых формата файлов для <audio> Элемент: MP3, WAV и Ogg:

<audio> Элемент поддерживается в Internet Explorer 9+, Firefox, Opera, Chrome и Safari.

Примечание. Internet Explorer 8 и более ранние версии не поддерживают <audio> элемент.


HTML5 <canvas> Элемент

HTML5 <canvas> Элемент используется для рисования графики на лету с помощью сценариев (обычно JavaScript).

<canvas> Элемент является только контейнером для графики. Вы должны использовать скрипт для рисования графики.

В Canvas есть несколько методов для рисования контуров, полей, кругов, текста и добавления изображений.

Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают <canvas> элемент.

Примечание. Internet Explorer 8 и более ранние версии не поддерживают <canvas> элемент.


HTML5 Новые элементы формы

HTML5 имеет следующие новые элементы формы:

  • <datalist>
  • <output>

Примечание. Не все основные браузеры поддерживают все новые элементы формы. Тем не менее, вы уже можете начать использовать их; Если они не поддерживаются, они будут вести себя как обычные текстовые поля.

HTML5 <datalist> Элемент:

<datalist> Элемент определяет список предопределенных параметров для <input> элемент.

<datalist> элемент используется для предоставления функции автозаполнения <input> элементы. Пользователи увидят раскрывающийся список предопределенных параметров при вводе данных.

Использовать <input> атрибут списка элемента, чтобы связать его вместе с <datalist> элемент.

HTML5 <output> Элемент:

<output> элемент представляет результат вычисления (например, выполненный скриптом).


HTML5 Новые атрибуты формы

HTML5 имеет несколько новых атрибутов для <form> а также <input>,

Новые атрибуты для <form> :

  • автозаполнения
  • NOVALIDATE

Новые атрибуты для <input> :

  • автозаполнения
  • автофокусировка
  • форма
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • высота и ширина
  • список
  • мин и макс
  • множественный
  • шаблон (регулярное выражение)
  • заполнитель
  • требуется
  • шаг

1. Автозаполнение атрибута

Атрибут autocomplete указывает, следует ли включать или отключать автозаполнение формы или поля ввода.

Когда автозаполнение включено, браузер автоматически заполняет значения на основе значений, которые пользователь вводил ранее.

Подсказка. Для формы можно включить автозаполнение "включено" и "выключить" для определенных полей ввода или наоборот.

Примечание. Атрибут autocomplete работает со следующими типами: текст, поиск, URL, телефон, электронная почта, пароль, указатели даты, диапазон и цвет.

2. Атрибут novalidate

Атрибут novalidate является логическим атрибутом.

Когда он присутствует, он указывает, что данные формы (входные данные) не должны проверяться при отправке.

3. Атрибут автофокуса

Атрибут autofocus является логическим атрибутом.

Когда он присутствует, он указывает, что <input> элемент должен автоматически получить фокус при загрузке страницы.

4. Форма Атрибут

Атрибут формы указывает одну или несколько форм <input> элемент принадлежит.

Совет. Чтобы ссылаться на несколько форм, используйте разделенный пробелами список идентификаторов форм.

5. Атрибут formaction

Атрибут formaction указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы.

Атрибут formaction переопределяет атрибут action <form> элемент.

Примечание. Атрибут formaction используется с type="submit" и type="image".

6. атрибут formenctype

Атрибут formenctype указывает, как данные формы должны быть закодированы при отправке их на сервер (только для форм с method = "post")

Атрибут formenctype переопределяет атрибут enctype <form> элемент.

Примечание. Атрибут formenctype используется с type="submit" и type="image".

7. атрибут атрибута formmethod

Атрибут formmethod определяет метод HTTP для отправки данных формы на URL-адрес действия.

Атрибут formmethod переопределяет атрибут метода <form> элемент.

Примечание. Атрибут formmethod можно использовать с type="submit" и type="image".

8. форминовалидатный атрибут

Атрибут novalidate является логическим атрибутом.

Когда он присутствует, он указывает, что <input> элемент не должен быть проверен при отправке.

Атрибут formnovalidate переопределяет атрибут novalidate <form> элемент.

Примечание. Атрибут formnovalidate можно использовать с type="submit".

9. Атрибут formtarget

Атрибут formtarget указывает имя или ключевое слово, которое указывает, где отображать ответ, полученный после отправки формы.

Атрибут formtarget переопределяет целевой атрибут <form> элемент.

Примечание. Атрибут formtarget можно использовать с type="submit" и type="image".

10. Высота и ширина Атрибуты

Атрибуты высоты и ширины определяют высоту и ширину <input> элемент.

Примечание: атрибуты высоты и ширины используются только с <input type="image">,

Совет. Всегда указывайте атрибуты высоты и ширины для изображений. Если заданы высота и ширина, пространство, необходимое для изображения, резервируется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него соответствующее пространство. Эффект будет таким, что макет страницы будет меняться во время загрузки (пока загружаются изображения).

11. список атрибутов

Атрибут списка относится к <datalist> элемент, который содержит предопределенные параметры для <input> элемент.

12. минимальные и максимальные атрибуты

Атрибуты min и max определяют минимальное и максимальное значение для <input> элемент.

Примечание. Атрибуты min и max работают со следующими типами ввода: число, диапазон, дата, datetime, datetime-local, month, time и week.

13. множественный атрибут

Атрибут множественного числа является логическим атрибутом.

Когда он присутствует, он указывает, что пользователю разрешено вводить более одного значения в <input> элемент.

Примечание. Атрибут Multiple работает со следующими типами ввода: электронная почта и файл.

14. Атрибут шаблона

Атрибут pattern определяет регулярное выражение, которое <input> значение элемента проверяется по.

Примечание. Атрибут pattern работает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта и пароль.

Совет: используйте глобальный атрибут заголовка, чтобы описать шаблон, чтобы помочь пользователю.

15. атрибут заполнителя

Атрибут placeholder указывает краткую подсказку, которая описывает ожидаемое значение поля ввода (например, примерное значение или краткое описание ожидаемого формата).

Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус.

Примечание. Атрибут placeholder работает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта и пароль.

16. обязательный атрибут

Обязательный атрибут - логический атрибут.

Когда он присутствует, он указывает, что поле ввода должно быть заполнено перед отправкой формы.

Примечание. Обязательный атрибут работает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта, пароль, указатели даты, номер, флажок, радио и файл.

17. Атрибут шага

Атрибут шага определяет допустимые интервалы номеров для <input> элемент.

Пример: если step="3", допустимые номера могут быть -3, 0, 3, 6 и т. Д.

Совет: Атрибут шага может использоваться вместе с атрибутами max и min для создания диапазона допустимых значений.

Примечание. Атрибут шага работает со следующими типами ввода: число, диапазон, дата, дата-время, дата-время-местный, месяц, время и неделя.


Есть несколько вводных сайтов HTML5, таких как Dive into HTML5 или HTML5 Rocks.

Каждая функция имеет различные уровни поддержки в разных веб-браузерах. CanIUse.com и HTML5Test имеют отличную информацию о совместимости между браузерами.

HTML5 включает в себя предыдущие стандарты; следовательно, он обратно совместим с существующим контентом. Однако устаревшие элементы теперь классифицируются как устаревшие.

W3c выпустил спецификацию для HTML5 здесь.

WHATWG активно работает над HTML5 в том смысле, в каком он называется HTML Living Standard, и эти два пути несколько разошлись.

Ресурсы

книги