Detailed explanation of common misunderstandings in the use of HTML and CSS

Myth 1. Polyp syndrome

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

The above situation of using redundant p tags is called "Polyp syndrome " should be simplified to the following

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

Misunderstanding 2. Multi-class class syndrome Note that class can be applied to any number of elements on the page, which is very suitable for identification Content type or other similar items
A piece of news (news title, news details)

<h1 id="Elastic-nbsp-Layout-nbsp-Example-View-nbsp-Source-nbsp-for-nbsp-the-nbsp-HTML-nbsp-and-nbsp-CSS">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>

The above class names are called "## if they use news-head and news-text. #Multi-category syndrome"Performance, there is no need for so many classes to distinguish element styles
It is better to use
p (pision) to represent part instead of having no semantics (most people misunderstand that p has no semantics! ! !), in fact, p can divide the document into several meaningful areas.
class name news to identify the entire news item. Then you can use the cascade style to identify news titles and texts. You should modify it as follows

<p class="news">
    <h1 id="Elastic-nbsp-Layout-nbsp-Example-View-nbsp-Source-nbsp-for-nbsp-the-nbsp-HTML-nbsp-and-nbsp-CSS">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 identify the inline elements

<h2 id="nbsp-Andy-nbsp-wins-nbsp-an-nbsp-Oscar-nbsp-for-nbsp-his-nbsp-cameo-nbsp-in-nbsp-Iron-nbsp-Man"> 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>

Misunderstanding 3. Misunderstanding about the use of id is used to identify specific elements on the page (such as sitenavigation, header, footer) and must be unique; it can also be used to identify persistent Structural elements (such as main navigation, content area)

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

are used to identify specific elements on the page (such as site navigation, headers, footers) and must be unique; can also be used Identify persistent structural elements (such as main navigation, content area)

The above is the entire content of this article. I hope that the content of this article can bring certain benefits to everyone's study or work. Help, and I hope you can support Script Home!

The above is the detailed content of Detailed explanation of common misunderstandings in the use of HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!