Le chapitre ci-dessus parle des sept premières compétences de HTML5, et apprenons maintenant de nouvelles compétences.
8. Plan
Auparavant, nous devions utiliser JavaScript pour créer des espaces réservés pour les zones de texte. Vous pouvez initialement définir l'attribut de valeur pour voir s'il est approprié, mais tant que l'utilisateur supprime le texte, le contenu d'entrée redeviendra vide. L'attribut de placement compense effectivement cela.
<entrée Nom = Type de messagerie = Email [email protected] />
9. Stockage local
Grâce au stockage local de HTML5, nous pouvons laisser les navigateurs avancés se souvenir de ce que nous avons entré, et même si le navigateur est fermé ou actualisé plus tard, il ne sera pas affecté. Bien que tous les navigateurs ne le soutiennent pas, le plus critique Internet Explorer 8, Safari 4, Firefox 3.5.
10. En-tête sémantique et pied de page
<div id = en-tête>
…
</div>
<div id = pied de page>
…
</div>
Il est révolu le code ci-dessus. Divs n'a pas de structure sémantique fondamentalement, même si l'ID est appliqué. Dans HTML5, nous pouvons utiliser les éléments <-en-tête> et <foomer>, et le code ci-dessus peut être remplacé par:
<dique>
…
</-header>
<foomer>
…
</fooder>
Faites attention à ne pas confondre ces deux éléments avec la tête et les pieds du site Web. Ce ne sont que des conteneurs les représentant.
11. IE et HTML5
Il faut beaucoup d'argent pour comprendre les nouveaux éléments HTML5. Afin de s'assurer que les nouveaux éléments HTML5 peuvent être affichés correctement en tant qu'éléments au niveau du bloc, il est nécessaire de définir leur style avec le code suivant:
En-tête, pied de page, article, section, navigation, menu, hgroup {
Affichage: bloc;
}
Même ainsi, IE ne sait toujours pas quels sont ces éléments, il ignore donc ces formats et doit utiliser le code suivant pour résoudre ce problème:
Document.CreateElement (article);
document.CreateElement (pied de page);
document.CreateElement (en-tête);
Document.CreateElement (HGroup);
Document.CreateElement (NAV);
document.CreateElement (menu);
12. Titre du groupe (HGroup)
Supposons qu'un site Web ait un nom et des balises de sous-titre pour être marqués respectivement avec des balises <h1> et <h2>. Il n'y a aucun moyen dans HTML4 qui peut décrire la relation entre les deux avec une bonne relation sémantique. De plus, lorsque vous utilisez H2 pour afficher d'autres titres sur la page, il y a plus de problèmes en termes de hiérarchie. En utilisant l'élément Hgroup de titre de groupe, nous pouvons rassembler ces titres sans affecter l'ensemble du plan du document.
<dique>
<hgroup>
<h1> Rappeler la page du ventilateur </h1>
<h2> uniquement pour les personnes qui veulent la mémoire d'une vie. </h2>
</hgroup>
</-header>
13. Attributs requis
Le formulaire permet de nouvelles propriétés nécessaires, spécifiant si une entrée spécifique est nécessaire. Vous pouvez déclarer cet attribut dans les deux manières différentes suivantes en fonction de vos propres préférences pour écrire du code:
<Type d'entrée = nom de texte = certains obligations requises>
Ou, plus rigoureux:
<entrée Type = Nom du texte = SomeInput requis = requis>
Les deux lignes de code ci-dessus fonctionnent. Après avoir utilisé cette ligne de code et le navigateur prend en charge l'attribut requis, le formulaire vide ne sera pas soumis. Voici un exemple simple, et nous avons également ajouté l'attribut d'espace réservé:
<formulaire méthode = post-action =>
<étiquette pour = someInput> Votre nom: </bablowe>
<entrée type = Text ID = SomeInput Name = SomeInput Planholder = Douglas Quaid requis>
<Button Type = Soumider> Go </ Button>
</ form>
Si l'entrée est vide, le formulaire ne sera pas soumis, mettant en évidence la zone de texte.
14. Attributs de l'autofocus
De même, avec HTML5, des solutions JavaScript ne sont plus nécessaires pour résoudre le problème de l'autofocus. Si une entrée doit être sélectionnée ou ciblée, nous pouvons désormais utiliser la propriété automatique de HTML.
<Type d'entrée = Nom de texte = SomeInput Planterholder = Douglas Quaid requis Autofocus>
15. Prise en charge de l'audio
Nous n'avons plus besoin de compter sur des plugins tiers pour fournir l'audio. HTML5 fournit un élément audio <audio>. Actuellement, seuls les derniers navigateurs prennent en charge l'audio HTML5. À ce stade, il est préférable de fournir une certaine compatibilité vers l'arrière.
<Audio AutoPlay = AutoPlay Controls = Controls>
<source src = file.ogg />
<source src = file.mp3 ″ />
<a href = file.mp3 ″> Téléchargez ce fichier. </a>
</ audio>
En parlant de formats audio, ni Mozilla ni Webkit ne l'ont pleinement soutenu. Firefox veut voir un fichier .ogg, et le navigateur WebKit ne prend en charge que l'extension .mp3 la plus courante. Cela signifie que vous devez créer deux versions de l'audio, du moins jusqu'à présent. Lorsque Safari charge la page, il ne reconnaît pas le fichier de format .ogg et sera ignoré et déplacé vers la version MP3. Veuillez noter que IE ne le prend pas en charge, et l'opéra 10 ou moins ne prend en charge que les fichiers .wav.