Maison >interface Web >tutoriel HTML >La différence entre les balises Div, span et label en HTML

La différence entre les balises Div, span et label en HTML

巴扎黑
巴扎黑original
2017-06-27 11:38:213144parcourir

p et span

Quand tout le monde apprend pour la première fois la mise en page p+css, il y a beaucoup de confusion. Il n'y a pas de "règles" certaines dans l'utilisation de p et span. Je pense qu'il y en a deux. La différence n'est pas grande. Dans les définitions du w3c de p et span : p en tant que structure de document divisée en fait naturellement la sémantique la plus officielle, mais ces sémantiques officielles le sont. trop déroutant. La structure est
bonne, mais il est toujours déroutant de savoir s'il faut utiliser p ou span dans de petits endroits. En fait, c'est la définition dans "Microsoft MSDN Library"
qui fait soudainement comprendre aux gens.

p : Spécifiez le conteneur pour le rendu HTML

span : Spécifiez le conteneur de texte en ligne

En termes simples, s'il y a d'autres balises dans , utilisez p , s'il ne contient que du texte, vous devez utiliser span

p est un élément de niveau bloc, utilisé pour fournir la structure et l'arrière-plan des gros blocs de contenu dans le document HTML

Span est un élément en ligne, définissant une zone à l'intérieur de la ligne (c'est-à-dire qu'une ligne peut être divisée en plusieurs zones par )

La balise span peut être intégrée dans le p tag, (p peut être considéré comme un grand conteneur, span est un petit conteneur, bien sûr un grand conteneur peut contenir un petit conteneur)


span et label

Avec l'instruction ci-dessus sur span, nous pouvons effectuer des opérations de conteneur span sur du texte, et nous pouvons définir des styles CSS et ainsi de suite, mais l'étiquette semble également possible ? Mais quelle est la différence entre les deux

balise d'étiquette est principalement utilisée pour lier un élément de formulaire ? 🎜>label tag est cliqué, il est lié L'élément de formulaire obtiendra le focus d'entrée

span est un conteneur pour le texte ordinaire.

Exemple :



Avez-vous visité mon blog





(Appuyez sur le texte "Oui" ou "Non" pas sur la radio)< /span>






Résultat en cours :



Une question est :

L'attribut accesskey n'est-il pas utilisé pour définir les touches de raccourci ? Mais ni les touches 1 ni alt+1 ne répondent. Je ne sais pas ce qui se passe et j'espère qu'un expert pourra me donner une réponse sur la façon d'utiliser la touche d'accès du label.




Pièce jointe : L'utilisation spécifique de l'étiquette :

La marque d'étiquette

est une marque d'étiquette. Cette marque prend en charge la liaison avec d'autres contrôles interactifs utilisateur et déclenche les événements correspondants au nom du contrôle lié. La méthode de liaison est la suivante : spécifier la valeur de l'attribut for comme ID du contrôle de destination (contrôle de liaison). . Dans des circonstances normales, il est plus courant d'utiliser la liaison d'étiquettes lors de l'utilisation de boutons radio et de cases à cocher .
Deux attributs dans Label sont très utiles, l'un est pour et l'autre est accesskey
Pour l'attribut :
Fonction : représente l'étiquette balise Élément HTML à lier, lorsque vous cliquez sur cette balise, l'élément lié aura le focus
Utilisation :


Attribut de clé d'accès :
Fonction : Indique la touche de raccourci pour accéder à l'élément lié à la balise d'étiquette. Lorsque vous appuyez sur la touche de raccourci, l'élément lié prend le focus.
Utilisation :

Limitations : La touche de raccourci définie par l'attribut accessKey ne peut pas entrer en conflit avec la touche de raccourci du navigateur, sinon elle sera priorité ou le navigateur Le raccourci clé .


Remarque :
Pour lier LABEL à un autre contrôle, définissez l'attribut FOR de l'élément LABEL sur le même que l'ID du contrôle . Lier LABEL à la propriété NAME du contrôle est inutile. Cependant, pour soumettre un formulaire, vous devez spécifier un nom pour le contrôle auquel l'élément LABEL est lié.


Il existe deux méthodes pour ajouter un souligné à la touche de raccourci spécifiée . La prise en charge du texte enrichi pour l'élément LABEL permet l'ajout d'éléments U de chaque côté du caractère accélérateur spécifié par l'attribut ACCESSKEY. Si vous préférez utiliser une feuille de style (CSS) pour appliquer le style, vous pouvez entourer le caractère dans un SPAN et le styliser comme «text-decoration : underline".


Si l'utilisateur clique sur LABEL, l'événement onclick sur LABEL sera déclenché en premier, puis l'événement onclick sur le contrôle spécifié par l'attribut htmlFor sera déclenché . Appuyez sur La touche de raccourci définie par LABEL définira le focus mais ne déclenchera pas l'événement onclick


Les étiquettes ne peuvent pas être imbriquées


Cet élément. n'est pas autorisé dans Internet Explorer 4.0 et disponible dans les versions HTML et scripts ci-dessus


Cet élément est un élément en ligne


Cet élément nécessite une balise de fermeture. 🎜>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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