前端手记（1）

1. 一些基本规范

1. 除非特殊情况，总是建议把CSS在文件头部引用，而在文件尾部引用javaScript，这样做的原因是：防止页面的二次渲染（如果将CSS文件放在底部，页面将按浏览器的默认样式渲染一次，然后在载入完CSS后按CSS样式表重新渲染一次），以及在不影响表现的前提下，尽可能的加快页面载入速度（因为绝大多数的javaScript都是要与页面相关的，在HTML没有载入的情况下，你提前载入javaScript也没有什么意义）。
2. 总是为图片指定宽度及高度，同样，这也是为了避免二次渲染，当不为图片指定宽高度时，浏览器将不为图片分配一个空间，在图片载入前，图片之后的内容将挤到图片所在的位置，在图片载入后，图片之后的元素将被挤下去（二次渲染了），同时，这样做也将有利于在图片服务器当机、或者采用了CDN网络、或者网速太慢因而图片无法载入的情况下保持页面的正常布局，而不是任意内容挤到一团。
3. 总是为图片指定alt属性，这是基于SEO及慢速网络两种情况下的考虑。
4. 如果一个form内有一个大大的漂亮的图片式提交按纽，请务必使用
   
   而不是：
   
5. 前一规则在图片无法载入，或者javaScript被禁用，CSS样式表无法载入这三种情况下都能良好工作，而后一种方式在图片无法载入或者javaScript被禁用时都将无法工作，这也符合我们将讲到的第6点。
6. 请记住：所谓浏览器兼容并不是指在所有浏览器上外观保持一致（比如，你如何让你的页面在手机和电脑屏幕上保持一致？这显然难度太大），而是尽可能在所有浏览器上保持一致的可访问性，其次才是外观尽可能的一致。（参见#10）

2. 为不同设备指定不同的样式表

考虑到页面可能被打印，请为你link的CSS文件指定media属性，如下：

如上的两条CSS规则，basic.css将被用于电脑屏幕上的渲染，而print.css则将被在打印时被调用，即使考虑到你没有时间来单独写一个print.css规则，也请你为basic.css指定media=”screen”，而不是media=”all”，因为这样在打印时将调用浏览器的默认打印样式，而不是无意义的在纸上打印出一堆不可点击的按纽及图案。

另外一个我们可能用到的media属性是：handheld，它将指定一个用于手持设备上的样式表（PDA及各种智能手机）

3. 采用Firefox + Firebug来开发你的代码吧

1. 一般情况下，总是建议你先在Firefox里把你的样式及结构调整到符合设计稿的状态后，再来做IE等其它浏览器下的兼容，因为Firefox更符合web标准，这将节省你的开发时间。
2. Firebug是我用得最多的开发工具，作为一名前端工程师，你所要接触到的大部分工作都能在其下完成，它一般情况下如下图所示样式
   
   关于Firebug，你可以在下列网址得到帮助：
   http://getfirebug.com/ firebug官方网站
   http://www.ooso.net/archives/294 网友写的中文教程

4. 常用的Firefox插件介绍

1. Firebug 必备利器，瑞士军刀级
2. CSS View 有漂亮的UI及方便的操作，但有了Firebug后，它也就成了个玩具
3. CSS Usage 能分析出具体哪条CSS没有被用到并以不同颜色标识，后期优化利器
4. Web Developer 禁用Cookie、CSS、JS、编辑表单、验证页面等等，同样为瑞士军刀级
5. ColorZilla 对页面中任意位置取色，结果为RGB或16进制等各种格式
6. JS View 下载页面中的JS文件
7. Page speed Google出品的用于前端性能优化的工具，有点类似于YSLow
8. User Agent Switcher 切换用户代理，通过发送不同的HTTP头来模拟不同的设备，如iPhone
9. YSLow Yahoo推出的前端性能优化工具，能分析html结构，CSS，JS等，推荐！

5. 另外一些好工具

1. IETEST 同时模拟多个IE版本（IE6/7/8），但要注意，它的行为与真实的情况可能有出入，如果有些问题你不确定，那么还是推荐你采用虚拟机+原版IE的方式
2. mergeCSS 一个AIR工具，用于压缩CSS（去掉空格，换行符及缩进）
3. bg2css 用于生成css sprites
4. Expression Web3 微软官方出品的多浏览器模拟工具，可以模拟IE6/7/8，速度有点慢，同时它可以打开你的原始设计稿，在设计稿和HTML之间做出像素级的对比。