html5如何而来?
HTML isn’t a very good language!它亟待改进。
因此,1999年W3C停止了HTML的工作,2000年发布xhtml的第一个推荐版本。
2002年W3C发布XHTML 2.0第一个草案,令人吃惊的是:XHTML2.0不是
随着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
很简单:
- <script>
- document.createElement("元素名称")
- </script>
创建文档元素。
批量创建的方法:
- (function(){
- if(!/*@cc_on!@*/0) return;
- 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(',');
- for(var i = 0, len = html5.length; i < len; i++ ) {
- document.createElement(html5[i]);
- }
- })
- ();
现在在IE里也可以对HTML5元素进行布局了。
不过,在此之前,我们还需要对这些新元素定义基本的Display style,
这个工作本来一般是由浏览器完成的,比如FireFox的html.css。
现在只能自己对引进的HTML5元素进行定义了。
那么哪些需要定义成display:block;哪些又是不需要呢?这个我们可以看下W3C是怎么定义的:display-types
- address, article, aside, blockquote, body, center, dd, dialog, dir,
- div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
- hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
- 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
随着浏览器的升级,翻新,他们支持的东西会越来越多,提供给我们前端工作者发挥的空间也越来越大。
相关文章:
标签: audio, canvas, drag and drop, FireFox, html stylesheet, HTML5, IE, video
oneboys兄辛苦了…
document.createElement(“元素名称”)
第一次见到这个还是在怿飞blog里呢…
回复
oneboys 回复:
九月 21st, 2009 at 15:40
嗯,其实我最早也是在那看见这个的
回复
http://www.cnbeta.com/articles/108648.htm
google将弃用Gears转用html5来实现离线存储
回复
:)
回复