天天看点

HTML5:实至名归还是言过其实?

庶几何时,HTML5 开始吸引越来越多的人的目光,尽管 W3C 表示,它的最终成熟还有很长的路,然而并不能阻止人们对它的期待。2007年,HTML5 向 W3C 标准进军,HTML5 的使命是实现富 Web 应用的本地化,脱离浏览器插件的羁绊。W3C 于 2008 年 1 月 推出 HTML5 的第一份草案,而 HTML5 标准的全部实现也许要到 2022年以后。

HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本,旨在消除富 Internet 程序(RIA)对 Flash, Silverlight, JavaFX 一类浏览器插件的依赖。

HTML5:实至名归还是言过其实?

HTML5 带来很多新功能,以及 HTML 代码上的改变,你需要使用一些特定的 API 脚本,如:

DOM

实现 2D 绘图的 Canvas 对象

可控媒体播放

离线存储

文档编辑

拖放

跨文档消息

浏览器历史管理

MIME 类型和协议注册

那些支持 HTML5 的浏览器在处理 HTML 代码错误的时候必须更灵活,而那些不支持 HTML5 的浏览器将忽略 HTML5 代码。

HTML 语法的变化

HTML5:实至名归还是言过其实?

HTML5 引入了新的 HTML 元素和属性,有的是传统通用元素的语义化版本,如取代  div 元素的 nav, footer 等元素,也有一些全新的元素,如 audio, video。一些在 HTML4 中不被推荐使用的元素,如 font 和 center 将被弃用。HTML5 引入的新 HTML 元素包括:

article:文章

aside:内容旁边的侧边栏内容

audio:音频

canvas:2D 绘图

command:命令按钮

datalist:下拉选择框

details:对象的细节

dialog:对话框

embed:外部插件或对象

figure:一组媒体对象以及标签文字

footer:页脚

header:页首

hgroup:文档某一部分的信息

keygen:表单生成的 Key

mark:标注的文字

meter:预先定义的范围内的度量

nav:导航条

output:输出

progress:进度条

rp:标识 rubby 内容

rt:rubby 内容的解释

ruby:rubby 内容

section:定义一个部分

source:媒体的资源

time:日期时间

video:视频

这些新标签,可以让你的 HTML 文档更容易加载,且更容易被搜索引擎抓取其中的有用信息。比如,搜索引擎可以直接抓取它最关心的 article 标签里面的内容。

HTML5:实至名归还是言过其实?

如今的 Web 世界已经习惯了各种插件和 API,HTML5 为 Web 开发与设计者带来了方便与不便,HTML5 将如何同现在的这些流行技术共存?

HTML5 与 Flash

HTML5:实至名归还是言过其实?

测试显示,Mac 平台的 Flash 表现要差于  Windows 平台,这还取决于你使用的浏览器。现在看来,就视频游戏而言,Flash 是更好的选择,但取决于你的浏览器,如果你的视频不是很复杂,HTML5 是更好的选择。Web开发与设计者从这些争论中应该吸取的东西是,Flash 之外还有别的选择,但 Flash 有牢固的地盘,在为客户提供开发设计的时候,需要对他们的目标客户做一些研究。

IE9 经常高调宣扬它对 HTML5 的兼容,不过,它确实将是一个很好地支持 HTML5 的浏览器,因为,IE9 使用 Windows 现代图形 API 以及 PC 的图形加速卡输出文字和图形。在三月份的 MIX 展会,微软还宣称,IE9 将支持 GPU 加速的 HTML5,将图形滚动,3D 图形显示等处理交由图形加速卡。

一个好消息就是,HTML5 会让 Ajax 应用的实现变得更容易。

HTML5:实至名归还是言过其实?

HTML5 可能对移动 Web 带来更多好处,原因是,现在的移动 Web,iPhone 占主导地位,而 iPHone 是不支持 Flash 的。HTML5 还会让其它平台的移动浏览器有更快的网页加载速度。另一个好处是 SEO,Google 4月9号宣布,将页面加载速度作为搜索排名的一个因素,因此,基于 HTML5 的页面也会因加载速度更快而受益。

不过,和任何新技术的降临一样,其中也会牵扯到一些问题,对 Web 设计者而言,最大的一个问题就是因为这些新标签的引入,各浏览器之间将缺少一种统一的数据描述格式。

在 HTML5 被广泛采用之前,我们还无法完全知道 HTML5 代码将带来的好与坏,总体来说,对开发者而言,这将是一个巨大的变化,而对图形设计师而言,还不明朗。

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K918.aspx" target="_blank">关于 HTML5,开发者可以期待什么?</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K885.aspx" target="_blank">HTML 5 之后是什么?HTML</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx" target="_blank">深入了解 HTML 5</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K804.aspx" target="_blank">让 JavaScript 拯救 HTML5 的离线存储</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K745.aspx" target="_blank">Web Forms 2.0 行将被 HTML 5 代替</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K511.aspx" target="_blank">HTML 5 正在改变 Web</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K667.aspx" target="_blank">HTML 5 令人期待的 5 项功能</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K816.aspx" target="_blank">当 HTML 5 遇见 Google</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K823.aspx" target="_blank">HTML 5 会为 Flash 和 Silverlight 送终吗?</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K824.aspx" target="_blank">Firefox 访谈:OGG, HTML 5 与 Web 视频的未来</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K828.aspx" target="_blank">XHTML 2: 出师未捷身先死, HTML 5:万千宠爱于一身</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K834.aspx" target="_blank">HTML5 File API:把文件从桌面拖放到 Web</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程师和设计师必读精华文章推荐</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15个精美的 HTML5 单页网站作品欣赏</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35个让人惊讶的 CSS3 动画效果演示</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">赞!30个与众不同的优秀视差滚动效果网站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25个优秀的国外单页网站设计作品欣赏</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帅!8个惊艳的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">顶!35个很漂亮的国外 Flash 网站作品欣赏</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34个漂亮网站和应用程序后台管理界面</a>

HTML5:实至名归还是言过其实?

<a href="http://www.yyyweb.com/go/web" target="_blank">本博客新站点 ◆ 前端里 ◆ 欢迎围观:)</a>

欢迎任何形式的转载,但请务必注明出处。

继续阅读