资源预览内容
第1页 / 共8页
第2页 / 共8页
第3页 / 共8页
第4页 / 共8页
第5页 / 共8页
第6页 / 共8页
第7页 / 共8页
第8页 / 共8页
亲,该文档总共8页全部预览完了,如果喜欢就下载吧!
资源描述
Web前端开发规范文件规范 为输出高质量的Web页面,提高团队协作效率,便于后台人员添加功能及前端后期优化与维护,如有错误及时提出更改。1、html,css,js,images,fonts等文件目录组织如下如示: xxx.html css/ index.css header.css footer.css 2016/ content.css nav.css js/ xxx.js xxx_min-tab.js 2016/ images/ index_head.jpg index_logo.gif 2016 xxx.jpg xxx.png fonts/ xxx.ttf文件命名原则调整为所有字母小写,单词之间使用破折号(-)相连,压缩后的文件在原文件名(除扩展名)后添加.min。参考bootstrap文件命名:bootstrap-theme.css, bootstrap-theme.min.css。常用目录名:data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式);引入 CSS 和 JavaScript 文件 /* . */class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。 Example link编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现。 参考如下:其他要求l css文件外链至之间,js文件置于之前。l 语义化HTML,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中避免嵌套块级元素。l 书写链接地址时,建议在URL地址后面加上/,例如:href=http:/proin.cc/。l 在页面中不能使用style属性,即;所有样式必须写在css文件中。l 必须为含有描述性表单元素(input,textarea)添加label,如:姓名:须写成:姓名:l 能以背景形式呈现的图片,尽量写入css样式中。l 给重要的元素和截断的元素加上title。l 建议给区块代码及重要功能(比如循环)加上注释,方便后台添加功能。l 不是标签一部分的特殊符号都用编码表示,出现在内容中的特殊符号都需要用编码形式表现出来,如:>,&):&,:",尽量使用 代替空格。l 图片标签必须要有alt属性,如只起修饰作用而没有任何意义的图片可设置alt属性值为空。如:。CSS规范1.css文件命名:英文命名,后缀.css.共用首页单独定义.css部分,其他页面依实际模块需求命名.;2.Js文件命名:英文命名,后缀.js.共用.js,其他依实际模块需求命名.3.文档类型声明及编码:统一为html5声明类型;编码统一为,书写时实现层次分明的缩进;4.非特殊情况下样式文件必须外链至.之间;非特殊情况下JavaScript文件必须外链至页面底部;5. 引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js;引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;6. 语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;7尽可能减少div嵌套,如欢迎访问XXX,您的用户名是用户名完全可以用以下代码替代:欢迎访问XXX,您的用户名是用户名;8.书写链接地址时,必须避免重定向,例如:http:/www.qianxiuwang.com即须在URL地址后面加上“/”;9.能以背景形式呈现的图片,尽量写入css样式中;10.重要图片必须加上alt属性;给重要的元素和截断的元素加上title;11.给区块代码及重要功能(比如循环)加上注释,方便后台添加功能;12.书写页面过程中,请考虑向后扩展性;13.必须为大区块样式添加注释,小区块适量注释;14.代码缩进与格式:建议单行书写;书写规范参考搜狐CSS板式http:/www.sohu.com/upload/style/style150302.csshttp:/www.sohu.com/upload/style/layout130716.csshttp:/www.sohu.com/upload/style/global130716.css例如css规范news (性质)news_title (性质_描素)news_title_top (性质_描素_位置)news_title_top_01 (性质_描素_位置_数量)news_title_top_a_01 (性质_描素_位置_分类_数量)news_title_top_b_01 (性质_描素_位置_分类_数量)例如html规范 关注我们 注释部分Html注释 注释内容区css注释中文命名注释/*-导航栏-*/JavaScript注释单行注释使用/这儿是单行注释,多行注释使用/*这儿有多行注释*/;图片规范1、 图片格式仅限于gif、png、jpg,图标、按钮等采用透明背景为主;除需要透明的图片使用png、gif外其他图片都采用jpg格式。为尽量控制文件大小,大尺寸图片应避免使用png,尽量使用jpg,运用csssprite技术集中小的背景图或图标,减小页面http请求。2、命名全部使小写英文字母、数字和破折号(-)的组合,其中不得包含汉字、空格和特殊字符。尽量使用易懂的词汇,便于其他人理解。如:ad-left.gif、btn-submit.jpg;3、 在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间。尽量减少使用半透明的png图片。命名规范头: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
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号