Верстка: 2015

понедельник, 19 января 2015 г.

Воспроизведение аудиофайлов с HTML5

<audio id="player" src="sound.mp3"></audio>

<div>

<button onclick="document.getElementById('player').play()">Play</button>

<button onclick="document.getElementById('player').pause()">Pause</button>

<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>

<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>

</div>

HTML5 предварительная загрузка

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

Элемент с автофокусом

<input autofocus="autofocus" />

Скрытые элементы с помощью HTML5

<p hidden>Вы не видите этот текст </p>

Автозаполнение с HTML5 datalist

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">

<option value="MooTools">

<option value="Moobile">

<option value="Dojo Toolkit">

<option value="jQuery">

<option value="YUI">

</datalist>

Regexp шаблоны для проверки форм

<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">

<input title="Минимум 8 знаков, включая минимум одну цифру и одну заглавную букву" type="text" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

<input type="text" required pattern="(+?d[- .]*){7,13}" title="международный или местный номер"/>

Вводные типы URL и email

<input type="url" value="">

<input type="email" pattern="[^ @]*@[^ @]*" value="">

Контекстное меню с HTML5

<section contextmenu="mymenu">

<p>Здесь ваше меню</p>

</section>

<menu type="context" id="mymenu">

<menuitem label="Не копируйте фотографии" icon="img/forbidden.png"></menuitem>

<menu label="Social Networks">

<menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"> </menuitem>

</menu>

</menu>

HTML5-видео с Flash резервом

<video width="640" height="360" controls>

<source src="__VIDEO__.MP4" type="video/mp4" />

<source src="__VIDEO__.OGV" type="video/ogg" />

<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">

<param name="movie" value="__FLASH__.SWF" />

<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />

<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"

title="Не возможно произвести видео, пожалуйста скачайте его" />

</object>

</video>

HTML5 для поддержки видео и аудио (embedded media)

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">

<source src="media/video.mp4" type="video/mp4"></source>

<source src="media/video.webm" type="video/webm"></source>

<source src="media/video.ogg" type="video/ogg"></source>

</video>

<audio controls="controls" preload="none">

<source src="music.ogg" type="audio/ogg">

<source src="music.mp3" type="audio/mpeg">

</audio>

HTML мета тэг для респонсивных макетов

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="HandheldFriendly" content="true">

Простой готовый HTML5 шаблон страницы

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="HandheldFriendly" content="true">

<title>Название страницы</title>

<link rel="shortcut icon" href="favicon.ico">

<link rel="icon" href="favicon.ico">

<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

</body>

</html>

Подписаться на: Сообщения (Atom)