《[互联网]HTML5分享报告20120718》由会员分享，可在线阅读，更多相关《[互联网]HTML5分享报告20120718（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 的移动端项目，转而开发 HTML5 工 具
2、。html5就是为了web app 而生的，HTML5强势崛起 将成为移动 互联网未来趋势。html5就目前是移动端的唯一 Web 标准。尽管面临各种各样兼容性的问题 ，html5仍然被不少人视为“荒漠中的甘露”。“html5将成为各种网络基础架构的 基石。因为在面对“后 PC 时代”让人眼花缭乱的各种智能终端时，一旦 html5 进 入成熟部署阶段以后，跨平台的诱惑将令人无法拒绝。Html5存在的意义？html5的优点即是“一次开发，多次分发”，使得一次设计适用 不同终端成为可能。信息流架构应用都是直接在web（或wap）端抓取数据， HTML5可以直接使用跨平台数据而不用使用后台API，大
3、大降低 研发、维护成本，而且呈现效果几乎没有什么区别。html5最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结 构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息。1、使代码更规范、架构逻辑清晰明了。2、利于脚本对DOM树节点的遍历，有利于程序员开展前端代码开发工作 。3、有助于提高搜索引擎收入质量并获得更高的SEO体验。html5很火，到底什么是html5html5就是html技术标准的第五版。我们平时谈到的html5一般指以html5
4、、css3、Javascript为 代表的最新Web前端技术(标准)。其中，html5和css3主要负责页 面结构、表现，Javascript负责行为。这是第一代适用于手机浏览的开发语言，可以用来创建手 机版网站，以及手机版“网络程序” 通俗说就是基于网站的程 序和插件，可以通过谷歌Chrome或苹果Safari等利用webkit开源 网页编译系统的浏览器访问，webkit就是 html5规范中的一部分 。说明：当然，光有技术标准远远不够，更重要的是各浏览器 对html5支持。因为html5应用需要类似浏览器这样的特定应用执 行环境。后面我们会说到各主流浏览器对html5的支持情况。html5
5、可以干什么？制作时尚的表单表单是Web设计的重要组成部分，常见的有注册表单、联系 表单以及反馈表单，表单设计应该在不影响用户体验和可用性的 前提下尽量美观，以吸引用户填写内容。html5可以干什么？开发丰富多彩的游戏尽管 HTML5 标准还在不断完善过程中，一些游戏开发者已 经使用 HTML5 开发出了非常有趣的游戏。html5可以干什么？以更直观的方式让数据可视化呈现 有的时候，你需要在网站中以更直观的可视化方式呈现大量 的数据或者信息，这个时候就需要图表解决方法帮助你实现。html5可以干什么？可以实现响应式web设计html5在移动领域的应用移动领域，这是HTML5最热门的运行场所。iP
6、hone可以和很多程序集 成，将你的程序显示在它的今日桌面，Android也支持需要的HTML5API，但 集成不够好。未来几年，支持HTML5的移动浏览器将如雨后春笋，将你的应 用向HTML5迁移是很明智的，因为HTML5将很好地运行在这些设备上。html5在移动领域的应用下面列举HTML5适合移动应用开发的几大特性： 1.离线缓存为HTML5开发移动应用提供了基础2.音频视频自由嵌入，多媒体形式更为灵活原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要 拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。 HTML5在这个方面完全不受限制，可以完全放在一起进行
7、处理。设计师要知道，如果新闻类、微博类、社交类应用的信息呈现中实现文字 与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在 原生方式实现起来还有困难。html5在移动领域的应用播放视频和音频 通过html5标签和，可以像访问图片一样播放视频和音频资 源。使用传统的方式播放视频和音频时，要使用和标签，并 且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复杂， 大堆得令人迷惑的代码。而html5视频和音频标签基本将他们视为图片，例如视频播放代码： 。宽高也可以像其它HTML标签一样定义：。 代码简洁明了。html5在移动领域的应用3.地理定位，随时随地分享位置
8、。html5在移动领域的应用充分发挥移动设备对定位上的优势，推动LBS应用发展。可以综合使用GPS、wifi、手机等让定位更为精准、灵活。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的 地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。设计师要知道，现在嵌入LBS功能的应用越来越多，这也是移动设备与台式 PC相比最大的优势之一，HTML5能把这个优势再度扩大化，好好想想怎么在你 设计的应用里用上吧！4、Canvas绘图，提升移动平台的绘图能力使用Canvas API可以简单绘制热点图收集用户体验资料设计师要知道，图片的移动、旋转、缩放？那都太基础了，自己画都是小 case，
9、至于怎么用，好好想想吧！html5在移动领域的应用5、丰富的交互方式支持提升互动能力：拖拽、撤销历史操作、文本选择等Transition 组件的移动效果Transform 组件的变形效果Animation 将移动和变形加入动画支持设计师要知道，HTML5提供的交互方式是非常丰富的，至于用不用得上， 那是你自己的事儿喽！html5在移动领域的应用如果想让你的移动应用更活泼更灵动，丰富的动效是不可少的 。运用丰富的动效可以让你的应用更具活力。html5在移动领域的应用如果想让你的移动应用更活泼更灵动，丰富的动效是不可少的 。运用丰富的动效可以让你的应用更具活力。html5在移动领域的应用6、实时通
10、讯以往网站由于HTTP协议以及浏览器的设计，实时的互动性 相当的受限，只能使用一些技巧来仿真实时的通讯效果，但 HTML5提供了完善的实时通讯支持。设计师要知道，应用中嵌入实时通信、信息内容进行实时提 醒，HTML5可以帮你实现。新浪聊天室，是用技术手段实现的仿真聊天室。使用html5可 是建立html5在移动领域的应用7、 CSS3 视觉设计师的辅助利器CSS3支持了字体的嵌入、版面的排版，以及最令人印象深 刻的动画功能。Selector 更有弹性的选择器（selector 对象：media）radius gradient shadow 圆角、渐变、阴影Border background 边
11、框的背景支持使用CSS3来完成部分视觉工作，载入速度快，节省代码及 图片，也为用户节约了带宽。 。html5在移动领域的应用8、档案以及硬件支持不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透 过拖拉的方式将档案作为邮件附件？这就是HTML5档案的功能中的Dragn Drop和File API。html5在移动领域的应用html5在移动领域的应用html5在移动领域的应用9、双平台融合的app开发方式，提高工作效率依照目前iPhone/Android 迅速提升市占率的情势来看，未来 如果想要在先进的智慧型手机上撰写应用程式，要不是选择使用 Objective-C + Cocoa
12、Touch Framework 撰写iPhone/iPad 应用程 式，就是选择Java + Android Framework 撰写Android 应用程式 ，如果想要同时支援两种平台，势必要维护两套程式码，对于刚 起步的小服务而言也算是个小有负担的维运成本。使用HTML5, CSS3 来撰写Web-based 的应用程序，若要同时支 持iPhone 及Android，几乎只需要维护一份程序代码，而且未来 若有其它移动装置拥有支援HTML5 的浏览器，那同样的WebApp 直接就多了一个支持平台。各主流浏览器对html5的兼容情况HTML5 Web 应用方面 HTML5 网页内嵌对象HTML
13、5 音频编码HTML5 视频编码 HTML5 各种表单对象目前，各种pc浏览器对html5的支持程度差异较大。 无论是MAC平台还是windows平台，chrome都以较大的优势胜 出，这可能是因为google向来都是新技术的热烈追逐者把。 其次是firefox 3.6和safari，而firefox的用户算是比较多的。而IE 对HTML5的支持比较差，ie9才开始支持html5 。 各主流浏览器对html5的兼容情况HTML5 Web 应用Safari 对 HTML5 Web 应用的支持最好，除了地理定位功能 ，其它都支持。各主流浏览器对html5的兼容情况HTML5 网页内嵌对象这应该是
14、HTML5 最令人期待的东西，内置的画布，视频， 音频等对象。全部支持的有 Chrome，Safari，Firefox 3.6， Opera 10.5。IE家族则全军覆没。html5可以实现的新特效HTML5 音频编码Opera 10.5 支持的最全面，IE 家族又是颗粒无收。其他浏 览器也不容乐观。各主流浏览器对html5的兼容情况HTML5 视频编码 H.264 任重道远。各主流浏览器对html5的兼容情况HTML5 各种表单对象Chrome 成绩最佳。这些表单对象让人想起了桌面程序。基于HTML5的响应式Web设计响应式Web设计基于HTML5的响应式web设计，一个适应性的设计，能自动
15、调整，以适应 不同分辨率的移动终端。 例如：下面这个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:/ http:/demo.html5cn.org/HTML5研究小组：http:/ plus ： http:/ ： http:/ ：http:/
