Malentendus dans l'utilisation de CSS et HTML

Mythe 1. Maladie des polypes

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>

La situation ci-dessus d'utilisation de balises p redondantes est appelée "Polypose " devrait être simplifié en

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

Malentendu 2. Syndrome multiclasse Notez que les classes peuvent être appliquées à n'importe quel nombre d'éléments sur la page, ce qui est très approprié pour identifier les types de contenu ou d'autres éléments similaires

Une actualité (titre de l'actualité, détails de l'actualité)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

L'utilisation de news-head et news-text dans les noms de classe ci-dessus est appelée performance "Syndromes multiples", non Avoir besoin d'autant de classes pour différencier les styles d'éléments

est préférable d'utiliser p (pision) pour représenter une partie au lieu de n'avoir aucune sémantique (la plupart des gens comprennent mal que p n'a pas de sémantique !!!), en fait p peut diviser le document en plusieurs zones significatives

actualités du nom de la classe pour identifier l'intégralité de l'actualité. Ensuite, vous pouvez utiliser le style cascade pour identifier les titres et les textes d'actualités, qui doivent être modifiés comme suit :

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

span to group éléments en ligne Ou identifier

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

Malentendu 3. Un malentendu sur l'utilisation de l'identifiant est utilisé pour identifier des éléments spécifiques sur la page (comme la navigation du site, l'en-tête, le pied de page) et doit être unique ; peut également être utilisé pour identifier des éléments structurels persistants (tels que la navigation principale, la zone de contenu)

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}

est utilisé pour identifier des éléments spécifiques sur la page (tels que la navigation du site, l'en-tête, le pied de page) et doit être unique, il peut également être utilisé pour identifier des éléments structurels persistants (tels que le principal ; navigation, zone de contenu)

Pour plus d'articles liés aux malentendus dans l'utilisation du CSS et du HTML, veuillez prêter attention à le site PHP chinois !