1. 程式人生 > >最全的HTML和CSS標籤命名規則

最全的HTML和CSS標籤命名規則

資料夾命名

主要建立以下資料夾:

  1. Images 存放一些網站常用的圖片;
  2. Css 存放一些CSS檔案;
  3. Flash 存放一些Flash檔案;
  4. PSD 存放一些PSD原始檔;
  5. Temp 存放所有臨時圖片和其它檔案;
  6. copyright 版權資訊(可選)
  7. readme 說明檔案

CSS命名

本CSS命名規則只適合在table製作模式下

  1. css檔案統一放在css資料夾下;命名css.css
  2. 主樣式定義:body、table、td、tr、a
  3. 連結樣式定義:link_white(白色);link_black (黑色);link_blue (藍色) 等等;說明:如有重複的後面加阿拉伯數字;如 link_red01。
  4. 文字樣式定義:font_red (紅色);font_red_14 (紅色14號字);font_red_14b (紅色14號加粗)
  5. 邊框樣式定義:border_red_tblr (紅色四個邊);border_red_blr(紅色底左右三邊);border_red_lr(紅色左右兩個邊);border_red_b (紅色底一個邊)等等;
  6. 表單樣式定義:text_100 (文字欄位寬為100); textarea_200_red (文字區域寬為200有紅色邊框);select_100 (列表寬為100);button_150 (按鈕寬150);說明:表單用寬度定義,在命名中最長寫到:“text_100_red”
  7. 線的樣式定義:line_X (橫線);line_Y (豎線);line_X_red (紅色橫線);line_X_red2 (兩個畫素的紅色橫線);說明:在line中只定義虛線,實線在border中定義
  8. 其它樣式定義:在這裡主要定義一些個性化的樣式;

檔案命名

具體檔案命名

  • head.asp 標頭檔案
  • foot.asp 底檔案
  • index.asp 首頁檔案
  • sort.html 分類巢狀檔案
  • article_channel.asp 文章_頻道頁
  • article_list.asp 文章_列表頁
  • article_detail.asp 文章_顯示頁,註明:如果有多個文章頻道,則用article01, article02,article03等等
  • exhibit_channel.asp 展會資訊_頻道頁
  • exhibit_list.asp 展會資訊_列表頁
  • exhibit_detail.asp 展會資訊_顯示頁
  • product_channel.asp 產品中心_頻道頁
  • product_list.asp 產品中心_列表頁
  • prodect_detail.asp 產品中心_顯示頁
  • corporation_channel.asp 會員_頻道頁
  • corporation_list.asp 會員_列表頁
  • corporation_detail.asp 會員_顯示頁
  • information_channel.asp 商機資訊_頻道頁
  • information_list.asp 商機資訊_列表頁
  • information_detail.asp 商機資訊_顯示頁
  • job_channel.asp 招聘_頻道頁
  • job_list.asp 招聘_列表頁
  • job_detail.asp 招聘_顯示頁
  • hr_channel.asp 求職_頻道頁
  • hr_list.asp 求職_列表頁
  • hr_detail.asp 求職_顯示頁
  • job_hr_channel.asp 人才中心_頻道頁
  • job_hr_lisr.asp 人才中心_列表頁
  • job_hr_detail.asp 人才中心顯示頁
  • copyright.asp 版權頁

圖片命名

圖片資源命名

  • 導航命名:menu.gif 如:menubg .gif(導航的背景圖)
  • 會員登入:login.gif 如:loginbg.gif (會員登陸的背景圖)
  • 搜尋命名:search.gif 如:search_bg.gif (搜尋的背景圖)
  • 小圖示:ico_數字.gif 如:ico_001.gif
  • 線的命名:line_X_顏色.gif 如:line_X_red.gif(紅色橫向虛線)說明:line只命名虛線,line_Y_red.gif(紅色縱向虛線)
  • 廣告命名:ad_數字.gif 如:ad001.gif
  • 其它欄目的圖片:以欄目名的第一個字母.gif。如:xwzx_bg.gif (新聞中心背景) cpzx_l.gif (產品中心的左邊圖)
  • 產品與欄目熱點圖片: pic_數字.gif 如:pic_001.gif。說明:上、下、左、右 可以縮寫為T、B、L、R

CSS標準化設計命名

類class的命名規範示例:

  頭:header
  內容:content/container
  尾: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
  

註釋的寫法

  / Footer /
  內容區
  / End Footer /
  

id的命名規範示例

頁面結構

  容器: container
  頁頭:header
  內容:content/container
  頁面主體:main
  頁尾:footer
  導航:nav
  側欄:sidebar
  欄目:column
  頁面外圍控制整體佈局寬度:wrapper
  左右中:left right center
  

導航

  導航:nav
  主導航:mainbav
  子導航:subnav
  頂導航:topnav
  邊導航:sidebar
  左導航:leftsidebar
  右導航:rightsidebar
  選單:menu
  子選單:submenu
  標題: title
  摘要: summary
  

功能

  標誌: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
  

類class的書寫規範示例
顏色:使用顏色的名稱或者16進位制程式碼,如

  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }
  

字型大小,直接使用”font+字型大小”作為名稱,如

  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }
  

對齊樣式,使用對齊目標的英文名稱,如

  .left { float:left; }
  .bottom { float:bottom; }
  

標題欄樣式,使用”類別+功能”的方式命名,如

  .barnews { }
  .barproduct { }
  

CSS檔案命名示例

  主要的 master.css
  模組 module.css
  基本共用 base.css
  佈局,版面 layout.css
  主題 themes.css
  專欄 columns.css
  文字 font.css
  表單 forms.css
  補丁 mend.css
  列印 print.css
  

注意事項
  1. 一律小寫;
  2. 儘量用英文;
  3. 不加中槓和下劃線;
  4. 儘量不縮寫,除非一看就明白的單詞

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

XHTML檔案中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

CSS+DIV的命名規則:

  登入條:loginBar
  標誌:logo
  側欄:sideBar
  廣告:banner
  導航:nav
  子導航:subNav
  選單:menu
  子選單:subMenu
  搜尋:search
  滾動:scroll
  頁面主體:main
  內容:content
  標籤頁:tab
  文章列表:list
  提示資訊:msg
  小技巧:tips
  欄目標題:title
  友情連結:friendLink
  頁尾:footer
  加入:joinus
  指南:guild
  服務:service
  熱點:hot
  新聞:news
  下載:download
  註冊:regsiter
  狀態:status
  按鈕:btn
  投票:vote
  合作伙伴:partner
  版權:copyRight

  1.CSSID的命名
  外套:wrap
  主導航:mainNav
  子導航:subnav
  頁尾:footer
  整個頁面:content
  頁首:header
  頁尾:footer
  商標:label
  標題:title
  主導航:mainNav(globalNav)
  頂導航:topnav
  邊導航:sidebar
  左導航:leftsideBar
  右導航:rightsideBar
  旗志:logo
  標語:banner
  選單內容1:menu1Content
  選單容量:menuContainer
  子選單:submenu
  邊導航圖示:sidebarIcon
  註釋:note
  麵包屑:breadCrumb(即頁面所處位置導航提示)
  容器:container
  內容:content
  搜尋:search
  登陸:login
  功能區:shop(如購物車,收銀臺)
  當前的current

  2.樣式檔案命名
  主要的:master.css
  佈局版面:layout.css
  專欄:columns.css
  文字:font.css
  列印樣式:print.css
  主題:themes.css

說明:均為class,需要擴充套件,則在當前命名內以“_“(下劃線)字尾自定名稱。
我習慣稱列表頁為list,新聞列表則為newslist,圖片列表為piclist,
內容頁為view,
/**/
整體大框架:#wrapper
大框架內:#inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
頂部及banner:.top
頂部及banner內:.intop
Logo:.logo
Banner:.banner
導航:.menu
導航內:.inmenu
.Menuul
.Menuul li
.Menuul li a
下拉選單:.inmenu_xiala
.Inmenu_xialaul
.Inmenu_xialaul li
.Inmenu_xialaul li a
///////////////////////////////////////////////////////////////////////////////////////////////////////////
主體內容:.mainWrapper
主體內容內:.inmainwrapper
左側攔:.sideleft
左側內:.insideleft
右側欄:.sideright
右側內:.insideright
中間:.sidecenter
中間內:.insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
底部:.foot
底部內:.infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/其他命名/
搜尋:.search
搜尋內:.insearch
搜尋條:.searchselect
搜尋按鈕:.serachbuttom
輸入文字框:.input
.select

/表格樣式/
表格整體框架:.listbox
表格的寬度:.listbox-table
表格頭部文字樣式:.listbox-header
表格正文文字樣式:.listbox-entry
/通用型/
通用:.GM/這個有點鬱悶,英文太差…/
通用內:.INGM
通用左浮動:.GMfl(GM FLOAT LEFT)
通用右浮動:.GMfr(GM FLOAT RIGHT)
/通用圖片樣式/
通用圖片樣式:.img
/清除浮動/
清除所有浮動:.clear
清除左側浮動:.clearleft
清除右側浮動:.clearright
/文字樣式/
文字:.font
/新聞列表/
新聞列表:.fontnews
/View頁字型總樣式/
VIEW頁字型:.fontview

商 標:  label
標 題:  title
主導航:  mainbav(globalnav)
頂導航:  topnav
邊導航:  sidebar
左導航:  leftsidebar
右導航:  rightsidebar
旗 志:  logo
標 語:  banner
選單內容1: menu1 content
選單容量: menu container
子選單:  submenu
邊導航圖示:sidebarIcon
註釋:   note
麵包屑:  breadcrumb(即頁面所處位置導航提示)
容器:   container
內容:   content
搜尋:   search
登陸:   Login
功能區:  shop(如購物車,收銀臺)
當前的   current
報頭:   masthead
摘要, 概要  summary或general
左邊的浮動照圖片 photoleft
右邊的浮動圖片 photoright
標題   title
條目底端    entrybottom
更多    extended或.more
容器背景 containerbg
服務   service
服務連結   servicelink
線   line
文字   text
右邊   rightside
版權   copyright
新聞   news
書皮   wrapper
介紹      intro-part1
專欄   column
路徑   pathways
片斷   section
模組   module
上導航   subnav
2.另外在編輯樣式表時可用的註釋可這樣寫:

<– Footer –>
內容區
<– End Footer –>

3.樣式檔案命名

主要的 master.css
佈局,版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css

4.樣式表中的注示
例項一
/* GLOBAL ————————— */
/* LINKS ————————— */
/* FORMS ————————— */
/* IDS ————————— */
/* HEADER ————————— */
/* COLUMN 1 ————————— */
/* COLUMN 2 ————————— */
/* CLASSES ————————— */

例項二

HTML

例項三(網易)

CSS

UrsLogin

LogoNav

Column

Content1

bNav

UrsLogin

LogoNav

SearchArea

ChannelArea

HotNews

NewsCenter

.keyword

MallArea

city

aboutus

……………………
常見命名

包含 wrapper和container
頁頭 header 或縮寫為hd
頁尾 footer 或縮寫為ft
導航 nav
您的位置 breadcrumbs
二級導航 sub_nav
側欄 sidebar或side-column
模組 module

資料庫中的命名規則

資料庫涉及字元規則

採用26個英文字母(區分大小寫)和0 -9這十個自然數,加上下劃線_組成,共63個字元。不能出現其他字元(註釋除外)。

資料庫物件命名規則

資料庫物件包括表、檢視(查詢)、儲存過程(引數查詢)、函式、約束。物件名字由字首和實際名字組成,長度不超過30。字首:使用小寫字母。

例如:表-tb 檢視-vi 儲存過程-sp 函式-fn

實際名字

實際名字儘量描述實體的內容,由單詞或單詞組合,每個單詞的首字母大寫,其他字母小寫,不以數字和_開頭。

例如:表 User_Info 檢視 UserList 儲存過程 UserDelete

因此,合法的物件名字類似如下。

表 tbUser_Info、tbMessage_Detail

檢視 vi_MessageList

儲存過程 sp_MessageAdd

資料庫表命名規則

欄位由字首和實際名字組成。實際名字中首單詞一個系統儘量採取同一單詞。

字首:使用小寫字母tb,表示表。

例如:tbMember   tbMember_Info   tbForum_Board   tbForum_Thread1

欄位命名規則

數字、字元、日期/時間、lob(大物件)、雜項,欄位由表的簡稱、下劃線,實際名字加字尾組成。

字尾:使用小寫字母,代表該欄位的屬性。

例如:  User_Idint     User_Namestr     User_RegDatedtm

檢視命名規則

欄位由字首和實際名字組成,中間用下劃線連線。

字首:使用小寫字母vi,表示檢視。

例如:vi_User    vi_UserInfo

儲存過程命名規則

欄位由字首和實際名字組成,中間用下劃線連線。
字首:使用小寫字母sp,表示儲存過程。
例如:sp_User

