Ausführliche Erläuterung häufiger Missverständnisse bei der Verwendung von HTML und CSS

Mythos 1. Polyp-Krankheit

<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>

Die obige Situation der Verwendung redundanter p-Tags wird als „Poly-p-Syndrom <“ bezeichnet 🎜>“ sollte wie folgt vereinfacht werden:

<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>

Missverständnis 2. Multiklassen-Klasse-Syndrom Beachten Sie, dass Klasse auf eine beliebige Anzahl von Elementen angewendet werden kann die Seite, sehr gut geeignet zum Identifizieren von Inhaltstypen oder anderen ähnlichen ElementenEine Nachricht (Nachrichtentitel, Nachrichtendetails)

<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>

Die oben genannten Klassennamen verwenden News-Head und Nachrichtentext Es wird als „

Multiple Class Syndrome“ bezeichnet. Es sind nicht so viele Klassen erforderlich, um Elementstile zu unterscheiden.
Es ist besser,
p (pision) zu verwenden ), um Teile darzustellen, anstatt keine Semantik (die meisten Leute verstehen falsch, dass p keine Bedeutung hat! !), tatsächlich kann p das Dokument in mehrere sinnvolle Bereiche unterteilen
Klassennamennachrichten, um das Ganze zu identifizieren Nachrichtenartikel. Dann können Sie den Kaskadenstil verwenden, um Nachrichtentitel und -texte zu identifizieren, die wie folgt geändert werden sollten:

<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 or mark

<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>

Missverständnis 3. Missverständnisse bei der ID-Verwendung werden verwendet, um bestimmte Elemente auf der Seite zu identifizieren (z. B. Site Navigation , Kopfzeile, Fußzeile) und müssen eindeutig sein ; es kann auch verwendet werden, um persistente Strukturelemente (z. B. Hauptnavigation, Inhaltsbereiche) zu identifizieren.

/*大量的使用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;
}

Wird verwendet, um bestimmte Elemente auf der Seite zu identifizieren (z. B. Site-Navigation, Kopfzeilen). , Fußzeilen) und müssen Eindeutig sein; kann auch verwendet werden, um persistente Strukturelemente (wie Hauptnavigation, Inhaltsbereich) zu identifizieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels für das Lernen aller nützlich sein wird oder dass die Arbeit etwas Hilfe bringen kann, und ich hoffe auch, Script House zu unterstützen!

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung häufiger Missverständnisse bei der Verwendung von HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!