Web前端開發規範手冊

規範目的

  • 爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔。

文件規範

文件命名規則

文件名稱統一用小寫的英文字母、數字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導思想一是使得你本身和工做組的每個成員可以方便的理解每個文件的意義,二是當咱們在文件夾中使用「按名稱排例」的命令時,同一種大類的文件可以排列在一塊兒,以便咱們查找、修改、替換、計算負載量等等操做。
  • HTML的命名原則

主頁統一使用index.htmindex.htmlindex.asp文件名(小寫)
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞爲名稱。例如:javascript

關於咱們 --> aboutus 
信息反饋 --> feedback 
產品 --> product

若是欄目名稱多而複雜並很差以英文單詞命名,則統一使用該欄目名稱拼音或拼音的首字母表示;
每個目錄中應該包含一個缺省的html 文件,文件名統一用index.htmindex.htmlindex.aspcss

  • 圖片的命名原則

圖片的名稱分爲頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質
例如:廣告、標誌、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner
標誌性的圖片取名爲: logo
在頁面上位置不固定而且帶有連接的小圖片咱們取名爲 button
在頁面上某一個位置連續出現,性質相同的連接欄目的圖片咱們取名: menu
裝飾用的照片咱們取名: pic
不帶連接表示標題的圖片咱們取名: title
範例:banner_sohu.pngbanner_sina.pngmenu_aboutus.pngmenu_job.pngtitle_news.pnglogo_police.png logo_national.pngpic_people.png
鼠標感應效果圖片命名規範爲"圖片名+_+on/off"
例如:menu1_on.pngmenu1_off.pnghtml

  • javascript的命名原則

例如:廣告條的javascript文件名爲 ad.js 彈出窗口的javascript文件名爲 pop.js前端

  • 動態語言文件命名原則

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

文件存放位置規範

//項目目錄(都不是必須存在的目錄)
    cn    存放中文HTML文件
    en    存放英文HTML文件
    flash    存放Flash文件
    images    存放圖片文件
    imagestudio    存放PSD源文件
    flashstudio    存放flash源文件
    inc    存放include文件
    library    存放庫文件
    media    存放多媒體文件
    project    存放工程項目資料
    temp    存放客戶原始資料
    js    存放JavaScript腳本
    css    存放CSS文件

CSS書寫規範

基本原則:css3

CSS樣式可細分爲3類:自定義樣式從新定義HTML樣式連接狀態樣式瀏覽器

  1. 自定義樣式爲設計師自定義的新CSS樣式,影響被使用本樣式的區域,用於完成網頁中局部的樣式設定。樣式名爲「.」+「相應樣式效果描述的單詞或縮寫」,例: .shadow,文字樣式樣式名爲「.word」+「字號」+「行距」+「顏色縮寫」,例:.word12.word12-24.word12-24-red
  2. 從新定義HTML樣式爲設計師從新定義已有的HTML標籤樣式,影響所有的被設定標籤樣式,用於統一網頁中某一標籤的樣式定義。樣式名爲HTML標籤,例:hr { border: 1px dotted #333333 }
  3. 連接狀態樣式爲設計師對連接不一樣狀態設定特殊樣式,影響被使用本樣式區域中的連接,該樣式寫法有2種:a.nav:linknav.a:link,第一種只能修飾<a>標籤中;第二種能夠修飾全部包含有<a>標籤的其餘標籤。
頁面內的樣式加載必須用連接方式 <link rel="stylesheet" type="text/css" href="xxx/xxx.css">

注意細則:緩存

  1. 協做開發及分工: Me(前端負責人,主開發人員,如下簡稱Me)會根據各個模塊, 同時根據頁面類似程序, 事先寫好大致框架文件, 分配給前端人員實現內部結構表現行爲; 共用css文件base.cssMe書寫, 協做開發過程當中, 每一個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
  2. class與id的使用: id是惟一的並是父級的, class是能夠重複的並是子級的, 因此id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由Me分發框架文件時命名的, 爲JavaScript預留鉤子的除外;
  3. 爲JavaScript預留鉤子的命名, 請以js_起始, 好比:js_hidejs_show;
  4. class與id命名: 大的框架命名好比header/footer/wrapper/left/right之類的在 2 中由Me統一命名.其餘樣式名稱由 小寫英文數字_來組合命名(不能以數字開頭), 如i_comment, fontred, width200; 避免使用中文拼音, 儘可能使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
  5. 規避class與id命名(此條重要, 請及時與Me溝通):
    a、 經過從屬寫法規避, 示例見d;
    b、 取父級元素id/class命名部分命名, 示例見d;
    c、 重複使用率高的命名, 請以本身代號加下劃線起始, 好比Me_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{.......}
  6. css屬性書寫順序, 建議遵循佈局定位屬性-->自身屬性-->文本屬性-->其餘屬性. 此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 屬性列舉: 佈局定位屬性主要包括: marginpaddingfloat(包括clear)position(相應的 top,right,bottom,left)displayvisibilityoverflow等;自身屬性主要包括: widthheightbackgroundborder; 文本屬性主要包括:fontcolortext-aligntext-decorationtext-indent等;其餘屬性包括: list-style(列表樣式)vertical-aligncursorz-index(層疊順序)zoom等,所列出的這些屬性只是最經常使用到的, 並不表明所有;
  7. 書寫代碼前, 考慮並提升樣式重複使用率;
  8. 充分利用html自身屬性及樣式繼承原理減小代碼量, 好比:<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>,定義ul.list li{position:relative} ul.list li span{position:absolute; right:0},便可實現日期居右顯示。
  9. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以免編碼錯誤時亂碼;
  10. 背景圖片請儘量使用sprite技術, 減少http請求, 考慮到多人協做開發, sprite模塊製做;
  11. 使用table標籤時(儘可能避免使用table標籤), 請不要用width/height/cellspacing/cellpaddingtable屬性直接定義表現, 應儘量的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaingcellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, 通常base.css文件中Me會初始化表格樣式)
  12. 用png圖片作圖片時, 要求圖片格式爲png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請爲ie6單獨定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
  13. 避免兼容性屬性的使用, 好比text-shadowcss3的相關屬性;
  14. 減小使用影響性能的屬性, 好比position:absolutefloat;
  15. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;
  16. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化Me會統一處理;

