web前端编程规范

一、什么是编程规范

软件逐渐走向大型化，在这种形势下，一个软件需要众多的人员参与，这样我们就不得不建立相关约束来管理项目开发

二、前端编程规范性的意义

• 提高代码的可读性
• 降低代码错误率
• 提高代码的整合效率和重用性
• 为后期的维护提供更高的便利

三、命名规范

html命名规则

统一使用小写的字母、数字和下划线组合（不得包含空格和特殊字符）

文件名条件：方便理解和易于查找

页面文件类型

html、htm、asp、aspx、jsp、php等

页面文件命名规则

首页统一取名为：index或home，一般默认使用index

其他子页面统一用英文翻译或中文拼音取名，但是不建议英文和中文拼音混合使用，优先使用英文，可以选择使用简写

html命名Demo

图片命名规范

图片命名规则

图片的名称为头尾两部分，用下划线隔开

图片的头部表示此图片的大类，（如广告、标志、菜单、按钮等等）

大类常规命名

放在页面首部的广告、装饰图等长方形大图取名：banner

标志性图片取名：log

有链接的图片取名：button

没有链接的标题图片取名：title

装饰用的照片取名：pic

在页面上连续出现、性质相同的栏目图片取名：menu

图片命名Demo

js脚本命名规范

自定义js文件模块：模块.描述.js格式 如：check.js 、login.js、regist.js、pop.js

公用文件模块：common.js或basic.js

外部资源模块：Jquery.min.js、Jquery.js

文件存放位置规范

文件存放目录结构

js：存放编写的js文件

css：存放编写的css文件

image：存放需使用的图片文件

flash：存放需要使用的flash文件

media：存放需要使用的多媒体文件，包括视频和音频

library：存放一些库文件，包括js库和css库

class和id命名规范

class和id的区别

class的值在整个page页面中可以重复

id的值在整个page页面中不可以重复

class一般在css中使用，id一般在js中使用

命名规则

整个大布局框架命名：header、footer、nav、article、left、right

其他的组件命名由英文单词和数字组合使用，尽量避免使用中文命名

避免重复命名规则：从属命名 如：<div class=”left”><div class=”left_frame”></div></div>

常用class和id命名范例

head标签规范

itle:网页的标题内容

格式：<title>标题内容</tltle>

meta标签：用于定义文件头信息，告诉浏览器需要干一些什么事情

• 网页字符集：设置浏览器解释页面的字符内容

格式：<meta http-equiv="Content-Type" content="text/heml;charset=utf-8"/>

• 自动跳转：

格式:<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

• keyword:设置搜索关键字内容

格式：<meta name="keywords" content="关键字内容"/>

• description:设置描述关键内容

格式：<meta name="description" content="进行一些表述"/>

• author:设置网页作者

格式：<meta name="author" conten="作者信息"/>

超链接规范

网站中链接路径统一用相对路径

浏览器中如果有个空链接，有两种设置模式：#和javascript:void(null)

表格规范

尽量避免表格嵌套过多（会导致延长加载页面时间）

tr和td标签能不换行最好不要换行，可能会影响页面展示效果（出现缝隙）