从Designsor哪里看到这个,感觉不错.转了过来.
HTML,CSS,Javascript开发与说明规范文档
项目中的HTML的规范说明
一,HTML部分的命名的规范
二,HTML属性介绍和常用实例
三,HTML部分标准的头部声明
四,HTML注释规则
项目中的CSS的规范说明
一,Css文件的命名和使用规则
二,CSS的书写规则
三,Css样式名命名规则
四,CSS注释规则
项目中的Javascript的规范说明
一,Javascript使用的框架
二,Jquery的使用方法
三,Javascript的注释
四,Javascript的摆放位置和顺序
五,JavaScript的变量名规则
源文链接: http://www.designsor.com/2010/02/guifan.html
项目中的HTML的规范说明
一,HTML部分的命名的规范
ID和CLASS的使用，在开发过程中会遇到JS调用ID和CSS调用ID与CLASS的地方，遇到这种情况，由于JS和CSS可能不是一个人书写或者命名的，所以在最开始的HTML书写时需要统一规范命名。
1，项目开发中统一使用class来进行样式的命名。
解释：HTML元素如果需要有样式的调用，全部统一使用class来进行挂钩。
例子：
HTML部分统一使用如下进行书写。不再使用ID属性。
<div class=’top’></div>
<div class=’left’></div>
<div class=’main’></div>
<div class=’bottom’></div>
2，项目开发中统一使用ID来进行单独元素的命名和与JS产生相应关系的命名。
解释：HTML元素如果有唯一的单独的元素，需要使用id来进行命名。（此中情况比较少，意味着希望以后所有的项目页面中尽量减少ID属性的使用），如果出现了ID就意味着此元素在此页面中属于唯一的，且有JS与之产生关联。
例子：
HTML部分：
<div class=’top’ ></div>
<div class=’ left’ id=’moveobj’></div>
<div class=’main’></div>
<div class=’bottom’></div>
JS部分：
$(“#moveobj”). animate({left:”100px”},200); //ID为moveobj的元素向左移动100PX。
3，项目开发中使用Class来统一选择多个选择器包含的元素。
解释：HTML元素中如果有多个元素需要使用JS进行统一的操作和选择，使用Class属性来进行选择。
例子：
HTML部分：
<div class=’top’ >
<div class=’topmuen’></div>
<div class=’topmuen’></div>
<div class=’topmuen’></div>
<div class=’topmuen’></div>
</div>
<div class=’ left’ id=’moveobj’></div>
<div class=’main’></div>
<div class=’bottom’></div>
JS部分：
$(“.top .topmuen”). animate({left:”100px”},200); //class为top下的所有class名为topmuen的元素向左移动100PX。
二,HTML属性介绍和常用实例
元素：ol ul dir li;
以上的元素产生列表，目录，和导航元素。不再解释，只要出现这些元素名，你在操作的就是列表，目录或导航。
元素：div;
Div元素基本上是产生布局使用，而且是大块的布局，比如上左下右的一些基本布局或者大的层面布局。属于我常用的布局元素。
元素：span;
此元素出现基本是在行内，或者div内部出现，不会单独独立出现在上层，我一般不用做布局元素，是解释修饰元素。
元素：table,tr,td,thead,tbody,tfoot;
表格元素，产生于数据相关联的布局元素。切忌以后再表格元素的命名上也只使用class来进行命名和样式的操作，请不要在table中使用id，一开始就用id优先级太高后期修改和扩展很困难。
例子：
<table class=’tableobj’>
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td class=’tablechild’>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾部标注</td>
</tr>
</tfoot>
</table>
使用JS操作：$(“.tableobj’”);
CSS操作：
.tableobj{/**/}
.tableobj thead th{/**/}
.tableobj tbody td{/**/}
统一的样式这样来写，如果局部有所不同，单独再加class进去。比如10个表格基本都一样的样式很多，只有细节地方有颜色或者宽度的不同。
.tableobj .tablechild{/*单独的局部样式*/}
其他规则依旧按照最开始的3条进行。
元素：form,input, label, textarea, fieldset, legend;
以上元素均出现在表单部分，在表单部分的布局和JS书写方面其实是比较复杂的。所以在这里依然按照全部使用class来进行布局的原则。
尤其需要注意的是input的样式使用，之前的很多按钮和输入文本input元素，在按钮的操作中都是src标示的图片地址直接产生一个按钮，道理上来说是不好的，因为如果没有了submit，那么image类型的按钮就会替代submit，在js中阻止事件冒泡就会失灵。正确的按钮书写应该如下：
提交按钮：
<input type=’submit’ class=’sub’> //此按钮会提交表单
操作按钮：
<input type=’ button’ class=’btn’> //此按钮什么也不执行，如果需要跳转页面用a标签来做，如果触发js操作加ID然后通过js进行操作。（button的应用应该就是后者）;
尽量不使用除此之外的按钮type类型。
表单：表单在布局时我可以使用的属性部分：
Class,我可能会对表单进行样式的调整为了节约HTML元素。
ID我不会对from元素进行添加，那些留给程序开发来用。其他的属性我也不会使用。
特别注意：禁止对<form></form>元素进行随意的包裹其他元素，这样会产生很多意想不到的BUG，比如页面变形或者编辑器报错，IE6下布局失效，或者表单提交不上去。
正确的方法是：使用到表单的时候只用from包裹需要操作的部分即可。不要涵盖太多，而且form元素也是一个布局元素。有自己的默认的样式，也可能有定义的全局样式。
Input中的text类型和textarea元素：
JS操作的部分使用id或者name来进行操作，样式部分使用class来操作。
个人建议，如果可以少用属性则直接使用name来操作。因为在最后加验证或者JS交互的时候，name在这2个元素中是必须的，而id不是必须的。
例子：
<input type=’text’ class=’textobj’ name=’username’>
JS操作：
$(“input[name=’username’]”);
为什么不用class？因为很可能N多text是重复一个class的，class就是可重用的不固定的，所以在js中不要轻易使用class来进行选择，name和id则肯定是唯一的。
当然也可以根据默认的value值来进行操作比如单选或者多选按钮。
JS操作：
$(“input[value=’nan’]”);
$(“input[value=’nv’]”);
三,HTML部分标准的头部声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
解释：统一使用xhtml1-strict.dtd严格的HTML书写标准，此标准最不容易变形和对未来的HTML5和CSS3留有升级余地。
HTML使用中文字符集和UTF-8编码，一期的项目应该就是了。
然后强制IE8按照IE7的浏览器兼容模式来进行解析，原因是IE8还是处于测试阶段。且这样来做可以避免在IE8下再进行兼容测试。
至于一些其他的比如"description"，"keywords"，"author"，"generator"的使用就根据需要来进行决定了。分别是网页描述，关键字，编写者，版本。
HTML部分基本结束，开发中可能还会有所补充。
四,HTML注释规则
HTML部分的注释代码示例：
<!--头部布局开始-->
<div class='top'>
</div>
<!--头部布局结束-->
项目中的CSS的规范说明
一,Css文件的命名和使用规则
packed_项目名.css //此文件为基础布局文件，根据2期项目的名字来定。
页面名缩写_ edit.css //此文件不应该经常出现，但是在程序人员自行修改时需要自己创建，单独页面局部修改也可以自己创建，根据修改的页面名来创建，方便后期统一整理或者维护。这样就可以杜绝Css行内样式在开发中的泛滥。每创建一个此文件，都要放置在统一的文件夹下，后期我会同一规整分类模块化，不可重用的就单独存留，可重用的则模块化后删除。
插件名.css //可能还会使用到一些开源JS插件，其中会包含自带的css，但是肯定不会很多。
基本上希望所有的页面，最多只能同时存在以上3个Css文件。在开发过程中也可以直接写到页面的<style></style>中加快开发速度，但是书写更改完毕后，请整理到相应的css文件中，使用外链来接入。
二,CSS的书写规则
简单的介绍一些基础知识：
#id{} //#为ID选择器
.class{} //.为class选择器
Table td tr{}//直接书写为元素选择器（不推荐使用，覆盖面太大，后期耦合性太高）
#id,#id2,#id3,#id4{} //中间,隔开，多重选择优化代码。
#id .class{}//ID下的class选择符，css的多重选择符就是这个道理了和jq的是一样的。
基本选择符就是这么几个。优先级从高到底的顺序是：行内,元素,ID,class
最后页面渲染就是根据这几个值赋给元素的综合来排序渲染的。所有有时候遇到一些css样式写了但是无效的时候，就是优先级的问题没有写好。
为了避免以上的问题，我们在最开始HTML规范部分也说了，我们全部使用优先级最低的可重用附加覆盖的class选择符，就可以大大避免了。因为全部是同级的。而且如果使用了js加载了id的css样式，id>class的优先级，就可以直接覆盖样式了。行内的优先级最高，所以应该禁止使用。
三,Css样式名命名规则
内容：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
导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
以上是最基本的中英常用翻译，但是根据具体的项目不同的需要，有些专业术语简单的会用单词拼写代替有些太复杂的可能会使用汉语拼音的缩写代替，以能看懂为准，第一个字母大写。
四,CSS注释规则
.Lhzf_muen{/**/}
/* End 执法联合导航部分 */
项目中的Javascript的规范说明
一,Javascript使用的框架
所以在要使用JS的页面需要先引入jquery的库文件：
<script src="style/jquery-1.3.2.min.js" type="text/javascript"></script>
之后就可以单独编写页面中的js代码了。
Jquery的CHM手册希望各位开发人员都能够人手一份，里面的功能很强大，尤其是选择器方面和表单处理方面，还有ajax方面。在动画和特效的应用也比较成熟。没有的可以管有的借一下。
二,Jquery的使用方法
使用方法就不多说了，至少可以提高代码的书写效率和可读性。也节约了代码量。在开发中也可以是用javascript进行脚本书写，两者不冲突也可以结合应用的很好。针对一个表单我写了一个简单的验证和绑定的示例代码：
HTML:
<form action="#" method="post" id="form1">
用户名：<input type="text" value="" name="username" />
密码：<input type="password" value="" name="userpwd" />
<input type="submit"/>
</form>
JS：
$(function(){
//这里是绑定整个DOM结构，一旦页面加载完成则执行下面的代码：
$("#form1").submit(function(){
var username=$("input[name='username']").val();
var userpwd=$("input[name='userpwd']").val();
if(username=="" || userpwd=="") return false;
});
//绑定一个验证表单是否为空，有一个为空则不提交，都填写上了则提交
});
三,Javascript的注释
针对每个模块在下方进行注释；
四,Javascript的摆放位置和顺序
大量单独的JS放置在页面尾部，单页面存在。
多条引用的JS外部文件，分别放置在相应的HTML结构部分的下方。方便查找。
五,JavaScript的变量名规则
和CSS的同理，简单的就用英文，复杂的用英文缩写或者汉语拼音首字缩写。支持_符号。JS变量字母区分大小写。所以首字母统一为小写。