命名規則:

頭: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
合做夥伴:partnerapp


註釋的寫法:

/* 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

基本樣式:

/* CSS Document */
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

//重定義的最早,僞類其次,自定義最後,便於本身和他人閱讀!
中英文混排時,咱們儘量的將英文和數字定義爲 verdana 和 arial 兩種字體。

HTML書寫規範

網頁製做細節
head區代碼規範
head區是指HTML代碼的<head>和</head>之間的內容。

必須加入的標籤:

  • 公司版權註釋 <!--- The site is designed by xxx 04/2018 --->
  • 網頁顯示字符集

    簡體中文:<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">
  • 網頁製做者信息 <META name="author" content="luozz@cmgos.com">
  • 網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
  • 搜索關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
  • 網頁的css規範 <LINK href="xxx/xxx.css" rel="stylesheet" type="text/css">
  • 網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>

能夠選擇加入的標籤:

  • 設定網頁的到期時間。一旦網頁過時,必須到服務器上從新調閱。 <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
  • 禁止瀏覽器從本地機的緩存中調閱頁面內容。 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  • 用來防止別人在框架裏調用你的頁面。<META HTTP-EQUIV="Window-target" CONTENT="_top">
  • 自動跳轉。<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.keyup.top">5指時間停留5秒
  • 網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面須要索引,哪些頁面不須要索引。<META NAME="robots" CONTENT="none"> CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
  • 收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">
  • 全部的javascript的調用盡可能採起外部調用. <SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
  • <body>標籤<body>標籤不屬於head區,這裏強調一下,爲了保證瀏覽器的兼容性,必須設置頁面背景<body bgcolor="#FFFFFF">
字體
  • 在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。
  • 在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。通常使用中文宋體的9pt 和11pt 或12px 和14.7px 這是通過優化的字號,黑體字或者宋體字加粗時,通常選用11pt 和14.7px 的字號比較合適。
  • 爲了最大程度的發揮瀏覽器自動排版的功能,在一段完整的文字中請儘可能不要使用<br>來人工干預分段。
  • 不一樣語種的文字之間應該有一個半角空格,但避頭的符號以前和避尾的符號以後除外,漢字之間的標點要用全角標點,英文字母和數字周圍的括號應該使用半角括號。
  • 請不要在網頁中連續出現多於一個的空格,也儘可能少使用全角空格(英文字符集下,全角空格會變成亂碼),空白應該儘可能使用text-indent, padding, margin, hspace, vspace 以及透明的gif圖片來實現。
  • 行距建議用百分比來定義,經常使用的兩個行距的值是line-height:120% line-height:150%
  • 排版中咱們常常會遇到須要進行首行縮進的處理,不要使用空格或者全角空格來達到效果,規範的作法是在樣式表中定義 p { text-indent: 2em; } 而後給每一段加上 <p> 標記,注意,通常狀況下,請不要省略 </p> 結束標記 。
連接
  • 網站中的連接路徑所有采用相對路徑,通常連接到某一目錄下的缺省文件的連接路徑沒必要寫全名,如咱們沒必要這樣:<a href=」aboutus/index.htm」> 而應該這樣:<a href=」aboutus/」>,全部內頁指向首頁的連接寫成<a href=」/」>
  • 在瀏覽器裏,當咱們點擊空連接時,它會自動將當前頁面重置到首端,從而影響用戶正常的閱讀內容,咱們用代碼javascript:void(null)代替原來的「#」標記
表格

1px表格style="border-collapse: collapse"
實例以下:

<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
bordercolor="#000000" cellpadding="0"> 
<tr> 
<td></td>
</tr>
</table>

設置亮、暗邊框顏色
表格有亮邊框(bordercolorlight)暗邊框(bordercolordark)兩個屬性能夠對錶格樣式設置。

<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">

