闲话少说，html5新增的一些特性包括：

• 新的特殊内容元素，比如 header、section、nav、article、aside、footer
• 新的表单控件，比如 date、time、email、url、search
• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持

一、新增内容元素的出现，是标准向语义化跨出的一大步。以前我们有一些约定俗成的规矩(点击这里)，比如说

1
2
3
4
5
6
7

<div id="header">页面头部</div>
	<div id="content">
		<div id="nav">导航区域</div>
		<div id="main">主内容区</div>
		<div id="side">侧边栏</div>
	</div>
<div id="footer">页面底部</div>

在html4.01中div是区域划分的最好元素，不夸张的说只用一个div就可以搞定整个页面，所以市面上流行着大量div+css的书，其实div只是html中的一个元素标签，严格来说应该是(x)html+css技术。html5更加强调了标签的语义化，新增header、nav、article、section、footer等内容元素。所以上面的代码片段在html5中比较合理的写法变为：

1
2
3
4
5
6
7

<header>页面头部</header>
	<section>
		<nav>导航区域</nav>
		<article>主内容区</article>
		<aside>侧边栏</aside>
	</section>
<footer>页面底部</footer>

好了，现在不用约定俗成了，现在标准规定了，每个符合标准的浏览器都会知道页面中的每一部分代表什么内容，有什么作用。代码简洁漂亮没有多余重复的div,搜索引擎可以更清楚的判断网页的哪部分内容更重要。事情变的简单，工作效率增加。

但是但是，要注意他们跟h1、P不一样，新增的内容元素不是换了名字有了自己特点的div。尝试这样定义header标签的样式：

1

<header style="width:300px;height:200px;background:red;">页面头部</header>

测试发现在ff、safari、opera中width和height都没有起作用，只有在chrome中才得到想象中的效果。（ie我暂时忽略了，原因不表）新增的内容元素不是div，现在就可以使用这些新内容元素，但有时候要套一个多余的div，比较：

1
2
3

<header  style="width:300px;height:200px;margin:0 auto;">
 内容
</header>

1
2
3

<header>
	<div style="width:300px;height:200px;margin:0 auto;">内容</div>
</header>

二、新的表单控件,html5新增了许多input输入类型选择：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

详细了解，请点击这。

以前不借助javascript，实现表单验证功能是不可能的。html5新增的input类型不要javascript就能验证。email可以验证输入是不是email格式；number类型确保输入的是一个数值。这真是振奋人心的新增功能。

但是但是，现在面临最大的推广困难是各浏览器对其的支持，那是相当的不乐观。即使浏览器对标准全面支持，我觉得实际应用起来仍然不那么乐观，因为标准没有规定，当值为true时浏览器应该怎么做，当值为false时浏览器又要怎么做。比如说opera有自己的fasle效果，input底色变红并且出现输入不合法的提示。如果我们想做到各浏览器表现效果一致，恐怕需要一个像css那样的reset.css。

1. a {blr:expression(this.onFocus=this.blur())}
2. onfocus=”this.blur()”
3. 用.htc 实现
4. 使用IE的私有属性hidefocus=true

不考虑性能及其他因素，这几种办法在IE类浏览器遨游、TT、360中都表现相同，但是在搜狗浏览器中，会遇到点麻烦。默认设置的搜狗兼容模式会进行弹出窗口拦截，大概有这么几种情况：

• a.新窗口打开会被拦截，原窗口不会。
• b.原页面打开会被拦截，但是作为iframe调用不会。
• c.页面放到服务器上会拦截，放在本地不会。
• d.前面提到的去掉虚线框的前三种办法有可能会被拦截，使用hidefocus=true则有可能放过你，具体见demo,为什么都是有可能，见下面三点。
• e.如果页面有两个指向相同地址的a链接，被拦截的那个a先被点击，那紧接着点击不会被拦截的a也会被拦截。
• f.如果页面有两个指向相同地址的a链接，不被拦截的那个a先被点击，那紧接着点击会被拦截的a则不会被拦截，刷新页面也不会。
• g.如果页面有两个指向相同地址的a链接和一个其他指向其他地址的a链接，如果不被拦截的那个二分之一a先被点击，接着单独的那个a被点击，此时再点击会被拦截的a则会被拦截。（f和g的区别在于，点击两次相同的链接a之间是否点击了另外的其他链接。）
• h.有几个例外不会被拦截，搜狐（http://www.sohu.com/）QQ（http://www.qq.com/）Google（http://www.google.com/）谷歌中国（http://www.google.cn/）
  （但是，谷歌中国新家（http://www.google.com.hk/）会被拦截,另外焦点房产网、17173、chinaren、搜狗包括搜狗浏览器官网均会被拦。）

