Не понимаю

Как?! Как можно было оставить 9-ти месячного ребенка снаружи, для того чтобы сходить в магазин?! Это какой же матерью нужно быть???

---

button - жмякаем на кнопочки.

Тег определяет кнопку.

Внутри элемента button можно положить содержание, такое как текст или изображения. В этом разница между этим элементом и кнопками, созданными с помощью элемента input.

Всегда указывайте атрибут type для кнопки. Различные браузеры указывают различные значения для атрибута type.

Примечание: Если вы используете элемент button в форме HTML, различные браузеры могут пересылать различные значения. Используйте < input /> для создания кнопок в форме HTML.

Атрибут type определяет тип кнопки.

Значение	Описание
submit	По умолчанию. Кнопка отправки
button	Кнопка нажатия
reset	Очищающая кнопка (очищает поля формы)

Значение по умолчанию - button.

атрибут form - имя формы. Определяет, какой форме принадлежит кнопка.
name - имя кнопки. Указывает имя для кнопки
атрибут disabled указывает, что кнопка должна быть отключена.
атрибут autofocus - указывает, что кнопка должна быть в фокусе при загрузке страницы.
Атрибут formaction переопределяет атрибут action элемента form.
Этот атрибут используется вместе с type="submit".

Имя: <input type="text" name="fname" /><br />
Фамилия: <input type="text" name="lname" /><br />
<button type="submit">Отправить</button><br />
<button type="submit" formaction="/tryit/html/htmlform_admin_submit.php">Отправить как администратор</button>

formenctype - переопределяет атрибут формы enctype.

Значение	Описание
application/x-www-form-urlencoded	Все символы кодируются перед отправкой (это по умолчанию)
multipart/form-data	Символы не кодируются. Это значение является обязательным при использовании форм, которые имеют загрузку файлов
text/plain	Пробелы преобразуются в символы "+", но специальные символы не кодируются

  Имя: <input type="text" name="fname" /><br />
<button type="submit" >Отправить</button>
<button type="submit" formenctype="multipart/form-data">Отправить как Multipart/form-data</button>

атрибут formnovalidate, если представлен, указывает, что форма не должна быть проверена перед отправкой. Переопределяет атрибут формы novalidate.

Атрибут formtarget переопределяет атрибут target элемента form.

Значение	Описание
_blank	Отправляет форму в документ в новом окне/вкладке
_self	Отправляет форму в документ в том же фрейме (это по умолчанию)
_parent	Отправляет форму в документ во фрейм родителя
_top	Отправляет форму в документ в полном окне
имя фрейма	Отправляет форму в документ в именованном фрейме

value - Задает начальное значение для кнопки. Значение может быть изменено с помощью скрипта.

---

input - тип еще тот...

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

type атрибута контролирует тип данных (и связанных с ним управление) элемента. Это - перечислимый атрибут.. В следующей таблице перечислены ключевые слова и состояний для атрибута - ключевые слова в левом столбце отображаются на состояния в ячейке во втором столбце на той же самой строке как ключевое слово.

Ключевое слово	Государство	Тип данных	Тип управления
hidden	Скрытый	Произвольная строка	n/a
text	Текст	Текст без разрывов строки	Текстовое поле
search	Поиск	Текст без разрывов строки	Поисковое поле
tel	Телефон	Текст без разрывов строки	Текстовое поле
url	URL	Абсолютный IRI	Текстовое поле
email	Электронная почта	Адрес электронной почты или список адресов электронной почты	Текстовое поле
password	Пароль	Текст без разрывов строки (уязвимая информация)	Текстовое поле, которое затеняет ввод данных
datetime	Дата и Время	Дата и время (год, месяц, день, час, минута, во-вторых, часть секунды) с набором часового пояса к UTC	Дата и контроль времени
date	Дата	Дата (год, месяц, день) без часового пояса	Управление датой
month	Месяц	Дата, состоящая из года и месяца без часового пояса	Управление месяца
week	Неделя	Дата, состоящая из летнего неделей числа и недельного числа без часового пояса	Недельное управление
time	Время	Время (час, минута, секунды, доли секунды) без часового пояса	Контроль времени
datetime-local	Локальная Дата и Время	Дата и время (год, месяц, день, час, минута, во-вторых, часть секунды) без часового пояса	Дата и контроль времени
number	Число	Численное значение	Текстовое поле или управление прядильщика
range	Диапазон	Численное значение, с дополнительным семантическим, что точное значение не важно	Управление ползунком или подобный
color	Цвет	sRGB красит с 8-разрядными красными, зелеными, и синими компонентами	Цвет хорошо
checkbox	Флажок	Ряд нуля или большего количества значений от предопределенного списка	Флажок
radio	Переключатель	Перечисляемое значение	Переключатель
file	Загрузка файла	Нуль или больше файлов каждый с типом MIME и дополнительно именем файла	Метка и кнопка
submit	Представьте Кнопку	Перечисляемое значение, с дополнительным семантическим, что это должно быть последнее выбранное значение и новички, формирует представление	Кнопка
image	Кнопка с изображением	Координата, относительно размера определенного изображения, с дополнительным семантическим, что это должно быть последнее выбранное значение и новички, формирует представление	Или активизируемое по щелчку изображение, или кнопка
reset	Кнопка сброса	n/a	Кнопка
button	Кнопка	n/a	Кнопка

value атрибут контента дает значение по умолчанию input элемент.

checked содержание атрибута логический атрибут , который дает по умолчанию выделение input элемента.

form атрибут используется, чтобы явно связаться input элемент с его формой. name атрибут представляет имя элемента. disabled атрибут используется, чтобы сделать управление неинтерактивным и препятствовать тому, чтобы его значение было изменено. autofocus - фокусировка на выбранном элементе формы.

---

label - вешаем ярлычки

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

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

form атрибут используется, чтобы явно связаться label элемент с его формой.

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>

---

fieldset - группами по-одному...

fieldset элемент представляет набор элементов управления формы дополнительно сгруппированы под общим названием.

Имя группы задается первый элемент legend, который является дочерним fieldset элемента, если таковые имеются. Остальные потомки образуют группу.

Атрибут disabled отключает все элементы формы, которые являются потомками элемента fieldset, за исключением тега legend.

form атрибут используется, чтобы явно связаться fieldset элемент с его формой. name атрибут представляет имя элемента.

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

---

Form - то, с чем мы сталкиваемся каждый день

Форма - компонент Веб-страницы, у которой есть средства управления формой, такие как текстовые поля, кнопки, флажки, средства управления диапазоном, или палитры цветов. Пользователь может взаимодействовать с такой формой, обеспечивая данные, которые могут тогда быть отправлены серверу для дальнейшей обработки (например, возвращающий результаты поиска или вычисления). Никакие клиентские сценарии не необходимы во многих случаях, хотя API доступен так, чтобы сценарии могли увеличить пользовательский опыт или использовать формы в целях кроме подчиняющихся данных к серверу.

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

Любая форма создается с тега form , внутри которого помещают средства управления формой. Большинство средств управления представляют из себя теги input, который по умолчанию выглядит как короткое текстовое поле. Для обозначения средств управления используется тег label. Текстовое описание и сами элементы идут внетри этого тега. Каждую часть формы считают абзацем и обычно разделяют тегом Р. Вот пример того, как можно спросить имя у пользователя:

 <p><label>Customer name: <input></label></p>

Чтобы позволить пользователю выбирать размер пиццы, мы можем использовать ряд переключателей. Переключатели также используют тег input, на сей раз с атрибутом type в значением radio. Чтобы заставить переключатели работать группой, им дают общее название, используя атрибут name. Чтобы объединить в группу пакет управления, такой как группа переключателей размера пиццы, можно использовать тег fieldset. Заголовок такой группе можно задать тегом legend .

 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>

Чтобы выбрать начинку, мы можем использовать флажки. Они используют input элемент с type атрибута со значением checkbox :

 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>