資料庫設計文件規則

所有資料庫設計要寫成文件,文件以模組化形式表達。大致格式如下:

  ‘——————————————-

  ’  表名:  tbUser_Info  

  ’  建立人:UAM_Richard

  ’  日期:  2004-12-17

  ’  版本:  1.0

  ’  描述:  儲存使用者資料

  ’  具體內容:

  ’  UserId  int,自動增量  使用者程式碼

  ’  UserName  char(12)  使用者名稱字

  ’  ……

  ‘——————————————–
CSS類及id中的命名規則

  Web開發人員可以通過建立CSS類及id名稱並使用這些名稱來對div以及其他的格式頁面元素進行標識。對開發人員來說,在命名重新定義XHTML標記(tags)的CSS selectors時,必須保證其與預定義的標記準確匹配,但就類以及id選擇器名稱而言,則仁者見仁,智者見智。然而隨心所欲的為這些類以及id命名則並不是個好的習慣。

1、直觀命名

當在設計Web頁面以及需要對一個div進行標識的時候,最自然的想法就是使用可以描述元素所在頁面位置的詞彙來對其命名。

例如:top-panel

   horizontal-nav

   left-side

   center-column

   right-col

這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單並且能夠使人顧名思義,因此滿足了標識頁面元素以及相應的CSS樣式的需要。

但問題是這樣的名稱同頁面內容的特定表達方式相關聯。這些命名參考了某種特定頁面佈局中的頁面元素位置,因此在這樣的佈局之外使用就會顯得不合適甚至造成理解混亂。這些命名沒有涉及文件內容的結構。因此,下面給出了對CSS類以及ID命名更好的方法。

2、結構化命名

這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單並且能夠使人顧名思義,因此滿足了標識頁面元素以及相應的CSS樣式的需要。 這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單並且能夠使人顧名思義,因此滿足了標識頁面元素以及相應的CSS樣式的需要。

有標記的相關資訊都是用來描述文件的結構而不是外觀。這樣的特點使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內容(content)以及標記(markup)進行重用。當你理解這種方式時,很容易就可以發現採用頁面位置來為類以及id命名的方式在處理如音訊(audio)等外觀格式上顯得非常不合適。因此,應當根據在文件中的使用目的而非出現位置來對類以及id進行結構化命名。

可以按照如下所示的結構化方式來對類以及id名稱命名:

例如:branding

   main-nav

   subnav

   main-content

   sidebar

這些名字同直觀命名方式一樣非常易懂,但他們描述了頁面元素的作用而非位置。這使得程式碼更加符合使用純粹的結構化標記(structural markup)的初衷,即開發人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進行處理。

即使你不打算在其他的媒體上對Web頁面進行格式修改,使用結構化命名方式還可以幫助你在日後的站點升級或重新設計中更為輕鬆。例如,結構化命名避免了當一個div同id right-column移動到頁面左邊後所帶來的混亂。對div sidebar的採用這樣的命名方式就顯得更加適當,因為無論它出現在頁面的哪一邊,這個名字仍然對開發人員來說直觀易懂。

3、慣例

Andy Clarke分析了40份由推崇標準化Web設計理念的開發人員所設計的Web站點的原始碼。儘管類以及id名稱很不統一,但是還是發現了一些頻繁出現的常用名稱。這裡給出了最常用類/id名稱的示例列表:

例如:header

   content

   nav

   sidebar

   footer

3.基於成員的命名規範
基於成員的命名規範是指按照檔案,資料夾的從屬關係,通過歸類的方法進行命名,這樣可以使檔案的排列具有較強的邏輯性.
例如:一個圖片檔案是在滑鼠點選之前為”file_on”.而在點選後的圖片檔案命名為”file_off”根據這個類別命名.更加的清晰.

4.基於屬性的命名規範
例如:裝飾性小圖片按照”<圖片內容說明><顏色><圖片尺寸>_<序號>.*”來表現.這個為”heart_red_401*334_1.jpg”

5.基於序數的命名規範
在網頁中一般為了減少圖片的下載時間把圖片分隔成一小部分,組成一個整體圖.這時可以用二維陣列的方式命名.
例如:

這個圖片為”donghua_11.jpg”

這個圖片為”donghua_12.jpg”

這個圖片為”donghua_21.jpg”

這個圖片為”donghua_22.jpg”

這些組成一幅圖片.

6.基於列舉的命名規範

第一個為書的側面為”ddd_cemian.jpg”
第二個為書的封皮為”ddd_fengpi.jpg”
第三個為書的封底為”ddd_fengdi.jpg”

還有的網站上圖片的欣賞也有不同的大小,可根據使用者的意願檢視.

例如:”ddd_cemian_401*334.jpg”和”ddd_cemian_1024*768.jpg”

這些供大家建設網站參考.

為避免程式碼衝突(這樣做也會讓你的程式碼更為通用),就要使用命名法則,這是一個很好的程式設計習慣。好啦,這裡介紹一些常用的法則。

◆命名變數、方法、以及屬性

變數、方法和屬性的名稱的第一個字母應該大寫,並且名稱應該能表達出它們的用途(或者說是意義)。

變數
.NET 命名
匈牙利命名
描述

Cstring
EmployeeName
szName
Name of an employee.

Int
AttendanceCounter
nCounter
A counter of type long.

Long
NumberOfBytes
lBytes
A long type variable stores bytes.

有時我們習慣於在定義中使用下劃線 “_”,例如: Add_Data(int a, int b). 按照新的命名法則,這不是一個好的程式設計習慣,雖然它並沒有錯。你應該將定義 Add_Data 改為 AddData。 這不是微軟的標準,你也不是必須按照這些法則。但是,在一些地方你會明白下邊這些法則的合理性。

就我個人而言,我更喜歡匈牙利命名法。當然,變數也使用同樣的法則。如果你記得匈牙利命名法的話,一個布林型的變數定義以”b”打頭,比如:

BOOL bFlag = TRUE;

新的法則不推薦使用Flag 和 “b”:

bool IsFileFound = true;

你可以瀏覽一下MSDN,那裡邊有更多有關新的法則的說明。

◆命名元件以及集合(Assemblies)

為避免程式碼衝突, 按照命名法則給你的庫(在 .NET 中稱為assembly)命名是一個良好的程式設計習慣。假定你是MindCracker 公司的,你在開發一個用於擴充C# database 類的庫, 把它的名字命名為MindCracker.DatabaseAssembly.ADOSet 要比MyAssembly.Database.ADOSet好的多。

再假定你的庫有一個方法,它是從表中讀取資料,並返回一個數據集。你如果取名為 DataSet return_data()的話,改為DataSet ReturnData()好啦.

你還應該在命名中遵循一個統一的單詞順序。例如,你有倆個表,分別為Employee 和 Manager ,並且你還為它們分別定義了一個向表裡邊插入一條記錄的方法, 那麼方法名AppendEmployee 和 AppendManager 要比AppendEmployee 和 ManagerAppend要好。
我更喜歡的二種方法,因為很容易清楚一個塊兒結構和巢狀塊兒結構。

◆匈牙利命名法(efoxxx附)

匈牙利命名法是一名匈牙利程式設計師發明的,而且他在微軟工作了多年。此命名法就是通過微軟的各種產品和文件傳出來的。多數有經驗的程式設計師,不管他們用的是哪門兒語言,都或多或少在使用它

這種命名法的基本原則是:

變數名=屬性+型別+物件描述

即一個變數名是由三部分資訊組成,這樣,程式設計師很容易理解變數的型別、用途,而且便於記憶。

下邊是一些推薦使用的規則例子,你可以挑選使用,也可以根據個人喜好作些修改再用之。

⑴屬性部分:

全域性變數: g_

常量 : c_

類成員變數: m_

⑵型別部分:

指標: p

控制代碼: h

布林型: b

浮點型: f

無符號: u

⑶描述部分:

初始化: Init

臨時變數: Tmp

目的物件: Dst

源物件: Src

視窗: Wnd

將介紹匈牙利命名法,後面的例子裡也會盡量遵守它和上面的程式碼風格。還是那句話,並不是要求所有的讀者都要去遵守,但是希望讀者作為一個現代的軟體開發人員都去遵守它。

a Array 陣列

b BOOL (int) 布林(整數)

by Unsigned Char (Byte) 無符號字元(位元組)

c Char 字元(位元組)

cb Count of bytes 位元組數

cr Color reference value 顏色(參考)值

cx Count of x (Short) x的集合(短整數)

dw DWORD (unsigned long) 雙字(無符號長整數)

f Flags (usually multiple bit values) 標誌(一般是有多位的數值)

fn Function 函式

g_ global 全域性的

h Handle 控制代碼

i Integer 整數

l Long 長整數

lp Long pointer 長指標

m_ Data member of a class 一個類的資料成員

n Short int 短整數

p Pointer 指標

s String 字串

sz Zero terminated String 以0結尾的字串

tm Text metric 文字規則

u Unsigned int 無符號整數

ul Unsigned long (ULONG) 無符號長整數

w WORD (unsigned short) 無符號短整數

x,y x, y coordinates (short) 座標值/短整數

v void 空

下邊舉例說明:

hwnd: h表示控制代碼,wnd表示視窗,合起來為“視窗控制代碼”。

m_bFlag: m表示成員變數,b表示布林,合起來為:“某個類的成員變數,布林型,是一個狀態標誌”。

C# .net 命名規範
一個好的命名規範如此難找,還是自己收藏一個比較好

1 ADO.NET 命名規範 資料型別 資料型別簡寫 標準命名舉例
Connection con conNorthwind
Command cmd cmdReturnProducts
Parameter parm parmProductID
DataAdapter dad dadProducts
DataReader dtr dtrProducts
DataSet dst dstNorthWind
DataTable dtbl dtblProduct
DataRow drow drowRow98
DataColumn dcol dcolProductID
DataRelation drel drelMasterDetail
DataView dvw dvwFilteredProducts

WinForm Control 命名規範

資料型別 資料型別簡寫 標準命名舉例
Label lbl lblMessage
LinkLabel llbl llblToday
Button btn btnSave
TextBox txt txtName
MainMenu mmnu mmnuFile
CheckBox chk chkStock
RadioButton rbtn rbtnSelected
GroupBox gbx gbxMain
PictureBox pic picImage
Panel pnl pnlBody
DataGrid dgrd dgrdView
ListBox lst lstProducts
CheckedListBox clst clstChecked
ComboBox cbo cboMenu
ListView lvw lvwBrowser
TreeView tvw tvwType
TabControl tctl tctlSelected
DateTimePicker dtp dtpStartDate
HscrollBar hsb hsbImage
VscrollBar vsb vsbImage
Timer tmr tmrCount
ImageList ilst ilstImage
ToolBar tlb tlbManage
StatusBar stb stbFootPrint
OpenFileDialog odlg odlgFile
SaveFileDialog sdlg sdlgSave
FoldBrowserDialog fbdlg fgdlgBrowser
FontDialog fdlg fdlgFoot
ColorDialog cdlg cdlgColor
PrintDialog pdlg pdlgPrint

3 WebControl 命名規範

資料型別 資料型別簡寫 標準命名舉例
AdRotator adrt Example
Button btn btnSubmit
Calendar cal calMettingDates
CheckBox chk chkBlue
CheckBoxList chkl chklFavColors
CompareValidator valc valcValidAge
CustomValidator valx valxDBCheck
DataGrid dgrd dgrdTitles
DataList dlst dlstTitles
DropDownList drop dropCountries
HyperLink lnk lnkDetails
Image img imgAuntBetty
ImageButton ibtn ibtnSubmit
Label lbl lblResults
LinkButton lbtn lbtnSubmit
ListBox lst lstCountries
Panel pnl pnlForm2
PlaceHolder plh plhFormContents
RadioButton rad radFemale
RadioButtonList radl radlGender
RangeValidator valg valgAge
RegularExpression vale valeEmail_Validator
Repeater rpt rptQueryResults
RequiredFieldValidator valr valrFirstName
Table tbl tblCountryCodes
TableCell tblc tblcGermany
TableRow tblr tblrCountry
TextBox txt txtFirstName
ValidationSummary vals valsFormErrors
XML xmlc xmlcTransformResults

.NET中的命名規則

名稱空間的命名 

   命名名稱空間的一般規則如下:
   CompanyName.TechnologyName
  這樣,我們看到的名稱空間應該是這樣的:  
   Microsoft.Office
   PowerSoft.PowerBuilder                               

  注意:這只是一個原則。第三方公司可以選擇其它的名字。
  避免用公司名稱或其它著名品牌的名稱作為名稱空間的字首,這樣會造成兩個公佈的名稱空間有同一個名稱的可能性。
  例如: 將微軟提供的Office自動類命名為Microsoft.Office

  使用Pascal大寫方式,用逗號分隔邏輯成分。
  例如:Microsoft.Office.PowerPoint

  如果你的品牌使用的是非傳統大寫方式,那麼一定要遵循你的品牌所確定使用的大寫方式,即使這種方式背離了通常的名稱空間大寫規則。
  例如:NeXT.WebObjects
     ee.cummings

