带进度条的 HTML5 文件上传

HTML5 拖放式文件上传的 API 教程

全新的 HTML5 多文件上传

使用 jQuery 的 HTML5 文件上传

HTML5-powered Ajax file uploads

HTML5 拖放式多文件上传

您可能感兴趣的文章

• HTML5开发的十大炫酷Web应用分享与推荐
• 网页也能有智能语音识别输入功能
• 2012年14个HTML5的大胆预言
• HTML5的11个让人难以接受的事实
• HTML5将推动Web App发展
• 不写代码也能开发HTML5游戏-可视化开发工具
• HTML5教程:图片黑白转换效果
• HTML5 canvas 元素详细教程七：基本的动画。
• HTML5 canvas 元素详细教程六：组合
• HTML5 canvas 元素详细教程五：canvas的变形

appMobi已经开放了jQ.Mobi的源代码，它对jQuery进行了重写，与jQuery Mobile竞争以分享开发者份额。

jQ.Mobi是jQuery的部分重写版本，但针对HTML5和移动设备做了优化。它的文件大小只有3KB，而jQuery则有35KB，并且据JSPerf test的数据，它在Android上要比jQuery快3倍，在iOS上快2.2倍。该框架是由appMobi发布并开源的。因为jQ.Mobi是插件式开发，所以它的编程语法和jQuery完全相同。jQ.Mobi只包含jQuery API的子集，也就是appMobi认为给iOS和Android提供完全相同用户体验最重要的那部分。

jQ.Mobi由三个组件组成：

• 查询（query）程序库
• jQ.Ui——为WebKit浏览器提供的用户界面程序库
• jQ.Plugin——针对WebKit浏览器的插件支持

他们创建了一个演示来展现框架的功能。

人们为什么要在jQuery团队发布了jQuery Mobile 1.0两个月之后，又创建了新的基于jQuery的JavaScript框架呢？appMobi这样做的原因在于，jQuery植根于桌面浏览器，因此他们的移动版本并没有很好地优化，并且也无法在移动设备上——特别是在Android设备中——提供良好的体验。

jQuery团队的移动领域主管Todd Parker承认jQuery Mobile中存在一些问题，并且团队刚刚发布了维护版本（1.0.1），其中修正了大量缺陷，他们还会在1.2版本中提供更多小工具并做出改进。

查看英文原文：jQ.Mobi – jQuery Optimized for Mobile Devices

您可能感兴趣的文章

• jQuery-bind不能处理绑定hover事件
• 9个实用jQuery日历插件
• jQuery 操作css 设置样式
• JQUERY操作XML实例教程
• 不要滥用jQuery的$(this)
• 编写高性能的jQuery代码
• jQuery中的mouseenter和mouseleave事件
• 流动导航菜单-Fluid Navigation 使用Jquery+CSS创建
• 高亮显示文本中重要关键字（Jquery ）
• 12个用jQuery插件改变Button按钮的漂亮特效

1. Twimbow

Twimbow 是一个基于 HTML5 开发的 Web 应用，用于帮助用户管理他的社交网络，该应用色彩非常多样。

2. Aviary

Aviary 包含很多图像工具和向量编辑器，你可以在上面对图像进行一些特效处理而无需单独下载软件。

3. Gabereiser

用于方便的浏览照片的 HTML5 Web 工具

4. Body Browser from Google Labs

想看看你身体的内部结构吗，别把自己给吓着了 ：)

5. Coolendar

个人计划任务工具

6.CSSWARP

CSSWarp 可以帮你生成一些具有特效文字的 HTML 代码

7.Hootsuite

hootsuite 可以帮你检查各个社交网络上的最新更新信息

8. CSS 3.0 Maker

可视化的 CSS3 代码生成器

9.MugTug

MugTug 是一个在线的绘图工具

10. Scribd in HTML5

Scribd 同时也提供 Flash 版本，目前他们推出了 HTML5 版本 via flashuser

转自：http://tech.it168.com/a2012/0131/1305/000001305052.shtml

您可能感兴趣的文章

• HTML5来制作文件上传教程
• 网页也能有智能语音识别输入功能
• 2012年14个HTML5的大胆预言
• HTML5的11个让人难以接受的事实
• HTML5将推动Web App发展
• 不写代码也能开发HTML5游戏-可视化开发工具
• HTML5教程:图片黑白转换效果
• HTML5 canvas 元素详细教程七：基本的动画。
• HTML5 canvas 元素详细教程六：组合
• HTML5 canvas 元素详细教程五：canvas的变形

只要在你的输入框加入x-webkit-speech 参数即可让你的页面具有语音识别输入功能。

html代码：

<input type="text" name="inputBox" id="inputBox" x-webkit-speech />

是不是很强大，以后浏览器将无所不能！

您可能感兴趣的文章

• HTML5来制作文件上传教程
• HTML5开发的十大炫酷Web应用分享与推荐
• 2012年14个HTML5的大胆预言
• HTML5的11个让人难以接受的事实
• HTML5将推动Web App发展
• 不写代码也能开发HTML5游戏-可视化开发工具
• HTML5教程:图片黑白转换效果
• HTML5 canvas 元素详细教程七：基本的动画。
• HTML5 canvas 元素详细教程六：组合
• HTML5 canvas 元素详细教程五：canvas的变形

下面是来自百度、新浪、豆瓣前端的各自看法：

百度前端：
应该来讲有三条路，一个是向前走，一个是向后走，另外一个是一直做前端，深入下去。向前即是克军所说的往用户体验与交互设计甚至产品设计师上走，这是最能体现前端价值的了，即用户体验，大多人会往这方面走；

向后走就是做Web开发，往数据库和后台开发方面走，不再区分前后端，大家深入产品的研发实现，这条路就是与软件工程师融合的路，这是的价值就体现在对于业务功能的实现上；

最后还有的是一直深入做前端开发，比如前端各类库与框架的架构设计，W3C各种标准深入研究，对于JavaScript语言本身的研究，对浏览器的原理分析，对于网络传输协议的原理分析等等，这条路要深入下去很不容易，因为涉及很多原理与根本性的东西，所以走的人也不是很多。

当然了，还有一些彻底离开了前端甚至软件开发，转行专门做产品或者做业务运营。可能会因为有不错的技术背景有一定的优势呢。

新浪前端：
作为前端工程师最核心的价值或者说是责任，就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中，无疑离用户最近的人就是前端，其次是UI、UE和产品，然后是后端、DBA和系统工程师。

