為提高團隊協作效率, 便于前、后臺人員添加功能及前、后端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。本規范文檔一經確認, 前、后端開發人員必須按本文檔規范進行前、后臺頁面開發。本文檔如有不對或者不合適的地方請及時提出, 經討論決定后可以更改此文檔。

1、方便代碼的交流和維護。

  2、不影響編碼的效率，不與大眾習慣沖突。

  3、使代碼更美觀、閱讀更方便。

  4、使代碼的邏輯更清晰、更易于理解。

5、技術文檔、工作總結的贊定，做事效率的提升，便于后續人員多元化發展。

本手冊適用于部門全體人員，作用于軟件項目開發的代碼編寫階段和后期維護階段。

1、負責公司網站前后臺服務功能的修改和升級，并保證網站軟硬件平臺的正常高效運行。

2、負責公司網站功能改進計劃和網絡安全計劃的編寫。

3、按照計劃的時間和質量要求，對公司網站前后臺功能進行修改和升級；負責網站代碼的優化和維護，保證網站的運行效率。

4、每日根據公司網站業務需要開發，制作和程序修改要求，必須按時按質按量地完成日常公司網站業務的編程開發技術工作。

5、負責公司網站開發前期的測試。

6、負責對公司網站軟硬設施進行安全和穩定性巡檢；并負責統計和監視系統日志。

7、協助公司各部門關于軟件同客戶進行溝通，保持良好的客戶關系，為客戶提出的、客服人員無法解答的專業技術問題提供支持和回饋，保證客戶的滿意度。

8、負責公司網站開發所需要的軟硬件的采購和選型；同時對外包編程工作的質量和進度加以監督和管理。

9、對于外包的項目的技術方面進行設計、實施跟蹤和交付成果的控制和驗證。保證外包項目能完全按照我方技術要求和規劃完成。

10、參與需求調研、項目可行性分析、技術可行性分析和需求分析。

11、熟悉并熟練掌握公司開發的網站項目的相關技術。

12、負責及時向上級領導反饋網站開發中的情況，并根據實際情況提出改進建議。

13、參與網站開發和維護過程中重大技術問題的解決，參與首次安裝調試、數據割接、用戶培訓和項目推廣。

14、負責相關技術文檔的擬訂。

15、負責對業務領域內的技術發展動態。

16、負責公司網站及其相關網站改版、網站功能完善、新系統的開發工作。

17、負責公司服務器安全管理與維護及公司內部網絡維護和電腦軟硬件維護工作。

1、每一個項目在開始著手的第一步，一定要把需求溝通清楚，只有了解了項目的需求，才有可能真正做好一個項目。

2、工作中，將有一個無論是技術、還是經驗都比較讓人肯定的前輩帶領，將任務詳細化，詳細到，每個頁面、甚至是一個頁面中的圖片什么時候做好，做到什么程度，這樣把工作進度有計劃、有方向的贊定下來，做事很有效率。

3、每天的工作小結，這讓我們每天都有計劃的知道自己干了什么，不是漫無目的的工作。

附件：file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps3584.tmp.png

4、工作內容并不是一成不變的，也許有一天你要去其他崗位幫忙，所以同事之間的技術要互相學習，也許有一天，公司需要你發揮其他的技能幫忙，所以互相學習也是很重要的，自己的工作不能僅僅局限于自己的業務范疇。   

5、提高工作的主動性，做事干脆果斷，不拖泥帶水。   

6、工作要注重實效、注重結果，一切工作圍繞著目標的完成。

7、提高大局觀，是否能讓其他人的工作更順暢作為衡量工作的標尺。

8、精細化工作方式的思考和實踐,虛心請教比我做的優秀的其他同事，向他們學習技術或經驗。尤其作為一個新員工，所有的地方都是需要學習的，多聽、多看、多想、多做、多溝通，向每一個員工學習他們身上的優秀工作習慣，豐富的專業技能，配合著實際工作不斷的進步。

9、技術工作都不可能做到完美程度，畢竟技術工作太繁雜，但多付出一些，工作就會優化一些，這就需要認認真真沉下心去做事情，職業做事，誠信待人。

在工作只要我會的，我懂的，我不會去吝嗇，我會積極的去與你交流。“人強團則強，人弱團則削”，成功與收獲，除了自身努力外，還需要公司團隊鑄造及支持。鑄就有拼搏協作的隊員，使得它成為一個具有務實、拼搏、創新精神的團隊。 　

務實：公司下發的任務，下發的工作，件件都是用心去做的。團隊中沒有一個人在工作的時候做了工作以外的事情，都是實實在在的做跟工作相關對公司有益的事情。 　　

拼搏：公司給的每一個任務不管它多難，如果工作沒有完成，團隊會晚上加班，也要盡可能的完成當天的工作。如果工作實在忙，為了趕進度團隊放棄休息時間也要盡可能的使項目提前。 　

創新：現在我們寫好的代碼，保證程序正確的前提下，盡可能的提高程序的效率。 　

互助：小組內只要任何一個人出現技術或其它的問題，彼此都會盡可能的去幫助他，不會因為某一個人而拖住整個項目滯后。 　

交流：在項目開發中會及時溝通自己的收獲，特別是一些針對性的技術問題，這樣可以省了很多重復研究的時間，這是一筆很可觀的時間。

1、搭建部門文檔平臺（一般可以放在網絡鄰居上面）

   A、公司內部搭建文檔放置平臺，僅僅對于內部員工開放，訪問人員需要制定名單，避免外部網絡入侵等異常；

   B、平臺文檔為學習互助類文檔，比如：公司前期類似的項目代碼、學習圖書、學習音頻等；

   C、文檔進行結構化歸類放置，便于內部員工查找及相應資源查詢，規避人員流動過程中，造成的文檔資料等丟失；

   D、工作期間內，員工可以進行文檔查詢等，但是不可耽誤當日工作；

   E、平臺對于員工可以設置只讀權限，下載權限可以給平臺管理員進行控制；建議由行政人員管理；對內部員工需求下載的文件，要求管理人員進行必要的登記，為后期平臺資源升級做為數據基礎。

   F、平臺文檔上傳，可以有內部員工及管理人員操作，如：平臺對于員工上傳文件，可以指定在上傳區域；管理人員可以對于文檔進行分門別類的處理；

   2、工作積分制

         理論上，員工當月的積分為100分，按照工作、考勤等情況，進行增減。實行積分制度，在于調動員工的工作積極性，以及創造能力。

         部分每月可以按照積分排名，指定當月的優秀員工；相應的，可以是精神嘉獎等，當然也可以是購物卡激勵等；按照積分制，作為后續員工崗位調整等依據。

3、工作、生活微信群搭建

     部門人員之間的溝通及交流，應存在工作、生活的多個方面。不僅僅限制單純的工作匯報，這樣比較容易造成死群。

     如果每日工作匯報等，在上班期間忘記回復，可以在微信群進行匯報，建議上班期間把事情完畢；

     休息日等假節日期間，可以進行群互動，一般都是行政人員進行群管理，增進員工之間的情感交流，拉進員工對于公司的歸屬感。

4、部門資料管理  

部門人員在實際工作中，都會存在個人文件總結等，這些材料構成了部門的資料庫。實際工作中，可能由于人員更替，崗位調動，電腦異常等，造成部門文檔的丟失，導致后續工作的開展，受到一定程度的影響，存在人力資源浪費的隱患；但是，部門資料的梳理成冊，便于后續新員工了解公司業務等，可以作為入門參考的依據，便于新員工快速進入工作狀態，減少了員工崗前磨合期之間的陌生感，也可以作為部門在職人員對用戶部門業務的梳理，以及文件查找的依據。

鑒于此類事件造成不良的影響，一般建議部門內部有資料管理員。一般建議是部門領導代理或指定部門熟手代理，因為放在部門平臺的文檔，部門領導那邊比較完整。

資料管理具體實施方案：

A、部門員工做的工作總結等，可以放在部門平臺，便于部門員工之間的相互交流及學習；

B、總結類文檔，一般可以分為周總結、月總結等；

C、部門員工認為不錯的工作文檔等，部門員工可以暫放部門平臺，有三天有效期，如果部門領導不認可，就機會過期失效；當然在這期間，部門領導可以把有效期設置長期；

D、部門平臺數據，可以作為部門內部重要數據的備份，避免了數據丟失等異常，造成的資源損失。   

    文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。

a.HTML的命名原則
引文件統一使用index.htm  index.html  index.asp文件名（小寫）
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如：
關于我們 \ aboutus
信息反饋 \ feedback
產 品 \ product

如果欄目名稱多而復雜并不好以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母表示；
每一個目錄中應該包含一個缺省的html文件，文件名統一用index.htm  index.html  index.asp；
b. 圖片的命名原則

圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質
例如：廣告、標志、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名：banner
標志性的圖片取名為：logo
在頁面上位置不固定并且帶有鏈接的小圖片我們取名為 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鼠標感應效果圖片命名規范為"圖片名+_+on/off"。
例如：menu1_on.gif  menu1_off.gifc.javascript的命名原則
例如：廣告條的javascript文件名為 ad.js  彈出窗口的javascript文件名為 pop.js
d.  動態語言文件命名原則
以性質_描述，描述可以有多個單詞，用“_”隔開，性質一般是該頁面得概要。
范例：register_form.asp   register_post.asp   topic_lock.asp

CSS樣式可細分為3類：自定義樣式、重新定義HTML樣式、鏈接狀態樣式。

1. 樣式為設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用于完成網頁中局部的樣式設定。樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例：“ .shadow ”
文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“ .no12 ”、“ .no12-24 ”

2. 義HTML樣式為設計師重新定義已有的HTML標簽樣式，影響全部的被設定標簽樣式，用于統一網頁中某一標簽的樣式定義。樣式名“HTML標簽”例：hr { border: 1px dotted #333333 }

3. 態樣式為設計師對鏈接不同狀態設定特殊樣式，影響被使用本樣式區域中的鏈接。
該樣式寫法有2種： a.nav:link    nav.a:link  第一種只能修飾<a>標簽中；第二種可以修飾所有包含有<a>標簽的其他標簽。

頁面內的樣式加載必須用鏈接方式<link rel="stylesheet" type="text/css" href="style/style.css">

1.        協作開發及分工: i會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&表現&行為; 共用css文件base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;

2.        class與id的使用: id是唯一的并是父級的, class是可以重復的并是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發框架文件時命名的, 為JavaScript預留鉤子的除外;

3.        為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;

4.        class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.

5.        規避class與id命名(此條重要, 若有不明白請及時與i溝通):  

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{.......}

6.        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-vlign、cursor、z-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/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文件中我會初始化表格樣式)

12.        杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8;

13.        用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:

background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

14.        避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性;

15.        減少使用影響性能的屬性, 比如position:absolute || float ;

16.        必須為大區塊樣式添加注釋, 小區塊適量注釋;

17.        代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 后期優化i會統一處理;

頭：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的命名:

  (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 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;}

重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！

    不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt 和11pt，px一般使用中文宋體12px和14.7px這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px的字號比較合適。中英文混排時，我們盡可能的將英文和數字定義為verdana 和arial 兩種字體。

1. 網頁制作細節 ---- head區代碼規范

head區是指HTML代碼的<head>和</head>之間的內容。

必須加入的標簽

a) 公司版權注釋

<!--- The site is designed by EHM,Inc 07/2005 --->

b) 網頁顯示字符集

簡體中文：

<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">

c) 網頁制作者信息  

<META name="author" content="webmaster@maketown.com">

d) 網站簡介  

<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

e) 搜索關鍵字  

<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

f) 網頁的css規范

<LINK href="../css/style.css" rel="stylesheet" type="text/css">

g) 網頁標題  

<title>xxxxxxxxxxxxxxxxxx</title>

可以選擇加入的標簽

a) 設定網頁的到期時間。一旦網頁過期，必須到服務器上重新調閱。

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">

