diff options
Diffstat (limited to 'files/ru/web/guide/html/html5/index.html')
| -rw-r--r-- | files/ru/web/guide/html/html5/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/files/ru/web/guide/html/html5/index.html b/files/ru/web/guide/html/html5/index.html new file mode 100644 index 0000000000..dca2e39993 --- /dev/null +++ b/files/ru/web/guide/html/html5/index.html @@ -0,0 +1,171 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - HTML5 +translation_of: Web/Guide/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">декорированиe</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> |