如果说一个技术开发团队就是一支足球队的话，那么前端工程师无疑就是前锋，他接到队友们倾力传到脚下的球，他责无旁贷，要做的就是必须将球准确无误地打入对方的球门….. 他有两点必须是非常清楚：1、他必须清楚在对方球门与自己之间存在着哪些阻碍；2、他必须清楚如何破除这些障碍将球直至门网….. 他也应该要是所有队员中对这两点最为清楚的人。

每个球队都有自己的明星，可以是锋线杀手、可以是中场战车、可以是超级后卫、也可以是神奇门将、甚至可以是救火教练。而且相信球场上任何一个位置的优秀球员，都有可能在后场断球长途盘带奔袭射门，球进！但任何一支优秀的球队都必须有两类分工，前场球员想的是赢得比赛，后场球员想的是不能输掉比赛，各司其职才能卓越。

而作为一名称职的前锋，你必须是球队里，进球最多、射门技术最好的那一个，否则你还有什么价值可言呢….

豆瓣前端:
认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可以靠不同技术分别实现，但要付出巨大的成本。这也是html5这个04年就提出来的标准，直到前两年才火爆的原因。

现阶段的价值也很大。web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资源。

我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。

随机日志推荐

控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令

Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中使用console.log(“Hello World”)，加载时控制台就会自动显示如下内容。

另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如，在网页脚本中插入下面四行：

console.info(“这是info”);
console.debug(“这是debug”);
console.warn(“这是warn”);
console.error(“这是error”);

加载时，控制台会显示如下内容。

可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

二、占位符

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

比如，

console.log(“%d年%d月%d日”,2011,3,26);
console.log(“圆周率是%f”,3.1415926);

%o占位符，可以用来查看一个对象内部情况。比如，有这样一个对象：

var dog = {} ;
dog.name = “大毛” ;
dog.color = “黄色”;

然后，对它使用o%占位符。

console.log(“%o”,dog);

三、分组显示

如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。

console.group(“第一组信息”);

　　　　console.log(“第一组第一条”);

　　　　console.log(“第一组第二条”);

　　console.groupEnd();

　　console.group(“第二组信息”);

　　　　console.log(“第二组第一条”);

　　　　console.log(“第二组第二条”);

　　console.groupEnd();

点击组标题，该组信息会折叠或展开。

四、console.dir()

console.dir()可以显示一个对象所有的属性和方法。

比如，现在为第二节的dog对象，添加一个bark()方法。

　　dog.bark = function(){alert(“汪汪汪”);};

然后，显示该对象的内容，

　　console.dir(dog);

五、console.dirxml()

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

比如，先获取一个表格节点，

　　var table = document.getElementById(“table1″);

然后，显示该节点包含的代码。

　　console.dirxml(table);

六、console.assert()

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

比如，下面两个判断的结果都为否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

七、console.trace()

console.trace()用来追踪函数的调用轨迹。

比如，有一个加法器函数。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道这个函数是如何被调用的，在其中加入console.trace()方法就可以了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

假定这个函数的调用代码如下：

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

　　console.time(“计时器一”);

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd(“计时器一”);

九、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

然后，就可以分析Foo()的运行性能了。

　　console.profile(‘性能分析器一’);

　　Foo();

　　console.profileEnd();

控制台会显示一张性能分析表，如下图。

标题栏提示，一共运行了12个函数，共耗时2.656毫秒。其中funcA()运行10次，耗时1.391毫秒，最短运行时间0.123毫秒，最长0.284毫秒，平均0.139毫秒；funcB()运行1次，耗时1.229ms毫秒。

除了使用console.profile()方法，firebug还提供了一个”概况”（Profiler）按钮。第一次点击该按钮，”性能分析”开始，你可以对网页进行某种操作（比如ajax操作），然后第二次点击该按钮，”性能分析”结束，该操作引发的所有运算就会进行性能分析。

十、属性菜单

控制台面板的名称后面，有一个倒三角，点击后会显示属性菜单。

默认情况下，控制台只显示Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上，则相关的提示信息都会显示。

这里比较有用的是”显示XMLHttpRequests”，也就是显示ajax请求。选中以后，网页的所有ajax请求，都会在控制台面板显示出来。

您可能感兴趣的文章

• firebug 使用方法详解

网页打开的最佳速度

2秒！

许多研究都表明，用户最满意的打开网页时间，是在2秒以下。用户能够忍受的最长等待时间的中位数，在6～8秒之间。这就是说，8秒是一个临界值，如果你的网站打开速度在8秒以上，那么很可能，大部分访问者最终都会离你而去。

研究显示，如果等待12秒以后，网页还是没有载入，那么99%以上的用户会关闭这个网页，不再等待。

但是，如果在等待载入期间，网站能够向用户显示反馈消息，比如一个进度条，那么用户可以忍受的时间会延长到38秒。

对访问者的心理影响

根据一些抽样调查，访问者倾向于认为，打开速度较快的网站质量更高，更可信，也更有趣。

相对应地，网页打开速度越慢，访问者的心理挫折感就越强，就会对网站的可信性和质量产生怀疑。在这种情况下，用户会觉得网站的后台可能出现了一些错误，因为在很长一段时间内，他没有得到任何提示。而且，缓慢的打开速度会让用户忘了下一步要干什么，不得不重新回忆，这会进一步恶化用户的使用体验。

这个指标对电子商务网站尤其重要。载入速度越快，就越容易使访问者变成你的客户，降低客户选择商品后、最后却放弃结账的比例。

不过，网站反应速度也不宜太快，否则用户会增加与服务器互动的频率，这可能加大出现错误的概率。

一些实证结果

Google做过一个试验，显示10条搜索结果的页面载入需要0.4秒，显示30条搜索结果的页面载入需要0.9秒，结果后者使得Google总的流量和收入减少了20%。

Google地图上线的时候，首页大小有100KB，后来下降到70~80KB。结果，流量在第一个星期上升了10%，接下来的3个星期又再上升了25%。

Amazon的统计也显示了相近的结果，首页打开时间每增加100毫秒，网站销售量会减少1%。

宽带与窄带的区别

有研究显示，宽带用户比窄带用户更没有耐心。宽带用户愿意忍受的最长等待时间，往往只有4～6秒。

网站制作者必须记住，在ADSL条件下，3~5秒就能载入的网页，在窄带条件下需要20~30秒才能打开。因此，网页总的大小——包括图片、Javascript和CSS文件的大小——不宜过大，这样对宽带和窄带用户都有利。

您可能感兴趣的文章

• JS 显示当前日期与时间的代码
• 2009年度最佳jQuery插件整理
• WordPress显示相对日期时间的代码

使用方法：

• 这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
• 下面符号列表的后面有两列编号，它们并不太一样，第一列是用于HTML的，你需要在前面加上&#符号；
• 第二列可以用于CSS文件中，但是需要用反斜杠\转义；
• 第二列也可以用于JavaScript，和CSS用法一样，不过要用\u来转义。

需要主意的是：

• 有的字符在不同的浏览器下表现不太一样；比如小雪人 ☃ 在Firefox和Chrome下不太一样，钻石 ◆ 在IE下要比Chrome下要大一点儿；
• 有的字符在某个浏览器下不会显示；当然原因并不是字符代码的问题，而是浏览器的bug，比如，–在Chrome下。。。
• 但是，98%的字符都能在所有浏览器下正常显示的，不过如果你真的要使用，最好仔细在各个浏览器下验证一番。
• 经测试这些字符在Android/iOS等智能终端的识别度比较差，所以，使用的时候要特别注意移动浏览器～～

各种箭头

• ⇠ 8672 21E0
• ⇢ 8674 21E2
• ⇡ 8673 21E1
• ⇣ 8675 21E3
• ↞ 8606 219E
• ↠ 8608 21A0
• ↟ 8607 219F
• ↡ 8609 21A1
• ← 8592 2190
• → 8594 2192
• ↑ 8593 2191
• ↓ 8595 2193
• ↔ 8596 2194
• ↕ 8597 2195
• ⇄ 8644 21C4
• ⇅ 8645 21C5
• ↢ 8610 21A2
• ↣ 8611 21A3
• ⇞ 8670 21DE
• ⇟ 8671 21DF
• ↫ 8619 21AB
• ↬ 8620 21AC
• ⇜ 8668 21DC
• ⇝ 8669 21DD
• ↚ 8602 219A
• ↛ 8603 219B
• ↮ 8622 21AE
• ↭ 8621 21AD

形状

• ⇦ 8678 21E6
• ⇨ 8680 21E8
• ⇧ 8679 21E7
• ⇩ 8681 21E9
• ↷ 8631 21B7
• ↶ 8630 21B6
• ↻ 8635 21BB
• ↺ 8634 21BA
• ⟳ 10227 27F3
• ⟲ 10226 27F2
• ⟰ 10224 27F0
• ⟱ 10225 27F1
• ↵ 8629 21B5
• ↯ 8623 21AF
• ⇵ 8693 21F5

向右的箭头

• ➔ 10132 2794
• ➙ 10137 2799
• ➨ 10152 27A8
• ➲ 10162 27B2
• ➜ 10140 279C
• ➞ 10142 279E
• ➟ 10143 279F
• ➠ 10144 27A0
• ➤ 10148 27A4
• ➥ 10149 27A5
• ➦ 10150 27A6
• ➧ 10151 27A7
• ➵ 10165 27B5
• ➸ 10168 27B8
• ➼ 10172 27BC
• ➽ 10173 27BD
• ➺ 10170 27BA
• ➳ 10163 27B3
• ➾ 10174 27BE

基本形状

• ▲ 9650 25B2
• ► 9658 25BA
• ▼ 9660 25BC
• ◄ 9668 25C4
• ❤ 10084 2764
• ✈ 9992 2708
• ★ 9733 2605
• ✦ 10022 2726
• ☀ 9728 2600
• ◆ 9670 25C6
• ◈ 9672 25C8
• ▣ 9635 25A3

标点

• « 171 00AB
• » 187 00BB
• ‹ 139 008B
• › 155 009B
• “ 8220 201C
• ” 8221 201D
• ‘ 8216 2018
• ’ 8217 2019
• • 8226 2022
• ◦ 9702 25E6
• ¡ 161 00A1
• ¿ 191 00BF
• ℅ 8453 2105
• № 8470 2116
• & 38 0026
• @ 64 0040
• ℞ 8478 211E
• ℃ 8451 2103
• ℉ 8457 2109
• ° 176 00B0
• | 124 007C
• ¦ 166 00A6
• – 8211 2013
• — 8212 2014
• … 8230 2026
• ¶ 182 00B6
• ∼ 8764 223C
• ≠ 8800 2260

法律符号

• ® 174 00AE
• © 169 00A9
• ℗ 8471 2117
• ™ 153 0099
• ℠ 8480 2120

货币

• $ 36 0024
• ¢ 162 00A2
• £ 163 00A3
• ¤ 164 00A4
• € 8364 20AC
• ¥ 165 00A5
• ₱ 8369 20B1
• ₹ 8377 20B9

数学

• ½ 189 00BD
• ¼ 188 00BC
• ¾ 190 00BE
• ⅓ 8531 2153
• ⅔ 8532 2154
• ⅛ 8539 215B
• ⅜ 8540 215C
• ⅝ 8541 215D
• ‰ 8240 2030
• % 37 0025
• < 60 003C
• > 62 003E

音乐符号

• ♩ 9833 2669
• ♪ 9834 266A
• ♫ 9835 266B
• ♬ 9836 266C
• ♭ 9837 266D
• ♯ 9839 266F

对号、错号

• 160 00A0
• ☐ 9744 2610
• ☑ 9745 2611
• ☒ 9746 2612
• ✓ 10003 2713
• ✔ 10004 2714
• ✕ 10005 10005
• ✖ 10006 2716
• ✗ 10007 2717
• ✘ 10008 2718

十字

• ☨ 9768 2628
• ☩ 9769 2629
• ✝ 10013 271D
• ✞ 10014 271E
• ✟ 10015 271F
• ✠ 10016 2720
• ✚ 10010 271A
• † 8224 2020
• ✢ 10018 2722
• ✤ 10020 2724
• ✣ 10019 2723
• ✥ 10021 2725

星星、星号、雪花

• ★ 9733 2605
• ✭ 10029 272D
• ✮ 10030 272E
• ☆ 9734 2606
• ✪ 10026 272A
• ✡ 10017 2721
• ✯ 10031 272F
• ✵ 10037 2735
• ✶ 10038 2736
• ✸ 10040 2738
• ✹ 10041 2739
• ✺ 10042 273A
• ✱ 10033 2731
• ✲ 10034 2732
• ✴ 10036 2734
• ✳ 10035 2733
• ✻ 10043 273B
• ✽ 10045 273D
• ❋ 10059 274B
• ❆ 10054 2746
• ❄ 10052 2744
• ❅ 10053 2745

杂项

• ☻ 9787 263B
• ☺ 9786 263A
• ☹ 9785 2639
• ✉ 9993 2709
• ☎ 9742 260E
• ☏ 9743 260F
• ✆ 9990 2706
• � 65533 FFFD
• ☁ 9729 2601
• ☂ 9730 2602
• ❄ 10052 2744
• ☃ 9731 2603
• ❈ 10056 2748
• ✿ 10047 273F
• ❀ 10048 2740
• ❁ 10049 2741
• ☘ 9752 2618
• ❦ 10086 2766
• ☕ 9749 9749
• ❂ 10050 2742
• ☥ 9765 2625
• ☮ 9774 262E
• ☯ 9775 262F
• ☪ 9770 262A
• ☤ 9764 2624
• ✄ 9988 2704
• ✂ 9986 2702
• ☸ 9784 2638
• ⚓ 9875 2693
• ☣ 9763 2623
• ⚠ 9888 26A0
• ⚡ 9889 26A1
• ☢ 9762 2622
• ♻ 9851 267B
• ♿ 9855 267F
• ☠ 9760 2620

手型、铅笔、笔

• ☜ 9756 261C
• ☞ 9758 261E
• ☝ 9757 261D
• ☟ 9759 261F
• ✌ 9996 270C
• ✍ 9997 270D
• ✎ 9998 270E
• ✐ 10000 2710
• ✏ 9999 270F
• ✑ 10001 2711
• ✒ 10002 2712

天空、植物

• ☽ 9789 263D
• ☾ 9790 263E
• ♂ 9794 2642
• ♀ 9792 2640
• ☿ 9791 263F
• ♁ 9793 2641
• ♃ 9795 2643
• ♄ 9796 2644
• ♅ 9797 2645
• ♆ 9798 2646
• ♇ 9799 2647

星座

• ♈ 9800 2648
• ♉ 9801 2649
• ♊ 9802 264A
• ♋ 9803 264B
• ♌ 9804 264C
• ♍ 9805 264D
• ♎ 9806 264E
• ♏ 9807 264F
• ♑ 9809 2651
• ♒ 9810 2652
• ♓ 9811 2653

象棋，扑克牌

• ♚ 9818 265A
• ♛ 9819 265B
• ♜ 9820 265C
• ♝ 9821 265D
• ♞ 9822 265E
• ♟ 9823 265F
• ♔ 9812 2654
• ♕ 9813 2655
• ♖ 9814 2656
• ♗ 9815 2657
• ♘ 9816 2658
• ♙ 9817 2659
• ♠ 9824 2660
• ♣ 9827 2663
• ♥ 9829 2665
• ♦ 9830 2666
• ♤ 9828 2664
• ♧ 9831 2667
• ♡ 9825 2661
• ♢ 9826 2662

希腊字母

• Α 913 0391
• Β 914 0392
• Γ 915 0393
• Δ 916 0394
• Ε 917 0395
• Ζ 918 0396
• Η 919 0397
• Θ 920 0398
• Ι 921 0399
• Κ 922 039A
• Λ 923 039B
• Μ 924 039C
• Ν 925 039D
• Ξ 926 039E
• Ο 927 039F
• Π 928 03A0
• Ρ 929 03A1
• Σ 931 03A3
• Τ 932 03A4
• Υ 933 03A5
• Φ 934 03A6
• Χ 935 03A7
• Ψ 936 03A8
• Ω 937 03A9

您可能感兴趣的文章

• jQuery的html()等方法介绍
• jQuery的html()等方法介绍
• contains和compareDocumentPosition 方法确定HTML节点

在IE中实现是非常简单的：

css代码：
span {  display:block;
width:500px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}

在FF中用上面的样式是实现不了的,因为text-overflow: ellipsis;是IE中特有的（非CSS标准）。现在在FF下看到的仅仅只是把多出的内容切除了。在FF中实现就要用到非常规的方法，一个标签作切除内容，再加一个标签作填补省略号用，并且加起来的长度就能超过容器的宽度。关于切除内容，这个已经基本上解决了，那就来说补省略号，不用JS，用CSS实现的话就要用到伪对象after。先从HTML下手，为span标签外再加一层p标签（可以加其它标签的）。

html代码：
<div>
<p><span>CSS实现文字超出宽度显示省略号</span><p>
</div>

我们再为这个P标签加样式：

css代码：
p:after{
content:"...";
}

因为省略号是有宽度的，下面要做的就是让span加省略号的宽度不大于容器宽度，并且让省略号紧跟内容的内容，下面就是解决上面

这些问题的CSS样式：

css代码：
p{clear:both;}
p span{
float:left;
max-width:475px;
}
p:after{
content:"...";
}

这里还要补充的一点是关于p和span的宽度用了“max-width”这个属性，IE不能解释该属性，而FF可以，这样就避开了IE对SPAN宽度的重新应用。上面说得有乱，归纳如下：

html代码：
<div>
<p><span>CSS实现文字超出宽度显示省略号</span><p>
</div>

css代码：
div{
width:500px;/*容器的基本定义*/
height:200px;
}

/* IE下的样式 */  p span{
display: block;
width:500px;/*对宽度的定义，根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/*FF下的样式*/  p{clear:both;}
p span{float:left;
max-width:475px;
}
p:after{
content:"...";
}

您可能感兴趣的文章

• 50个css3制作的漂亮效果教程
• Web 前端优化最佳实践之 CSS 篇
• 检测CSS是否溢出的脚本

RSS是网站共享的一种方式，一般会用在新闻和博客上。这种按顺序排列的网站如果提供RSS输出，那么用户就可以直接在客户端看到其最新更新和动态。即在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。它是一种可利用的营销手段，现在很多主流博客都支持RSS订阅。

您可能感兴趣的文章

• 如何优化网站内链建设
• wordpress博客seo优化指南
• 提高论坛网站流量的三点要素
• 找到适合自己站点SEO优化的金矿
• SEO的内部和外部的优化
• 如何使用seo网络排名优化软件
• 英文网站seo对搜索引擎优化的核心-关键字
• WordPress博客程序搜索引擎优化的六点经验
• 新手站长一定要看-不被k的seo方法
• Google内部SEO评估报告 优化页面描述元标签

+1按钮是谷歌为用户提供的一个工具，用于对谷歌搜索结果表示赞同。现在，只有当用户在某结果中一直逗留时，才会出现该按钮。或者该结果已经有这一按钮时，用户才能看见。

该搜索引擎提供商还还对图片搜索登陆页面的信号质量进行了微调，以提高图像结果的相关性，同时还为图片搜索提供更好的垃圾信息检测。

谷歌还改进了选择网站链接或搜索结果内网站链接的算法，帮助用户更好地浏览网页。谷歌表示，这一改进可以令搜索结果中出现与搜索者所在地区更匹配的信息。

谷歌还改善了日本区的即时预测搜索软件。该公司表示：“对于使用非拉丁字符的语言，许多用户会使用特殊的输入法编辑器进行查询。这一改进能更好地处理谷歌实时搜索中的日文查询。”

这一点非常重要，因为谷歌依赖即时搜索令搜索速度更快，而这也将带来更多的搜索量。

该公司还再次提高了内容的片段性。该功能允许Web专家对内容进行标记，以提高其在搜索引擎中的相关性。

为自动完成算法提供更好的基础设施。使用自动完成功能的搜索用户在搜索时，只须键入一个字母，甚至不用多键入一个字母就能自动匹配出搜索词。

谷歌也为音乐爱好者改善了搜索结果。

对于搜索引擎的改进，谷歌历来都是谨慎进行。该公司11月开始详述其搜索引擎的变化，以令其算法更透明。

面对联邦贸易委员会对其核心业务的反垄断调查，谷歌对这些改变进行了披露。欧盟委员会也对谷歌进行了审议。

您可能感兴趣的文章

• 谷歌WebGL浏览器图形技术Angle现雏形
• 微软必应挑战谷歌搜索引擎
• 发外链时需要注意的地方
• 使网站排名在前10的seo要素
• 如何查询及提高网站对搜索引擎的权重!
• 英文网站seo对搜索引擎优化的核心-关键字
• 怎么样优化关键词是对搜索引擎的友好
• google教您如何选择seo公司
• 学习SEO(搜索引擎优化)必须要看的15个经典效应
• 让谷歌快速收录最新文章

1.用户体验度。都说铁道部的网站，访问速度慢，经常打不开。而且付款成功却没能订到票。一般只有用IE浏览器才能打开，其它的浏览器打不开或者不稳定。访问速度慢，经常打不开，那说明带宽不够，或者是服务器不够好。付款成功却没能订到票，说明数据库存在明显的问题。只能是IE才能正常访问，那说明网页设计的并不合理，兼容性不高。以上几个都是对用户体验度造成致命的问题。如果不得已解决，在一般的网站都可能会用户流失等损失现象。当然作为铁道部的订票网站，不存在好怕什么客户流失等问题。

2.点击次数影响排名。自铁道部网上订票系统上线后，大多数还没有熟悉网址的用户就在百度里面搜索网上订票等关键词，然后找到铁道部。也就是在短短的一个月时间内，搜索“网上订票”铁道部网站排名第一，不管是在百度还是在谷歌搜索下(见下图)，不管网站有没有关键词和标题等等。同行的也都知道，一个词的大量搜索和网站的相关点击会极大的影响网站的排名。这也是搜索引擎的算法之一。

3.热点事件加快收录。大多数同行业的都很聪明，在最近这个“网上订票”这个事件出来之后，热词“火车票网上订票”这个词在百度指数热点上一度升至三十几万。所以有人在很多外链帖子或者博文上添加这些热词，当然也不是纯粹的加上热词，也有简单的描述等等。之后发现，博文等都被收录了，而且挺快的，有的基本上都是秒收。

您可能感兴趣的文章

• 使网站排名在前10的seo要素
• 如何使用seo网络排名优化软件
• RSS对网站SEO优化的好处
• 如何优化网站内链建设
• Google说小网站不需要XML Sitemaps也无所谓
• 利用百度自身产品增加博客外链的办法
• wordpress博客seo优化指南
• 提高论坛网站流量的三点要素
• 站长不要忽略你的网站首页-入口
• 找到适合自己站点SEO优化的金矿

搜索引擎排名如何跨入决胜之列?不少人认为，只要持续的做好外链、内容的更新，便可将权重累计上去。事实上，这的确是一个卓有成效的办法，但却是“没办法的办法”，其用意完全与SEO优化的初衷悖逆。二进制在这里要说的是，网站优化想要高效提升排名，做好基础优化，必不可少，且高效的优化方式更易使努力效果事半功倍。那么如何让网站内链建设的精益求精呢?

首先，我们要了解，网站内链优化到底需要优化哪些东西。有些链接的优化可以一概而过，而有些链接的优化则需要细心呵护的走好每一步。如何更快捷高效的提高内链优化呢?如下我们进一步了解：

一：内链描文本优化

内容中的描文本优化是建设出庞大内链的重要组成，那么其中有何技巧呢?在内链描文本中，大部分站长都犯着一个通病：描文本描首页URL。如此一来，只是单一的提升了网站首页链接的特定关键字在搜索引擎中的排名，但就网站整体权重的提升却大打折扣。通过观察“百度”自身我们可以发现，合理的关键字描文本更该遍布出全站的内页链接。以网站诸多的长尾关键字普及起来，来整体提升网站的权重。但我们不是百度，况且自身权重如果偏低的话，内链描文本越多，那么每个文本所分到的权重也将越少。因此二进制网络/贺贵江，建议站长：每篇文章中，描文本不要超过5个，最好定义为三个，头部一个重要描文本，可描首页链接，其它几个描文本则用来建设内链长尾词。

二：相关阅读优化

相关文章有什么用?其意义不仅仅是供用户参考到更多相关的东西，更重要的是可以使同类文章得到一个归类，加强文档相关性。同文章的归类，会形成一个专题，在搜索引擎规则中，相关性越强文章的链接，更易提升优化关键字的权重。另外一方面便是减少用户跳出网站的时间，搜索引擎在这方面也有权重划分。良好的归类，不仅会让网站留得住更多用户，更提升了搜索引擎从用户体验角度而赋予网站的权重，我们何乐而不为呢?同时TAG标签也大同小异，都是属于文章归档后提升长尾词与页面的优化。

三：导航权重划分

不要小看导航的作用，结构设计的若不合理，完全有可能使网站埋下降权的隐患，如：SITE首页不在第一，绝大部分因素都是因导航权重分配不合理酿造。同时还有一些网站，本身导航在搜索引擎看来根本不可见，却茫然不知。所以，二进制在这里建议广大站长：网站导航尽量少做各式各样的特效优化，更避免使用flash导航，以免影造成严重的全局优化危机。正确的导航优化更因严谨的遵守树形规则，依次分层进行优化，切记频道栏目主次链接交错试导航。

四：精优内部链接

内链不是越错综复杂越好吗?答案是否定的，所谓的“错综复杂”也必须建立在“杂而不乱”的基础之上进行优化。否则网站链接越多，网站则越向“链接工场”类型网站靠拢，试问那样的网站，搜索引擎还会青睐吗?而完善的内链优化，更要对网站的内部链接做出精简，如：利用“nofollow”去屏蔽无关紧要的超文本链接，“联系我们、评论”等等。同时再利用RObots.txt文件对一些重复性很强的链接进行屏蔽，加强最后的完善优化。

您可能感兴趣的文章

• RSS对网站SEO优化的好处
• wordpress博客seo优化指南
• 提高论坛网站流量的三点要素
• 找到适合自己站点SEO优化的金矿
• SEO的内部和外部的优化
• 如何使用seo网络排名优化软件
• 英文网站seo对搜索引擎优化的核心-关键字
• WordPress博客程序搜索引擎优化的六点经验
• 新手站长一定要看-不被k的seo方法
• Google内部SEO评估报告 优化页面描述元标签

1）网络之间的联系越来越紧密

2012年，HTML 5将会增加对更多实用API的支持，让网站彼此连接。例如，Facebook上运行在iframe标签中的Zynga游戏，通过使用新的postMessage API，将可以直接在Facebook框架内进行通信。而在HTML 5之前，窗口内的通信必须依赖远程服务器，或许借助让人爱恨交加的黑客。

除API外，HTML 5还将新增跨域资源共享(Cross-Origin Resource Sharing，即CORS)，这将有助于实现不同网站之间的信息共享。例如，通过CORS，初创企业可以为用户提供照片编辑服务，从Facebook上下载照片、编辑修改、重新上传。

由于HTML 5中许多新的语义信息，开发从web页面中提取信息的web工具将变得十分容易。我们将看到越来越多的糅合（mashup）服务，以及越来越好的浏览器模式（如阅读器和翻译工具）。

2）web浏览器的性能堪与iPhone媲美

2012年，web浏览器将开始支持通知推送、地理定位以及离线运行应用程序。部分浏览器很可能会采用类似iOS风格的用户界面，性能堪与iPhone媲美。

3）越来越多的应用开发将基于HTML 5

现在很多用户使用web应用发送电子邮件和分享图片等，但到2012年，越来越多的应用将支持HTML 5，届时，用户将看到大量类似Inkscape和Illustrator的HTML 5内容创作应用。

4）浏览器IE 10“王者归来”，大幅提升HTML 5性能

微软已投入巨资提升HTML 5性能，IE 10发布之际便是真正的“王者归来”之时。届时，IE将成为运行最快的浏览器，引领整个浏览器大潮。获得IE浏览器较好的支持也将成为开发HTML 5应用的动力。

5）浏览器厂商将涉猎应用商店业务

据悉，面对应用商店这块大蛋糕，浏览器厂商们已经开始蠢蠢欲动，而Google Chrome浏览器已经推出了自己的应用商店，很多其他的浏览器厂商很可能会纷纷效仿。其实，这对HTML 5应用开发者来说，是一个好消息，意味着更多的销售机会，而这些平台具体的支付系统和收入分成也将接踵而至。

6）至少有一个基于WebGL技术的重量级游戏发布

2012年，至少有一个AAA游戏公司会推出基于WebGL技术的3D游戏，或者是发布已有知名游戏的更新版本，如Team Fortress 2 或Assassins Creed。

7）越来越多的应用将使用离线缓存，支持脱机工作

离线应用缓存将极大地提升HTML 5应用的可用性和速度。通过查询本地数据库避免应用与服务器之间的往返通信，消除web应用的时延缺陷。

8）HTML 5广告将逐渐取代Flash广告

那些热衷于把来自iOS设备庞大流量货币化的网站站主们将诉诸于HTML 5广告。同时，越来越多的初创企业也将进军这个新兴市场，解决必将会面对的安全、创作工具等问题。既然HTML 5具备了Flash广告几乎所有的效果，以及部分Flash广告没有的效果，HTML 5广告取代Flash广告是迟早的事。

9）JavaScript将因更好的内存管理和类型数组，性能得到大幅提升

虽然JavaScript的速度确实已经很快了，并已成为世界上最快的脚本语言之一，但仍有提升空间。Google Chrome已经开始着手改进内存管理和垃圾收集算法。再加上各种类型数组，JavaScript的性能将不断得到改进，并逐渐赶超Java。

10）硬件加速将被越来越多的浏览器采用（不包括主流移动浏览器）

越来越多的浏览器厂商将效仿IE，学习和引入微软的硬件加速技术。而那些不采用该技术的浏览器将变得越来越缓慢臃肿，最终将在激烈的浏览器大战被淘汰，如Firefox。

不过，移动浏览器方面，可能要等到2013年才能有比较实质性的发展。

11）越来越多的人将通过移动设备玩简单的HTML 5游戏

2012年，可能会经常看到人们在自己的移动设备上玩各种简单的HTML 5游戏，如Zynga Poker、Words with Friends和Mafia Wars等，这些游戏即可在目的网站，也可在本地应用上运行。不过，移动设备上成功的HTML 5游戏将仅限于以下几种：菜单类、纸牌类、棋盘类、回合制多人游戏，以及头像定制游戏，而像Zynga “Ville”这种复杂、视觉密集型的游戏在2012年的发展空间可能不是很大。

12）Facebook将推出基于HTML 5的API，无缝整合第三方网站

2012年，一直致力于成为真正的web社交图谱的Facebook将充分利用各项新的HTML 5功能，开放基于HTML 5的API，更好地整合外部第三方网站和服务。

13）Facebook将无缝集成PC桌面端

拖放、文件系统访问、照片同步等功能将越来越模糊桌面和浏览器之间的界限，让社交图谱和传统的桌面体验联系更紧密。

14）苹果的移动浏览器Safari仍将拒绝HTML 5声音功能

早在iOS 3版本中，Safari就已兼容HTML 5的声音功能，但鉴于它给iTunes带来的竞争，苹果公司在iOS 4和iOS 5中禁用了绝大多数API。为保持对苹果生态系统的绝对控制，2012年苹果公司仍将不会启用HTML 5声音功能。

您可能感兴趣的文章

• HTML5来制作文件上传教程
• HTML5开发的十大炫酷Web应用分享与推荐
• 网页也能有智能语音识别输入功能
• HTML5的11个让人难以接受的事实
• HTML5将推动Web App发展
• 不写代码也能开发HTML5游戏-可视化开发工具
• HTML5教程:图片黑白转换效果
• HTML5 canvas 元素详细教程七：基本的动画。
• HTML5 canvas 元素详细教程六：组合
• HTML5 canvas 元素详细教程五：canvas的变形

HTML5整合进了很多新的特性，并且有可能提升Web编程模式。和每一个阅读技术资讯的人所知道的一样，没有任何一样东西能像HTML5对互联网造成更多改变。在代码中加入一些HTML5，网站会变得更快更炫。但是HTML5能为那些想要要网络上实现本地应用表现的人做什么可能不在此列了。

在享受了HTML5的新标签以及APIs之后，现在已经是时机来承认HTML5模式确实是有一些限制的。这些限制不但会让我们对HTML5的幻梦破灭，还有可能让我们在某些场合不再使用HTML5。

事实上是，尽管HTML5确实有很强大的功能，但它并不能解决所有问题。它的一些附加功能是非常强大的，能让Web apps成为native app的强有力的对手，但是安全问题、本地数据存储的限制、同步问题以及政治问题都会让我们减小对它的期望。毕竟，任何技术都是有其限制的。

下面是Web开发者也是前端开发需要接受的一些关于HTML5的事实。

事实1:安全是一场噩梦

客户端计算最根本的问题是用户最终拥有了对机器上运行的代码的控制权。在Web apps中，当浏览器拥有一个很强大的调试工具的时候，这种控制权比以往更容易被滥用。

当在浏览器中集成了一个Javascript的调试器比如Firebug，任何对Facebook、Google以及其他网站感兴趣的人都可以插入断点来查看代码。这对于了解网站是如何运行的是非常有利的，但对于安全问题来说却是一场噩梦。

想象有个变量的值是你想要改变的，Firebug或者其他一个浏览器调试器可以让你很容易地将数据改成你想要的任何数据。你想要通过改变你的地理位置来捉弄一下你的朋友吗？那么你可以修改浏览器中的进度和维度变量，让浏览器“处于”世界上的任何位置。所有你的Web应用的neat features都可以被修改，浏览器使得这样的修改比在本地应用中更为容易。

对于引发的安全问题，也是有些限制的。一些Javascript工具比如Google Web Toolkit和标准的编译器一样复杂，它们的输出是非常令人费解的。但是一些工具比如JavaScript Deminifier能解决这个问题。

威胁当然也跟应用性质有关。一个人通过改变浏览器上显示的经纬度来和朋友开玩笑说在环游世界的途中是一回事，而获得其他人的权限又是另外一回事了，这会带来威胁。一旦涉及到金钱，情况会更糟糕。所有这些都意味着基于客户端的HTML5是不能用来处理敏感数据的，每个人都应该对自己的能力加以警醒。

事实2：本地数据存储是有限制的

浏览器中隐藏的本地数据库让Web应用更容易在电脑上缓存数据。对任何一个在浏览器中享受这种台式机体验的人来说，这些数据库可以节省带宽，提升性能。然而它们肯定比不上本地应用的数据的强大功能。

HTML5的数据存储能力毫无疑问是很重要的功能，但是你仍然不能将存储的数据迁移到另外一台机器上，或是制作副本、备份、用另外一个应用打开。所有这些数据都是隐藏在浏览器之下的。

某种程度上说，这是最糟糕的一种情况。因为你要承担存储这些数据库的所有责任而不能对它有任何控制。

一些最新的浏览器可以让你看到在你的机器上创建了哪些数据库，但这些信息是有限的。Safari甚至可以让你能够删除数据库，但是你不能浏览这些信息或是将它们迁移到另外一台机器上，这些文件在设计之初就没有让它能够很容易迁移，尽管你可以做到这一点，如果你知道到哪里找这些文件的话。

你同样不能深入到文件中看到底存储了什么。当然，一个程序员可以看懂这些文件，但前提是他们研究清楚了文件格式并且做一些hacking。这些文件不像表单或者文本可以很容易地荣任何编辑器打开，使得它们不像本地应用那样容易被人们读懂。

事实3：本地数据可以被操纵:

用户可能并不拥有对数据的控制权，但是网站同样也被限制不能处理用户数据。用户换浏览器了？用户换机器了？很多Web开发者对此都无能为力。因为同步问题，他们不能让用户创建更多数据。

Web开发者也需要担心本地数据库的安全。尽管没有工具可以让用户可以很容易修改本地数据并升级权限，但服务器同样也没有能力去阻止用户做到。所有因为运行用户修改Javascript代码的安全漏洞同样会影响数据库。它们门户大开，等着有人写一个Greasemonkey脚本或一些本地代码去更改数据。

事实4：离线数据对同步是一场噩梦

HTML5的本地数据存储极大提升了离线使用Web应用的能力。唯一的问题是数据同步。

如果一个Web应用连接到网络上，它可以持续地将数据存储到云中去。而当应用离线时，应用中发生的数据就不能存储到云中。如果一个人切换了浏览器或者使用了不同的机器，就会出现副本，这时同步就会成为一个大问题。更糟糕的是，时钟本身就可能是不同步的，使得发现最新被保存的数据是不现实的。

当然，这对本地应用来说也一直都是一个问题，但是在本地应用中，为同步负责的是人，他可以通过查看文件名并改变日期来进行同步。但是因为HTML5并没有给用户对隐藏在浏览器之下的数据库的控制权，开发者必须提供用户界面让用户通过这个界面来管理同步问题。

这并非是一个完全棘手的问题。开发人员可以通过使用版本控制系统来处理这个问题，而现今的版本控制系统在处理这些问题上已经变得越发复杂了。但拥有这项技术并不意味着这是一个很容易使用的解决方案。合并不同GIT库是件很费时间的事情。HTML5开发者们需要先处理好这些问题，才能管理HTML5 Web应用的同步。

事实5：云端什么都没有向你承诺:

为HTML5将数据存储在云端而带来的所有结构性的问题来责备HTML5实际上不是件很公平的事情，但云端是一个必须的部分，因为云省去了安装软件和备份数据的麻烦。

由于HTML5本地数据存储的限制，大量Web应用存储仍然要保留在服务器端，但这可能是灾难性的。就在最近Facebook决定将不再使用一个基于Linux的插件来上传照片，结果，这个插件去掉的，同样被去掉的是通过这个插件上传的照片。

这样的例子比较少见，但是因为各种原因，它们正变得越来越多。你能确保那个可爱地免费提供他们的一切HTML5应用的新兴公司在几年后甚至几个月后还存在吗？你只能自求多福。

情况还更糟糕。正如很多Web应用所明确说明的那样，这些数据并不是你的，在大数情形下，你不能诉诸法律来恢复数据。有些更离谱的服务条款甚至说数据可以“没有任何原因”就被删除。

HTML5不仅没有避免这个问题，它的结构实际上是保证了任何由你的浏览器缓存的数据都会存储在云端，这些数据是脱离了你的控制的。HTML5的炒作说这是它的一个优势特性，但这实际上却很容易造成不利影响。

事实6：强制升级并非是每个人都想要的

有个故事，或许是杜撰的，说一个人使用Gmail账户和酒吧里认识的人保持着随意的联系。当Google+出现以后，所有的历史记录都出现了，因为Google+在论坛里自动连上了那些旧的地址。每天，这些旧名字和旧面孔都会出现询问是否要加入到论坛中去。

当Web应用公司需要升级的时候，他们会将所有人一次性升级。尽管这据说是为了让用户不再受升级安装文件之苦，但对于那些不想使用新特性的人来说，这确是一场噩梦。这不像上面是一个关于人们隐私的问题。新软件可能因为新旧软件包之间的依赖关系而经常崩溃。

事实7：Web Workers并不会处理优先级
Web Workers（译者注：一种新的 JavaScript 编程模型）是HTML5的一个非常耐人寻味的特性。与其去使用Javascript传统的wait、delay和pause命令，现在Web开发者可以拆分他们的命令并且整合到Web Workers的CPU hogs中。换句话说，HTML5 Web开发者可以让浏览器表现得像操作系统一样。

但问题在于，Web Workers并没有复制操作系统的所有特性。尽管它提供了一种方式来讲负载分支并分离，但是却没有方法来管理负载或是设置优先级。API只是让消息传入或者传出Worker对象。这就是它做的一切了，剩下的都交给浏览器了。

CPU丰富的应用比如code crackers会潜入流行网站的后台吗？用户被交给会周期性被窃取的网站了吗？病毒已经附在一切有用的软件上了，那么攻破网站就只是时间问题了。而用户面对这一切能做的很少，因为他们没有办法去监测或者跟踪Worker objects做了什么。电脑被重定向到指定网页的时候只会越来越慢。

事实8：格式不兼容比比皆是
HTML5引入了<audio>和<video> 标签，第一眼看上去，它们和图像标签一样好用。只要在其中加入一个URL，浏览器就会引入数据流。然而，如果它真有这么简单的话，为什么我浪费了两个星期来让所有主要的浏览器可以播放基本的音频文件呢？

个别浏览器构建者只实现了部分而不是全部的音频视频格式确实不是HTML5委员会的错。大家都是人，都想要争夺统治权。往往在一个浏览器上工作正常的文件到了另外一个浏览器上却不能工作了。开发者要如何测试这一点呢？API开发者非常聪明，他们加入了canPlayType函数，但就是这个函数也不是所有浏览器都支持的。

事实9：各浏览器的实现是独立的
HTML5的田园诗般的愿景是一回事，其实现的蹩脚的现实是另一回事。诚然，程序员正在尽他们最大努力来实现架构师的梦想，但就是有一些标签和对象无法正常工作。

例如，有很多理由去喜欢HTML5的地理定位API。它提供了对隐私的一定程度的包含，对精确度也有控制。要是它能一直一贯地工作该有多好——有的浏览器就会总是超时，这个浏览器还是不太聪明，因为它应该知道台式机上是没有GPS芯片的。

最后，人们会去抱怨浏览器没有完全实现HTML5的特性，而不是去责备API本身的结构问题。这一事实凸显了Web开发者在开发基于HTML5的Web应用时所面临的挑战。

事实10：硬件idiosyncracies带来新的挑战

抱怨某些浏览器构建者超出了职责要求而提供更好的性能表现似乎也不公平，但这并非是恩将仇报。一个法拉利拥有者在绕过了一个灯杆以后，他就会发现有时候额外的动力并非总是好事。

Microsof通过将IE和低端硬件驱动整合而提升了IE浏览器中画布对象（Canvas object）的性能。它甚至做了一些游戏比如pirateslovedaisies.com来显示其性能。

但现在程序员们需要注意这些附加功能是否能够实现，并且这些代码的运行速度也是无法保证的。

例如，pirateslovedaisies.com的游戏设计者设计了一个开关来开启或者关闭IE支持的特性。但是，有没有一个API来告诉你这些特性是什么呢？没有。最简单的方式是通过浏览器名字来进行测试并估算帧速率。很多游戏开发者都有多年经验来了解可用硬件的范围，唯一的解决方法就是禁止创新，但这将是Web开发者又要解决的一个新的问题。

事实11：政治一直都存在

有个叫Ian Hickson的人，是HTML5标准的主要起草者，也是生命的最高独裁者（the Supreme Dictator for Life）。我想他们这是在开玩笑，因为这样的头衔实在太不匹配了。标准的编写者只是在提出建议，浏览器公司的编码天才们才是最终做出决定的人。他们可以选择实现或者不实习某个特性，然后Web开发者就要去测试结果是否稳定。几年以后，标准就会根据与实现程度的匹配情况做出改变。

很多Javascript开发者将兼容性问题都留给了开发代码库的人，比如jQuery。这些层让我们不必去了解不同浏览器之间的差别。但是，这些代码在将来是否足够健壮？只有时间才会知道。

这个议题凸显了这个领域中最根本的问题。我们想要自由、创造性以及因为浏览器间的激烈竞争而产生的丰富特性。创新的脚步非常快，但是因为浏览器开发者都争相添加新的特性以赢得先机，使得各个浏览器之间有更多的不同。

但我们希望能有一个统一的指挥者这样就能获得稳定性。但是，对于独裁和自治间的争斗，从来都没有一个理想的解决方式。与其为这些差异头疼，我们或许想要听听Winston Churchill对下议院所说的话：“事实上，民主是一种最糟糕的政府形式，除非其他的形式都经过了一次又一次的试验。”

原文链接：11 hard truths about HTML5

您可能感兴趣的文章

• HTML5来制作文件上传教程
• HTML5开发的十大炫酷Web应用分享与推荐
• 网页也能有智能语音识别输入功能
• 2012年14个HTML5的大胆预言
• HTML5将推动Web App发展
• 不写代码也能开发HTML5游戏-可视化开发工具
• HTML5教程:图片黑白转换效果
• HTML5 canvas 元素详细教程七：基本的动画。
• HTML5 canvas 元素详细教程六：组合
• HTML5 canvas 元素详细教程五：canvas的变形