b) 禁止瀏覽器從本地機的緩存中調閱頁面內容。

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

c) 用來防止別人在框架里調用你的頁面。

<META HTTP-EQUIV="Window-target" CONTENT="_top">

d) 自動跳轉。

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com">  5指時間停留5秒

e) 網頁搜索機器人向導。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。

<META NAME="robots" CONTENT="none">

CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。

f) 收藏夾圖標

<link rel = "Shortcut Icon" href="favicon.ico">

g) 所有的javascript的調用盡量采取外部調用.

<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

h) 附<body>標簽：

<body>標簽不屬于head區，這里強調一下，為了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps368B.tmp.png

2. 網頁制作細節 ---- 字體
1. 在設定字體樣式時對于文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。
2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。
3. 為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預分段。
4.不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。
5. 請不要在網頁中連續出現多于一個的，也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
6. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
7. 排版中我們經常會遇到需要進行首行縮進的處理，不要使用   或者全角空格來達到效果，規范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記 。

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps369C.tmp.png

3. 網頁制作細節 ---- 鏈接
1. 網站中的鏈接路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>，所有內頁指向首頁的鏈接寫成<a href=”/”>
2. 在瀏覽器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，我們用代碼“javascript:void(null)”代替原來的“#”標記

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps36AD.tmp.png

4. 網頁制作細節 ---- 表格
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>標記，以便能夠使這個大表格分塊顯示

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps36BD.tmp.png

5. 網頁制作細節 ---- 下載速度
首頁Flash 網頁大小應限定在 200K 以下，盡可能的使用矢量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，盡可能的使用背景顏色替換大塊同色圖片。

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps36BE.tmp.png

6. 網頁制作細節 ---- include
asp標準寫法 <!--#include file="inc/index_top.asp" -->
jsp 標準寫法 <%@ include file="../inc/index_top..jsp" %>

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps36CF.tmp.png

7. 網頁制作細節 ---- Alt和Title
都是提示性語言標簽，請注意它們之間的區別。

在我們瀏覽網頁時，當鼠標停留在圖片對象或文字鏈接上時，在鼠標的右下角有時會出現一個提示信息框。對目標進行一定的注釋說明。在一些場合，它的作用是很重要的。

alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。

用法如下：

<p Title="給鏈接文字提示">文字</p>

<a href="#" Title="給鏈接文字提示">文字</a>

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps36DF.tmp.png<img src="圖片.gif" alt="給圖片提示">

8. 網頁制作細節 ---- 緩存

網頁不會被緩存

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

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps36F0.tmp.pngResponse.cachecontrol = "no-cache"

9. 網頁制作細節 ---- 瀏覽器兼容性
創建站點時，應該明白訪問者可能使用各種 Web 瀏覽器。在已知的其他設計限制下，盡可能將站點設計為具有最大的瀏覽器兼容性。
目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶，但您應明確并不是每個人都在使用這兩種瀏覽器的最新版本。
您的站點越復雜（在布局、動畫、多媒體內容和交互方面），跨瀏覽器兼容的可能性就越小。例如，并非所有的瀏覽器都可以運行JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示，但比起有效地使用圖形、布局和交互的頁面，這樣的頁面在美感上可能要差得多。所以，應盡量在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
所有的HTML 標簽的屬性都要用單引號或者雙引號括起，即我們應該寫 <a href=”url”> 而不 是 <a href=url>.

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps3701.tmp.png

10. 圖片處理細節 ---- banner
全尺寸banner為468X60px，半尺寸banner為234X60px，小banner為88X31px。
另外120X90，120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。
普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
次級頁的pip尺寸360X300，336X280
游標:100X100或120X120

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps3702.tmp.png

11. 圖片處理細節 ---- LOGO的國際標準規范
為了便于INTERNET上信息的傳播，一個統一的國際標準是需要的。實際上已經有了這樣的一整套標準。其中關于網站的LOGO，目前有三種規格：
88*31 這是互聯網上最普遍的LOGO規格。
120*60 這種規格用于一般大小的LOGO。
120*90 這種規格用于大型LOGO。

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps3712.tmp.png

