1. 程式人生 > >HTML和CSS命名規範

HTML和CSS命名規範

html/css命名規範:

有規範才能統一,才能更好的交流,命名不但要自己能看懂,還要別人也能很容易明白。所以,有一個規範的命名規則是很重要的.

  1. 所有的命名最好都小寫
  2. 屬性的值一定要用雙引號("")括起來,且一定要有值
  3. 每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整
  4. 空元素要有結束的tag或於開始的tag後加上"/"
  5. 表現與結構完全分離,程式碼中不涉及任何的表現元素,如style、font、bgColor、border等
  6. <h1>到<h5>的定義,應遵循從大到小的原則,體現文件的結構,並有利於搜尋引擎的查詢。
  7. 給每一個表格和表單加上一個唯一的、結構標記id
  8. 給圖片加上alt標籤
  9. 儘量使用英文命名原則
  10. 儘量不縮寫,除非一看就明白的單詞

CSS命名規則:

頭:header                內容:content/containe

尾:footer                 導航:nav

側欄:sidebar               欄目:column

頁面外圍控制整體佈局寬度:wrapper    左右中:left right center

登入條:loginbar             標誌:logo

廣告:banner                頁面主體:main

熱點:hot                 新聞:news

下載:download              子導航:subnav

選單:menu               子選單:submenu

搜尋:search               友情連結:friendlink

頁尾:footer               版權:copyright

滾動:scroll                內容:content

標籤頁:tab               文章列表:list

提示資訊:msg              小技巧:tips

欄目標題:title              加入:joinus

指南:guild               服務:service

註冊:regsiter              狀態:status

投票:vote               合作伙伴:partner

HTML標籤 id的命名規範:

(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

樣式檔案命名:

主要的:master.css

佈局版面:layout.css

專欄:columns.css

文字:font.css

列印樣式:print.css

主題:themes.css

重置樣式:reset.css /normalize. css