什么是前端？
前端工程师=F2E = fee = front-end engineer
前端工程师跟设计师不一样，搞前端的不叫设计师，叫工程师，就是拿蓝图建房子的。很形象，很牛很强大
前端职位：
1. 前端开发工程师 2. 资深前端开发工程师 3. 前端构架师
前端测试环境：
IE6、7、8：http://www.iefans.net/liulanqi-mianfei-xiazai/
IEtester：http://www.ietester.org/
火狐（中/英）：http://www.mozillaonline.com/
Google Chrome：http://www.google.com/chrome/
Apple Safari：http://www.apple.com.cn/safari/download/
ps：我的测试环境：ie8安装版，ie6和ie7用ietester测试，火狐为主浏览器
IE 常用调试工具：
1、Microsoft Script Debugger —— Companion.JS need to install this
2、Companion.JS —— Javascript debugger for IE , like Console API feature
3、IE Developer Toolbar —— Like Firebug (DOM/CSS etc)
4、Fiddler —— Web Debugging Proxy
ps：之前有用过IE Developer Toolbar，类似firebug，现在有了ie8（两种浏览器模式，相当于同时装了ie7和ie8），直接按F12（开发者工具），很好用，当然还是ff的firebug更好用囖
火狐插件：
1.CSSViewer：看具体DOM的CSS，Web开发者可以用。
2.Firebug：调试JS的利器，同时也可进行一些简单的DOM Hook。
3.JSView：可以查看当前页面的外埠js和css，这对开发者来说很重要。
4.Web Developer：功能上可能跟Firebug有一些重叠，但是也很强大
5.YSlow：yahoo开发的一个页面评分插件，YSlow以Firefox Add-on的形式发布，并集成到Firebug中，安装前一定要先安装Firebug。
http://developer.yahoo.com/yslow/
http://developer.yahoo.com/performance/rules.html#cdn
6.flagfox：显示网站服务器
ps：我的火狐装备：http://www.baisohu.net/?p=463
—————————————————————————
2008年最佳Web设计/前端开发技巧、脚本及资源总结：http://blog.bingo929.com/best-of-2008-for-web-developers.html
Web前端开发必备手册下载：http://blog.bingo929.com/cheat-sheets-for-web-develop.html
Web前端工程师技能列表:http://www.awflasher.com/blog/archives/906
关注WEB前端开发：http://www.css88.com/
CSS 整形与优化工具：http://www.css88.com/tool/csstidy/
Reset CSS 研究（八卦篇）：http://lifesinger.org/blog/2009/03/reset-css-baigua/
让Firefox2和Firefox3在Windows下共存：http://dancewithnet.com/2008/02/01/how-to-run-both-firefox2-and-firefox3-together/
1、检查页面的标签是否闭合
可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。
2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围，
然后逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。
3、模块确认法
可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。
4、检查是否清除浮动
推荐使用以下清除浮动方法：
.clear:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clear { clear:both; }
5、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。
6、边框背景调试法
给元素设置显眼的边框或者背景（比如黑色或红色），进行调试。
1.在图片的替代文字中加入关键字，这是优化网站图片的最重要的一点，即alt部分的处理。比如：
<img src=”seo-for-everybody.jpg” alt=”SEO for everybody”>
但是像上述的代码组合还不算完善，一个标准的图片嵌入代码应当包含哪些元素呢？从Pearsonified那里我们得知，它应当包含5个关键性元素：src、width、height、alt和title。其中当然是alt元素最为关键。 举个例子，比如旁边这张SEO图片，长宽为239×104。那么它规范的HTML代码就应当为：
<img src=”seo-for-everybody.jpg” width=”239″ height=”104″
alt=”SEO for everybody” title=”SEO for everybody” />
2.将你的图片取个描述性文件名
如果你有一张图片是关于变形金刚的，那么就应当使用像transformers.jpg这样具有描述性质的文件名，而不是使用t123.jpg这类只是代号的名字，当然可以使用替换文字作为图片的文件名。
3.在图片周围添加相关信息
如果你用Google搜索图片，会不难发现，在每张图片下会有一段描述性文字，其中关键字用粗体显示。这段描述行文字一般都是位于原文章图片周围，所以在图片周围添加包含关键字的描述信息将可以优化网站图片在 搜索引擎 中的排名。
4.使用关键词链接图片
使用超链接打开图片，那么超链接的名字应当包含图片的关键字，比如你要链接一张变形金刚的图片，就不宜使用“点击获得完整尺寸”等链接文字，而应当试着使用诸如“变形金刚玩具大黄蜂”之类的命名形式。
5.使用Tag为图片打上标签
在使用像flickr之类的图片存储服务时，最好为图片加上tag。
6.去掉Google图片搜索的边框
点击Google图片引擎上的图片会来到图片所在的网页，可是在网页顶端含有Google的边框，降低了网页本身的视野，去掉的方法是在网页代码中加入下面一段JavaScript代码：
<script language=”JavaScript” type=”text/javascript”>
if (top.location != self.location) top.location = self.location;
</script>
7.使用自己的而不是其他网站的图片
8.注意图片的尺寸以适应搜索引擎
比如你链接的是一张壁纸，那么壁纸的大小就应当符合规范。
百度对作弊的判断条件：
(1)在网页源代码的任意位置，故意加入与网页内容不相关的关键词。
(2)在网页源代码的任意位置，故意重复某些关键词。即使与网页内容相关的关键词，故意重复也被认为是作弊。
(3)在网页中加入搜索引擎可识别但用户看不到的隐藏文字。无论是使用同背景色文字，超小字号文字，文字隐藏层还是滥用图片alt ，都属于作弊行为。
(4)故意制造大量链接指向同一网址的行为。
(5)对同一网址，让搜索引擎和用户访问到不同内容的网页(包括利用重定向的技术)。
(6)作弊行为是针对网站而不是针对网页的。一个网站中即使只有一个网页作弊，该网站也被认为有作弊行为。
(7)有链接指向作弊网站的网站，负连带责任，也会被认为是作弊。(但是作弊网站上链接指向的网站，不算作弊)。
Google对作弊的判断条件：
(1)请不要使用隐藏文本或隐藏链接。
(2)请不要使用隐藏真实内容或欺骗性重定向手段。
(3)请不要向google发送自动查询。
(4)请不要创建包含大量重复内容的网页，域或子域。
(5)请不要创建包含病毒或其他有害软件的网页。
(6)请不要使用专门针对搜索引擎制作的桥页，也不要使用如联属计划这类原创内容很少或几乎没有原创内容的“俗套”方式。
Google对页面各个元素的权重比例
Inbound link text: 10 points.
Title: 10 points.
Domain name: 7 points.
Large h1-h2 headings: 5 points.
First sentence of first paragraph: 5 points.
Path or filename: 4 points.
Proximity (multi kws): 4 points.
Beginning of a sentence 1.5 points.
Bold or italic text: 1 point.
Usage in text: 1 point.
Title attribute: 1 point.
Alt tag: .5 point.
Meta descrip: .5 point.
Meta keywords: .05 point.
中文版：
外部链接文字：10分
标题：10分
域名：7分
H1,H2字号标题：5分
每段首句：5分
路径或文件名：4分
相似度（关键词堆积）：4分
每句开头：1.5分
加粗或斜体：1分
文本用法：1分
title属性：1分
alt标记：0.5分
Meta描述（Description）：0.5分
Meta关键词（Keywords）：0.05分
————————————-
从这里也可以看出，现在搜索引擎基本放弃META中的KEYWORD这个标签，搜索引擎的目标就是越来越看重浏览者可以直接看到的部分，和浏览者最关注的部分。
所以说导航条优化很重要，title标签很重要，H1很重要~~
———————————————–
SEO优化公式
SEO=∫Clock=∫C1+L2+K3+O4
1、∫是一个积分符号，C=content，L=link，K=keywords，O=others。SEO就是一个长期的对“时间”积分过程，内容是核心。
2、C1—丰富的内容是第一位的要素，按照原创、伪原创、转载依次排列内容的重要性满足用户体验。
3、L2—链接的合理与丰富是第二位的要素，合理有效的内部链接与丰富的外部链接同等重要，而外部链接中高度相关性高Pr值页面尤为重要。
4、K3—关键字因素是第三位的重要因素，包括：合理的Title、Description、Keywords、页面关键字及相关关键字的密度与合理布局。
5、O4—其它因素，比如：域名、站龄、服务器、网站架构、排版、邻居、Url、地图等等。
seo之关键字
＊去除纯学术性（比如商品、游戏、广告）、模棱两可、太宽泛、太有竞争性的关键字。让关键字具体，有描述性。
比如做房地产的公司，他就想针对房地产这个词优化，做广告的公司就想针对广告这个词来优化。可以肯定的说，你基本上可以忘掉这种关键词。太过宽泛的关键词竞争太巨大，要想在这种单词像房地产(real estate)，广告(advertising)等等行业排到前十名或前二十名，所要花费的恐怕不是几万几十万，而是上百万上千万美金。就算你排到前面，搜索这类词的用户的目的很不明确。搜索房地产的，他的目的是想买房子吗？那可很难讲！所以这种词带来的流量是目标性很差的，转化为订单的可能性也很低，所以说这类太宽泛的关键词都是效率比较低的。所以选择的关键词应该比较具体，有针对性。
比如你在卖ipod的产品，如果你用ipod来做关键字的话，你永远都比不上人家ipod公司，大家可以在Google上搜一下ipod这个关键字，查询结果是315,000,000，如果把关键字优化成ipod 80g（这里假设你卖的是ipod 80g的产品），查询结果是1,570,000，如果把关键字优化成ipod 80g video（这里假设你卖的是ipod 80g video的产品），查询结果是542,000，其实这里也引入了一个关键字长尾词的概念，网络上有一篇很出名的文章the long tail，有兴趣的同学可以去看看。
＊加些动词，比如play web games, play games online、
＊不要用被搜索引擎忽略的词，大家可以在搜索引擎上搜一下stop words、what are stop words、stop words list来了解下相关的信息。
＊分析同行
这里有两个小技巧
1：你可以在google输入 allintitle:Browser Based Games，将会出现所有标题为Browser Based Games的网页
2：你可以在google输入 allinurl:Browser Based Games，将会出现所有url里包含Browser Based Games的网页
＊主要页面做核心，次要做扩展，内容页做长尾。
—————————-
ＰＳ：Google喜欢内容，大量的高质量的内容，以一系列关键词为基础的广泛的内容。
