前端代碼規(guī)范手冊(cè)

Web Coding Guidelines

前言

本手冊(cè)的愿景是碼出高效拌屏，碼出質(zhì)量”焕現(xiàn)代軟件架構(gòu)都需要協(xié)同開發(fā)完成蛛枚，高效 協(xié)作即降低協(xié)同成本谅海，提升溝通效率，所謂無(wú)規(guī)矩不成方圓坤候，無(wú)規(guī)范不能協(xié)作胁赢。眾所 周知企蹭，制訂交通法規(guī)表面上是要限制行車權(quán)白筹，實(shí)際上是保障公眾的人身安全。試想如 果沒(méi)有限速谅摄，沒(méi)有紅綠燈徒河，誰(shuí)還敢上路行駛。對(duì)軟件來(lái)說(shuō)送漠，適當(dāng)?shù)囊?guī)范和標(biāo)準(zhǔn)絕不是 消滅代碼內(nèi)容的創(chuàng)造性顽照、優(yōu)雅性，而是限制過(guò)度個(gè)性化闽寡，以一種普遍認(rèn)可的統(tǒng)一方式 一起做事代兵，提升協(xié)作效率。代碼的字里行間流淌的是軟件生命中的血液爷狈，質(zhì)量的提升 是盡可能少踩坑植影，杜絕踩重復(fù)的坑，切實(shí)提升質(zhì)量意識(shí)涎永。

前端開發(fā)手冊(cè)

版本號(hào)

指定團(tuán)隊(duì)

更新日期

備注

0.0.1

格致文化前端團(tuán)隊(duì)

2018.7.26

一思币、規(guī)范目的?

1.1 概述?

為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔. 本規(guī)范文檔一經(jīng)確認(rèn), 前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)頁(yè)面開發(fā). 本文檔如有不對(duì)或者不合適的地方請(qǐng)及時(shí)提出, 經(jīng)討論決定后可以更改此文檔.?

二鹿响、文件規(guī)范?

2.1文件命名規(guī)則??

? ? 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合,其中不得包含漢字谷饿、空格和特殊字符;命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義,二是當(dāng)我們?cè)谖募A中使用“按名稱排例”的命令時(shí),同一種大類的文件能夠排列在一起,以便我們查找惶我、修改、替換博投、計(jì)算負(fù)載量等等操作绸贡。?

a.??HTML的命名原則引文件統(tǒng)一使用index.htm??index.html??index.asp文件名(小寫)各子頁(yè)命名的原則首先應(yīng)該以欄目名的英語(yǔ)翻譯取單一單詞為名稱。

例如: 關(guān)于我們 / aboutus 信息反饋 / feedback 產(chǎn) 品 / product?

如果欄目名稱多而復(fù)雜并不好以英文單詞命名,則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示;每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html 文件,文件名統(tǒng)一用index.htm??index.html??index.asp;

b.??圖片的命名原則?

圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質(zhì)例如:廣告贬堵、標(biāo)志恃轩、菜單、按鈕等等黎做。放置在頁(yè)面頂部的廣告叉跛、裝飾圖案等長(zhǎng)方形的圖片取名: banner標(biāo)志性的圖片取名為: logo在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button 在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn),性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶? menu 裝飾用的照片我們?nèi)∶? pic不帶鏈接表示標(biāo)題的圖片我們?nèi)∶? 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鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。例如:menu1_on.gif??menu1_off.gif

c.??javascript的命名原則例如:廣告條的javascript文件名為 ad.js??彈出窗口的javascript文件名為 pop.js

d.??動(dòng)態(tài)語(yǔ)言文件命名原則以性質(zhì)_描述,描述可以有多個(gè)單詞,用“_”隔開,性質(zhì)一般是該頁(yè)面得概要蒸殿。范例:register_form.asp? ?register_post.asp? ?topic_lock.asp?

2.2文件存放位置規(guī)范

_Root? ?? ?? ?? ?? ???

? ?? ???cn? ?? ???存放中文HTML文件?

? ?? ???en? ?? ???存放英文HTML文件?

? ?? ???flash? ?? ???存放Flash文件?

? ?? ???images? ?? ???存放圖片文件?

? ?? ???imagestudio? ?? ???存放PSD源文件?

? ?? ???flashstudio? ?? ???存放flash源文件?

? ?? ???inc? ?? ???存放include文件?

? ?? ???library? ?? ???存放DW庫(kù)文件?

? ?? ???media? ?? ???存放多媒體文件?

? ?? ???project? ?? ???存放工程項(xiàng)目資料?

? ?? ???temp? ?? ???存放客戶原始資料?

? ?? ???js? ?? ???存放JavaScript腳本?

? ?? ???css? ?? ???存放CSS文件?

2.3?CSS 書寫規(guī)范?

基本原則:?

CSS樣式可細(xì)分為3類:自定義樣式筷厘、重新定義HTML樣式、鏈接狀態(tài)樣式宏所。?

1. 樣式為設(shè)計(jì)師自定義的新 CSS 樣式,影響被使用本樣式的區(qū)域,用于完成網(wǎng)頁(yè)中局部的樣式設(shè)定酥艳。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫”例:“ .shadow ”文字樣式樣式名“.no”+“字號(hào)”+“行距”+“顏色縮寫”例:“ .no12 ” 、“ .no12-24 ”?

2. 義HTML樣式為設(shè)計(jì)師重新定義已有的HTML標(biāo)簽樣式,影響全部的被設(shè)定標(biāo)簽樣式,用于統(tǒng)一網(wǎng)頁(yè)中某一標(biāo)簽的樣式定義爬骤。樣式名“HTML標(biāo)簽”例:hr { border: 1px dotted #333333 }?

3. 態(tài)樣式為設(shè)計(jì)師對(duì)鏈接不同狀態(tài)設(shè)定特殊樣式,影響被使用本樣式區(qū)域中的鏈接充石。該樣式寫法有2種: a.nav:link? ? nav.a:link??第一種只能修飾<a>標(biāo)簽中;第二種可以修飾所有包含有<a>標(biāo)簽的其他標(biāo)簽。?

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

注意細(xì)則:?

1. 協(xié)作開發(fā)及分工: i會(huì)根據(jù)各個(gè)模塊, 同時(shí)根據(jù)頁(yè)面相似程序, 事先寫好大體框架文件, 分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&;表現(xiàn)&;行為; 共用css文件base.css由i書寫, 協(xié)作開發(fā)過(guò)程中, 每個(gè)頁(yè)面請(qǐng)務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;?

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

3. 為JavaScript預(yù)留鉤子的命名, 請(qǐng)以 js_ 起始, 比如: js_hide, js_show;?

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

5. 規(guī)避class與id命名(此條重要, 若有不明白請(qǐng)及時(shí)與i溝通):???

a, 通過(guò)從屬寫法規(guī)避, 示例見(jiàn)d;??

b, 取父級(jí)元素id/class命名部分命名, 示例見(jiàn)d;??

c, 重復(fù)使用率高的命名, 請(qǐng)以自己代號(hào)加下劃線起始, 比如i_clear;??

d, a,b兩條, 適用于在2中已建好框架的頁(yè)面, 如, 要在2中已建好框架的頁(yè)面代碼<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屬性書寫順序, 建議遵循 布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: margin霞玄、padding骤铃、float(包括clear)、position(相應(yīng)的 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. 書寫代碼前, 考慮并提高樣式重復(fù)使用率;?

8. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:?

<ul class="list"><li>這兒是標(biāo)題列表<span>2010-09-15</ul>?

定義ul.list li{position:relative}??ul.list li span{position:absolute; right:0}?

即可實(shí)現(xiàn)日期居右顯示?

9. 樣式表中中文字體名, 請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯(cuò)誤時(shí)亂碼;?

10. 景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;?

11. 使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請(qǐng)不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn), 如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文件中我會(huì)初始化表格樣式)?

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

