HTML5 Теги - Плеер, полоса загрузки, Doctype и прочие!

Перейдём к изучению новых тегов которые появились в HTML5

Сразу замечу что некоторые теги упростили вёрстальщикам жизнь, многие Html5 теги заменяют крупные куски кода которые были в HTML всего на пару символов.

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

1. <audio>

Первым делом хотелось бы показать Html5 плеер.

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

Dj tapolsky - bass rezolution

Код вызова Html5 плеера выглядит вот так:

<p>Dj tapolsky - bass rezolution</p>
<audio controls>
<source src="temp/1.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="temp/1.mp3">Скачайте музыку</a>.
</audio>

2. <!DOCTYPE>

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

<!DOCTYPE html>

3. <canvas>

Тег для создания специальной области, в который можно рисовать по средствам JavaScript.

Данный тег используется для создания анимаций, рисунков, игр.

<canvas id="идентификатор">
</canvas>

4. <address> (Не из HTML5 тегов)

Специальный тег для создания информации об адреcах используемых на сайте. Так же тег address используется поисковыми системами для определения местоположения объектов.

<address>Адрес</address>

5. <progress>

Следующий Html5 тег выводит полосу загрузки того или иного процесса. Изменять прогресс полосы возможно с помощью JavaScript.

Пример:

Пожалуйста, подождите!

Загружено на 50%
<p>Пожалуйста, подождите!</p>
<progress max="100" value="50">
Загружено на <span id="value">50</span>%
</progress>

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Рисуем линии, квадрат и круг с помощью Canvas

Работа с изображением в html5 canvas

Анимированный задний фон для сайта с помощью Canvas и Html5

Конвертируем видео в формат .ogv для воспроизведения через html5 плеер

Узнаём значение post_max_size с помощью функции ini_get

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =