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

Jun 27, 2017 am 11:38 AM
html span

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles