Häufige Missverständnisse bei der Verwendung von CSS und HTML

Dieses Mal werde ich Sie auf häufige Missverständnisse bei der Verwendung von CSS und HTML aufmerksam machen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS und HTML?

Mythos 1. Polypensyndrom

<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 „Polypensyndrom“ sollte vereinfacht werden zu

<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. Mehrklassensyndrom Beachten Sie, dass Klassen auf eine beliebige Anzahl von Elementen auf der Seite angewendet werden können, was sich sehr gut zur Identifizierung von Inhaltstypen oder anderem eignet ähnliche Elemente. Ein Eintrag von

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

Der obige Klassenname verwendet news-head und news-text und wird aufgerufen „

Mehrere Klassen “ Leistung, es sind nicht so viele Klassen erforderlich, um Elementstile zu unterscheiden

Es ist besser,

p (pision ), um Teile statt keiner Semantik darzustellen (die meisten Leute missverstehen, dass p keine Bedeutung hat! !), tatsächlich kann p das Dokument in mehrere sinnvolle Bereiche unterteilen

Klassenname Nachrichten zu Identifizieren Sie die gesamte Nachricht. Dann können Sie den Kaskadenstil verwenden, um Nachrichtentitel und -texte zu identifizieren. Er sollte wie folgt geändert werden:

<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 muss Eindeutig sein; kann auch verwendet werden, um persistente Strukturelemente (wie Hauptnavigation, Inhaltsbereich) zu identifizieren

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

3D-Flip-Effekt von Baidu Tieba

CSS3, um einen animierten Fahrradeffekt zu erzielen

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