首頁 > web前端 > html教學 > HTML與CSS使用高頻誤區詳解

HTML與CSS使用高頻誤區詳解

巴扎黑
發布: 2017-03-14 10:17:30
原創
1152 人瀏覽過

誤解一.多p症  

<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>
登入後複製

上述使用多餘的p標籤現狀,就稱為「多p症”,理應簡化成下

<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>
登入後複製

誤解二.多類別class症 注意點class可以應用於頁面任意多個元素,非常適合標識內容類型或其他類似的條目
一段新聞(新聞標題、新聞詳情內容)

<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>
登入後複製

上述類別名稱使用news-head與news-text 稱為"多類症"表現,不需要這麼多的類別區分元素樣式

最好使用p(pision)代表部分而不是沒有語義(大多數人誤解p無語義! !然後可以使用層疊(cascade)樣式識別新聞標題、文本,理應修改如下

<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 對行內元素進行

分組

或標識#

<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>
登入後複製

誤解三.id使用誤解用於識別頁面上特定元素(例如網站

導航

、頁首、頁尾)而且必須唯一; 也可以用來識別持久結構性元素(如主導航、內容區域)

/*大量的使用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;
}
登入後複製
用於識別頁面上特定元素(例如網站導覽、頁首、頁尾)而且必須唯一; 也可以用來標識持久性結構性元素(如主導航、內容區域)



以上就是本文的全部內容,希望本文的內容對大家的學習或工作能帶來一定的幫助,同時也希望多多支持腳本之家! HTML與CSS使用高頻誤區詳解

#
-->

以上是HTML與CSS使用高頻誤區詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板