Пиццерии, для которых эта форма пишется всегда делает ошибки, поэтому нужен способ связаться с клиентом. Для этой цели, мы можем использовать элементы управления формы специально для телефонов ( input с элементами type атрибут установлен tel ), а также адреса электронной почты ( input с элементами type атрибут установлен email ):

 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>

Мы можем использовать input элемент с type набора атрибутов time обратиться за время доставки. Многие из этих форм управления имеют атрибуты для управления именно то, что значения могут быть указаны, в этом случае, три атрибута Особый интерес представляют min , max , и step . Эти установки минимального времени, максимальное время, а интервал между допустимыми значениями (в секундах). Эта пиццерия только обеспечивает между 11 утра и 9 вечера, и не сулит ничего лучше, чем с шагом 15 минут, которые мы можем отметить таким образом:

 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>

Продолжение в комментариях

---

tr, td - и т.д.

tr элемент представляет строку ячеек в таблице.

td элемент представляет ячейку данных в таблице.

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

th у элемента может быть a scope атрибут контента определен. scope атрибут - перечислимый атрибут с пятью состояниями, у четырех из которых есть явные ключевые слова:

row ключевое слово, которое отображается на состояние строки
Состояние строки означает, что ячейка заголовка применяется к некоторым из последующих ячеек в той же самой строке (ах).
col ключевое слово, которое отображается на состояние столбца
Состояние столбца означает, что ячейка заголовка применяется к некоторым из последующих ячеек в том же самом столбце (цах).
rowgroup ключевое слово, которое отображается на групповое состояние строки
Групповое состояние строки означает, что ячейка заголовка применяется ко всем остающимся ячейкам в группе строки. A th элемент scope атрибут не должен быть в групповом состоянии строки, если элемент не привязан подряд группа.
colgroup ключевое слово, которое отображается на групповое состояние столбца
Групповое состояние столбца означает, что ячейка заголовка применяется ко всем остающимся ячейкам в группе столбца. A th элемент scope атрибут не должен быть в групповом состоянии столбца, если элемент не привязан в группе столбца.
Автоматическое состояние
Автоматическое состояние заставляет ячейку заголовка примениться к ряду ячеек, выбранных основанный на контексте.

 <thead>
<table>  <tbody> <tr> <th> ID </th><th> Measurement </th><th> Average </th><th> Maximum
  </th></tr> </tbody>  <tbody>  <tr><td> </td><th scope="rowgroup"> Cats </th><td> </td><td> </td></tr>  <tr><td> 93 </td><th scope="row"> Legs </th><td> 3.5 </td><td> 4
   </td></tr>  <tr><td> 10 </td><th scope="row"> Tails </th><td> 1 </td><td> 1
  </td></tr> </tbody>  <tbody>  <tr><td> </td><th scope="rowgroup"> English speakers </th><td> </td><td> </td></tr>  <tr><td> 32 </td><th scope="row"> Legs </th><td> 2.67 </td><td> 4
   </td></tr>  <tr><td> 35 </td><th scope="row"> Tails </th><td> 0.33 </td><td> 1
</td></tr>  </tbody> </table>

Результат:

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

Заголовки в первой строке все применяются непосредственно вниз к строкам в их столбце.
Заголовки с явным scope атрибуты применяются ко всем ячейкам в своей группе строки кроме ячеек в первом столбце.
Остающиеся заголовки применяются только к ячейкам направо от них.



td и th у элементов может быть colspan атрибут контента определил, чье значение должно быть допустимым неотрицательным целым числом, больше чем нуль.

td и th у элементов может также быть rowspan атрибут контента определил, чье значение должно быть допустимым неотрицательным целым числом.

Эти атрибуты дают число столбцов и строк соответственно, которые должна охватить ячейка. Эти атрибуты не должны использоваться, чтобы перекрыть ячейки.

---

tbody, thead и прочее, что мы не знали..

tbody Элемент представляет блок из строк , которые состоят из совокупности данных для родительской table элементов, если tbody элемент имеет родителя, и это table .

