三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

说说HTML5
作者:Neoxone    发表时间: 2009年09月4号,星期五     阅读:20,848 次

html5如何而来?
HTML isn’t a very good language!它亟待改进。
因此,1999年W3C停止了HTML的工作,2000年发布xhtml的第一个推荐版本。
2002年W3C发布XHTML 2.0第一个草案,令人吃惊的是:XHTML2.0不是向后兼容的Web 的未来:XHTML 2.0(2003.1.1))。
随着XHTML的越来越火,绝大多数人都认为它将是web的未来。然而终于有些人坐不住了,面对W3C对HTML的持续冷淡,2004年,由Apple, Mozilla Foundation 和Opera Software组成了The Web Hypertext Application Technology Working Group (WHATWG),致力于发展HTML和创建Web applications所需的APIs。他们开始制定Web Applications 1.0 规范,这也就是后来HTML5。
WHATWG的努力没有白费,这份规范的草案在2007年通过了W3C的审核。
W3C组织了HTML工作组,并在2008年1月22日公开了第一份草案。
2009年7月2日,W3C宣布在年内停止XHTML 2的工作,而将资源投入转向HTML5工作组。(XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5
在标准化的春风吹满神州之际,xhtml2却溘然而止,HTML5取代上位,我们广大的web工作者是不是需要做什么呢?

我们不需要做什么!
HTML5 的目标是保持HTML当前标准HTML4.01和HTML的XML版本XHTML1.0 向后兼容。
同以前的HTML4一样:它没有名称空间或模式、元素不必结束、浏览器会宽容地对待错误。
对于XHTML1,它也没有什么排斥。
相反的,XHTML2才是不向后兼容的。
所以,我们并不需要非得做什么改变,才能适应在HTML5下面的页面工作。
当然HTML5不会仅仅如此而已,只是HTML5是想让不支持它的浏览器中能够平稳地退化。
随着浏览器的缓慢升级,HTML5的真正好处才会开始慢慢体现,当别人的网页通过html5实现了越来越多的功能之后。到时,你再虑是不是需要做什么——理论上讲,也是不晚的。
我们不需要做什么,但我们可以做的更多

HTML5能做什么?
一句话:很多!HTML5还在草案阶段,他的功能仍将扩展。
首先,我们应该知道,html5已经不只是Hypertext Markup Language,它更是一种Web Hypertext Application Technology。

1. html5增加了一些结构性(Sections)元素:header,footer,nav,section,article,aside,用来替代千篇一律的div布局,非常语义化。

2. 还有meter(数值尺),progress(进度表),mark(标记)这些语义内联元素。通过自带的属性,可以进行很直接地描述。

3.一些交互元素。details(脚注),datagrid(网格控件——可动态显示树、列表和表格),menu和command(可以做交互菜单)

4. 媒体元素video,audio,source。不需要借助第三方插件,页面就能播放多媒体。

5. canvas元素。脚本绘图,它的最终目标是flash般的动画展示和交互体验。不要以为很遥远,canvas在FireFox1.5就有了,opera,safari也是一样支持甚早(这个标签是就是苹果的发明)。

6. 表单处理功能。HTML5吸收了WHATWG之前的Web Forms 2.0。验证数据是如此简单。

7. 页面元素的拖曳和编辑。

8. HTML5的离线存储技术 http://dev.w3.org/html5/webstorage/

好了, HTML5能做的够多了,但他还处在草案阶段,那关键是现在我们能做什么呢?

我们能做什么?
HTML5估计能在2012年之前成为W3C的候选推荐标准,不过在这之前,只要浏览器支持,我们都可以使用html5的功能。

1. HTML5新元素布局。
除了ie系列浏览器外,其它大多数浏览器都能识别HTML5的那些新元素标签,可以对其进行style,这就意味着它们可以使用HTML5的新元素标签进行页面布局。
但问题是ie系列浏览器是无法对其不承认的元素添加样式的,而缺少了IE的支持,大多数人都会束手束脚。解决这个问题的方法早已经了:HTML5 Shiv
很简单:

  1. <script>
  2. document.createElement("元素名称")
  3. </script>

创建文档元素。
批量创建的方法:

  1. (function(){
  2.     if(!/*@cc_on!@*/0) return;    
  3.     var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,event,source,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');   
  4.     for(var i = 0, len = html5.length; i < len; i++ ) {       
  5.     document.createElement(html5[i]);  
  6.     }
  7. })
  8. ();

现在在IE里也可以对HTML5元素进行布局了。
不过,在此之前,我们还需要对这些新元素定义基本的Display style,
这个工作本来一般是由浏览器完成的,比如FireFox的html.css。
现在只能自己对引进的HTML5元素进行定义了。
那么哪些需要定义成display:block;哪些又是不需要呢?这个我们可以看下W3C是怎么定义的:display-types

    address, article, aside, blockquote, body, center, dd, dialog, dir,
  1. div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
  2. hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
  3. section, ul, xmp { display: block; }

刨除HTML老元素,以下这些元素:
article,aside,dialog,figure,footer,header,hgroup,nav,section可以定义为{display:block;}
这篇针对HTML 5 Reset Stylesheet的文章也可以参考下:http://html5doctor.com/html-5-reset-stylesheet/。文章在Eric的CSS Reset的基础上考虑HTML5新元素及W3C规范推荐下对元素进行了style reset。当然reset CSS本身就存在争议的,一般来说,reset CSS是你自己的style,很多东西都可以按你的意愿来定,当然不要太偏离W3C的元素设计本意。
接下来,使用HTML5新元素进行布局就可以随心所欲了(还是悠着点好)。

2. Drag & drop
Drag & drop是浏览器支持度比较高的HTML5内容:

3. canvas
我们先看一些canvas的示例:
http://www.agustinfernandez.com.ar/proyectos/canvas/
http://www.whatwg.org/demos/2008-sept/color/color.html
网上还有一些互动性蛮强的Demo.
canvas应用的发展无疑将威胁到也行进在富Web之路上的Flash和Silverligth这些Web插件。

canvas在safari,firefox,opera很早就有了支持,但IE缺迟迟不予支持,尽管他在ie8中已经开始支持多个HTML5功能。MS的同志很有理由这么做:“HTML 5标准制定之前,某些功能确实已经得以实现,例如Google Gears实现了离线应用程序功能,Flash和silverlight实现了类似Canvas API的功能.在下一代HTML规范中设置这些内容未必非常必要”。要知道MS在silverlight是花了很大力气。事实上,MS在参与HTML5之事上一直非常谨慎,并且希望精简HTML5。
Flash的所有者,HTML5参与者之一Adobe则表现的很轻松:“canvas还很弱,HTML 5 + CSS 3 可能要 10年的时间才能定稿,在这期间,Flash 会持续发展,并提供更好的用户体验”。

尽管IE没有支持canvas功能,但我们可以使用JS模拟达到:
http://excanvas.sourceforge.net/
这是其中的一个Demo,试试你的IE:
3Dcanvas_For_IE.html

4. audio and video
使用FireFox3.5看看下面这个Video Demo。

我们没有引入flash播放器就能播放swf。

在下面这个页面里罗列了各浏览器所支持的HTML5功能:
Implementations in Web browsers
随着浏览器的升级,翻新,他们支持的东西会越来越多,提供给我们前端工作者发挥的空间也越来越大。

标签: , , , , , , ,

4 条评论 发表在“说说HTML5”上

  1. oneboys兄辛苦了…

    document.createElement(“元素名称”)
    第一次见到这个还是在怿飞blog里呢…

    回复

    oneboys 回复:

    嗯,其实我最早也是在那看见这个的

    回复

  2. ONEBOYS 说:

    http://www.cnbeta.com/articles/108648.htm

    google将弃用Gears转用html5来实现离线存储

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(