Analyse complète des attributs standard et des attributs personnalisés dans les compétences du didacticiel HTML5_html5

Comme expliqué dans la syntaxe HTML5, les éléments peuvent contenir des attributs permettant de définir diverses propriétés pour un élément.

Certaines propriétés sont définies comme globales et peuvent être utilisées sur n'importe quel élément, tandis que d'autres sont définies comme spécifiques à un élément. Toutes les propriétés ont un nom et une valeur, qui ressemblent à l'exemple ci-dessous.

Voici un exemple d'utilisation d'attributs HTML5, démontrant comment marquer un élément div avec un attribut nommé class et la valeur « exemple » :

L'attribut

...

ne peut être spécifié que dans la balise d'ouverture et ne doit pas être utilisé dans la balise de fermeture.

Les attributs HTML5 ne sont pas sensibles à la casse et peuvent être utilisés uniquement en majuscules ou dans un mélange de majuscules et de minuscules, bien que la convention la plus courante soit de toujours utiliser des minuscules.

Attributs standard
Les attributs répertoriés ci-dessous sont pris en charge par presque toutes les balises HTML5.

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

Attributs Options Fonction clé d'accès Défini par l'utilisateur Définir des raccourcis clavier pour accéder aux éléments. aligner droite, gauche, centre Alignez les étiquettes horizontalement. arrière-plan URL Définissez une image d'arrière-plan derrière l'élément. couleurbg Valeur numérique, valeur hexadécimale, valeur RVB Définit une couleur d'arrière-plan derrière l'élément. classe Défini par l'utilisateur. Catégories un élément pour faciliter l'utilisation de feuilles de style en cascade. contenteditable vrai, faux Définit si les utilisateurs peuvent modifier le contenu de l'élément. menu contextuel Identifiant du menu Définir un menu contextuel pour l'élément. données-XXXX Défini par l'utilisateur. Attributs personnalisés. Les auteurs de documents HTML peuvent définir leurs propres attributs. Les propriétés personnalisées doivent commencer par « data- ». déplaçable vrai,faux,auto Définit si l'utilisateur peut faire glisser l'élément. hauteur valeur numérique Définir la hauteur d'un tableau, d'une image ou d'une cellule de tableau. caché caché Définit si l'élément doit être visible. identifiant Défini par l'utilisateur. éléments nommés pour faciliter l'utilisation de feuilles de style en cascade. élément Liste d'éléments . est utilisé pour combiner des éléments. itemprop Liste des entrées. est utilisé pour combiner les entrées. vérification orthographique vrai, faux Définit si l'élément doit avoir une vérification orthographique ou une vérification des erreurs. style Feuille de style CSS. définit les styles en ligne pour les éléments. sujet Identifiant défini par l'utilisateur. définit les éléments associés à l'élément. index de tabulation Numéro d'onglet est déterminé par l'ordre de tabulation des éléments. titre Défini par l'utilisateur. Le titre "popup" de l'élément . valigner haut, milieu, bas Alignement vertical des balises dans les éléments HTML. largeur Valeur numérique. Définit la largeur des tableaux, des images et des cellules du tableau.

Attributs personnalisés
HTML5 introduit également une nouvelle fonctionnalité, qui est la possibilité d'ajouter des attributs de données personnalisés.

Les attributs de données personnalisés commencent par data et sont nommés en fonction de nos besoins. Voici un exemple simple :

...

Deux des exemples ci-dessus Personnalisé les attributs appelés sujet des données et niveau des données sont entièrement valides en HTML5. Nous pouvons également obtenir leurs valeurs en utilisant l'API JavaScript ou en CSS de la même manière que les propriétés standards.

Ajoutez des attributs personnalisés aux éléments HTML et accédez-y via JavaScript. Si vous l'avez déjà essayé, vous constaterez qu'il est facile d'ignorer la validation des balises, et HTML5 peut vous offrir la possibilité de créer et d'utiliser vos propres éléments. une page Web valide.

Créer un fichier HTML5 :

Si vous n'avez pas encore décidé lequel utiliser, vous pouvez copier le code ci-dessous :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. /span>
2. >
5. html
6. >
9. tête
10. >
13. script
14. >
16. /*fonctionne ici*/ 
18. script
19. >
22. tête
23. >
26. corps
27. >
30. corps
31. >
34. html
35. >

