htnl類名命規範

html 命名規則

1、注意事項:

1. 一概小寫;

2. 儘可能用英文;

3. 不加中槓和下劃線;

4. 儘可能不縮寫，除非一看就明白的單詞.

主要的 master.css 模塊 module.css

基本共用 base.css 佈局，版面 layout.css

主題 themes.css 專欄 columns.css

文字 font.css表單 forms.css

補丁 mend.css 打印 print.css

5. 堅持以字母開頭命名選擇器，這樣可保證在全部瀏覽器下都能兼容。

2、經常使用的css命名規則

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

3、註釋的寫法:

內容區

4、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指南：guide 服務：service熱點：hot

新聞：news下載：download 投票：vote合做夥伴：partner 友情連接：link 版權：copyright

5、class的命名:

(1) 顏色:使用顏色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) 字體大小,直接使用」font+字體大小」做爲名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

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

.left { float:left; }

.bottom { float:bottom; }

(4) 標題欄樣式,使用」類別+功能」的方式命名,如

.barnews { }

.barproduct { }

篇二：Web前端開發命名規則

Smart UI前臺開發幫助

1. 開發規範

1.1. HTML

1.1.1. HTML命名規範

1.1.2. HTML編寫要求

1) 要求只能使用上述規定的標籤 2) 每一個標籤要求結構完整；

如：<span/>應寫爲: <span></span>

除hr、br、img、input外標籤都應該是標籤對完整的 <br /><hr/><img />

 

1.2. JS

1.2.1. Javascript

1.2.1.1.

JS命名規範

1.2.1.2. JS註釋規範

1.2.1.3. JS編寫要求

1) 要求結構清晰，代碼規範。

2) 全部string對象必須以'單引號包括起來，如內部須要在使用',使用轉義符\" 3) 一個function 中內容不能過長，應該適當根據功能拆分紅多個function。 4) 全部dom對象儘可能所有使用jquery的方法進行操做

5) 關於js數據類型的處理應儘可能使用jshepler,類型的prototype來完成.

6) 儘可能使用局部變量，減小全局變量的使用，以減小內存的佔用 7) 減小js閉包的使用，儘可能避免內存泄露的風險。

8) 使用var弱類型對象時應該明確標示其做用範圍，一旦含義改變時必定要註釋清楚。

9) 統一使用ipsa2.0的基礎組件庫（jscontrols）編碼，非特殊狀況禁止直接調用控件（plugin）。 10) $ihelper庫中已包含大多數狀況的操做，基礎操做應該都用$ihelper完成。

1.2.2. Jquery

1.2.2.1.

Jquery編寫要求

1) 選擇的性能的順序是id>tag>class,因此使用時，儘可能使用性能高的選擇器。 2) 有意識的用多重匹配的選擇器

如：$('#id : tag')

3) 儘可能使用id選擇器獲取單個對象或者idselector的鏈結構方式查詢

如：$('#parentid child')

4) 在使用數據對象，或是json對象時，最後一項必定不能加",",不然IE7下腳本會出錯

5) 全部的dom對象的樣式設置必須使用css()樣式設置的方式，不能使用width()這種直接設置的方式。

1.2.3. jq plugins

1.2.3.1.

jq plugins結構順序

屬性定義、私有變量、私有方法、主體方法

1.2.3.2. jq plugins編寫要求

1) 嚴格按定義的結構編寫，註明實現功能及更新記錄、註釋清晰、標準化

2) 控件編寫以前，要將顯示端html完成、css規範完成（全部命名必須有該plugin名稱的前綴+‘-’+命名）。 3) 屬性定義根據狀況定義初始化值

4) 編寫方法，須要詳細瞭解基礎庫中的內容。判斷是不是爲能夠爲公用仍是隻能私有。 5) 絕對禁止有固定的ID對象

6) 對外部引入的控件，詳細的使用實例，實例都須要完整；瞭解的代碼和修改的功能都要詳細註釋。 7) 儘可能採起在jscontrol的方式去控制控件達到須要的效果。

1.2.4. icontrols