13. 用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請(qǐng)為ie6單獨(dú)定義背景:?

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

14. 避免兼容性屬性的使用, 比如text-shadow || css3的相關(guān)屬性;?

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

16. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;?

17. 代碼縮進(jìn)與格式: 建議單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化i會(huì)統(tǒng)一處理;?

命名規(guī)則:?

頭:header?

??內(nèi)容:content/container?

??尾:footer?

??導(dǎo)航:nav?

??側(cè)欄:sidebar?

??欄目:column?

??頁(yè)面外圍控制整體布局寬度:wrapper?

??左右中:left right center?

??登錄條:loginbar?

??標(biāo)志:logo?

??廣告:banner?

??頁(yè)面主體:main?

??熱點(diǎn):hot?

??新聞:news?

??下載:download?

??子導(dǎo)航:subnav?

??菜單:menu?

??子菜單:submenu?

??搜索:search?

??友情鏈接:friendlink?

??頁(yè)腳:footer?

??版權(quán):copyright?

??滾動(dòng):scroll?

??內(nèi)容:content?

??標(biāo)簽頁(yè):tab?

??文章列表:list?

??提示信息:msg?

??小技巧:tips?

??欄目標(biāo)題:title?

??加入:joinus?

??指南:guild?

??服務(wù):service?

??注冊(cè):regsiter?

??狀態(tài):status?

??投票:vote?

??合作伙伴:partner?

(二)注釋的寫法:?

??/* Footer */?

??內(nèi)容區(qū)?

??/* End Footer */?

(三)id的命名:?

??(1)頁(yè)面結(jié)構(gòu)?

??容器: container?

??頁(yè)頭:header?

??內(nèi)容:content/container?

??頁(yè)面主體:main?

??頁(yè)尾:footer?

??導(dǎo)航:nav?

??側(cè)欄:sidebar?

??欄目:column?

??頁(yè)面外圍控制整體布局寬度:wrapper?

??左右中:left right center?

??(2)導(dǎo)航?

??導(dǎo)航:nav?

??主導(dǎo)航:mainbav?

??子導(dǎo)航:subnav?

??頂導(dǎo)航:topnav?

??邊導(dǎo)航:sidebar?

??左導(dǎo)航:leftsidebar?

??右導(dǎo)航:rightsidebar?

??菜單:menu?

??子菜單:submenu?

??標(biāo)題: title?

??摘要: summary?

??(3)功能?

??標(biāo)志:logo?

??廣告:banner?

??登陸:login?

??登錄條:loginbar?

??注冊(cè):regsiter?

??搜索:search?

??功能區(qū):shop?

??標(biāo)題:title?

??加入:joinus?

??狀態(tài):status?

??按鈕:btn?

??滾動(dòng):scroll?

??標(biāo)簽頁(yè):tab?

??文章列表:list?

??提示信息:msg?

??當(dāng)前的: current?

??小技巧:tips?

??圖標(biāo): icon?

??注釋:note?

??指南:guild?

??服務(wù):service?

??熱點(diǎn):hot?

??新聞:news?

??下載:download?

??投票:vote?

??合作伙伴:partner?

??友情鏈接:link?

??版權(quán):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;}?

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

? ? 不同瀏覽器上字號(hào)保持一致,字號(hào)建議用點(diǎn)數(shù)pt和像素px來(lái)定義,pt一般使用中文宋體的9pt 和11pt,px一般使用中文宋體12px 和14.7px 這是經(jīng)過(guò)優(yōu)化的字號(hào),黑體字或者宋體字加粗時(shí),一般選用11pt 和14.7px 的字號(hào)比較合適。中英文混排時(shí),我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體禽车。?

2.4?html 書寫規(guī)范?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- head區(qū)代碼規(guī)范??

head區(qū)是指HTML代碼的<head>和</head>之間的內(nèi)容寇漫。??

必須加入的標(biāo)簽??

公司版權(quán)注釋??<!--- The site is designed by EHM,Inc 07/2005 --->?

網(wǎng)頁(yè)顯示字符集??

簡(jiǎn)體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">?

繁體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">?

英 語(yǔ):<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">?

網(wǎng)頁(yè)制作者信息??<META name="author" content="?aliyunzixun@xxx.com">??

網(wǎng)站簡(jiǎn)介??<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">?

搜索關(guān)鍵字??<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">?

網(wǎng)頁(yè)的css規(guī)范??<LINK href="../css/style.css" rel="stylesheet" type="text/css">?

網(wǎng)頁(yè)標(biāo)題??<title>xxxxxxxxxxxxxxxxxx</title>?

可以選擇加入的標(biāo)簽??

設(shè)定網(wǎng)頁(yè)的到期時(shí)間刊殉。一旦網(wǎng)頁(yè)過(guò)期,必須到服務(wù)器上重新調(diào)閱。??

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

禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容州胳。??

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

用來(lái)防止別人在框架里調(diào)用你的頁(yè)面记焊。?

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

自動(dòng)跳轉(zhuǎn)。?

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">??5指時(shí)間停留5秒?

網(wǎng)頁(yè)搜索機(jī)器人向?qū)ㄗ病Ｓ脕?lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引,哪些頁(yè)面不需要索引遍膜。?

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

CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all瓤湘。??

收藏夾圖標(biāo)??<link rel = "Shortcut Icon" href="favicon.ico">?

所有的javascript的調(diào)用盡量采取外部調(diào)用.??

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

附<body>標(biāo)簽:??

<body>標(biāo)簽不屬于head區(qū),這里強(qiáng)調(diào)一下,為了保證瀏覽器的兼容性,必須設(shè)置頁(yè)面背景<body bgcolor="#FFFFFF">?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- 字體1. 在設(shè)定字體樣式時(shí)對(duì)于文字字號(hào)樣式和行間距應(yīng)必須使用CSS樣式表瓢颅。禁止在頁(yè)面中出現(xiàn) <font size=?> 標(biāo)記。2.在網(wǎng)頁(yè)中中文應(yīng)首選使用宋體。英文和數(shù)字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經(jīng)過(guò)優(yōu)化的字號(hào),黑體字或者宋體字加粗時(shí),一般選用11pt 和14.7px 的字號(hào)比較合適垫竞。3. 為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能,在一段完整的文字中請(qǐng)盡量不要使用?

來(lái)人工干預(yù)分段便监。4.不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格,但避頭的符號(hào)之前和避尾的符號(hào)之后除外,漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn),英文字母和數(shù)字周圍的括號(hào)應(yīng)該使用半角括號(hào)中贝。 5. 請(qǐng)不要在網(wǎng)頁(yè)中連續(xù)出現(xiàn)多于一個(gè)的? ?也盡量少使用全角空格(英文字符集下,全角空格會(huì)變成亂碼),空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來(lái)實(shí)現(xiàn)。 6. 行距建議用百分比來(lái)定義,常用的兩個(gè)行距的值是line-height:120%/150%. 7. 排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理,不要使用? ?或者全角空格來(lái)達(dá)到效果,規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 標(biāo)記,注意,一般情況下,請(qǐng)不要省略 結(jié)束標(biāo)記 。?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- 鏈接1. 網(wǎng)站中的鏈接路徑全部采用相對(duì)路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名,如我們不必這樣:<a href=”aboutus/index.htm”> 而應(yīng)該這樣:<a href=”aboutus/”>,所有內(nèi)頁(yè)指向首頁(yè)的鏈接寫成<a href=”/”>2. 在瀏覽器里,當(dāng)我們點(diǎn)擊空鏈接時(shí),它會(huì)自動(dòng)將當(dāng)前頁(yè)面重置到首端,從而影響用戶正常的閱讀內(nèi)容,我們用代碼“javascript:void(null)”代替原來(lái)的“#”標(biāo)記?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- 表格1px表格 style="border-collapse: collapse"實(shí)例如下:<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"bordercolor="#000000" cellpadding="0"> <tr> <td></td></tr></table>設(shè)置亮、暗邊框顏色表格有亮邊框(bordercolorlight)和暗邊框(bordercolordark)兩個(gè)屬性可以對(duì)表格樣式設(shè)置渔嚷。<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">在寫 <table> 互相嵌套時(shí),嚴(yán)格按照的規(guī)范,對(duì)于單獨(dú)的一個(gè)<table>來(lái)說(shuō),<table><tr>對(duì)齊,<td> 縮進(jìn)兩個(gè)半角空格,<td> 中如果還有嵌套的表格,<table>也縮進(jìn)兩個(gè)半角空格,如果<td>中沒(méi)有任何嵌套的表格,</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行,不要換行,如我們注意在源代碼中不應(yīng)有這樣的代碼:<td><img src=”../images/sample.gif”> </td>而應(yīng)該是這樣的:<td><img src=”../images/sample.gif”></td>這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格,以上不規(guī)范的寫法相當(dāng)于無(wú)意中增加一個(gè)半角空格,如果確實(shí)有必要增加一個(gè)半角空格,也應(yīng)該這樣寫: <td><img src=”../images/sample.gif”> </td>一個(gè)網(wǎng)頁(yè)要盡量避免用整個(gè)一張大表格,所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi),因?yàn)闉g覽器在解釋頁(yè)面的元素時(shí),是以表格為單位逐一顯示,如果一張網(wǎng)頁(yè)是嵌套在一個(gè)大表格之內(nèi),那么很可能造成的后果就是,當(dāng)瀏覽者敲入網(wǎng)址,他要先面對(duì)一片空白很長(zhǎng)時(shí)間,然后所有的網(wǎng)頁(yè)內(nèi)容同時(shí)出現(xiàn)。如果必須這樣做,請(qǐng)使用 <tbody>標(biāo)記,以便能夠使這個(gè)大表格分塊顯示?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- 下載速度首頁(yè)Flash 網(wǎng)頁(yè)大小應(yīng)限定在 200K 以下,盡可能的使用矢量圖形和Action來(lái)減小動(dòng)畫大小稠曼。非首頁(yè)靜態(tài)頁(yè)面含圖片大小應(yīng)限定在 70K 左右,盡可能的使用背景顏色替換大塊同色圖片形病。?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- includeasp標(biāo)準(zhǔn)寫法 <!--#include file="inc/index_top.asp" -->jsp 標(biāo)準(zhǔn)寫法 <%@ include file="../inc/index_top..jsp" %>?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- Alt和Title 都是提示性語(yǔ)言標(biāo)簽,請(qǐng)注意它們之間的區(qū)別。??

在我們?yōu)g覽網(wǎng)頁(yè)時(shí),當(dāng)鼠標(biāo)停留在圖片對(duì)象或文字鏈接上時(shí),在鼠標(biāo)的右下角有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框霞幅。對(duì)目標(biāo)進(jìn)行一定的注釋說(shuō)明漠吻。在一些場(chǎng)合,它的作用是很重要的。??

alt 用來(lái)給圖片來(lái)提示的蝗岖。Title用來(lái)給鏈接文字或普通文字提示的侥猩。??

用法如下:??

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

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

<img src="圖片.gif" alt="給圖片提示">??

網(wǎng)頁(yè)制作細(xì)節(jié) ---- 緩存??

網(wǎng)頁(yè)不會(huì)被緩存??

HTM網(wǎng)頁(yè)??

<META HTTP-EQUIV="pragma" CONTENT="no-cache">??

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

<META HTTP-EQUIV="expires" CONTENT="0">??

ASP網(wǎng)頁(yè)??

Response.Expires = -1??

Response.ExpiresAbsolute = Now() - 1??

Response.cachecontrol = "no-cache"?

網(wǎng)頁(yè)制作細(xì)節(jié) ---- 瀏覽器兼容性創(chuàng)建站點(diǎn)時(shí),應(yīng)該明白訪問(wèn)者可能使用各種 Web 瀏覽器榔至。在已知的其他設(shè)計(jì)限制下,盡可能將站點(diǎn)設(shè)計(jì)為具有最大的瀏覽器兼容性抵赢。目前使用的 Web 瀏覽器有二十多種,大多數(shù)已發(fā)行了多個(gè)版本。即使您只針對(duì)使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數(shù) Web 用戶,但您應(yīng)明確并不是每個(gè)人都在使用這兩種瀏覽器的最新版本唧取。您的站點(diǎn)越復(fù)雜(在布局铅鲤、動(dòng)畫、多媒體內(nèi)容和交互方面),跨瀏覽器兼容的可能性就越小枫弟。例如,并非所有的瀏覽器都可以運(yùn)行JavaScript邢享。不使用特殊字符的純文本頁(yè)面或許能夠在任何瀏覽器中正確顯示,但比起有效地使用圖形、布局和交互的頁(yè)面,這樣的頁(yè)面在美感上可能要差得多淡诗。所以,應(yīng)盡量在最佳效果設(shè)計(jì)和最大瀏覽器兼容性設(shè)計(jì)之間取得平衡骇塘。所有的HTML 標(biāo)簽的屬性都要用單引號(hào)或者雙引號(hào)括起,即我們應(yīng)該寫 <a href=”url”> 而不 是 <a href=url>.?

圖片處理細(xì)節(jié) ---- banner全尺寸banner為468X60px,半尺寸banner為234X60px,小banner為88X31px伊履。另外120X90,120X60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸。全尺寸banner不超過(guò)14K款违。普遍的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140次級(jí)頁(yè)的pip尺寸360X300,336X280游標(biāo):100X100或120X120?

圖片處理細(xì)節(jié) ---- LOGO的國(guó)際標(biāo)準(zhǔn)規(guī)范為了便于INTERNET上信息的傳播,一個(gè)統(tǒng)一的國(guó)際標(biāo)準(zhǔn)是需要的唐瀑。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的LOGO,目前有三種規(guī)格:88*31 這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格插爹。120*60 這種規(guī)格用于一般大小的LOGO哄辣。120*90 這種規(guī)格用于大型LOGO。?

圖片處理細(xì)節(jié) ---- 頁(yè)面修飾圖片處理圖片經(jīng)過(guò)優(yōu)化以加快下載的速度,有較佳的視覺(jué)空間效果,用圖要與頁(yè)面風(fēng)格赠尾、頁(yè)面內(nèi)容相符;制作精美,細(xì)節(jié)處理得當(dāng)力穗。?

2.5?JavaScript書寫規(guī)范?

1. 書寫過(guò)程中, 每行代碼結(jié)束必須有分號(hào); 原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開發(fā), 以避免網(wǎng)上down下來(lái)的代碼造成的代碼污染(沉冗代碼 || 與現(xiàn)有代碼沖突 || ...);?

2. 庫(kù)引入: 原則上僅引入jQuery庫(kù), 若需引入第三方庫(kù), 須與團(tuán)隊(duì)其他人員討論決定;?

3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符為'_', 其他與原生JavaScript 規(guī)則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.?

4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;?

5. 函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun();?

6. 命名語(yǔ)義化, 盡可能利用英文單詞或其縮寫;?

7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval() &; innerText;?

8. 后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用, 以避免編碼錯(cuò)誤時(shí)亂碼顯示;?

9. 代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;?

10. 注重與html分離, 減小reflow, 注重性能.?

2.6?圖片規(guī)范?

1. 所有頁(yè)面元素類圖片均放入img文件夾, 測(cè)試用圖片放于img/demoimg文件夾;?

2. 圖片格式僅限于gif || png || jpg;?

3. 命名全部用小寫英文字母 || 數(shù)字 || _ 的組合,其中不得包含漢字 || 空格 || 特殊字符;盡量用易懂的詞匯, 便于團(tuán)隊(duì)其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;?

4. 在保證視覺(jué)效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時(shí)間;?

5. 盡量避免使用半透明的png圖片(若使用, 請(qǐng)參考css規(guī)范相關(guān)說(shuō)明);?

6. 運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁(yè)面http請(qǐng)求, 但注意, 請(qǐng)務(wù)必在對(duì)應(yīng)的sprite psd源圖中劃參考線, 并保存至img目錄下.?

2.7?注釋規(guī)范?

1. html注釋: 注釋格式 <!--這兒是注釋-->, '--'只能在注釋的始末位置,不可置入注釋文字區(qū)域;?

2. css注釋: 注釋格式 /*這兒是注釋*/;?

3. JavaScript注釋, 單行注釋使用'//這兒是單行注釋' ,多行注釋使用 /* 這兒有多行注釋 */;?

2.8?瀏覽器兼容性 CSS hack?

一、標(biāo)識(shí)區(qū)別:區(qū)別IE6,IE7,IE8,FF气嫁。1. IE都能識(shí)別* ; 標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*;?

2. IE6能識(shí)別*,但不能識(shí)別 !important; IE6在樣式前面加_?

3. IE7能識(shí)別*,也能識(shí)別!important;?

4. IE8能識(shí)別/ 9 例如:background:red /9;?

5. firefox不能識(shí)別*,但能識(shí)別!important;?

1.IE6和firefox的區(qū)別:background:orange;*background:blue;意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍(lán)色.?

2. IE6和IE7的區(qū)別:background:green !important;background:blue;意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色?

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

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

二当窗、實(shí)踐建議?

(1).??開發(fā)平臺(tái)的選擇?

在 Firefox 上編寫CSS, 同時(shí)兼容其他瀏覽器的. 這樣做肯定會(huì)比在 IE 做好再到別的瀏覽器兼容來(lái)得容易, 因?yàn)?IE 對(duì)老標(biāo)準(zhǔn)支持還是很不錯(cuò)的, 而 IE 的一些特有功能人家卻不支持. 所以推薦以 Firefox 結(jié)合 Firebug 擴(kuò)展作為平臺(tái)。?

(2).??CSS Hack 的順序?

使用 Firefox 作為平臺(tái), 只要代碼寫得夠標(biāo)準(zhǔn), 其實(shí)要 Hack 的地方不會(huì)很多的, IE 以外的瀏覽器幾乎都不會(huì)有問(wèn)題, 所以可以暫時(shí)忽略,?

順序如下:Firefox -> IE6 -> IE7 -> 其他?

(3).? ?Hack 的方法?

說(shuō)到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個(gè)文件中處理. 其實(shí)作用是相同的, 只是出發(fā)點(diǎn)不一樣而已.?

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

IE6不認(rèn) !important,也不認(rèn) *+html.所以 IE6只能是 blue.IE7認(rèn) !important,也認(rèn) *+html,優(yōu)先度: (*+html + !important) > !important > +html. IE7可以是 red, blue和 green,但 green的優(yōu)先度最高.Firefox和其他瀏覽器都認(rèn) !important. !important優(yōu)先, Firefox可以是 red和 blue,但 red優(yōu)先度高.上述的優(yōu)先符號(hào)均是 CSS3標(biāo)準(zhǔn)允許的,其他瀏覽器也還有其他的 Hack方法,但我迄今還沒(méi)遇到過(guò) Firefox正常, IE以外的其他瀏覽器不正常的情況,所以無(wú)可分享.只要代碼規(guī)范,相信這種情況的發(fā)生應(yīng)該是很罕見(jiàn) (JavaScript除外).?

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

————————————————

版權(quán)聲明：本文為CSDN博主「itskhdu」的原創(chuàng)文章超全，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明邓馒。

原文鏈接：https://blog.csdn.net/dkh_321/article/details/81705340