Web命名规范

2023年6月21日发(作者：)

Web命名规范HTML编码规范（⼀）命名规则： 头：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

web前端命名规范⼀、规范⽬的1.1 概述为提⾼团队协作效率, 便于后台⼈员添加功能及前端后期优化维护, 输出⾼质量的⽂档, 特制订此⽂档. 本规范⽂档⼀经确认, 前端开发⼈员必须按本⽂档规范进⾏前台页⾯开发. 本⽂档如有不对或者不合适的地⽅请及时提出, 经讨论决定后可以更改此⽂档.⼆、⽂件规范2.1 ⽂件命名规则⽂件名称统⼀⽤⼩写的英⽂字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想⼀是使得你⾃⼰和⼯作组的每⼀个成员能够⽅便的理解每⼀个⽂件的意义，⼆是当我们在⽂件夹中使⽤“按名称排例”的命令时，同⼀种⼤类的⽂件能够排列在⼀起，以便我们查找、修改、替换、计算负载量等等操作。a. HTML的命名原则引⽂件统⼀使⽤ ⽂件名（⼩写）各⼦页命名的原则⾸先应该以栏⽬名的英语翻译取单⼀单词为名称。例如：关于我们 aboutus信息反馈 feedback产 品 product如果栏⽬名称多⽽复杂并不好以英⽂单词命名，则统⼀使⽤该栏⽬名称拼⾳或拼⾳的⾸字母表⽰；每⼀个⽬录中应该包含⼀个缺省的html ⽂件，⽂件名统⼀⽤ ；b. 图⽚的命名原则图⽚的名称分为头尾两部分，⽤下划线隔开，头部分表⽰此图⽚的⼤类性质例如：⼴告、标志、菜单、按钮等等。放置在页⾯顶部的⼴告、装饰图案等长⽅形的图⽚取名： banner标志性的图⽚取名为： logo在页⾯上位置不固定并且带有链接的⼩图⽚我们取名为 button在页⾯上某⼀个位置连续出现，性质相同的链接栏⽬的图⽚我们取名： menu装饰⽤的照⽚我们取名： pic不带链接表⽰标题的图⽚我们取名： title范例：banner_ banner_ menu_ menu_ title_ logo_ logo_

pic_⿏标感应效果图⽚命名规范为”图⽚名+_+on/off”。例如：menu1_ menu1_. javascript的命名原则c. javascript的命名原则例如：⼴告条的javascript⽂件名为 弹出窗⼝的javascript⽂件名为 . 动态语⾔⽂件命名原则以性质_描述，描述可以有多个单词，⽤“_”隔开，性质⼀般是该页⾯得概要。范例：register_ register_ topic_2.2 ⽂件存放位置规范_Root

