22 compétences de base sur HTML5 (tutoriel graphique)_compétences du didacticiel HTML5-Tutoriel H5-php.cn

La technologie Web se développe si rapidement que si vous ne suivez pas le rythme, vous serez éliminé. Par conséquent, afin de faire face au prochain HTML5, cet article résume 22 compétences de base en HTML5. J'espère qu'il vous sera utile pour bien apprendre davantage le HTML5. 1. Nouvelle déclaration Doctype La déclaration de XHTML est trop longue Je pense que peu de développeurs front-end peuvent écrire cette déclaration Doctype à la main.

Copier le code Le code est le suivant : "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 La déclaration Doctype est très courte. Je pense que vous pourrez vous en souvenir immédiatement après avoir vu cette déclaration. Vous n'avez pas besoin de gaspiller vos cellules cérébrales pour vous souvenir de la déclaration XHTML Doctype longue et un peu anormale. La courte déclaration DOCTYPE de HTML5 permet aux navigateurs modernes tels que Firefox et Chrome et aux navigateurs tels que IE6/7/8 d'entrer en mode (quasi-)standards. / 7 peut réellement prendre en charge HTML5 Doctype. En fait, IE passera en mode standard tant que le doctype sera conforme à ce format. 2. Balise Regardez le code simple suivant :

Copier le code Le code est le suivant : image de Mars .&lt ;/h6>

Malheureusement, la balise h6 ici semble n'avoir rien à voir avec la balise img, et la sémantique n'est pas assez claire. HTML5 s'en est rendu compte et a adopté la balise Lorsque la balise est utilisée en combinaison avec la balise , la balise h6 et la balise img peuvent être combinées et le code devient plus sémantique.

Copier le code Le code est le suivant : Ceci est une image de quelque chose d'intéressant

3. Redéfinir Il n'y a pas si longtemps, j'ai utilisé Balises pour créer des sous-titres liés à votre logo. Cependant, la balise a été redéfinie en HTML5 pour la rendre plus sémantique. La taille de la police le site Internet. 4. Supprimez l'attribut type des balises Javascript et CSS Habituellement, vous ajouterez l'attribut type à et :

Copier le code Le code est le suivant :

En HTML5, l'attribut type n'est plus nécessaire car il semble un peu redondant. Le supprimer peut rendre le code plus concis.

Copier le code Le code est le suivant :

5 . S'il faut utiliser des guillemets doubles C'est un peu déroutant, HTML5 n'est pas XTHML, vous pouvez omettre les guillemets doubles dans les balises. Je crois que la plupart des camarades, moi y compris, sont habitués à ajouter des guillemets doubles, car cela donne au code un aspect plus standard. Cependant, cela dépend de vos préférences personnelles d'utiliser ou non des guillemets doubles.

Copier le code Le code est le suivant : démarrer le réacteur.

6. Rendre le contenu Web modifiable 7. Zone de saisie du courrier électronique Une nouvelle entrée a été ajoutée dans HMTL5. L'attribut email de la boîte peut détecter si le contenu saisi est conforme au format d'écriture de l'e-mail. La fonction devient de plus en plus puissante. Avant HTML5, elle ne pouvait être détectée que par JS. Bien que la validation de formulaire intégrée devienne bientôt une réalité, de nombreux navigateurs ne prennent pas encore en charge cet attribut et le traitent uniquement comme une zone de saisie de texte ordinaire.

Copier le code Le code est le suivant : email: formulaire de soumission

Jusqu'à présent, non pris en charge, même par les navigateurs modernes. attribut, donc cet attribut n'est toujours pas fiable pour le moment. 8. Espaces réservés Les espaces réservés dans la zone de texte (voir l'effet de champ de recherche sur ce blog) sont utiles pour améliorer l'expérience utilisateur. Avant, nous ne pouvions compter que sur JS pour occuper. En raison de l'effet des espaces réservés, l'espace réservé de l'attribut placeholder est ajouté en HTML5.

Copier le code Le code est le suivant :

De même, les navigateurs modernes grand public actuels ne prennent pas très bien en charge cet attribut. Actuellement, seuls Chrome et Safari prennent en charge cet attribut, Firefox et Opera ne prennent pas en charge cette propriété. 9. Stockage local La fonction de stockage local de HTML5 permet aux navigateurs modernes de « mémoriser » ce que nous saisissons, même si le navigateur est fermé et actualisé. Bien que certains navigateurs ne prennent pas en charge cette fonction, IE8, Safari 4 et Firefox 3.5 prennent toujours en charge cette fonction. Vous pouvez la tester. 10. En-tête et pied de page plus sémantiques Le code suivant n'existera plus en HTML5

Copier le code Le code est le suivant : ... ...

Habituellement, nous définissons un div pour l'en-tête et le pied de page, puis ajoutons un autre identifiant , mais les balises et peuvent être utilisées directement en HTML5, le code ci-dessus peut donc être réécrit comme :

Copier le code Le code est le suivant : ... .. .

Attention à ne pas confondre ces deux balises avec l'entête et le pied de page du site, ce ne sont que des conteneurs qui les représentent. 11. La prise en charge de HTML5 par IE La prise en charge actuelle de HTML5 par le navigateur IE n'est pas bonne, ce qui constitue également un obstacle majeur à la popularisation plus rapide de HTML5. Cependant, la prise en charge de HTML5 par IE9 est élevée. est toujours très bon. IE analyse toutes les nouvelles balises HTML5 en éléments en ligne, mais en fait ce sont des éléments de niveau bloc, il est donc nécessaire de définir un style pour elles :

Copier le code Le code est le suivant : en-tête, pied de page, article, section, nav, menu, hgroup { affichage : bloc ; }

Malgré cela, IE ne peut toujours pas analyser ces nouvelles balises HTML5. Pour le moment, vous devez utiliser Javascript pour résoudre ce problème :

Copier le code Le code est le suivant : document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup") ; document.createElement("nav"); document.createElement("menu");

Vous pouvez utiliser ce morceau de code Javascript pour corriger une meilleure analyse d'IE HTML5

Copier le code Le code est le suivant : 12. > Ceci est similaire au deuxième conseil. Si vous utilisez les balises h1 et h2 pour représenter respectivement le nom et le sous-titre du site Web, cela rendra les deux titres étroitement liés par nature non liés. À ce stade, vous pouvez utiliser la balise pour les combiner, afin que le code soit plus sémantique.

Copier le code Le code est le suivant : Rappel de la page des fans Uniquement pour les personnes qui veulent le souvenir d'une vie. ;

13. Attributs requis

Le personnel front-end doit avoir réalisé de nombreux projets de validation de formulaire, dont l'un est très important Certaines zones de saisie doivent être remplies, vous devez donc utiliser Javascript pour les vérifier. En HTML5, un nouvel attribut "doit être rempli" est ajouté : obligatoire. Il existe deux manières d'utiliser l'attribut requis. La deuxième méthode est plus structurelle, tandis que la première est plus concise.

Copier le code Le code est le suivant :

Avec cet attribut, le formulaire peut être soumis La vérification devient plus facile, jetez un œil à l'exemple simple ci-dessous :

Copiez le code Le code est tel suit : votre nom : Go

Si la zone de saisie est vide, le formulaire ne sera pas soumis avec succès. 14. Obtenir automatiquement le focus

De même, HTML5 ne nécessite plus Javascript pour résoudre le problème de l'obtention automatique du focus pour les zones de saisie. Si une zone de saisie doit être sélectionnée ou obtenir le focus de saisie, HTML5 ajoute. un nouvel attribut autofocus :

Copier le code Le code est le suivant : &lt ;input type="text" name="someInput" placeholder="douglas quaid" requirejs="required" autofocus="autofocus"> autofocus peut également être écrit sous la forme "autofocus=autofocus" , cela semble plus standard, cela dépend de vos préférences personnelles. 15. Prise en charge de la lecture audio

HTML5 fournit la balise , qui résout le problème de devoir recourir à des plug-ins tiers pour lire des fichiers audio dans le passé. Jusqu'à présent, seuls quelques-uns des derniers navigateurs prennent en charge cette balise.

Copier le code Le code est le suivant : Téléchargez ce fichier.

Pourquoi existe-t-il deux formats de fichiers audio ? En raison des différences dans les formats pris en charge par les navigateurs Firefox et Webkit, Firefox ne peut prendre en charge que les fichiers .ogg, tandis que Webkit ne prend en charge que les fichiers .mp3. La solution consiste à créer deux versions de fichiers audio, afin qu'ils soient compatibles avec Firefox et Webkit. ., veuillez noter qu'IE ne prend pas en charge cette balise. 16. Prise en charge de la lecture vidéo Comme la balise , HTML5 prend également en charge la balise YouTube a également annoncé une nouvelle intégration de vidéos HTML5. Il est dommage que la spécification HTML5 ne précise pas de codec vidéo spécifique, mais laisse le soin au navigateur de décider. Cela crée un problème de compatibilité avec les navigateurs. Bien que Safari et IE9 prennent tous deux en charge les vidéos au format H.264 (Flash Player peut les lire), Firefox et Opera prennent en charge les formats open source Theora et Vorbis. Par conséquent, lors de l’affichage de vidéos HTML5, deux formats doivent être préparés.

Copier le code Le code est le suivant : votre navigateur est ancien. téléchargez plutôt cette vidéo. &lt ;/div> Il convient de noter que même si l'attribut type peut être omis, s'il est ajouté, le navigateur peut l'analyser plus rapidement et avec précision Fichiers vidéo. Tous les navigateurs ne prennent pas en charge les vidéos HTML5, alors soyez prêt à utiliser la version Flash à la place. Bien sûr, la décision vous appartient 17 Précharger les vidéos Attribut de préchargement : précharger, en premier. déterminer si la vidéo doit être préchargée. Si le visiteur visite une page contenant de nombreuses vidéos, il est nécessaire de précharger une vidéo, ce qui peut réduire le temps d'attente du visiteur et améliorer l'expérience utilisateur. Vous pouvez ajouter un attribut de préchargement au &lt. ;video> pour implémenter la fonction de préchargement

... [/code]

18. Contrôle d'affichage L'attribut de contrôle d'affichage peut ajouter un contrôle de lecture et de pause à la vidéo. Il convient de noter que l'effet d'affichage de chaque navigateur peut être différent.

Copier le code Le code est le suivant : ... 19. En utilisant des expressions régulières en HTML5, nous peut utiliser des expressions régulières directement ;input id="username" type="text" name="username" placeholder="4 <> 10" requirejs="required" autofocus="autofocus" pattern="[A-Za". -z]{4, 10}"> Go

