html5技术调研报告（通用16篇）
摘 要：互联网的迅速发展和普及，带动了智能手机、平板等移动设备走向了更广泛的市场，在日常生活和工作中占据着越来越重要的作用。与此同时，APP的开发与应用也成为开发人员的一项核心工作。文章从HTML5 Web技术的新特性、优势出发，分析阐述了基于HTML5 Web技术下的APP快速开发，并以“云端”APP为案例简单阐述了HTML5 Web技术的运用，希望可以为开发人员提供一些经验的参考。
关键词：HTML5 Web技术；APP快速开发
互联网的发展为智能移动设备的发展及广泛应用创造了有利环境，互联网的可移动性，让移动应用的开发成为近两年来最为炙手可热的行业。也正是由于互联网的可移动性，让移动应用的种类有了更为全新和明显的特点。目前，移动操作系统也呈现出多元化，如IOS，Android，Windows等。这样一来，要想实现APP的快速开发，就必须依赖于一种高效通用的技术。HTML5技术的多种新特性和跨平台特点正迎合了移动平台多样性的需要，使快速开发各种移动APP成为现实，对互联网的发展和移动APP的推陈出新起到了极大的推动作用。移动APP作为移动设备的主角，直接影响到投资商、网络供应商等各个层面。由于其覆盖面广、简便快捷等优势，移动APP受到了个人及商业用户的广泛青睐和追捧，如何实现App的快速开发成为开发人员成为一个关键问题。HTML5技术的新特性
（1）为移动平台定制的表单元素：现代移动设备一个最为明显的特点就是触摸屏，与传统按键输入方式一个本质的不同是，它采用虚拟键盘输入数据。这就必须考虑到屏幕面积的限制，因此为获得更为方便舒适的体验，就要合理布局虚拟键盘的按键。例如：在输入不同内容时显示相对应的键盘，既能将虚拟键盘的现实面积降到最少，还可以提高用户的输入效率。（2）Canvas绘图：动画、图像等的动态产出及渲染效果，可以说是智能设备的一个标志性特征。传统的Flash插件在移动设备上表现出的低效性和不稳定性显然是不能满足用户需求的。而新的Canvas API很好地为这一问题作出了解答，开发人员可以彻底摆脱Flash 插件而直接选择Java Script来针对用户需求实时渲染图形。（3）音频和视频：处理移动设备上的音频和视频是一个关键问题，HTML5为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，且不需要插件，极大程度上简化和统一了不同素材音频和视频的处理，摆脱了原生应用的不便性和低效行。（4）地理定位：HTML5的地理定位API综合利用了GPS，IP地址、WiFi热点等方式，极大地提高了定位的灵活性和准确性，成功克服只用GPS定位和基站定位的缺陷。（5）本地存储：虽然互联网的应用日益广泛，但受到天气、地理位置等众多因素的干扰，仍然会遇到网络信号不好的情况，对使用造成限制。HTML5 Web Storage API提供了保证离线可用性的解决办法，它不仅摆脱了如Cookies的对容量大小的制约，用法也更加灵活。（6）Web Workers：Java Script多线程编程的成功实现可以说得上是HTML5技术的一个最为明显的进步，它的出现无疑给了一些在浏览器上不能实现的应用以翻身的契机。而Web Workers的最主要作用也就是赋予浏览器运行Java Script的一种标准的方式。在运用Web Workers时，用户所运行的线程数量是并没有太严格的制约，也就是说，用户在同一时间内运行的多个线程也是允许的，用户在某一网页上输入或是移动时，这些背景线程就同时进行着复杂的数学计算，然后生成网络请求或者访问本地存储。HTML5具有的巨大优势
（1）“一次开发，多平台使用”是对HTML5快速开发应用的最准确概括。开发者无需在修改移植上多花时间，极大地提高了效率，在应用的维护上，也只需要将重点集中在一个版本上，因此表现出明显的优势。对于用户而言，这种应用开发的模式也让APP的更新更加快捷简单，而不需要太多的人力投入。（2）HTML5使固定端与移动端的连接成为可能，它们不再只是2个单独的个体，这使得资源和数据得以更好地共享与传递。（3）丰富了应用发布的渠道和方式，在这之前，一个APP要想上架必须经历一个严格又漫长的审核过程，并且很可能被数以万计的应用所埋没。而如今，应用发布和推广可以有多种渠道，如各种社交平台、贴吧等。（4）丰富了盈利的模式和方法，如建立并发展自己的应用平台。一方面，APP开发者，尤其是游戏类APP的开发者，通过与社交平台建立合作伙伴关系，在平台上推出相关应用，利用HTML5的移植功能进行广泛宣传，在成功吸引用户后，利用购买附加服务，如游戏道具等来获得收益。另一方面，利用手机话费进行快速支付逐渐成为各大运营商盈利的手段之一。特别是对于一些支付手段还比较落后的市场，这种第三方支付的方式与市场需求更加相符。基于HTML5Web技术APP快速开发
与Native App相比，Web App开发具有诸多优势。首先，APP开发成本较低。只要合理使用网络开发技术，应用程序的开发就并不难，轻而易举就可以完成。再者，APP升级的过程得到极大简化。升级的过程是智能完成的，甚至可以不必通知用户，服务器可以更新文件，在这一过程中用户并没有感觉；最后，从根本上来说，它就是一个站点，所以维护的过程也并不复杂，就如同一般的网页。
也正是网络的灵活性，吸引着众多的应用开发公司将未来发展的目光投向网络。两者具备在网络上完成任务的优势，并且在离线的情况下也不耽误任务的进度。在HTML5的支持下，离线应用已经成为现实，这主要是由于它的应用缓存和客户端存储（如本地存储、索引数据库）等性能。在开发中，这项技术的实现需要依赖3种功能：（1）离线资源缓存：HTML5通过Cache Manifest缓存清单指明Web App在离线工作时所需的资源文件，并支持自动和手动2种缓存更新方式。（2）在线状态检测：HTML5提供了Navigator.online属性值判断和Online/Offline事件监控2种检测方式。（3）本地数据存储：HTML5提供Web Storage和Web SQL Database2种存储机制：Web Storage是在客户端以key-value形式保存数据的功能，类似于HTML4中的Cookie，但安全性更好；Web SQL Database是HTML5追加的新功能，它允许用户在客户端通过Java Script操作数据库。
HTML5 Web 技术应用：“云端”APP办公软件开发
“云端”APP是以“高质量的文件社交体验”为目标的，其范围包括我国高校及各事业单位。它的各项功能通过ajax来实现前后台数据的交互。采用H5+CSS3+JS编写的前端，用java编写的本地端，采用JS Ajax+PHP+网+节点服务器，由彼此的终点联通。
（1）云端保存文件：云端APP针对的对象大部分为学生以及企业人员，工作流程可以概括为：首先，用户要在移动端下载该APP，并申请注册账号，然后在注册成功后，就可以将文件上传至网盘中了，操作过程并不复杂。（2）用户资源的共享：用户在使用云端APP时需要注意的是，用户所上传文件的默认状态是公开的，也就是说，一旦文件内容触犯他人隐私或违反了相关法律条文，上传者极有可能承担相应的法律责任。所以为了避免此类事件的发展，用户一定要做好文件的审查工作。（3）用户间在线交流：为了方便相互之间的交流，“云端”APP还设置了类似社交软件的互加好友、在线交流等功能，为用户间的交流提供快速通道。（4）APP实现： HTML5+CSS3，Java Script，Java、Ajax，PHP，.Net、Node JS等语言实现。（5）APP难点：网络与设备的相互连接；云文件数据库；文件目录结构的分析；不同类型文件的查看。（6）APP特色：用户可随时共享文件、对文件进行审查或评论、选择自己所需要的高质量文件；云端APP使用Web+Java+Ajax完成，这种混合型APP具有成本低廉，同步操作性强，与其他各平台能较好兼容等诸多优势，因此开发者也不需要再不同类型的平台再开发使用界面，且更新及维护的过程简单，大大提高了开发的效率。另外，这种混合型的APP在出现错误时，开发者也能及时发现并进行修改和更新。HTML5 Web技术的发展趋势
随着网络信息化时代的快速发展，HTML5Web技术发展的越来越快，由早期的Wap1.0，Wap2.0模式逐渐转向了HTML5 Web技术，经过了一个漫长的研究开发过程，但是，互联网应用更新换代越来越快，以后HTML5 Web技术必将克服开发周期长、难度大的困境，丰富平台内容，改良交互式体验方式，实现离线访问，实现真正意义上的一次开发、多平台使用，提高软件的实用性。把单一的建设主体向多元化转变，结构层次更加复杂，服务内容涵盖全面，创新各种应用类型，提高APP系统的安全性，实现跨平台访问。大幅度降低HTML5 Web技术开发的难度，用户使用界面更加丰富，提高了操作效率。但是随着技术的进步，各项后台服务的压力也会增大，功能的增加促进了网络信息化交流技术的增长。要想提高HTML5 Web技术，还需要投入大量的人力物力。结语
HTML5的出现给软件的开发带来了全新的变革，尤其在移动APP的快速开发中，HTML5 Web技术对各种操作平台都将产生深远的影响。随着时代的进步和网络技术的发展，一股重大的网络变革正在酝酿，并将在不久的将来向我们席卷而来，只有顺应时代的发展，不断进步，积极创新，才能跟上时代发展的主流。在互联网高度发达的今天，人们对智能设备的使用需求越来越高。而移动APP作为主角，尤其承担起满足广大用户，特别是年轻用户对全媒体的强烈需求的任务。如何在新技术的支持下，开发出富有创意的应用软件，提供更为人性化的服务，是一项需要共同实践的工作。
[参考文献]
[1]王庆.基于HTML5的移动Web技术[J].软件导刊，2013（12）：89-90.[2]谢强，牛现云，赵娜.移动数字图书馆服务体系研究[J].图书情报工作，2013（4）：6-10.[3]彭涛，杨炼.基于移动浏览器的HTML5核心技术的研究及其应用[J].广东通信技术，2012（4）：47-50.Analysis on APP Rapid Development under Web HTML5 Technology
Huang Hailing
（Guangxi Yinghua International Career Academy，Qinzhou 535000，China）
关键词：HTML5,智能终端,应用,发展
1 HTML5的概述
HTML5是万维网联盟用于取代1999年所制定的HTML 4.01和XHTML 1.0标准的HTML标准版本。它的第一份正式草案于2008年1月公布, 2014年10月该标准规范制定完成, HTML5的发展势头和应用前景气势如虹[1]。
1.1 HTML5的核心特点
HTML5使Web网页的表现性能提高, 可描绘二维图形, 准备了用于播放视频和音频的标签。HTML5追加了本地数据库等Web应用的功能, 内嵌一个本地的SQL数据库, 以加速交互式搜索、缓存以及索引功能。增强了设备的兼容性, 提供了丰富的数据与应用接入开放接口, 使外部应用程序可以直接与浏览器内部的数据相连[2]。
1.2 HTML5的支持情况
目前支持HTML5的国际IT公司有:谷歌, 微软公司, 脸谱公司, 英特尔公司, 苹果公司, Mozilla公司等。支持HTML5的操作系统有:微软的Win8操作系统, 苹果的IOS操作系统, 谷歌的Android操作系统, Mozilla公司的火狐OS操作系统, 塞班公司也表示将在不久的将来发布支持HTML5的操作系统BBX和Simbian3。在浏览器方面, 支持HTML5的通用浏览器有国际的IE9, 火狐, Chrome, 国内的傲游, 360, 搜狗等;手机浏览器有国际的Safari, Opera, 国内的UC浏览器, 百度手机浏览器, 海豚浏览器, Q立方浏览器, 天天浏览器等[3,4]。
2 HTML5在智能终端设备上的应用
HTML5技术目前已经涉足许多产品领域, 在传统领域, 如智能手机、平板电脑、掌上电脑、上网本、电子阅读器等均得到了广泛的应用;在一些新兴领域, 如车载系统、智能机顶盒、智能电视、智能手表、智能眼镜等, 生产商们也开始关注和研究HTML5。
2.1 HTML5在手机领域的应用
近几年, HTML5技术在智能手机领域发展迅猛, Strategy Analytics研究报告指出:2011年有3.36亿台支持HTML5的手机 (能通过网页浏览器完整支持HTML5的手机, 如iphone4s) 售出, 2013年有10亿台, 到2016年, 这一数字可能达到21亿, 预计大部分的增长会来自北美、欧洲和亚洲。
2012年10月, Nokia研究中心介绍了其开发的Cloudberry, 一个基于HTML5的云手机软件平台。云手机是一种全部应用和用户数据的主拷贝都存储在云端, 所有面向用户的功能都从网上动态下载和缓存的移动设备, Cloudberry系统利用HTML5支持离线应用和应用自动更新的特性, 以及专有的数据缓存机制, 来保证应用和应用数据在设备离线情况下能够使用。
2.2 HTML5在平板领域的应用
近两年HTML5在平板领域和在手机领域一样发展迅速。黑莓手机制造商RIM、Mozilla公司、微软公司都在近5年推出了支持HTML5标准的平板电脑产品。
2010年9月黑莓手机制造商RIM发布了他们平板机产品“Play Book”, 采用全新的黑莓平板机系统 (Black Berry Tablet OS) , 支持HTML5标准。2012年4月该平板在HTML5测评网站“html5test.com”的HTML5支持测评中, 位列所有平板电脑第一位。微软公司于2012年9月宣布:Win8平板将不再支持任何插件, 这意味着针对平板优化的Metro版IE10浏览器将完全采用HTML5技术, 这是因为微软公司认为浏览器的插件体验不如HTML5。
2.3 HTML5在电视领域的应用
近两年HTML5技术在电视领域受到硬件及软件厂商的广泛重视。2013年7月海信推出智能电视概念机LED50K660, 该产品采用“完全基于HTML5的Web OS系统, 整合了电视功能控制、后台资源推送和用户行为记录等功能, 同时完全支持各种Web APP的运行”。乐视TV近年宣称:“Letv UI默认内置乐视专为电视定制的浏览器, 最接近HTML5的标准实现”。“Letv UI将为HTML5提供更广泛的支持, 从浏览器到应用商店”。Google表示, 他们的TV平台将支持HTML5, 从苹果最近对于HT-ML5一系列炒作可以推断Apple TV也很有可能支持HTML5。2012年1月, Opera软件公司推出Opea TV Store, “采用HTML5技术, 针对电视机的网络应用商店, 支持高清显示屏、机顶盒、蓝光播放器和标准的遥控器。”2012年7月, Opera软件公司推出“适用于所有电视机型”的HTML5应用框架。2012年9月, Opera宣布与海信合作, 开发网络电视, 提供HTML5引擎。
2.4 HTML5在车载领域的应用
目前用于开发智能化IVI (车载娱乐系统) 的大量技术中, HTML5成为首选技术, 它不仅能够用来开发这些系统复杂的人机界面, 而且也能管理开发成本。
2012年10月QNX软件公司发布全球首个全HTML框架车载信息娱乐系统解决方案——CAR2。QNX宣称:“QNX CAR2应用平台远不止一个车载嵌入式智能解决方案, 它是一个能够帮助用户完成新一代连接的平台, 这个连接包括手机与汽车的连接, 汽车与云端的连接, 当然更重要的是汽车与消费者的连接。”“这个以汽车为中心的HTML5架构将帮助汽车厂商创建更令人赏心悦目而且便捷的用户体验, 并将手机、平板电脑以及其他平台中已有的HTML5应用连接到主控台中。”富士通天公司在“Mobile World Congress 2013”上展出并演示了基于新一代Web标准HTML5的车载终端试制品。该车载终端是在Linux上运行开源Web浏览器“Chromium”, 利用该浏览器访问智能手机内Web服务器提供的Web应用, 而智能手机起到缓存核心Web应用的代理服务器的作用。该车载终端应用了HTML5技术: (1) 利用HTML5的Web Socket技术通过手机远程设置车载导航仪目的地; (2) 利用HTML5的Canvas技术, 在摄像头获得的影像上重叠显示各种信息; (3) 利用HTML5的Divice API等, 把车速等现实信息传给Web应用, 使用户界面随着车速的变化而改变。
2.5 HTML5在数字标牌领域的应用
一些数字标牌厂商认为:合理利用HTML5标准, 就可以允许内容制作者创建丰富媒体内容通道, 保证能方便地发布在线上屏幕和移动设备。
2012年6月澜彩软件在上海国际数字标牌展示了自家的全志A10平台+HTML5数字标牌解决方案。日本Sony也于近年推出HTML5信息发布和数字标牌解决方案, 该B2B解决方案主要面向各大中型商场和区域的信息发布。
3 HTML5应用的未来发展
本章节将对HTML5技术在未来电视、未来车载和未来数字标牌3个领域的应用及发展进行预测和展望。
3.1 HTML5与未来电视
HTML5技术可以给未来电视的使用者带来更加智慧、人性和多样化的电视体验。基于HTML5技术的未来电视可能具有以下功能:
3.1.1 分屏共享
在HTML5的架构下, 利用现代电视的大屏荧幕特性和HTML5丰富的网页表现效果, 可以同时显示很多不同的资讯动态, 并且不会影响使用者正在观看的节目内容。
3.1.2 多屏互动
利用HTML5强大的跨平台特性, 家人争抢同一个遥控器或键盘的情况可能成为历史, 不同使用者可以透过手上的智能手机、平板电脑或笔电, 各自操作屏幕上所需出现的资讯, 直接与电视屏幕进行互动。
3.1.3 在线视频
利用HTML5的自适应屏幕功能, 在电视上全屏显示网站视频将成为可能, 未来电视使用者只要登录视频网站, 就可以在第一时间观赏最新的影视资源。
3.2 HTML5与未来车载
如果有什么能在未来帮助汽车制造商在合理的成本条件下满足车载信息娱乐系统中的用户所需, 那就非HTML5莫属了。在未来, 基于HTML5技术的车载系统可能具有的功能有:
3.2.1 个性导航
不远的将来, 利用HTML5技术得天独厚的网络传输速度、离线缓存和动态页面等特性, 可以及时地将路况和车流量等动态信息同步到车载信息系统, 配合GPS导航仪, 在车载屏幕上呈现立体多样的导航画面。
3.2.2 驾驶辅助
利用HTML5对底层硬件的操作能力和强大的页面表象效果, 可以在操作摄像头获得的影像上重叠各种信息显示在屏幕上, 辅助驾驶员保持车道及停车等动作。
3.2.3 媒体互动
利用HTML5对云技术的支持和跨平台无缝迁移能力, 可以实现车载系统与手机、平板等移动设备的互动和同步, 可以将移动设备中的音视频媒体资源与车速等现实信息结合, 呈现在车载终端, 带给驾驶员更加娱乐休闲的驾驶环境。
3.3 HTML5与未来数字标牌
HTML5是一个可以推动数字标牌的内容开发与管理的Web关键技术, Web、云技术和数字标牌将打破壁垒实现无缝交叉。
现有数字标牌的形态主要是一台高性能主机加上多块仅作为显示终端的液晶屏幕, 所有管理工作都在服务器端完成, 这样的产品具有页面表现单一、与客户难以互动、显示信息更新缓慢的缺点。未来数字标牌的形态可能会是一台云服务器加上多块自带基于HTML5的Web OS的智能显示屏组成的系统。这样的系统页面表现丰富多彩, 显示信息更新及时, 与客户自由互动。例如, 客户可点击屏幕获取详细信息, 也可将显示的咨询信息同步到自己的移动设备。
4 总结
HTML5由于标准不够规范, 音视频表现有待提高, 在未来还有很长的路要走, 但基于其创新的特性和良好的发展势头, 我们可以大胆而乐观地预测:未来HTML5不仅在移动领域将会获得更加广泛的支持, 在其他领域特别是智能电视、车载、数字标牌等也会迎来突破性的进展, 而一些HTML5还未涉足的领域, 如智能家居、可穿戴设备 (智能眼镜, 智能手表) , 又何尝没有它的用武之地呢?
参考文献
[1]邢晓鹏.HTML5核心技术的研究与价值分析[J].价值工程, 2011, 30 (22) :157-158.
[2]黄永慧, 陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展, 2013, 23 (7) :207-210.
[3]李慧云, 何震苇, 李丽, 等.HTML5技术与应用模式研究[J].电信科学, 2012 (5) :24-29.
1 概述
W3C（万维网联盟）的HTML工作组终于在去年10月28日正式发布了HTML5的正式推荐标准（W3C Recommendation）。相信在不久的将来，HTML5标准将会逐渐取代1999年制定的HTML？4.01和XHTML？1.0两个html标准，以符合当代的网络需求，为桌面平台和移动平台之间带来无缝衔接的丰富内容。HTML5带来了一组新的用户体验，如Web的音频和视频不再需要插件，通过Canvas更灵活的完成图像绘制，而不必考虑屏幕的分辨率，浏览器对可扩展矢量图（SVG）和数学标记语言（MathML）的本地支持，通过引入新的注释信息以增强对东亚文字呈现（Ruby）的支持，对富Web应用信息无障碍新特性的支持，等等[1]。Canvas元素最先由苹果公司的Safari浏览器引入，用于在Mac OS X WebKit中创建控制板部件（dashboard widget），在HTML5 Canvas元素没有推出之前，web开发人员实现web绘图往往是通过SVG、VML等技术，但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如Web游戏所需要的像素级别的绘图能力。HTML5提供了Canvas标记元素来实现绘图功能。该元素可以使用浏览器脚本语言（通常是JavaScript）调用Canvas自带的函数（即方法）进行图形绘制，和对图像的像素级操作。相较于传统的在服务器端先画好图片，再把图片发到浏览器中，或用第三方插件显示的方式，它与浏览器渲染引擎结合紧密，节约了资源，并极大地简化了图形和网页中其他元素的交互过程[2]。目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。本文详细介绍在可视化开发工具HBuilder中利用HTML5 Canvas元素实现绘制基本图形方法和步骤。
2 可视化开发工具HBuilder介绍
目前主流的前端编码工具有windows记事本为代表的文本编辑器，以及Webstorm、Brackets、Dreamweaver、Microsoft Visual Studio 2008/2012 等IDE（集成开发环境）。但适合HTML5设计的，只有HBuilder、Webstorm和Brackets。
Hbuilder（飞一样的编码）是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE，官方网站为http：//www.dcloud.io。截止发稿时，Hbuilder for windows最高版本号为HBuilder 6.1.3.201507202206，
支持在线更新。DCloud是W3C成员及HTML5中国产业联盟发起单位。DCloud CEO王安表示，“HBuilder最大的优势就是快，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率”[3]。
3 基本图形绘制
3.1 构建Canvas元素 使用HTML5 Canvas绘制图形比较简单，首先需要在HTML页面中创建一个Canvas元素，目的是充当2D渲染上下文的封装，绘图是在2D渲染上下文中进行，而不是在canvas元素中。例如代码可表示如下：
您的浏览器不支持canvas！
这样页面上就定义了一块400px×300px的画布，要想显示其范围，可以通过属性设置为这块区域添加边框或背景。如果不设置width（宽度）和height（高度）两属性，则默认为宽为300px，高为150px。如果浏览器不支持这个API，则就会显示“您的浏览器不支持canvas！”。
每个canvas元素都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。
var canvas= document.getElementById（“mycanvas”）；
if （canvas.getContext） {
var context= canvas.getContext（'2d'）；
}
canvas中的参数是以像素（px）为单位的，getContext方法指定参数2d，表示该canvas对象用于生成2D图案（即平面图案），2D渲染上下文是一标准的基于屏幕的绘图平台。与其他2D平台同样，使用同一个平面直角坐标系左上角的原点（0，0）。向右移动会增加x的值，向下移动则增加y值[4]。见图1所示：
3.2 绘制基本图形 利用canvas结合CSS（层叠样式表）和Javascript可绘制不同图形图像，如直线、多边形、圆、椭圆、曲线等，可完成类似photoshop软件对图像进行渲染，canvas只支持一种基本形状的绘制，即矩形，并没有直接提供绘制其他几何图形的方法，但是其它几何图形都可以通过一组路径绘制函数来绘制。
Canvas的API 提供了如下三个方法，分别用于矩形的清除、描边及填充：
·clearRect（double x， double y， double w， double h）
·strokeRect（double x， double y， double w， double h）
·fillRect（double x， double y， double w， double h）[5]
在Hbuilder代码窗口
与之间输入如下主要代码：以z1.html文件保存，则在Hbuilder右侧“web浏览器窗口”即可显示结果，如图2所示。
图2 Hbuilde中输入并显示矩形
时间过得很快，HTML5学习已经到第二周了，经过上一周HTML5础的学习，我学习了一些更进阶的东西。比如盒模型的概念，元素的类型，定位和锚点的应用，图片的整合和宽高自适应还有上周的高度塌陷问题的解决方法等等。
这周学习的内容相比较上周的更需要理解一些，要多应用才能理解并自己写出来。比如元素的类型，各种元素之间的转换，要对元素的类型都理解了才能运用自如，每种元素类型都有自己的特性。首先我们要背诵这些知识点，然后自己动手写一些页面应用，还有一些平时写页面会遇到的问题和知识点，都需要去慢慢掌握。
这周的知识相比上周难了一些，也需要更多的练习，随着学习的深入需要掌握的东西越来越多，不能学了这个忘了前面的，要及时复习，学习现在的并巩固以前学的。我现在需要多总结，把难点和重点多看看，把不熟练的地方多练练，争取都能掌握，并提高写页面的准确性和速度。
成功没有捷径，只有付出了汗水才能体验到成功那一刻的喜悦，我很庆幸我的选择和我现在付出的努力，我想经过几个月的学习之后我可以达到我想要的效果，在这里不仅仅学到了技术，也认识了一群志同道合和的同学，大家每天互相督促，共同学习，一起进步，每一天都有成长，在这里收获了很多，也希望接下来继续努力，保持好学习热情和认真的态度。
一、什么是响应式布局?
响应式布局是Ethan Marcotte在5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，
这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。
随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
二、响应式布局有哪些优点和缺点?
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
三、响应式布局该怎么设计?
1、如何解决不同设备间的兼容问题？
CSS3中的Media Query（媒介查询）可以解决这个问题。
2、media query能够获取哪些值?
设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution
3、语法结构及用法
语法：@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}
用法：
a、示例一：在link中使用@media：
上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度，
b、在样式表中内嵌@media：
代码如下:@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px)
and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}
设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；
屏宽大于或等于480px小于1024px以及 垂直放置设备的css样式。
四、实现响应式布局
代码如下:css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js“>
1、根据需求完成HTML5移动应用编程方面的工作;
2、负责产品界面UI研究、设计，负责产品的整体视觉风格设计及改进;
3、配合后台工程师一起研讨技术实现方案，进行应用及系统整合;
4、根据产品需求，完成功能模块的设计，编码和测试工作;
5、负责产品界面进行持续的设计优化，提升用户体验;
岗位要求：
1. 精通HTML, CSS, JavaScript, ES6,JSON, AJAX,熟悉W3C规范，熟悉HTTP协议;
2. 熟悉jQuery、React、Vue等前端框架等前端技术;
3. 有Android，iOS等平台HTML5开发经验者优先考虑;
目前, Web 2.0 已经为互联网用户带来了一种新的网络应用方式, 具有广阔的应用前景。它是一个本地客户端程序, 它比网络应用程序好。对于本地应用程序, 操作系统提供了一个抽象层, 用于存储和获取特定应用程序的数据。HTML5 的本地存储技术提供了一种方法来让网站信息存储在本地计算机上, 然后进入未来。这个概念与cookie相似, 不同的是, 它是专为大容量存储而设计的, 而cookie的大小是有限的, 而在过去的每一个新的页面都会被发送到一个新的页面。
2 主要的前端存储技术
现如今, 比较广泛流行的存储科技有Cookie、Google Gears以及User Data。
2.1 Cookie本地存储技术
Cookie技术能够很好地适应网络技术与数据库技术, 然而它有着明显的缺陷, 比如Cookie的存储空间相对很小, 并且它的安全系数较低, 因此部分网站会禁止使用Cookie作为本地存储的方法。
2.2 Google Gears本地存储技术
Google Gears是一个内嵌在IE内核的本地存储, 它在IE更新的基础上优化其存储技术, 然而IE更新缓慢, 因此该项技术应用并不算广泛。
2.3 User Data本地存储技术
它也存在于IE内核中, 但是和Google Gears相比不随着IE内核更新, User Data的优化更新在一个单独的体系中完成。User Data一般以文件夹的形式存在于操作系统中。通过操作系统中特定的方法能够将User Data区域内的数据存入到内存缓存中, 从而使得关闭网站也不会影响数据的存储, 当重新启动网页时, 上一次存在的数据不丢失。对于User Data中每个文件容量需要在256KB以内, 每个用户可以临时保存2048KB大小的文件, 文件的数量可以任意。
3 HTML5本地离线存储技术
试卷自动生成系统只是一组随机产生的问题, 但考试中的试题问题。在本系统中还反映了数据库的更新和维护要求的保密性和管理员, 对于普通用户, 我们只能把它的标题进行审查, 其他功能不能使用, 并限制其权利的权利。管理者的管理是一个很大的, 是维护试卷生成和维护试卷生成的和管理的论文。
在系统中资源列表文件中, 每行的第一个句话一定是CACHE MAINFEST, 这句话的用途是通告本地网站, 要在之后的操作中进行数据临时存储的操作。
通常, 数据的临时存储可以分成下面3 种形式:
3.1 CACHE存储
此种存储方式特定选择了需要临时存储到内存储器的临时文件。
3.2 FALLBACK存储
此种存储方式特定了两个文件进行临时存储。当有浏览器联网的时候的链接首个存储文件, 当浏览器未能链接网络的时候系统链接第二个文件。
3.3 NETWORK存储
此种存储方式制定的文件无需存入到内存储器中, 仅仅在浏览器与网络连接的时候才会访问到这些文件。
通常情况下, 系统会给浏览器中打开的每个网页特定一个一个Manifest文件, 或者对整个浏览器特定一个Manifest文件, 详细如下:
需要指出的是, 当操作Manifest文件的时候, 需要配置系统服务器的相关配置, 让使得服务器能够对相关的文件进行有效的支持, 然而, 对于不同类别的文件来说, 服务器支持的类型有所不同。
4 结论
HTML 5 将成为新一代的技术标准, 它带来的新的Web应用程序, 但也带来更快、更好、更炫的用户体验。HTML 5 的存储技术, 通过添加更多的功能将被保存在服务器上, 从而大大提高Web应用程序的性能, 减轻了服务器的负担。
摘要：虽然HTML5技术只能在一些浏览器中实现的, 但随着网络技术的发展, 将有更多的浏览器。采用这种技术标准。在当前本地应用程序的局限性, 提出了一种基于HTML5技术的新方法, 它是基于Java Script脚本语言, 它可以用来解决本地应用。
关键词：HTML5,本地化存储技术,离线应用
参考文献
[1]马新强, 孙兆, 袁哲等.Web标准与HTML5的核心技术研究[J].重庆文理学院学报, 2010, 29 (6) :61-64.
[2]黄敏, 张卫东, 李众立.Web缓存技术的应用与研究[J].计算机工程与设计, 2003, 24 (5) :33-35.
[3]刘彤, 周工业, 倪浆铭.HTML浏览器的设计与分析[J].计算机工程与应用, 2001, 38 (9) :117-119.
1、根据开发进度和任务分配，完成相应模块软件的设计、开发、编程任务;
2、进行程序单元、功能的测试，查出软件存在的缺陷并保证其质量;
3、进行编制项目文档和质量记录的工作;
4、维护软件使之保持可用性和稳定性。
任职要求：
1、熟练微信小程序、移动端H5开发;
2、熟练VUE、REACT或者NG框架开发;
3、熟练移动端通讯协议(http、websocket等);
4、熟悉MVVM架构、具备组件化、模块化思想;
5、熟悉主流前端框架和基础库;
6、对各种浏览器的兼容性有一定了解，并有相关问题的解决经验;
1、服从公司的发展要求，配合公司的工作安排
2、作为HTML5开发工程师要认真学习和全面了解公司的相关情况和工作细节
3、熟练掌握公司所应用的专业技术
4、负责公司基本项目的开发
5、参与公司所用技术的优化和升级
个人能力要求：
1、对HTML5移动端开发有兴趣
2、有打算长期从事移动端开发的工作意向
3、吃苦耐劳，有一定的自我约束和控制能力，意志力坚强
4、表达能力好，听说能力强
1 HTML5主要特性与应用
HTML5规格中最主要的特性是web socket,这一特性使服务器与客户端、浏览器之间的双向链接成为现实。这种实时连接可以实现数据之间的及时推送,这种持续连接一直到一方关闭为止。这种互相连接可以通过网页实现很多web规格下无法实现的运用。例如运用了HTML5后的聊天应用,不再需要应用者不断的刷新网页获取最新信息,而是新数据会在web socket技术下自动推送到用户电脑屏幕上。相较于以前需要下载客户端的即时聊天工具,这一时期只需要有支持HTML5的浏览器就可以了,会更加方便快捷。
通过IP地址的探测来确定网络用户的地理位置是现行地理定位最常用的方式。HTML5可以通过geolocation中的API实现精确定位取代原来的IP地址定位。首先运用get current position获取用户当前位置,再通过watch position保持观察用户的位置信息,如果用户位置出现异动则实时的作出改动。HTML5通过GPS和网络信息配合使用获取位置信息。该项功能现阶段主要运用于手机定位和手机地图。
HTML5提出的web SQL数据库和web storage客户端存储方式。相对于传统的cookie,HTML5的web storage的存储空间可以达到5MB。在传统的cookie中,存储内容会随着请求一起发送到服务器,这就浪费了本地的存储数据空间。而HTML5中的web storage的数据只会保留在本地,不会与服务器发生交互作用,浪费储存空间。另外web storage可以提供更加丰富的接口,把数据操作变的更为简便。
在HTML5中,包括每一个子域在内的域都拥有独立的储存空间,这就避免了数据庞大情况下出现数据混乱,对于移动设备来说这就极大的减少了流量的浪费。在没有网络连接的情况下,这项功能能够通过本地缓存正常使用web应用。在网络连接成功后,自动的将本地缓存副本更新储存到web上。
HTML5提供的video和audio标签可以实现开发者直接将视频和音频嵌入网页的技术,这就避免了过多的对于插件的依赖。目前为止video元素支持Ogg、mp4、webm格式的音频和视频,audio支持Ogg vorbis、mp3、wav格式的音频文件。这些应用的推广可以有效的解决过分依赖插件造成的浏览器不稳定的问题,还可以提高浏览器性能。
2 HTML5与现有技术的配合
虽然现阶段HTML5技术还不算完善,但是各个浏览器和视频服务供应商已经着手利用HTML5改善视频播放器的运用,抢占市场了。相较于flash播放器中的Flash player,HTML5利用Javascript的播放不需要任何外挂软件支持,播放清晰稳定。但是HTML5技术还不完善,确实还需要同现有技术相互配合共存。
2011年微软设计开发的IE9对于HTML5的新特性有强大的支持作用,图形滚动、3D图形显示等处理交由图形加速卡,加大支持了GPU加速HTML5的运行。
现在一些开发者在使用Ajax实现在线应用,Ajax是现行应用界面中主要的应用界面之一。Ajaxwith.com觉得,HTML适用加载页面,而Javascript适用于执行命令。HTML5以其不可取代的地位,需要更好的与Ajax结合,使应用变的更加便捷迅速。
很多开发者认为,未来全球互联网发展的主要趋势是把HTML5与css3结合。把所有的浏览器统一到一个应用语言下,为用户提供更加便捷、丰富的网络应用体验是HTML5的努力方向。
3 HTML5技术的局限性
HTML5的部分功能已经在浏览器中使用,开始发挥新功能的巨大作用,弥补传统网络应用的缺陷。但是,HTML5投入应用中还有很多方面的工作需要努力。HTML5还是一个亟待发展的标准,很多语言并不支持HTML5的运行。Web应用的开发者还需要进一步优化HTML5,加大HTML5同flash、Java等的竞争优势。另外浏览器市场还没有统一,各个浏览器之间的兼容问题并没有得到妥善的解决,HTML5广泛推行的网络和社会环境还不具备在HTML5发展的同时,flash为代表的编程也在不断发展,HTML5短时间内还不能完成废弃很多插件的初衷。
同时HTML5还要兼顾旧系统才能实现现阶段废弃插件的全部功能。而HTML5并不能重写所有的旧系统。就连采用HTML5的Google都不得不承认,现阶段把Google的应用完全转化为HTML5是短时间内无法全部实现的。
4结语
作为未来十几年甚至更长时间内web开发技术中最为前沿的HTML5,它不仅将对web应用开发的模式进行彻底改变,还将对未来的计算机技术提出更高的要求。当然,HTML5作为一项还不完善的新技术,还会牵涉很多计算机技术方面的改变。目前最突出的问题就是由于HTML5中大量新标签和元素的应用,各个浏览器之间就需要增强兼容,统一数据描述格式。总体来说,开发和设计HTML5的目的,是希望通过这种方式为用户提供更加便捷和丰富的应用,使用户体验更佳的网络浏览。即使目前HTML5技术推广的环境和时机并不成熟,我们仍需共同努力,来面对问题和挑战,完成将web带入到一个成熟应用平台的使命。
摘要：目前网络上应用范围最广、最主要的构成网页文档的计算机语言为HTML,10年前开发的HTML版本在表达和应用上已经无法满足科技快速发展情况下开发人员和使用者的需求。为了适应Web的迅速发展和应用需求,HTML5应运而生。通过对HTML5的发展历程、特点和应用的探索,并与现行的Web技术进行比较,分析HTML5技术在网络通信、数据存储、网页绘图等方面的优势。
关键词：Web标准,HTML5,XML,CSS样式
参考文献
根据工作安排按照指定的编码规范高效完成前端编码工作
负责产品的页面制作及维护，根据设计图完成页面html5应用的编码
与UE设计师配合，高效率高质量地完成页面的实现工作
与后端开发团队紧密配合，确保代码有效对接，优化网站前端性能
页面通过标准校验，兼容各主流浏览器及移动终端
本岗位接受实习生
任职资格：
有1年以上Web前端软件开发经验，具有良好的UI/UE能力者优先考虑
精通XHTML/HTML/JavaScript/CSS，熟练掌握ajax调用方法，至少掌握一种主流JavaScript框架，例如AngularJs或jQuery，对seajs、bootstrap熟悉者优先考虑
掌握响应式页面设计方法，有能力开发能够适应不同分辨率，不同设备的前端软件
具备较强的Web前端系统优化和模块化开发意识，框架开发经验者优先考虑
思路清晰，逻辑思维能力强，有良好的团队合作意识和较强的责任心
1、根据需求安排高效、高质地完成代码编写，确保符合前端代码规范;
2、与产品和设计团队紧密配合，能够有效沟通产品需求和设计的想法;
3、与后端开发团队紧密配合，确保代码有效对接，优化前端性能;
4、承担前端开发工作，对代码质量及进度负责;
5、利用HTML5、CSS3等相关技术参与前端应用的开发。
任职要求：
1、本科及以上学历，计算机相关专业;
2、良好的英文读写能力;互联网相关3年以上从业经验;
3、精通HTML/XHTML、CSS、JavaScript、AJAX、JSON、XML等技术;
4、JavaScript程序模块开发，通用类库、框架编写;
5、熟练掌握Jquery、Bootstrap、VUE、Angular等前端框架，熟悉对象化Javascript编程;
6、熟悉CSS、CSS3各种样式属性;
目前, 随着Web应用程序的广泛应用, 越来越多的数据需要进行分析统计, 而统计的形式也单纯地从文字显示转为各种动态图表, 从数据的实时统计到企业的各种报表, 都需要用到饼图、柱状图等图表显示相关数据, 由于图形所隐含信息的直观性、丰富性和人类对图形的天然理解能力, 所以在Web页面上利用图形实现信息的可视化在Web应用中起着重要的作用。因此, 越来越多的应用程序采用浏览器借助Web页面向用户提供各种各样的动态报表信息。
1 常用的图表生成方法比较
目前常用的报表中图表生成方案有两大类型:一种是基于服务器端生成图表方案, 一种是基于客户端生成图表方案, 两种类型的图表生成方案各有千秋。
1.1 基于服务器端的图表生成
在服务器端生成图表一般有两种形式, 一种是根据不同的报表内容, 在服务器端预先或临时生成图表。以某公司过去一年每月的设备维修统计为例, 如果使用静态图表生成方式, 则预先要绘制12份不同的图表, 放置在服务器上。这种方式不够灵活, 还有一种目前常用的方式是通过程序或第三方插件在服务器端动态生成各种图表, 从而显示在浏览器中。
基于服务器端动态生成图表的方案功能强大, 但同时也存在一些缺点:
(1) 带宽和流量问题, 比如通过手机访问, 手机是按流量计费的, 对服务器端也会有影响, 当大规模访问的时候挤占服务器端带宽。
(2) 影响服务器端性能, 当大规模访问的时候服务器端生成图表性能下降。设想一下, 假如由于客户端的访问, 服务器端每天需要创建100, 000幅统计图, 这对服务器端来说, 无疑是一个非常巨大的资源占用。
(3) 图表缺乏交互性, 比如折线图, 鼠标放在某个点上, 希望看到该点的值, 就做不到。
因此, 从Web2.0流行之后, 图表的动态生成、操作就逐步从服务器端移到客户端, 绘制统计图的工作是直接在客户端进行的, 而不再是在服务器端完成。这不仅意味着不再占用服务器端的资源, 而且意味着可以直接利用客户端计算机的强大资源, 绘制统计图的速度也可以大大地得到提高[1]。
1.2 基于客户端的图表生成
目前常用的基于客户端生成图表主要有利用Flash和利用传统Java Script+DIV进行绘制。通过DIV绘图, 利用DIV标签的block和css设置, 可以将一个矩形的图形绘制成任何需要的颜色和样式, 同时利用Java Script脚本语言绘制各种图表。但是这种方式如果有大量DIV元素会影响浏览器运行速度, 而且用户还不能把图表保存为图片。
通过Flash绘制矢量图形目前是较流行的动态图表生成方式, 但同时也需要解决以下问题:如Flash cookie使用的Flash Player内置的Shared Object属性, 和Web浏览器的cookie无法直接通用, 而且目前大多数浏览器都装有阻止Flash的插件, 此外Flash还常发生内存泄漏等问题。随着HTML5的应用, 不需要第三方插件的绘图方式已经成为可能。
2 HTML5.0 Canvas
2.1 关于HTML5.0
众所周知, HTML5这个版本的超文本标识语言是下一个主要修订版本, 目前正处于发展尖端, 它的目标是取代之前所制定的标准, 并且包含了许多新的特征, 并对之前的一些旧特征, 尤其是基于脚本的API做了大量的更新, 其目的是为了减少浏览器对于需要插件才能运行的富网络应用 (RIA) , 如Flash/Flex, 并提供更多能有效增强网络应用的标准集。
HTML5.0增加了许多新的元素, 如
2.2 HTML5.0 Canvas介绍
基于HTML5.0的Canvas API, 能方便地在Web页面上进行图片和图表的处理, 而且绘图不仅仅局限于绘制矩形弧形等简单的图形, 实际上Canvas标签只是在页面上定义了一块矩形区域, 开发人员通过Java Script调用该API在页面上绘制任何需要的复杂图形[4], 通过Canvas元素使得Web开发人员在无须借助任何第三方插件 (如Flash, Silverlight) 的情况下, 可以直接使用Java Script脚本在Web页面进行绘图。而且, 因为用来控制Canvas图形绘制的脚本代码是可以被压缩的 (例如, 当你使用Apache服务器的时候, mod_gzip将自动帮你执行代码压缩工作) , 可以被缓存, 所以也就可以大幅度地减少带宽的占用。目前, Canvas已成为HTML5规范中的事实性标准, 并且已经被Firefox 3.0+, Safari 3.0+, Chrome 3.0+, Opera10.0+, IE9等浏览器所支持。
3 Canvas标签生成图表具体应用
使用Canvas标签和Java Script, 可以轻松地在网页中动态地绘制出用于多种场合的图表, 本文以某公司设备维修工单系统报表为例, 来叙述如何通过Canvas在客户端产生图表。由于必须在Java Script脚本下进行绘图, 因此在使用Canvas绘图之前, 必须把数据放到Java Script脚本中, 而系统中统计的报表数据都是存放在后台数据库中, 因此在绘图之前首先要把服务器端的数据传到客户端, 一般服务器端数据传到Java Script客户端可以采用异步调用和通过数组方式传递, 本文主要采用通过定义数组来传递数据, 如以某厂商一周内设备部件维修次数为例, 来实现数据的传递。 (注:该系统使用asp.net4.0+Mysql进行开发的。)
3.1 服务器端和客户端数据传递
通过定义数组的方式把后台数据库中的数据传递到Java Script中, 具体通过数据库查询到的数据如图1所示。具体操作如下:
3.2 通过Canvans绘制图表
在Html代码中添加, 同时借助Java Script语言进行绘制, 具体代码如下[5]:
页面显示效果如图1-2所示。除了如上文所示自己编写函数之外, 也可以通过一些开源的Canvas图形库进行统计图的绘制, 常用的插件有RGraph等, 通过这些类库的使用, 可以更加方便地进行图表的生成, 并且可以动态生成, 本文就以RGraph为例进行图表的生成。
3.3 使用RGraph绘制动态图表
RGraph是一款开源免费的Canvas插件, 使用RGraph可以将资源占用减少到接近零的程度, 因为所有创建统计图的工作都是在客户端完成的, 就像渲染Html网页一样, 服务器端只负责发送数据, 不再负责统计图的生成与发送, 同时带宽的占用情况也大大得到了改善。同时RGraph提供了大量的绘制各种图表的类库, 用户可以很方便地生成各种动态的3D图表, 并且可以和用户之间进行交互[6]。
从官网下载RGraph后, 首先把RGraph的libraries目录和excanvas目录以及css目录下的文件全部放到Web站点中的js目录中, 然后在页面中引入RGraph插件所使用的脚本文件, 其中RGraph.common.core.js脚本文件 (插件的核心代码脚本文件) 是必须引入的, 代码如下所示:, 根据页面中需要绘制的统计图的类型与功能引入对应的脚本文件, 例如绘制柱状图时需要引入RGraph.bar.js脚本文件, 代码如下所示:, 最后创建统计图, 具体代码如下:
生成后的图表如图3所示, 从上面具体实例可以看出, 用户可以通过Java Script完成数据的获取和组织, 然后通过Canvas标签动态地生成图表, 在浏览器版本满足需求的情况下, 用户不需要安装其它浏览器插件即可查看和使用该图表。
4 结束语
随着对Web应用的需求越来越高, 传统的B/S应用程序和基于第三方插件的Web应用开发, 越来越不能应付复杂的Web图形和用户界面的需求。本文通过使用HTML5中的Canvas标签, 介绍如何利用Canvas和Java Script脚本以及RGraph类库在Web页面上进行绘图和图表生成。通过Canvas标签生成的图表, 无需第三方插件, 同时可以保存成图片, 此外可以节约带宽, 减少服务器生成图表的负担, 依靠客户端机器本身的性能进行绘图, 同时解决了如Flash等第三方插件不能在服务器端认证和不能共享浏览器的会话状态等问题, 因此其强大的生命力, 将势必引起新一轮Web应用开发技术的革新。
参考文献
[1]唐彬.利用HTML5实现网页图表的研究[J].微型电脑应用, 2012, 10 (28) :29.
[2]维基百科HTML5词条[EB/OL].[2012-12].http://zh.weiki-pedia.org/wiki/HTML5.
[3]吴磊, 张福庆.基于HTML5 Canvas的WebGIS客户端技术研究[J].地理信息世界, 2009, 6 (3) :78.
[4]宗小忠.基于HTML5 Canvas的球体碰撞仿真实验[J].沙洲职业工学院学报, 2012, 3 (15) :32.
[5]HTM绘制饼图实例[EB/OL].[2012-12].http://www.cn-blogs.com/happily/archive/2011/11/21/2256826.html.
1.负责公司微信公众号的前端开发和维护工作;
2.负责公司app内h5页面的开发工作;
3.负责公司运营h5页面的开发工作;
4.负责公司官网和后台管理系统h5页面的开发工作。
任职要求：
1. 熟悉Html5、Css3、Ajax等web开发领域相关技能，有良好的编程习惯;
2. 熟悉javascript、(jQuery、Zepto、Bootstap)等前端框架;
3. 对h5前端工程化有较多的实战经验。熟练使用前端Less/sass预处理，自动化构建工具(gulp)、webpack打包工具;
4. 有移动端H5模块化、WebApp开发经验，熟悉浏览器兼容差异，沟通能力强;
Logo并不是figure
进一步的说，logo也不适用于figure。下面是我常见的一些代码片段：HTML5是HTML的最新版本(处于完善阶段),其前身是Web Applications 1.0,2004年由网页超文本技术工作小组(WHATWG)提出,2007年被万维网联盟(W3C)所接纳,于2008年发布了第一份正式草案。HTML5的目的是为了取代1999年指定的HTML4.01。它强化了Web网页的表现性能,并追加了本地数据库等Web应用功能,已经成为各大公司无法忽视的下一代互联网的网页标准。业内很多大型公司如Google,Apple等,已经将HTML5应用在其产品中:Google的移动语音信箱,Apple的i Ad(苹果公司的广告管理系统)都是用HTML5写成。
随着智能手机市场的不断发展,HTML5为更多的移动平台提供解决方案。HTML5已经为开发人员提供一系列的标签与API,允许开发人员更简单地使用CSS3、Javascript构建富媒体(rich media)网络应用。这就是大家重视HTML5的原因。
2 HTML5中插入视频与音频
在HTML5的帮助下,开发人员可以将视频或音频组件轻松地嵌入到他们的网络应用中。允许将控制按钮(播放键,暂停键,停止键等)从视频或音频组件区域中分离出来,整个应用的界面会更灵活;同样也能使用一组控制按钮控制多个视频或音频组件。HTML5的视频API允许开发人员自定义许多有趣的操作,比如:调节亮度,加入3D效果等等。
在这些不同操作中,开发人员能够设计真正创新的手机应用,使操作和手机视频数据更加人性化。例如,他们可以将地理位置与手机拍摄的图片结合在一起,从而提供个性化,人性化的服务。
当前,对于手机应用平台而言,HTML5的视频和音频功能仍然有限。因此,苹果的i Phone手机支持
3
HTML5专有的标签
专注于HTML5
除ipad以外,
在ipad上,视频是直接在移动网页上加载的,但不能总是同时观看或者管理多个网页,也无法得到视频数据,例如,为了实现各种创意效果,将它复制到
表1列出一些移动终端对HTML5的部分功能的支持情况。
苹果不实现autoplay功能是为了防止未经许可的下载。
4
考虑到手机移动多媒体的所有优势,新的HTML5标签
有了HTML5,将
5 HTML5的API与移动平台之间的联系
当以上所有的HTLM5功能将与API相连接,在手机平台上将采取完全措施,目前,地理定位的API已经被植入在很多移动终端,包括i Phone中,开发者可以直接通过GPS获取地理坐标。HTML5是想为每个手机终端的可用组件创建API。可以想象例如一个可以直接从移动终端的各种不同元件获取音频、视频、照片等数据的“抓取”API(capture);一个可以在浏览器中打开各种不同应用(从VOIP到视频会议,甚至实时的“增强现实”)的API,在现实中,谷歌已经通过植入在智能手机中的GPS及谷歌地图应用和街景视图实现了一部分以上提到的功能;一个可以提供统一格式的“联系人”的API。
6 HTML5的本地存储功能
当创建一个网络应用时,一个十分重要的问题经常会摆在我们面前:数据的本地存储与读取。如果不使用本地存储功能,可以使用co支持ie来保存一些登录信息,并且将所有其他信息转存到一个SQL数据库如My SQL中。但并不能保证用户一直都有一个很好的网络环境,如果网速过慢,数据的存储与读取就会有失败的可能。另外,在网络环境欠佳时,数据的本地存储与读取在保存临时文件(cache)方面是十分方便的。
借助两个HTML5在专用的API——Web Storage与Web SQL Database,可以在本地使用SQL语言获取所有以“键-值”(
以上两个API的用途并不止数据的本地存储与读取,还包括简化个性化应用的过程等等。Google停止对gears的开发,全面转向HTML5的发展,这个是一个非常明显的信号:HTML5将足以满足各类开发人员的需求。
7 HTML5的拖放功能
在HTML5之前,Web页面上的拖放功能是很难实现的。在HTML5中,所有页面中的元素都是可以拖放的。为了实现这个功能,开发人员可以在元素属性中加入draggable="true"。另外,例如dragstart这样的事件与data Transfer这样的Javascript的API,允许开发人员实现(编写)在拖拽一个元素时所要执行的动作代码。在移动互联网领域,用户直观的拖放动作与触摸屏之间的互动在人机工程学中是非常重要的。
参考文献
【html5技术调研报告】推荐阅读：
农业技术推广体系建设状况调研报告07-16
软件技术前沿技术报告07-15
转正技术报告06-28
技术总结报告提纲06-01
无损超声技术报告06-14
钢筋笼技术报告07-14
cadcam技术试验报告06-09
微机接口技术实验报告06-12
技术社会调查报告06-25
技术业务工作报告06-25
