Loading
Красноглазым Джедаям
компьютерной вселенной
посвящается.

HTML5

В этом разделе описаны новые элементы, которые будут использоваться в HTML5. Поддержка их уже реализована во всех основных браузерах, но есть определенные тонкости применения, которые обеспечат безукоризненную работу ваших программ во всех запредельно экстремальных условиях применения. Универсальность этих элементов выстрадана годами применения специфиации языка и многими трудами ученых, изучающих это творение Тима Бернеса Ли.

В каждом возрасте свои прелести, а в молодости еще и чужие.

Проблеммы со старыми браузерами

В CSS добавим код: article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; }

Если вы помещаете неизвестный элемент на web-страницу, по умолчанию браузер будет интерпретировать его просто как <span>, т.е. анонимный встроенный элемент. Добавим в стили вышеуказанный код, и проблема решена. Исправление для IE кажется нелогичным, но к счастью достаточно простым. Для каждого используемого элемента HTML5 необходимо вставить строку JavaScript в заголовок документа следующим образом:

<script> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption'); </script>

Описание новых элементов

Определение типа документа

<!DOCTYPE html>

Все просто и предельно ясно. Больше не нужно запоминать длинные и трудные строки объявления типа документа.

Объявление кодировки

<meta charset="utf-8" />

Вам необходимо объявить множество символов документа среди первых 512 байтов, чтобы защититься от серьезной угрозы безопасности.

Верхний колонтитул сайта

Верхний колонтитул документа выглядит следующим образом: <header> <hgroup> <h1>A history of Pop Will Eat Itself</h1> <h2>Introducing the legendary Grebo Gurus!</h2> </hgroup> </header>

<header>: Используется для верхнего колонтитула сайта. Назначение элемента <header> состоит в создании оболочки вокруг раздела контента, который формирует верхний колонтитул страницы, содержащий обычно логотип компании/графику, заголовок основной страницы, и т.д. <hgroup>: Используется в качестве оболочки скрытия более одного заголовка, если требуется, чтобы учитывался только один заголовок в структуре заголовков страницы.

Нижний колонтитул сайта

<footer> <h3 id="copyright">Copyright and attribution</h3> </footer>

<footer>: Используется для нижнего колонтитула сайта. Если просмотреть нижнюю часть какого-то количества сайтов, то легко увидеть, что нижние колонтитулы могут содержать различные вещи, от уведомления об авторских правах и контактной информации, до заявления о доступности, информации о лицензировании и множества других второстепенных ссылок. Не существует ограничения только на один верхний и нижний колонтитул на страницу — страница может содержать несколько статей, и иметь для каждой статьи верхний и нижний колонтитул.

Навигационные функции страницы

<nav> <h2>Contents</h2> <ul> <li><a href="#Intro">Introduction</a></li> <li><a href="#History">History</a> <!—другие навигационные ссылки ... --> </ul> </nav>

<nav>: Содержит навигационные функции страницы. Предназначен для разметки навигационных ссылок или других конструкций (например, формы поиска), которые направляют вас на различные страницы текущего сайта, или различные области текущей страницы.

Автономный фрагмент контента

<article> <section id="Intro"> <h2>Introduction</h2> </section> <section id="History"> <h2>History</h2> </section> <section id="Discography"> <h2>Discography</h2> </section> </article>

<article>: Содержит автономный фрагмент контента, который будет иметь смысл, если используется как позиция RSS, например, новостное сообщение. В основном элемент <article> предназначен для независимых фрагментов контента, которые будут иметь смысл вне контекста текущей страницы, и могут хорошо объединяться. Такие фрагменты контента включают публикации в блоге, видео и его текстовая запись, новостная история, или одна часть серийной истории. <section>: Используется либо для объединения в группу различных статей с различной целью или по различным темам, или для определения различных разделов одной статьи. Может использоваться для создания раздела основного контента. Элемент <section>, предназначен для разбиения контента страницы на различные функциональные или тематические области, или разбиения статьи или истории на различные части.

Разметка времени и даты

<time datetime="1989-03-13">13th March 1989</time> <time datetime="1989-03-13">March 13 1989</time> <time datetime="1989-03-13">My nineteenth birthday</time>

<time>: Используется для разметки времени и даты.

Боковые панели

<aside class="right_block"> </aside>

<aside>: Определяет блок контента, который связан с основным контентом, но не входит в его основной поток. подходящими кандидатами для элементов <aside> являются списки ссылок на внешний связанный контент, справочная информация, цитаты, и боковые панели.

