Html5css3Web前端开发规范.docx

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 文件link rel=stylesheet href=code-guide.cssstyle /* ... *//style!-- JavaScript --script src=code-guide.js/scriptclass 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。a class=... id=... data-modal=toggle href=# Example link/ainput class=form-control type=textimg src=... alt=...编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。span class=avatar img src=.../span参考如下：img class=avatar src=...其他要求css文件外链至head/head之间，js文件置于/body之前。语义化HTML，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表用ul，内联元素中避免嵌套块级元素。书写链接地址时，建议在URL地址后面加上/，例如：href=http://proin.cc/。在页面中不能使用style属性，即style=…；所有样式必须写在css文件中。必须为含有描述性表单元素(input，textarea)添加label，如：p姓名:inputtype=textid=namename=name//p须写成：plabelfor=name姓名：/labelinputtype=textid=name//p能以背景形式呈现的图片，尽量写入css样式中。给重要的元素和截断的元素加上title。建议给区块代码及重要功能（比如循环）加上注释，方便后台添加功能。不是标签一部分的特殊符号都用编码表示，出现在内容中的特殊符号都需要用编码形式表现出来，如：：lt，：gt，）：amp，：quot;，尽量使用nbsp;代替空格。图片标签必须要有alt属性，如只起修饰作用而没有任何意义的图片可设置alt属性值为空。如：imgsrc=a.gifalt=。CSS规范1.?css文件命名:?英文命名,?后缀.css.?共用首页单独定义.css部分，?其他页面依实际模块需求命名.;2.?Js文件命名:?英文命名,?后缀.js.?共用.js,?其他依实际模块需求命名.3.?文档类型声明及编码:?统一为html5声明类型!DOCTYPE?html;?编码统一为meta charset=utf-8?/,?书写时实现层次分明的缩进;4.?非特殊情况下样式文件必须外链至head.../head之间;非特殊情况下JavaScript文件必须外链至页面底部;?引入JS库文件,?文件名须包含库名称及版本号及是否为压缩版,?比如jquery-1.4.1.min.js;?引入插件,?文件名格式为库名称+插件名称,?比?如jQuery.cookie.js;?语义化html,?如?标题根据重要性用h*(同一页面只能有一个h1),?段落标记用p,?列表用ul,?内联元素中不可嵌套块级元素;7?尽可能