Extension d'élément HTML HTML5 (Partie 1) - Présentation des éléments nouvellement ajoutés et compétences du didacticiel utilisation_html5

Considérez notre processus de développement d'une page  :
1. Concevoir la structure de la page - HTML : Ce processus consiste à construire la structure de la page Web à l'aide de divers éléments HTML.
2. Concevoir l'apparence de la page - CSS : Ce processus consiste à utiliser CSS pour améliorer l'apparence de la page Web.
3. Concevoir le comportement de la page - Javascript : Ce processus consiste à attribuer certains comportements aux éléments de la page web.
En plus du CSS, HTML5 a été étendu à des degrés divers dans les deux autres aspects. Cette série se concentre sur le premier aspect. Auparavant, nous avons découvert les éléments complexes canvas et svg. Les chapitres suivants résumeront d'autres éléments ajoutés par HTML5.

Éléments structurels
HTML5 ajoute de nouveaux éléments structurels, tels que l'en-tête, le pied de page, la navigation, l'article de contenu, la section, etc. La signification est la suivante :

En plus de cet élément structurel de la page entière, HTML5 ajoute également des éléments sémantiques au niveau du bloc, tels que l'élément auxiliaire side, l'élément image figure, les détails de l'élément de description détaillée, etc. En plus de mieux afficher la signification de la mise en page de la page, ces éléments ne sont pas différents des divs ordinaires. Vous devez toujours vous fier au CSS pour afficher ces éléments. Voici un exemple simple :

Copiez le code

Le code est le suivant :

< ;h1>dxy1982 Blog

Article 1

< ;p>Introduction

Introduction

Blog

Informations

• Politique< ;/a>


• Liste< /li>
  

Article

• Janvier


• Février

Copyright 2012 dxy1982< /p>

Bien que ces éléments soient relativement simples à utiliser, mais il Il y a encore quelques points à noter  :
1. N'utilisez pas section comme substitut à div
Section n'est pas un conteneur de style. L'élément section représente une partie sémantique du contenu qui permet de créer un résumé de document. Il doit contenir un en-tête. Il existe généralement dans le cadre d'un article (bien sûr, l'article peut également en faire partie). Si vous recherchez un élément à utiliser comme conteneur de page ou si vous avez besoin de conteneurs de style supplémentaires, restez fidèle aux divs.
2. N'utilisez header et hgroup que lorsque cela est nécessaire
Cela n'a aucun sens d'écrire des balises qui n'ont pas besoin d'être écrites. Les scénarios d'utilisation de header et hgroup sont généralement les suivants :
• L'élément header représente un ensemble de texte auxiliaire d'introduction ou de navigation, qui est souvent utilisé comme en-tête d'une section.
• Lorsque l'en-tête a plusieurs couches de structure, telles que des sous-en-têtes, des sous-titres, divers logos, etc., utilisez hgroup pour combiner les éléments h1-h6 comme en-tête de section.
S'il n'y a que quelques éléments d'en-tête dans l'en-tête ou le hgroup ici, pourquoi ne pas supprimer ces deux balises inutiles, par exemple :

Copier le code

Le code est le suivant :

　

　

Mon meilleur article de blog

　

-->

Modifier directement en :

Copier le code

Le code est comme suit :

　

Mon meilleur article de blog

　
< /article>

La même chose :

Copier le code

Code comme suit :

　

　

Mon meilleur article de blog

　

p>par Rich Clark< ;/p>

Modifier directement par :

Copier le code

Le code est le suivant :

Mon meilleur article de blog

par Rich Clark< ;/ p>

3. N'abusez pas de l'élément nav
nav pour représenter des blocs dans la page qui renvoient à d'autres pages ou à d'autres parties de cette page ; bloc de liens de navigation.
Mais tous les liens de la page n'ont pas besoin d'être placés dans l'élément nav - cet élément est destiné à être utilisé comme bloc de navigation principal. Pour donner un exemple précis, il y a souvent de nombreux liens dans le pied de page, tels que les conditions d'utilisation, la page d'accueil, la page de déclaration de droits d'auteur, etc. L'élément footer lui-même est suffisant pour gérer ces situations. Bien que l'élément nav puisse également être utilisé ici, nous pensons généralement qu'il est inutile.
4. N'abusez pas de la figure
La figure doit être « un contenu fluide, parfois avec sa propre description de titre. Elle est généralement référencée comme une unité indépendante dans le flux du document. » . Meilleur scénario applicable : il peut être déplacé de la page de contenu principale vers la barre latérale sans affecter le flux de documents. Les figures ne doivent être référencées que dans le document ou entourées d'éléments de section.
Si la figure est uniquement destinée à la présentation (comme un logo), qu'elle n'est référencée ailleurs dans le document, et qu'il n'est pas nécessaire de déplacer la position, alors n'utilisez absolument pas de figure.
5. N'utilisez pas d'attributs de type inutiles
En HTML5, les éléments de script et de style ne nécessitent plus d'attributs de type. Bien sûr, il n’y a rien de mal à l’écrire, mais du point de vue des meilleures pratiques, il n’est pas nécessaire de l’écrire.

Élément audio
L'élément audio est utilisé pour identifier un contenu sonore, tel que de la musique ou tout autre flux audio. Les formats pris en charge par cet élément sont indiqués dans le tableau suivant :

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