對全部的plugins進行封裝，對外統一出口，經過jsconfig設定各plugins屬性初始化值

1.3. CSS

1.3.1. CSS基本命名規範

1) 採用組合命名規則，基本標籤：對象簡寫+‘-’+功能命名；子對象爲父對象命名+‘-’+功能命名

如：button：btn-save

2) 對於容器標籤，則與對象命名相同便可 3) 瞭解各瀏覽器hack的寫法

4) 明確各選擇器的優先級，做用範圍。

1.3.2. 全局CSS

1) body，主要控制內的全部內容的基礎樣式，如字體樣式、背景等 2) *，清空全部對象的有影響的默認樣式 3) 各種基礎標籤的通用樣式

如：img{border-width: 0px;}

1.3.3. CSS編寫規範

1) 使用CSS3.0的標準編寫。

2) 子對象對採用鏈選擇器的方式定義；

3) 對象儘可能使用class選擇器去匹配；對於特殊功能的才考慮使用ID選擇器； 4) 標籤選擇器只能在全局CSS中定義，和子對象匹配的時候使用（也應儘可能少使用），

其餘時候禁止定義。

5) 開發端禁止使用濾鏡；設計端也應儘可能少使用濾鏡。

1.3.4. CSS基本佈局規範

篇三：html使用規範和css命名規則

Css的命名規則和Html標籤使用規則

1 Css命名規則

1.1 樣式文件命名規則

主要的 master.css

佈局，版面 layout.css

模塊 module

.css

 

主題 themes.css

基本共用 base.css

表單 forms.css

專欄 columns.css

文字 font.css

打印樣式 print.css

補丁 mend.css

1.2 樣式命名規則

1.2.1 框架

外 套： wrap

主導航： mainnav

子導航： subnav

頁 腳： footet

整個頁面： content

頁 眉： header

頁 腳： footer

商 標： label

標 題： title

主導航： mainbav

頂導航： topnav

邊導航： sidebar

左導航： leftsidebar

右導航： rightsidebar

旗 志： logo

標 語： banner

菜單內容1： menu1 content

菜單容量： menu container

子菜單： submenu

邊導航圖標：sidebarIcon

註釋：note

麪包屑： breadcrumb(即頁面所處位置導航提示）

容器：container

內容：content

搜索：search

登錄：Login

功能區： shop(如購物車，收銀臺)

當前的current

1.2.2 顏色

使用顏色的名稱或者16進制代碼,如

.red {color:red;}

.f60 {color:#f60;}

.ff8600 {color:#ff8600;}

1.2.3 字體大小

直接使用’font+字體大小’做爲名稱,如

.font12px {font-size:12px;}

.font9pt {font-size:9pt;}

1.2.4 對齊

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

.left {float:left;}

.right {float:right;}

1.2.5 命名方式

使用’類別+功能’的方式命名,如

.barnews {}

.barproduct {}

1.2.6 注意事項

1) 一概小寫;

2) 儘可能用英文;

3) 不加中槓和下劃線;

4) 儘可能不縮寫，除非一看就明白的單詞.

1.3 html標籤使用規則

1.3.1 書寫規範

1.3.1.1 頁頭定義

編碼用utf-8

1.3.1.2 全部代碼必須小寫

<title>和<TITLE>是不一樣標籤

1.3.1.3 標籤必需要有一個相應的結束標記

<p>sfdsfds</p>

<img />

1.3.1.4 元素屬性值必須包含在雙引號中

<p style=」屬性值」></p>

1.3.1.5 標籤註釋

<--信息 Begin -->

內容區

<--信息 End -->

1.3.2 標籤概述

通常咱們使用的HTML元素包括：div, p, ul, table, span, input, select。

基本上div, table, ul, p都屬於結構性比較強的元素，而span, input則是比較弱的元素，所以不容許有span嵌套div, table等的狀況出現，span能夠嵌套input, 能夠嵌套span。

1.3.3 Seo特殊要求標籤

1.3.3.1 標題標籤

1) h一、h二、h3每一個頁面只能出現一次

2) h四、h五、h6單個頁面能夠屢次使用