Файловый архив студентов. Файловый архив студентов.
1330 вузов, 5510 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Белорусский государственный университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Веб программирование.Начало.doc
Скачиваний:
2
Добавлен:
01.05.2025
Размер:
7 Мб
Скачать
☆
►Содержание►

4.2.3. Новые возможности html5

В HTML5 добавлены новые элементы:

• canvas – для рисования

• video и audio – для мультимедиа

• storage – для хранения данных

• article, footer, header, nav, section – для контента

• calendar, date, time, email, url, search – новые формы.

Первая задача HTML5 – правильно интегрировать мультимедийный контент. В HTML 4.01 для отображения мультимедиа используется Adobe Flash Player, в HTML5 предполагается использоваться теги video и audio без использования дополнительных плагинов.

<video src="video.mp4" controls><⁄video>

<audio src="The Imperial March.mp3" controls></audio>

Поддержка аудио

<audio autoplay="autoplay" controls="controls">

<source src="file.ogg" />

<source src="file.mp3" />

<a href="file.mp3">Download this file.</a>

</audio>

Поддержка видео

<source src="cohagenPhoneCall.ogg" type="video/ogg; codecs='vorbis, theora'" />

<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />

<a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>

</video>

Видео может быть предварительно загружено при помощи preload="preload" или просто добавлением preload: <video preload>

Атрибут Controls. Чтобы отобразить элементы управления, необходимо определить атрибут controls внутри элемента video:

<video preload controls>

Тег <canvas> обеспечивает динамическую перерисовку изображения в зависимости от действий пользователя или изменяемых данных. Он будет описывать размеченную на веб-сайте область, а движок браузера будет отображать в реальном времени графический контент – чертежи, графики, небольшие игры и даже 3D. Для этого разрабатывается стандарт WebGL. Для повышения скорости предусматривается поддержка многопоточности. Эта опция носит название "Web Workes", она выполняет скрипты и веб-приложения параллельно.

Меняется способ хранения информации на клиентском приложении. Сейчас ее можно сохранить только в маленьких файлах cookies. А по новой технологии WebStorage на стороне клиента будут храниться до 10 Мбайт данных в специальной базе данных. С ее помощью можно даже хранить специальные веб-приложения и работать с ними без подключения к интернету.

HTML5 обеспечивает безопасность компонентов. Самая большая угроза в сети исходит из тегов iFrame (в этой области отображается содержимое стороннего сайта). Если в этой области есть вирус, то он может проникнуть в компьютер. В новом стандарте в теги iFrame добавлен фильтр Sandbox, который будет ограничивать действие скриптов с внешних сайтов.

Еще одна новинка – технология WebForms 2.0. Она более эффективно выполняет обработку введенных пользователем данных, что также обеспечивает более высокую скорость. Новые формы: like calendar, date, time, email, url, search.

Теги HTML5. Таблица 4.5.

Тег

Характеристика тега

<!-- -->

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

<!DOCTYPE>

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

<a> </a>

Определяют гиперссылку

<abbr> </abbr>

Определяют аббревиатуру

<address> </address>

Отображают текст в формате адреса

<applet> </applet>

Не поддерживаются в HTML5

<area />

Определяeт активную область навигационной карты

<article> </article>

Новые теги – oпределяют внешний контент

<aside> </aside>

Новые теги – дополнительный контент

<audio> </audio>

Новые теги – определяют фоновый звук

<b> </b>

Отображают часть текста полужирным шрифтом

<basefont>

Не поддерживается в HTML5

<bdo> </bdo>

Определяют направление текста

<big> </big>

Не поддерживаются в HTML5

<blockquote></blockquote>

Определяют блочную цитату

<body> </body>

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

<br />

Осуществляет перенос строки

<button> </button>

Создают кнопку

<caption> </caption>

Определяют надпись над таблицей

<center> </center>

Не поддерживаются в HTML5

<cite> </cite>

Преобразуют текст в курсивный

<code> </code>

Преобразуют текст в моноширинный

<col />

Определяет свойства колонок таблицы

<colgroup> </colgroup>

Группируют колонки таблицы

<command> </command>

Новые теги – добавляют команду к кнопке

