HTML5 Tutoriel de base

HTML5 API

HTML5 Média

HTML5 Graphique

HTML5 supporte le navigateur

Vous pouvez faire fonctionner certains navigateurs plus anciens (qui ne supportent pas HTML5） supporte HTML5.

HTML5 supporte le navigateur

Les navigateurs modernes supportent tous HTML5.

De plus, tous les navigateurs, y compris les anciens et les derniers, traitent automatiquement les éléments non reconnus en tant qu'éléments en ligne.

C'est pourquoi vous pouvez "enseigner" traité par le navigateur "inconnu" des éléments HTML.

même si vous pouvez enseigner à IE6 　(Windows XP 2001) traité par le navigateur pour les éléments HTML inconnus.

HTML5 l'élément HTML est défini comme un élément en bloc

HTML5 défini 8 Un nouvel élément sémantique HTML. Tous ces éléments sont éléments en bloc.

Pour que les anciennes versions des navigateurs puissent afficher correctement ces éléments, vous pouvez définir la valeur de la propriété CSS display en block:

Exemple

<html>
<head>　
<meta　charset="utf-8">　
<title>Base Tutorial Network (oldtoolbag.com)</title>　
</head>
<body>
header, section, footer, aside, nav, main, article, figure {
　　　　display: block;　
}
</body>
</html>

Voyons si ‹/›

Ajouter des éléments personnalisés à HTML

Vous pouvez ajouter des éléments personnalisés à HTML.

Les éléments personnalisés ajoutés à HTML dans cet exemple, et les styles définis pour cet élément, nom de l'élément <myLabel> :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta　charset="utf-8">　
<title> Ajouter de nouveaux éléments à 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>Mon premier HTML5Titre</h1>
　
<p>Mon premier HTML5paragraphe.</p>
　
<myLabel>Mon premier élément personnalisé</myLabel>
　
</body>
　　</html>

Voyons si ‹/›

La phrase JavaScript document.createElement("myLabel") est utilisée pour ajouter de nouveaux éléments au navigateur IE.

Pour rendre le navigateur IE compatible avec html5du navigateur

Vous pouvez utiliser cette méthode pour ajouter HTML aux navigateurs IE5 éléments, mais :

Internet Explorer 8 et les versions IE plus anciennes ne prennent pas en charge cette méthode.

Nous pouvons utiliser le "HTML5 Activer JavaScript", " shiv" pour résoudre ce problème:

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

Le code suivant est un commentaire, qui a pour fonction de s'assurer que dans IE, les versions inférieures à IE9 Lorsque html sera lu5Fichier .js, et l'analyser.

Attention :Les utilisateurs nationaux doivent utiliser la bibliothèque de ressources statiques de ce site (la bibliothèque de ressources Google est instable en Chine):

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

Pour le navigateur IE html5Le shiv est une bonne solution.html5shivPrincipalement pour résoudre HTML5Les nouveaux éléments proposés ne sont pas pris en charge par IE6-8Ces nouveaux éléments ne peuvent pas être utilisés comme nœuds parents pour envelopper des éléments enfants, et ne peuvent pas appliquer des styles CSS.

Solution parfaite de Shiv

Exemple

<!DOCTYPE html>
<html>
<head>
<meta　charset="utf-8">
<title>Rendu HTML5</title>
　　<!--[if　lt　IE　9]>
　　<script　src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　[endif]-->
</head>
　
<body>
　
<h1>Mon premier article</h1>
　
<article>
Réseau de tutoriels de base (oldtoolbag.com) —— Apprendre les bases, c'est le seul moyen d'aller plus loin !!
</article>
　
</body>
</html>

Voyons si ‹/›

html5Le code de référence de shiv.js doit être placé dans l'élément <head>, car les navigateurs IE analysent HTML5 Il est nécessaire de charger ce fichier avant d'utiliser de nouveaux éléments.

HTML5 SVG en ligne HTML5 Tutoriel