thead элемент представляет блок строк, которые состоят из (заголовков) меток столбца для родителя table элемент, если thead у элемента есть родитель, и это - table.

<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>

 <input type=button name=add value="Submit">

tfoot элемент представляет блок строк, которые состоят из сводок столбца (нижние колонтитулы) для родителя table элемент, если tfoot у элемента есть родитель, и это - table.

---

colgroup и col - группами по одному

colgroup элемент представляет группу одного или более столбцов в table

Если col элемент имеет родителя, и это colgroup элемент, который сам по себе имеет родителя, который является table элементов, то col элемент представляет один или несколько столбцов в группе столбцов , представленной этим colgroup .

---

caption - заголовок для таблицы

caption элемент представляет название table , которая является его родителем

Когда table элемент - единственный контент в теге figure, кроме figcaption, caption элемент должен быть опущен в пользу figcaption.

Рассмотрите, например, следующую таблицу:

	1	2	3	4	5	6
1	2	3	4	5	6	7
2	3	4	5	6	7	8
3	4	5	6	7	8	9
4	5	6	7	8	9	10
5	6	7	8	9	10	11
6	7	8	9	10	11	12

Без аннотации, в этой таблице ничего не ясно. Тем не менее, с подписью имеет смысл:

<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>

---

table - для таблиц, долой с разметки!

table элемент представляет данные с более чем одном измерении, в виде таблицы .

У таблиц есть строки, столбцы, и ячейки, данные их потомками. Строки и столбцы формируют сетку; ячейки таблицы должны полностью покрыть ту сетку без перекрытия.

Таблицы не должны использоваться в качестве макета сайта. Исторически, у многих веб-авторов есть таблицы в HTML как способ управлять их макетом страницы, мешающим извлечь табличные данные из таких документов. В частности пользователи инструментов доступности, как средства чтения с экрана, вероятно, сочтут очень трудным переместиться по страницам с таблицами, используемыми для расположения. Если таблица будет использоваться для верстки он должен быть помечен с помощью атрибута role="presentation" для браузера пользователя достойно представлять таблицы вспомогательных технологий и правильно передать намерение автора к инструментам, которые хотят извлечь табличные данные из документа.

Есть множество альтернатив использованию HTML-таблиц для расположения, прежде всего используя расположение CSS и табличную модель CSS.

border атрибут может быть указан в table элементов, чтобы явно указать, что table элементов не используется для целей компоновки. Если указано, значение атрибута должно быть либо пустая строка или значение " 1 ". Атрибут используется некоторыми агентами пользователей как признак того, что границы должны быть сделаны вокруг ячеек таблицы.

Вот пример из таблицы, для разметки головоломки Судоку. Обратите внимание на отсутствие заголовков, которые не нужны в такой таблице.

<section>
 <style scoped>
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
 </style>
 <h1>Today's Sudoku</h1>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
   <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
   <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
   <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
   <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
   <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
   <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
   <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
   <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
 </table>
</section>

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

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

---

area - ореол обитания ссылок

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

Если area элемент имеет href атрибут, тогда area элемент представляет гиперссылку. В этом случае, alt атрибут должен присутствовать. Это определяет текст гиперссылки. Его значение должно быть текстом, который, когда подарено тексты, определенные для других гиперссылок карты изображения, и с альтернативным текстом изображения, но без изображения непосредственно, предоставляет пользователю тот же самый предпочтительный вид, как гиперссылка была бы когда использующийся без ее текста, но с ее формой применялся к изображению. alt атрибут может быть оставлен незаполненный, если есть другой area элемент в той же самой карте изображения, которая указывает на тот же самый ресурс и имеет непробел alt атрибут.

Если area элемент не имеет href атрибута, то площадь является мертвой областью, и alt атрибут должен быть опущен.

В обоих случаях, shape и coords атрибуты определяют область.

shape - перечислимый атрибут. Следующая таблица приводит ключевые слова, определенные для этого атрибута. Состояния, данные в первой ячейке строк с ключевыми словами, дают состояния, на которые отображаются те ключевые слова.

