html-1--前端開發規範手冊

HTML佈局中經常使用命名規範：

header: 頁頭　　　　　　　　　　　　　　　　 nav：導航

footer: 頁腳　　　　　　　　　　　　　　　　  column：欄目

sidebar：側欄　　　　　　　　　　　　　　　  left:左側

wrapper或wrap：頁面外圍控制總體佈局寬度　　center:中間

right:右側　　　　　　　　　　　　　　　　　　logo：標誌

loginbar：登錄條　　　　　　　　　　　　　　main:頁面主體

banner：廣告　　　　　　　　　　　　　　　　news：新聞

hot：熱點　　　　　　　　　　　　　　　　　　subnav：子導航

download：下載　　　　　　　　　　　　　　submenu：子菜單

menu：菜單　　　　　　　　　　　　　　　　friendlink：友情連接

search：搜索　　　　　　　　　　　　　　　　scroll：滾動

copyright:版權　　　　　　　　　　　　　　　tab:標籤頁

content/container：內容　　　　　　　　　　msg:提示信息

list: 文章列表　　　　　　　　　　　　　　　　joinus：加入

title：欄目標題　　　　　　　　　　　　　　service:服務

guide：指南　　　　　　　　　　　　　　　　status：狀態

register:註冊　　　　　　　　　　　　　　　　partner：合做夥伴

vote：投票

 

1、規範目的

1.1 概述

 提升團隊協做效率
 便於前端開發以及後期優化維護
 方便新進的成員快速上手
 輸出高質量的代碼
本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發。本文檔若有
不對或者不合適的地方請及時提出，經討論決定後能夠更新此文檔。

規範目的

2、基本準則

  符合 web 標準, 語義化 html, 結構表現行爲分離, 兼容性優良。
  代碼要求簡潔明瞭有序, 儘量的減少服務器負載, 保證最快的解析速度。
  開發時須要遵循如上基本準則，特殊狀況能夠有所寬限，如一些老項目的頁面改造。

基本準則

3、文件規範

3.1 文件命名規則

[使用場景:在新建網頁、圖片、腳本、CSS 文件時，根據此規則給文件命名並放入指定位 置]
文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字空格和特殊 字符。命名原則的指導思想：
一是使得你本身和工做組的每個成員可以方便的理解每個文件的意義，
二是當咱們在文件夾中使用「按名稱排例」的命令時，同一種大類的文件可以排列在一塊兒，以便咱們查找、修改、替換、計算負載量等等操做。

文件命名規範

3.1.1 html命名規範

索引文件統一使用 index.htm index.html index.asp 文件名。 各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞爲名稱。例如:
若是欄目名稱多而複雜並很差以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母 表示。
子頁          命名
關於咱們    aboutus
信息反饋    feedback
產品            product
每個目錄中應該包含一個缺省的 html 文件，文件名統一用 index.htm index.asp。                

HTML 的命名原則

3.1.2 圖片的命名規範

圖片的名稱分爲頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質。 例如:廣告、標誌、菜單、按鈕等等。
 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner
 標誌性的圖片取名爲: logo
index.html
 在頁面上位置不固定而且帶有連接的小圖片咱們取名爲 button
 在頁面上某一個位置連續出現，性質相同的連接欄目的圖片咱們取名: menu
 裝飾用的照片咱們取名: pic
 不帶連接表示標題的圖片咱們取名: title
範 例 : banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg

圖片的命名原則

 3.1.3 javascript的命名原則

通常使用腳本功能的英文小寫縮寫命名。
例如:廣告條的 javascript 文件名爲 ad.js 彈出窗口的 javascript 文件名爲 pop.js

javascript的命名原則

 3.1.4 動態語言文件命名原則

以性質_描述，描述能夠有多個單詞，用「_」隔開，性質通常是該頁面得概要。
範例:register_form.asp register_post.asp topic_lock.asp 

動態語言文件命名原則

 3.2 文件存放位置規範

文件存放位置規範
 
文件夾         說明
flash         存放 flash 文件
images        存放圖片文件
inc            存放 include 文件
library        存放 DW 庫文件
media        存放多媒體文件
script        存放 javascript 腳本
css            存放 css 文件       

文件存放位置規範

3.3 CSS 書寫規範 

[使用場景:書寫 CSS 樣式時，根據此規則對 id 和 class 進行命名，並遵循書寫規則，避免 出現常犯錯誤，提升效率。]

使用場景

3.3.1  基本原則 