20. Détecter le couplage des navigateurs Prise en charge des attributs HTML5

Étant donné que chaque navigateur a une prise en charge différente des attributs HTML5, cela a provoqué des problèmes de compatibilité. Cependant, vous pouvez utiliser des méthodes pour détecter si le navigateur prend en charge ces attributs. Si le code de l'exemple ci-dessus souhaite détecter si l'attribut de modèle est reconnu par le navigateur, vous pouvez utiliser du code Javascript pour le détecter.

Copier le code Le code est le suivant : alert( 'motif' dans document.createElement ('input') ) // boolean;

En fait, il s'agit d'une méthode courante pour déterminer la compatibilité du navigateur. La bibliothèque jQuery utilise souvent cette méthode. Le code ci-dessus crée une balise d'entrée et vérifie si l'attribut pattern est pris en charge par le navigateur. S'il est pris en charge, le navigateur prend en charge cette fonction, sinon ce n'est pas le cas.

Copier le code Le code est le suivant : > if ( !'pattern' in document.createElement('input') ) { // effectuer une validation côté client/serveur }

21. Mark標籤 標籤用於高亮顯示那些需要在視覺上向用戶突出其重要性的文字，包裹在此標籤裡的字符串必須與使用者當前的行為相關。例如，如果我在一些部落格中搜尋「Open your Mind」 ，我可以使用在 標籤裡使用JavaScript 來包裹每一次動作。

複製程式碼 程式碼如下: search results 33> They were interrupted, just after Quato said, "Open your Mind" . 22. 該如何正確的使用div標籤 有些人可能會有疑問，有了 和 等這些標籤， 標籤在HTML5中還有用嗎？答案是肯定的，例如你想創建一個能包裹特殊內容的容器自由靈活的 肯定是首選，而你要創建一篇文章或者一個導航菜單，建議你使用更有語義的 和標籤。 很多人認為HTML5可能還是很遙遠的事，所以直接無視，其實不然，現在很多網站都已經開始使用HTML5了，事實上，HTML5的一些新增屬性和功能是讓程式碼變得更簡潔，這總歸是件好事，應該值得我們推崇。最後感謝你閱讀了這篇HTML5的入門文章，希望能為你進一步學習HTML5提供一些幫助。

22 compétences de base sur HTML5 (tutoriel graphique)_compétences du didacticiel HTML5

image de Mars .< ;/h6>

Ceci est une image de quelque chose d'intéressant

démarrer le réacteur.

search results 33>

They were interrupted, just after Quato said, "Open your Mind".