Définissez des éléments personnalisés dans le corps et accédez-y à l'aide d'éléments JavaScript dans la zone de script d'en-tête.

Créer un élément :

Tout d'abord, ajoutez du contenu et des éléments simples tels que des attributs et des identifiants personnalisés afin que nous puissions identifier l'exemple JavaScript.

Code XML/HTMLCopier le contenu dans le presse-papiers

2. div id="product1" data-product-category="vêtements"
3. >
5. Chemise en coton
7. div
8. >

Comme vous pouvez le voir, l'attribut personnalisé a la forme : "data-*", définissez le nom dans la partie "data-" ou un nom de votre choix. Utilisez des attributs personnalisés en HTML5, c'est la seule façon qui fonctionne. Par conséquent, utilisez cette méthode uniquement si vous souhaitez vérifier si la page Web est valide.

Bien sûr, les détails du projet déterminent si la propriété personnalisée vous est utile et comment vous la nommez. Cet exemple peut être appliqué aux sites Web de vente au détail dans différentes catégories de produits.

Les attributs personnalisés vous permettent d'utiliser du code JavaScript dans la page pour définir des éléments d'une manière spéciale, par exemple pour animer la fonction d'affichage. S'il n'y a pas d'éléments HTML standards, nous vous recommandons d'utiliser des attributs personnalisés.

Ajouter un bouton de test

Utilisez vos propres éléments JavaScript sur la page pour exécuter des événements, à condition que le code suivant soit ajouté à la page :

Code XML/HTMLCopier le contenu dans le presse-papiers

2. saisie type="bouton" valeur="obtenir l'attribut" onclick="getElementAttribute ("produit1")"
3. />

Obtenir les attributs :

Le moyen le plus courant d'accéder aux attributs en JavaScript est d'utiliser "getAttributes", qui est également la première étape que nous devons faire. Ajoutez la fonction suivante dans la zone de script d'en-tête de la page :

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction getElementAttribute(elemID) {
2. var theElement = document.getElementById(elemID);
3. var theAttribute = theElement.getAttribute('data-product-category' 🎜>); alerte(l'Attribut);
4. } 

5. Ici, nous avons ajouté la valeur d'alerte à l'exemple. Bien sûr, vous pouvez également l'ajouter dans le script selon vos propres besoins.

   Obtenir des données :

   Vous pouvez utiliser un ensemble de données d'éléments au lieu du DOM "getAttributes", ce qui peut être plus efficace, en particulier dans certains cas où le code parcourt plusieurs attributs. Cependant, la prise en charge des ensembles de données par le navigateur est encore très faible. , ce code exécute le même processus que la méthode // après.

   //var theAttribute = theElement.getAttribute('data-product-category');
   var theAttribute = theElement.dataset.productCategory
   Supprimez "data-" du nom de l'attribut dans l'ensemble de données, cela Toujours inclus dans le HTML.

   Veuillez noter que si le nom de votre attribut personnalisé contient un trait d'union, celui-ci apparaîtra sous forme de chameau lors de l'accès via les données, c'est-à-dire ("data-product-category" devient "productCategory").

   Autres modules et fonctions

   Nous avons obtenu la propriété, les scripts peuvent toujours la définir et la supprimer. Le code ci-dessous montre comment définir des propriétés à l'aide de modules et d'ensembles de données JavaScript standard.

   Code JavaScriptCopier le contenu dans le presse-papiers

   1. //Méthode DOM
   3. theElement.setAttribute('data-product-category', 'vente');
   4. //version de l'ensemble de données
   theElement.dataset.productCategory =
   6. "vente" ;
   Vous pouvez également utiliser des méthodes ou des ensembles de données DOM pour supprimer un attribut :
   9. //Méthode DOM
   theElement.removeAttribute(
   10. 'data-product-category' );
   11. //version de l'ensemble de données
   theElement.dataset.productCategory =
   12. null ;

   Implémenter des attributs personnalisés en HTML5 n'est pas techniquement très compliqué. La vraie difficulté est de savoir si la méthode que vous choisissez d'utiliser est adaptée à votre projet ; si oui, comment la rendre plus efficace ? Veuillez garder à l'esprit qu'il est encore trop tôt pour activer la méthode des ensembles de données en tant que fonctionnalité de page, car de nombreux navigateurs ne prennent pas encore en charge cette fonctionnalité.