CSS 樣式可細分爲 3 類:從新定義 HTML 樣式、連接狀態樣式、自定義樣式。
1. 從新定義 HTML 樣式爲設計師從新定義已有的 HTML 標籤樣式，影響所有的被設定標 籤樣式，用於統一網頁中某一標籤的樣式定義。樣式名「HTML 標籤」例:hr { border: 1px dotted #333333 }
2. 連接狀態樣式爲設計師對連接不一樣狀態設定特殊樣式，影響被使用本樣式區域中的連接。 該樣式寫法有 2 種: a.nav:link(中間無空格) 、.nav a:link 第一種只能修飾<a>標籤中; 第二種能夠修飾全部包含有<a>標籤的其餘標籤。
3. 樣式爲設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中局部 的樣式設定。樣式名 「.」+「相應樣式效果描述的單詞或縮寫」例:「 .shadow 」
文 字 樣 式 樣 式 名 「 . n o 」 + 「 字 號 」 + 「 行 距 」 + 「 顏 色 縮 寫 」 例 :「 . n o 1 2 」 、「 . n o 1 2 _ 2 4 」 「.no12」類型通常出如今 base.css 文件中，只可選用，不可修改，避免名稱含義和實際 內容不符。自定義的樣式名最好用意義命名。 好比:重要的新聞高亮顯示(像紅色)，有兩種寫法:
red{color:red};
.important_news{color:red}; 很顯然第二種傳達的意義更加明確,因此儘可能不要用意義不明確的做爲自定義命名。
4. 頁面內的樣式加載必須用連接方式:
<link rel="stylesheet" type="text/css" href="style/style.css">
5. 從新定義的最早，僞類其次，自定義樣式最後，便於本身和他人閱讀。
6.通常不容許將樣式的定義寫在標籤中(如:style=「color:red;」);
7.全部裝飾性的圖片(如背景圖)，要定義在 CSS 中;

基本原則

3.3.2 注意細則 

1. class與id命名: 大的框架命名好比header/footer/wrapper/left/right之類的由設計框 架之人統一命名。其餘樣式名稱由小寫英文&數字&_來組合命名, 避免使用中文拼音, 儘可能 使用簡易的單詞組合; 總之, 命名要語義化, 簡明化。
2. 規避class與id重名 , 不建議使用id選擇器。
a. 經過從屬寫法規避, 示例見 d;
b. 取父級元素 id/class 命名部分命名, 示例見 d;
c. 重複使用率高的命名,可加代號加下劃線起始, 好比 i_clear;
d. a、b 兩條, 適用於在 2 中已建好框架的頁面, 如, 要在 2 中已建好框架的頁面代碼
<div id="mainnav"></div>中加入新的 div 元素,
按 a 命名法則: <div id="mainnav"><div class="firstnav">...</div></div>,
樣式寫法: #mainnav .firstnav{.......}
按 b 命名法則: <div id="mainnav"><div class="main_firstnav">...</div></div>, 樣式寫法: .main_firstnav{.......}
3. css 屬性書寫順序, 建議遵循 佈局定位屬性-->自身屬性-->文本屬性-->其餘屬性。此條 可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒。
文件夾                說明
佈局定位屬性        Margin\padding\float\clear\position (相應的top,right,bottom,left)\display\visibility\overflow等自身屬性Width\height\background\ border
文本屬性           font\color\text-align\text-decoration\ text-indent\ white-space\othertext\content 等
其餘屬性           list-style(列表樣式)\vertical-align\cursor\z-index(層疊順序) \zoom 等

4. 書寫代碼前, 考慮並提升樣式重複使用率;
5. 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;
6. 避免兼容性屬性的使用, 好比 text-shadow || css3 的相關屬性;
7. 減小使用影響性能的屬性, 好比 position:absolute || float ;
8. 重要圖片加上 alt 屬性;重要的元素和截斷的元素加上 title; 
9. 避免使用!important，!important 的優先級最高;
10. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;
11. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化統一處理; 
12. Margin、padding、border、font 等樣式儘量採用合併寫法;
     

注意細則

上面的簡寫圖解說明的是依據不一樣的屬性值能夠進行不一樣的縮寫，這種方法一樣適用於 padding 和 Border-width 屬性; 

 

Font 的簡寫對於縮小代碼量頗有幫劣，若是沒有定義某個屬性值的話，將繼承父級元素的 定義或使用默認值。 

3.3.3 命名規則 

 

頁面結構
容器: container/wrap	總體寬度:wrapper
頁頭:header	內容:content
頁面主體:main	頁尾:footer
側欄:sidebar	欄目:column
中間內容:center
導航
導航:nav	主導航:mainbav/globalnav
子導航:subnav	頂導航:topnav
邊導航:sidebar	左導航:leftsidebar
右導航:rightsidebar	邊導航圖標:sidebarIcon
菜單:menu	子菜單:submenu
標題: title
功能
標誌:logo	登錄:login
登陸條:loginbar	註冊:regsiter
產品:products	產品價格:products_prices
產品評論:products_review	編輯評論:editor_review
最新產品:news_release	最新產品:news_release
廣告/標語:banner	摘要:summary
生產商:publisher	縮略圖:screenshot
常見問題:faqs	關鍵詞:keyword
博客:blog	論壇:forum
搜索:search	搜索輸入框:search_input
搜索輸出:search_output	搜索結果:search_results
加入咱們:joinus	狀態:status
按鈕:btn	滾動:scroll
標籤頁:tab	文章列表:list
提示信息:msg/message	當前的:current
小技巧:tips	皮膚:skin
充值:pay	活動:activities
推廣:promotion	公告:announcement
排行:ranking	公司簡介:company_profile
公司設備:equipment	公司榮譽:glories
企業文化:culture	企業規模:scale
營銷網絡:sales_network	組織機構:organization
技術力量:technology	分支機構:branches
企業資質:enterprise_qualification	公司實力:strength_strength
經營理念:operation_principle	經理致辭:manager_oration
發展歷程:development_history	工程案例:engineering_projects
分類瀏覽:browse_by_category	應用領域:application_fields
人力資源:human_resource_hr	領致使辭:leader_oration
客戶留言:customer_message	客戶服務:customer_service
您的要求:your_requirements	銷售信息:sales_information
招商:enterprise_establishing	教育培訓:education_training
在線交流:online_communication	質量認證:quality_certification
合做加盟:joinIn_cooperation	產品描述:products_description
業務範圍:business_scope	產品銷售:sales_sales
聯繫咱們:contact_us	信息發佈:information
返回首頁:homepage	產品定購:order
電子商務:e_business	版權全部:copy_right
友情連結:hot_link	行業新聞:trade_news
行業動態:trends	郵編:postal_code_zipcode
新聞動態:news_trends	公司名稱:company_name
銷售熱線:sales_hotline	聯繫人:contact_person
建設中:in_construction	證書:certificate
地址:add	電話:tel
傳真:fax	產品名稱:product_name
產品說明:description	價格:price
品牌:brand	規格:specification
尺寸:size	生產廠家:manufacuturer
型號:model	產品標號:item_no
技術指標:technique_data	產品描述:description
產地:production_place	用途:application
論壇:forum	在線訂購:on_line_order
招標:bidInviting	綜述:general
業績:achievements	大事:great_event
動態:trends	服務:service
投資:investment	行業:industry
規劃:programming	環境:environment
發送:delivery	提交:submit
重寫:reset	社區:community
業務:business	在線調查:online_inquiry
下載中心:download	意見反饋:feedback
常見問題:faq	中心概況:general_profile
遊樂園:amusement_park	專題報道:special_report
圖標:icon	註釋:note
指南:guild	服務:service
熱點:hot	新聞:news
下載:download	投票:vote
商標:label/branding	當前位置:breadcrumb/loc
購物車:shop	標籤:tag
信譽:siteinfo_credits	網站信息:siteinfo
法律聲明:siteinfo_legal	合做夥伴:partner
友情連接:friendlink	版權:copyright

 

 

3.4 html 書寫規範

[使用場景:書寫 html 頁面時，根據此規則對 html 內容進行補充和完善。]

3.4.1 head 區代碼規範  

head 區是指 HTML 代碼的<head>和</head>之間的內容。  必須加入的標籤
1. 網頁顯示字符集
簡體中文:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
繁體中文:
<meta http-equiv ="Content-Type" content ="text/html; charset=utf-8">
英 語:
<meta http-equiv ="Content-Type" content ="text/html; charset=utf-8">
2. 搜索關鍵字(網站類型)
< meta name="keywords" content ="xxxx,xxxx,xxx,xxxxx,xxxx,">
網頁的 css 規範 <link href="../css/style.css" rel="stylesheet" type="text/css">
網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>  能夠選擇加入的標籤
1.公司版權註釋
<!--- The site is designed by EHM,Inc 07/2005 --->
2. 網頁製做者信息
<meta name="author" content="webmaster@maketown.com">
3. 網站簡介
<meta name="DESCRIPTION" content ="xxxxxxxxxxxxxxxxxxxxxxxxxx">
4. 設定網頁的到期時間。一旦網頁過時，必須到服務器上從新調閱。
<meta http-equiv ="expires" content ="Wed, 26 Feb 1997 08:21:57 GMT">
5. 禁止瀏覽器從本地機的緩存中調閱頁面內容。
<meta http-equiv ="Pragma" content ="no-cache">
6. 用來防止別人在框架裏調用你的頁面。
<meta http-equiv ="Window-target" content ="_top">
7. 自動跳轉。
<meta http-equiv ="Refresh" content ="5;url=http://www.yahoo.com">
 5 指時間停留 5 秒
8. 網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。 <meta name="robots" CONTENT="none">
CONTENT 的參數有 all,none,index,noindex,follow,nofollow。默認是 all。
9. 收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico"> 
10. 全部的 javascript 的調用盡可能採起外部調用.

head區代碼規範

 3.4.2 body區代碼規範

1. 附<body>標籤:
<body>標籤不屬於 head 區，這裏強調一下，爲了保證瀏覽器的兼容性，必須設置頁面背 景<body bgcolor="#FFFFFF">(此處爲示意，樣式需寫在 CSS 文件中)
2. 在瀏覽器裏，當咱們點擊空連接時，它會自動將當前頁面重置到首端，從而影響用戶正 常的閱讀內容，咱們用代碼「javascript:void(null)」代替原來的「#」標記。
<a href="javascript:void(null)">連接</a>

body 區代碼規範

3.5 JavaScript 書寫規範 

[使用場景:書寫 js 腳本時，根據此規則對變類、函數、變量命名，並遵循書寫規則，避免 出現常犯錯誤，提升腳本效率。]
1. 書寫過程當中, 每行代碼結束必須有分號; 原則上全部功能均根據 XXX 項目需求原生開發, 以免網上 down 下來的代碼形成的代碼污染(沉冗代碼 || 與現有代碼衝突 || ...);
2. 庫引入: 原則上僅引入 jQuery 庫,以及組件組開發的相關庫。 若需引入第三方庫, 須與 團隊其餘人員討論決定;
3. 變量命名: 駝峯式命名. 原生 JavaScript 變量要求是純英文字母, 首字母須小寫, 如 iTaoLun; jQuery 私有變量要求首字符爲'_', 其餘與原生 JavaScript 規則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
4. 類命名: 首字母大寫，如 ITaoLun;
5. 函數命名: 首字母小寫駝峯式命名. 如 iTaoLun();
6. 命名語義化, 儘量利用英文單詞或其縮寫;
7. 儘可能避免使用存在兼容性及消耗資源的方法或屬性, 好比 eval() & innerText; 
8. 後期優化中, JavaScript 非註釋類中文字符須轉換成 unicode 編碼使用, 以免編碼錯
誤時亂碼顯示;
9. 代碼結構明瞭, 加適量註釋. 提升函數重用率;
10. 注重與 html 分離, 減少 reflow, 注重性能.

javascript書寫規範

3.6 圖片規範

[使用場景:引用添加圖片文件時，根據此規則對圖片格式進行選擇以及命名存放。]
1. 全部頁面元素類圖片均放入 images 文件夾, 測試用圖片放於 images/demoimg 文件 夾;
2. 圖片格式僅限於 gif || png || jpg;
3. 命名所有用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符; 儘可能用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 好比ad_left01.gif || btn_submit.gif;
4. 在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間; 
5. 儘可能避免使用半透明的 png 圖片(若使用, 請參考 css 規範相關說明); 
6. 運用csssprite技術集中小的背景圖或圖標, 減少頁面http請求, 但注意, 請務必在對應
的 sprite psd 源圖中劃參考線, 並保存至 images 目錄下.

圖片規範

3.7 註釋規範 

[使用場景:書寫代碼時，根據此規則對代碼進行適當註釋說明，方便本身或他人閱讀和理 解。]

3.7.1 html 註釋

註釋格式 <!--這兒是註釋-->, '--'只能在註釋的始末位置,不可置入註釋文字區域。

html註釋

3.7.2 css 註釋

行間註釋:直接寫於屬性值後面。
例: .search{ border:1pxsolid#fff;/*定義搜索輸入框邊框*/ background:url(../images/icon.gif)no-report#333;/*定義搜索框的背景*/ } 整段註釋:分別在開始及結束地方加入註釋。
例:
/*=====搜索條=====*/
.search{ border:1pxsolid#fff;
background:url(../images/icon.gif )no-repeat#333;} /*=====搜索條結束=====*/

css註釋

3.7.3 JavaScript 註釋

JavaScript 註釋, 單行註釋使用'//這兒是單行註釋' ,多行註釋使用 /* 這兒有多行註釋 */; 

javascript註釋

4、執行模式

•  規範文檔存入部門 SVN 文件庫，方便下載查閱。
•  根據規範內容，製做網頁格式幫助手冊。
•  根據規則創建和不斷完善框架模板庫，給不一樣類型的網站提供示例參考。  執行規範過程當中根據實際狀況不斷補充完善規則。
•  開發負責人須要檢查提交的代碼是否符合規範，並記錄檢查結果。