Основы HTML5

API HTML5

Медиа HTML5

Графика HTML5

Клиентское хранение HTML5 Атрибуты форм HTML5

Семантические элементы HTML5

Семантический элемент - это элемент, имя которого сразу указывает на его содержимое. Например, для статьи <article> есть заголовок <header>, содержание <catalog>, контент <content> и подзаголовок <footer>.

Что такое семантический элемент?

Семантический элемент может清楚地 описать его значение для браузеров и разработчиков.

Пример несемантических элементов: <div> и <span> - не требует учитывать содержимое.

Пример семантических элементов: <form>, <table> и <img> - четкое определение их содержимого.

Поддержка браузерами

Браузеры Internet Explorer 9+, Firefox, Chrome, Safari и Opera поддерживают семантические элементы.

Примечание: браузеры Internet Explorer 8 и более ранние версии не поддерживают этот элемент. Однако в конце статьи предлагается компромиссное решение.

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

Многие существующие веб-сайты содержат следующий HTML-код:

<div id="nav">, <div>, или <div id="footer">,</div> для указания навигационных ссылок, заголовков и нижней части.

HTML5 предоставляет новые семантические элементы для обозначения различных частей веб-страницы:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

Элемент HTML5 <section>

<section> тег определяет раздел (section, раздел) в документе. Например, главы, заголовки, подзаголовки или другие части документа.

Согласно документу W3C HTML5: элемент section включает в себя группу содержимого и его заголовок.

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Сайт основного руководства (oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>Это новая версия языка HTML, которая включает новые элементы, атрибуты и поведение, а также множество технологий, которые можно использовать для создания более разнообразных и функциональных веб-сайтов и приложений. Это технологии часто называют HTML5 и его друзьями, обычно сокращенно называя HTML5.</p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>Одной из основных изменений в эволюции CSS является решение W3C разделить CSS3 на ряд модулей. Производители браузеров быстро инновируют в соответствии с темпом CSS, поэтому с помощью метода модулей элементы в спецификации CSS3 могут развиваться с различной скоростью, так как различные производители браузеров поддерживают только определенные характеристики. Однако различные браузеры поддерживают различные характеристики в разное время, что также усложняет разработку для различных браузеров.</p>
</section>
</body>
</html>

Проверьте, ‹/›

Элемент <article> в HTML5

Тег <article> определяет независимое содержимое.

Пример использования элемента <article>:

Запись на форуме
Запись в блоге
Новости
Комментарий

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Сайт основного руководства (oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3 - это обновленная версия CSS (стильные таблицы каскадирования), которая была разработана с 1999 года, и 23 мая 2001 года W3C завершила разработку проекта CSS3,
Включает в себя модули коробки, модули списков, методы ссылок, модули языков, фоны и рамки, текстовые эффекты, многостолбчатые макеты и т.д.　.</p>
</article>
</body>
</html>

Проверьте, ‹/›

Элемент <nav> в HTML5

Тег <nav> определяет часть навигационных ссылок.

Элемент <nav> используется для определения области навигационных ссылок на странице, но не все ссылки должны включаться в элемент <nav>!

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Сайт основного руководства (oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a href="/html/">HTML</a>　|
　　　　<a href="/css/">CSS</a>　|
　　　　<a href="/js/">JavaScript</a>　|
　　　　<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

Проверьте, ‹/›

Элемент <aside> в HTML5

Тег <aside> 　определяет содержимое, расположенное вне основного раздела страницы (например, боковая панель).

Содержимое тега aside должно быть связано с содержимым основного раздела.

Пример

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример HTML5 от ru.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Заголовок статьи</h1>
　　<p>Текст,出现的文章下 </p>
</article>
<aside>
　　<p>Текст,出现的 под aside</p>
</aside>
</body>
</html>

Проверьте, ‹/›

Элемент <header> в HTML5

Элемент <header> описывает верхнюю часть документа

Элемент <header>主要用于 определения области представления introductions.

В странице вы можете использовать несколько элементов <header>.

Ниже приведен пример определения заголовка статьи:

Пример

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример HTML5 от ru.oldtoolbag.com</title>
</head>
<body>
<header>
　　<img src="/static/images/logo-n.png" alt="Логотип">
</header>
<article>
　　<h1>Заголовок статьи</h1>
　　<p>Текст,出现的文章下 </p>
</article>
</body>
</html>

Проверьте, ‹/›

Элемент <footer> в HTML5

Элемент <footer> описывает нижнюю часть документа.

Элемент <footer> должен содержать его содержащий элемент

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

В документе вы можете использовать несколько элементов <footer>.

Пример

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример HTML5 от ru.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Заголовок статьи</h1>
　　<p>Текст,出现的文章下 </p>
</article>
<footer>
　　<p>Авторские права　©2013</p>
</footer>
</body>
</html>

Проверьте, ‹/›

Элементы "figure" и "figcaption" в HTML5

Тег "figure" определяет независимое потоковое содержимое (изображения, диаграммы, фотографии, код и т.д.).

Содержимое элемента "figure" должно быть связано с основным содержимым, но если его удалить, это не должно повлиять на поток документа.

<figcaption> Тег определяет заголовок элемента "figure".

<figcaption>Элементы должны быть размещены в первом или последнем месте "figure" элемента.

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Сайт основного руководства (oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcaption>venglobe　venglobe　venglobe.</figcaption>
</figure>
</body>
</html>

Проверьте, ‹/›

　Пример онлайн-сводки семантических элементов HTML5

Пример

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>Элементы семантики </title>
</head>
<body>
　　　　<!--Элементы структуры-->
　　　　<header>Заголовок </header>
　　　　<section> 表示一个段落：用于区域的章节表述 </section>
　　　　<footer>Часть подвала области </footer>
　　　　<nav>Меню　Навигация </nav>
　　　　<article> 表示文章的主体内容 </article>
　　　　<!--Блочный элемент　используется для разделения областей-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code> 表示一段代码 </code>
　　　　<dialog> 表示对话 </dialog>
　　　　　　　　<dt>Говорящий</dt><dd>Содержание</dd>
　　　　</dialog>
　　　　<!--Элементы семантики-->
　　　　<mtter>Значение в определенном диапазоне</mtter>
　　　　<time></time>
　　　　<progress>Лента прогресса</progress>
　　　　<video>Видео</video>
　　　　<audio>Аудио</audio>
　　　　<!--Интерактивные элементы-->
　　　　<details>Конкретное содержание через某种 метод отображается</details>
　　　　<datagrid>Используется для управления данными отображения клиента</datagrid>
　　　　<menu>Динамическое интерактивное меню</menu>
　　　　<command>Название</command>
　　　　<!--Показать пример статьи-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>Теги в заголовке head HTML</h1>
　　　　　　　　　　　　<time>12 декабря 2015 года</time>
　　　　　　　　</header>
　　　　　　　　<p>В HTML有很多标签和 элементы в заголовке head, они касаются отрисовки веб-страниц браузерами, SEO и т.д., а различные内核 браузеров и различные производители браузеров в Китае имеют свои собственные элементы, что создает много различий. В эпоху移动互联网, структура заголовка head и элементы meta на мобильных устройствах становятся еще более важными. Понимание значения каждого элемента и написание заголовков head, удовлетворяющих вашим потребностям, является целью этой статьи. Эта статья основана на статье одного автора и предоставляет расширение иsummary о значении и сценариях использования различных элементов и тегов в head.</p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--Комментарии-->
　　　　<section>
　　　　<h2>Комментарии</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Ли Си</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23 10:00 - 11:00">Час назад</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Комментарий</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Ли Си</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23 10:00 - 11:00">Час назад</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Комментарий</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

Проверьте, ‹/›

Можем ли мы начать использовать эти семантические элементы?

Эти элементы все являются блочными элементами (за исключением <figcaption>).

Чтобы сделать эти блоки и элементы рабочими во всех версиях браузеров, вам нужно установить некоторые свойства в файле таблицы стилей (следующие стили позволяют старым версиям браузеров поддерживать блочные элементы,介绍的 в этой главе):

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Проблемы в Internet Explorer 8 и более ранних версиях IE

IE8 и более ранние версии Internet Explorer не могут отрисовывать CSS-эффекты в этих элементах, поэтому вы не можете использовать <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure> или другие элементы HTML5.

Решение проблемы: Вы можете использовать Javascript скрипт HTML5 Shiv для решения проблем совместимости IE.

Адрес загрузки HTML5 Shiv:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

После загрузки поместите следующий код на страницу:

<![if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

Следующий код будет загружен в браузерах, которые старше IE9 версии. Вам нужно поместить его в элемент <head>, потому что браузер IE требует, чтобы эти новые элементы HTML5 были загружены после разметки

Клиентское хранение HTML5 Атрибуты форм HTML5