English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс HTML5

API HTML5

Медиа HTML5

Графика HTML5

Новые элементы HTML5

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

Новые элементы HTML5

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

С 1999 года HTML 4.01 изменился многим, сегодня, несколько элементов в HTML 4.01 уже弃用, эти элементы в HTML5 были удалены или переопределены. Для лучшего обработки современных веб-приложений HTML5 добавил много новых элементов и функций, например: Рисование графиков, мультимедийный контент, лучшая структура страницы, лучшее форматирование Обработка, и несколько api для перетаскивания элементов, позиционирования, включая веб-страницы

Кэширование приложений, хранение, сетевые работники и т.д.

  • Новые элементы и функции HTML5

  • <header> определяет верхнюю часть страницы или раздела;

  • <footer> определяет нижнюю часть страницы или раздела;

  • <nav> определяет навигационную область страницы или раздела;

  • <section> логическая область страницы или комбинация контента;

  • <article> определяет основное содержание или целое сообщение;

<aside> определяет дополнительный или связанный контент;

<!doctype html><html><head>
<meta charset="UTF-8">
<title>Использование тега навигации HTML5</title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">One</a></li>
　　　　　　　　<li><a href="#">Two</a></li>
　　　　　　　　<li><a href="#">Three</a></li>
　　　　</ul>
</nav>
</body></html>
Тест, чтобы увидеть ‹/›

<header> тег реализация

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><header> тег реализация by ru.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>Заголовок</h1>
</header>
</body>
</html>
Тест, чтобы увидеть ‹/›

<footer> тег реализация

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><footer> тег реализация by ru.oldtoolbag.com</title>
</head>
<body>
<footer> тег реализация
<footer id="page_footer">
　　　　<h2>Нижний колонтитул</h2>
</footer>
</body>
</html>
Тест, чтобы увидеть ‹/›

<section> блок и <article> статья

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><section> и <article> теги реализация</title> by ru.oldtoolbag.com
</head>
<body>
Элементы <section> и <article> реализуют
<section id="posts">
　　　　　　　　/*можно содержать несколько <article>*/
　　　　<article class="post">
　　　　　　　　　/*содержимое article*/
　　　　　　　　</article>
　　　　　　　　<article class="post">
　　　　　　　　　/*содержимое article*/
　　　　　　　　</article>
</section>
</body>
</html>
Тест, чтобы увидеть ‹/›

Новый элемент <canvas>

ТегОписание
<canvas>Тег определяет графику, например, диаграммы и другие изображения. Этот тег основан на API рисования JavaScript.

Новые multimedia элементы

ТегОписание
<audio>Определяет аудиоконтент.
<video>Определяет видео (video или movie).
<source>Определяет multimedia ресурсы <video> и <audio>.
<embed>Определяет встроенное содержимое, например, плагин.
<track>Определяет внешние текстовые дорожки для таких элементов, как <video> и <audio>.

Новые элементы форм

ТегОписание
<datalist>Определяет список вариантов. Используйте этот элемент вместе с элементом input, чтобы определить возможные значения input.
<keygen>Определяет поле генератора ключей для формы.
<output>Определяет различные типы вывода, например, вывод скрипта.

Новые семантические и структурные элементы

HTML5 предоставляет новые элементы для создания更好的 структуры страницы:

ТегОписание
<article>Определяет независимую область содержимого страницы.
<aside>Определяет боковую панель страницы.
<bdi>Позволяет вам установить текст, чтобы он не зависел от направления текста родительского элемента.
<command>Определяет командную кнопку, например, переключатель, флажок или кнопку.
<details>Используется для описания деталей документа или его части.
<dialog>Определяет диалоговое окно, например, диалоговое окно с сообщением.
<summary>Эти теги содержат заголовок элемента details.
<figure>Определяет независимое потоковое содержимое (изображения, диаграммы, фотографии, код и т.д.).
<figcaption>Определяет заголовок элемента <figure>.
<footer>Определяет нижнюю часть страницы section или документа.
<header>Определяет область заголовка документа.
<mark>Определяет текст с пометками.
<meter>Определяет систему мер и весов.
<nav>Определяет часть навигационной ссылки.
<progress>Определяет прогресс выполнения любого типа задачи.
<ruby>Определяет ruby-комментарий (пиньюнь или символ).
<rt>Определяет интерпретацию или произношение символа (пινьюнь или символа).
<rp>Используется в ruby-комментариях для определения содержимого, которое будет отображаться в браузерах, не поддерживающих ruby-элементы.
<section>Определяет раздел (section, абзац) в документе.
<time>Определяет дату или время.
<wbr>Определяет, где в тексте следует добавить отступ.

Удаленные элементы

Следующие элементы HTML 4.01 были удалены в HTML5:

  • <acronym>

  • <applet>

  • <basefont>

  • <big>

  • <center>

  • <dir>

  • <font>

  • <frame>

  • <frameset>

  • <noframes>

  • <strike>

  • <tt>

Внутренний SVG в HTML5Поддержка браузеров HTML5