㈠ HTML5究竟好在哪儿
HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是如何起步的?
HTML5 是 W3C 与 WHATWG 合作的结果。
注1:W3C 指 World Wide Web Consortium,万维网联盟。
注2:WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
为 HTML5 建立的一些规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash)
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出, 于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案已公布,预计将在2010年9月正式向公众推荐。WHATWG表示该规范是目前正在进行的工作,仍须多年的努力。
新标记
HTML5提供了一些新的元素和属性,例如(网站导航块)和。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记。
一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如和
,它们已经被CSS取代。
新特性
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
HTML5: 标签的改变
HTML5 吸取了 XHTML 2 的一些建议,包括一些用来改善文档结构的功能,比如,新的 HTML 标签 header, footer, dialog, aside, fugure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在这些场合是一律使用 div 的。
HTML5 还包含了一些将内容和展示分离的努力,开发者们也许会惊讶,b 和 i 标签依然存在,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。
新标准适用了一些全新的表单输入对象,包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,一种使用机器可以识别的标签标注内容的方法,使语义 Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。
新应用程序接口(API)
除了原先的DOM接口,HTML5增加了更多API,如:
1. 用于即时2D绘图的Canvas标签
2. 定时媒体回放
3. 离线数据库存储
4. 文档编辑
5. 拖拽控制
6. 浏览历史管理
与HTML 4的不同之处
新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput元素的新属性:日期和时间,email, url。新的通用属性:ping, charset, async全域属性:id, tabindex, repeat。移除元素:center, font, strike。
HTML 5有两大特点:
首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。
其次,追加了本地数据库等Web应用的功能。
异常处理
HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全的忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
HTML 5 正在改变 Web
HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web。
HTML 最近的一次升级是1999年12月发布的 HTML 4.01。自那以后,发生了很多事。最初的浏览器战争已经结束,Netscape 灰飞烟灭,IE5 作为赢家后来又发展到 IE6, IE7。Mozilla Firefox 从 Netscape 的死灰中诞生,并跃居第二位。苹果和 Google 各自推出自己的浏览器,而小家碧玉的 Opera 仍然嘤嘤嗡嗡地活着,并以推动 Web 标准为己命。我们甚至在手机和游戏机上有了真正的 Web 体验,感谢 Opera,iPhone 以及 Google 已经推出的 Android。
然而这一切,仅仅让 Web 标准运动变得更加混乱,HTML 5 和其它标准被束之高阁,结果,HTML 5 一直以来都是以草案的面目示人。
于是,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web 超文本应用技术工作组 - WHATWG) 的组织,他们将重新拣起 HTML 5。这个组织独立于 W3C,成员来自 Mozilla, KHTML/Webkit 项目组,Google,Apple,Opera 以及微软。尽管 HTML 5 草案不会在短期内获得认可,但 HTML 5 总算得以延续。
HTML 5 将带来什么?以下是 HTML 5 草案中最激动人心的部分:
全新的,更合理的 Tag,多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频的 Tag,音频有音频的 Tag。本地数据库。这个功能将内嵌一个本地的 SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线 Web 程序也将因此获益匪浅。不需要插件的富动画。Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力,这意味着我们可以脱离 Flash 和 Silverlight,直接在浏览器中显示图形或动画。一些最新的浏览器,除了 IE,已经开始支持 Canvas。浏览器中的真正程序。将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰 Tag 将被剔除,而使用 CSS。理论上讲,HTML 5 是培育新 Web 标准的土壤,让各种设想在他的组织者之间分享,但 HTML 5 目前仍处于试验阶段。
Mozilla 的技术副总裁 Mike Shaver 说,HTML 5 是一个被寄予厚望的概念,它既是 WHATWG 组织的实验田,又是 W3C 的标准之路。
Shaver 认为,Mozilla 的兴趣和 WHATWG 实验相吻合,Mozilla 在 HTML 5 工作组中非常活跃,我们对一些早期的细则进行实验并将成熟的结果提交 W3C。
在过去的几年,Mozilla 随着各种出现的新标准,推出多个富有前瞻性的项目,包括 Prism,一个用于离线运行 Web 程序的系统,以及 Weave,一个数据存储框架。
Shaver 说,HTML 5 运动肇始于对 W3C 的不耐烦,Web 标准中的很多进展都因 W3C 将重点从 HTML 转移到 XML 而停滞不前。
很多基于 XML 架构的新技术被设计出来替代 HTML,Shaver 说,这不是一条正确的道路,人们不应象黑瞎子掰玉米把样一边掰一边丢。
HTML 5 的新实验在 Firefox 以及 基于 Webkit 的 Safari 和 Chrome 浏览器中逐渐得到强化,但仍有不少问题。
Chrome 的开发者 Darin Fisher 说,Chrome 仍在襁褓中时,就不得不面临几个问题,尽管使用的是最新的 Webkit,HTML 5 的本地数据库功能在 Chrome 的初期版本中并没有实现。因为 Chrome 的沙箱机制和 Webkit 的数据库功能有冲突。
而由于 Chrome 属于秘密开发,Chrome 的开发人员也不便参与 Webkit 的开发。
我们要想保守 Chrome 的秘密,就无法参与 Webkit 社区。Fisher 说,我们很希望可以在某些方面给 Webkit 以帮助,我们拥有众多经验丰富的开发者,我们很想知道人们目前遇到的挑战并乐意提供帮助。
随着 Chrome 的发布,Fisher 说他的团队成员有时会和 Webkit 的人一起吃饭,有些人私下里还成了好朋友。Fisher 称,他们迫切地想同其他 Webkit 开发组一起工作解决离线数据库的问题。
Chrome 里面还包含Google 的开源 Gears 技术,用来实现与 HTML 5 类似的离线功能。
Gears 可以看作已有 API 的替代品,Fisher 说,HTML 5 对新浏览器来说是非常好的东西,但绝大多数用户还使用旧浏览器。Gears 可以让那些旧浏览器也获得这样的 API,我们正在为 HTML 5 版 API 提供兼容。
Gears 兼容性非常好,它正成为将 HTML 5 带向人们桌面的另外一条途径。
目前,绝大多数工作由 Apple,Mozilla, Opera, Google 以及 Trolltech 展开。微软在干什么?IE 因其对 Web 标准的迟钝而闻名,更不要说 HTML 5。但 IE8 可能会做出改变。
微软 IE 平台与 WHAT 工作组主席 Chris Wilson 在邮件中称,我们希望我们现在开始的工作可以在 HTML 工作组创建一套测试系统。Wilson 说,IE 开发组仍然对 HTML 5 的一些提议感到担忧。我觉得工作组的所有成员都会承认我们还有很多事要做。
目前处于 Beta 版的 IE8,已经包含 HTML 5 的诸多新功能。它拥有一个跨文档消息系统,本地存储,以及一些离线事件来检测网络的中断。但还有些功能还未提上议程,如 Canvas。
HTML 5 非常庞大,仍处在开发阶段,我认为浏览器厂商应当尽快达成一致,而每个浏览器的具体实现时间可以自己选择。Web 开发者和浏览器厂商会同意 Wilson 的下面这句话,这确切无疑是一个激动人心的时刻,我们希望看到 Web 成为新的应用平台。
对你一定会有帮助,这个是我之前收集的,望采纳。
㈡ HTML5离线存储有优势吗
我给你举例说下离线存储的作用。比如用HTML5做一个手机应用,用户使用的时候如果网络状况不佳,连接不上服务器,在没使用离线存储的情况下,应用是否就开天窗了?这样对于用户体验来讲肯定不舒服,我们至少得告诉用户连接失败的信息。
但是既然都没连接上,又如何把没连接上的信息告诉用户?
这个时候我们就用离线存储技术,将上次成功访问的数据保存下来,并且里面包含了下次调用这些存储数据时自动判断是否连接成功,如果不成功则显示失败的消息。
既然现在已经能显示失败的信息了,那为什么不干脆再多点有用的信息,这样就能让应用在离线状态下也能展现丰富的内容。
那既然都到这步了,我们为啥不可以把用户在离线状态下的某些操作(肯定是失败的)过程记录下来,等下次连接成功后实现操作的目的。
例如QQ空间,微博,微信,糗事网络,还有网络知道的客户端都是利用这样的离线存储,当然不一定是html5的,不过原理一样。离线状态下,你也能看到内容,只是不能更新内容,不过能将你更新内容的操作记录下来,待下次连接上了就能马上更新。
手机纯手打,给过吧?
㈢ 如何使用下面的HTML5功能创建离线的网页和应用程序
在这篇文章中,我们将展示如何创建乖巧离线的网页和应用程序使用下面的HTML5功能:
AppCache本地存储文件资源,离线访问它们作为URL
索引型数据库存储结构化数据在本地,你可以访问和查询它
DOM存储在本地存储少量的文字信息,
离线事件来检测,如果你€ 重新连接到网络
离线的'蛋糕'这个词使用的食谱网站的搜索结果。
作为一个开发者,你可以使这些类型的场景相结合的离线技术:AppCache,索引型数据库,DOM存储,WebSockets的(或XHR)。在探索个人的技术,让我们的探讨的好处。
Metro风格的应用程序和网站,离线技术让你来处理连接故障。想象一下,您的用户填写一个表格,他失去网络连接。您的网站或Metro风格的应用程序应该怎么做呢?连接自由发展的心态可以让您的应用程序是否连接到网络或不正确地独立工作。你的应用程序将正常工作。
在更复杂的情况下,Web站点和应用程序允许用户创建新的内容,并存储新的数据,即使应用程序是完全脱机。试想一下,无缝地工作在脱机状态下,如Outlook今天的Outlook Web Access(OWA)的Hotmail或GMail。
离线技术也可以通过本地缓存的资源服务,预缓存将来信息和转移从云(或网络)到客户端设备的处理能力,提高整体性能。信息越多,你€™重新能够缓存在本地,在本地搜索,并计算在本地服务器和用户的体验将更快,需要更少的资源热转印机。
有一个Metro风格的应用程序离线工作的期望高于网站的脱机工作。因为他们使用从商店的自我包含的程序包部署,用户希望他们有某种类型的离线功能(如游戏,书籍,食谱等)。即使这些应用程序是无法创建或访问新的内容,以前的内容应该是可见的(例如联系人,会议,饲料,杂志等)。
本地缓存文件资源使用AppCache
AppCache使您能够创建长寿命的本地缓存下载的文件资源,资源可以访问而离线或使用的同时在线,以提高性能。试想一下,一个三岁的孩子使用一台笔记本电脑,下载一个交互式的Web的游戏(KidsBook)从您的家庭网络。如果应用程序的资源存储在本地,孩子可以继续在车上玩游戏,那里没有网络连接。
如果KidsBook使用AppCache,本场比赛将有缓存必要的资源(的JavaScript,HTML,CSS,音频,视频等)时,先下载后从网络上断开时,播放的游戏。这可以让孩子保持愉悦,即使设备本身没有网络连接。
AppCache创作流程。
要看到如何启用互动网页游戏脱机工作,检查出KidsBook的IE Test Drive网站上的例子。
AppCache使用一个manifest文件,以缓存的内容从网站上指定资源的URI。幕后发生后,浏览器显示网页,它允许在清单文件中定义的资源被下载的缓存。这保证了资源下载到本地机器上,作为一个单位在一个事务中,创建一个本地的缓存。如果一个单一的资源下载失败,没有创建高速缓存。要更新存储在缓存中的内容,在您的服务器更新清单文件。当用户下次访问该网站时,浏览器比较明显的服务器上的文件的缓存副本。如果缓存的舱单副本是不同的服务器副本,新版本更新清单文件中定义的内容高速缓存的使用。
AppCache还允许Internet Explorer和Metro风格的应用程序在脱机状态下使用传统的URL的访问缓存的资源。这可以让你在浏览器窗口中键入一个URL,并没有任何网络连接的情况下访问此信息。此外,脱机页可以解决的URI使用本地缓存的信息。代码示例来看看在HTML5应用程序缓存(“œAppCacheâ)部分中的IE10开发人员指南。
总体而言,AppCache提供了一定的优势HTTP的缓存。HTTP缓存没有吨保证缓存的资源之后将TIF(临时Internet文件)将被清除。此外,HTTP缓存没有€™吨正确地解决在脱机状态下的URL。然而,HTTP缓存可用于优化AppCache的行为,通过指定的缓存资源的生命周期。如果从网站上下载或复制的资源从缓存的本地高速缓存中创建一个新的版本时,这将决定。
Metro风格的应用可以受益于AppCache通过在本地缓存的Web资源的访问的页框,它允许脱机访问的内容。
高速缓存大型本地使用索引型数据库的结构化数据
索引型数据库是一个本地JavaScript对象存储在本地机器上的数据库,允许快速索引和搜索的对象。前面介绍的食谱网站,包括16食谱从父站点中提取的数据库。想象一下,用一个RSS feed,一个WebSocket或XHR连接的,定期更新这个数据库。这将使您的用户能够访问到最新的食谱,即使他们有没有网络连接。
索引型数据库,您可以直接操作和索引的JavaScript对象。使用索引型数据库搜索本地信息的优点是它不会强迫你总是在云中搜索,降低了计算成本。这是假设你€™重新能够维持,是缓存在本地系统中的数据的相关性。
㈣ html5离线存储缓存列表可以动态生成吗
html5离线存储缓存列表可以动态生成
最简单来说,一个离线网络应用程序就是一个URL的列表——HTML,CSS,JavaScript,图片,或者其他类型的资源。离线网络应用程序的主要指向一个叫做名单文件并用于定位网络服务器上的资源列表。用于执行HTML5离线以用程序的网络浏览器将从名单文件中读取URL列表,下载这些资源,将他们在本地缓存,并自动在这些本地副本改变时保持他们更新。当你尝试在没有网络连接时访问网络应用程序,你的网络浏览器将自动切换并使用本地代替。
最新的主流的浏览器中都已添加了对HTML5的offlineStorage功能的支持,HTML5离线存储功能非常强大,它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据,是我们的网站的适应性和应用型更强!
例如一些在线游戏的某些文件可以使用离线存储缓存到本地,这样就不用每次刷新页面都要下载了。对于传统的浏览器缓存是无法控制的,浏览器有自己的缓存规则,我们无法实现缓存什么不缓存什么。但是使用离线存储可以缓存任何内容,包括可以自定义哪些可以被缓存,哪些必须联网才能访问。
离线存储所保存的不是应用中的某些数据,而是站点的某个些文件的副本,即html页面或图片等,而不是仅仅存储一段json或xml。
㈤ HTML5存储类型有什么区别
1.本地存储localstorage
存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。
2.本地存储sessionstorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。
3.离线缓存(application cache)
本地缓存应用所需的文件
使用方法:
①配置manifest文件
4.Web SQL
关系数据库,通过SQL语句访问
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
5.IndexedDB
索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据,使传统在线 Web 应用程序(比如移动 Web 应用程序)能够更快地运行和响应。
㈥ phpstudy如何离线下载数据库
可以试着利用HTML5的本地数据库,不过HTML5此功能还未标准化,可能会有浏览器兼容的问题。
phpStudy是一个PHP调试环境的程序集成包。该程序包集成Apache、PHP、MySQL、phpMyAdmin、ZendOptimizer,一次性安装,无须配置即可使用,是非常方便好用的PHP调试环境。
可以从phpstudy官网下载最新phpstudy版本,目前最新版本为v8.0。
㈦ HTML5 离线存储,有何不同
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储 (关闭浏览器依然存在)
sessionStorage - 针对一个 session 的数据存储 (关闭浏览器后即清空)
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
㈧ HTML5的离线储存怎么使用,以及工作原理
原理:HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
方法:
1.在index.html里加上<html manifest="test.manifest">
2.manifest清单格式如下:
CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
3.manifest文件的mime-type必须是 text/cache-manifest类型。
㈨ html5离线存储有几种方式
h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。
目标
解决4k的大小问题
解决请求头常带存储信息的问题
解决关系型存储的问题
跨浏览器
1.本地存储localstorage
存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。
大小:
每个域名5M
㈩ 离线操作数据库的流程有哪些
摘要 公司快速发展人员增加,因IT问题无法专注核心业务,糟糕的网络环境更是降低员工工作效率。选择上海芦洲应急服务,专职工程师3分钟响应、2小时内到场服务。