Вводная «лирическая» часть текста
сокращена, т.к. она во многом пересекается с ранее опубликованным
обзорным постом об ;HTML
5, в котором был приведен фрагмент интервью того же автора.
Автор: Лахлан Хант,
http://lachy.id.au
Оригинал:
http://www.alistapart.com/articles/previ…
Перевод: Александр Мусаев,
http://paradigm.ru
div
с указанием для каждого из них имени соответствующего класса или уникального
идентификатора.
div с атрибутами class и id.
В ней содержится «шапка», горизонтальный блок навигационных элементов, блок для
основного текста страницы, вспомогательная колонка справа от него и нижний
колонтитул.div
div заменяются в нашем примере новыми элементами:
header, nav, section, article,
aside, и footer. HTML-код при этом принимает следующий
вид:<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>h1-h6). В спецификации
подробно описан алгоритм
формирования оглавления, в котором не только учитываются новые структурные
элементы, но и сохраняется обратная совместимость с предыдущей версией
стандарта. Это нововведение может быть использовано для автоматической генерации
оглавлений, что упростит навигацию внутри веб-страниц.section и h1:<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>h1 так же возможно использование заголовков других уровней (h2-h6).head интерпретируется как заголовок секции. Такие
контейнеры при необходимости могут содержать не только, собственно, название,
но и подзаголовок, историю изменений, ссылку на автора и любую другую
информацию, которую логично отнести к заголовочной части.<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>footer представляет собой завершающий блок секции,
к которой относится (аналог нижнего колонтитула для страницы «бумажного»
документа). Такие блоки, как правило, содержат вспомогательную информацию
о секции. Например, ссылки на связанные материалы, информацию о правах
на копирование и т.д.<footer>© 2007 Example Inc.</footer>nav предназначен для навигационных ссылок, что полезно как для
межстраничных переходов внутри сайта, так и для внутристраничной навигации (для
организации оглавления).<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>aside используется для вспомогательных материалов,
например, для определения дополнительных колонок с второстепенным текстом
(сайдбаров).<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>section интерпретируется как секция общего назначения.
Такой секцией может быть, например, параграф.<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
...</p>
</section>article определяет независимые секции документа, страницы или
сайта. Этот элемент может использоваться для выделения новостей, сообщений
на форуме, постов или комментариев на блоге и т.д.<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="<a href="http://example.com/">Jack"
title="http://example.com/&quot;&gt;Jack">http://example.com/">Jack</a>
O'Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</header>
<p>That's another great article!</p>
</article>video и audio это будет
действительно просто. Большая часть функций их API будет совпадать, с одной лишь
разницей в ориентации на воспроизведение визуального и невизуального материала.video. Уже сейчас можно
загрузить экспериментальную версию браузера
Opera или последнюю еженочную сборку
WebKit для демонстрации работы приведенных ниже примеров кода. Opera имеет
поддержку Ogg Theora, а WebKit
понимает
все форматы, что и QuickTime, включая кодеки сторонних разработчиков.video, как показано на следующем примере. Атрибут
controls предназначен для определения того, нужно ли будет отобразить
интерфейс стандартного медиаплеера или нет (в нашем случае элементы управления
воспроизведением будут отображены).<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>poster может быть использован для
определения статического изображения, отображаемого в контейнере video
до того, как начнется воспроизведение записи. Существуют форматы видео, которые
имеют аналогичную встроенную возможность (напрмиер, MPEG4), но использование
описанного выше подхода позволяет добиться этой функциональности без привязки
к конкретному кодеку.
audio. Большинство атрибутов у тегов audio и video
совпадают, но у audio по понятным причинам отсутствуют width,
height и poster.<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>source, атрибут src контейнеров
audio и video должен быть опущен, в противном же случае,
теги source будут проигнорированы.<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp"
media="handheld">
<source src="video.ogv" type="video/ogg;
codecs="theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>play() и pause()
(смысл которых понятен из названия), а так же свойство currentTime,
которое в следующем примере используется для «перемотки» видеозаписи в начало.<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;">
<< Rewind</button>
</p>
title в контейнере head,
а так же h1 и p в body.<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>xmlns,
а так же закрывающий тег p (чье наличие в контексте XML
обязательно). Для определения разницы между сериализациями, браузеры будут
использовать значение MIME-типа. Любой документ, определенный как
text/html, должен соответствовать требованиям HTML-сериализации.
В случае же если MIME-тип имеет значение application/xhtml+xml,
должны быть удовлетворены требования XML-сериализации.
|
Программирование для чайников.
|
