知识普及:天煞的HTML5到底是个什么东西

张金富
 张金富
发布于 2011年12月28日
收藏 48

HTML5开始大热标志性的事件是苹果前CEO Steve Jobs 公开炮轰Adobe Flash,并指出Flash在移动终端的不利因素,而且HTML5将获得胜利。顿时IT界、数字营销界、数字媒体界等相关领域的人开始一窝蜂地议论、追捧、打击,HTML5成了当仁不让的明星(就在不久前Adobe宣布停止对Mobile端Flash的开发与更新)。但是很多人都在问:HTML5是什么?如何鉴定HTML5产品?

DamnDigital近日制作了一篇由浅入深的知识普及帖,详细介绍了HTML5的方方面面,包括什么是HTML5?HTML5有哪些特质?HTML5/4有什么区别?谁先试水HTML5的?HTML5相关站点有哪些?HTML5的经典案例何处寻?

知识普及:天煞的HTML5到底是个什么东西

一、什么是HTML,以及HTML5

1. HTML

HTML是超文本标记语言的英文缩写,这是一种标记语言,不需要进行编译,直接由浏览器执行。

语言就必须有一个语法的规则,如果没有规则,谁知道应该把一个HTML元素以怎样的形式展现给用户呢?目前HTML语言的标准是由 W3C(World Wide Web Consortium)负责制定的。依照规则,无论是何种浏览器,对于相同的HTML代码,应当展现给用户相同的效果。

目前HTML语言最新版本为4(HTML4),此外还有一个可扩展超文本标记语言(XHTML)作为其扩展版本,提供更为丰富的功能和更严谨的语法规范。

2. HTML5

HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出,於2007年被W3C接纳,并成立了新的HTML工作团队。2008年1月22日,W3C发布了最新的HTML5工作草案,HTML工作组包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等数百个开发上。HTML5中增加了许多新特性,例如嵌入音频、视频和图片的函数、客户端存 储数据、交互式文档等,通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则,HTML5进一步增强了互动性,并有效减少了开发成本。 

二、HTML5 有哪些特质

知识普及:天煞的HTML5到底是个什么东西

我们来看看W3.org列举出来的8个Class技术描述:

A. 语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

B. 本地存储特性(Class:OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(HTML5本地存储最重要的技术之一) 和API说明文档。

C. 设备兼容特性 (Class:DEVICE ACCESS)

从Geolocation 功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联

D. 连接特性(Class:CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。

E. 网页多媒体特性(Class:MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS、摄像头、影音功能相得益彰。

F. 三维、图形及特效特性(Class:3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

G. 性能与集成特性(Class:Performance & Integration)

没有用户会永远等待你的Loading——HML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。

H. CSS3特性(Class:CSS3)

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

Apple 官方对HTML5的各个特性做了详细并且动态的展示:http://www.apple.com/HTML5/showcase 

 

三、HTML5与HTML4的区别

A.简化的语法

更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写,这就行了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。

B. 一个替代Flash的新”canvas”标记

对于Web用户来说,Flash既是一个惊喜,也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说,用新的 “canvas” 标记生成视频的技术已经到来。

目前, “canvas” 标记并不能提供所有的Flash具有的功能,但假以时日,Flash必将从web上淘汰。我们拭目以待,因为很多人还并不认同这种观点。 

C. 新的 “header” 和 “footer” 标记

HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现,它们是专门为标志网站的这些部分设计的。在开发网站时,你不在需要用”div”标记来标注网页的这些部分。

D. 新的 “section” 和 “article” 标记

跟”header” 和 “footer”标记类似,HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。
据推测,除了让代码更有组织外,它也能改善SEO效果,能让搜索引擎更容易的分析你的页面。

E.新的 “menu” 和 “figure” 标记

新的”menu”标记可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。类似的,新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然,你可以用样式表来控制文字和图像,但使用HTML5内置的这个标记更适合。

F. 新的 “audio” 和 “video” 标记

新的”audio” 和 “video” 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称,它们是用来嵌入音频和视频文件的。

除此之外还有一些新的多媒体的标记和属性,例如”track”,它是用来提供跟踪视频的文字信息的。有了这些标记,HTML5使Web2.0特征变得越来越友好。问题在于,在HTML5还未被广泛的接受之前,Web2.0还是老的Web2.0。 

G. 全新的表单设计

新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改,它们有很多的新属性(以及一些修改)。如果你经常的开发表单,你应该花时间更详细的研究一下。

H. 不再使用 “b” 和 “font” 标记

对我个人来说,这是一个让我不太理解的改动。我并不认为去除 “b” 和 “font”标记会带来多大的好处。我知道,官方的指导说这些标记可以通过CCS来做更好的处理,但这样一来,为了在文章一两个地方出现的这种标记,你就需要在独立的css和文本两个地方来实现这一的功能,岂不笨拙。也许我们以后会习惯这种方法。 

i. 不再使用 “frame”, “center”, “big” 标记

事实上,我已经记不清曾经何时用过这些标记了,所以,我并不为去除这些标记感到悲哀。相同的原因,有更好的标记能实现它们的功能——这很好,任何作废的标记从标准中剔除都是受欢迎的。

四、早期试行者:

体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器(Apple 开发的开源浏览器内核),如 Chrome 和 Safari,Firefox 不太流畅,即使现在Firefox 9官方声称完美支持HTML5,但是实际应用中,我们发现还是相对于Chrome和Safari欠缺许多。

W3C在2011年上半年正式推出了HTML5的初步标准,随之而来是谨慎的Mircosoft 发布了完美支持HTML5的IE9.

当然,介于目前浏览器市场玲琅满目,目前除了主流的浏览器的最新版本之外,之前的版本都在或多或少的拒绝HTML5。

 

五、其他HTML5开发相关站点:

知识普及:天煞的HTML5到底是个什么东西

URL:http://phonegap.com/

PhoneGap是一个开源的、基于JavaScript语言、用于快速和简便开发手机应用程序的开发框架,用来构建跨平台的使用HTML,CSS和JavaScript的移动应用程序。我们将会放出phoneGap的详细介绍。它是最普及的HTML5 to App的工具。

知识普及:天煞的HTML5到底是个什么东西

URL:http://jsdo.it

JSDO.IT是一个js 代码分享的网站,强调社区参与和协作,它可以让程序员,开发者在站内分享自己写的程序代码和作品,也可以在站内相互交流,共享JS代码相关的内容,是通过社交网络或社区为基础来建立的代码分享功能的网站。其界面流畅,带有自动更新的预览面板,可接受开源JS库。另外,它还有一个独特的性能,即可在智能手机中打开浏览器查看的“智能手机预览”命令。这个工具需要用户注册并登陆才能使用。

知识普及:天煞的HTML5到底是个什么东西

URL:http://HTML5boilerplate.com/

HTML5 Boilerplate 是一个HTML / CSS / js模板,是实现跨浏览器正常化、性能优化,稳定的可选功能如跨域Ajax和Flash的最佳实践。

此网站由业界众多专业资深前辈共同发起的一个开源开发模板站点,来帮助大家快速使用HTML5技术开发网站,同时兼容其他各种旧版本的浏览器浏览体验。HTML5 Boilerplate并不是一套框架,他仅仅是一套模板。大家可以把他当作自己的新项目模板,在此基础上建立自己的项目。这一网站志在建立一套简单的模板帮助大家快速的进行开发,一般来说下载了这套模板后,便可以在其上进行修改,测试,查看兼容性浏览等。

知识普及:天煞的HTML5到底是个什么东西

URL:http://proHTML5.com/

所有程序员开发者,或是对HTML5有过些许了解的人都听说过有一本程序员编程手册《PRO HTML5 PROGRAMMING》,而此网站是此书的线上官方站点,除了提供书中所提及的关于目前HTML5提供新特性讲解的部分内容,包括使用实例讲解API的调用方法等等,同时还提供更多线上编程方面的指导学习资料,以及学习实践工具。值得收藏。

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.beautyoftheweb.com/

在beautyoftheweb网站上,可以下载到40种语言的IE9 RC版(开发者体验版),通过Bautyoftheweb,开发人员和爱好者即可有规律地对IE9平台上的HTML5实现效果进行预览,目前,此网站上的IE9 RC版可以直接下载,同时还可以看线上指导视频,就算非开发者,程序员也能通过视频,领略到HTML5在IE9平台上带来的良好体验感受。目前所有RC版下载都是免费得,比较开放,透明。可以说,这是微软为了宣传IE9而进行推广的一个网站。

 

六、基于HTML5的优秀作品

知识普及:天煞的HTML5到底是个什么东西

North Kingdom:ROME & “3 Dreams of Black” 及其背后的故事(长文多图杀猫瞎眼)

知识普及:天煞的HTML5到底是个什么东西

North Kingdom联手Forsman&Bodenfors:Volvo Cross Country Travels

知识普及:天煞的HTML5到底是个什么东西

创意互动:我们来玩玩有趣的图像立体化 WOOOOOW

知识普及:天煞的HTML5到底是个什么东西

[V]以 HTML5 制成的纪录片——One Millionth Tower 重新认识城市及小区发展

知识普及:天煞的HTML5到底是个什么东西

[V]WebGL:点击鼠标 开始奇幻太空之旅

 

知识普及:天煞的HTML5到底是个什么东西

WebGL实验作品:Surface

 

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.smartusa.com/

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.ds5.citroen.co.uk/uk/style-and-sophistication

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.bleepradio.gr/program

知识普及:天煞的HTML5到底是个什么东西

URL:http://pickupamerica.org/

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.muchbeta.com/

知识普及:天煞的HTML5到底是个什么东西

URL:http://beta.rallyinteractive.com/

知识普及:天煞的HTML5到底是个什么东西

URL: http://www.beetle.com/

 

知识普及:天煞的HTML5到底是个什么东西

URL:http://labs.dinahmoe.com/plink

知识普及:天煞的HTML5到底是个什么东西

URL:http://beta.theexpressiveweb.com/

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.hyundai-veloster.eu/

知识普及:天煞的HTML5到底是个什么东西

URL:http://experimentgame.com/

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.diesel.com/island

知识普及:天煞的HTML5到底是个什么东西

URL:http://www.thisshell.com/

参考资料:

(1)Wiki-HTML5 

(2)W3C 

(3)W3C HTML5 logo

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:知识普及:天煞的HTML5到底是个什么东西
资讯来源:驱动之家
加载中

最新评论(8

北落
北落
天杀的新语言
後方之水
後方之水
天杀的flash什么时候才能死啊啊啊啊啊啊
plain
plain
这天煞的html5什么时候才到来啊啊啊啊啊啊。。。。
天杀的ie什么时候才能死啊啊啊啊啊啊。。。
张金富
张金富

引用来自“笨蛋EGG”的评论

引用来自“张金富”的评论

我07年的酷睿2笔记本竟然不支持WebGL,郁闷啊!

WebGL还要硬件上的支持?!?要什么支持显卡?CPU?

显卡不行啊!X1600移动版
xinyidt
xinyidt
支持
笨蛋EGG
笨蛋EGG

引用来自“张金富”的评论

我07年的酷睿2笔记本竟然不支持WebGL,郁闷啊!

WebGL还要硬件上的支持?!?要什么支持显卡?CPU?
张金富
张金富
我07年的酷睿2笔记本竟然不支持WebGL,郁闷啊!
返回顶部
顶部