cn 存放中⽂HTML⽂件en 存放英⽂HTML⽂件flash 存放Flash⽂件images 存放图⽚⽂件imagestudio 存放PSD源⽂件flashstudio 存放flash源⽂件inc 存放include⽂件library 存放DW库⽂件media 存放多媒体⽂件project 存放⼯程项⽬资料temp 存放客户原始资料js 存放JavaScript脚本css 存放CSS⽂件2.3 CSS 书写规范基本原则：CSS样式可细分为3类：⾃定义样式、重新定义HTML样式、链接状态样式。1. 样式为设计师⾃定义的新 CSS 样式，影响被使⽤本样式的区域，⽤于完成⽹页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”⽂字样式样式名“.no”+“字号”+“⾏距”+“颜⾊缩写”例：“ .no12 ” 、“ .no12-24 ”2. 义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，⽤于统⼀⽹页中某⼀标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }3. 态样式为设计师对链接不同状态设定特殊样式，影响被使⽤本样式区域中的链接。该样式写法有2种： :link nav.a:link 第⼀种只能修饰<a>标签中；第⼆种可以修饰所有包含有<a>标签的其他标签。页⾯内的样式加载必须⽤链接⽅式<link rel=”stylesheet” type=”text/css” href=”style/”>注意细则：1. 协作开发及分⼯: i会根据各个模块, 同时根据页⾯相似程序, 事先写好⼤体框架⽂件, 分配给前端⼈员实现内部结构&表现&⾏为; 共⽤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(层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>定义 li{position:relative} 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;} , ⽂件中我会初始化表格样式)12. 杜绝使⽤<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;13. ⽤png图⽚做图⽚时, 要求图⽚格式为png-8格式,若png-8实在影响图⽚质量或其中有半透明效果, 请为ie6单独定义背景:background:none;_filter:progid:mageLoader(sizingMethod=crop, src=’img/’);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⼦菜单：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 “5B8B4F53″,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 两种字体。2.4 html 书写规范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@”>d) ⽹站简介 <META NAME=”DESCRIPTION” CONTENT=”xxxxxxxxxxxxxxxxxxxxxxxxxx”>e) 搜索关键字 <META NAME=”keywords” CONTENT=”xxxx,xxxx,xxx,xxxxx,xxxx,”>f) ⽹页的css规范 <LINK href=”../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：//”> 5指时间停留5秒e) ⽹页搜索机器⼈向导。⽤来告诉搜索机器⼈哪些页⾯需要索引，哪些页⾯不需要索引。<META NAME=”robots” CONTENT=”none”>CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。f) 收藏夹图标 <link rel = “Shortcut Icon” href=””>g) 所有的javascript的调⽤尽量采取外部调⽤.<SCRIPT LANGUAGE=”JavaScript” SRC=”script/”></SCRIPT>h) 附<body>标签：<body>标签不属于head区，这⾥强调⼀下，为了保证浏览器的兼容性，必须设置页⾯背景<body bgcolor=”#FFFFFF”>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> 结束标记 。3. ⽹页制作细节 —- 链接1. ⽹站中的链接路径全部采⽤相对路径，⼀般链接到某⼀⽬录下的缺省⽂件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/”> ⽽应该这样：<a href=”aboutus/”>，所有内页指向⾸页的链接写成<a href=”/”>2. 在浏览器⾥，当我们点击空链接时，它会⾃动将当前页⾯重置到⾸端，从⽽影响⽤户正常的阅读内容，我们⽤代码“javascript:void(null)”代替原来的“#”标记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/”></td>⽽应该是这样的：<td><img src=”../images/”></td>这是因为浏览器认为换⾏相当于⼀个半⾓空格，以上不规范的写法相当于⽆意中增加⼀个半⾓空格，如果确实有必要增加⼀个半⾓空格，也应该这样写：<td><img src=”../images/”> </td>⼀个⽹页要尽量避免⽤整个⼀张⼤表格，所有的内容都嵌套在这个⼤表格之内，因为浏览器在解释页⾯的元素时，是以表格为单位逐⼀显⽰，如果⼀张⽹页是嵌套在⼀个⼤表格之内，那么很可能造成的后果就是，当浏览者敲⼊⽹址，他要先⾯对⼀⽚空⽩很长时间，然后所有的⽹页内容同时出现。如果必须这样做，请使⽤ <tbody>标记，以便能够使这个⼤表格分块显⽰5. ⽹页制作细节 —- 下载速度⾸页Flash ⽹页⼤⼩应限定在 200K 以下，尽可能的使⽤⽮量图形和Action来减⼩动画⼤⼩。⾮⾸页静态页⾯含图⽚⼤⼩应限定在 70K 左右，尽可能的使⽤背景颜⾊替换⼤块同⾊图⽚。6. ⽹页制作细节 —- includeasp标准写法 <!–#include file=”inc/index_” –>jsp 标准写法 <%@ include file=”../inc/index_top..jsp” %>7. ⽹页制作细节 —- Alt和Title都是提⽰性语⾔标签，请注意它们之间的区别。在我们浏览⽹页时，当⿏标停留在图⽚对象或⽂字链接上时，在⿏标的右下⾓有时会出现⼀个提⽰信息框。对⽬标进⾏⼀定的注释说明。在⼀些场合，它的作⽤是很重要的。alt ⽤来给图⽚来提⽰的。Title⽤来给链接⽂字或普通⽂字提⽰的。⽤法如下：<p Title=”给链接⽂字提⽰”>⽂字</p><a href=”#” Title=”给链接⽂字提⽰”>⽂字</a><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⽹页s = -sAbsolute = Now() – ontrol = “no-cache”9. ⽹页制作细节 —- 浏览器兼容性创建站点时，应该明⽩访问者可能使⽤各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最⼤的浏览器兼容性。⽬前使⽤的 Web 浏览器有⼆⼗多种，⼤多数已发⾏了多个版本。即使您只针对使⽤ Netscape Navigator 和 Microsoft InternetExplorer 的⼤多数 Web ⽤户，但您应明确并不是每个⼈都在使⽤这两种浏览器的最新版本。您的站点越复杂（在布局、动画、多媒体内容和交互⽅⾯），跨浏览器兼容的可能性就越⼩。例如，并⾮所有的浏览器都可以运⾏JavaScript。不使⽤特殊字符的纯⽂本页⾯或许能够在任何浏览器中正确显⽰，但⽐起有效地使⽤图形、布局和交互的页⾯，这样的页⾯在美感上可能要差得多。所以，应尽量在最佳效果设计和最⼤浏览器兼容性设计之间取得平衡。所有的HTML 标签的属性都要⽤单引号或者双引号括起，即我们应该写 <ahref=”url”> ⽽不 是 <a href=url>.10. 图⽚处理细节 —- banner全尺⼨banner为468X60px，半尺⼨banner为234X60px，⼩banner为88X31px。另外120X90，120X60也是⼩图标的标准尺⼨。全尺⼨banner不超过14K。普遍的banner尺⼨760X100，750X120，468X60，468X95，728X90，585X140次级页的pip尺⼨360X300，336X280游标:100X100或120X12011. 图⽚处理细节 —- LOGO的国际标准规范为了便于INTERNET上信息的传播，⼀个统⼀的国际标准是需要的。实际上已经有了这样的⼀整套标准。其中关于⽹站的LOGO，⽬前有三种规格：88*31 这是互联⽹上最普遍的LOGO规格。120*60 这种规格⽤于⼀般⼤⼩的LOGO。120*90 这种规格⽤于⼤型LOGO。12. 图⽚处理细节 —- 页⾯修饰图⽚处理图⽚经过优化以加快下载的速度,有较佳的视觉空间效果，⽤图要与页⾯风格、页⾯内容相符；制作精美，细节处理得当。2.5 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, 注重性能.2.6 图⽚规范1. 所有页⾯元素类图⽚均放⼊img⽂件夹, 测试⽤图⽚放于img/demoimg⽂件夹;2. 图⽚格式仅限于gif || png || jpg;3. 命名全部⽤⼩写英⽂字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量⽤易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, ⽤下划线隔开, ⽐如ad_ || btn_;4. 在保证视觉效果的情况下选择最⼩的图⽚格式与图⽚质量, 以减少加载时间;5. 尽量避免使⽤半透明的png图⽚(若使⽤, 请参考css规范相关说明);6. 运⽤css sprite技术集中⼩的背景图或图标, 减⼩页⾯http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存⾄img⽬录下.2.7 注释规范1. html注释: 注释格式 <!–这⼉是注释–>, ‘–‘只能在注释的始末位置,不可置⼊注释⽂字区域;2. css注释: 注释格式 /*这⼉是注释*/;3. JavaScript注释, 单⾏注释使⽤’//这⼉是单⾏注释’ ,多⾏注释使⽤ /* 这⼉有多⾏注释 */;2.8 浏览器兼容性 CSS hack⼀、标识区别：区别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等其他浏览器中显⽰红⾊。IE6不认 !important,也不认 *+html.所以 IE6只能是 7认 !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;)放到另⼀个⽂件中,再⽤下⾯的⽅法导⼊.========================================================================================Web ⽬录结构规范：⽬录建⽴的原则：以最少的层次提供最清晰简便的访问结构。⽬录的命名以⼩写英⽂字母，下划线组成。⽬录的命名以⼩写英⽂字母，下划线组成。根⽬录⼀般只存放htm以及其他必须的系统⽂件根⽬录下的images⽤于存放各页⾯都要使⽤的公⽤图⽚。所有JS等脚本存放在根⽬录下的scripts或js⽬录所有CSS⽂件存放在根⽬录下style或css⽬录多语⾔版本存放于独⽴的⽬录。例如：简体中⽂存放在cn⽬录下，繁体中⽂存放在 tw⽬录下，英⽂存放在en⽬录下等。所有flash, avi, ram, quicktime 等多媒体⽂件存放在根⽬录下的media⽬录下。Web UI设计命名规范：2.1 Web 界⾯设计最佳尺⼨960⽹格系统——web界⾯设计最佳尺⼨⽬前绝⼤多数显⽰器都⽀持 1024 x 768 及其以上分辨率。为了有效的利⽤屏幕宽度同时保证栅格的灵活度，可以看出960是⾮常合适的。这样，在⽬前主流显⽰器下，960就成为⽹页栅格系统中的最佳宽度了。2.2 ⽹站设计及基本框架结构Container“container“ 就是将页⾯中的所有元素包在⼀起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.Header“header” 是⽹站页⾯的头部区域，⼀般来讲，它包含⽹站的logo和⼀些其他元素。这部分还可以命名为:“page-header” (或pageHeader).Navbar“navbar“等同于横向的导航栏，是最典型的⽹页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.Menu“Menu”区域包含⼀般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.Main“Main”是⽹站的主要区域，如果是博客的话它将包含的⽇志。这部分还可以命名为: “content“, “main-content”(或“mainContent”)。SidebarSidebar“Sidebar” 部分可以包含⽹站的次要内容，⽐如最近更新内容列表、关于⽹站的介绍或⼴告元素等…这部分还可以命名为: “subNav “,“side-panel“, “secondary-content“.Footer“Footer”包含⽹站的⼀些附加信息，这部分还可以命名为: “copyright“2.3命名规则注意⼏点尽量考虑为元素命名其本⾝的作⽤或”⽤意”，达到语义化。不要使⽤表⾯形式的命名.如:red/left/big等。组合命名规则:[元素类型]-[元素作⽤/内容]如:搜索按钮: btn-search、登录表单:form-login、新闻列表:list-news。涉及到交互⾏为的元素命名:凡涉及交互⾏为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:⿏标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited2.4常⽤命名汇总名称 命名规范页头 header、top登录条 loginbar标志 logo侧栏 sidebar⼴告条 banner导航: nav⼦导航: subNav菜单: menu⼦菜单: subMenu下拉菜单: dropMenu⼯具条: toolbar⼯具条: toolbar表单: form栏⽬: column箭头: arrow搜索: search搜索按钮: btn-search滚动条: scroll内容: content标签页: tab⽂章列表: list⼩技巧: tips栏⽬标题: title链接: links页脚: footer、end服务: service热点: hot新闻: news下载: download注册: Register 、reg状态: status按钮: btn上传: upload登陆: login投票: vote合作伙伴: partner版权: copyright⽹站地图: sitemapWeb UI图⽚命名规范：图⽚名称分为头尾两两部分，⽤下划线隔开。头部分表⽰此图⽚的⼤类性质。例如： 放置在页⾯顶部的⼴告、装饰图案等长⽅形的图⽚我们取名：banner ；标志性的图⽚我们取名为：logo ；在页⾯上位置不固定并且带有链接的⼩图⽚我们取名为button ；在页⾯上做栏⽬链接的图⽚我们取名：menu ；不带链接表⽰标题的图⽚我们取名：title ；装饰⽤的照⽚我们取名：pic ；依照此原则类推。尾部分⽤来表⽰图⽚的具体含义，⽤英⽂字母表⽰。例如：gif logo_ button_ menu_ title_

pic_有onmouse效果的图⽚，两张分别在原有⽂件名后加”_on”和”_off”命名。多语⾔的图⽚应放到多语⾔⽬录下Web基本框架布局规范：Web基本框架布局规范 常⽤到的Div和Table 两种采⽤CSS+DIV对⽹站重构⽇趋被⼤家重视起来，有以下优势：1：表现和内容相分离 将设计部分剥离出来放在⼀个独⽴样式⽂件中，HTML⽂件中只存放⽂本信息。2：提⾼搜索引擎对⽹页的索引效率

⽤只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的⽹页内容，并可能给你⼀个较⾼的评价。3：提⾼页⾯浏览速度

对于同⼀个页⾯视觉效果，采⽤CSS+DIV重构的页⾯容量要⽐TABLE编码的页⾯⽂件容量⼩得多，前者⼀般只有后者的1/2⼤⼩。还有因为<table>标签是要等</table>下载好以后才可以显⽰的，所以整个⽹页是⼀下⼦跳出来的，这样让⼈感觉起来显⽰速度⾮常的慢。⽽使⽤css+div,<div> 标签不⽤等</div>下载好就可以显⽰⾥⾯的内容的,所以让⼈感觉打开⽹页的速度⾮常之快。4：易于维护和改版

你只要简单的修改⼏个CSS⽂件就可以重新设计整个⽹站的页⾯。从以上的描述来看，采⽤CSS+DIV对⽹站重构可以⼤⼤提升⽹站⽤户与搜索引擎的友好度。CSS+DIV所以成为⽬前⽹页布局主流。Table最⼤缺点是代码臃肿，你⾄少需要写下 <table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table 的各种标签中还包含了复杂的属性定义，⽽ Div 只需<div>⼀个标签。页⾯渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。可访问性差：屏幕朗读软件和盲⽂浏览器⽆法很好地理解 Table 中的内容。不够语义（Semantic）：我们需要语义的 Web。不够语义（Semantic）：我们需要语义的 Web。⼀般table 只⽤做于数据处理。CSS样式书写规范及优化：5.1．CSS⽂件命名规范全局样式：；框架布局：；字体样式：；链接样式：；打印样式：；5.2．常⽤类/ID命名规范页　眉：header内　容：content容　器：container页　脚：footer注　释：note……（更多参照2.4常⽤命名汇总）1、常⽤类的命名规则：应尽量以常见英⽂单词为准，做到通俗易懂，并在适当的地⽅加以注释。对于⼆级类/ID命名，则采⽤组合书写的模式，后⼀个单词的⾸字母应⼤写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……2、辅助图⽚⽤背影图处理：这⾥的”辅助图⽚”是指那些不是作为页⾯要表达的内容的⼀部分，⽽仅仅⽤于修饰、间隔、提醒的图⽚。将其做背影图处理，可以在不改动页⾯的情况下通过CSS样式来进⾏改动，如：#logo {background:url(images/) #FEFEFE no-repeat right bottom;}5.3结构与样式分离：在页⾯⾥只写⼊⽂档的结构，⽽将样式写于css⽂件中，通过外部调⽤CSS样式表来实现结构与样式的分离。5.4、⽂档的结构化书写：页⾯CSS⽂档都应采⽤结构化的书写⽅式，逻辑清晰易于阅读。如：<div id=”mainMenu”><ul><li><a href=”#” >⾸页</a></li><li><a href=”#” >介绍</a></li><li><a href=”#” >服务</a></li>title">li></ul></div>/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/5.5注释书写规范1、⾏间注释：直接写于属性值后⾯，如：.search{border:1px solid #fff;/*定义搜索输⼊框边框*/background:url(../images/) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地⽅加⼊注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/) no-repeat #333;}/*=====搜索条结束=====*/5.6 CSS样式属性代码优化缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚⾄是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类⽽有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：#mainMenu {background:url(../images/);border:1px solid #333;width:100%;height:30px;overflow:hidden;}#subMenu {background:url(../images/);border:1px solid #333;width:100%;height:20px;overflow:hidden;}两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu {background:url(../images/);border:1px solid #333;width:100%;overflow:hidden;}#mainMenu {height:30px;}#subMenu {height:20px;}2、同⼀属性的缩写：同⼀属性根据它的属性值也可以进⾏简写，如：.search {background-color:#333;background-image:url(../images/);background-repeat: no-repeat;background-position:50% 50%;}.search {background:#333 url(../images/) no-repeat 50% 50%;}3、内外侧边框的缩写：3、内外侧边框的缩写：在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn {margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;}则可缩写为：.btn {Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;}⽽如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn {margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}缩写为：.btn {margin:10px 5px;}⽽当上下左右四个边框的属性值都相同时，则可以直接缩写成⼀个，如：.btn {margin-top:10px;margin-right:10px;margin-bottom:10px；margin-left:10px;}缩写为：.btn{margin:10px;}4、颜⾊值的缩写：当RGB三个颜⾊值数值相同时，可缩写颜⾊值代码。如：.menu { color:#ff3333;}可缩写为:.menu {color:#f33;}5.7 CSS各浏览器解决不兼容问题因为不同浏览器对W3C标准的⽀持不⼀样，各个浏览器对于页⾯的解释呈视也不尽相同，⽐如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利⽤css 的hack来进⾏调整，当然在没有必要的情况下，最好不要写hack来进⾏调整，避免因为hack⽽导致页⾯出现问题。

1、 IE6、IE7、Firefox之间的兼容写法： 写法⼀：

IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

根据上述表达，同⼀类/ID下的CSS 　hack可写为：

.searchInput {

background-color:#333;/*三者皆可*/

*background-color:#666　!important; /*仅IE7*/

*background-color:#999; /*仅IE6及IE6以下*/

}

⼀般三者的书写顺序为：FF、IE7、IE6.

写法⼆：

IE6可识别“_”，⽽IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.searchInput {

background-color:#333;/*通⽤*/

_background-color:#666;/*仅IE6可识别*/

} 写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不⽀持。

.searchInput {background-color:#333;}

*html .searchInput {background-color:#666;}/*仅IE6*/

*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第⼆句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px !important;} /*FF的专⽤*/

select:empty {font:12px !important;} /*safari可见*/

IE6可识别：

这⾥主要是通过CSS注释分开⼀个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：

<!–[if IE]> Only IE<![end if]–>

只有IE5.0可以识别:

<!–[if IE 5.0]> Only IE 5.0 <![end if]–>

IE5.0包换IE5.5都可以识别: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

仅IE6可识别:

<!–[if lt IE 6]> Only IE 6- <![end if]–>

IE6以及IE6以下的IE5.x都可识别:

<!–[if gte IE 6]> Only IE 6/+ <![end if]–>

仅IE7可识别:

<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、清除浮动：

在Firefox中，当⼦级都为浮动时，那么⽗级的⾼度就⽆法完全的包住整个⼦级，那么这时⽤这个清除浮动的HACK来对⽗级做⼀次定义，那么就可以解决这个问题。

select:after {

content:”.”;

display:block;

height:0;

clear:both; visibility:hidden;

}

其他规范：

js的命名原则以功能的英语单词为名。例如：⼴告条的js⽂件名为：js.

所有的CSS的尽量采⽤外部调⽤.

所有的javascript脚本尽量采取外部调⽤.

Web 页⾯编码⼀律统⼀⽤UTF-8编码：UTF-8是世界性通⽤代码，也完美的⽀持中⽂编码，如果我们做的⽹站能让国外⽤户正常的访问，就最好⽤UTF-8。

字体符号⽤像素px来定义，px使⽤中⽂宋体12px 和14px⿊体

字体采⽤：Arial, Helvetica, sans-serif,宋体。

所有连接使⽤相对路径/images/，切记不可使⽤绝对路径。如：../images/

所有⽂件，⽬录，图⽚全部以⼩写字母命名，禁⽌⽤中⽂命名。

清理⽆效的链接和图⽚

2023年6月21日发(作者：)

Web命名规范HTML编码规范（⼀）命名规则： 头：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

web前端命名规范⼀、规范⽬的1.1 概述为提⾼团队协作效率, 便于后台⼈员添加功能及前端后期优化维护, 输出⾼质量的⽂档, 特制订此⽂档. 本规范⽂档⼀经确认, 前端开发⼈员必须按本⽂档规范进⾏前台页⾯开发. 本⽂档如有不对或者不合适的地⽅请及时提出, 经讨论决定后可以更改此⽂档.⼆、⽂件规范2.1 ⽂件命名规则⽂件名称统⼀⽤⼩写的英⽂字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想⼀是使得你⾃⼰和⼯作组的每⼀个成员能够⽅便的理解每⼀个⽂件的意义，⼆是当我们在⽂件夹中使⽤“按名称排例”的命令时，同⼀种⼤类的⽂件能够排列在⼀起，以便我们查找、修改、替换、计算负载量等等操作。a. HTML的命名原则引⽂件统⼀使⽤ ⽂件名（⼩写）各⼦页命名的原则⾸先应该以栏⽬名的英语翻译取单⼀单词为名称。例如：关于我们 aboutus信息反馈 feedback产 品 product如果栏⽬名称多⽽复杂并不好以英⽂单词命名，则统⼀使⽤该栏⽬名称拼⾳或拼⾳的⾸字母表⽰；每⼀个⽬录中应该包含⼀个缺省的html ⽂件，⽂件名统⼀⽤ ；b. 图⽚的命名原则图⽚的名称分为头尾两部分，⽤下划线隔开，头部分表⽰此图⽚的⼤类性质例如：⼴告、标志、菜单、按钮等等。放置在页⾯顶部的⼴告、装饰图案等长⽅形的图⽚取名： banner标志性的图⽚取名为： logo在页⾯上位置不固定并且带有链接的⼩图⽚我们取名为 button在页⾯上某⼀个位置连续出现，性质相同的链接栏⽬的图⽚我们取名： menu装饰⽤的照⽚我们取名： pic不带链接表⽰标题的图⽚我们取名： title范例：banner_ banner_ menu_ menu_ title_ logo_ logo_

pic_⿏标感应效果图⽚命名规范为”图⽚名+_+on/off”。例如：menu1_ menu1_. javascript的命名原则c. javascript的命名原则例如：⼴告条的javascript⽂件名为 弹出窗⼝的javascript⽂件名为 . 动态语⾔⽂件命名原则以性质_描述，描述可以有多个单词，⽤“_”隔开，性质⼀般是该页⾯得概要。范例：register_ register_ topic_2.2 ⽂件存放位置规范_Root

cn 存放中⽂HTML⽂件en 存放英⽂HTML⽂件flash 存放Flash⽂件images 存放图⽚⽂件imagestudio 存放PSD源⽂件flashstudio 存放flash源⽂件inc 存放include⽂件library 存放DW库⽂件media 存放多媒体⽂件project 存放⼯程项⽬资料temp 存放客户原始资料js 存放JavaScript脚本css 存放CSS⽂件2.3 CSS 书写规范基本原则：CSS样式可细分为3类：⾃定义样式、重新定义HTML样式、链接状态样式。1. 样式为设计师⾃定义的新 CSS 样式，影响被使⽤本样式的区域，⽤于完成⽹页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”⽂字样式样式名“.no”+“字号”+“⾏距”+“颜⾊缩写”例：“ .no12 ” 、“ .no12-24 ”2. 义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，⽤于统⼀⽹页中某⼀标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }3. 态样式为设计师对链接不同状态设定特殊样式，影响被使⽤本样式区域中的链接。该样式写法有2种： :link nav.a:link 第⼀种只能修饰<a>标签中；第⼆种可以修饰所有包含有<a>标签的其他标签。页⾯内的样式加载必须⽤链接⽅式<link rel=”stylesheet” type=”text/css” href=”style/”>注意细则：1. 协作开发及分⼯: i会根据各个模块, 同时根据页⾯相似程序, 事先写好⼤体框架⽂件, 分配给前端⼈员实现内部结构&表现&⾏为; 共⽤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(层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>定义 li{position:relative} 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;} , ⽂件中我会初始化表格样式)12. 杜绝使⽤<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;13. ⽤png图⽚做图⽚时, 要求图⽚格式为png-8格式,若png-8实在影响图⽚质量或其中有半透明效果, 请为ie6单独定义背景:background:none;_filter:progid:mageLoader(sizingMethod=crop, src=’img/’);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⼦菜单：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 “5B8B4F53″,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 两种字体。2.4 html 书写规范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@”>d) ⽹站简介 <META NAME=”DESCRIPTION” CONTENT=”xxxxxxxxxxxxxxxxxxxxxxxxxx”>e) 搜索关键字 <META NAME=”keywords” CONTENT=”xxxx,xxxx,xxx,xxxxx,xxxx,”>f) ⽹页的css规范 <LINK href=”../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：//”> 5指时间停留5秒e) ⽹页搜索机器⼈向导。⽤来告诉搜索机器⼈哪些页⾯需要索引，哪些页⾯不需要索引。<META NAME=”robots” CONTENT=”none”>CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。f) 收藏夹图标 <link rel = “Shortcut Icon” href=””>g) 所有的javascript的调⽤尽量采取外部调⽤.<SCRIPT LANGUAGE=”JavaScript” SRC=”script/”></SCRIPT>h) 附<body>标签：<body>标签不属于head区，这⾥强调⼀下，为了保证浏览器的兼容性，必须设置页⾯背景<body bgcolor=”#FFFFFF”>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> 结束标记 。3. ⽹页制作细节 —- 链接1. ⽹站中的链接路径全部采⽤相对路径，⼀般链接到某⼀⽬录下的缺省⽂件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/”> ⽽应该这样：<a href=”aboutus/”>，所有内页指向⾸页的链接写成<a href=”/”>2. 在浏览器⾥，当我们点击空链接时，它会⾃动将当前页⾯重置到⾸端，从⽽影响⽤户正常的阅读内容，我们⽤代码“javascript:void(null)”代替原来的“#”标记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/”></td>⽽应该是这样的：<td><img src=”../images/”></td>这是因为浏览器认为换⾏相当于⼀个半⾓空格，以上不规范的写法相当于⽆意中增加⼀个半⾓空格，如果确实有必要增加⼀个半⾓空格，也应该这样写：<td><img src=”../images/”> </td>⼀个⽹页要尽量避免⽤整个⼀张⼤表格，所有的内容都嵌套在这个⼤表格之内，因为浏览器在解释页⾯的元素时，是以表格为单位逐⼀显⽰，如果⼀张⽹页是嵌套在⼀个⼤表格之内，那么很可能造成的后果就是，当浏览者敲⼊⽹址，他要先⾯对⼀⽚空⽩很长时间，然后所有的⽹页内容同时出现。如果必须这样做，请使⽤ <tbody>标记，以便能够使这个⼤表格分块显⽰5. ⽹页制作细节 —- 下载速度⾸页Flash ⽹页⼤⼩应限定在 200K 以下，尽可能的使⽤⽮量图形和Action来减⼩动画⼤⼩。⾮⾸页静态页⾯含图⽚⼤⼩应限定在 70K 左右，尽可能的使⽤背景颜⾊替换⼤块同⾊图⽚。6. ⽹页制作细节 —- includeasp标准写法 <!–#include file=”inc/index_” –>jsp 标准写法 <%@ include file=”../inc/index_top..jsp” %>7. ⽹页制作细节 —- Alt和Title都是提⽰性语⾔标签，请注意它们之间的区别。在我们浏览⽹页时，当⿏标停留在图⽚对象或⽂字链接上时，在⿏标的右下⾓有时会出现⼀个提⽰信息框。对⽬标进⾏⼀定的注释说明。在⼀些场合，它的作⽤是很重要的。alt ⽤来给图⽚来提⽰的。Title⽤来给链接⽂字或普通⽂字提⽰的。⽤法如下：<p Title=”给链接⽂字提⽰”>⽂字</p><a href=”#” Title=”给链接⽂字提⽰”>⽂字</a><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⽹页s = -sAbsolute = Now() – ontrol = “no-cache”9. ⽹页制作细节 —- 浏览器兼容性创建站点时，应该明⽩访问者可能使⽤各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最⼤的浏览器兼容性。⽬前使⽤的 Web 浏览器有⼆⼗多种，⼤多数已发⾏了多个版本。即使您只针对使⽤ Netscape Navigator 和 Microsoft InternetExplorer 的⼤多数 Web ⽤户，但您应明确并不是每个⼈都在使⽤这两种浏览器的最新版本。您的站点越复杂（在布局、动画、多媒体内容和交互⽅⾯），跨浏览器兼容的可能性就越⼩。例如，并⾮所有的浏览器都可以运⾏JavaScript。不使⽤特殊字符的纯⽂本页⾯或许能够在任何浏览器中正确显⽰，但⽐起有效地使⽤图形、布局和交互的页⾯，这样的页⾯在美感上可能要差得多。所以，应尽量在最佳效果设计和最⼤浏览器兼容性设计之间取得平衡。所有的HTML 标签的属性都要⽤单引号或者双引号括起，即我们应该写 <ahref=”url”> ⽽不 是 <a href=url>.10. 图⽚处理细节 —- banner全尺⼨banner为468X60px，半尺⼨banner为234X60px，⼩banner为88X31px。另外120X90，120X60也是⼩图标的标准尺⼨。全尺⼨banner不超过14K。普遍的banner尺⼨760X100，750X120，468X60，468X95，728X90，585X140次级页的pip尺⼨360X300，336X280游标:100X100或120X12011. 图⽚处理细节 —- LOGO的国际标准规范为了便于INTERNET上信息的传播，⼀个统⼀的国际标准是需要的。实际上已经有了这样的⼀整套标准。其中关于⽹站的LOGO，⽬前有三种规格：88*31 这是互联⽹上最普遍的LOGO规格。120*60 这种规格⽤于⼀般⼤⼩的LOGO。120*90 这种规格⽤于⼤型LOGO。12. 图⽚处理细节 —- 页⾯修饰图⽚处理图⽚经过优化以加快下载的速度,有较佳的视觉空间效果，⽤图要与页⾯风格、页⾯内容相符；制作精美，细节处理得当。2.5 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, 注重性能.2.6 图⽚规范1. 所有页⾯元素类图⽚均放⼊img⽂件夹, 测试⽤图⽚放于img/demoimg⽂件夹;2. 图⽚格式仅限于gif || png || jpg;3. 命名全部⽤⼩写英⽂字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量⽤易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, ⽤下划线隔开, ⽐如ad_ || btn_;4. 在保证视觉效果的情况下选择最⼩的图⽚格式与图⽚质量, 以减少加载时间;5. 尽量避免使⽤半透明的png图⽚(若使⽤, 请参考css规范相关说明);6. 运⽤css sprite技术集中⼩的背景图或图标, 减⼩页⾯http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存⾄img⽬录下.2.7 注释规范1. html注释: 注释格式 <!–这⼉是注释–>, ‘–‘只能在注释的始末位置,不可置⼊注释⽂字区域;2. css注释: 注释格式 /*这⼉是注释*/;3. JavaScript注释, 单⾏注释使⽤’//这⼉是单⾏注释’ ,多⾏注释使⽤ /* 这⼉有多⾏注释 */;2.8 浏览器兼容性 CSS hack⼀、标识区别：区别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等其他浏览器中显⽰红⾊。IE6不认 !important,也不认 *+html.所以 IE6只能是 7认 !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;)放到另⼀个⽂件中,再⽤下⾯的⽅法导⼊.========================================================================================Web ⽬录结构规范：⽬录建⽴的原则：以最少的层次提供最清晰简便的访问结构。⽬录的命名以⼩写英⽂字母，下划线组成。⽬录的命名以⼩写英⽂字母，下划线组成。根⽬录⼀般只存放htm以及其他必须的系统⽂件根⽬录下的images⽤于存放各页⾯都要使⽤的公⽤图⽚。所有JS等脚本存放在根⽬录下的scripts或js⽬录所有CSS⽂件存放在根⽬录下style或css⽬录多语⾔版本存放于独⽴的⽬录。例如：简体中⽂存放在cn⽬录下，繁体中⽂存放在 tw⽬录下，英⽂存放在en⽬录下等。所有flash, avi, ram, quicktime 等多媒体⽂件存放在根⽬录下的media⽬录下。Web UI设计命名规范：2.1 Web 界⾯设计最佳尺⼨960⽹格系统——web界⾯设计最佳尺⼨⽬前绝⼤多数显⽰器都⽀持 1024 x 768 及其以上分辨率。为了有效的利⽤屏幕宽度同时保证栅格的灵活度，可以看出960是⾮常合适的。这样，在⽬前主流显⽰器下，960就成为⽹页栅格系统中的最佳宽度了。2.2 ⽹站设计及基本框架结构Container“container“ 就是将页⾯中的所有元素包在⼀起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.Header“header” 是⽹站页⾯的头部区域，⼀般来讲，它包含⽹站的logo和⼀些其他元素。这部分还可以命名为:“page-header” (或pageHeader).Navbar“navbar“等同于横向的导航栏，是最典型的⽹页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.Menu“Menu”区域包含⼀般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.Main“Main”是⽹站的主要区域，如果是博客的话它将包含的⽇志。这部分还可以命名为: “content“, “main-content”(或“mainContent”)。SidebarSidebar“Sidebar” 部分可以包含⽹站的次要内容，⽐如最近更新内容列表、关于⽹站的介绍或⼴告元素等…这部分还可以命名为: “subNav “,“side-panel“, “secondary-content“.Footer“Footer”包含⽹站的⼀些附加信息，这部分还可以命名为: “copyright“2.3命名规则注意⼏点尽量考虑为元素命名其本⾝的作⽤或”⽤意”，达到语义化。不要使⽤表⾯形式的命名.如:red/left/big等。组合命名规则:[元素类型]-[元素作⽤/内容]如:搜索按钮: btn-search、登录表单:form-login、新闻列表:list-news。涉及到交互⾏为的元素命名:凡涉及交互⾏为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:⿏标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited2.4常⽤命名汇总名称 命名规范页头 header、top登录条 loginbar标志 logo侧栏 sidebar⼴告条 banner导航: nav⼦导航: subNav菜单: menu⼦菜单: subMenu下拉菜单: dropMenu⼯具条: toolbar⼯具条: toolbar表单: form栏⽬: column箭头: arrow搜索: search搜索按钮: btn-search滚动条: scroll内容: content标签页: tab⽂章列表: list⼩技巧: tips栏⽬标题: title链接: links页脚: footer、end服务: service热点: hot新闻: news下载: download注册: Register 、reg状态: status按钮: btn上传: upload登陆: login投票: vote合作伙伴: partner版权: copyright⽹站地图: sitemapWeb UI图⽚命名规范：图⽚名称分为头尾两两部分，⽤下划线隔开。头部分表⽰此图⽚的⼤类性质。例如： 放置在页⾯顶部的⼴告、装饰图案等长⽅形的图⽚我们取名：banner ；标志性的图⽚我们取名为：logo ；在页⾯上位置不固定并且带有链接的⼩图⽚我们取名为button ；在页⾯上做栏⽬链接的图⽚我们取名：menu ；不带链接表⽰标题的图⽚我们取名：title ；装饰⽤的照⽚我们取名：pic ；依照此原则类推。尾部分⽤来表⽰图⽚的具体含义，⽤英⽂字母表⽰。例如：gif logo_ button_ menu_ title_

pic_有onmouse效果的图⽚，两张分别在原有⽂件名后加”_on”和”_off”命名。多语⾔的图⽚应放到多语⾔⽬录下Web基本框架布局规范：Web基本框架布局规范 常⽤到的Div和Table 两种采⽤CSS+DIV对⽹站重构⽇趋被⼤家重视起来，有以下优势：1：表现和内容相分离 将设计部分剥离出来放在⼀个独⽴样式⽂件中，HTML⽂件中只存放⽂本信息。2：提⾼搜索引擎对⽹页的索引效率

⽤只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的⽹页内容，并可能给你⼀个较⾼的评价。3：提⾼页⾯浏览速度

对于同⼀个页⾯视觉效果，采⽤CSS+DIV重构的页⾯容量要⽐TABLE编码的页⾯⽂件容量⼩得多，前者⼀般只有后者的1/2⼤⼩。还有因为<table>标签是要等</table>下载好以后才可以显⽰的，所以整个⽹页是⼀下⼦跳出来的，这样让⼈感觉起来显⽰速度⾮常的慢。⽽使⽤css+div,<div> 标签不⽤等</div>下载好就可以显⽰⾥⾯的内容的,所以让⼈感觉打开⽹页的速度⾮常之快。4：易于维护和改版

你只要简单的修改⼏个CSS⽂件就可以重新设计整个⽹站的页⾯。从以上的描述来看，采⽤CSS+DIV对⽹站重构可以⼤⼤提升⽹站⽤户与搜索引擎的友好度。CSS+DIV所以成为⽬前⽹页布局主流。Table最⼤缺点是代码臃肿，你⾄少需要写下 <table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table 的各种标签中还包含了复杂的属性定义，⽽ Div 只需<div>⼀个标签。页⾯渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。可访问性差：屏幕朗读软件和盲⽂浏览器⽆法很好地理解 Table 中的内容。不够语义（Semantic）：我们需要语义的 Web。不够语义（Semantic）：我们需要语义的 Web。⼀般table 只⽤做于数据处理。CSS样式书写规范及优化：5.1．CSS⽂件命名规范全局样式：；框架布局：；字体样式：；链接样式：；打印样式：；5.2．常⽤类/ID命名规范页　眉：header内　容：content容　器：container页　脚：footer注　释：note……（更多参照2.4常⽤命名汇总）1、常⽤类的命名规则：应尽量以常见英⽂单词为准，做到通俗易懂，并在适当的地⽅加以注释。对于⼆级类/ID命名，则采⽤组合书写的模式，后⼀个单词的⾸字母应⼤写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……2、辅助图⽚⽤背影图处理：这⾥的”辅助图⽚”是指那些不是作为页⾯要表达的内容的⼀部分，⽽仅仅⽤于修饰、间隔、提醒的图⽚。将其做背影图处理，可以在不改动页⾯的情况下通过CSS样式来进⾏改动，如：#logo {background:url(images/) #FEFEFE no-repeat right bottom;}5.3结构与样式分离：在页⾯⾥只写⼊⽂档的结构，⽽将样式写于css⽂件中，通过外部调⽤CSS样式表来实现结构与样式的分离。5.4、⽂档的结构化书写：页⾯CSS⽂档都应采⽤结构化的书写⽅式，逻辑清晰易于阅读。如：<div id=”mainMenu”><ul><li><a href=”#” >⾸页</a></li><li><a href=”#” >介绍</a></li><li><a href=”#” >服务</a></li>title">li></ul></div>/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/5.5注释书写规范1、⾏间注释：直接写于属性值后⾯，如：.search{border:1px solid #fff;/*定义搜索输⼊框边框*/background:url(../images/) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地⽅加⼊注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/) no-repeat #333;}/*=====搜索条结束=====*/5.6 CSS样式属性代码优化缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚⾄是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类⽽有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：#mainMenu {background:url(../images/);border:1px solid #333;width:100%;height:30px;overflow:hidden;}#subMenu {background:url(../images/);border:1px solid #333;width:100%;height:20px;overflow:hidden;}两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu {background:url(../images/);border:1px solid #333;width:100%;overflow:hidden;}#mainMenu {height:30px;}#subMenu {height:20px;}2、同⼀属性的缩写：同⼀属性根据它的属性值也可以进⾏简写，如：.search {background-color:#333;background-image:url(../images/);background-repeat: no-repeat;background-position:50% 50%;}.search {background:#333 url(../images/) no-repeat 50% 50%;}3、内外侧边框的缩写：3、内外侧边框的缩写：在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn {margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;}则可缩写为：.btn {Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;}⽽如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn {margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}缩写为：.btn {margin:10px 5px;}⽽当上下左右四个边框的属性值都相同时，则可以直接缩写成⼀个，如：.btn {margin-top:10px;margin-right:10px;margin-bottom:10px；margin-left:10px;}缩写为：.btn{margin:10px;}4、颜⾊值的缩写：当RGB三个颜⾊值数值相同时，可缩写颜⾊值代码。如：.menu { color:#ff3333;}可缩写为:.menu {color:#f33;}5.7 CSS各浏览器解决不兼容问题因为不同浏览器对W3C标准的⽀持不⼀样，各个浏览器对于页⾯的解释呈视也不尽相同，⽐如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利⽤css 的hack来进⾏调整，当然在没有必要的情况下，最好不要写hack来进⾏调整，避免因为hack⽽导致页⾯出现问题。

