為提高團隊協作效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔。
文件規範
文件命名規則文件名稱統一用小寫的英文字母、數字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義,二是當我們在文件夾中使用「按名稱排例」的命令時,同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計算負載量等等操作。HTML的命名原則
主頁統一使用index.htm、index.html或index.asp文件名(小寫)
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如:
關於我們 --> aboutus 信息反饋 --> feedback 產品 --> product
如果欄目名稱多而複雜並不好以英文單詞命名,則統一使用該欄目名稱拼音或拼音的首字母表示;
每一個目錄中應該包含一個預設的html 文件,文件名統一用index.htm、index.html或index.asp;
圖片的命名原則
圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質
例如:廣告、標誌、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner
標誌性的圖片取名為: logo
在頁面上位置不固定並且帶有連結的小圖片我們取名為 button
在頁面上某一個位置連續出現,性質相同的連結欄目的圖片我們取名: menu
裝飾用的照片我們取名: pic
不帶連結表示標題的圖片我們取名: title
範例:banner_sohu.png、banner_sina.png、menu_aboutus.png、menu_job.png、title_news.png、logo_police.png、 logo_national.png、pic_people.png
滑鼠感應效果圖片命名規範為"圖片名+_+on/off"。
例如:menu1_on.png、menu1_off.png
javascript的命名原則
例如:廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js
動態語言文件命名原則
以性質_描述,描述可以有多個單詞,用「_」隔開,性質一般是該頁面得概要。
範例:register_form.asp、register_post.asp、topic_lock.asp
文件存放位置規範//項目目錄(都不是必須存在的目錄) cn 存放中文HTML文件 en 存放英文HTML文件 flash 存放Flash文件 images 存放圖片文件 imagestudio 存放PSD源文件 flashstudio 存放flash源文件 inc 存放include文件 library 存放庫文件 media 存放多媒體文件 project 存放工程項目資料 temp 存放客戶原始資料 js 存放JavaScript腳本 css 存放CSS文件
CSS書寫規範 基本原則:CSS樣式可細分為3類:自定義樣式、重新定義HTML樣式、連結狀態樣式。
自定義樣式為設計師自定義的新CSS樣式,影響被使用本樣式的區域,用於完成網頁中局部的樣式設定。樣式名為「.」+「相應樣式效果描述的單詞或縮寫」,例: .shadow,文字樣式樣式名為「.word」+「字號」+「行距」+「顏色縮寫」,例:.word12、.word12-24、.word12-24-red
重新定義HTML樣式為設計師重新定義已有的HTML標籤樣式,影響全部的被設定標籤樣式,用於統一網頁中某一標籤的樣式定義。樣式名為HTML標籤,例:hr { border: 1px dotted #333333 }
連結狀態樣式為設計師對連結不同狀態設定特殊樣式,影響被使用本樣式區域中的連結,該樣式寫法有2種:a.nav:link、nav.a:link,第一種只能修飾<a>標籤中;第二種可以修飾所有包含有<a>標籤的其他標籤。
頁面內的樣式加載必須用連結方式<link rel="stylesheet" type="text/css" href="xxx/xxx.css"> 注意細則:協作開發及分工: Me(前端負責人,主開發人員,以下簡稱Me)會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構、表現、行為; 共用css文件base.css由Me書寫, 協作開發過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
class與id的使用: id是唯一的並是父級的, class是可以重複的並是子級的, 所以id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由Me分發框架文件時命名的, 為JavaScript預留鉤子的除外;
為JavaScript預留鉤子的命名, 請以js_起始, 比如:js_hide、js_show;
class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在 2 中由Me統一命名.其他樣式名稱由 小寫英文、數字、_來組合命名(不能以數字開頭), 如i_comment, fontred, width200; 避免使用中文拼音, 儘量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
規避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>...</div></div>//樣式寫法#mainnav .firstnav{..}//按b命名法則<div id="mainnav"><div>...</div></div> //樣式寫法.main_firstnav{..}
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等;其他屬性包括: list-style(列表樣式)、vertical-align、cursor、z-index(層疊順序) 、zoom等,所列出的這些屬性只是最常用到的, 並不代表全部;
書寫代碼前, 考慮並提高樣式重複使用率;
充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:<ul><li>這兒是標題列表<span>2010-09-15</span></ul>,定義ul.list li{position:relative} ul.list li span{position:absolute; right:0},即可實現日期居右顯示。
樣式表中中文字體名, 請務必轉碼成unicode碼, 以避免編碼錯誤時亂碼;
背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模塊製作;
使用table標籤時(儘量避免使用table標籤), 請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現, 應儘可能的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, 一般base.css文件中Me會初始化表格樣式)
用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=』img/bg.png』);
避免兼容性屬性的使用, 比如text-shadow、css3的相關屬性;
減少使用影響性能的屬性, 比如position:absolute、float;
必須為大區塊樣式添加注釋, 小區塊適量注釋;
代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化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合作夥伴: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
/* 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左右,儘可能的使用背景顏色替換大塊同色圖片。 includeasp標準寫法 <!--#include file="inc/index_top.asp" -->
jsp標準寫法 <%@ include file="../inc/index_top.jsp" %>
都是提示性語言標籤,請注意它們之間的區別。
在我們瀏覽網頁時,當滑鼠停留在圖片對象或文字連結上時,在滑鼠的右下角有時會出現一個提示信息框。對目標進行一定的注釋說明。在一些場合,它的作用是很重要的。
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 瀏覽器。在已知的其他設計限制下,儘可能將站點設計為具有最大的瀏覽器兼容性。書寫過程中, 每行代碼結束必須有分號; 原則上所有功能均根據XXX項目需求原生開發, 以避免網上down下來的代碼造成的代碼汙染(沉冗代碼 || 與現有代碼衝突 || ...);
庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他人員討論決定;
變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符為_, 其他與原生JavaScript 規則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
函數命名: 首字母小寫駝峰式命名. 如iTaoLun();
命名語義化, 儘可能利用英文單詞或其縮寫;
儘量避免使用存在兼容性及消耗資源的方法或屬性, 比如eval() & innerText;
後期優化中, JavaScript非注釋類中文字符須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;
代碼結構明了, 加適量注釋. 提高函數重用率;
注重與html分離, 減小reflow, 注重性能.
圖片規範所有頁面元素類圖片均放入img文件夾, 測試用圖片放於img/demoimg文件夾;
圖片格式僅限於gif || png || jpg;
命名全部用小寫英文字母 || 數字 || _ 的組合,其中不得包含漢字 || 空格 || 特殊字符;儘量用易懂的詞彙, 便於團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;
在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間;
儘量避免使用半透明的png圖片(若使用, 請參考css規範相關說明);
運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 並保存至img目錄下.
注釋規範html注釋: 注釋格式 <!--這兒是注釋-->, '--'只能在注釋的始末位置,不可置入注釋文字區域;
css注釋: 注釋格式 /*這兒是注釋*/;
JavaScript注釋, 單行注釋使用//這兒是單行注釋 ,多行注釋使用 /* 這兒有多行注釋 */;
瀏覽器兼容性 CSS hack 一、標識區別:區別IE6,IE7,IE8,FF。
IE都能識別*; 標準瀏覽器(如FF)不能識別*;
IE6能識別*,但不能識別!important; IE6在樣式前面加_
IE7能識別*,也能識別!important;
IE8能識別\9, 例如:background:red \9;
firefox不能識別*,但能識別!important;
1.IE6和firefox的區別:3.IE7和FF的區別:
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色
4.FF,IE7,IE6的區別:
background:orange;*background:green !important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.
via:https://segmentfault.com/a/1190000014317104