1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: HTML5
slug: Web/Guide/HTML/HTML5
tags:
- HTML5
translation_of: Web/Guide/HTML/HTML5
original_slug: HTML/HTML5
---
<p><span class="seoSummary"><strong>HTML5</strong> — последняя версия стандарта <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. </span>Термин имеет два определения:</p>
<ul>
<li>Новая версия <em>языка</em> HTML, с новыми элементами, атрибутами и новым поведением.</li>
<li>Набор технологий, позволяющий создавать разнообразные сайты и Web-приложения.</li>
</ul>
<p><span class="seoSummary">Эта страница создана в помощь всем разработчикам Open Web и ссылается на множество материалов, сгруппированных по функциям:</span></p>
<ul>
<li><em>Семантика: </em>позволяет точнее описывать, что из себя представляет ваш контент;</li>
<li><em>Связь:</em> новые способы общения с сервером;</li>
<li><em>Оффлайн и Хранилище:</em> методы, позволяющие сохранять информацию локально на стороне клиента;</li>
<li><em>Мультимедиа:</em>создание и взаимодействие с видео и звуком;</li>
<li><em>2D/3D Графика и эффекты:</em> способы значительно разнообразить представление;</li>
<li><em>Доступ к устройствам:</em> использование разных устройств для ввода и вывода информации;</li>
<li><em>Стилизация:</em> создание изощрённых и совершенных тем.</li>
</ul>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 id="СЕМАНТИКА" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">СЕМАНТИКА</h2>
<dl>
<dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Секции и контуры в HTML5</a></dt>
<dd>Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd>
<dt><a href="/ru/docs/HTML/%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt>
<dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd>
<dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Формы в HTML5</a></dt>
<dd>Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для атрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.</dd>
<dt>Новые семантические элементы</dt>
<dd>Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">валидных HTML5 элементов</a>.</dd>
<dt>Улучшение {{HTMLElement("iframe")}}</dt>
<dd>Использование атрибутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществить рендеринг тега {{HTMLElement("iframe")}}.</dd>
<dt><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt>
<dd>Позволяет вставлять математические формулы.</dd>
<dt><a href="/ru/docs/HTML/HTML5/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">Введение в HTML5</a></dt>
<dd>Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.</dd>
<dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-совместимый парсер</a></dt>
<dd>Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.</dd>
<dt></dt>
</dl>
<h2 id="СВЯЗЬ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">СВЯЗЬ</h2>
<dl>
<dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
<dd>Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.</dd>
<dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Server-sent события</a></dt>
<dd>Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.</dd>
<dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt>
<dd>Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd>
</dl>
<h2 id="ОФФЛАЙН_И_ХРАНИЛИЩЕ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ОФФЛАЙН И ХРАНИЛИЩЕ</h2>
<dl>
<dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Оффлайн ресурсы: кеш приложения</a></dt>
<dd>Firefox полностью поддерживает спецификацию HTML5 по оффлайн ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне</dd>
<dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
<dd>Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.</dd>
<dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG сессионное или постоянное хранилище (aka DOM Storage)</a></dt>
<dd>Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента.</dd>
<dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
<dd>Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.</dd>
<dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt>
<dd>Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя <span style="font-family: monospace;">{{ HTMLElement("input") }} с</span> <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>типом</strong></a> <span style="font-family: courier new;">file</span>, имеющих атрибут <strong><a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple">multiple</a>.</strong> Ещё это <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>
<h2 id="МУЛЬТИМЕДИА" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">МУЛЬТИМЕДИА</h2>
<dl>
<dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt>
<dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd>
<dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt>
<dd>Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd>
<dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt>
<dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd>
</dl>
<h2 id="ГРАФИКА_И_ЭФФЕКТЫ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ГРАФИКА И ЭФФЕКТЫ</h2>
<dl>
<dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt>
<dd><code>Узнайте о элементе {{ HTMLElement("canvas") }}</code> и узнайте, как рисовать графику и другие элементы в Firefox.</dd>
<dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API для <code><canvas></code></a></dt>
<dd>HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.</dd>
<dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
<dd>WebGL приносит 3D в веб, соответствует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.</dd>
<dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt>
<dd>Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.</dd>
</dl>
<dl>
<dt></dt>
</dl>
</td>
<td>
<h2 id="производительность_и_интеграция" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">производительность и интеграция</h2>
<dl>
<dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
<dd>Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.</dd>
<dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
<dd>Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a>.</dd>
<dt>JIT-компилирование движков JavaScript</dt>
<dd>Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">History API</a></dt>
<dd>Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.</dd>
<dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable атрибут: трансформируйте свой сайт в википедию!</a></dt>
<dd>HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.</dd>
<dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
<dd>HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.</dd>
<dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Управление фокусом в HTML</a></dt>
<dd>Поддержка новый атрибутов HTML5 <code>activeElement</code> and <code>hasFocus</code>.</dd>
<dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Обработчики протоколов для Web</a></dt>
<dd><code>Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler()</code>.</dd>
<dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
<dd>Контролирует анимации для обеспечения оптимальной производительности.</dd>
<dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Fullscreen API</a></dt>
<dd>Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.</dd>
<dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt>
<dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd>
<dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Online and offline events</a></dt>
<dd>Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.</dd>
</dl>
<h2 id="доступ_к_устройствам" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">доступ к устройствам</h2>
<dl>
<dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt>
<dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd>
<dt><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch события</a></dt>
<dd>Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.</dd>
<dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Геолокация</a></dt>
<dd>Позволяет браузерам получать местоположение пользователя.</dd>
<dt><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">Определение ориентации устройства</a></dt>
<dd>Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).</dd>
<dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt>
<dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd>
</dl>
<h2 id="стилизация" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">стилизация</h2>
<p><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.</p>
<dl>
<dt>Новые способы стилизирования фона</dt>
<dd>Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">множественных фонов</a>.</dd>
<dt>Лучшие границы</dt>
<dd>Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.</dd>
<dt>Анимируйте свой стиль</dt>
<dd>Используйте <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Переходы</a>, чтобы анимировать изменение состояния элемента или <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Анимации</a> для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.</dd>
<dt>Улучшение типографии</dt>
<dd>Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">перенос слов</a>, а также <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">тень текста</a> и его <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/SVG/Attribute/text-decoration">декорирование</a>. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.</dd>
<dt>Новые презентационные макеты</dt>
<dd>Для того, чтобы улучшить гибкость дизайна, добавили: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS мульти-колоночный макет</a> и <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS отзывчивый блочный макет</a>.</dd>
</dl>
</td>
</tr>
</tbody>
</table>
|