1、 IE6、IE7、Firefox之间的兼容写法： 写法⼀：

IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

根据上述表达，同⼀类/ID下的CSS 　hack可写为：

.searchInput {

background-color:#333;/*三者皆可*/

*background-color:#666　!important; /*仅IE7*/

*background-color:#999; /*仅IE6及IE6以下*/

}

⼀般三者的书写顺序为：FF、IE7、IE6.

写法⼆：

IE6可识别“_”，⽽IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.searchInput {

background-color:#333;/*通⽤*/

_background-color:#666;/*仅IE6可识别*/

} 写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不⽀持。

.searchInput {background-color:#333;}

*html .searchInput {background-color:#666;}/*仅IE6*/

*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第⼆句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px !important;} /*FF的专⽤*/

select:empty {font:12px !important;} /*safari可见*/

IE6可识别：

这⾥主要是通过CSS注释分开⼀个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：

<!–[if IE]> Only IE<![end if]–>

只有IE5.0可以识别:

<!–[if IE 5.0]> Only IE 5.0 <![end if]–>

IE5.0包换IE5.5都可以识别: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

仅IE6可识别:

<!–[if lt IE 6]> Only IE 6- <![end if]–>

IE6以及IE6以下的IE5.x都可识别:

<!–[if gte IE 6]> Only IE 6/+ <![end if]–>

仅IE7可识别:

<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、清除浮动：

在Firefox中，当⼦级都为浮动时，那么⽗级的⾼度就⽆法完全的包住整个⼦级，那么这时⽤这个清除浮动的HACK来对⽗级做⼀次定义，那么就可以解决这个问题。

select:after {

content:”.”;

display:block;

height:0;

clear:both; visibility:hidden;

}

其他规范：

js的命名原则以功能的英语单词为名。例如：⼴告条的js⽂件名为：js.

所有的CSS的尽量采⽤外部调⽤.

所有的javascript脚本尽量采取外部调⽤.

Web 页⾯编码⼀律统⼀⽤UTF-8编码：UTF-8是世界性通⽤代码，也完美的⽀持中⽂编码，如果我们做的⽹站能让国外⽤户正常的访问，就最好⽤UTF-8。

字体符号⽤像素px来定义，px使⽤中⽂宋体12px 和14px⿊体

字体采⽤：Arial, Helvetica, sans-serif,宋体。

所有连接使⽤相对路径/images/，切记不可使⽤绝对路径。如：../images/

所有⽂件，⽬录，图⽚全部以⼩写字母命名，禁⽌⽤中⽂命名。

清理⽆效的链接和图⽚