類和類成分的命名

  類的命名原則是用名詞或名詞短語命名類,使用Pascal大寫。減少類名中縮寫的使用量。不要使用任何類字首(比如C),不要使用帶下劃線的字元。
  例如:public class FileStream {}
      public class Button {}
      public class String {}

CSS 類和ID的常用命名:

網站頭部: head/header(頭部) top(頂部)導航: nanv 導航具體區分:topnav(頂部導航)、mainnav(主導航)、mininav(迷你導航)、textnav(導航文字)、subnav(子導航/二級導航)
旗幟、廣告和商標:logo(旗幟)、brand(商標)、banner(標語)
搜尋:sreach(搜尋)、sreachbox(搜尋框)、sreachbtn(搜尋按鈕)、sreachinput(搜尋輸入框)
註冊和登入:login(登入)、regsiter(註冊)、userbox(使用者名稱/通行證的文字框)、password(密碼)
佈局、分欄和框: layout(佈局)、bigdiv(大div)、leftdiv(左分欄)、rightdiv(右分欄)、leftfloat(左浮動)、rightfloat(右浮動)、mainbox()、subpage(子頁面/二級頁面)
頁尾/底部:foot/footer(頁尾/底部)、copyright(版權資訊)、sitemap(網站地圖)
其他:content(內容)、skin(面板)、title(標題)、from(表單)、pic(圖片)、news(新聞)、shop(購物區)、list(列表/清單)、newslist(新聞列表)、downloadlist(下載列表)、piclist(圖片列表)、dropmenv(下拉選單)、cor/corner(圓角)、homepage(首頁)、crumb(當前位置導航)
實際上上面的id命名我會經常用大小寫和_來區分,比如主導航就是MainNav,如果還有必要在區分就是MainNav_1,MainNav_2等等。也可以使用”型別+變數名稱”的規則來命名,比如寫一個紅色字型的class,可以
.f_red {}(f是font 字型的縮寫)。總之原則是:大小寫、_、縮寫,大大增強程式碼的可讀性。

另外我還經常使用”in”的寫法做子divd的命名,寫法in+父div,這樣可以避免前面命名過了後面div不知道怎麼去命名。比如intop、inbox、infrom、inlogin等等。

相關推薦

HTMLCSS標籤命名規則

資料夾命名 主要建立以下資料夾: Images 存放一些網站常用的圖片; Css 存放一些CSS檔案; Flash 存放一些Flash檔案; PSD 存放一些PSD原始檔; Temp 存放所有臨時圖片和其它檔案; copyright 版權資訊(可選)

史上HtmlCSS布局技巧