State	Keywords
Circle state	circle
Default state	default
Polygon state	poly
Rectangle state	rect

Атрибут может быть опущен. Значение по умолчанию отсутствующего значения - прямоугольное состояние.

coords атрибут, если определено, должен содержать допустимый список целых чисел. Этот атрибут дает координаты для формы, описанной shape атрибут.

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

В состоянии по умолчанию, area у элементов не должно быть a coords атрибут. (Область - целое изображение.)

В состоянии многоугольника, area у элементов должен быть coords атрибут по крайней мере с шестью целыми числами, и количество целых чисел должно быть четным. Каждая пара целых чисел должна представить координату, данную как расстояния слева и вершина изображения в пикселях CSS соответственно, и все координаты вместе должны представлять точки полигона, по порядку.

В прямоугольном состоянии, area у элементов должен быть coords атрибут точно с четырьмя целыми числами, первым из которых должны быть меньше чем третье, и вторым из которых должны быть меньше чем четвертое. Четыре точки должны представить, соответственно, расстояние от левого края изображения к левой стороне прямоугольника, расстояние от главного края до главной стороны, расстояние от левого края до правой стороны, и расстояние от главного края до нижней стороны, всех в пикселях CSS.

target, rel, media, hreflang, и type атрибуты должны быть опущены если href атрибут не присутствует.

Карта изображения позволяет геометрическим областям на изображении быть связанными с гиперссылками.

Рассмотрите изображение, которое смотрит следующим образом:

Если бы мы хотели только, чтобы цветные области были активизируемы по щелчку, то мы могли бы сделать это следующим образом:

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> 
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

---

map - и вы не заблудитесь

map элемент, в соединении с любым area потомки элемента, определяет карту изображения. Элемент представляет свои дочерние элементы.

name атрибут дает карте имя так, чтобы на это можно было сослаться. Атрибут должен присутствовать и должен иметь непустое значение без пробелов. Значение name атрибут не должен быть соответствием совместимости-caseless для значения name атрибут другого map элемент в том же самом документе. Если id атрибут также определен, у обоих атрибутов должно быть то же самое значение.

<!DOCTYPE HTML>
<TITLE>Babies™: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
 </MAP>
</FOOTER>

---

canvas - рисуем от руки

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

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

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

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

canvas у элемента есть два атрибута, чтобы управлять размером координатного пространства: width и height. У этих атрибутов, когда определено, должны быть значения, которые являются допустимыми неотрицательными целыми числами. width значения по умолчанию атрибута к 300, и height значения по умолчанию атрибута к 150.

Как же этот холст выглядит? В действительности, никак. У тега нет собственного контента и рамки.

Невидимый холст

Код выглядит так.

< canvas width="300" height="225">

Давайте добавим пунктирную рамку, чтобы увидеть, с чем мы имеем дело.

Холст с рамкой

---

Коды ошибок аудио/видео контента

MEDIA_ERR_ABORTED (числовое значение 1)
Процесс выборки для ресурса носителей был прерван агентом пользователя в запросе пользователя.
MEDIA_ERR_NETWORK (числовое значение 2)
Сетевая ошибка некоторого описания заставила агент пользователя прекращать выбирать ресурс носителей, после того, как ресурс был установлен, чтобы быть применимым.
MEDIA_ERR_DECODE (числовое значение 3)
Ошибка некоторого описания произошла при декодировании ресурса носителей, после того, как ресурс был установлен, чтобы быть применимым.
MEDIA_ERR_SRC_NOT_SUPPORTED (числовое значение 4)
Ресурс носителей, обозначенный src атрибут не был подходящим.

---

track - star-трек =)

rack элемент позволяет авторам определять явные внешние синхронизированные текстовые дорожки для элементов носителей. Это ничего не представляет самостоятельно.

kind атрибут - перечислимый атрибут. Следующая таблица приводит ключевые слова, определенные для этого атрибута. Ключевое слово, данное в первой ячейке каждой строки, отображается на состояние, данное во второй ячейке.

Ключевое слово	Государство	Краткое описание
subtitles	Подзаголовки	Запись или преобразование диалога, подходящего для того, когда звук доступен, но не понятый (например, потому что пользователь не понимает язык звуковой дорожки ресурса носителей). Выведенный на экран по видео.
captions	Заголовки	Запись или преобразование диалога, звуковых эффектов, соответствующих музыкальных сигналов, и другой соответствующей аудиоинформации, подходящей для того, когда звуковая дорожка недоступна (например, потому что это отключено звук или потому что пользователь является глухим). Выведенный на экран по видео; маркированный как соответствующий для слабослышащего.
descriptions	Описания	Текстовые описания видео компонента ресурса носителей, предназначенного для аудио синтеза, когда визуальный компонент недоступен (например, потому что пользователь взаимодействует с приложением без экрана при управлении, или потому что пользователь является слепым). Синтезируемый как отдельный аудиотрек.
chapters	Главы	Заголовки главы, предназначенные, чтобы использоваться для того, чтобы переместиться по ресурсу носителей. Выведенный на экран как интерактивный список в интерфейсе агента пользователя.
metadata	Метаданные	Дорожки предназначены для использования из сценария. Не выведенный на экран агентом пользователя.

Атрибут может быть опущен. Значение по умолчанию отсутствующего значения - состояние подзаголовков.

src атрибут дает адрес текстовых данных дорожки. Значение должно быть допустимым непустым URL, потенциально окруженным пробелами. Этот атрибут должен присутствовать.

srclang атрибут дает язык текстовых данных дорожки. Значение должно быть допустимым BCP 47 тегов языка. Этот атрибут должен присутствовать если элемент kind атрибут находится в состоянии подзаголовков.

label атрибут дает читаемый пользователем заголовок для дорожки. Этот заголовок используется агентами пользователя при перечислении подзаголовка, заголовка, и аудио дорожек описания в их пользовательском интерфейсе.

Значение label атрибут, если атрибут присутствует, не должен быть пустой строкой.
Это видео есть субтитры на нескольких языках:

<videо src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de label="Deutsch">
</videо>

---

Почему все на свои Дни рождения ждут себе подарков и приятностей... и только на День Рождения Иисуса все ждут от него подарков и чудес!?

---

source - для не самостоятельных

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

src атрибут указывает адрес медиа-ресурс . Значение должно быть действительным непустой URL потенциально окруженные пробелами . Этот атрибут должен присутствовать. Динамическое изменение source элемента и его атрибут, если элемент уже вставлена ​​в video или audio элемент будет иметь никакого эффекта.

type атрибут дает тип ресурса носителя, чтобы помочь браузеру пользователя определить, может ли это играть этот ресурс носителя прежде, чем попытаться загрузить его. Если определено, его значение должно быть допустимым типом MIME. codecs параметр, который определяют определенные типы MIME, мог бы быть необходимым, чтобы определить точно, как ресурс закодирован.

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

media атрибут дает предполагаемый тип носителя медиа-ресурс , чтобы помочь браузеру пользователя определить, если это медиа-ресурс полезен для пользователя перед получением его. Его значение должно быть допустимым запросом СМИ.

По умолчанию, если media атрибут опущен, это " all ", что означает, что по умолчанию медиа-ресурс предназначен для всех СМИ.

---

audio - с песнями и плясками

audio элемент представляет звуковой или аудиопоток.

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

src , preload , autoplay , mediagroup , loop , muted и controls атрибутов атрибуты, общие для всех медиа-элементы .

---

video - местами работаем, местами нет...

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

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

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

src , preload , autoplay , mediagroup , loop , muted и controls атрибуты, общие для всех медиа-элементов.

poster атрибут дает адрес файла изображения, который может показать агент пользователя, в то время как никакие видеоданные не доступны. Атрибут, если есть должен содержать допустимый непустой URL, потенциально окруженный пробелами.

<sсriрt>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.';);
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.';);
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';);
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.';);
       break;
     default:
       alert('An unknown error occurred.';);
       break;
   }
 }
