Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Missverständnisse bei der Verwendung von CSS und HTML

高洛峰
Freigeben: 2017-02-28 13:47:45
Original
1217 Leute haben es durchsucht

Mythos 1. Polypenkrankheit

<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>
Nach dem Login kopieren

Die obige Situation der Verwendung redundanter p-Tags wird als „Polyposis" 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>
Nach dem Login kopieren

Missverständnis 2. Mehrklassensyndrom Beachten Sie Folgendes Klassen können auf eine beliebige Anzahl von Elementen auf der Seite angewendet werden, was sich sehr gut zur Identifizierung von Inhaltstypen oder anderen ähnlichen Elementen eignet

Eine Neuigkeit (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>
Nach dem Login kopieren

Die Verwendung von news-head und news-text in den oben genannten Klassennamen wird als „Multiple Syndrome“ bezeichnet viele Klassen zur Unterscheidung von Elementstilen

ist besser, p (pision) zu verwenden, um einen Teil darzustellen, anstatt keine Semantik zu haben (die meisten Leute missverstehen, dass p keine Semantik hat!!!), tatsächlich kann p Teilen Sie das Dokument in mehrere aussagekräftige Bereiche

Klassenname „News“ auf, um die gesamte Nachricht zu identifizieren. 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>
Nach dem Login kopieren

span to group Inline-Elemente Oder identifizieren Sie

<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>
Nach dem Login kopieren

Missverständnis 3. Missverständnisse über die Verwendung von ID werden verwendet, um bestimmte Elemente zu identifizieren die Seite (wie Seitennavigation, Kopfzeile, Fußzeile) und muss eindeutig sein; kann auch zur Identifizierung persistenter Strukturelemente (wie Hauptnavigation, Inhaltsbereich) verwendet werden

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

wird zur Identifizierung spezifischer Elemente auf der Seite (z. B. Site-Navigation, Kopfzeile, Fußzeile) verwendet und muss eindeutig sein. Es kann auch zur Identifizierung dauerhafter Strukturelemente (z. B. Hauptzeile) verwendet werden Navigation, Inhaltsbereich)

Missverständnisse bei der Verwendung von CSS und HTML


Weitere Artikel zu Missverständnissen bei der Verwendung von CSS und HTML finden Sie im PHP-Chinesisch Webseite!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!