Вставка изображений

<figure> <img src="pwei.png" alt="Old poppies logo" /> <figcaption> The old poppies logo, circa 1987.<br /> <a href="http://www.flickr.com/photos/bobcatrock/317261648/"> Original picture on Flickr</a>, taken by bobcatrock. </figcaption> </figure>

<figure> и <figcaption>: Используется для инкапсуляции рисунка как единого элемента, и содержит, соответственно, подпись для рисунка.

Дивы используются для стилевого оформления

<div id="wrapper"> </div>

Элемент <div id="wrapper">, использован для создания оболочки вокруг всего контента. Причина его использования в том, чтобы например использовать CSS для выравнивания контента по центру в браузере.

Цветной маркер

<mark> </mark>

Элемент <mark> предназначен для выделения терминов, значимых в данный момент, или выделения частей контента, к которым вы просто хотите привлечь внимание, но не хотите изменять семантическое значение. Это похоже на то, как при просмотре напечатанной статьи вы выделяете важные для вас строки с помощью цветного маркера.

Атрибут hidden

<mark hidden> </mark>

Атрибут hidden, когда применяется к любому элементу, скрывает его полностью от любых форм представления/медиа, и должен использоваться, если вы намерены показать контент позже (например, используя JavaScript для удаления этого атрибута), но не хотите, чтобы он отображался в данный момент.

Управление формами

Счетчик

<input type="number">

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

Тип элемента ввода number
Тип элемента ввода number
Ползунок

<input type="range" id="rangeexample"> <output onforminput="value=weight.value" for="rangeexample"></output>

Создание элемента управления ползунка, позволяющего выбирать в диапазоне значений. По умолчанию, этот элемент ввода обычно не показывает выбранное в данный момент значение, или даже диапазон значений, который он охватывает. Автору нужно будет предоставить их с помощью других средств – например, для отображения текущего значения можно было бы использовать элемент вывода вместе с некоторым кодом JavaScript для обновления вывода, когда пользователь взаимодействует с формой. Элемент вывода вместе с некоторым кодом JavaScript для обновления вывода, когда пользователь двигает ползунок - <output> (вместо простого выталкивания некоторого текста в случайный span или div с помощью innerHTML ).

Тип элемента ввода range
Тип элемента ввода range
Элементы управления датой/временем

<input type="date" … > <input type="time" … >

Типы элементов ввода date и time. Доступен ряд других связанных типов элементов ввода:

datetime:
объединяет функции обоих рассмотренных выше элементов, позволяя выбрать дату и время.
month:
позволяет выбрать месяц, сохраняя его внутренне как число между 1-12, хотя различные браузеры могут предоставлять более развитый механизм выбора, например, как прокручиваемый список названий месяцев.
week:
позволяет выбрать неделю, сохраняемую внутренне в формате 2010-W37 (37 неделя 2010 года), и выбирать с помощью элемента выбора даты.

Тип элемента ввода date
Тип элемента ввода date
Элемент выбора цвета

<input type="color">

Этот тип элемента ввода предоставляет элемент выбора цвета. Реализация в Opera позволяет пользователю выбрать из набора цветов, ввести шестнадцатеричные значения прямо в текстовое поле, или вызвать собственную процедуру выбора цвета операционной системы.

Тип элемента ввода color
Тип элемента ввода color
Поиск

<input type="search">

Текстовый элемент ввода - браузеры будут оформлять эти элементы ввода таким же образом, как оформляются любые функции поиска в конкретной операционной системе.

Тип элемента ввода search
Тип элемента ввода search
Элемент ввода со списком вариантов

<input type="text" list="mydata" … > <datalist id="mydata"> <option label="Mr" value="Mister"> <option label="Mrs" value="Mistress"> <option label="Ms" value="Miss"> </datalist>

<datalist> и атрибут list соединит обыкновенный элемент ввода со списком вариантов, определенным в элементе <datalist>

Тип элемента ввода datalist
Тип элемента ввода datalist
Явно размеченные элементы ввода

<input type="tel"> <input type="e-mail"> <input type="url"> <input type="text" pattern="[a-z]{3}[0-9]{3}">

Браузеры будут отображать их как обычные текстовые поля ввода, но явное указание, какой вид текста ожидается в этих полях, играет важную роль в проверке формы на стороне клиента. браузеры оценивают значения ввода в соответствии со встроенным шаблоном, который определяет, как выглядят допустимые значения в полях ввода этого типа, и будут предупреждать пользователя, когда его ввод не соответствует критериям. Атрибут pattern для определения своего собственного регулярного выражения