</sсriрt>
<p><videо src="tgif.vid" autoplay controls onerror="failed(event)"></videо></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

Поддержка < video > все еще развивается и это вежливый способ сказать, что он пока не работает, по крайней мере, работает не везде.

Существует много форматов контейнеров видео, вот некоторые самые популярные.

MPEG-4, обычно с расширением mp4 или m4v. MPEG-4 основан на старом контейнере Apple QuickTime (файлы с расширением mov). Трейлеры к фильмам на сайте Apple по-прежнему используют старый контейнер, но фильмы в iTunes поставляются в формате контейнера MPEG-4.

Flash-видео, обычно с расширением flv. Для Flash-видео используется Adobe Flash, что не удивительно. До Flash 9.0.60.184 (по-другому Flash Player 9 Update 3) поддерживался только контейнер в формате Flash. Поздние версии также поддерживают контейнер MPEG-4.

Ogg, обычно с расширением ogv. Ogg является открытым стандартом с открытым исходным кодом для пользователей, свободный от каких-либо патентов. Браузеры Firefox 3.5, Chrome 4 и Opera 10.5 имеют встроенную поддержку без специальных плагинов — контейнера Ogg, Ogg-видео (называемое «Theora») и Ogg-аудио (называемое «Vorbis»). Ogg поддерживается всеми основными дистрибутивами Linux, также можно использовать его на Mac и Windows установив соответственно компоненты QuickTime или фильтры DirectShow. Плеер VLC превосходно проигрывает Ogg-файлы на любой платформе.

WebM это новый формат контейнера, технически похожий на другой формат называемый Matroska. WebM был анонсирован в мае 2010 года и предназначен для использования исключительно с видеокодеком VP8 и аудиокодеком Vorbis. Встроенная поддержка без специальных плагинов имеется в браузерах Chromuim, Google Chrome, Mozilla Firefox и Opera. Компания Adobe объявила, что будущая версия Flash также будет поддерживать WebM-видео.

Audio Video Interleave, как правило, с расширением avi. Формат контейнера AVI был изобретен Майкрософт в то время, когда считалось удивительным, что компьютеры вообще могут проигрывать видео. Особенности последних форматов файлов вроде метаданных официально не поддерживаются. Также этот формат официально не поддерживает большинство используемых современных аудио и видеокодеков. Он является форматом по умолчанию для популярных кодировщиков вроде MEncoder.

Нет единой комбинации контейнеров и кодеков, которая работает во всех HTML5-браузерах. И эта ситуация вряд ли изменится в ближайшем будущем.

Чтобы ваше видео можно было смотреть на всех устройствах и платформах, придется кодировать видео несколько раз.

Для обеспечения максимальной совместимости рабочий процесс с вашим видео будет следующим.
1 Сделать одну версию с помощью WebM (VP8 + Vorbis).
2 Сделать еще одну версию, которая использует видео в базовом H.264 и аудио AAC с профилем «низкая сложность» в контейнере MP4.
3 Сделать еще одну версию, которая использует видео Theora и аудио Vorbis в контейнере Ogg.
4 В одном элементе поставить ссылку на все три видеофайла и предусмотреть откат к плееру на Flash.

Кросбраузерный пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Видео</title>
 </head>
 <body>
  <videо id="movie" width="400" height="320" preload controls>
   <source src="video/snowman.mp4" />
   <source src="video/snowman.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="video/snowman.ogv" type='video/ogg; codecs="theora, vorbis"' />
   <object id="flowplayer" type="application/x-shockwave-flash" 
      width="400" height="320">
    <param name="movie" value="video/flowplayer-3.2.5.swf" /> 
    <param name="flashvars" value='config={"clip":"video/snowman.mp4"}' />
    <p>Загрузить видео в <a href="video/snowman.mp4">MP4</a>, 
         <a href="video/snowman.ogv">OGG</a> или 
         <a href="video/snowman.webm">WebM</a></p>
   </object>
  </videо>
  <sсriрt>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </sсriрt>
 </body>
</html>

См. комментарии для более полной информации