Web前端代码页面布局总结

一.  html

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

（2）语义化：语义化html，正确使用标签。

（3）文件命名：命名以中文命名，依实际模块命名，方便查找

（4）文件头部head的内容

• title，需要添加标题

• 编码charset=UTF-8

• 缓存：Content=’-1’表示立即过期。

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

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

  页脚引入javascript文件

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

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

（7）图片

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

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

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

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

（9）转义字符：特殊符号使用转义字符

（10）避免使用行内样式，页面结构清晰，明了

二. 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:可以重复使用，可用于页面上任意多个元素.

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

（6）为JavaScript预留钩子的命名， 以 js- 起始， 比如:js-right， js-left

（7）书写代码前，考虑样式重复利用率，充分利用html自身属性及样式继承原理减少代码量，代码建议单行书写。方便修改.

（8）图片

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

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

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

（10）书写顺序规则

  定位属性（比如：display， position， float， clear， visibility等）

  自身属性（比如：width， height， margin， padding， border等）

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

  其他属性（比如：color， background， opacity， cursor，content， list-style等）

（13）减少影响性能的属性，如：position，float

（14）清除浮动方法:⑴clear：both⑵设置空div，设置width：100%，overflow：hidden；

（15）使用兄弟，子，相邻选择器，伪元素选择器：first-child，last-child，nth-child（n）,n代表第几个元素，n可为：add表奇数，even表示偶数；（ie支持情况不好）

3. Javascript

（1）文件编码统一为utf-8， 书写时， 每行代码结束必须有分号‘;’，尽量根据需求编写原生代码开发.

（2）在页脚引入javascript脚本body结束之前，采用外链引入形式，使页面的结构与行为分离

（3）命名：

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

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

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

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

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

（4）

Javascrpt的typeof返回那些数据类型？

1.undefined未定义

2.boolean布尔值

3.string字符串

4.number数值

5.object对象

6.nullfunction函数

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

6.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

7.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

$(document).ready()

8.简化写法

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){})