喜歡 輸出 隔離 init scale ext med 兩種 float 單列布局水平居中 水平居中的頁面布局中最為常見的一種布局形式,多出現於標題,以及內容區域的組織形式,下面介紹四種實現水平居中的方法(註:下面各個實例中實現的是child元素的對齊操作,child元素的

史上HTMLCSS標籤常用命名規則

資料夾主要建立以下資料夾:   1、Images 存放一些網站常用的圖片;   2、Css 存放一些CSS檔案;   3、Flash 存放一些Flash檔案;   4、PSD 存放一些PSD原始檔;   5、Temp 存放所有臨時圖片和其它檔案;   6、copyright

HTMLCSS命名規範

html/css命名規範: 有規範才能統一,才能更好的交流,命名不但要自己能看懂,還要別人也能很容易明白。所以,有一個規範的命名規則是很重要的. 所有的命名最好都小寫 屬性的值一定要用雙引號("")括起來,且一定要有值 每個標籤都要有開始和結束,且要有正確的層次,

前端基礎知識之htmlcss

# 前端回顧 [TOC] 前端就是展示給使用者並且與使用者進行互動的操作介面。 前端包括包括三部分: 1. html:網頁的骨架,沒有任何樣式,比較醜 2. css:相當於一些裝飾品,給骨架新增樣式。 3. js:控制網頁的動態效果。 前端也有很多框架,只需要按照固定的語法進行呼叫即可。 ## 基

CSS樣式命名規則

blog 背景 是個 保持 log 類型 小寫字母 模塊 前綴 命名一直是個讓我頭痛的問題,特別是那些看上去差不多的模塊,所以就得想辦法啦,我總結了下面的方法,雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。具體如下: 要註意的內容: 一,命名所選用的單詞應選擇不

有利於SEO的DIV+CSS命名規則小結

程序員 命名 開發 編織 由於項目中編寫文檔結構、編寫CSS的人員較多,並與程序員協同工作,所以就需要統一開發規範,根據XHTMl和CSS編織的規範和大多人的習慣,整理了以下針對本項目的一個簡單的開發規範.一、CSS文件及樣式命名 1、CSS文件命名規範 全局樣式:global.css; 框架

HTMLCSS中的居中效果(1)

htm inner height overflow n-1 txt posit splay read HTML和CSS中的居中效果 單行上下左右居中 Html: <div class=”container”></div> CSS:

htmlcss面試題

相對 列表標記 格式 erl sam ext 第一個 onos static 21.如何居中div,如何居中一個浮動元素? 給div設置一個寬度,然後添加margin:0 auto屬性 div{ width:200px; margin

htmlcss(一)

ctrl+ css ron 超文本 strong 式表 外觀 說明 更多 簡單點來說html和css就是一起連在使用,有了html和css會使網頁更加有活力,看起來更加的好看。 html是做關於網頁標簽這一塊相當於骨架,更深的還需要另一個來完成,那就是css,相當於向裏面加

HTMLCSS疑點解析

字母 lin white 不換行 enter 不定 浮動 color bsp 1,讓不定寬高的div,垂直水平居中? 父盒子:display:table-cell;text-align:center;vertical-align:middle div盒子:display:i

接觸HTMLCSS心得體會

樣式 表現 user 顏色 組成 標記 word put 文件中 1.HTML 它負責網頁的三個要素之中的結構; HTML使用標簽的形式來標識網頁中的不同組成部分 <!DOCTYPE html> <html> <head>

前端面試htmlcss

結構 意義 phone sea height 超鏈接 並且 另一個 一個數 寫出幾種IE6 BUG的解決方法 1.雙邊距BUG float引起的 使用display2.3像素問題 使用float引起的 使用dislpay:inline -3px3.超鏈接hover 點擊後失

java入門必學:HTMLCSS

java ;入門 ; html; css Java開發已經悄無聲息的走進我們的生活中,無論是手機軟件、手機Java遊戲還是電腦軟件等,只要你使用到電子產品就會碰到和Java有關的東西,更多的企業正采用Java語言開發網站,也吸引了好多誌同道合的朋友開始加入Java開發的行列。 我們知道在

HtmlCSS的關系

我們 理解 b前端開發 特效 web前端 制作 技術 ava 背景 學習web前端開發基礎技術需要掌握:HTML css JavaScript語言。 下面我們就來了解下這三門技術都是用來實現什麽的: 1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽

HTMLCSS必須知道的重點難點問題

ati line justify play 布局 16px nbsp vertica inline 一、如何讓一個不定寬高的div,垂直居中?     1、使用flex布局,只需要在盒子的父級設置如下代碼即可: .className{ display:flex;

使用 JavaScript, HTML CSS 構建跨平臺的桌面應用

OS releases unknown AC node 圖標 變形 optional 兩個 https://electronjs.org/ —— 官網 https://github.com/electron/electron-api-

10個HTMLCSS必須知道的重點難點問題

清除 針對 idt 問題: 需要 優先 mat hidden 隱身 前端日刊 登錄 10個HTML和CSS必須知道的重點難點問題 2018-02-26 閱讀 2982 收藏 6 原鏈:segmentfault.com 分享到: 前端

第213天:12個HTMLCSS必須知道的重點難點問題

ie7 html 技術 article 就會 cap 簡述 同時存在 空間 12個HTML和CSS必須知道的重點難點問題 這12個問題,基本上就是HTML和CSS基礎中的重點個難點了,也是必須要弄清楚的基本問題,其中定位的絕對定位和相對定位到底相對什麽定位?這個還是容易被

HTMLCSS的概述

渲染 網站 lan 層次結構 通過 元素 超文本標記語言 結構 不能 第一節.HTML相關概念 常用陌生詞匯: Hyper Txwt 超文本 sheet 表格 Markup Language 標記語言 * HTML和CSS概述 W3C:(萬維網聯盟)目前Web技術領域