Html5css3Web前端开发规范.docxVIP

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属性，即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.书写链接地址时,必须避免重定向，例如：即须在URL地址后面加上“/”；9.能以背景形式呈现的图片,尽量写入css样式中;10.重要图片必须加上alt属性;给重要的元素和截断的元素加上title;11.给区块代码及重要功能(比如循环)加上注释,方便后台添加功能;12.书写页面过程中,请考虑向后扩展性;13.必须为大区块样式添加注释,小区块适量注释;14.代码缩进与格式:建议单行书写;书写规范参考搜狐CSS板式/upload/style/style150302.css/upload/style/layout130716.css/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页脚：foot