html之區分id和class

標籤：

   如何正確使用id和class？

　       我們知道，在html頁面中，我們可以給元素的標籤中設定id和class，以便於在css中設定樣式（id選擇符前面應該加首碼符號“#”，而class選擇符前面應該加首碼符號“.”）、在JavaScript中設定行為使整個頁面變得豐富多彩。但是，怎麼正確使用id和class呢？

　　  第一：應當記住id（在英文中即Identity）即身份的意思，那麼就像社會安全號碼，它是唯一的，故在一個網頁裡id只能使用一次。而class是類的意思，那麼也就是說類似的、相似的元素都可以用同一個類名，即類具有普遍性，它可以重複使用多次（甚至可以說沒有限制）。

　　第二：我們認為id的優先順序為100，而class的優先順序為010，即id的優先順序是高於class的。

　　第三：在布局思路上，一般堅持這樣的原則：

　　　1.id用來實現宏偉布局和設計包含塊，盡量在結構外圍使用id，比如：logo、導航、主題內容、著作權等，很據命名規範可以分別命名為#logo、#nav、#contenter、#copyright。

　　　2.class更多的被應用到文字板塊和頁面修飾等方面，盡量在結構內部使用。且最好將含有class屬性的元素包含於含有id屬性的元素之中，也就是說不要在含有class屬性的元素內部包含含有id屬性的元素（當然，特殊情況除外，具體問題具體分析），這樣做的好處是有利於網站代碼的後期維護與修改。

　　 第四：應當注意，對於一個元素根據需要我們可以同時命名class和id。比如

       <span id="container" class="color">some words</span>

除此之外，我們還可以給一個元素同時命名幾個class，但是這幾個類名應當被包含在同一個引號裡，用空格分開。比如

        <span id="container" class="color size weight">some words</span>

　　　　第五：下面的名稱在用作id名和class名時大家可以做一下參考：

(1)頁面結構 

　　容器: container 

　　頁頭：header 

　　內容：content/container 

　　頁面主體：main 

　　頁尾：footer 

　　導航：nav 

　　側欄：sidebar 

　　欄目：column

　　頁面外圍控制整體布局寬度：wrapper

　　左右中：left right center 

(2)導航

　　導航：nav 

　　主導航：mainbav 

　　子導航：subnav 

　　頂導航：topnav 

　　邊導航：sidebar 

　　左導航：leftsidebar 

　　右導航：rightsidebar 

　　菜單：menu 

　　子功能表：submenu 

　　標題: title 

　　摘要: summary 

(3)功能 

　　標誌：logo 

　　廣告：banner 

　　登陸：login 

　　登入條：loginbar 

　　註冊：regsiter 

　　搜尋：search 

　　功能區：shop 

　　標題：title 

　　加入：joinus 

　　狀態：status 

　　按鈕：btn 

　　滾動：scroll 

　　標籤頁：tab 

　　文章列表：list 

　　提示資訊：msg 

　　當前的: current 

　　小技巧：tips 

　　表徵圖: icon 

　　注釋：note 

　　指南：guild 

　　服務：service 

　　熱點：hot 

　　新聞：news

　　下載：download 

　　投票：vote 

　　夥伴：partner 

　　友情連結：link 

　　著作權：copyright

　　

最後，以蘇軾的詩句勉勵自己。

　　　　　　莫聽穿林打葉聲，何妨吟嘯且徐行，竹杖芒鞋輕勝馬，誰怕？一蓑煙雨任平生。　　

　　

html之區分id和class