TOMMYHU

HTML5为Web开发者提供了很多强大的新特性，但是它的一些特定的限制会让它无法和本地应用匹敌。

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

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

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

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

　　事实1:安全是一场噩梦

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

很不赖的hack速查表，直接点击打开
hack速查表

前端必备技能拓扑，下面这个图片可以让我们很清楚的了解到web前端开发都需要什么样的工具，包括调试，编辑及服务器端需要的各种工具。
前端人员需要懂得很多知识，通过网络搜索整理如下，word2003版本，欢迎下载！

SimpleUI 是一基于jQuery开发的一套插件库  

SimpleUI 1.0 实现了以下功能：
    require(动态加载资源)
    Drag(拖动)
    Drop(拖放)
    Resize(动态调整大小)
    Selectable(鼠标拖选)
    AutoComplete(自动完成)
    Dialog(模拟弹窗)
    Pagination(分页)
    Slide(幻灯片)
    Tab(选项卡)
    每一个功能我们都有详细的DEMO和文档介绍，欢迎大家使用！
    您在使用中有任何问题都可以在本板块发帖，我们会尽快给予答复！
    官网：http://www.simpleui.org/
    下载：http://code.google.com/p/simple-ui/downloads/list

1、关于页面元素的引用
通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的，调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。
如：$(document.getElementById(”msg”))则为jQuery对象，可以使用jQuery的方法。
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法。
以下几种写法都是正确的：
$("#msg”).html();  
$("#msg”)[0].innerHTML;  
$("#msg”).eq(0)[0].innerHTML;  
$("#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jQuery对象，而get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$("div”).eq(2).html();    //调用jQuery对象的方法  
$("div”).get(2).innerHTML; //调用dom的方法属性

如何设置预览图片自适应(保持原比例)？
function resizeImage(image, max) {     if (Math.max(image.width, image.height) > max) {         if (image.width > image.height) image.width = max;         else image.height = max;     }     return true; } 　　 <img onload="var max=64;if(Math.max(this.width,this.height)>max){if(this.width>this.height)this.width=max;else this.height=max;}" src="/test.jpg" /> 或者 <img onload="return resizeImage(this,64)" src="/test.jpg" />

在Web应用程序中浏览器很重要，Web程序依赖浏览器。微软之前的IE版本，如IE6、IE7， 如果同时打开两个窗口会产生两个会话，彼此互不影响。但在IE8、IE9中情况截然不同，IE8、IE9存在SESSION共享的问题，虽然可同时打开多个窗口，但他们共用了一个会话。

Session共享给应用程序带来了很大的方便，但在带给用户方便的同时，也给应用程序带来了一定的风险。尤其是企业级的应用程序，一旦出现数据错误，可能带来严重的后果。
除了开发人员在应用程序开发过程中要注意并利用浏览器的这个特性外，测试人员和用户也应该了解此特性，通过人为控制浏览器的这一特性，使浏览器的这个特性更好的为我们服务。

当然，微软为我们提供了很好的解决办法，通过下列方法打开的窗口不会共用会话：
第一种：
用户通过菜单 文件 > 新建会话（或File > New session）打开新窗口

第二种：
使用命令行参数 iexplore.exe -nomerge 打开浏览器

第三种：
修改浏览器的快捷方式属性，在 C:\Program Files\Internet Explorer 文件夹下，通过iexplore.exe 新建一快捷方式至桌面，在桌面的快捷方式上点击右键选择属性，修改“目标”为 "C:\Program Files\Internet Explorer\iexplore.exe" -nomerge
通过此快捷方式启动的浏览器不会共享会话。

第一种和第三种比较容易接受而且易于使用，建议普通用户使用第一种（从不共享Session），只需要修改一次，操作简单。

测试人员在测试Web应用程序时，如果需要同时使用多个用户登录同一Web站点进行测试，那么必须修改此属性，否则数据经常会出现混乱。用户也是如此，如果需要同时在同一Web站点登录多个用户，同样必须修改此属性，以保证数据的准确。

IE的这一属性，应该写入用户手册的注意事项中。

在下面介绍一款jQuery的模板插件 tmpl，是由微软想jQuery官方贡献的模板插件，网址：http://api.jquery.com/jquery.tmpl/。
    Tmpl提供了几种tag：
${}：等同于{{=}}，是输出变量，通过了html编码的。
{{html}}:输出变量html,但是没有html编码，适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑，$value访问迭代变量。
下面一个简单的模板tmpl实例：（代码最能说明一切）

效果：