[互联网]html5分享报告

《[互联网]html5分享报告》由会员分享，可在线阅读，更多相关《[互联网]html5分享报告（32页珍藏版）》请在金锄头文库上搜索。

1、html5是web开发世界的一次重大的改变，事实上不管你是否喜欢，它都是代表着未来趋势。其实html5并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用HTML5。 html5存在的意义? html5 是什么？ html5可以干什么？ html5的应用 各主流浏览器对html5的兼容情况。 基于HTML5的响应式Web设计 html5优质资料分享,html5分享报告,Html5存在的意义？,有两个被视为 html5 的标志性事件： 1、2007年发布的 iPhone 拒绝支持 FLASH，只支持 HTML5； 2、2011年，Adobe 宣布放弃 FLASH 的移动端项目，转而开发

2、HTML5 工具。 html5就是为了web app 而生的，HTML5强势崛起 将成为移动互联网未来趋势。 html5就目前是移动端的唯一 Web 标准。尽管面临各种各样兼容性的问题，html5仍然被不少人视为“荒漠中的甘露”。“html5将成为各种网络基础架构的基石。因为在面对“后 PC 时代”让人眼花缭乱的各种智能终端时，一旦 html5 进入成熟部署阶段以后，跨平台的诱惑将令人无法拒绝。,Html5存在的意义？,html5的优点即是“一次开发，多次分发”，使得一次设计适用不同终端成为可能。 信息流架构应用都是直接在web（或wap）端抓取数据，HTML5可以直接使用跨平台数据而不用使用

3、后台API，大大降低研发、维护成本，而且呈现效果几乎没有什么区别。 html5最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息。 1、使代码更规范、架构逻辑清晰明了。 2、利于脚本对DOM树节点的遍历，有利于程序员开展前端代码开发工作。 3、有助于提高搜索引擎收入质量并获得更高的SEO体验。,html5很火，到底什么是html5,html5就是html技术标准的第五版。 我们平时谈到的htm

4、l5一般指以html5、css3、Javascript为代表的最新Web前端技术(标准)。其中，html5和css3主要负责页面结构、表现，Javascript负责行为。 这是第一代适用于手机浏览的开发语言，可以用来创建手机版网站，以及手机版“网络程序” 通俗说就是基于网站的程序和插件，可以通过谷歌Chrome或苹果Safari等利用webkit开源网页编译系统的浏览器访问，webkit就是 html5规范中的一部分。 说明：当然，光有技术标准远远不够，更重要的是各浏览器对html5支持。因为html5应用需要类似浏览器这样的特定应用执行环境。后面我们会说到各主流浏览器对html5的支持情况。

5、,html5可以干什么？,制作时尚的表单 表单是Web设计的重要组成部分，常见的有注册表单、联系表单以及反馈表单，表单设计应该在不影响用户体验和可用性的前提下尽量美观，以吸引用户填写内容。,html5可以干什么？,开发丰富多彩的游戏 尽管 HTML5 标准还在不断完善过程中，一些游戏开发者已经使用 HTML5 开发出了非常有趣的游戏。,html5可以干什么？,以更直观的方式让数据可视化呈现 有的时候，你需要在网站中以更直观的可视化方式呈现大量的数据或者信息，这个时候就需要图表解决方法帮助你实现。,html5可以干什么？,可以实现响应式web设计,html5在移动领域的应用,移动领域，这是HTM

6、L5最热门的运行场所。iPhone可以和很多程序集成，将你的程序显示在它的今日桌面，Android也支持需要的HTML5API，但集成不够好。未来几年，支持HTML5的移动浏览器将如雨后春笋，将你的应用向HTML5迁移是很明智的，因为HTML5将很好地运行在这些设备上。,html5在移动领域的应用,下面列举HTML5适合移动应用开发的几大特性： 1.离线缓存为HTML5开发移动应用提供了基础 2.音频视频自由嵌入，多媒体形式更为灵活 原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限

7、制，可以完全放在一起进行处理。 设计师要知道，如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在原生方式实现起来还有困难。,html5在移动领域的应用,播放视频和音频 通过html5标签和，可以像访问图片一样播放视频和音频资源。 使用传统的方式播放视频和音频时，要使用和标签，并且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复杂，大堆得令人迷惑的代码。 而html5视频和音频标签基本将他们视为图片，例如视频播放代码： 。 宽高也可以像其它HTML标签一样定义： 。 代码简洁明了。,html5在移动领域的应用

8、,3.地理定位，随时随地分享位置。,html5在移动领域的应用,充分发挥移动设备对定位上的优势，推动LBS应用发展。 可以综合使用GPS、wifi、手机等让定位更为精准、灵活。 地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。 设计师要知道，现在嵌入LBS功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化，好好想想怎么在你设计的应用里用上吧！ 4、Canvas绘图，提升移动平台的绘图能力 使用Canvas API可以简单绘制热点图收集用户体验资料 设计师要知道，图片的移动、旋转、缩

9、放？那都太基础了，自己画都是小case，至于怎么用，好好想想吧！,html5在移动领域的应用,5、丰富的交互方式支持 提升互动能力：拖拽、撤销历史操作、文本选择等 Transition 组件的移动效果 Transform 组件的变形效果 Animation 将移动和变形加入动画支持 设计师要知道，HTML5提供的交互方式是非常丰富的，至于用不用得上，那是你自己的事儿喽！,html5在移动领域的应用,如果想让你的移动应用更活泼更灵动，丰富的动效是不可少的。运用丰富的动效可以让你的应用更具活力。,html5在移动领域的应用,如果想让你的移动应用更活泼更灵动，丰富的动效是不可少的。运用丰富的动效可以

10、让你的应用更具活力。,html5在移动领域的应用,6、实时通讯 以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来仿真实时的通讯效果，但HTML5提供了完善的实时通讯支持。 设计师要知道，应用中嵌入实时通信、信息内容进行实时提醒，HTML5可以帮你实现。 新浪聊天室，是用技术手段实现的仿真聊天室。使用html5可是建立,html5在移动领域的应用,7、 CSS3 视觉设计师的辅助利器 CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。 Selector 更有弹性的选择器（selector 对象：media） radius gradient s

11、hadow 圆角、渐变、阴影 Border background 边框的背景支持 使用CSS3来完成部分视觉工作，载入速度快，节省代码及图片，也为用户节约了带宽。 。,html5在移动领域的应用,8、档案以及硬件支持 不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件？这就是HTML5档案的功能中的Dragn Drop和File API。,html5在移动领域的应用,html5在移动领域的应用,html5在移动领域的应用,9、双平台融合的app开发方式，提高工作效率 依照目前iPhone/Android 迅速提升市占率的情势来看，未来如果想要在先进的

12、智慧型手机上撰写应用程式，要不是选择使用Objective-C + CocoaTouch Framework 撰写iPhone/iPad 应用程式，就是选择Java + Android Framework 撰写Android 应用程式，如果想要同时支援两种平台，势必要维护两套程式码，对于刚起步的小服务而言也算是个小有负担的维运成本。 使用HTML5, CSS3 来撰写Web-based 的应用程序，若要同时支持iPhone 及Android，几乎只需要维护一份程序代码，而且未来若有其它移动装置拥有支援HTML5 的浏览器，那同样的WebApp 直接就多了一个支持平台。,各主流浏览器对html5

13、的兼容情况,HTML5 Web 应用方面 HTML5 网页内嵌对象 HTML5 音频编码 HTML5 视频编码 HTML5 各种表单对象 目前，各种pc浏览器对html5的支持程度差异较大。 无论是MAC平台还是windows平台，chrome都以较大的优势胜出，这可能是因为google向来都是新技术的热烈追逐者把。 其次是firefox 3.6和safari，而firefox的用户算是比较多的。而IE对HTML5的支持比较差，ie9才开始支持html5 。,各主流浏览器对html5的兼容情况,HTML5 Web 应用 Safari 对 HTML5 Web 应用的支持最好，除了地理定位功能，其

14、它都支持。,各主流浏览器对html5的兼容情况,HTML5 网页内嵌对象 这应该是 HTML5 最令人期待的东西，内置的画布，视频，音频等对象。全部支持的有 Chrome，Safari，Firefox 3.6，Opera 10.5。IE家族则全军覆没。,html5可以实现的新特效,HTML5 音频编码 Opera 10.5 支持的最全面，IE 家族又是颗粒无收。其他浏览器也不容乐观。,各主流浏览器对html5的兼容情况,HTML5 视频编码 H.264 任重道远。,各主流浏览器对html5的兼容情况,HTML5 各种表单对象 Chrome 成绩最佳。这些表单对象让人想起了桌面程序。,基于HTM

15、L5的响应式Web设计,响应式Web设计 基于HTML5的响应式web设计，一个适应性的设计，能自动调整，以适应不同分辨率的移动终端。 例如：下面这个demo,一次html5适配，根据移动设备浏览器分辨率的不同而呈现不同的布局。 应用这一设计的网站：http:/ http:/staffanstorp.se/ http:/foodsense.is/ http:/ http:/ http:/www.alsacreations.fr/,基于HTML5的响应式Web设计,响应式Web设计，基于HTML5技术 ,响应不同终端尺寸原理： 基于HTML5完成页面基本架构 根据不同浏览器宽度调用不同的css样式，实现不同的效果。这个过程是通过CSS3的Media Queries来检查浏览器可视窗口的大小。 浏览器宽度大于1024px是，页面宽度设为980px，采用固定布局； 浏览器宽度大于650px而小于980px时，采用液态布局； 浏览器宽度小于650px时，基于用户体验的考虑，应该选择单栏布局， 当浏览器宽度小于480px时，需要特别处理，使布局能适应于智能手机。,关于html5的学习资源,前端： http:/ HTML5中国： http:/demo.html5cn.org/ HTML5研究小组：http:/ W3C plus ： http:/ 博客源 ： http:/ 移动应