Основы HTML5

API HTML5

Медиа HTML5

Графика HTML5

Внутренний SVG в HTML5 Учебник HTML5

Поддержка браузеров HTML5

Вы можете заставить некоторые более ранние браузеры (не поддерживающие HTML5) поддерживать HTML5.

Поддержка браузеров HTML5

Современные браузеры поддерживают HTML5.

Кроме того, все браузеры, включая старые и новые, автоматически обрабатывают неопознанные элементы как.inline элементы.

Благодаря этому, вы можете "Обучить" Обработка браузером "Неизвестно" элементы HTML.

Даже можно научить браузер IE6 (Windows XP 2001) обрабатывать незнакомые элементы HTML.

Определение элементов HTML5 как блочных элементов

HTML5 определяет 8 новых семантических элементов HTML. Блочные элементы.

Чтобы обеспечить правильное отображение этих элементов в старых версиях браузеров, вы можете установить значение свойства CSS display в block:

Пример

<html>
<head>　
<meta charset="utf-8">　
<title>Учебник по основам (oldtoolbag.com)</title>　
</head>
<body>
header, section, footer, aside, nav, main, article, figure {
　　　　display:　block;　
}
</body>
</html>

Проверьте, как это выглядит ›/‹

Добавление пользовательских элементов в HTML

Вы можете добавлять пользовательские элементы в HTML.

Данный пример добавляет пользовательские элементы в HTML и определяет стили для этих элементов, элемент名为 <myLabel> :

Пример

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">　
<title>Добавление новых элементов в HTML (oldtoolbag.com)</title>
<script>
　　　　document.createElement("myLabel")
</script>
<style>
myLabel{
　　　　display:　block;
　　　　background-color:　#ddd;
　　　　padding:　50px;
　　　　font-size:　30px;
}
</style>　
</head>
　
<body>
　
<h1>Мой первый заголовок HTML5</h1>
　
<p>Мой первый параграф HTML5.</p>
　
<myLabel>Мой первый пользовательский элемент</myLabel>
　
</body>
　　</html>

Проверьте, как это выглядит ›/‹

JavaScript-утверждение document.createElement("myLabel") добавляет новый элемент для браузера IE.

Сделайте браузер IE поддерживающим HTML5

Вы можете использовать вышеуказанные методы для добавления элементов HTML5 в браузеры IE, но:

Браузеры Internet Explorer 8 и более ранние версии не поддерживают вышеуказанные методы.

Мы можем использовать "HTML5 Enabling JavaScript", созданного Sjoerd Visscher, " решить эту проблему:

<![if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Данный код является комментарием, который при чтении версий IE, меньше IE9, будет загружать файл html5.js и парсить его.

Внимание:Пользователи в Китае должны использовать библиотеку статических ресурсов этого сайта (библиотека ресурсов Google в Китае нестабильна):

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

Для браузеров IE html5shiv является хорошим решением.html5shivОсновная проблема решается в новых элементах HTML5, которые не поддерживаются IE6-8, эти новые элементы не могут быть использованы в качестве родительских узлов для обертки子女 узлов и не могут применяться к ним стили CSS.

Идеальное решение Shiv

Пример

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>Визуализация HTML5</title>
　　<![if lt IE 9]>
　　<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　<![endif]-->
</head>
　
<body>
　
<h1>Моя первая статья</h1>
　
<article>
Сайт основного учебника (oldtoolbag.com) — Изучите основы, чтобы идти дальше!!!
</article>
　
</body>
</html>

Проверьте, как это выглядит ›/‹

Код ссылки на html5shiv.js должен быть размещен в элементе <head>, так как браузер IE требует загрузки этого файла перед обработкой новых элементов HTML5.

Внутренний SVG в HTML5 Учебник HTML5