12. 圖片處理細節 ---- 頁面修飾圖片處理圖片經過優化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；制作精美，細節處理得當。

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注釋, 單行注釋使用'//這兒是單行注釋' ,多行注釋使用 /* 這兒有多行注釋 */;

一、標識區別：
區別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瀏覽器的顏色是藍色.

(1).  開發平臺的選擇

在 Firefox 上編寫CSS, 同時兼容其他瀏覽器的. 這樣做肯定會比在 IE 做好再到別的瀏覽器兼容來得容易, 因為 IE 對老標準支持還是很不錯的, 而 IE 的一些特有功能人家卻不支持. 所以推薦以 Firefox 結合 Firebug 擴展作為平臺。

(2).  CSS Hack 的順序

使用 Firefox 作為平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時忽略,

順序如下：Firefox -> IE6 -> IE7 -> 其他

(3).   Hack 的方法

說到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個文件中處理. 其實作用是相同的, 只是出發點不一樣而已.

1. 同一文件中處理.
如: id="bgcolor"的控件要在 IE6中顯示藍色, IE7中顯示綠色, Firefox等其他瀏覽器中顯示紅色。

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps3723.tmp.png

IE6不認 !important,也不認 *+html.所以 IE6只能是 blue.
IE7認 !important,也認 *+html,優先度: (*+html + !important) > !important > +html. IE7可以是 red, blue和 green,但 green的優先度最高.
Firefox和其他瀏覽器都認 !important. !important優先, Firefox可以是 red和 blue,但 red優先度高.上述的優先符號均是 CSS3標準允許的,其他瀏覽器也還有其他的 Hack方法,但我迄今還沒遇到過 Firefox正常, IE以外的其他瀏覽器不正常的情況,所以無可分享.只要代碼規范,相信這種情況的發生應該是很罕見 (JavaScript除外).

2. 不同文件中處理.
為什么同一文件中可以處理還要寫在多個文件里面針對不同的瀏覽器?這是為了欺騙 W3C的驗證工具,其實只需要兩個文件,一個是針對所有瀏覽器的,一個只為 IE服務.將所有符合 W3C的代碼寫到一個里面去,而一些 IE中必須的,又不能通過 W3C驗證的代碼 (如: cursor:hand;)放到另一個文件中,再用下面的方法導入.

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps3733.tmp.png

　　程序員(英文Programmer)是從事程序開發、維護的專業人員。一般我們將程序員分為程序設計人員和程序編碼員，但兩者的界限并不非常清楚，特別是在中國。 　　

　　作一個真正合格的程序員，應該具有的素質。 　　

　　1、團隊精神和協作能力 　　

　　團隊精神和協作能力是作為一個程序員應具備的最基本的素質。軟件工程已經提了將近三十年了，當今的軟件開發已經不是編程了，而是工程。獨行俠可以寫一些程序也能賺錢發財，但是進入研發團隊，從事商業化和產品化的開發任務，就必須具備這種素質。可以毫不夸張的說這種素質是一個程序員乃至一個團隊的安身立命之本。 　　

　　2、文檔習慣 　　

　　文檔是一個軟件系統的生命力。一個公司的產品再好、技術含量再高，如果缺乏文檔，知識就沒有繼承，公司還是一個來料加工的軟件作坊。作為代碼程序員，必須將30％的工作時間寫用于技術文檔。沒有文檔的程序員勢必會被淘汰。 　　3、規范化的代碼編寫習慣 　　

　　知名軟件公司的代碼的變量命名、注釋格式，甚至嵌套中行縮進的長度和函數間的空行數字都有明確規定，良好的編寫習慣，不但有助于代碼的移植和糾錯，也有助于不同技術人員之間的協作。一些所謂的高手甚至叫囂高手寫的代碼一般人看不懂，我只能說他不是一名合格的程序員。 　　

　　4、需求理解能力 　　

