标签。HTML5提供了:
1.确切描述了其旨在要包含的内容的标签
2.增强的网络通信
3.极大改善了的常用存储
4.运行后台进程的WebWorker
5.在本地应用和服务器之间建立持续连接的WebSocket接口
6.更好的存储数据检索方式
7.加快了的页面保存和加载速度
8.对使用CSS3来管理GUI的支持,这意味着HTML5可以是面向内容的
9.改进了的浏览器表单处理
10.基于SQL的数据库API,其允许客户端的本地存储
11.画布和视频,可在无需安装第三方插件的情况下添加图形和视频
12.GeolocationAPI规范,其通过使用智能手机定位功能来纳入移动云服务和应用
13.增强型的表单,其降低了下载JavaScript代码的这种必要性,允许在移动设备和云服务之间进行更多高效的通信。
HTML5创建了一种更吸引用户的体验:
使用HTML5设计的页面能够提供类似于桌面应用的体验。
HTML5还通过把API功能和无处不在的浏览器结合起来的的方式提供了增强的多平台开发。
通过使用HTML5,开发者能够提供一种顺畅地跨越各个平台的现代应用体验。
当你说HTML5这个词的时候,你使用了一个简短的词来表达一种持续的创新。
新的标记、新的一套方法,以及一个基于HTML5和它的两个与之互为补充的同仁:
CSS3和JavaScript之间的相互作用的通用开发框架,这是以客户为中心的处理现象的应用的核心。
除了HTML5技术的技巧和方法的许多桌面部署之外,HTML5还可以在功能丰富的web移动电话浏览器中实施——移动电话浏览器是一个正在增长的市场,AppleiPhone、GoogleAndroid和运行PalmwebOS的手机的普及以至于无处不在就可以证明这一点。
HTML5的强大功能中很重要的一面是信息的映射——或说是内容块化(contentblocking)。
如果你愿意的话——这种做法会产生一种容易理解得多的处理过程。
你可以看到,通过日益增加对web处理这一领域的控制,这一工具在设计和开发方面已经变得多么的高效。
HTML5预示着这样一些情况的出现,即其在文本层面上有着更高效的语义处理,以及在表单构造和用法上有着更强大的控制。
所有的这些特性和HTML5创新的其他许多细微之处是这一越来越占统治地位的范式的基础。
许多机构实体,商业的和其他的——甚至许多根本不把信息的处理和通信作为他们的主要机构活动的组织——都不同程度地被这一不断增长的现象的发展所侵袭。
HTML5并不是一盏神灯,不会有精灵出现。
然而,它的技术和方法资产使得其成为了一件次好的东西,仅次于擦亮一盏神灯这件事情。
规划页面
你将要创建一个简单的web页面。
在这一过程中,我会讨论几个HTML5中引入的新标签。
为了创建一个高效的并且是有实效的web页面,你必须要制定一个计划,考虑一下想要打造的所有组件。
你创建的网页将会有如图1所示的高层设计,页面的设计包含了一个Header区、一个Navigation区、一个包含了三个Section区和一个Aside区的Article区,以及最后的一个Footer区。
该页面的设计目标是在Google的Chrome浏览器中工作,其消除了一些视觉上的混乱,这些混乱带来的是浏览器兼容问题的调整,同时也妨碍到了对基础结构的理解。
我们的目标是创建出一个清晰地描述了新的HTML5标签的用法的页面,展示如何使用它们来创建格式良好的代码和优雅的页面设计。
图1.AcmeUnited的网页的规划
在创建这一页面的过程中,我会涉及CSS3,我需要用它来正确地渲染HTML5网页。
CSS3对于HTML5页面的的风格、导航和一般观感来说是必不可少的,它的一些属性组,你可以在WsSchool的CSS3参考站点(参见参考资料一节)上找到这些属性,其中包括了一些很有用的元素,比如说background、font、marquee和animation等。
不过,在开始构造页面之前,你需要学习一些新的HTML5的标签。
Header区
Header区的例子包含了页面标题和副标题,
除了网页本身之外,
这里创建的网页有该页面的一个Header区,这在高层设计中有给出,以及一个位于Article和Section区内部的Header区。
清单1提供了一个
清单1.
标题文字
文本或是图像可放在这里
Logo通常也放在这个地方
标签把标题分组放在一起,使用到这些标题分级来在此处显示主标题和子标题。
清单2.标签的例子
主标题
子标题
文本或是图像可放在这里
Navigation区
你可以使用
Navigation区可以包含诸如清单3所示的代码。
清单3.标签的例子
- Home
- AboutUs
- OurProducts
- ContactUs
Article和Section区
你设计的页面包含了一个Article区,该区域存放了页面的实际内容。
你使用标签来创建这一区域,该标签定义的内容可独立于页面中的其他内容使用。
例如,如果想创建一个RSS源(RSSfeed)的话,那么你可以使用来唯一标识该内容。
标签标识了可被删除、可被放置在另一上下文中,并且是可被完全理解的内容。
AcmeUnited规划中的Article区包含了三个Section区,可使用标签来创建这几个区域。
包含了web内容的相关组件区域,标签——以及标签——可以包含页眉、页脚,或是其他需要用来完成该部分内容的组件。
标签应该用来分组相类似的信息,而标签则应该是用来放置诸如一篇文章或是博客一类的信息,这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。
标签,正如它的名称所暗示的那样,提供了一个完整的信息包。
相比之下,标签包含的是有关联的信息,但这些信息自身不能被放置到不同的上下文中,因为这样的话其所代表的含义就会丢失。
和
清单4.标签和
Content