前端技术规范总结.docVIP

第一部分：目录、文件、CSS命名方式 文件夹与文件名称、CSS样式命名、程序中的一些控件等等： 名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作 。例：images(图形文件)，flash（Flash文件等。例：images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式)等…… 常用CSS名： 页面外围控制整体布局宽度：wrapper　　头：header　　内容：content/container　　页面主体：main　　侧栏：sidebar　　尾：footer等…… 第二部分：结构（XHTML） 网站的前端结构与表现分离，达到95%以上。正式上线后的网页代码结构要清晰、明朗，容易阅读，布局与结构的镶套尽量控制在4-5层以内，严格遵循w3c的xhtml1.0 Transtitonal。并遵循以下原则： DDT类型：XHTML 1.0 Transitional ：utf-8 元标记必须项：meta name=keywords content= / 该页面的关键词概况meta name=description content= / 该页面的meta name=robots content=all /具体内容根据SEO要求设置Html代码中的所有标签遵循XHTML 1.0的书写规范，包括： 标签全部使用小写； 标签全部闭合； 所有属性必须有值而且用双引号； 把所有和特殊符号用编码表示； 所有的标签必须合理嵌套； 注释中不要使用 -------- 如这样写是错误的：!-- 注释------------注释 --； 标签有语意： 布局排版用div； 标题用h1——h6； 段落用p；无序列表用ul，有序列表用ol； 放弃不被IE支持的标签，如abbr；放弃不被w3c推荐的html4标签，如：centerfontb等等； title的合理应用：a标签必须用title；img必须赋予alt值；div可以用title说明； 根据网站的结构，对HTML进行模块化，比如：信息页面的头部尾部的通用文件，功能页面的头部尾部的通用文件，分页文件，可以模块化的信息列表模块。 JS：页面中的JS处理成外部文件，不能在页面中使用大量JS脚本，同时注意js文件调用的位置，比如统计代码跟页面的加载没有任何关系，必须放在页面最底部； 尽量不要使用框架； 为表单添加lable标签； 所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的图片采用gif, jpg压缩格式，以减小页面下载数据量，img标记要有width,height属性 CSS文件视重要程度添加注释，方法为 /* 注释 */ ； CSS选择器命名书写规范：#idname , .classname { width: %或px\em; height: %或px\em; margin: border: padding: ---------------------------------------------------------容器长宽确定 background: #fff url() repeat left bottom fixed 1px 2px; color:  font-family: “宋体”, Arial, Helvetica,sans-serif; font-size:  line-height: ---------------------------------------------------------容器内容格式 display: visibility: overflow: position: top: right: bottom: left: float: clear: ---------------------------------------------------------容器布局 }每一个属性结尾都必须写分号，其中有的值如果不需要，可以不写，大体上是这样的顺序，也符合思考的顺序。 有几点注意事项： font-family:必须以sans-serif字体做结尾； 减少样式数量，尽量重复使用； 必须清除f