Web前端代码规范与页面布局

 

　　一、 规范目的：

　　为提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构，有利于SEO优化。

　　二、 规范基本准则：

　　符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良，页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。

　　三、 文件规范：

　　html、css、js、images文件均归档至约定的目录中。

　　1. html

　　(1)编码：所有编码均采用xhtml，标签必须闭合，属性值用双引号包括，编码统一为utf-8。

　　(2)语义化：语义化html，正确使用标签，充分利用无兼容性问题的html自身标签。

　　(3)文件命名：命名以中文命名，依实际模块命名，如同一模块以_&title&_来组合命名，以方便添加功能时查找对应页面。

　　(4)文件头部head的内容

　　title，需要添加标题

　　编码charset=UTF-8

　　缓存：

　　Content=’-1’表示立即过期。

　　添加description、keywords内容

　　Robots content部分有四个指令选项：index、noindex、follow、nofollow，用‘，’分隔，如：

　　在head标签内引入css文件，有助于页面渲染

　　引入样式文件或JavaScript文件时， 须略去默认类型声明.

　　页脚引入javascript文件

　　(5)连接地址标签：书写链接地址时，避免重定向，如href=”http://www.example.com/”，需在地址后面加‘/’

　　(6)尽可能减少div嵌套，如：根据重要性使用h1-6标签，段落使用p，列表使用ul，内联元素中不可嵌套块级元素，为含有描述性表单元素(input，tetarea)添加label

　　(7)图片

　　能以背景形式呈现的图片，尽量写入css样式中

　　区分作为内容的图片和作为背景的图片，作为背景的图片采用Css sprite技术，放在一张大图里

　　重要图片必须加上alt属性，给重要的元素和截断的元素加上title

　　(8)注释：给区块代码及重要功能加上注释，方便后台添加功能

　　(9)转义字符：特殊符号使用转义字符

　　(10)页面架构时考虑扩展性

　　2. Css

　　(1)页面内部尽量避免使用style属性

　　(2)css放在head标签中，由link标签引入，使页面的结构与表现分离。

　　(3)文件命名：以英文命名，后缀.css，共用：base.css，首页：index.css，其他页面样式依具体模块需求命名

　　(4)编码统一为utf-8

　　(5)Class与id的使用：

　　Id:具有唯一性，是父级的，用于标识页面上的特定元素，如header/footer/wrapper/left/right之类

　　Class:可以重复使用，是子级的，可用于页面上任意多个元素

　　命名：以小写英文字母、数字、下划线组合命名，避免使用中文拼音，尽量使用简易的单词组合，避免使用拼音，采用驼峰命名法和划线命名法，提高可读性，如：dropMenu、sub_nav_menu、drop-menu等。

　　(6)为JavaScript预留钩子的命名， 以 js_ 起始， 比如:js_hide， js_show

　　(7)书写代码前，考虑样式重复利用率，充分利用html自身属性及样式继承原理减少代码量，代码建议单行书写，利于后期管理

　　(8)图片

　　命名：小写英文字母、数字、_ 的组合，使用有意义的名称或英文简写，最好不要使用汉语拼音，区分大写字。

　　使用sprite技术， 减小http请求，sprite按模块制作

　　(9)书写顺序：保证同类型属性写在一起，一般遵循布局定位属性–>自身属性–>文本属性–>其他属性的书写格式

　　(10)书写顺序规则

　　定位属性(比如：display， position， float， clear， visibility， table-layout等)

　　自身属性(比如：width， height， margin， padding， border等)

　　文本属性(比如：font， line-height， text-align， text-indent， vertical-align等)

　　其他属性(比如：color， background， opacity， cursor，content， list-style， quotes等)

　　(11)缩进：统一使用tab进行缩进

　　(12)样式表中中文字体名，最好转成unicode码，以避免编码错误时乱码。

　　(13)减少影响性能的属性，如：position，float

　　(14)为大区块样式添加注释，小区块适量注释。

　　3. Javascript

　　(1)文件编码统一为utf-8， 书写时， 每行代码结束必须有分号‘;’，尽量根据需求编写原生代码开发，以避免造成的代码污染(沉冗代码 || 与现有代码冲突 || …)等问题

　　(2)在页脚引入javascript脚本，采用外链引入形式，使页面的结构与行为分离

　　(3)命名：

　　文件命名：以英文命名，后缀为.js，共用：common.js，其他命名可根据模块需求命名

　　变量命名：驼峰式命名，原生JavaScript变量要求是纯英文字母， 首字母须小写， 如iTaoLun。变量集中声明， 避免全局变量

　　类命名：首字母大写， 驼峰式命名. 如 ITaoLun;

　　函数命名: 首字母小写驼峰式命名. 如iTaoLun();

　　命名语义化， 尽可能利用英文单词或其缩写;

　　(4)规则

　　尽量避免使用存在兼容性及消耗资源的方法或属性

　　后期优化中， JavaScript非注释类中文字符须转换成unicode编码使用， 以避免编码错误时乱码显示

　　代码结构明了， 加适量注释. 提高函数重用率

　　注重与html分离， 减小reflow， 注重性能.

　　4. 注释规范

　　(1)html：注释格式，”-”只能在注释的始末位置，不可置入注释文字区域

　　(2)Css：注释格式

　　(3)Javascript：单行注释：//这儿是注释，多行注释：

　　5. Css Hack 特殊符号

　　(1)* ：IE6/7都能识别*，标准浏览器不识别

　　(2)_：只有IE6识别

　　(3)!Important：IE6不识别，Firefox，IE7/8/9、chorme等主流浏览器均识别

　　(4)\9：所有浏览器均识别，包括IE6/7/8

　　(5)+：IE6/7/8识别

　　(6)书写顺序：先写FF等非IE浏览器所需样式，其次IE8，再次IE7，最后写IE6

　　四、 自适应页面布局(主要平台为ios和安卓，所以此不考虑IE兼容性)

　　1. 布局细节

　　首先头部head中加入meta新标签

　　，让网页宽度默认等于屏幕宽度，原始缩放比例为1.0，即100%显示。

　　Position：不能使用绝对定位

　　Width：不能使用px宽度，应使用百分比或auto

　　Font：不能使用绝对大小，应使用em

　　2. 流式布局float的使用

　　各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

　　3. CSS3引入的Media Query模块，可自动探测屏幕宽度，加载相应的CSS文件

　　，屏幕宽度小于400像素(max-device-width: 400px)，就加载tinyScreen.css文件

　　，如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

　　@importurl("tinyScreen.css") screen and (max-device-width: 400px);

　　同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

　　@media screen and (max-device-width: 400px) {

　　.column {

　　float: none;

　　width:auto;

　　}

　　#sidebar {

　　display:none;

　　}

　　}

　　4. 图片自适应

　　img， object { max-width: 100%;}