HTML+CSS+JavaScript网页设计与布局:从新手到高手
上QQ阅读APP看书,第一时间看更新

2.2 HTML5的优势

HTML5发展从HTML4.0、XHTML到HTML5,使HTML描述性标记语言变得更加规范,同时也增加了许多非常实用的新功能。

2.2.1 HTML5优点

随着HTML新特特性的不断完善,目前HTML5己成为一种非常流行的标记语言,它具备如下4个优点。

1. 网络标准

HTML5本身是由W3C推荐出来的,它的开发是由几百家公司一起酝酿的技术,该技术为公开技术。因此,W3C通过的HTML5标准可以实现在每一个浏览器或每一个平台中。

2. 多设备跨平台

HTML5技术可以跨平台使用,例如可以将HTML5开发的游戏移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,深受大多数开发者的青睐。

3. 自适应网页设计

HTML5具有自适应网页设计功能,也就是实现了“一次设计,普遍适用”的设想,它可以让同一张网页适应不同大小的屏幕,并根据屏幕宽度自动调整布局。

4. 即时更新

HTML5拥有即时更新功能,更新游戏好像更新页面一样简单、迅速和即时;从而解决了使用游戏客户端更新操作麻烦的问题。

通过上述优点,可以将HTML5的优点概括为下列几点。

□ 提高可用性。

□ 改进用户体验。

□ 新增标签有助于开发人员定义重要的内容。

□ 可以在站点中放置更多的多媒体视频。

□ 可以很好地替代FLASH和Silverlight。

□ 被大量应用到移动应用程序和游戏。

□ 可移植性好。

2.2.2 HTML5的特性

HTML5的设计目的是为了在移动设备上支持多媒体,除了上述目的之外,HTML5还具有下列特性。

语义特性 HTML5更加丰富的标签会随着对RDFa、微软数据及微格式等方面的支持,构建对程序及对用户都更具有价值的数据驱动Web。

本地存储特性 由于HTML5具有APP Cache和本地存储功能,因此促使基于HTML5开发的网页APP拥有更短的启动时间、更快的联网速度。

设备兼容特性 HTML5提供的数据与应用接入开放接口,使外部应用可以直接与浏览器内部的数据直接相连,从而为网页应用开发者们提供了更多功能上的优化选择。

连接特性 HTML5拥有更有效的服务器推送技术,促使基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现。而其中的Server-Sent Event和WebSockets特性,能够帮助用户实现服务器将数据“推送”到客户端的功能。

网页多媒体特性 HTML5支持网页端的Audio、Video等多媒体功能,它与网站自带的APPS、摄像头、影音功能相得益彰。“三维、图形及特效特性 HTML5基于SVG、Canvas、WebGL及CSS3的3D功能,可以在浏览器中呈现出惊人的视觉效果。

性能与集成特性 HTML5通过XMLHttp-Request2等技术,解决了以前的跨域等问题,帮助用户的Web应用和网站在多样化的环境中更快速地工作。

CSS3特性 在保持性能和语义结构的前提下,CSS3提供了更多的风格和更强的效果。

2.2.3 HTML5新功能

HTML5的发展越来越迈向成熟,很多的应用已经逐渐出现在日常生活中了,不止让传统网站上的互动Flash逐渐地被HTML5的技术取代,更重要的是可以透过HTML5的技术来开发跨平台的手机软体,让许多开发者感到十分兴奋。

下面列出的就是一些HTML 4和HTML5之间主要的不同之处。

简化的语法 更简单的<doctype>声明,在HTML5中,用户只需要写<!doctype html>就行了。HTML5的语法兼容HTML 4和XHTML 1。

替代Flash的<Canvas>标签 但对于那些花很多时间加载和运行的臃肿的Flash视频的人来说,用新的<Canvas>标签生成视频的技术已经到来。

新的<header>和<footer>标签 HTML5的设计是要更好地描绘网站的解剖结构。这些<header>、<footer>等新标签的出现,是专门为标识网站的这些部分而设计的。

<section>和<article>标签 跟<header>和<footer>标签类似,HTML5中引入的新的<section>和<article>标签,可以让开发人员更好地标注页面上的这些区域。

<menu>和<figure>标签 新的<menu>标签可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。

新的<figure>标签是一种更专业的管理页面上文字和图像的方式。

<audio>和<video>标签 <audio>和<video>标签是HTML5中增加用来嵌入音频和视频文件的。

除此之外还有一些新的多媒体的标签和属性,例如<track>标签是用来提供跟踪视频的文字信息的。有了这些标签,HTML5使Web 2.0特征变得越来越友好。

全新的表单设计。<form>和<forminput>标签对原有的表单标签进行的全新的修改,它们有很多的新属性。

不再使用<b>和<font>标签。

不再使用<frame>、<center>、<big>等标签。