Continuez à expliquer les compétences de HTML5:
16. Support vidéo
L'élément Audio <Audio> est très similaire et prend en charge les vidéos HTML5 sur de nouveaux navigateurs. En fait, tout récemment, YouTube a annoncé une nouvelle vidéo HTML5. Malheureusement, comme la documentation HTML5 n'indique pas un encodeur spécifique pour la vidéo, cela dépend principalement du navigateur. Bien que Safari et IE9 puissent prendre en charge les vidéos dans les formats H.264, Firefox et Opera s'en tiennent toujours aux formats Theora et Vorbis. Par conséquent, lorsque vous affichez des vidéos HTML5, vous devez fournir deux formats.
17. Vidéo préchargée
Vous devez d'abord décider si vous avez besoin d'un navigateur pour précharger la vidéo. Y a-t-il un besoin? Supposons qu'un visiteur entre dans une page dédiée à l'affichage des vidéos, il est très nécessaire de précharger la page pour enregistrer un certain temps d'attente. Vous pouvez précharger la vidéo en définissant Preload = Preload, ou ajouter une précharge entre elles.
<précharge vidéo>
…
</ vidéo>
18. Contrôles d'affichage
Vous avez peut-être remarqué qu'avec le code ci-dessus, la vidéo n'apparaîtra que comme une image sans aucun composant contrôlable. Afin d'obtenir ces contrôles de lecture, nous devons spécifier ces propriétés de contrôle dans l'élément vidéo.
<Contrôles de précharge vidéo>
…
</ vidéo>
19. Expressions régulières
Grâce aux propriétés du nouveau modèle, nous pouvons insérer une expression régulière directement dans le code.
<formulaire méthode = post-action =>
<étiquette pour = nom d'utilisateur> Créez un nom d'utilisateur: </ label>
<input id = username type = text name = username placeholder = 4 <> 10 ″ requis = requis autofocus = autofocus motive = [a-za-z] {4,10}>
<Button Type = Soumider> Go </ Button>
</ form>
Si vous êtes plus familier avec les expressions régulières, vous remarquerez ce nouveau modèle: [a-za-z] {4,10} n'accepte que des lettres supérieures et minuscules. Cette chaîne doit avoir au moins quatre caractères, jusqu'à dix caractères.
20. détecter la prise en charge du navigateur pour les attributs
Comme mentionné précédemment, tous les navigateurs ne prennent pas en charge ces propriétés, donc il y a donc un moyen de savoir si le navigateur peut les reconnaître? Cette question est très bonne. Voici deux façons de vous présenter à vous. La première option consiste à utiliser Modernizr pour détecter, ou vous pouvez également créer et analyser ces éléments pour voir ce que le navigateur a. Par exemple, dans l'exemple précédent, si nous voulons déterminer si le navigateur peut exécuter la propriété du modèle, nous pouvons ajouter JavaScript à la page:
alert ('modèle' dans document.CreateElement ('entrée')) // boolean;
En fait, c'est un moyen très courant de déterminer la compatibilité du navigateur. La bibliothèque JQuery profite de cette astuce. Dans le code ci-dessus, nous créons un nouvel élément d'entrée et confirmons si l'attribut de modèle peut être reconnu. S'il peut être reconnu, le navigateur prend en charge cette fonction, sinon il ne sera pas pris en charge.
<cript>
if (! 'modèle' dans document.CreateElement ('Input')) {
// Validation côté client / serveur
}
</cript>
N'oubliez pas que cela devra être réalisé en s'appuyant sur JavaScript!
21. Mark Elements
La fonction principale de l'élément <MARK> est de mettre en évidence le texte sur la page qui doit mettre en évidence visuellement son importance pour l'utilisateur. La chaîne enveloppée dans cette balise doit être liée au comportement actuel de l'utilisateur. Par exemple, si je cherche à ouvrir votre esprit dans certains blogs, je peux utiliser JavaScript dans la balise <mark> pour envelopper chaque action.
<h3> Résultats de recherche </h3>
<h6> Ils ont été interrompus, juste après que Quato a dit, <Mark> ouvrez votre esprit </cark>. </h6>
22. Quand utiliser <v>
Avez-vous toujours besoin d'utiliser la balise <v>? Bien sûr, c'est nécessaire. Par exemple, si vous souhaitez envelopper un morceau de code dans un élément, en particulier pour le positionnement du contenu, <v> sera un choix très idéal. Cependant, si ce n'est pas la situation ci-dessus, mais pour envelopper un article de blog ou une liste de liens de pied de page, il est recommandé d'utiliser respectivement les éléments <article> et <Nav>.