　　程序員要能正確理解任務單中描述的需求。在這里要明確一點，程序員不僅僅要注意到軟件的功能需求，還應注意軟件的性能需求，要能正確評估自己的模塊對整個項目中的影響及潛在的威脅，如果有著兩到三年項目經驗的熟練程序員對這一點沒有體會的話，只能說明他或許是認真工作過，但是沒有用心工作。 　　

　　5、模塊化思維能力 　　

　　作為一個優秀的程序員，他的思想不能在局限當前的工作任務里面，要想想看自己寫的模塊是否可以脫離當前系統存在，通過簡單的封裝在其他系統中或其他模塊中直接使用。這樣做可以使代碼能重復利用，減少重復的勞動，也能是系統結構越趨合理。模塊化思維能力的提高是一個程序員的技術水平提高的一項重要指標。 　　

　　6、測試習慣 　　

　　測試是軟件工程質量保證的重要環節，但是測試不僅僅是測試工程師的工作，而是每個程序員的一種基本職責。程序員要認識測試不僅是正常的程序調試，而要是要進行有目的有針對性的異常調用測試，這一點要結合需求理解能力。 　　

　　7、學習和總結的能力 　　

　　程序員是很容易被淘汰的職業，所以要善于學習總結。許多程序員喜歡盲目追求一些編碼的小技巧，這樣的技術人員無論學了多少語言，代碼寫起來多熟練，我們只能說他是一名熟練的代碼民工，他永遠都不會有質的提高。一個善于學習的程序員會經常總結自己的技術水平，對自己的技術層面要有良好的定位，這樣才能有目的地提高自己。這樣才能逐步提高，從程序員升級為軟件設計師、系統分析員。 　　

　　作為高級程序員，乃至于設計師而言，除了應該具備上述全部素質之外，還需要具備以下素質： 　　

　　1、 需求分析能力 　　　

　　2、 整體框架能力 　　

　　3、 流程處理能力 　　

　　4、 模塊分解能力 　　

　　5、 整體項目評估能力 　　

6、 團隊組織管理能力

除此之外，還應具備以下特質： 　　

　　1、激情 　　

　　我曾經遇到許多“職業程序員”，他們從事IT是因為覺得這是一種職業，他們只在工作時間編程，除非送去培訓否則他們不會學習新東西，這不是好的程序員。我認為一個好的程序員總是對編程充滿激情，而且好的開發者會做一些編程工作即使這沒有報酬。激情是一個優秀程序員的重要指標。 　　

　　2、自學好學 　　

　　編程領域始終發展變化著，不出一年有些新技術就變成了老技術，這并不是說好的程序員要對所有新技術跟進，但有些卻對學習任何新技術都沒有興趣。他們通常在學校學習了編程，然后工作后單位安排學什么就學什么。如果在招聘中你聽到“讓我培訓一個星期我就會勝任這個工作”那不要雇傭他。實際上，真正優秀的程序員始終談論著你所不知道的新技術，向人們解釋為什么你必須用這個技術，哪怕沒有聽眾聽得明白，哪怕他自己也不明白。 　　

　　3、聰明 　　

　　聰明包括很多因素，情緒和社會交際只是其中之一。好的程序員絕不木訥，他們是最聰明的人，他們中的許多善于交際，健談、興趣廣泛。 　　

　　4、隱性的經驗 　　

　　—好的程序員通常有自己的私人的一些研究、愛好、項目，而這些是他們不寫在簡歷上 (通常覺得不值得寫)，但表現出來卻可能恰恰是他的潛能、深度和后勁所在。 　　

　　5、技術多樣性 　　

　　由于好的程序員喜歡學習和涉獵新技術，所以一般來說超過22歲的都熟知很多新技術，而且對多種技術的長短有 “強烈”的個人意見/見解，喜好嘗試新鮮技術。 　　

　　6、資格證書 　　

　　資格證書并不是識別真正程序員的方法，MCSE、SCJP說明不了什么，它們只是讓別人認識和獲取的，頂多代表這個人在某個技術有一定的知識。 　　

以上所說的標準并不是絕對的，因為有些優秀的程序員確實不符合上述，而有些bad程序員卻符合了。但相信這些對大多數真正的程序員都適用。