Тип элемента ввода email
Тип элемента ввода email
Новые атрибуты

<input type="text"… placeholder="John Doe"> <input type="text" autofocus … > <input type="number" min="1" max="10"> <input type="time" step="1800">

Первый пример размещения замещаемого контента в текстовых полях ввода – например, чтобы предоставить дополнительную информацию об ожидаемом типе информации, ввод которой должен выполнить пользователь – который исчезает, когда элемент управления формы получает фокус.

Второй пример автоматическое помещение поля формы в фокус при загрузке страницы. Помните, что вы не должны иметь на странице более одного элемента управления формы с автофокусом.

Третий пример позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы элементов ввода number, range, time или date (можно даже использовать их для задания верхней и нижней границы дат – например, в форме бронирования путешествия можно ограничить элемент выбора даты, позволяя выбирать только будущие даты). Для элементов ввода range, min и max необходимо определять, какие значения возвращаются при отправке формы.

Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. Например, может потребоваться, чтобы пользователи вводили определенное время, но только с шагом 30 минут. В этом случае можно использовать атрибут step, помня о том, что для элементов ввода time значение атрибута задается в секундах.

Атрибут placeholder
Атрибут placeholder
Принудительное заполнение требуемых полей

<input type="text" required>

Одним из наиболее общих аспектов проверки формы является принудительное заполнение требуемых полей – недопущение отправки формы, пока определенные элементы информации не будут введены. Это можно теперь легко реализовать, добавляя атрибут required к элементам input, select или textarea.

Атрибут required
Атрибут required
Панель индикатора выполнения

<progress> <meter>

Два этих новых элемента очень похожи, оба в результате создают индикатор/панель, выводимую пользователю. Отличие их состоит в их назначении. Как предполагает название, progress предназначен для представления индикатора выполнения, чтобы указать процент завершения определенной задачи, в то время как meter является более общим индикатором скалярного измерения или дробного значения.

Тип элемента ввода meter
Тип элемента ввода meter

Стилевое оформление с помощью CSS3 (новые псевдоклассы!!!)

Код CSS: input[type=text]:focus:valid, input[type=e-mail]:focus:valid, input[type=number]:focus:in-range { outline: 2px #0f0 solid; } input[type=text]:focus:invalid, input[type=e-mail]:focus:invalid, input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }

:required и :optional позволяют явно оформить элементы управления на основе того, имеют они или нет требуемый атрибут :valid и :invalid будут применять стили к элементам управления формы в зависимости от клиентской проверки :in-range и :out-of-range работает специально с элементами управления, которые имеют атрибут min и/или max.

Стилевое оформление с помощью CSS3
Стилевое оформление с помощью CSS3
Размещение видеоматериалов

<video width=320 height=240 controls poster=turkish.jpg> <source src=turkish.mp4 type=video/mp4> Download the <a href=video.mp4>Turkish dancing masterclass video</a> </video>

Свежее печенье

Сессионное хранилище имеет единственное предназначение: Запоминать все данные сеанса и забывать их, как только закрывается используемая вкладка (или окно).

Чтобы задать пару ключ значение в сессионном хранилище - ДЛЯ ОДНОГО СЕАНСА, необходимо написать просто строку следующего вида: sessionStorage.setItem(yourkey, yourvalue);

Чтобы снова извлечь данные, необходимо написать: var item = sessionStorage.getItem(yourkey);

Метод removeItem() используется для удаления определенного объекта из списка: var item = sessionStorage.removeItem(yourkey);

Метод clear() используется для удаления всех объектов в списке; он применяется следующим образом: sessionStorage.clear();

Локальное хранилище используется, если требуется, чтобы данные сохранялись более чем для одного сеанса.

Чтобы сохранить предложение в локальном хранилище, нужно написать что-нибудь следующего вида: localStorage.setItem(1, 'This is a sample sentence');

а чтобы извлечь его: var data = localStorage.getItem(1); Также как и сессионное хранилище, локальное хранилище поддерживает атрибут length, и функции removeItem() и clear(). В настоящее время большинство браузеров, которые реализовали хранилище Web, включая Opera, определяют лимит хранилища как 5 Mb на домен.


Контактная информация

E-Mail: oleynikww@gmail.com

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

Комментарии пользователей