La balise

audio possède certains attributs utilisés pour contrôler le contenu, quand et comment lire l'audio. Ces attributs sont : src (nom du fichier), préchargement (chargé lorsque la page est chargée), contrôles (contrôle d'affichage), boucle. (boucle) et lecture automatique (lecture automatique). Dans l'exemple ci-dessous, l'audio sera lu dès le chargement de la page. La lecture continuera et les commandes fournies permettront à l'utilisateur d'arrêter ou de redémarrer l'audio :

<.> Copier le codeLe code est le suivant :

Si le navigateur ne prend pas en charge l'élément, les informations textuelles de l'élément sont affichées.
Si l'élément de lecture automatique est défini, l'attribut de préchargement est automatiquement ignoré. Si preload="auto" est défini, l'audio sera chargé après le chargement de la page. L'élément
audio permet de spécifier plusieurs éléments sources pour être compatibles avec les problèmes du navigateur. L'élément source peut lier différents fichiers audio. Le navigateur utilisera le premier format reconnu :

Copiez le code Le code est le suivant :

Élément vidéo L'élément vidéo vous permet de lire des clips vidéo ou de diffuser des médias visuels. Les formats pris en charge par cet élément sont indiqués dans le tableau suivant :

Il possède tous les attributs de l'élément audio, plus : muet (muet), affiche (en attente d'images), largeur et hauteur. Inutile de dire les deux dernières significations. L'attribut poster (spécifiant une URL absolue ou relative) vous permet de trouver une image à utiliser lorsque la vidéo est en cours de chargement ou lorsque la vidéo ne se charge pas du tout ;

La vidéo prend également en charge l'utilisation d'éléments sources pour résoudre les problèmes de compatibilité. Regardez un petit exemple :

Copiez le code

Le code est le suivant :

Votre navigateur ne prend pas en charge l'élément vidéo.

Si vous ne souhaitez pas lire le son de la vidéo, définissez simplement muted="muted".
De plus, l'élément vidéo fournit également des méthodes, propriétés et événements pour prendre en charge le contrôle du processus de lecture pendant les opérations DOM. Par exemple, appelez les méthodes play, pause, load et autres de l'élément. Il existe également des attributs tels que le volume et la durée de lecture qui peuvent être lus ou définis directement. De plus, des événements de démarrage, de pause, de fin, etc. peuvent être utilisés. Regardez l'exemple ci-dessous :

Copiez le code

Le code est le suivant :

">Lecture/ Pause
Big
Small
< bouton onclick="makeNormal()">Normal

Faites attention à une nouvelle façon d'écrire : Dans l'exemple ci-dessus, nous écrivons l'élément audio comme ceci :

Copiez le code

Le code est le suivant :

En fait, de nombreux attributs booléens tels que les contrôles, la lecture automatique et la boucle ont été introduits dans HTML5. Vous pouvez écrire ces attributs comme ci-dessus, mais l'écriture recommandée. La méthode est la suivante :

Copiez le code


Le code est le suivant :

< ;audio src="MyFirstMusic.ogg" contrôle la boucle de lecture automatique> Votre navigateur ne prend pas en charge l'élément audio.

Parce que lorsque le navigateur rencontre ces attributs, cela signifie que ces attributs sont activés. En d'autres termes, si vous écrivez ces attributs et les définissez de force sur false, l'effet sera toujours le même, il est donc généralement recommandé d'écrire uniquement le nom de l'attribut.

Ce problème d'écriture existe également dans les formulaires. De nombreux nouveaux attributs de formulaire et de saisie sont des attributs booléens, et la méthode d'écriture recommandée doit être utilisée.


Éléments indiquant les mesures

Tous les navigateurs ne prennent pas en charge les éléments suivants, mais l'effet est essentiellement visible sur Chrome.

Élément de barre de progressionUtilisez cet élément pour afficher la barre de progression du téléchargement. Il n'a que deux attributs : valeur et max. Chrome et FireFox le prennent en charge.


Copier le code

Le code est le suivant :

Progression du téléchargement :
33%

🎜>

Élément de mesure
Utilisez cet élément pour afficher une icône d'indication d'une valeur donnée dans la classe de plage standard. Les valeurs dans différentes plages afficheront des couleurs différentes. Certains sites Web utilisent cet outil pour afficher la valeur de l'expérience actuelle de l'utilisateur. Lorsque le navigateur ne supporte pas cet élément, le texte au milieu de l'élément sera affiché directement. Actuellement, Chrome le prend déjà en charge.

Copier le codeLe code est le suivant :

est :

B .
< /p>


Exécutez-le et vous verrez une barre de défilement jaune ; si vous modifiez la valeur à 50, vous constaterez que la couleur de la barre indicatrice est programmée en rouge.

C'est tout pour l'introduction des éléments nouvellement ajoutés. Pour plus de descriptions d'éléments, veuillez consulter la liste complète des balises dans le W3C.

Référence pratique :

Tutoriel W3C :
http://www.w3schools.com/html5/default.aspHTML5 Officiel conseils : http://dev.w3.org/html5/html-author/
Un très bon site Web de conseils : http://html5doctor.com/
Tutoriel HTML5 chinois : http://www.html5china.com/
Un bon blog front-end : http://www.pjhome.net/default.asp?cateID= 1