Extension HTML de l'élément HTML5 (partie 1) - Éléments nouvellement ajoutés et aperçu de l'utilisation

Auteur：Eve Cole Date de mise à jour：2025-04-17 23:32:03

Considérez notre processus de développement d'une page :

1. Concevoir la structure de la page - HTML: Ce processus consiste à utiliser divers éléments HTML pour créer la structure de la page Web.

2. Concevoir l'apparence de la page - CSS: Ce processus consiste à utiliser CSS pour améliorer l'apparence de la page Web.

3. Comportement de la page de conception - JavaScript: Ce processus consiste à donner un certain comportement aux éléments de la page Web.

En plus du CSS, HTML5 a été étendu à des degrés divers dans deux autres aspects. Cette série est axée sur le premier aspect. Dans la section précédente, nous avons appris les éléments complexes en toile et SVG, et les chapitres suivants résumeront d'autres éléments ajoutés HTML5.

Éléments structurels

HTML5 a ajouté de nouveaux éléments structurels, tels que l'en-tête, le pied de page, la navigation de navigation, l'article de contenu, la section du chapitre, etc. La signification est indiquée dans la figure ci-dessous:

En plus des éléments structurels de la page entière, HTML5 ajoute également des éléments sémantiques au niveau du bloc, tels que les éléments auxiliaires à part, les éléments d'image figurent, les détails des éléments de description détaillés, etc. En plus de mieux afficher la signification de mise en page de la page, ces éléments ne sont pas différents des Divs ordinaires, et ils ont encore besoin de reposer sur les CS pour afficher ces éléments. Voici un bref exemple:

<html>

<adal>

</ head>

<body>

<dique>

</-header>

<h2> <a href = "http://www.vevb.com/dxy1982/"> Article 1 </a> </h2>

<p> Introduction </p>

</article>

<h2> <a href = "http://www.vevb.com/dxy1982/"> Article 2 </a> </h2>

<p> Introduction </p>

</article>

<Nav>

</ nav>

</ section>

<Nav>

<ul>

<li> <h2> Informations </h2>

<ul>

<li> <a href = "http://www.vevb.com/dxy1982/"> Politique </a> </li>

<li> <a href = "http://www.vevb.com/dxy1982/"> Liste </a> </li>

</ul> </li>

<li> <h2> Article </H2>

<ul>

<li> <a href = '/ blog / 2007/04 /'> janvier </a> </li>

<li> <a href = '/ blog / 2007/03 /'> février </a> </li>

</ul>

</li>

</ul>

</ nav>

</fooder>

</docy>

</html>

Bien que ces éléments soient relativement simples à utiliser, il y a encore quelques points à noter :

1. N'utilisez pas la section comme substitut de div

La section n'est pas un conteneur de style. L'élément de section représente la partie sémantique du contenu utilisé pour aider à créer un résumé de document. Il doit contenir un en-tête. Il existe généralement comme le plus d'article (bien sûr, il est également possible pour l'article en tant que partie). Si vous souhaitez trouver un élément utilisé comme conteneur de page ou avez besoin d'un conteneur de style supplémentaire, veuillez continuer à utiliser Div.

2. Utilisez uniquement l'en-tête et le HGROUP en cas de besoin

Il n'a pas de sens d'écrire des étiquettes qui n'ont pas besoin d'être écrites. Les scénarios d'utilisation de l'en-tête et du HGROUP sont généralement les suivants:

• L'élément d'en-tête représente un ensemble de texte auxiliaire d'introduction ou de navigation, souvent utilisé comme en-tête de la section.

• Lorsque la tête a une structure multicouche, comme la sous-position, les sous-titres, divers textes de logo, etc., utilisez HGroup pour combiner les éléments H1-H6 comme tête de la section.

Ici, si l'en-tête ou HGroup n'a que quelques éléments de tête, il est préférable de supprimer ces deux balises inutiles, par exemple:

<dique>

<h1> mon meilleur article de blog </h1>

</-header>

<! - Contenu de l'article ->

</article>

Modifier directement vers:

<h1> mon meilleur article de blog </h1>

