Maison  >  Article  >  interface Web  >  Guide html5-1. Compréhension approfondie des compétences du didacticiel sur les attributs globaux html5.

Guide html5-1. Compréhension approfondie des compétences du didacticiel sur les attributs globaux html5.

WBOY
WBOYoriginal
2016-05-16 15:50:281755parcourir

Aujourd'hui, je commence une nouvelle série de cours sur HTML5, qui sont mes notes d'étude de "The Definitive Guide to HTML5". Je trierai les chapitres qui, à mon avis, constituent un contenu bon ou significatif pour que tout le monde puisse apprendre.
Un élément peut définir ses propres attributs. Par exemple, la balise a définit l'attribut href. En conséquence, nous pouvons définir des comportements communs pour tous les éléments via des attributs globaux. Bien sûr, vous pouvez également définir des attributs globaux pour des éléments individuels, mais cela n'a pas beaucoup de sens. Je présenterai ces propriétés globales une par une ci-dessous.

Les exemples suivants s'exécutent normalement dans le navigateur Chrome. Certains exemples ne peuvent pas s'exécuter dans Firefox. Je n'ai pas testé d'autres navigateurs, je vous recommande donc d'utiliser le navigateur Chrome comme navigateur HTML5 préféré. Au lieu de me concentrer sur les problèmes de compatibilité des navigateurs, je me suis concentré sur l'apprentissage et la mise en œuvre. HTML5 est toujours en cours d'amélioration. Grâce à sa popularité, je pense que les navigateurs grand public le prendront de mieux en mieux en charge et que les problèmes de compatibilité des navigateurs seront alors bien meilleurs.
1.accesskey
L'attribut accesskey vous permet de définir un ou plusieurs raccourcis clavier afin de pouvoir sélectionner des éléments sur la page. Regardons l'exemple suivant :

Copiez le code
Le code est le suivant :




🎜>Nom :

="mot de passe" nom ="mot de passe" accesskey="p"/>


;
< ;/form>




Dans cet exemple, vous pouvez utiliser des combinaisons de touches pour sélectionner des éléments sur la page, comme dans Windows Sous le système d'exploitation, vous pouvez utiliser alt XXX pour sélectionner un élément.
Effet opérationnel :




2.class

Je ne veux pas en dire plus sur cet attribut. Il s'agit d'une fonction de regroupement d'éléments. Il est plus souvent utilisé en conjonction avec CSS pour définir différents effets d'affichage pour différents groupes de. éléments.

3.contenteditable
Il s'agit d'un nouvel attribut dans html5. Ajoutez l'attribut contenteditable à l'élément html. Définissez-le sur true pour permettre aux utilisateurs de modifier le contenu de l'élément ; ne permet pas aux utilisateurs de modifier.



Copier le code
Le code est le suivant :
Exemple
true"> ;Il pleut en ce moment










4.contextmenu

contextmenu permet aux utilisateurs de définir le menu contextuel des éléments HTML, et le menu apparaîtra lorsque l'utilisateur le déclenchera. Aucun navigateur ne prend encore en charge cet attribut.

5.dir

L'attribut dir définit l'alignement du texte de l'élément HTML et prend en charge deux valeurs, ltr (de gauche à droite) et rtl (de droite à gauche).


Copier le code

Le code est le suivant :
Exemple
rtl"> ;C'est de droite à gauche

C'est de gauche à droite







6. draggable
draggable est l'attribut qui implémente la fonction glisser-déposer des éléments html en html5.
7.dropzone
dropzone est également un attribut qui implémente la fonction glisser-déposer des éléments html en html5. Nous le présenterons en détail dans les cours suivants.
8.hidden
Tout le monde devrait être familier avec cet attribut qui consiste à masquer un élément html.
9.id
Tout le monde devrait connaître cet attribut. Il définit un identifiant unique pour l'élément html. Les éléments avec le même identifiant ne sont pas autorisés à exister dans une page html.
10.lang
lang spécifie la langue utilisée pour le contenu de l'élément html. La valeur de lang doit être un code de langue ISO valide. Vous pouvez visiter l'adresse suivante pour plus de détails, http://tools.ietf.org/html/bcp47. Il convient de noter que le traitement du langage est une question plutôt complexe et technique.

Copier le code
Le code est le suivant :




Exemple
fr"> ;Bonjour - comment allez-vous ?


Bonjour - commentez-vous ?

Hola-¿ cómo estás?






11.spellcheck
Lors de l'utilisation de l'attribut de vérification orthographique Parfois, le navigateur vous aidera à vérifier si l'orthographe du contenu du texte de l'élément HTML est correcte. L'attribut de vérification orthographique n'a de sens que lorsque l'élément HTML est modifiable.


Copier le codeLe code est le suivant :


Exemple

true"> ;Il s'agit d'un texte mal orthographié




Effet : (je n'ai pas obtenu l'effet souhaité en utilisant Chrome , je ne sais pas pourquoi)


12.style


Cet attribut n'a pas besoin d'être trop introduit. Il définit le style CSS pour les éléments HTML. 13.tabindex

tabindex permet de définir l'ordre d'accès des éléments html à l'aide de la touche de tabulation. Lorsque tabindex est défini sur -1, l'élément html ne sera pas sélectionné lorsque l'utilisateur utilisera la touche de tabulation.


Copier le code
Le code est le suivant :

Exemple
><étiquette>Nom :

:

"text" name="pays" tabindex="2"/>


>< /form>





14.title

title peut fournir des informations supplémentaires sur les éléments HTML, et il est souvent utilisé pour afficher des informations d'invite.




Copier le code

Le code est le suivant :




Exemple
Apress Publishing" href="http://apress.com">Visitez le site Apress

Effet :


C'est tout pour la leçon d'aujourd'hui. J'espère que ce contenu sera utile à tout le monde.
Adresse de téléchargement de la démo : Html5Guide.rar
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn