html5 & web应用程序

最新推荐文章于 2023-07-07 16:10:54 发布

晴-_-天

最新推荐文章于 2023-07-07 16:10:54 发布

阅读量1.4k

点赞数

分类专栏： IT世界

本文链接：https://blog.csdn.net/houseq/article/details/38759139

版权

IT世界专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Html5

HTML5是什么？相信这个问题并不容易回答，大多数人对于HTML5的概念仅仅是听说过而已，非要让他说出个所以然来，结果只能让你失望。相比普及了近十四年的HTML4来说，HTML5带来的震撼其实丝毫不亚于当年的双核VS单核。那么对于我们普通人来说，HTML5到底意味着什么？

HTML5的前世今生
　　HTML是什么？想必很多人都有耳闻。举个例子吧，比方说一个网页摆在你的面前，那么HTML就是一个骨架，而上面的文字、图片、视频、音频则作为附属在这个骨架上的皮肉，来给我们带来丰富的视听体验。如果没有这些皮肉，那么网页显然就是一句空谈，但如果没有HTML，我们也就不知道该如何将这些多媒体信息组合到一起。
　　1999年，HTML 4.01正式为W3C（万维网联盟）所推荐，于是这款全新的WEB标准开始了它长达十数年的互联网统治时代。随着带宽发展及电脑性能的提升，音频和视频开始被越来越多地用户推崇，而这两种资源恰恰是HTML 4.01所无法解释的。于是当时便有一家公司独辟蹊径，推出一款专门用于解释和播放影音文件的WEB标准，而这就是现在家喻户晓的Flash。

虽然Flash对于当时的WEB产业有着不可磨灭的贡献，但随着该技术在全球应用，一些弊端也开始明显地显露出现，比如安全性不高、资源消耗过大等等，最关键的是它很难适应日渐普及的移动WEB，程序员往往需要同时为PC版用户和移动版用户编写两套网站页面。

　　也就是在这个大背景下，HTML5风声水起，和之前的HTML4相比，新版本最大的亮点便是增加了<video>和<audio>两个标签，使得浏览器能够在不装任何插件的情况下直接播放影音资源。而且它还有很多更新的体验，比如直接在浏览器上绘制矢量图形、内嵌本地SQL数据库使交互加速、提供API实现从桌面拖拽文件到浏览器执行上传、自动获取用户地理信息、允许用户在离线状态下使用GMail，以及更利于搜索引擎索引整理的网站导航块等等。

W3C 在HTML 5 proposal 中为 HTML 5 赋予了这样的使命，它将弥补上一代 HTML 的不足，具体说，是实现 Flash, Silverlight, JavaFX 所能实现的功能。51CTO最近有对苹果抢先支持HTML5视频功能做过报道。HTML 5，这个 HTML 明日之星是否会改变Web 应用的游戏规则，是否会让这些富 Web 插件成为历史，InfoWorld 的专栏作家 Paul Krill 为此撰文并作了论述。
HTML 5的承诺
Ajaxian 网站的合伙创始人及 Mozilla 开发工具指导员 Dion Almaer 说，在为 Web 提供矢量图形和视频方面，HTML 5 事实上晚了一步。 HTML 5 中，诸如 Canvas 一类的 2D 绘图技术，一直为 Apple, Google, 以及 Mozilla 这类公司所重视（尽管微软也对 HTML 5 的部分功能表示赞赏，但他们至今也不支持 Canvas）。
HTML 5 中，Canvas, 本地存储， Web Workers 一类的功能可以让我们做更多事。另一位Ajaxian 网站的合伙创始人及 Mozilla 开发工具指导员 Ben Galbraith 说，本地存储可以让用户在离线状态下继续使用 Web，而 Web Workers 让下一代 Web 应用中的复杂运算变得轻松，让一些需要很长时间运行的任务在后台运行。
Google Chrome 浏览器项目经理 Ian Fette 说， Web 应用将变得更有趣，他们会变得更快，会提供更好的用户体验，让在线 Web 应用和桌面应用之间的界限越来越模糊。
HTML 5的部分功能已经实现
经过5年的工作，HTML 5 细则已于2008年发布，其中的部分细则已经在某些浏览器得以实现，然而 HTML 5 的全部功能仍然不会在近几年内完成。
Mozilla Firefox 项目技术主管 Vlad Vukicevic 说， HTML 5 支持视频，而 Firefox 3.5 也刚刚新加了视频支持，Google Chrome 也支持视频标签，微软在 Internet Explorer 8 中支持某些 HTML 5 功能，如本地存储，AJAX 导航，以及多个 DOM 原型。
Opera 公司的 Web 宣讲人 Molly E. Holzschlag 表示， Opera 支持 Canvas，并计划支持视频。Apple 也在其 Safari 浏览器支持视频和音频标签，以及 Canvas 技术（Canvas 就是苹果发明的）。
HTML 5的一面: 扔掉那些插件
Almaer 说，尽管 Adobe，微软，SUN （即将成为 Oracle）这些公司已经分别在 Web 中实现了他们自己的多媒体技术，HTML 5 最终可能抢去他们的饭碗。RedMonk 分析师 Michael Cote 说，本质上，HTML 5 所能做的和这些公司所做的没有区别，JavaFX 也将受到威胁。"
HTML 5 细则的合作设计者 Ian Hickson 表示，HTML 5 的目标是将 Web 从那些非开放性富插件中解放出来，他们是独立的提供商，不适合开放的 Web。Hickson 说，使用专门公司的产品对开发的 Web 是一种风险，如果他们停止开发，或开始收费将怎么办？Hickson 补充道，象以前的 Windows 一样，如果我们的主要开发平台控制在单一的供应商手中会是很可怕的。
Firefox 主管 Vukicevic 说，Mozilla 希望保持开放，并保证视频一类的技术不是掌握在某些公司手中，不过 HTML 5 和 Canvas 最终是否能真正取代 Flash,Silverlight 以及 JavaFX，还取决于开发者。Vukicevic 认为，IE8 不支持 HTML 5 的一些功能，对开发者来说是一个问题，鉴于 IE 浏览器到市场份额，开发者要么使用微软的 API 提供额外开发，要么使用 Flash 一类的技术。
插件的一面: 他们更好，而且已经实现了
尽管 Adobe, 微软以及 SUN 都参与了 HTML 5 细则的制定，他们都表示自己的技术是必要的。HTML 5 仍是一个发展中的标准，可能需要5到10年才能最终完成，因此，现在做比较还为时过早。微软发言人表示，Silverlight 仍有必要存在，因为它包含了一些高级功能，如更好的编程模型， C#，3D 功能以及可以在浏览器之外运行的功能。
Adobe 的开发工具副总裁 Dave Story 表示，HTML 5 面临很多挑战，浏览器市场仍然很零散，浏览器之间的兼容问题非常严重，HTML 5 的时间线显示，最终 HTML 5 + CSS 3 可能要 10年的时间才能定稿，在这期间，Flash 会持续发展，并提供更好的用户体验。
SUN 副总裁，也是被号称为 Java 之父的 James Gosling 表示，JavaFX 在渲染，性能，表现方面比 HTML 5 要优秀得多。
分析师 Cote 表示，目前这些富 Web 插件还没有眼下的威胁，要实现这些插件中的功能还要很多年，他希望即使 HTML 5 发布之后，这些插件技术仍能继续存在。Google 的 Fette 也同意，HTML 5 只是一个起始点，Google 一类的公司还会推出自己的技术，如向 Web 拖放图片的技术。
几家行业巨头将面临抉择
参与HTML 5 的公司，大多要么是浏览器厂商，要么是富 Web 应用工具开发商，很少二者都是，微软除外，Almaer 说，微软也将因此进入两难境地，微软在 Silverlight 上花了很大力气，Silverlight 团队存在的意义是为浏览器提供增强，如果 HTML 5 轻易实现了，还要Silverligth 做什么。
Google 也将不得不遇到某些抉择，比如，他们的 Youtube 使用Flash 实现视频，HTML 5 对视频的支持将让他们重新考虑这个问题，他们需要在成本和效益方面艰难抉择。

一些错误认识：

流言“在2012(或2022)年之前，俺是用不上HTML5的了。”
这一流言是从HTML5进入到W3C流程的候选推荐阶段(Candidate Recommendation，简称REC)的项目日期所误传开来的。

官方Wiki上写道：如今一个规范要成为候选推荐标准(REC)，它需要具备百分之百的可实施性(interoperable implementations)，只有成功通过上万项的测试案例(Test Case)后才能验证这点(据保守估计，整个规范可能需要进行2万项测试)。当你在心里默算写这些测试案例需要多少时间，实施每个新特性又需要多少时间时，你就会明白HTML5规范制定的时间跨度为什么这么长了。
因此，按此说法，在你能在两大浏览器中用上所有的功能之前，HTML5的规范是没有最终定稿的。
当然，真正重要的一小部分HTML5的特性已得到浏览器的支持，任何浏览器的支持情况汇总表单都会在一周之内过时，因为浏览器制作厂商的创新速度非常之快。另外，许多HTML5的新特性也通过JavaScript脚本在不支持HTML5的老浏览器中得以重现。Canvas属性在所有新浏览器中得到支持，其中包括IE9，另外在老的IE浏览器中，通过excanvas库，我们也可以模拟Canvas的特性。而音频和视频标签效果，我们则可以通过Flash在旧的浏览器中实现。
HTML5在设计上就可以优雅降级，因此运用一些JavaScript代码和创意，HTML5的所有功能都可以在老浏览器上实现。
“俺的浏览器支持HTML5，你的不支持。”
这一流言认定HTML5是一个整体不可分割的标准。但实际上不是。正如前文所说，HTML5是一组新特性的组合。因此，短期来讲，你不能说一个浏览器支持了HTML5的所有内容。而当浏览器能做到这点时，浏览器本身已经无关紧要了，因为那时我们将被新一代的HTML语言所震撼。
感觉HTML5乱的一塌糊涂，是吧?看看CSS2.1，这么多年了它都是一个尚未最终完成的标准，但是我们每个人无时不在用它。我们用CSS3轻松添加圆角，这点很快就会得到所有浏览器的支持，虽然CSS3的其他特性尚未得到所有浏览器的支持。
要提防那些浏览器“评分”网站。这些网站测试的内容经常与HTML5无关，比如CSS，SVG，甚至是网页字体(web fonts)。你手头需要完成的工作才是要紧的，你客户受众浏览器所支持的技术才是用得上的技术。
HTML5实际上正式认可了一些常见的书写错误(Tag Soup)
HTML5在语法方面要比XHTML松散很多：比如，你可以用纯大写或小写字母书写标签，甚至大小写混用也无妨。
这与HTML4毫无差异，但是如果你用习惯了XHTML，你碰到这种写法时还是会很震惊的。现实中，如果你使用HTML和文本内容书写页面，而非使用XML(你极有可能是混用文本和HTML书写页面的，因为IE8并不能真正的渲染XHTML页面)，那么上述细微差别也无关紧要：浏览器会忽略尾部的斜杠，双引号，以及大小写。
HTML5语法看似松散，但实际的解析规则要严格的多。因而HTML5中，常见的书写错误(Tag Soul)将不复存在;HTML5的规范对这些无效标记做精确的描述和定义，因此所有遵循规范的浏览器都会生成同样的文档对象模型(DOM)。如果你曾写过JavaScript来遍历DOM，那么你就会对DOM不一致所带的恐怖经历有所体会。
但这种修正不应导致无效代码泛滥。HTML5为你创建的DOM可能并不是你想要的那个，因此对书写的HTML5代码进行验证仍然至关重要。随着新特性的大量涌入，对细小语法错误的忽视会让你的脚本失效，或是CSS样式出错，这也是我们为什么需要HTML5验证器的原因之所在。
HTML5远不仅仅只是让一些常见的书写错误合法化，而且让这些常见错误(Tag soup)成为历史。

“我需要把我的网站从XHTML转换HTML5。”

HTML5对松散语法的包容性时候敲响的了XHTML的丧钟吗?制定XHTML2规范的工作组已经解散，对吧。
没错，XHTML2的工作组在2009年年末的时候解了。他们起草的这个规范是用来与HTML5竞争的，但尚未得到执行实施，然而，同时保留两队人马是对W3C组织资源的一种浪费。另外XHTML1已经是一个业已完成的规范，得到所有浏览器的广泛支持，并在必须的时限内仍将得到所有浏览器的支持。因此你用XHTML书写的网站也将免受折腾之苦。

"HTML5将会干掉XML"
根本不会，如果你需要使用XML而是HTML，你可以选用XHTML5，它几乎包含所有HTML5的优点，只是要必须遵循严格XHTML语法(比如，要标签属性中的双引号不能省，自封闭元素的末尾斜杠不可胜，必须用小写字母书写标签等等诸如此类。)
现实情况是XHTML5并不完全包含所有HTML5的特性。譬如 <noscript> 就失效了。但你想想，这古董玩意儿还有人在用吗？
正因为CSS Web字体尚未得到广泛支持，以Flash为基础的sIFR技术将会填补这一空白，Flash也因逆向兼容HTML5视频内容而挽救局面。因为HTML5设计时“照顾”了老浏览器，Video标签之间的其他标记将会被支持HTML5的浏览器所忽视，因此用老式的<object>或<embed> 标签可以用Flash嵌入所有浏览器支持的视频内容。
但也并是不所的应用场合都是可以用HTML5取代Flash的。比如HTML5中就没办法进行数字版权的管理。Opera，Firefox和Chrome这类浏览器允许简单的右键点几下就将视频保存的本地电脑上。如果你不想用户保存视频文件，你就需要使用插件。另外捕捉麦克风或是摄像头的信号就只能通过Flash实现。（不过<device> 元素已经出现到HTML5以后的规范中），因此如果你想写一个可以终结聊天轮盘（Chatroulette）网站的东西来，那么HTML5并不适合你。
HTML5在可访问性（Accessibility）方面做得比较差
关于HTML5的讨论中有不少是唠叨HTML5可访问性的。这点很好，应该欢迎：因为网络的基础语言已经做了太多了的改变，因此确保网页对于那些残障人士的易访问性极其重要。另外，更为重要的是在技术方案的制定过程中就将其考量进入，而非时候修补。毕竟大多数开发人员甚至没为图片标签添加Alt属性，所以提供现成可用的易访问性（accessibility）相比人们手动添加更为易成功。
这也是为什么HTML5添加了类似滑块（<input type=range>，目前仅Opera和Wbkit内核的浏览器支持）原生控件和日期选定控件（<input type=date>，仅Opera支持）——因为之前，我们只能用JavaScript和图片来模拟，并添加键盘支持和WAI-ARIA的Role属性。
而Canvas标签则又是另一番情况，该标签原本是苹果独创的，后遭其他浏览器厂商的逆向工程破解，继而被吸纳为HTML5规范的一部分，因此Canvas技术本身在可访问性方面并未做考量。如果你只是用它制作一些视觉美化，那问题不大，你大可把它看成图片，，只是不能添加ALt属性来指定替换的文本内容（已有人建议在规范中作此增添，但目前尚未得到实施）。因此，确保Canvas着中的信息在页面的其他地方有替代信息，从而增强页面的可访问性。
Canvas中的文本变成了像素，如图片中的文本。因此，辅助技术和屏幕阅读器来可以读出其中的信息。可考虑用W3C的可缩放适量图像标准（SVG）替代，尤其对于动态图像和文本内容来说。SVG目前得到了主流浏览器的支持，其中包括IE9（IE8以及一下的浏览器不支持，不过SVGWeb库通过Flash技术可以在老式浏览器中模仿SVG。）
<video> 和 <audio>标签也很有前途。尽管这两个标签的规范尚未完全确定（而且许多浏览器还不支持）。HTML5已经添加了一个新的<track> 的标签，可以包含带时间轴的文本（歌词和外文媒体的字幕），你可以之间在视频下面用JavaScript来添加时间轴字幕，并与视频内容同步。

--备注：

1.html：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（外语：Head）、和“主体”部分（外语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

由来
万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
定义
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

web应用

Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户很容易访问应用程序。用户只需要有浏览器即可，不需要再安装其他软件。

应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序，也就是说这类程序一般独立运行。而B/S就是浏览器端/服务器端应用程序，这类应用程序一般借助IE等浏览器来运行。WEB应用程序一般是B/S模式。Web应用程序首先是“应用程序”，和用标准的程序语言，如C、C++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。换句话说，它是典型的浏览器/服务器架构的产物。

--备注：

1.web开发：网站开发

2.web前端开发：Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。