2014年HTML54401629.pptVIP

拥抱HTML5 2011.11.15 胡玉玺 HTML5 为什么要用HTML5？ 如何兼容HTML5? HTML5使用的基本特性 Web开发简述和移动APP框架开发简述 浏览器兼容分析 结论 为什么用HTML5？-HTML5 HTML5是互联网发展的必然产物，是“网页（Web Page）”向“网应用（Web Application）”升级的工具 HTML5不是用户应用的迫切需求，更多是厂商们试图改变软件生态格局的战略需求. 为什么用HTML5？-HTML5 实现 2D 绘图的 Canvas 可控媒体播放 离线存储 文档编辑 拖放 跨文档消息 和 Ajax 开发数据驱动的交互式应用程序 移动平台浏览器有更快的加载速度 为什么用HTML5？-HTML5 Adobe已经宣布不再在移动设备上支持Flash，转而发展HTML 5技术。那么作为开发者的各位，也要赶快转换思路了。 今天Google Swiffy发布了一个Flash扩展，它可以作为一个扩展安装到Flash Professinal软件里，在Commands目录里即可直接将你以前制作的Flash快速转换为HTML 5。 兼容HTML5-HTML5 1，页头head标签加载文件： !–[if IE]script src=”/svn/trunk/html5.js”/script![endif]– 2，页头head标签加载JS代码： !–[if IE]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(’,),i=e.length;while(i–){document.createElement(e[i])}})()/script![endif]– 特性-HTML5 1, 取消了一些过时的HTML 4标签，其中包括已被CSS取代的纯粹用作显示效果的标签，如font和center，以及一些透过DOM的网络行为。 被取消的标签列表：acronym、applet、basefont、big、 center、dir、font、frame、 s、 isindex、noframes、 frameset 、 strike、tt、u和xmp 特性-HTML5 3 新增audio和video标签使得浏览器不需要插件即可播放视频和音频 特性-HTML5 4 表单增强。 4.1 新的input color email date month week time datetime datetime-local number range search url 颜色选择 邮件地址校验 年月日选择 月日选择 年周选择 时间（小时和分钟）选择 UTC年月日时间选择 本地年月日时间选择 数字选择并校验 包含在一定范围内的数字值选择，显示为滑动条 用于搜索域，比如站点搜索或google搜索等 特性-HTML5 4 表单增强。HTML5为表单提供了几个新的属性、input 类型和标签。 4.2 新的属性 required autofocus pattern list autocomplete Placeholder form 规定必须在提交之前填写输入域（即不能为空） 规定在页面加载时，域自动地获得焦点 规定用于验证input域的正则表达式 规定输入域的 datalist 规定 form 或 input 域应该拥有自动完成功能 提供一种提示（hint） 规定输入域所属的一个或多个表单 还有： formaction - 重写表单的 action 属性 formenctype - 重写表单的 enctype 属 formmethod - 重写表单的 method 属性 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性 特性-HTML5 4 表单增强。HTML5为表单提供了几个新的属性、input 类型和标签。 Opera能支持该范例的大多数特性，少部分可以在Chrome和Safari上运行 特性-HTML5 5 WEB绘图——canvas 5.1 基于javascript的2D绘图 特性-HTML5 5 WEB绘图——canvas 5.2 基于WebGL的3D绘图 WebGL完美地解决了现有的W