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

Новое в html 5

Главная задача HTML 5 - правильно интегрировать мультимедийный контент. В настоящее время для этой цели используются плагины типа Adobe Flash Player. В HTML 5 предполагается использоваться специально введенные теги. Возможно, что новая функция воспроизведения видео умрет так и не родившись, а Adobe Flash Player останется более предпочительным вариантом для мультимедия. Интересной и полезной представляется функция "Canvas". Она будет описывать размеченную на веб-сайте область, а движок браузера будет отображать в реальном времени графический контент - чертежи, графики, небольшие игры и даже 3D. Для этого разрабатываеься стандарт WebGL. Для того, чтобы скрипты "Canvas" не тормозили браузер, предусматривается поддержка многопоточности. Эта опция носит название "Web Workes", она выполняет скрипты и веб-приложения параллельно.

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

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

Ещё одна новинка - технология Web Forms 2.0. Она более эффективно выполняет обработку введенных пользователем данных, что также обеспечивает более высокую скорость.

В HTML5 введено несколько тегов для улучшения структуры документа:

— section: тег относится к описанию части документа, и может использоваться с тегами h1-h6, а также быть частью статьи;

— article: в теге лучше всего описывать запись в блоге или новостную заметку;

— aside: в этом теге предлагается описывать некие данные, которые в целом не связаны с основным контентом страницы;

— header: в этом теге, конечно, лучше размещать заголовок секции;

— footer: футер(подвал);

— nav: для навигации появился отдельный тег;

— dialog: этим тегом может быть отмечен какой-либо разговор или интервью;

— figure: в этом теге рекомендовано заключать встраиваемый контент – к примеру, видео, графику или аудио.

Разметка самого простого html5-документа может выглядеть следующим образом:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>...</title>

</head>

<body>

<header>...</header>

<nav>...</nav>

<article>

<section>

...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>

Приведем таблицу тегов HTML 5

Теги

Описание

<!-- -->

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

<!DOCTYPE>

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

<a> </a>

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

<abbr> </abbr>

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

<acronym> </acronym>

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

<address> </address>

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

<applet> </applet>

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

<area />

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

<article> </article>

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

<aside> </aside>

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

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

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

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

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

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

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

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

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

HTML 5 по сути является дополненным новыми элементами и атрибутами XHTML. Подробнее о различиях:

В XHTML все теги и атрибуты должны быть набраны в нижнем регистре, кроме тега <!DOCTYPE>.

Необходимо закрывать любые теги, в том числе одиночные, кроме <!DOCTYPE>:

<option> </option>, <br />, <hr />, <img />, <input />, <link />, <meta />.

Запрещается использование сокращений для булевых атрибутов, – значения вписываются полностью, например, <hr noshade="noshade" />, <input type="checkbox" checked="checked" />, вместо <hr noshade>, <input type="checkbox" checked>

Рекомендуется максимально семантически использовать теги: блок <div> </div> – для верстки, а таблицы – для табличного представления данных.

Пример документа XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Имя XHTML документа</title>

</head>

<body>

</body>

</html>

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

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

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

Добавлены новые формы, например:

Name("text"):

E-mail ("email"):

<input type="text" name="name" placeholder="Enter your name" required>

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

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

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