原文地址:http://www.alistapart.com/articles/previewofhtml5
摘要
随着web技术的发展,富有创意的网站不断涌现,从而也推动了HTML 4在各领域的应用。HTML 4至今已经有十年,它的发布者也这寻找着新的技术来提供更多的功能来减少因语言和
浏览器的制约而带来的阻碍。
本着为用户提供更灵活,更富有操作性,并使能创建更交互性及精彩的网址或应用,HTML 5介绍并提供了这种可能,包括表单控件,API,多媒体,结构及语义。
HTML 5的开发工作是从2004年开始的,如今在W3C HTML WG及WHATWG两个组织的共同努力下终于完成。很多关键角色也在W3C努力参与着,主要包括4个主要的浏览器提厂商:
Apple,Mozilla,Opera,Microsoft,及有着各种兴趣和技术的组织和个人。
注意:HTML 5文档还在开发当中,并且会有相当长的时间才能完成。因此,本文中所讨论的任何特性都有可能被改变。本人也有意的只是简单的介绍了一下当前草案的主要特性。
结构
HTML 5 介绍了新元素集合,使其跟轻松的组织网页。大部分的HTML4页面都包含各种普通的结构,例如header,footer,column,tody等,页面普遍使用div元素来将它们标记起来,
并给它们注明id或class。
图片表示了经典的两列布局,使用DIV,并设置id,class属性。包括header,footer,header下面的水平导航栏。主体部分包括文章和右边的边栏。
DIV元素的使用很广泛,因为当前HTML 4版本缺少必要的语义来更详细的描述那些部分。HTML 5谈到了这个问题,并为那些每个部分都介绍了新的元素来表示。
DIV标记可以使用新的标记来代替:header, nav, section, article, aside, and footer.
文档标记可以这样表示:
使用这些标记有很多优点。与标题元素(h1-h6)结合使用时,所有这些都提供了一个方法,使得标题标记嵌套的部分,这超越了六个(h1-h6)基于在上个版本中的效果。规范文档中包括一
个详细的生成概述的规则,考虑到这些标签的结构,仍然向上兼容。这可以方便开发的工具及浏览器生成目录及帮助用户浏览文档。
例如,下面的标记结构表示了嵌套的section和h1元素:
为了与当前浏览器有更好的兼容性,而且可能会适当的使用h2-h6的元素来代替h1. 通过认识页面中sections的目的,使用特别的区域标记,这一技术能帮助用户更方便的浏览页面。例如,他们可以轻易的跳过导航区域,或者迅速的从一片文章跳到下一篇,而不需要开发者提供跳转连接。开发者也得到了好处,因为在文档中只要使用几个清晰的标记中的一个来代替大多数的div,就可以使得代码的更清晰度,简洁。
header标记表示区域的首部。header标记可以不只包含区域的头部 -- 例如,它可以适当的为标题添加副标题,版本历史资料及署名。
footer标记表示它所适用的区域的脚部,页脚通常包括该区域的信息,如作者,相关文档链接,版权信息,等。
nav标记表示导航链接区域,它既适合网站导航也适合目录。
aside标记是为其周围无关的内容辅助的,通常用于标记siderbar
section标记表示文档或应用的一般区域,如章节,例如:
article标记表示一个独立于文档,页面,网站的区域。适用于新闻或博客的文章,论坛帖子或独立的评论。
音频和视频
近年来,web上的音频和视频日益可行,像网站youtube,viddler,myspace及其他很多网站使得任何人都可以发布视频,音频。然而,目前hmtl缺少必要的手段,来成功地嵌入和控制多媒体本身,很多完整都依赖于Flash来提供该功能。尽管使用各种插件(如:QuickTime,WIndows Media,等)可以嵌入多媒体,Flash是当时唯一广泛使用的插件,它提供了跨浏览器的解决方案,并为开发着提供丰富的API.
各种基于Falsh的播放器证明,感兴趣的开发者还设计了自己的用户界面,通常允许用户播放,暂停,停止,定位,调节音量。HTML 5为在浏览器中提供此功能,而增添了对嵌套视频,音频的自然(native support)支持,还提供了DOM API来通过脚本控件重放。
新加的video和audio标记使其变的简单,大部分API在这两个标记中是通用的,不同点仅仅在于他们分别继承可视化和非可视化的媒体。
Opera和Webkit浏览器已经发布了对视频标记的支持版本。你可以通过连接来下载opera开发版或最近基于WEBKIT开发的nightly版本来尝试一下这些示例。Opera包括对Ogg Theora
的支持,Webkit支持所有格式,如QuickTime及第三方编码器。
嵌入视频最简单的方法是使用video标记,允许浏览器提供默认的用户接口,controls属性(布尔类型)指定开发者是否使用默认的UI.
可选的poster属性用于指定一个图片,在视频播放之前显示在播放器位置。尽管有一些视频格式,支持自己的海报帧特性,如MPEG - 4 ,这提供了一种替代的方案,能够独立工作
的视频格式。
使用audio标记很容易将音频文件嵌入进页面。它大部分属性和video标记一样,尽管出于显示的原因,audio标记没有width,height,poster属性。
HTML 5提供了source标记来指定可供选择的视频和音频文件,浏览器可以根据对媒体类型和编码器的支持来选择。media属性用于在设备受限的时候选择媒体的查询,type属性用于指定媒体类型和编码器。注意,当使用source标记时,src属性需要从上级节点video或audio标记中删除,否则source标记会被忽略。
开发者想要更多一点的控制权的用户界面,使他们能做出合适的整体设计的网页,大量的API提供了一些方法和事件,让脚本来控制媒体的回放。最常用的方法有play(),pause(),
设置currentTime来回退到开始。下面的例子说明了这一点:
video和audio标记还有很多属性和API,这里就不多讨论。了解更多信息,你可以翻阅当前拟草的说明
http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video
文档显示和前面html,xhtml版本不同,他们是定义在语法条款上,HTML 5则是定义在DOM上 - 浏览器内部使用树结构来呈现文档。例如,考虑一个简单文档,由题目,标题,段落组成。DOM
树看起来就像:
(DOM树包括头部中的一个标题标记,和body中的h1,p标记)
HTML 5定义在DOM下的优点是语言本身可以被定义而不依赖与语法。有两个关键的语法规则,他们用来呈现HTML文档:HTML序列(serialisation )(HTML 5可以识别),XML序列(
XHTML 5识别)。
HTML序列涉及的语法是受到起源与早期html版本的SGML的语法的启迪,但定义得更适合浏览器实际处理HTML方式的习惯。
注意像以前的hTML版本,一些标签是可选的,并自动隐藏的。
xml序列化涉及的语法是沿用了XML1.0及命名空间,就像XHTML1.0.
撇开xmlns属性及空白,这两个是一样的。
浏览器使用MIME类型来识别它们,然后文档要为text/html提供服务比较遵守HTML序列化的规范,然后服务与XML MIME类型的文档如application/xhtml+xml也必须遵守XML序列化的规范。
开发者必须清楚的知道选择哪种序列化方式,这可能取决于很多不同的因素。开发者不应该不假思索的选择其中一个;它们每一个都有各自适合的场合。
HTML优势
--- 对浏览器向后兼容
--- 熟悉的语法
--- 强大的容错性语法,这意味着不再有恶意用户的“Yellow screen of death” ,即使偶尔出现差错也会被跳过。
--- 语法方便记忆,例如,开发者可以忽略一下标签和属性。
XHTML的优势
--- 严格的XML语法,使开发者书写完整规范的标记,开发者会发现这很容易做到并这样做下去。
--- 直接与其他XML规范集成,如SVG,MathML
--- 允许xml方式的使用,很多开发者在部分使用XML的编辑,发布方式。
如何反馈
HTML 5的开发工作进展很迅速,但依然需要持续几年。由于需要提供测试案例,实现交互,目前估计工作还要在10-15年内完成。这此过程中,来自各种用户的反馈,包括网页设计师,开发者,CMS,开发工具厂商及浏览器厂商,这是成功必不可少的条件。不是所有人都对此支持,但积极的态度鼓舞着他们向HTML 5递交反馈意见。
除了详细文档外,还有其他很多相关内容,旨在帮助用户更好的了解这项工作。
--- The Differences from HTML 4 讲了跟以前版本发生的变化。
--- The THML Design Principle讨论了一些规范,来帮助做出决策,这会帮助你在许多设计方案中做出逻辑决策。
--- The Web Developer's Guide to HTML 5,这是最近才开始的,意在帮助网页设计师,开发者了解他们规范的书写HTML 5文档所需要知道的一切。
你可以通过很多途径来为此出份力,你可以加入W3C's HTML WG,可以订阅或反馈给HTML WG mailing lists或WIKI.你也可以订阅或反馈任何WHATWG 邮件列表,在WHATWG 论坛发帖,回帖,或在WHATWG 博客发表文章。