在寫 <table> 互相嵌套時,嚴格按照的規範,對於單獨的一個<table>來講,<table><tr>對齊,<td> 縮進兩個半角空格,<td> 中若是還有嵌套的表格,<table>也縮進兩個半角空格,若是<td>中沒有任何嵌套的表格,</td> 結束標記應該與 <td> 處於同一行,不要換行,
如咱們注意在源代碼中不該有這樣的代碼:

<td><img src=」../images/sample.gif」>
</td>

而應該是這樣的:

<td><img src=」../images/sample.gif」></td>

這是由於瀏覽器認爲換行至關於一個半角空格,以上不規範的寫法至關於無心中增長一個半角空格,若是確實有必要增長一個半角空格,也應該這樣寫:

<td><img src=」../images/sample.gif」> </td>

一個網頁要儘可能避免用整個一張大表格,全部的內容都嵌套在這個大表格以內,由於瀏覽器在解釋頁面的元素時,是以表格爲單位逐一顯示,若是一張網頁是嵌套在一個大表格以內,那麼極可能形成的後果就是,當瀏覽者敲入網址,他要先面對一片空白很長時間,而後全部的網頁內容同時出現。若是必須這樣作,請使用 <tbody>標記,以便可以使這個大表格分塊顯示

下載速度
首頁Flash 網頁大小應限定在 200K如下,儘量的使用矢量圖形和Action來減少動畫大小。非首頁靜態頁面含圖片大小應限定在70K左右,儘量的使用背景顏色替換大塊同色圖片。
include

asp標準寫法 <!--#include file="inc/index_top.asp" -->
jsp標準寫法 <%@ include file="../inc/index_top.jsp" %>

Alt和Title

都是提示性語言標籤,請注意它們之間的區別。
在咱們瀏覽網頁時,當鼠標停留在圖片對象或文字連接上時,在鼠標的右下角有時會出現一個提示信息框。對目標進行必定的註釋說明。在一些場合,它的做用是很重要的。
alt用來給圖片來提示的。title用來給連接文字普通文字提示的。
用法以下:

<p Title="給連接文字提示">文字</p> 
<a href="#" Title="給連接文字提示">文字</a> 
<img src="圖片.gif" alt="給圖片提示">
緩存

HTM網頁

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">

ASP網頁

Response.Expires = -1 
Response.ExpiresAbsolute = Now() - 1 
Response.cachecontrol = "no-cache"
瀏覽器兼容性
建立站點時,應該明白訪問者可能使用各類 Web 瀏覽器。在已知的其餘設計限制下,儘量將站點設計爲具備最大的瀏覽器兼容性。
目前使用的 Web 瀏覽器有二十多種,大多數已發行了多個版本。即便您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶,但您應明確並非每一個人都在使用這兩種瀏覽器的最新版本。
您的站點越複雜(在佈局、動畫、多媒體內容和交互方面),跨瀏覽器兼容的可能性就越小。例如,並不是全部的瀏覽器均可以運行JavaScript。不使用特殊字符的純文本頁面或許可以在任何瀏覽器中正確顯示,但比起有效地使用圖形、佈局和交互的頁面,這樣的頁面在美感上可能要差得多。因此,應儘可能在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
全部的HTML 標籤的屬性都要用單引號或者雙引號括起,即咱們應該寫 <a href=」url」> 而不是 <a href=url>.
banner
全尺寸banner爲468X60px,半尺寸banner爲234X60px,小banner爲88X31px。
另外120X90,120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。
廣泛的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140
次級頁的pip尺寸360X300,336X280
遊標:100X100或120X120
LOGO的國際標準規範
爲了便於INTERNET上信息的傳播,一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO,目前有三種規格:
88*31 這是互聯網上最廣泛的LOGO規格。
120*60 這種規格用於通常大小的LOGO。
120*90 這種規格用於大型LOGO。
頁面修飾圖片處理
圖片通過優化以加快下載的速度,有較佳的視覺空間效果,用圖要與頁面風格、頁面內容相符;製做精美,細節處理得當。

JavaScript書寫規範

  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, 注重性能.

圖片規範

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

註釋規範

  1. html註釋: 註釋格式 <!--這兒是註釋-->, '--'只能在註釋的始末位置,不可置入註釋文字區域;
  2. css註釋: 註釋格式 /*這兒是註釋*/;
  3. JavaScript註釋, 單行註釋使用//這兒是單行註釋 ,多行註釋使用 /* 這兒有多行註釋 */;

瀏覽器兼容性 CSS hack

1、標識區別:
區別IE6,IE7,IE8,FF。

  1. IE都能識別*; 標準瀏覽器(如FF)不能識別*
  2. IE6能識別*,但不能識別!important; IE6在樣式前面加_
  3. IE7能識別*,也能識別!important;
  4. IE8能識別\9, 例如:background:red \9;
  5. firefox不能識別*,但能識別!important;
1.IE6和firefox的區別:
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.
2.IE6和IE7的區別:
background:green !important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色

3.IE7和FF的區別:
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

4.FF,IE7,IE6的區別:
background:orange;*background:green !important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.


我的主頁: https://www.keyup.top

相關文章
相關標籤/搜索