Introduction aux balises p et span en HTML5

1. Sélection de l'ID et de la classe

Il nous est souvent difficile de décider si un élément doit utiliser un ID ou un nom de classe directement :

Utilisez ID uniquement lorsque l'élément cible est si unique que le terme ne sera jamais utilisé ailleurs sur le site. En d'autres termes, vous ne devez utiliser ID que si vous êtes absolument sûr que l'élément n'apparaîtra qu'une seule fois. qu'à l'avenir Si vous avez besoin d'éléments similaires, utilisez des classes

Le résumé est très clair, il n'est donc pas nécessaire de trop expliquer.

Parlons de leurs conséquences respectives. lorsqu'ils sont trop utilisés.

Inconvénients d'une trop grande utilisation des identifiants :Si vous utilisez beaucoup les identifiants, vous aurez bientôt du mal à trouver des noms uniques, et vous finirez par devoir créer des noms très longs. , conventions de dénomination très complexes. Résolu Pour ce problème, il vous suffit de lire le résumé ci-dessus

Inconvénients de l'utilisation de trop de classes :Lors de l'écriture de styles CSS, certaines personnes ont l'habitude d'en ajouter. une classe à chaque endroit du style, donc Pour contrôler le style requis avec plus de précision, cela rendra le code encombrant et aura une mauvaise flexibilité. Ainsi, lorsque nous écrivons du code, si vous trouvez des mots répétés dans la classe, vous devriez le faire. envisagez de décomposer ces éléments en leurs sections, cela augmentera considérablement la flexibilité et rendra la page plus concise.

  <h2 class="news-head">这是头部</h2>
  <p class="news-text">这是一个文本</p>
  <p class="news-text">这是另一个文本</p>

Avec des mots répétés comme celui-ci, vous devriez vous demander si ces éléments peuvent. être décomposé en leurs composants. Rendre le code plus "componentisé". Par exemple, écrivez-le comme ceci :

<p class="news">
    <h2>这是头部</h2>
    <p>这是一个文本</p>
    <p>这是另一个文本</p>
</p>

puis identifiez les différents contenus via cascade

2.p. et span

L'élément p est un élément qui permet d'ajouter de la structure au document. p n'est pas sémantique, p signifie en fait pision. De même, n'abusez pas de l'élément p
Utilisez p. selon les besoins Remarque : L'élément p ne doit être utilisé que lorsqu'il n'existe aucun élément permettant de réaliser une segmentation de zone. Sinon, le code sera trop compliqué.
PS : je ne voulais pas écrire d'exemple dans. un livre à ce sujet. Mais de mon point de vue, du point de vue de me dire cette phrase, même si je sais qu'elle devrait être comme ça, je ne sais pas si je dois utiliser p à un certain moment.

Si cela est une navigationListe principale. Ne la défendez pas dans la p.

Emmet简写为:p>ul>li*3>a[href=#] 然后按Table键
<p>
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </p>

Mais ne pensez pas mécaniquement que tant qu'il s'agit d'une balise ul, vous n'en avez pas besoin. pour l'envelopper avec une balise p. Jetons un coup d'œil au contenu de la classe class< in 1 🎜> Pensez-vous que lorsque vous souhaitez effectuer une conception de style sur les étiquettes de toute la liste de navigation principale, devriez-vous l'ajouter. une classe ou un identifiant à chaque étiquette li, ou devriez-vous simplement ajouter une étiquette p pour l'envelopper comme mentionné en 1. Le code devient "componentisé".

Je n'ai jamais fait de développement H5, mais je sais qu'il y a pas d'absolu dans ce genre de chose, et il faut quand même voir s'il faut utiliser p en fonction du but d'utilisation. Personnellement, j'ai l'impression que bien qu'il s'agisse d'une liste de navigation et qu'elle puisse être construite directement en utilisant ul, j'ai l'impression que l'ajout d'un p. ne fait pas simplement de la liste de navigation un bloc. L'autre est de me dire que cette liste de navigation est une partie

La fonction principale de l'élément

> grouper ou identifier les éléments dans la rangée. La différence entre les deux est déjà évidente.C'est tout QAQ J'ai l'impression d'avoir écrit tellement de choses qui peuvent être écrites en deux. phrases. Quoi qu'il en soit, ce ne sont que deux phrases en résumé, mais elles doivent toutes être mémorisées

[Recommandations associées]

<p><span class="aa">Harry Knowles</span></p>

1

Tutoriel vidéo en ligne h5 gratuit

.

2.

Manuel de la version complète HTML5

3

Tutoriel vidéo HTML5 original php.cn

.

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!