HTML5 Tutoriel de base

HTML5 API

HTML5 Média

HTML5 Graphiques

HTML5 SVG en ligne HTML5 Prise en charge du navigateur

HTML5 nouveaux éléments

HTML5Les balises sémantiques et les attributs, permettent aux développeurs de réaliser un agencement de page web clair avec facilité, ainsi que CSS3l'effet de rendu, la création rapide de pages web riches et flexibles est très simple.

HTML5 nouveaux éléments

depuis1999ans après HTML 4.01 a beaucoup changé, aujourd'hui, dans HTML 4.01Plusieurs ont été abandonnés, ces éléments dans HTML5a été supprimé ou redéfini.

Pour mieux gérer les applications Internet d'aujourd'hui, HTML5Beaucoup d'éléments et de fonctionnalités ont été ajoutés, par exemple: Le dessin graphique, le contenu multimédia, une meilleure structure de page, une meilleure forme Traitement, et plusieurs API de glisser-déposer des éléments, de localisation, y compris les pages web Cache d'application, stockage, workers réseau, etc.

HTML5des nouveaux éléments de balise

<header> Définit la partie supérieure de la page ou de la section;
<footer> Définit la partie inférieure de la page ou de la section;
<nav> Définit la zone de navigation de la page ou de la section;
<section> Définit une zone logique de la page ou une combinaison de contenu;
<article> Définit le contenu principal ou un contenu complet;
<aside> Définit le contenu supplémentaire ou lié;

Balise <nav> de navigation

Exemple

!doctype html<html><head>
<meta charset="UTF-8">
<title>HTML5　L'utilisation de la balise <nav> pour la navigation/title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Accueil</a></li>
　　　　　　　　<li><a href="#">Un</a></li>
　　　　　　　　<li><a href="#">Deux</a></li>
　　　　　　　　<li><a href="#">Trois</a></li>
　　　　</ul>
</nav>
</body></html>

Vérifiez voir ‹/›

Implémentation de la balise <header>

Exemple

!doctype html
<html>
<head>
<meta charset="UTF-8">
Implémentation de la balise <header> par fr.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>Header</h1>
</header>
</body>
</html>

Vérifiez voir ‹/›

Implémentation de la balise <footer>

Exemple

!doctype html
<html>
<head>
<meta charset="UTF-8">
Implémentation de la balise <footer> par fr.oldtoolbag.com</title>
</head>
<body>
Implémentation de la balise <footer>
<footer id="page_footer">
　　　　<h2>Footer</h2>
</footer>
</body>
</html>

Vérifiez voir ‹/›

<section> le bloc et <article> l'article

Exemple

!doctype html
<html>
<head>
<meta charset="UTF-8">
Les balises <title>, <section> et <article> implémentent par fr.oldtoolbag.com</title>
</head>
<body>
Implémentation des étiquettes <section> et <article>
<section id="posts">
　　　　　　　　/*Peut contenir plusieurs <article>*/
　　　　<article class="post">
　　　　　　　　　/*Contenu de l'article*/
　　　　　　　　</article>
　　　　　　　　<article class="post">
　　　　　　　　　/*Contenu de l'article*/
　　　　　　　　</article>
</section>
</body>
</html>

Vérifiez voir ‹/›

<canvas> Nouvel élément

Étiquette	Description
<canvas>	Étiquette définissant des graphiques, comme des graphiques et d'autres images. Cette étiquette est basée sur l'API de dessin JavaScript.

Nouveaux éléments multimédias

Étiquette	Description
<audio>	Définit le contenu audio.
<video>	Définit la vidéo (video ou movie).
<source>	Définit les ressources multimédias <video> et <audio>.
<embed>	Définit le contenu intégré, comme les plugins.
<track>	Précisez les sous-titres externes pour les éléments de média tels que <video> et <audio>.

Nouveaux éléments de formulaire

Étiquette	Description
<datalist>	Définit une liste d'options. Utilisez cet élément avec l'élément input pour définir les valeurs possibles de l'input.
<keygen>	Précisez le champ générateur de paires de clés pour le formulaire.
<output>	Définit différents types de sorties, comme les sorties de scripts.

Nouveaux éléments sémantiques et structuraux

HTML5Fournit de nouveaux éléments pour créer une meilleure structure de page :

Étiquette	Description
<article>	Définition d'une zone de contenu indépendante de la page.
<aside>	Définition du contenu de la barre latérale de la page.
<bdi>	Permet de définir un texte qui s'affranchit de la configuration de la direction du texte de l'élément parent.
<command>	Définition de bouton de commande, comme les boutons radio, les cases à cocher ou les boutons.
<details>	Utilisé pour décrire les détails du document ou d'une partie du document.
<dialog>	Définition de dialogue, comme les boîtes de dialogue.
<summary>	Étiquette contenant le titre de l'élément details.
<figure>	Précisez le contenu de flux indépendant (images, graphiques, photos, codes, etc.).
<figcaption>	Définition du titre de l'élément <figure>.
<footer>	Définition du pied de page de la section ou du document.
<header>	Définition de la zone d'en-tête du document.
<mark>	Définition de texte avec des marques.
<meter>	Définition des unités de mesure. Utilisé uniquement pour les mesures avec des valeurs maximales et minimales connues.
<nav>	Définition de la partie de lien de navigation.
<progress>	Définit le progrès d'une tâche de tout type.
<ruby>	Définit les commentaires ruby (phonétique chinois ou caractère).
<rt>	Définit l'explication ou l'prononciation d'un caractère (phonétique chinois ou caractère).
<rp>	Utilisé dans les commentaires ruby, pour définir le contenu affiché par les navigateurs qui ne supportent pas les éléments ruby.
<section>	Définit une section (section, paragraphe) dans le document.
<time>	Définit une date ou une heure.
<wbr>	Définit où il est approprié d'ajouter un saut de ligne dans le texte.

Éléments supprimés

Des éléments HTML suivants : 4.01 L'élément dans HTML5A été supprimé en chinois :

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 SVG en ligne HTML5 Prise en charge du navigateur