Explication détaillée des malentendus courants dans l'utilisation de HTML et CSS

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 concernant l'utilisation de balises p redondantes est appelée "Syndrome du poly p " devrait être simplifié comme suit

<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 class multi-classes Notez que la classe peut être appliquée à n'importe quel nombre d'éléments sur la page, très appropriée 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>

Les noms de classe ci-dessus utilisent news-head et news-text C'est ce qu'on appelle la performance du "Syndrome de classes multiples". Il n'est pas nécessaire d'avoir autant de classes pour distinguer les styles d'éléments

Il est préférable d'utiliser p (pision. ) pour représenter des parties plutôt qu'aucune sémantique (la plupart des gens comprennent à tort que p n'a aucun sens ! !), en fait, p peut diviser le document en plusieurs zones significatives

nom de classe news pour identifier l'ensemble. information. Ensuite, vous pouvez utiliser le style cascade pour identifier les titres et les textes d'actualités. Il doit être modifié 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 grouper ou marquer .

<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 dans l'utilisation de l'ID 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 la navigation principale, les zones 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;
}

Utilisé pour identifier des éléments spécifiques sur la page (tels que la navigation du site, les en-têtes , pieds de page) et must Unique; peuvent également être utilisés pour identifier des éléments structurels persistants (tels que la navigation principale, la zone de contenu)



Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article sera utile à l'apprentissage de chacun ou que le travail pourra apporter de l'aide, et j'espère également soutenir Script House !

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!