189 8069 5689
自HTML5标准的提出就得到非常多的关注，而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题，上周微软在技术大会上就表示目前微软正在开发的IE9将更加支持HTML5标准，但对于IE9是否将完全支持HTML5所有的标准，微软却表现的有点含糊其辞。HTML5标准能为网页带来更高效更洁净的代码，只有微软参与HTML5的设计工作，才能让IE浏览器识别更多的新元素。
站在用户的角度思考问题，与客户深入沟通，找到玉泉街道网站设计与玉泉街道网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟主机、企业邮箱。业务覆盖玉泉街道地区。
HTML5标准预计是在2022年向全世界发布，虽然目前距他发布的日期还有3年左右的时间，但是我认为它距离我们并不是那么遥远，目前很多网站的设计和开发都是在采用HTML5的标准。在HTML5标准的制定和推广方面，苹果、Google、Opera和Mozilla等知名的浏览器厂商都表现的比较积极，微软现在也开始付出行动了，从上周微软在技术大会公布的IE9细节来看，微软将采取一种谨慎的态度涉足网页标准。微软也曾表示：IE浏览器将以标准HTML5为核心。但是微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。
让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的，当然，如果觉得这样会影响你的网页打开速度，你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。
以下是html5的js文件中的代码:
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外，你也可以以下面这种方式把代码直接添加到网页中。
IE开发经理艾德里安巴特曼（Adrian Bateman ）就曾表示，IE团队希望分享自己对HTML5的看法，并参与制定该标准的讨论。巴特曼表示，尽管目前IE团队更多是提出问题，而非给出解决办法，但是公开讨论正是推动HTML5发展的最佳方式。相信无论IE浏览器是否能够继续支持HTML5标准，HTML5标准在全球广泛的使用已经是大势所趋。
HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。
HTML5的新标签元素有：
header定义页面或区段的头部；
footer定义页面或区段的尾部；
nav定义页面或区段的导航区域；
section页面的逻辑区域或内容组合；
article定义正文或一篇完整的内容；
aside定义补充或相关内容；
使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。以下就介绍几种方式。
方式一：Coding JavaScript
!--[if lt IE9]
script
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
/script
![endif]--
第二种方法：使用Google的html5shiv包（推荐）
!--[if lt IE9]
![endif]--
但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?
我们可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
!--[if lte IE 8]
noscript
style.html5-wrappers{display:none!important;}/style
div class="ie-noscript-warning"您的浏览器禁用了脚本，请a href=""查看这里/a来启用脚本!或者a href="/?noscript=1"继续访问/a.
/div
/noscript
![endif]--
这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。
HTML5的新增结构标签包括headerfooter等，在IE8-浏览器当中，需要借助JavaScript以及CSS来实现兼容。具体代码如下：
CSS代码
style
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
/style
JS代码（原生JavaScript，如下示范代码当中只包含4种新标签，其他新增结构标签同理）
script
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
/script
对于其他HTML5新增标签，不能够实现兼容问题。
资料来源：HTML5学堂（码匠） - HTML5 新标签兼容旧版本浏览器的方法
itjob老师教过为了方便兼容IE8中使用HTML5，可以使用JS的方法来使低于IE9版本的IE浏览器兼容。
!--[if lt IE 9]
script
(function(){
var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article','section','mark','abbr','meter','output','progress','time','video','audio','canvas','dialog'];
for(var i=tags.length - 1;i-1;i--){ document.createElement(tags[i]);}
})();
/script
![endif]--
第二种方法：使用Google的html5shiv包
html5uploader.js 兼容ie8方法如下：
拥有两个插件，一个是flash版本的uploadify，免费的。另一个是自己写的html5版本的，名叫html5uploader(好俗的名字。。)，再加一个适配器uploadadapter，用来决定在什么时候调用哪个插件。页面中只调用uploadadapter。关键的难题就在于，页面中的代码是只写一次的，不管是flash的还是html5的都得能识别出页面上的参数，这也就是我的山寨版本的插件做的事情，原flash版本的配置参数通通得识别并有效。幸好，已经实现了。
上demo
很多东西，一上demo就都清楚了。。。
[html] view plain copy
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script type="text/javascript" src="jquery.js"/script
script type="text/javascript" src="jquery.uploadadapter.js"/script
script type="text/javascript" src="jquery.loadscript.js"/script
style type="text/css"
/style
script type="text/javascript"
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg;*.png',
auto:false,
showUploaded:true,
baseurl:'.',//当前目录
multi:true,
removeTimeout:9999999,
uploadurl:'upload.php'
});
});
/script
/head
body
input type="file" name="file" id="upload" /
/body
/html
ie8下调用flash
firefox、chrome下调用html5
略有差异，ie8下圆角没了。。。如果不喜欢这个样式呢，就请打开css文件自己修改吧。
很简单的调用，可以看到在页面中使用的是uploadadapter，由它来决定调用哪个插件。俩个插件所需要的js文件和css文件都是异步引入的，此处用到一个小插件loadScript。参数没有写全，可以自己看源代码的注释~
uploadadapter中的调用情况是我需要的配置，你也可以随意修改。
四、相关文件注释
在此把文件夹中的文件做一个简要介绍：
/html5uploader html5上传插件，你也可以拿来单独使用
/uploadify3.2 flash上传插件，也可以拿来单独使用
/uploads 存放上传的文件
/jquery.loadScript.js 用于异步引入脚本的小插件
/jquery.uploadadapter.js 适配器，用来判断客户端类型，动态调用上传插件
/upload.php 后台处理程序，最基本的
五、上源码，注释很全哦
六、一个bug！！
很重的哦，我之前给疏漏了，在这里说一下，文件就不重新上传了
在jquery.html5uploader.js的158和164行，将$('.uploadify-progress')改为$('#'+file.index).fnd('.uploadify-progress')，否则上传多个文件会混淆。