HTML5 Введение

HTML

HTML5 — последняя версия HTML, стандарт которой был окончательно утвержден Консорциумом Всемирной паутины (W3C) в октябре 2014 года.

HTML5 предназначен для поддержки мультимедиа на мобильных устройствах.

HTML5 легко изучать.

Что такое HTML5?

HTML5 — это стандарт HTML нового поколения.

Предыдущая версия HTML, HTML 4.01, появилась в 1999 году. С тех пор веб-мир претерпел огромные изменения.

HTML5 всё ещё дорабатывается. Однако большинство современных браузеров уже имеют некоторую поддержку HTML5.

Как появился HTML5?

HTML5 стал результатом сотрудничества между W3C и WHATWG, где WHATWG расшифровывается как Web Hypertext Application Working Group.

WHATWG занималась веб-формами и приложениями, а W3C сосредоточилась на XHTML 2.0. В 2006 году обе стороны решили сотрудничать, чтобы создать новую версию HTML.

Некоторые интересные новые возможности HTML5:

  • Элемент canvas для рисования
  • Элементы video и audio для воспроизведения медиа
  • Улучшенная поддержка локального офлайн-хранилища
  • Новые специальные элементы контента, такие как article, footer, header, nav, section
  • Новые элементы управления формами, такие как calendar, date, time, email, url, search

HTML5 <!DOCTYPE>

Объявление <!doctype> должно быть первой строкой в документе HTML5, и использовать его очень просто:

<!DOCTYPE html>

Минимальный документ HTML5

Ниже приведён простой документ HTML5:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок документа</title> </head> <body>Содержимое документа......</body> </html>

Примечание:Для веб-страниц на китайском языке необходимо использовать<meta charset="utf-8">чтобы объявить кодировку, иначе может появиться искажённый текст.

Улучшения в HTML5

  • Новые элементы
  • Новые атрибуты
  • Полная поддержка CSS3
  • Видео и аудио
  • 2D/3D-графика
  • Local Storage
  • Локальные данные SQL
  • Веб-приложения

Мультимедиа HTML5

С HTML5 вы можете легко воспроизводить видео и аудио на веб-страницах.

Приложения HTML5

С HTML5 вы можете легко разрабатывать приложения

  • Локальное хранилище данных
  • Доступ к локальным файлам
  • Локальные данные SQL
  • Ссылки на кэш
  • Javascript Workers
  • XHTMLHttpRequest 2

Графика HTML5

С помощью HTML5 можно легко рисовать графику:

HTML5 использует CSS3

  • Новые селекторы
  • Новые атрибуты
  • Анимации
  • 2D/3D-преобразования
  • Скруглённые углы
  • Эффекты тени
  • Загружаемые шрифты

Чтобы узнать больше о CSS3, посетитеУчебник по CSS3 на этом сайте.

Семантические элементы

В HTML5 добавлено много семантических элементов, как показано ниже:

ТегОписание
<article> Определяет независимую содержательную область страницы.
<aside> Определяет содержимое боковой панели страницы.
<bdi> Позволяет сделать фрагмент текста независимым от настройки направления текста родительского элемента.
<command> Определяет командную кнопку, например радиокнопку, флажок или кнопку.
<details> Используется для описания подробностей документа или части документа.
<dialog> Определяет диалоговое окно, например окно запроса.
<summary> Тег содержит заголовок элемента details.
<figure> Указывает независимое потоковое содержимое (изображения, диаграммы, фотографии, код и т. д.).
<figcaption> Определяет подпись/заголовок для элемента <figure>.
<footer> Определяет нижний колонтитул раздела или документа.
<header> Определяет область заголовка документа.
<mark> Определяет текст с пометкой.
<meter> Определяет измерение. Используется только для измерений с известными максимальным и минимальным значениями.
<nav> Определяет раздел навигационных ссылок.
<progress> Определяет ход выполнения задачи любого типа.
<ruby> Определяет ruby-аннотации (китайские фонетические аннотации или символы).
<rt> Определяет пояснение или произношение символов (китайские фонетические аннотации или символы).
<rp> Используется в ruby-аннотациях для определения содержимого, отображаемого браузерами, которые не поддерживают элемент ruby.
<section> Определяет раздел в документе.
<time> Определяет дату или время.
<wbr> Указывает, где в тексте уместен перенос строки.

Формы HTML5

Новые элементы форм, новые атрибуты, новые типы ввода и автоматическая проверка.

Удалённые элементы

Следующие элементы HTML 4.01 были удалены в HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

Contoh di Setiap Bab

Dengan editor HTML kami, Anda dapat mengedit HTML dan mengklik tombol untuk melihat hasilnya secara online.

Примеры

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8">  <title>Пример (example.com)</title>  </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">Browser Anda tidak mendukung tag video.</video> </body> </html>

Попробуйте сами »

Klik tombol "Coba Sendiri" untuk melihat hasilnya secara online

Поддержка HTML5 браузерами

Versi terbaru dari Safari, Chrome, Opera, dan beberapa HTML5. Internet Explorer 9 akan mendukung beberapa fitur HTML5.

Untuk membuat browser di bawah IE9 kompatibel dengan HTML5, gunakan paket html5shiv dari sumber daya statis situs ini:

<!--[if lt IE 9]> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->

Setelah memuat, inisialisasi CSS untuk tag baru:

/*html5*/ article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

Справочное руководство по HTML5

На этом сайте вы можете найти описания тегов и атрибутов HTML5. Для получения подробной информации нажмитеСправочное руководство по HTML5。

Другие расширения