<! - Contenu de l'article ->

</article>

Il en va de même pour:

<dique>

<h1> mon meilleur article de blog </h1>

</hgroup>

<p> par Rich Clark </p>

</-header>

Changez-le directement en:

<dique>

<h1> mon meilleur article de blog </h1>

<p> par Rich Clark </p>

</-header>

3. N'abusez pas de navigation

L'élément NAV représente un bloc dans la page qui relie à d'autres pages ou autres parties de cette page; un bloc contenant des liens de navigation.

Mais tous les liens de la page ne doivent pas être placés dans l'élément NAV - cet élément est destiné à être utilisé comme bloc de navigation principal. Pour donner un exemple spécifique, il existe souvent de nombreux liens dans le pied de page, tels que les conditions d'utilisation, la page d'accueil, la page de préavis du droit d'auteur, etc. L'élément de pied de page lui-même est suffisant pour faire face à ces situations. Bien que l'élément NAV puisse également être utilisé ici, il est généralement considéré comme inutile.

4. N'abusez pas de chiffre

La figure doit être une certaine teneur en fluide, et parfois il y aura une description de titre contenue. Généralement, il sera référencé comme une unité indépendante dans le flux de documents. Il s'agit du meilleur scénario pour la figure - il peut être déplacé de la page de contenu principale à la barre latérale sans affecter le flux de documents. La figure ne doit être référencée que dans le document ou entourée d'éléments de section.

Si vous êtes uniquement pour le rendu de l'image (comme le logo), non cité ailleurs dans le document, et il n'est pas nécessaire de déplacer l'emplacement, alors n'utilisez pas la figure.

5. N'utilisez pas d'attributs de type inutile

Dans HTML5, les éléments de script et de style ne nécessitent plus d'attributs de type. Bien sûr, il n'y a aucun problème à l'écriture, mais du point de vue des meilleures pratiques, il n'est pas nécessaire d'écrire.

Éléments audio

Les éléments audio sont utilisés pour identifier le contenu sonore, comme la musique ou tout autre flux audio. Les formats pris en charge par cet élément sont présentés dans le tableau suivant:

	IE 9	Firefox 3.5	Opéra 10.5	Chrome 3.0	Safari 3.0
Ogg vorbis		√	√	√
Mp3	√			√	√
Wav		√	√		√

La balise audio a certains attributs utilisés pour contrôler le contenu, quand et comment l'audio est lu, etc. Ces attributs sont: SRC (nom de fichier), précharge (chargement lorsque la page est chargée), les contrôles (contrôle d'affichage), Loop (Loop) et la place automatique (AutoPlay). Dans l'exemple suivant, la page jouera dès que l'audio sera chargé, et il continuera de jouer. Les commandes fournies peuvent permettre à l'utilisateur d'arrêter ou de redémarrer la lecture de l'audio:

Votre navigateur ne prend pas en charge les éléments audio.

</ audio>

Si le navigateur ne prend pas en charge l'élément, les informations texte de l'élément s'affichent.

Si l'élément de jeu automatique est défini, la propriété de précharge est automatiquement ignorée. 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 source d'être compatibles avec le navigateur. L'élément source peut lier différents fichiers audio. Le navigateur utilisera le premier format reconnaissable:

<audio>

Votre navigateur ne prend pas en charge les éléments audio.

</ audio>

Éléments vidéo

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

Format	C'est-à-dire	Incendier	Opéra	Chrome	Safari
Ogg	Non	3.5+	10,5+	5.0+	Non
Mpeg 4	9.0+	Non	Non	5.0+	3.0+
Webm	Non	4.0+	10.6+	6.0+	Non

Il a tous les attributs de l'élément audio, plus: affiche, affiche (en attente d'image), largeur et hauteur. Inutile de dire que les deux dernières significations. Lorsque la vidéo est chargée ou que la vidéo est dans un état de chargement, l'attribut de l'affiche (spécifiant une URL absolue ou relative) vous permet de trouver une image pour y faire face en premier; en sourdine signifie muet.

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

Votre navigateur ne prend pas en charge les éléments vidéo.

</ vidéo>

Si vous voulez ne pas lire le son vidéo, définissez muet = malié.

De plus, l'élément vidéo fournit également certaines méthodes, propriétés et événements pour prendre en charge le processus de contrôle de la lecture dans les opérations DOM. Par exemple, appeler des éléments pour jouer, faire une pause, charger et d'autres méthodes. Il existe également des propriétés telles que le volume et le temps de lecture qui peuvent être directement lues ou définies. De plus, il y a des événements qui commencent la lecture, la pause, la fin, etc. qui peuvent être utilisés. Voir l'exemple suivant:

<! Doctype html>

<html>

<body>

<bouton onclick = "playpause ()"> play / pause </futton>

<bouton onclick = "kakingmall ()"> small </utton>

<bouton onclick = "makenormal ()"> normal </ftont>

Votre navigateur ne prend pas en charge les éléments vidéo.

</ vidéo>

</div>

var myvideo = document.getElementById ("vidéo1");

fonction playpause ()

{

if (myvideo.paused)

myvideo.play ();

autre

myvideo.pause ();

}

fonction makebig ()

{

myvideo.width = 560;

}

Fonction MakeMall ()

{

myvideo.width = 320;

}

fonction makenormal ()

{

myvideo.width = 420;

}

</cript>

</docy>

</html>

En fait, nous devons prêter attention à une nouvelle façon d'écrire: dans l'exemple ci-dessus, nous écrivons des éléments audio comme ceci:

Votre navigateur ne prend pas en charge les éléments audio.

</ audio>

En fait, de nombreux commandes d'élément, la lecture automatique et la boucle sont introduites dans HTML5. Ces propriétés sont très bien pour les écrire comme ce qui précède, mais la manière recommandée est de les écrire comme suit:

Votre navigateur ne prend pas en charge les éléments audio.

</ audio>

Étant donné que le navigateur rencontre ces propriétés, cela signifie que ces propriétés sont activées. C'est-à-dire que si vous écrivez ces propriétés et définissez avec force sur FALSE, l'effet est toujours équivalent à TRUE, il est donc généralement recommandé d'écrire le nom d'attribut.

Ce problème d'écriture existe également sous forme. De nombreuses nouvelles propriétés de forme et d'entrée sont des propriétés booléennes, et la méthode d'écriture recommandée doit être utilisée.

Éléments indiquant la métrique

Tous les navigateurs ne prennent pas en charge les éléments suivants, mais vous pouvez essentiellement voir les effets sur Chrome.

Élément de la barre de progression

Utilisez cet élément pour afficher la barre de progression téléchargée, avec seulement deux attributs: Valeur et Max, ce qui est très simple. Chrome et Firefox sont soutenus.

<p> Télécharger les progrès:

</p>

Éléments métriques

Utilisez cet élément pour afficher la valeur donnée dans la classe de plage standard indiquant le diagramme d'indication, et les valeurs dans différentes gammes afficheront différentes couleurs. Certains sites Web utilisent cette chose pour afficher la valeur actuelle de l'expérience de l'utilisateur. Lorsque le navigateur ne prend pas en charge cet élément, le texte au milieu de l'élément s'affiche directement. Chrome est actuellement pris en charge.

<p> Votre score est:

<Metter Value = "88.7" min = "0" Max = "100" Low = "65" High = "96" Optimum = "100"> B + </Meter>.

</p>

Exécutez-le et vous verrez une chose jaune semblable à une barre de défilement; Si vous modifiez la valeur à 50, vous constaterez que la couleur de la barre d'indicateur est programmée rouge.

Il y a tellement de nouvelles présentations d'éléments. Pour plus de descriptions d'éléments, veuillez vous référer à la liste complète des balises dans W3C.

Référence pratique:

Tutoriel W3C: http://www.w3schools.com/html5/default.asp

Guide officielle HTML5: http://dev.w3.org/html5/html-author/

Un très bon site Web de guide: http://html5doctor.com/

HTML5 Tutoriel chinois: http://www.html5china.com/

Un bon blog frontal: http://www.pjhome.net/default.asp?cateid=1