Новое в HTML5

Интерактивные теги


   В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
<menu>
<command>
<details>
<canvas>

   Тег <menu> являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег <menu> в HTML5 выполняет роль контейнера для тега <command>, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.
...
<menu>
<command onclick="alert('first action')" label=" первое действие"/>
<command onclick="alert('second action')" label=" второе действие"/>
</menu>
...

   Используя эти тэги, мы можем создавать различные интерактивные меню.
   Тег <details> используется, чтобы показать некоторую дополнительную информацию, например, поле справки.
...
<p> Некоторый контент <details>Информация справки</details> ... </p>
...

   Тег <canvas> используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.
<script>
var example = document.getElementById('sample');
var context = example.getContext('2d');
ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);
</script>

...
<canvas id="sample" width="300" height="300"> Ваш браузер не поддерживает HTML5. </canvas>
...

   Атрибут ID используется для идентификации тега <canvas> как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст, заключенный между тегами <canvas>, будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.
   Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб-сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.

Комментариев нет:

Отправить комментарий