举个博客园首页的列子，博客园首页分为下面几块(“推荐博客排行”,”首页随笔列表”,”最新新闻”…)
我们一般对该http请求处理如下：

1. 浏览器发送http请求；
2. 服务器处理请求(从缓存读取前50个推荐博客，从数据库读取”首页随笔列表”,从数据库读取”最新新闻”)，生成首页的html代码；
3. 服务器发送html代码给客户端；
4. 浏览器接收到响应，处理html。(下载css,js,image,执行js等等)

可以看出传统的http请求4个过程中，每个过程都必须等待前1个过程完成后才能执行，这样就存在很大的资源浪费。

facebook的对该http请求的处理如下：

1. 浏览器发送http请求；
2. 服务器处理请求；
• 从缓存读取前50个推荐博客,生成”推荐博客”的js代码段，flush输出该代码段；
• 服务器继续读取”首页随笔列表”，并生成输入js代码段；
• 服务器继续读取”最新新闻”，并生成输入js代码段。
3. 浏览器接收到js代码段，下载该代码段所需的js和css。插入html代码。

在这个处理流程中，最大的特点就是2,3是并行进行处理的，服务器处理完一部分数据就把已经处理好的数据交给浏览器进行呈现处理，自己再继续处理其他的数据。

原文链接：
《名站技术分析 — facebook奇特的页面加载技术》

————————————
相关博文：
《为什么Facebook比以前快2倍》

罗伯特 约翰逊（Robert Johnson）是Facebook的项目总监，他说：在工程师团队对Facebook代码进行了重写和深入优化之后，网站的速度以前快了2倍。

1.Facebook花了多久才让它变快2倍的呢？

罗伯特 约翰逊：我们对网站进行的大幅度的”改革”，这的确使网站速度得到很大的提升。工程师团队花了大概一个月来规划这个项目，具体的实施过程则花费了6个月。

2.在这次的重写行动中，你们在技术上做了什么大的改进？

罗伯特 约翰逊:我们队源代码做了比较多的优化和重写：

1、把用户请求之后的内容生成、网络传输和网页渲染的时间重叠起来;
2、把相应的功能代码放进一个在页面初始化时需要用到的Javascript核心功能文件中;

这个项目叫做”BigPipe“，只要当客户端的浏览器准备好了,我们的服务器就会以最快的速度以流的形式传送内容，当我们的服务器还在产生数据的时候，客户端的浏览器就已经开始下载静态内容和渲染页面最重要的部分了，我们把几部分的时间重叠了起来，使用户感觉更快。这个新的JavaScript库叫做”Primer“.

除了服务器端的大项目之外，我们还对所有的文件都进行了”瘦身”，让一切变得更小更轻，比如我们进行了CSS图片合并(CSS Sprites).

3.Facebook是否鼓励开发员大胆尝试和创新呢？

罗伯特 约翰逊:也许这是这个项目最棘手的部分之一。对于Facebook来说,开发速度是最重要的指标之一，我们不希望看到任何会使开发速度慢下来的事情。我们既要让开发人员尽可能容易的完成任务,又要使网站代码尽可能得到优化，所以我们制造了一些辅助开发工具，它们能使鱼和熊掌兼得。比如Primer，让它使Facebook运行得更快和让它易于集成和不容易被误用是同等重要的。

我们监测一切可能会影响程序性能的因素，并开发相应的工具，在程序正式放出之前检查代码。

这很重要，一旦代码出现问题，系统就会自动提醒开发人员，而不是靠开发人员自己去检查那些问题。这样开发人员就可以不断地创新，只要在出现一些比较特殊问题的时候，开发人口才需要停下来解决那些问题。

原文： oreilly 译文：http://cnnet.us/taobao/facebook-faster/ 转载请保留出处

主要议程：

· (W3C)Klaus Birkenbihl——题目待定
· 范俊豪（腾讯）《从浏览器原理看web标准的重要性》
· 谢子斌（Opera）——《HTML5与CSS3》
· 张克军（豆瓣）——《豆瓣的前端架构》

—————————————————–
会后相关资源分享：
data on the web ——- Klaus Birkenbihl（W3C）
建立前端开发团队 ——- 蒋定宇（D-Link 台湾）
谈谈HTML5和CSS3 ——- 谢子斌（Opera）
网页性能优化之路 ——- 范俊豪（腾讯）
前端基础架构 ——- 张克军（豆瓣）
从浏览器解析看标准的重要性 ——- 梁璟彪（腾讯）

或许你还在使用2001年10月诞生的IE6(Internet Explorer 6)浏览器，而现在是2010年3月。在日新月异以天计算的网络社会中，IE6正阻碍着网络新事物的发展，或许你没有感受到这一点，这是因为背后有许许多多的网络工程师通宵达旦的辛勤工作为你抚平这些沟堑。而现在他们有些受够了，想想吧，马上就10年了，10年前我们用网络做些什么？看土豆优酷？偷菜停车？电子商务？网页游戏？新事物层出不穷，IE6老态龙钟。

因为用的是盗版系统，所以可能你已经关闭了XP的自动更新功能，导致IE6不会自动升级。其实升级IE6也没什么用，因为微软已经放弃了对它的支持。现在有两个新的版本IE7和IE8可供普通用户使用，而在3月17日微软发布了IE9预览版，并且声明IE9将放弃对XP系统的支持，就是说假如你用的是XP操作系统那在不久的将来最高只能升级到IE8，再以后你买了笔记本后的第一件事就是把正版的系统卸掉，换上与你相濡以沫的XP，这就像你看到有人还用WIN98一样XX（该处省略两个字）。

也许你很高兴现在没用IE6而是用的“遨游”、“360”、“腾讯TT”、“世界之窗”、“搜狗”，并且让它们自动更新，始终保持在最新版。我承认这些浏览器功能十分强大，让你用起来得心应手。可是你要知道这些都是外壳浏览器，它们调用的都是IE的内核，改头换面换了身皮肤而已。如果你在装这些外壳浏览器时电脑本身还是IE6的浏览器，那这些外壳浏览器依然是IE6的心，如果电脑本身是IE7浏览器，那它们是IE7的心。虽然它们是最新版，但它们的心不会升级。它们的心是玻璃，外壳是木板升级到钢板，从性能上来说……春哥，你知道的。别指望一颗玻璃心能多么坚强。现在“遨游”、“搜狗”等一些外壳浏览器已经开始支持双核，除了支持IE核心外，也支持WebKit内核（一个开源的浏览器引擎），虽然一些国内网页开发人员对外壳浏览器鄙夷依旧，但它们会比这篇文章更能改变你们的习惯。

目前除了IE系列的浏览器外，还有火狐浏览器(Firefox)、谷歌浏览器（Google chrome）、苹果浏览器（Apple safari）、以及市场份额很小，但创新能力很强的Opera浏览器。迫于国内互联网应用的现状，不可能完全不用微软的IE，比如国内一些银行和垃圾政府网站只能保证支持IE6。庆幸之一是这一状况正在慢慢改善，比如建行把个人网银率先全面支持 Firefox 浏览器当作抢占Firefox用户市场的重要先机；庆幸之二是上述这些浏览器有针对IE的插件扩展，比如谷歌浏览器有IE Tab扩展，下载安装之后在谷歌浏览器地址栏右侧就多了一个按钮，点这个按钮谷歌浏览器就能模拟IE的行为，保证你正常浏览网页。

你也许会说这些关你什么事，现在能用就行呗。是的，目前来说绝大多数的网络应用还不敢放弃对于IE6的支持，你们的势力还很强大。但你这样想让我觉得你已经变得像你讨厌的爸爸妈妈爷爷奶奶一样不乐于接受改变，感叹电脑复杂怎么也学不会，连拼音输入法打个字都那么费劲。

我不能说服你，但你不能阻止我说你。《阿凡达》我只想看IMAX 3D的，14英寸熊猫黑白电视机有什么意思呢？

等你升级的时间，那惨淡的心情大概只有军队作战前的黎明可以比拟。像“斯巴达克斯”里奴隶起义的叛军在晨雾中遥望罗马大军摆阵，所有的战争片中最恐怖的一幕，因为完全是等待。

在等待的时间，让我心平气和的看一副《译言网》的漫画：
Internet Explorer 6 的盛衰史（漫画）— Smashing Magazine

200
请求已成功，请求所希望的响应头或数据体将随此响应返回。
一句话总结：服务器成功返回网页

301
被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有连结编辑功能的客户端应当自动把请求的地址修改为从伺服器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。
新的永久性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，否则响应的实体中应当包含指向新的URI的超连结及简短说明。
如果这不是一个GET或者HEAD请求，因此浏览器禁止自动进行重定向，除非得到用户的确认，因为请求的条件可能因此发生变化。注意：对于某些使用HTTP/1.0协议的浏览器，当它们发送的POST请求得到了一个301响应的话，接下来的重定向请求将会变成GET方式。
一句话总结：网址永久性重定向

302
请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。新的临时性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，否则响应的实体中应当包含指向新的URI的超连结及简短说明。
一句话总结：网址临时性重定向

401
当前请求需要用户验证。该响应必须包含一个适用于被请求资源的WWW-Authenticate信息头用以询问用户信息。客户端可以重复提交一个包含恰当的Authorization头信息的请求。如果当前请求已经包含了Authorization证书，那么401响应代表着伺服器验证已经拒绝了那些证书。如果401响应包含了与前一个响应相同的身份验证询问，且浏览器已经至少尝试了一次验证，那么浏览器应当向用户展示响应中包含的实体信息，因为这个实体信息中可能包含了相关诊断信息。
一句话总结：未授权—未授权客户机访问数据

403
伺服器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。如果这不是一个HEAD请求，而且伺服器希望能够讲清楚为何请求不能被执行，那么就应该在实体内描述拒绝的原因。当然伺服器也可以返回一个404响应，假如它不希望让客户端获得任何信息。
一句话总结：服务器拒绝请求

404
请求失败，请求所希望得到的资源未被在伺服器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如伺服器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。 404这个状态码被广泛应用于当伺服器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
一句话总结：404表示临时性，410表示永久性

413
伺服器拒绝处理当前请求，因为该请求提交的实体数据大小超过了伺服器愿意或者能够处理的范围。此种情况下，伺服器可以关闭连接以免客户端继续发送此请求。
一句话总结：数据量过大，服务器拒绝

500
伺服器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
一句话总结：服务器遇到错误，无法完成请求

转自：http://binbin8497.javaeye.com/blog/494089

按网上统计支持Google的多百度的少（当然官方的得反过来）。不管统计的结果怎样，这可能只是庄子梦蝶的故事。因为可能还有第三种答案：去乡下问问占全国人口百分之七八十的农民伯伯，“您对谷歌和百度的事情怎么看？”农民伯伯可能会回答，“现在粮价上涨早就不打渔了，看着田里的谷子涨势那么好，心里都跟唱歌似的。”

百度的痛处在于没有退路，Google可以选择退出，因为他还有全球的市场，而百度日本还一般般。百度往哪里退？再退只能学南宋的赵构跳海了。不要谈什么没骨气，每个人都想做出一番事业，李彦宏可以去美国创业，但在美国的他绝对不是现在的他，他可能是个经理人、技术总监或者影响力微乎其微的公司的创始人，或许他取得了拿得出手的成就，影响力日益传播到中国，这时大陆的人可能是5毛也可能是谷粉就会呼吁他回国创业希望他回国创业，每个在外游学的人都想到过要回国创业，在祖国出人头地。在祖国他雄心勃勃要创造一个公平公正促进信息正常流通的搜索引擎，于是他被弄死了。

百度要同Google划洋而治，百度台湾百度日本百度韩国百度新加坡……假设他运气好，国外市场份额节节高升，超过了国内市场。那他的腰杆怎么着也会硬点了，对政府讲话也有底气了，于是他在国内的市场被彻底弄死了。

这时候会有一个新的搜索引擎出现，他可能叫谷度，一跃成为中国最大的搜索引擎，坐在那个寒风凛冽的位置。

而政府就是他座位底下的一壶开水，谷度谷度地冒着热气。

注：小小是小小的蜗牛的小小，不是小小的乡长的小小。

优点：
· 搜索引擎使用的是Google的数据
· 搜索范围只针对前端开发相关内容
· 所收录站点为全手工的审核

自他介绍：
这是一个搜索前端博客的插件,目前全手工收录了146个国内外的前端开发者博客及相关站点!是方便查找前端资料的好帮手!你可以看到:当你访问这个页面时,你的IE7+或者Firefox2+右上角的搜索工具栏中多了个前端博客搜索,而在Google chrome4.0+你可以以chrome自己的方式方便的使用它.是的,通过它你可以直接在浏览器的搜索栏里搜索我已收录的前端博客的文章资料,一切就是这么简单!

试用：