Технологии программирования / ++ Персп технол и языки веб-разработки / ++ Персп технол и языки веб-разраб 1-6, 9, 12 / 9. Новые возм гипертекст разметки в HTML 5
.0.doc9. Новые возможности гипертекстовой разметки в HTML 5.0
Цель лекции: представить новые возможности разметки веб-страниц, предоставляемые в рамках спецификации HTML5 для веб-разработчиков.
HTML5 - пятая версия HTML-стандарта и находится в стадии разработки. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приложений (веб-браузеры, синтаксические анализаторы и т.д.).
HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).
HTML5 - также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.
В HTML5 добавлено много новых синтаксических особенностей. Например, элементы <video>, <audio>, <header> и <canvas> такие же как и в SVG. Эти особенности разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в сети Веб без обращения к плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы более представлять более структурировано семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя при этом некоторые из ранее существоваших элементов и атрибутов были удалены. Некоторые элементы, например, <a>, <menu> и <cite> были изменены, переопределены или стандартизированы.
API и DOM являются фундаментальными частями спецификации HTML5.
Для того чтобы спецификация получила статус "W3C рекомендована", необходимы две полностью законченные и полностью взаимодействующие реализации. При этом многие части спецификации уже стабильны и могут быть реализованы в программных продуктах.
В дополнение к определению разметки HTML5 устанавливается сценарный интерфейс прикладного программирования (API). Существующий интерфейс DOM расширен.
Также добавлены новые API, например:
-
элемент Canvas для непосредственного метода рисования в 2D.
-
контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео;
-
хранение баз данных off-line;
-
редактирование документа;
-
перетаскивание объектов на веб-странице (drag-and-drop);
-
управление историей браузера;
-
тип MIME и регистрация обработчика протокола;
-
поддержка микроданных.
-
Хотя, что HTML5 может обеспечивать анимацию внутри веб-страницы, это утверждение требует уточнения. Для поддержки такой возможности необходимо привлечение JavaScript или CSS 3. Новый элемент управления Canvas служит для отображения графики на виртуальном "полотне". Описание элемента дается в следующем виде:
-
<canvas height="значение высоты"
-
width="значение ширины">
-
</canvas>
-
Собственно построение графики реализуется средствами JavaScript через специальный API, разработанный для элемента Canvas.
-
Отдельные элементы веб-страницы и текста можно перемещать в окне веб-браузера с помощью мыши. Эта возможность реализована с помощью функции перетаскивания (drag-and-drop) через атрибуты элементов HTML5. По умолчанию можно перетаскивать ссылки, выделенные текстовые фрагменты и изображения.
-
К существовавшим ранее элементам управления веб-форм добавились новые элементы: селектор даты и времени, элементы задания числового диапазона, цвета, адреса электронной почты, URL, номера телефона. Появились также новые атрибуты у элементов управления.
-
Пользователь может править содержимое элементов HTML5. Для этого достаточно атрибуту contenteditable присвоить логическое значение true.
-
Объект history позволяет перемещаться вперед и назад по состояниям веб-страниц, которые просматривались в веб-браузере. Пользователь также может помещать текстовые данные в предысторию текущей страницы для последующего их восстановления.
-
Используя простой код JavaScript и HTML5, можно сохранять данные с текущей веб-страницы для последующего их восстановления даже после полной ее перезагрузки. Эти данные могут сохраняться глобально в текущем сеансе (в течение 15 минут, при отсутствии активности пользователя), либо локально в самом веб-браузере.
Семантическая разметка в HTML5
В HTML5 для описания содержимого элементов определена новая, семантическая разметка. Использование семантической разметки не предоставляет никаких непосредственных преимуществ, но значительно облегчает разработку HTML-страниц, и, безусловно, поисковые системы смогут использовать такие элементы разметки при организации поиска и индексирования страниц.
В HTML5 появились новые элементы для сруктурирования веб-страницы:
-
header - содержимое верхней (начальной) части страницы или ее секции
-
footer - содержимое нижней (завершающей) части страницы или ее секции
-
section - секция веб-страницы
-
article - содержимое внешней статьи
-
aside - связанное содержимое или фрагмент
-
nav - навигационные ссылки
Ко всем из перечисленных элементов могут применяться стили CSS. Фактически, как уже отмечалось, когда мы рассматривали применение принципа полезности при проектировании веб-страниц, HTML5 поощряет разделение представления и содержимого, поэтому для стилевого оформления страниц HTML5 рекомендуется использовать CSS.
HTML5 вводит не только новые семантические элементы, но и новые упрощенные способы поиска элементов в DOM-модели страниц.
Ранее использовались следующие методы JavaScript, предназначенные для поиска элементов:
-
getElementById - возвращение элемента с указанным значением атрибута id
-
getElementsByName - возвращение всех элементов с атрибутами name, имеющиюми указанное значение
-
getElementsByTagName - возвращение всех элементов, имя дескриптора которых соответствует указанному имени тега.
Новые селекторные функции предлагают более точные способы указания искомых элементов, не требующие применения циклов и итеративного просмотра документа с помощью стандартной DOM-модели.
К сожалению, не все (или не в полной мере) из новшеств спецификации HTML5 на сегодняшний день поддерживаются веб-браузерами.
XHTML5 - это, по-сути, XML-сериализация языка HTML5. Документы XML должны быть снабжены нотацией XML Internet media type, например, application/xhtml+xml или application/xml.
XHTML5 требует соблюдения строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME содержимого. В HTML5 и XHTML5 doctype html необязателен и может быть просто пропущен.
Спецификация HTML5 предъявляет определенные требования как к клиентским приложениям (браузерам), так и к документам.
Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM).
В старых версиях браузеров новые теги HTML5 будут игнорироваться.
Отличия HTML5 от HTML 4.01 и XHTML 1.x:
-
Новые правила синтаксического анализа.
-
Возможность использовать встроенные SVG и MathML в text/html.
-
Новые элементы: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section , source, summary, time, video, wbr.
-
Новые типы средств управления за формой: dates and times, email, url, search, number, range, tel, color.
-
Новые атрибуты: charset (в meta), async (в script).
-
Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data-* (пользовательские атрибуты данных).
-
Элементы, которые будут исключены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt.
В приведенной ниже таблице сведены все теги HTML с указанием новых элементов (выделены зеленым цветом), появившихся в 5-ой версии, и элементов более не поддерживаемых в новой версии HTML (выделены серым).
|
Элемент |
Описание |
|
|
<!-- --> |
Определяет комментарии |
|
|
<!DOCTYPE> |
Определяет тип документа |
|
|
<a> </a> |
Определяет гиперссылку |
|
|
<abbr> </abbr> |
Определяет аббревиатуру |
|
|
<acronym> </acronym> |
Не поддерживается в HTML 5 |
|
|
<address> </address> |
Отображают текст в формате адреса |
|
|
<applet> </applet> |
Не поддерживается в HTML 5 |
|
|
<area /> |
Определяeт активную область навигационной карты |
|
|
<article> </article> |
Определяет внешний контент |
|
|
<aside> </aside> |
Определяет дополнительный контент |
|
|
<audio> </audio> |
Определяет фоновый звук |
|
|
<b> </b> |
Отображают часть текста полужирным шрифтом |
|
|
<basefont> |
Не поддерживается в HTML 5 |
|
|
<bdo> </bdo> |
Определяет направление текста |
|
|
<big> </big> |
Не поддерживается в HTML 5 |
|
|
<blockquote> </blockquote> |
Определяет блочную цитату |
|
|
<body> </body> |
Определяет тело документа |
|
|
<br /> |
Осуществляет перенос строки |
|
|
<button> </button> |
Создают кнопку |
|
|
<caption> </caption> |
Определяет надпись над таблицей |
|
|
<center> </center> |
Не поддерживается в HTML 5 |
|
|
<cite> </cite> |
Преобразуют текст в наклонный (курсивный) |
|
|
<code> </code> |
Преобразуют текст в моноширинный |
|
|
<col /> |
Определяет свойства колонок таблицы |
|
|
<colgroup> </colgroup> |
Группируют колонки таблицы |
|
|
<command> </command> |
Добавляют команду к кнопке |
|
|
<datalist> </datalist> |
Определяет допустимые значения |
|
|
<dd> </dd> |
Определяет определение списка определений |
|
|
<del> </del> |
Отображают перечеркнутый текст |
|
|
<details> </details> |
Определяет детали документа |
|
|
<dialog> </dialog> |
Определяет диалог |
|
|
<dfn> </dfn> |
Преобразуют шрифт в наклонный |
|
|
<dir> </dir> |
Не поддерживается в HTML 5 |
|
|
<div> </div> |
Определяет секцию документа |
|
|
<dl> </dl> |
Создают список определений |
|
|
<dt> </dt> |
Oпределяют определяемый термин |
|
|
<em> </em> |
Преобразуют текст в наклонный (курсивный) |
|
|
<embed /> |
Внедряет интерактивный объект |
|
|
<fieldset> </fieldset> |
Объединяют элементы формы |
|
|
<figure> </figure> |
Группируют элементы страницы |
|
|
<font> </font> |
Не поддерживается в HTML 5 |
|
|
<footer> </footer> |
Нижняя часть документа |
|
|
<form> </form> |
Определяет HTML форму |
|
|
<frame /> |
Не поддерживается в HTML 5 |
|
|
<frameset> </frameset> |
Не поддерживается в HTML 5 |
|
|
<h1> </h1> - <h6> </h6> |
Определяет заголовки |
|
|
<head> </head> |
Содержат информацию о документе, инструкции |
|
|
<header> </header> |
Определют верхнюю секцию документа |
|
|
<hgroup> </hgroup> |
Определяет группу заголовков |
|
|
<hr /> |
Создает горизонтальную линию |
|
|
<html> </html> |
Определяет HTML документ |
|
|
<i> </i> |
Преобразуют текст в наклонный (курсивный) |
|
|
<iframe> </iframe> |
Создают документ внутри документа |
|
|
<img /> |
Определяет изображение |
|
|
<input /> |
Создаeт поля для ввода данных, кнопки |
|
|
<ins> </ins> |
Преобразуют текст в подчеркнутый |
|
|
<kbd> </kbd> |
Преобразуют текст в моноширинный |
|
|
<label> </label> |
Определяет лeйбу для тега <input /> |
|
|
<legend> </legend> |
Заголовок для тегов <fieldset> </fieldset> |
|
|
<li> </li> |
Определяет элемент (пункт) списка |
|
|
<link /> |
Определяет ссылку на внешний источник |
|
|
<map> </map> |
Определяет навигационную карту |
|
|
<mark> </mark> |
Определяет важную часть текста |
|
|
<menu> </menu> |
Определяет список-меню |
|
|
<meta /> |
Содержит информацию о документе |
|
|
<nav> </nav> |
Определяет группу ссылок |
|
|
<noframes> </noframes> |
Не поддерживается в HTML 5 |
|
|
<noscript> </noscript> |
Предупредят если браузер не читает скрипты |
|
|
<object /> |
Внедряет объекты в web-страницу |
|
|
<ol> </ol> |
Определяет упорядоченный (нумерованный) список |
|
|
<optgroup> </optgroup> |
Определяет группу элементов <option> </option> |
|
|
<option> </option> |
Определяет элемент выпадающего списка |
|
|
<p> </p> |
Определяет параграф |
|
|
<param /> |
Определяет проигрыватель |
|
|
<pre> </pre> |
Определяет отформатированный текст |
|
|
<q> </q> |
Определяет короткую цитату |
|
|
<s> </s> |
Не поддерживается в HTML 5 |
|
|
<samp> </samp> |
Преобразуют текст в моноширинный |
|
|
<script> </script> |
Определяет скрипт |
|
|
<section> </section> |
Определяет секцию документа |
|
|
<select> </select> |
Определяет выпадающий список |
|
|
<small> </small> |
Преобразуют обычный текст в текст более мелкий |
|
|
<span> </span> |
Определяет линейную секцию в документе |
|
|
<strike> </strike> |
Не поддерживается в HTML 5 |
|
|
<strong> </strong> |
Преобразуют шрифт в полужирный |
|
|
<style> </style> |
Определяет стилевые описания |
|
|
<sub> </sub> |
Преобразуют обычный текст в текст в нижнем индексе |
|
|
<sup> </sup> |
Преобразуют обычный текст в текст в верхнем индексе |
|
|
<table> </table> |
Определяет таблицу |
|
|
<tbody> </tbody> |
Определяет тело таблицы |
|
|
<td> </td> |
Определяет ячейку таблицы |
|
|
<textarea> </textarea> |
Определяет текстовое поле |
|
|
<tfoot> </tfoot> |
Определяет нижнюю часть таблицы |
|
|
<th> </th> |
Определяет заголовок таблицы |
|
|
<thead> </thead> |
Определяет верхнюю часть таблицы |
|
|
<time> </time> |
Определяет дату или время |
|
|
<title> </title> |
Определяет основной заголовок документа |
|
|
<tr> </tr> |
Определяет табличный ряд |
|
|
<u> </u> |
Не поддерживается в HTML 5 |
|
|
<ul> </ul> |
Определяет ненумерованный список |
|
|
<var> </var> |
Определяет переменную |
|
|
<video> </video> |
Размещает видео-ролик на web-странице |
|