`
usejava
  • 浏览: 72313 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML 5与浏览器们不得不说的故事 转

浏览器HTMLCSSwebkitChrome 
阅读更多

【51CTO 1月7日外电头条】最近10年以来HTML一直在试图成为一个更好的RIA解决方案。最初是CSS，后来又有了AJAX和Web 2.0；但是直到HTML 5迅速发展之后，Adobe Flash、微软Silverlight和HTML之间的界线才开始逐渐变得模糊。本篇文章将介绍新的HTML 5标准，诸如Canvas、Video和大幅改进的CSS。更重要的是，你将了解到应该使用哪一个浏览器才能充分利用最新HTML 5技术。

51CTO编辑推荐：HTML 5 下一代Web开发标准详解

HTML 5：成长的故事

1997年，万维网联盟(W3C)发布了HTML 4.0，它是影响Web设计者和开发者的最近一个重大版本。尽管几年后推出了XHTML，但并未带来多大影响。在最近10多年中，HTML标准一直处于停滞状态。

在过去10年中，AJAX和Web 2.0技术已经非常普遍。不过，实现吸引人的新体验往往必须借助于一个插件来实现，诸如Adobe的Flash。2004年，WHATWG(网络超文本应用技术工作组)组织开始研发一个名为Web Application 1.0的项目，后来该项目更名为HTML 5，现在被W3C所支持。

据称HTML 5是HTML标准史上最重大和最复杂的一次升级。理由很简单，它需要应对Flash、Silverlight和JavaFX等技术的挑战，否则将沦为一个次要技术。交互性和富体验应用将专门由第三方插件来处理。

HTML 5标准尚处于发展之中，还需要两年时间才能推出草案（51CTO编者注：HTML 5最新的时间表在之前的《HTML 5捷报频传 三年后将广泛应用》一文中有比较详细的介绍，该文还阐述了可能会影响HTML 5发布进度的一些因素），其包含的部分主要技术包括：新HTML元素和属性；自带支持Video和Audio功能；Canvas和SVG实现可编程绘图操作；CSS 3；JavaScript 2.0。预计将来还有可能增加更多部分。

基础元素

在HTML 5中，很多对核心元素的修改是为了让用户更有效的控制显示在屏幕上的数据。和以前支持PRE、FONT和BlINK等格式元素的早期HTML标准不同的是，HTML 5中的许多新元素目的是让用户更有效的组织在HTML代码中的内容。

在网页代码首行添加如下代码即可表示其属于HTML 5代码：

    

  1. 
<!DOCTYPE HTML> 

    2. 

  2. 
 

    3.

HTML 5的主要新元素包括：Header、Footer、Section、Article和Aside。当用户设计一个页面时，能够直观地在屏幕不同部分放置内容。示例页面图如下：

HTML 5

使用Header和Footer等新HTML 5元素，用户可以准确的描述其内容，例如，以下是符合要求的HTML 5代码：

    

  1. 
<!DOCTYPE HTML> 

    2. 

  2. 
<html> 


    3. 

  3. 
<head> 


    4. 

  4. 
 <title>Title of the document</title> 


    5. 

  5. 
</head> 


    6. 

  6. 
<body> 


    7. 

  7. 
 <header>Add Search Engine and main links </header> 


    8. 

  8. 
 <section> 


    9. 

  9. 
  <article>The first article goes here</article> 


    10. 

  10. 
  <article>The second article goes here</article> 


    11. 

  11. 
  <article>The third article goes here</article> 


    12. 

  12. 
  <aside>A side bar definition goes here</aside> 


    13. 

  13. 
 </section> 


    14. 

  14. 
 <footer>Copyright Matthew David 2010</footer> 


    15. 

  15. 
</body> 


    16. 

  16. 
</html> 


    17. 

  17. 
 

    18.

使用这些新元素可以让用户获得两大优势：使HTML代码更易读；搜索引擎可以理解页面中内容的价值。举例来说，相比Footer元素中的内容，article元素下的内容可以更优先被建立索引。

另外，HTML 5还支持VIDEO、AUDIO和CANVAS等新元素，可以让用户增加复杂的富体验媒体内容，来挑战Flash和Silverlight等RIA技术。（51CTO参考阅读：HTML 5中将被舍弃以及将被强化的元素）

作为一等公民探索Video和Audio

现在互联网上视频资源众多，为了解决这种用户需求，HTML 5包含了对两个新元素的支持：Video和Audio，使用Video元素非常简单，如下所示：

    

  1. 
<video src="myMovie.ogg"></video> 

    2. 

  2. 
 

    3.

而且你还可以对Video元素使用自动播放、播放控制、宽高度和循环播放等属性。Audio也非常容易添加，以下HTML代码播放一个音频文件。

    

  1. 
<audio src="sampleSong.ogg" controls="controls"> 

    2. 

  2. 
 

    3.

在HTML 5之前，用户必须组合使用OBJECT和EMBED元素来增加视频到页面中，而且需要插件支持，诸如Adobe的Flash。而HTML 5则试图通过直接增加视频CODEC（编解码器）到浏览器中，而绕开Windows   Media Player、Flash或DIVX插件，通过编解码器技术可以把一个大视频文件转化成许多更小的流格式文件。目前HTML 5支持两个编解码器标准：H.264视频标准和开源视频编码Ogg，它们实现的视频质量并不差，而且无专利权限制。

谷歌的Chrome、苹果的Safari和火狐3.6支持HTML 5的VIDEO和AUDIO元素。

使用Canvas绘画

过去如果用户希望开发RIA应用，可能要被迫使用Java等插件技术。HTML 5限制支持一个名为CANVAS的新富体验媒体元素，让用户可以无需插件就实现RIA体验，它可以让用户以编程方式绘制2D图像。

CANVAS元素主要依赖JavaScript来实现绘图。基本的CANVAS元素包含宽度、高度和ID属性，如下所示：

    

  1. 
<canvas id="myCanvas" width="500" height="500"></canvas> 

    2. 

  2. 
 

    3.

我们可以使用如下JavaScript代码来描述CANVAS内容：

    

  1. 
<script type="text/javascript"> 

    2. 

  2. 
function draw(){  

    3. 

  3. 
  var canvas = document.getElementById('myCanvas');  


    4. 

  4. 
  if (canvas.getContext){  

    5. 

  5. 
    var defineContext = canvas.getContext('2d');  


    6. 

  6. 
   }  

    7. 

  7. 
}  

    8. 

  8. 
</script>   


    9. 

  9. 
 

    10.

CANVAS元素还在继续发展。2009年早些时候，Mozilla提出了CANVAS 3D，能够无需插件在页面中展示3D模型。

在HTML 5中使用CSS 3

在HTML 5中，元素被用来在描述层面上安排和规划内容。这并不意味着页面会非常美观。页面上内容的展现还要通过CSS 3来控制。但是，使用CSS 3来描述页面外观并非是HTML 5首创。CSS技术最初在1997年亮相，目前在HTML 5中是其第三个主要版本。幸运的是，CSS 3向前兼容CSS 1和CSS 2。

CSS 3引入了许多用户可以在页面上使用的新设计工具，其中部分包括：嵌入式字体、阴影和动画。

HTML 5采用新技术来支持真正的字体嵌入。其中三种值得推荐的潜入字体标准是：TrueType、OpenType和Scalable Vector Graphic Fonts。

另外，用户还可以增加阴影效果。阴影效果一直是图形化设计工具的重要一部分。现在用户通过使用CSS3可以轻松对文本和对象添加阴影效果，以下CSS定义是阴影效果示例代码之一：

    

  1. 
.dropShadow {  

    2. 

  2. 
  font-family: "Segoe UI", Tahoma, Geneva, Verdana;  


    3. 

  3. 
  font-size: medium;  


    4. 

  4. 
  color: #CC3300;  


    5. 

  5. 
  text-shadow: 0.25em 0.25em 2px #999;  


    6. 

  6. 
}  

    7. 

  7. 
 

    8.

现在普通的页面已经不能满足用户需求。添加可视化交互元素是必须的。为了解决这个问题，CSS 3包含了对动画的支持。以下HTML和CSS 3样式允许用户在屏幕上增加一个跳动的文本块：

    

  1. 
<html> 

    2. 

  2. 
 <head> 


    3. 

  3. 
 <title>Bouncing Box example</title> 


    4. 

  4. 
 <style type="text/css" media="screen"> 


    5. 

  5. 
  @-webkit-keyframes bounce {  

    6. 

  6. 
    from {  

    7. 

  7. 
      left: 0px;  

    8. 

  8. 
     }  

    9. 

  9. 
    to {  

    10. 

  10. 
      left: 400px;  

    11. 

  11. 
     }  

    12. 

  12. 
   }  

    13. 

  13. 
  .animation {  

    14. 

  14. 
    -webkit-animation-name: bounce;  

    15. 

  15. 
    -webkit-animation-duration: 2s;  

    16. 

  16. 
    -webkit-animation-iteration-count: 4;  

    17. 

  17. 
    -webkit-animation-direction: alternate;  

    18. 

  18. 
    position: relative;  

    19. 

  19. 
    left: 0px;  

    20. 

  20. 
   }  

    21. 

  21. 
 </style> 


    22. 

  22. 
 </head> 


    23. 

  23. 
 <body> 


    24. 

  24. 
 <p class="animation"> 


    25. 

  25. 
 The text bounces back and forth  

    26. 

  26. 
 </p> 


    27. 

  27. 
 </body> 


    28. 

  28. 
</html> 


    29. 

  29. 
 

    30.

动画的控制是通过使用样式表完成的。主要从两方面进行控制，首先是动画的类型；其次是动画的对象。

目前该示例代码仅能运行在最新版Safari浏览器和谷歌Chrome浏览器中。有关CSS 3的具体情况，可参考51CTO之前的译文《CSS 3中的炫目新功能抢先预览》。

浏览器对HTML 5的支持情况

目前用户使用的Web浏览器大体可化为两类：一是现代Web浏览器，其中包括Mozilla的火狐、苹果的Safari、谷歌的Chrome和Opera浏览器；二是微软的IE浏览器。

火狐建建立在开源Ghecko浏览器引擎之上。同样，Safari和Chrome使用了开源WebKit浏览器引擎。这两类浏览器都使用了第三方开源项目Cairo来展现诸如CANVAS、CSS和HTML 5等可视化元素。这三个浏览器之所以能够快速采用新标准，与它们背后支持开源项目的公司有直接关系（51CTO编辑注：这些公司即Google、Opera以及Mozilla，还有苹果），而且这些公司有小部分工程师可以投身于WebKit等项目。令人惊讶的是，像Opera这样的小公司也能够与谷歌和苹果在支持标准方面相媲美。

 

另一个阵营的代表是微软。自从上世界90年代以来，微软一直统治着Web世界。尽管其浏览器市场份额不断下滑，但依然有超过65%的网民选择使用IE浏览器。更令人吃惊的是，大约有26%用户依然在使用具有8年历史的IE6。问题是微软最新的浏览器版本IE 8不支持任何HTML 5功能，它不支持CANVAS、VIDEO或CSS 3。不过，微软已经开始改变其对HTML 5的态度，2009年夏天微软加入了对HTML 5标准的讨论，而且在2009年PDC大会上演示了一个支持HTML 5功能早期版IE9。

 

除了桌面计算机之外，另外一个支持HTML 5的领域是手机设备。在苹果iPhone和谷歌Android的带领下，智能手机市场已经呈现爆炸式增长。这两类手机的Web浏览器都是使用WebKit的分支项目，因此完全支持HTML 5。

很明显，HTML 5依然很长的路需要走。它将被越来越多地应用在手机、平板电脑和上网本中。PC市场可能将继续被IE浏览器所垄断，不过下一版本的IE将支持HTML 5。当然，如果你想提前体验HTML 5功能，你可以使用最新版的火狐、Chrome或Safari。

原文：Inside HTML 5: The Browser becomes a first class RIA citizen  作者：Matthew David

分享到：
| HTML 5视频编码存争议 各方观点不一 转
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    语言内核浏览器，支持最新HTML5

    提到浏览器的内核，我们不得不提及WebKit引擎。WebKit是一种开源的网页渲染引擎，它的高性能和优秀兼容性使其成为了许多浏览器背后的强大支持者。从Apple的Safari到Google的Chrome，WebKit的身影无处不在。作为内核...

    让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)

    这使得许多网页开发者在使用HTML5标签时，不得不考虑向后兼容的问题。为了确保旧版IE浏览器能够识别并正确显示HTML5标签，可以利用HTML5 Shiv这一JavaScript库来实现兼容。 HTML5 Shiv，最初由Remy Sharp开发，其...

    IE6.0浏览器

    4. **兼容性问题**：由于IE6的市场份额巨大，许多网站为了保证其在IE6上的正常显示，不得不编写特定的代码，导致了网页兼容性问题的复杂性。 ### 技术挑战与限制 随着Web技术的进步，IE6的局限性日益显现： 1. **...

    Ajax联动-支持所有浏览器

    特别是在处理Ajax请求时，不同的浏览器可能有不同的实现方式，这使得开发者不得不考虑各种特殊情况。本文将通过一个具体的案例——省份与城市的联动选择，来展示如何使用Ajax技术来实现一个兼容所有主流浏览器的功能...

    别人写的一个简易浏览器

    在讨论简易浏览器时，我们不得不提到一个可能影响用户体验的因素，那就是广告。由于开发者可能没有其他资金来源，因此在浏览器中加入广告以获得收益或推广产品是很常见的做法。这些广告的出现，虽然能够帮助开发者...

    非常好用的CSDN离线浏览器

    6. **版权与合规性**：在使用离线浏览器时，用户应尊重CSDN的版权政策，只用于个人学习与研究，不得用于商业目的，且需遵守相关法律法规。 总之，CSDN离线浏览器是一款强大的工具，它结合了网络爬虫、数据库管理、...

    让你的HTML5&CSS3网站在微软的浏览器中也能运行

    我们还不得不想办法兼容早期的IE浏览器。下面提到的三种方法能快捷轻松的让你的HTML5&CSS3网站在微软的主要浏览器中也能神奇的运行！ htmlshiv.js Remy开发的 HTML5shiv 工具能利用JavaScript在老式IE里创建 main ...

    HTML5立体式动画左右切换代码.zip

    然而，在享受HTML5带来的便利的同时，我们也不得不面对浏览器兼容性的问题。正如描述中所提到的，这个动画效果可能不支持某些低版本的浏览器。在这种情况下，开发者需要进行额外的工作，比如使用polyfill来填充...

    水果忍者HTML5+JS源码

    它是 iOS、Android 等手机平台上一款极受欢迎的休闲游戏，不得不说，它简单有趣的“切水果”方式真心讨好了不少人，无论是男女老少，多少都有几个人喜欢无聊时砍几把～ 虽然水果忍者官方并没有推出网页版，但网上已...

    Safari HTML5 Audio and Video Guide

    这份指南对于开发者来说非常重要，因为它帮助他们在网站上嵌入媒体内容时可以利用HTML5的新特性。 HTML5是一种为网页提供丰富内容和应用的标记语言，它为开发者提供了更为强大的工具集来创建交互式和视觉丰富的网页...

    HTML5 Game Development by Example Beginner's Guide Second Edition

    书中应当包含了关于HTML5游戏性能优化、移动设备适配以及与现代浏览器的兼容性等重要主题的讨论。此外，本书也可能涵盖了如何利用游戏引擎和游戏框架来简化游戏开发流程的讨论，以及如何将游戏发布到互联网上的指南...

    sams teach yourself html5 mobile application development in 24 hours

    5. 兼容性处理：由于不同移动平台对HTML5的支持程度不一，本书还将讲解如何处理不同移动设备和浏览器之间的兼容性问题，确保开发的移动应用能在各种设备上良好运行。 本书版权归属于Pearson Education, Inc.，并...

    css浏览器兼容

    随着Web技术的发展，浏览器之间的差异性逐渐成为前端开发者不得不面对的问题之一。特别是在CSS方面，不同浏览器对CSS的支持程度和解析方式存在差异，导致同样的代码在不同的浏览器中呈现出不同的效果。本文将针对IE7...

    黑色宽屏手绘创意组合html5单页模板- 手机app html5 css3 漂亮 精品 展示 企业.rar

    此外，对于手绘元素的使用，我们不得不提的是，这种元素通常可以为网站增加一种手工的温度和真实感。在数字化和无纸化的今天，手绘元素的回归让用户感受到了一种设计上的反璞归真。这种设计潮流让模板的适用范围从...

Magicbox
Global site tag (gtag.js) - Google Analytics