网站前端开发的注意项

网站前端设计、开发完毕后，发现很多小问题需要完善，现将其整理出来，以备参考。

首先必须要说明的是：先给客户确定浏览器兼容性，支持HTML5与不支持HTML5的浏览器针对一些特殊的前端样式与功能，工作量是有不小区别的。

其次，需要提供平面效果图与交互设计；

例如：控件圆角、下拉框效果美化等

一、在设计前端页面时，应该先总结页面中的常用布局(单列结构、二列结构、三列结构)，而后设计常用布局的模板，以及通用的头部与尾部，测试一下框架的兼容性，再进行并行开发；

二、在与效果图设计方沟通时，一定要让对方按要求的尺寸做设计(PC页按980px宽、高无限，WAP页按480px高无限)，否则后期切图时，都要等比例缩/放素材，很有可能导致图片不清晰；

       注：效果图的宽度与网站受众群体有关，可参见百度统计中分辨率的大小-左右边的大小余量。

三、千万不要相信前端/其它方法传递过来的数据，在服务器端必须要对数据进行验证后再使用；

        当接到POST或GET的数据后，一定要用服务器语言

        1.验证是否为空；

        2.去除提交数据中的html标签；

        3.验证数据的有效性；

        4.将数据插入数据库时，要先转义其特殊字符后再入库，避免SQL注入；

四、对于处理时间较长的按钮，需要使用Ajax做成停等+锁屏功能，避免用户多次点击；

五、对于需要用户输入的地方，如果有限制，最好加上友情提示，告诉用户还可以输入多少(使用textarea的onpropertychange与oninput属性，全面支持IE、firefox、chrome)；

六、为输入框、复选框、单选框的文字加入label for标签;a标签把title写上

七、注意JavaScript/CSS在各浏览器的兼容性(javascript的使用)

       这里的JavaScript/CSS浏览器兼容性主要指的是IE7、8、9、10版本，Firefox、chrome相差不太大；

       1.书写规范；

       2.keypress事件的兼容性；

八、整个网站的字体样式、链接颜色的统一；

九、页面字体的统一左或右对齐；

十、在网站关键页中，使用弹出窗口取代打开新页面，便于降低页面的退出/跳出率；

   由于这个功能需要涉及前后台功能，故需要在前期进行规划设计，如果在开发期没有准确的功能描述，可以暂使用Ajax+JSON+简单的javascript:alert()来表示，后期修订会简单一些；

   对电商而言，这些关键页面如：

   1.注册页(条款说明)；

   2.下单页(条款说明)；

   3.产品简述页；

   4.结算页(物流信息、发票信息)；

十一、使用CSS雪碧技术维护性较差