HTML 5 过去、现状、将来
2010-05-26 10:39
253 查看
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;
mso-font-charset:2;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:0 268435456 0 0 -2147483648 0;}
@font-face
{font-family:宋体;
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-alt:SimSun;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 135135232 16 0 262145 0;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:536871559 0 0 0 415 0;}
@font-face
{font-family:"/@宋体";
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 135135232 16 0 262145 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
mso-pagination:none;
font-size:10.5pt;
mso-bidi-font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:宋体;
mso-font-kerning:1.0pt;}
span.apple-style-span
{mso-style-name:apple-style-span;}
/* Page Definitions */
@page
{mso-page-border-surround-header:no;
mso-page-border-surround-footer:no;}
@page Section1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;
layout-grid:15.6pt;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:1945454835;
mso-list-type:hybrid;
mso-list-template-ids:-2070634514 67698703 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l0:level1
{mso-level-tab-stop:21.0pt;
mso-level-number-position:left;
margin-left:21.0pt;
text-indent:-21.0pt;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
-->
探讨
HTML 5
提供的超强功能及可能面临的安全挑战。要想深入了解这些问题，有必要了解
html 5
是什么？它如何发展起来？现状如何？前景如何？
1.
html 5
是什么？
HTML5
表面上看是用来
取代
Flash Web
视频的
，然而，它的使命远不止此。
HTML5
是下一代
Web
语言，它不单单是一种标记语言，更为下一代
Web
提供了全新功能，并将引领下一代
Web
实现类似桌面的应用体验。
HTML5
主要新功能
：
本地音频视频播放
动画
地理信息
硬件加速
本地运行（即使在
Internet
连接中断之后）
本地存储
从桌面拖放文件到浏览器上传
语义化标记
安全属性
Iframe
HTML 5
针对
iframe
元素增加
sandbox
属性，可以防止不信任的
Web
页面执行某些操作。它可以防止如下操作：
◆
访问父页面的
DOM
（从技术角度来说，这是因为相对于父页面
iframe
已经成为不同的源了）
◆
执行脚本
◆
通过脚本嵌入自己的表单或是操纵表单
◆
对
cookie
、本地存储或本地
SQL
数据库的读写
HTML 5
的修订历史页面还提到了
sandbox
的其他特性：
◆
禁用插件
◆
禁止其他浏览上下文的导航
◆
禁止弹出窗口和模式对话框
◆iFrames
因安全问题而臭名昭著，这主要是因为
iFrames
常常被用于嵌入第三方内容，而后者则可能会执行某些恶意操作。
◆sandbox
通过限制被嵌入内容所允许的操作而提升
iFrames
的安全性。这种方式将沙箱内容与父页面进行了分离，因此限制了被嵌入内容的权限。
与
sandbox
一起出来的还有其
MIME
类型：
text/html-sandboxed
。
Hickson
说到：
text/html-sandboxed
MIME
类型确保用户不会访问到不可信的内容。它包含两部分内容：首先，如果用户直接访问页面时，浏览器不可以渲染那些具有
text/html-
sandboxed MIME
类型的页面。目前所有浏览器都支持这一点，这些浏览器会下载页面的标记但不会渲染页面；其次，支持
sandbox
属性的浏览器需要渲染具有
text/html-sandboxed MIME
类型的
iframes
（但会受到
sandbox
属性中所设定的权限限制）目前为止，还没有浏览器实现这一点，
Google Chrome
也是如此（它会渲染父页面，但却下载
iframe
内容而非在
iframe
中对其进行渲染）。因此目前还没法使用该项技术，除非
Google
更
新
Chrome
以支持这一点（从理论上来说，其他的浏览器厂商在实现了对
sandbox
属性的支持后就会实现该技术，让我们拭目以待吧）。
目前，只有
Google Chrome 4.0
使用了
sandbox
，
Firefox
、
IE8
和
Safari
都还没有实现这一点，但相信不久之后这些浏览器都会实现的。围绕着
HTML 5
<video>
元素发生了很多事情，
Google
通过
H.264
标准对其进行实现，而其他浏览器则使用了不同的标准或是干脆还没有实现。但这
种情况不会发生在这里，因为每个浏览器都可以在内部自由决定如何实现
sandbox
。但即便是明天所有的主流浏览器都采用了
sandbox
，众多的开发者
和内容管理者也不能立刻就使用它，因为还有那么多的遗留浏览器会忽略掉该属性，因此稳妥的办法还是采取常规的安全手段来保护
iFrames
。
2.
发展历程
自
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
以及微软。
HTML5
草案的前身名为
Web Applications 1.0
。於
2004
年被
WHATWG
提出，於
2007
年被
W3C
接纳，并成立了新的
HTML
工作团队。在
2008
年
1
月
22
日
，第一份正式草案已公布
,
预
计将在
2010
年
9
月正式向公众推荐。
WHATWG
表示该规范是目前正在进行的工作，仍须多年的努力。
3.
HTML5
应用现状
现今，
各大浏览器对
HTML5
的支持各有千秋
，
HTML5
现在已经被广泛应用，你可能不知道，
Google
的首页
也使用
HTML5
，不过，目前，他们还仅仅使用了
HTML5
的
doctype
，页面的其它部分还是
旧代码
，
但
Google
在他们的各种应用中已经在广泛采用
HTML5
。最典型的例子是
Gmail
，
HTML5
的离线存储使用户即使在离线状态下也可以使用
Gmail
，另外，
Google Docs
也使用离线存储，同样使用离线存储的其它厂商的类似应用还包括
Zoho
的办公套件和
Wordpress
的博客平台。如果想对
HTML5
的离线存储功能深入了解，可以看一看
Mark Pilgrim
的
how to add offline
support to your apps
一文。
另外，文档共享站点
Scribd
开发基于
HTML5
的文档阅读器
上图是
Scribd
的新文档阅读器，全部基于
Web
标准，并未借助
Flash
。
Scribd
是
HTML5
结合
CSS
所能实现的惊人功能的最好例子，他们还使用
font-face
实现个性化字体，另外，在翻页时的变换效果也完全基于
CSS3
。这些
Web
标准工具的结合使用，使
Scribd
实现了从
Flash
向纯
HTML
的过度，同时并没有牺牲文档在结构，字体，内嵌图片，图层等方面的功能。
Scribd
的最新文档阅读器甚至支持
IE6
，这里有一个实例，
使用
纯
HTML
输出复杂的公式
。
关于
HTML5
视频，最典型的例子莫过于
YouTube
和
Vimeo
，他们都提供了
HTML5
版本。
HTML5
地理信息定位
点击地图中，黄色小人上方的圆圈，可以告诉
Google
地图你的地理位置
HTML5
的另一个功能是地理信息定位功能，一些浏览器提供了
geolocation API
，这个
API
也由
W3C
管理，可以结合
HTML5
实现你当前地理位置定位。
Google Maps
在使用该功能，在
Google
地图上，有一个小圆圈，点击一下，就能告诉
Google
地图你现在的地理位置。目前，
Geolocation API
并没有被众多桌面浏览器广泛采用（只有
Chrome
和
Firefox 3.6+
采用了），但
Google Gears
插件可以帮助那些旧浏览器实现该功能。
Twitter
借此实现地理信息感知的
tweets
消息，当浏览器支持
geolocation API
的时候，会自动使用该
API
，否则，则使用
Google Gears
。
4.
应用前景
HTML5
改变了
Web
文档的结构方式，借助
header, footer, section, article
这些标签，可以实现更具结构化，语义化的
Web
文档。这样，搜索引擎可以更容易索引
Web
站点，我们也可以搜索到更快，更准确的信息。
已经有数不清的站点在使用
HTML5
新标签，在
HTML5Gallery
可以找到大量这样的站点。借助
Microdata
，
HTML5
还可以实现更强大的语义结构，这个标准化的数据格式（类似
microformats
），可以让你的站点不仅能够提供数据，还能提供数据定义。
Microdata
对浏览器和搜索引擎都意义深远，搜索引擎可以借助
Microdata
发现你网络中的好友，而浏览器则可以藉此连接到你的社会网络好友站点，你可以在
Google
的
Rich Snippets Testing Tool
对此进行体验。
CSS
之父，也是
Opera CTO
的哈哈康
﹒
维姆莱（
Hkon Wium Lie
）表示，
Flash
必须以
Plug-in
（外挂）的方式呈现在网页上面，使得网页的浏览速度变慢、耗费资源。相比之下，
HTML
加上
CSS
，只需要以简单的程序语言指令，就可以呈现一样的效果。
HTML 5
可以做到任何
Flash
可以做到的事，甚至更好。
同时，维姆莱表示：
“
问题一直都存在，这得靠浏览器业者持续修正
…
至少相较于
Flash
的漏洞，只能靠
Adobe
一间厂商来做这件事。
总之，
HTML5
是近十年来
Web
标准最巨大的飞跃。和以前的版本不同，
HTML 5
并非仅仅用来表示
Web
内容，它的使命是将
Web
带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管
HTML 5
还存在这样、那样的问题，但
HTML 5
正在改变
Web
。正如
Mozilla
的技术副总裁
Mike Shaver
说，
HTML 5
是一个被寄予厚望的概念，它既是
WHATWG
组织的实验田，又是
W3C
的标准之路。
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;
mso-font-charset:2;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:0 268435456 0 0 -2147483648 0;}
@font-face
{font-family:宋体;
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-alt:SimSun;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 135135232 16 0 262145 0;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:536871559 0 0 0 415 0;}
@font-face
{font-family:"/@宋体";
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 135135232 16 0 262145 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
mso-pagination:none;
font-size:10.5pt;
mso-bidi-font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:宋体;
mso-font-kerning:1.0pt;}
span.apple-style-span
{mso-style-name:apple-style-span;}
/* Page Definitions */
@page
{mso-page-border-surround-header:no;
mso-page-border-surround-footer:no;}
@page Section1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;
layout-grid:15.6pt;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:1945454835;
mso-list-type:hybrid;
mso-list-template-ids:-2070634514 67698703 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l0:level1
{mso-level-tab-stop:21.0pt;
mso-level-number-position:left;
margin-left:21.0pt;
text-indent:-21.0pt;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
-->
探讨
HTML 5
提供的超强功能及可能面临的安全挑战。要想深入了解这些问题，有必要了解
html 5
是什么？它如何发展起来？现状如何？前景如何？
1.
html 5
是什么？
HTML5
表面上看是用来
取代
Flash Web
视频的
，然而，它的使命远不止此。
HTML5
是下一代
Web
语言，它不单单是一种标记语言，更为下一代
Web
提供了全新功能，并将引领下一代
Web
实现类似桌面的应用体验。
HTML5
主要新功能
：
本地音频视频播放
动画
地理信息
硬件加速
本地运行（即使在
Internet
连接中断之后）
本地存储
从桌面拖放文件到浏览器上传
语义化标记
安全属性
Iframe
HTML 5
针对
iframe
元素增加
sandbox
属性，可以防止不信任的
Web
页面执行某些操作。它可以防止如下操作：
◆
访问父页面的
DOM
（从技术角度来说，这是因为相对于父页面
iframe
已经成为不同的源了）
◆
执行脚本
◆
通过脚本嵌入自己的表单或是操纵表单
◆
对
cookie
、本地存储或本地
SQL
数据库的读写
HTML 5
的修订历史页面还提到了
sandbox
的其他特性：
◆
禁用插件
◆
禁止其他浏览上下文的导航
◆
禁止弹出窗口和模式对话框
◆iFrames
因安全问题而臭名昭著，这主要是因为
iFrames
常常被用于嵌入第三方内容，而后者则可能会执行某些恶意操作。
◆sandbox
通过限制被嵌入内容所允许的操作而提升
iFrames
的安全性。这种方式将沙箱内容与父页面进行了分离，因此限制了被嵌入内容的权限。
与
sandbox
一起出来的还有其
MIME
类型：
text/html-sandboxed
。
Hickson
说到：
text/html-sandboxed
MIME
类型确保用户不会访问到不可信的内容。它包含两部分内容：首先，如果用户直接访问页面时，浏览器不可以渲染那些具有
text/html-
sandboxed MIME
类型的页面。目前所有浏览器都支持这一点，这些浏览器会下载页面的标记但不会渲染页面；其次，支持
sandbox
属性的浏览器需要渲染具有
text/html-sandboxed MIME
类型的
iframes
（但会受到
sandbox
属性中所设定的权限限制）目前为止，还没有浏览器实现这一点，
Google Chrome
也是如此（它会渲染父页面，但却下载
iframe
内容而非在
iframe
中对其进行渲染）。因此目前还没法使用该项技术，除非
更
新
Chrome
以支持这一点（从理论上来说，其他的浏览器厂商在实现了对
sandbox
属性的支持后就会实现该技术，让我们拭目以待吧）。
目前，只有
Google Chrome 4.0
使用了
sandbox
，
Firefox
、
IE8
和
Safari
都还没有实现这一点，但相信不久之后这些浏览器都会实现的。围绕着
HTML 5
<video>
元素发生了很多事情，
通过
H.264
标准对其进行实现，而其他浏览器则使用了不同的标准或是干脆还没有实现。但这
种情况不会发生在这里，因为每个浏览器都可以在内部自由决定如何实现
sandbox
。但即便是明天所有的主流浏览器都采用了
sandbox
，众多的开发者
和内容管理者也不能立刻就使用它，因为还有那么多的遗留浏览器会忽略掉该属性，因此稳妥的办法还是采取常规的安全手段来保护
iFrames
。
2.
发展历程
自
1999
年
12
月发布的
HTML 4.01
以后，最初的浏览器战争已经结束，
Netscape
灰飞烟灭，
IE5
作为赢家后来又发展到
IE6, IE7
。
Mozilla Firefox
从
Netscape
的死灰中诞生，并跃居第二位。苹果和
各自推出自己的浏览器，而小家碧玉的
Opera
仍然嘤嘤嗡嗡地活着，并以推动
Web
标准为己命。我们甚至在手机和游戏机上有了真正的
Web
体验，感谢
Opera
，
iPhone
以及
已经推出的
Android
。
然而这一切，仅仅让
Web
标准运动变得更加混乱，
HTML
5
和其它标准被束之高阁，结果，
HTML
5
一直以来都是以草案的面目示人。
于是，一些公司联合起来，成立了一个叫做
Web Hypertext Application Technology Working Group
（
Web
超文本应用技术工作组
- WHATWG
）
的组织，他们将重新拣起
HTML 5
。这个组织独立于
W3C
，成员来自
Mozilla
，
KHTML/Webkit
项目组，
，
Apple
，
Opera
以及微软。
HTML5
草案的前身名为
Web Applications 1.0
。於
2004
年被
WHATWG
提出，於
2007
年被
W3C
接纳，并成立了新的
HTML
工作团队。在
2008
年
1
月
22
日
，第一份正式草案已公布
,
预
计将在
2010
年
9
月正式向公众推荐。
WHATWG
表示该规范是目前正在进行的工作，仍须多年的努力。
3.
HTML5
应用现状
现今，
各大浏览器对
HTML5
的支持各有千秋
，
HTML5
现在已经被广泛应用，你可能不知道，
的首页
也使用
HTML5
，不过，目前，他们还仅仅使用了
HTML5
的
doctype
，页面的其它部分还是
旧代码
，
但
在他们的各种应用中已经在广泛采用
HTML5
。最典型的例子是
Gmail
，
HTML5
的离线存储使用户即使在离线状态下也可以使用
Gmail
，另外，
Google Docs
也使用离线存储，同样使用离线存储的其它厂商的类似应用还包括
Zoho
的办公套件和
Wordpress
的博客平台。如果想对
HTML5
的离线存储功能深入了解，可以看一看
Mark Pilgrim
的
how to add offline
support to your apps
一文。
另外，文档共享站点
Scribd
开发基于
HTML5
的文档阅读器
上图是
Scribd
的新文档阅读器，全部基于
Web
标准，并未借助
Flash
。
Scribd
是
HTML5
结合
CSS
所能实现的惊人功能的最好例子，他们还使用
font-face
实现个性化字体，另外，在翻页时的变换效果也完全基于
CSS3
。这些
Web
标准工具的结合使用，使
Scribd
实现了从
Flash
向纯
HTML
的过度，同时并没有牺牲文档在结构，字体，内嵌图片，图层等方面的功能。
Scribd
的最新文档阅读器甚至支持
IE6
，这里有一个实例，
使用
纯
HTML
输出复杂的公式
。
关于
HTML5
视频，最典型的例子莫过于
YouTube
和
Vimeo
，他们都提供了
HTML5
版本。
HTML5
地理信息定位
点击地图中，黄色小人上方的圆圈，可以告诉
地图你的地理位置
HTML5
的另一个功能是地理信息定位功能，一些浏览器提供了
geolocation API
，这个
API
也由
W3C
管理，可以结合
HTML5
实现你当前地理位置定位。
Google Maps
在使用该功能，在
地图上，有一个小圆圈，点击一下，就能告诉
地图你现在的地理位置。目前，
Geolocation API
并没有被众多桌面浏览器广泛采用（只有
Chrome
和
Firefox 3.6+
采用了），但
Google Gears
插件可以帮助那些旧浏览器实现该功能。
借此实现地理信息感知的
tweets
消息，当浏览器支持
geolocation API
的时候，会自动使用该
API
，否则，则使用
Google Gears
。
4.
应用前景
HTML5
改变了
Web
文档的结构方式，借助
header, footer, section, article
这些标签，可以实现更具结构化，语义化的
Web
文档。这样，搜索引擎可以更容易索引
Web
站点，我们也可以搜索到更快，更准确的信息。
已经有数不清的站点在使用
HTML5
新标签，在
HTML5Gallery
可以找到大量这样的站点。借助
Microdata
，
HTML5
还可以实现更强大的语义结构，这个标准化的数据格式（类似
microformats
），可以让你的站点不仅能够提供数据，还能提供数据定义。
Microdata
对浏览器和搜索引擎都意义深远，搜索引擎可以借助
Microdata
发现你网络中的好友，而浏览器则可以藉此连接到你的社会网络好友站点，你可以在
的
Rich Snippets Testing Tool
对此进行体验。
CSS
之父，也是
Opera CTO
的哈哈康
﹒
维姆莱（
Hkon Wium Lie
）表示，
Flash
必须以
Plug-in
（外挂）的方式呈现在网页上面，使得网页的浏览速度变慢、耗费资源。相比之下，
HTML
加上
CSS
，只需要以简单的程序语言指令，就可以呈现一样的效果。
HTML 5
可以做到任何
Flash
可以做到的事，甚至更好。
同时，维姆莱表示：
“
问题一直都存在，这得靠浏览器业者持续修正
…
至少相较于
Flash
的漏洞，只能靠
Adobe
一间厂商来做这件事。
总之，
HTML5
是近十年来
Web
标准最巨大的飞跃。和以前的版本不同，
HTML 5
并非仅仅用来表示
Web
内容，它的使命是将
Web
带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管
HTML 5
还存在这样、那样的问题，但
HTML 5
正在改变
Web
。正如
Mozilla
的技术副总裁
Mike Shaver
说，
HTML 5
是一个被寄予厚望的概念，它既是
WHATWG
组织的实验田，又是
W3C
的标准之路。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自动化代码分析的过去、现状和将来
- 自动化代码分析的过去、现状和将来
- 学历代表过去，只有学习力才能代表将来，尊重经验的人，才能少走弯路
- 获取当前、过去、将来（年、月、日、周）
- 王垠的过去和现状
- 王垠的过去和现状
- 王垠的过去和现状
- Web Services的过去、现状和展望(上部)
- Java开发环境的过去、现在和将来-Java基础-Java-编程开发
- 只知道努力工作的人，失去了赚钱的机会，过去是适者生存，现在是强者生存，沉思你将来会怎样？
- 订餐系统：过去、现在、将来
- WPF/E 12 CTP 现状与将来.
- 一般过去将来时
- 过去 现在 将来
- 不忘过去，不畏将来——我的2017
- Git 如何回到过去,然后 再 回到将来
- Java开发环境的过去、现在和将来
- 2013 HTML5中国峰会演讲：Android上的HTML5:过去,现在和将来
- SAP 移动应用的过去、现在和将来
- 不念过去不畏将来