<datalist> </datalist>

Новые HTML-теги – определяют допустимые значения

<dd> </dd>

Определение списка определений

<del> </del>

Отображают перечеркнутый текст

<details> </details>

Новые теги – определяют детали документа

<dialog> </dialog>

Новые теги – определяют диалог

<dfn> </dfn>

Преобразуют шрифт в наклонный

<dir> </dir>

Не поддерживаются в HTML5

<div> </div>

Определяют секцию документа

<dl> </dl>

Создают список определений

<dt> </dt>

Oпределяют определяемый термин

<em> </em>

Преобразуют текст в курсивный

<embed />

Новый тег – внедряет интерактивный объект

<fieldset> </fieldset>

Объединяют элементы формы

<figure> </figure>

Новые HTML-теги – группируют элементы страницы

<font> </font>

Не поддерживаются в HTML5

<footer> </footer>

Новые теги – нижняя часть документа

<form> </form>

Определяют HTML-форму

<frame />

Не поддерживается в HTML5

<frameset> </frameset>

Не поддерживаются в HTML5

<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>

Новые теги – определяют группу ссылок

<noscript> </noscript>

Предупредят, если браузер не читает скрипты

<object />

Внедряет объекты в веб-страницу

<ol> </ol>

Определяют упорядоченный (нумерованный) список

<optgroup> </optgroup>

Определяют группу элементов <option> </option>

<option> </option>

Определяют элемент выпадающего списка

<p> </p>

Определяют параграф

<param />

Определяет проигрыватель

<pre> </pre>

Определяют отформатированный текст

<q> </q>

Определяют короткую цитату

<s> </s>

Не поддерживаются в HTML5

<samp> </samp>

Преобразуют текст в моноширинный

<script> </script>

Определяют скрипт

<section> </section>

Новые HTML-теги – определяют секцию документа

<select> </select>

Определяют выпадающий список

<small> </small>

Преобразуют текст в более мелкий

<span> </span>

Определяют линейную секцию в документе

<strike> </strike>

Не поддерживаются в HTML5

<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>

Не поддерживаются в HTML5

<ul> </ul>

Определяют ненумерованный список

<var> </var>

Определяют переменную

<video> </video>

Новые теги – внедряют видео в страницу

В HTML5 удалены следующие теги: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir.

Добавлены новые теги:

<!Doctype html>, section, article, aside, header, footer, nav, figure, audio, video, source, embed, meter, time, canvas, output, datagrid, details, datalist, datatemplate, progress.

Отметим, что по правилам XHTML все теги и атрибуты должны быть набраны в нижнем регистре, кроме тега <!Doctype html>. По этим же правилам необходимо закрывать любые теги, в том числе одиночные, кроме <!Doctype>. Вместо закрывающего тега может быть использована запись: <br />, <hr />, <img />, <input />, <link />, <meta />.

Валидация документов. Валидацией называется проверка документа на соответствие стандартам (www.w3c.org). Валидация широко применяется для проверки XML-документов, и для XHTML-документов.

Способы проверки веб-страниц на наличие ошибок делятся на он­лайновые и локальные. Онлайновые предназначены для проверки страниц через Интернет, а локальные – для проверки документов на текущем компьютере. По адресу http://validator.w3.org располагается распростра­ненный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу; проверку локального файла; проверку введенного в форму кода. Если сайт уже опубликован в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес. Так, вводя http://htmlbook.ru в форме «Validate by URI» и нажав кнопку Check, получим сообщение о том, валидный это документ или нет. Хотя в текстовом поле вводится адрес сайта, проверяется не сайт це­ликом, а только главная страница.

Документы, еще не выставленные в Интернете, можно проверить с помощью формы, озаглавленной «Validate by File Upload» (валидация за­груженных файлов). Вначале следует указать путь к HTML-файлу, после чего нажать кнопку Check . Файл будет загружен на сервер и проверен на ошибки.

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

Для браузера Firefox может использоваться расширение HTML Validator. Эта программа построена по той же технологии, что и валида­тор W3C, но не требует подключения к Интернету и работает прямо «на лету». Cкачать можно по адресу http://users.skynet.be/mgueury/mozilla/

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности