web前端开发规范文档

web 前端开发规范文档篇一：XXWeb 前端开发规范文档-Web 前端开发规范文档 编 写 陈 济 晗 审 核 批 准 时 间 XX 年 3 月 一、 规范目的为提高团队协作效率，便于研发人员添加功能及前端后期优化维护，输出高质量的符合 W3C 标准的页面，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可更改。 二、基本准则 符合 web 标准，语义化 html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。 三、合作建议 1在需要修改配置文件的样式修改中，研发人员要积极配合相关前端开发进行修改，页面 demo 分版本建立文件夹上传至 vs 中，便于研发人员的获取，不建议使用点对点的文件传输方式。 2不建议研发人员修改或增加样式，禁止把样式写在页面 head 中（只有某一个页面用到的样式例外） ，能用class 完成的样式就一定不写在行内。 3如果研发人员必须要修改、增加样式，必须把样式写在现有 css 文件中（除外）专为研发人员注释的区块中，并添加备注，标明修改人姓名、新增时间和解决的问题，并及时告知前端人员，将由前端人员定期整理。如在的文件末尾增加所需代码： 四、文件规范 1文件存放位置 html css js images 文件均归档至约定的目录中，参考如下： 2文件命名命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 a. html 文件命名原则 按照与交互设计稿相对应的方式为页面命名，即页面与其对应的设计稿使用同一名称。 b. css 文件命名原则 公用组件的样式文件是，因此新建的文件名不能使用common。命名尽量使用小写英文单词，推荐命名见附录1（css 文件命名） 。 c. 图片命名原则 图片的名称分为头尾两部分，用下划线“_”隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。图片格式仅限于 gif、png、jpg。 d. javascript 的命名原则 以功能模块名字为.js 文件命名，采用小写英文。一般使用短线“-”替代自然语言名称中的空格，用句点“.”分隔表示名称中的从属关系。如：“” 、 “”。 五、html 编写规范 1文档类型声明 DOCTYPE 声明必须放在每一个 XHTML 文档最顶部，在所有代码和标识之上。我们采用最简单的 html5 的文档标准。 完整代码如下： 2定义语言编码 为了被浏览器正确解释和通过 W3C 代码校验，所有的html 文档都必须声明它们所使用的编码语言，我们一般使用 utf-8（若制作多国语言页面也有可能用 Unicode、ISO-8859-1 等） 。 代码如下：3css 引入方式尽量采取 link一般在 html 的页头中用 link 方式引入 css 文件。原则上，不允许在页头直接写 style。避免使用行内样式。禁止在 CSS 中使用import。 4所有标签的元素和属性的名字都必须使用小写 为了保证书写规范和提高可读性，要求所有的标签和属性的名字都必须使用小写。例如：必须写成，“onMouseOver”也必须写成成“onmouseover” 。 5所有的属性必须用引号括起来 所有属性必须被加引号。例如： 必须写成。 6所有的标记必须正确闭合 所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个“ /“（即“空格+/” ）来关闭，如 。 7把所有 任何小于号（） ，不是标签的一部分，都必须写成”方便压缩工具“断句” 。 ? 文件内容编码均统一为 UTF-8。 ? CSS、JAVASCRIPT 中的非注释类中文字符须转换成unicode 编码使用, 以避免编码错误时乱码显示。 文件规范： ? 文件名用英文单词，多个单词用驼峰命名法。 ? 一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS 等所有命名避免以上词汇。 html 书写规范：? 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现。 ? 文档类型声明统一为 HTML5 声明类型，编码统一为UTF-8。 ? 中添加信息。/作者 ? /网页描述 ? /关键字,“， ”分隔 ? /设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅 ? /禁止浏览器从本地机的缓存中调阅页面内容 ? /用来防止别人在框架里调用你的页面 ? content=“5;URL=/跳转页面，5 指时间停留 5秒网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引 ? /content 的参数有all,none,index,noindex,follow,nofollow，默认是all ? /收藏图 标 ? must-revalidate“/网页不会被缓存 ? IE 支持通过特定标签来确定绘制当前页面所应该 采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode ，从而通知 IE 采用其所支持的最新的模式。 content=“IE=Edge“ ? ? 非特殊情况下 CSS 样式文件外链至 HEAD 之间，JAVASCRIPT 文件外链至页面底部。 ? ? ? ? ? ? ? ? src=“lib/jquery/“ ? ? 引入 JAVASCRIPT 库文件，文件名须包含库名称及版本号及 是否为压缩版。 ? 引入 JAVASCRIPT 插件, 文件名格式为库名称+.+插件名称。 ? ? HTML 属性应当按照以下给出的顺序依次排列，来确保代码 的易读性。class ? id 、 name ? data-* ? src、for、 type、 href ? title、alt ? aria-*、 role ? 编码均遵循 XHTML 标准, 标签、属性、属性命名由小写英文、 数字和_组成，且所有标签必须闭合，属性值必须用双引号“, 避免使用中文拼音尽量简易并要求语义化。CLASS nHeadTitle CLASS 遵循小驼峰命名法 （little camel-case） ? ID n_head_title ID 遵循名称+_ ? NAME N_Head_Title NAME 属性命名遵循首个字母大写+_ ? name=“N_Head_Title“ ? 当 JAVASCRIPT 获取单个元素时，通常使用 来获取 dom 元素， 兼容所有浏览器，但 IE 浏览器会混淆元素的 ID 和NAME 属性，所以要区分 ID 和 NAME 命名。 ? ? onclick=“alert(test).tagName)“ ? ? ? 特殊符号应使用转意符。 ? ? 空格 ? ? 含有描述性表单元素（INPUT，TEXTAREA）添加LABEL。 ? 测试 ? 篇三：Web 前端开发规范手册Web 前端开发规范手册 文档修订历史记录 11 目录 一、 二、 三、 规范目的 . 3 基本准则 . 3 文件规范 . 3 基本要求 . 3 容器/布局/组件关系说明 .9 文件存放位置规范 .3 文件命名原则 .4 HTML 书写规范 .7 head 区代码规范 . 8 body 区代码规范 . 错误！未定义书签。 布局 . 11 组件 . 14 CSS 书写规范 .17 css 链接规范 . 错误！未定义书签。 css 命名规则 . 18 css 组合使用 . 19 静态页面命名规范 .错误！未定义书签。 JavaScript 书写规范 .19 图片规范 .错误！未定义书签。 注释规范 . 21 html 注释 .21 css 注释 .21 JavaScript 注释 .22 四、 五、 六、 七、 八、 常见 BUG . 22 兼容性 . 24 测试 . 24 待解决问题 . 25 执行模式 . 26 2 一、 规范目的 本文档是将通用的前端规范结合本系统的特色要求整合而成，意在： ? 提高团队协作效率 ? 便于前端开发以及后期优化维护 ? 方便新进的成员快速上手 ? 输出高质量的代码 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更新此文档。 本规范文档同时将用于绩效考核参考标准，加（）项为考核点。 二、 基本准则 ? 符合 web 标准 , 语义化 html, 结构表现行为分离, 兼容性优良。 ? 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。 开发时需要遵循如上基本准则，特殊情况可以有所宽限，如一些老项目的页面改造。 三、 文件规范 基本要求 文件存放位置规范 3Web 前端开发规范手册 文件命名原则 使用场景：在新建网页、图片、脚本、CSS 文件时，根据此规则给文件命名并放入指定位置 文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字空格和特殊字符。命名原则的指导思想一是使得你自己和工作组的每一个