日期:2014-05-17  浏览次数:20586 次

HTML5基础,第1部分:初试锋芒

?

HTML5反映了在网络上和在云端实施业务的方式的巨大变化。本篇文章是一个由四个部分构成的系列的第 一部分,该文章系列旨在寻找并突出说明HTML5中的变化。其开始先介绍新的标签和页面的组织,然后提供一些网页设计方面的高层面信息,比如说表单的创 建、API的使用及其价值所在,以及Canvas提供的一些颇具创意的可能做法等。

(译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的<符号之后都加入了一个空格,比如说,左尖括号<+section+右尖括号>,我会写成< section>,以便其能够在文章中正确显示,不便之处敬请谅解。

HTML5是一种设计来组织web内容的语言,其目的是通过创建一种标准的和直观的UI标记语言来把web设计和开发变得容易起来。HTML5提供了各种 切割和划分页面的手段,其允许你创建的切割组件不仅能用来逻辑地组织站点,而且能够赋予网站聚合的能力。 HTML5可谓是“信息到网站设计的映射方法”,因为它体现了信息映射的本质,划分信息,并给信息加上标签,使其变得容易使用和理解。这是HTML5富于 表现力的语义和实用性美学的基础,HTML5赋予设计者和开发者各种层面的能力来向外发布各式各样的内容,从简单的文本内容到丰富的、交互式的多媒体无不 包括在内。

HTML5提供了高效的数据管理、绘制、视频和音频工具,其促进了web上的和便携式设备的跨浏览器应用的开发。HTML5是驱动移动云计算服务 方面的发展的技术之一,因为其允许更大的灵活性,支持开发非常精彩的交互式网站。其还引入了新的标签(tag)和增强性的功能,其中包括了一个优雅的结 构、表单的控制、API、多媒体、数据库支持和显著提升的处理速度等。

HTML5中的新标签都是能高度关联唤起的,标签封装了它们的作用和用法。HTML的过去版本更多的是使用非描述性的标签,然而,HTML5拥有 高度描述性的、直观的标签,其提供了丰富的能够立刻让人识别出内容的内容标签。例如,被频繁使用的< div>标签已经有了两个增补进来的< section>和< article>标签。 < video>、< audio>、< canvas>和< figure> 标签的增加也提供了对特定类型内容的更加精确的描述。

HTML5提供了:

1. 确切描述了其旨在要包含的内容的标签
2. 增强的网络通信
3. 极大改善了的常用存储
4. 运行后台进程的Web Worker
5. 在本地应用和服务器之间建立持续连接的WebSocket接口
6. 更好的存储数据检索方式
7. 加快了的页面保存和加载速度
8. 对使用CSS3来管理GUI的支持,这意味着HTML5可以是面向内容的
9. 改进了的浏览器表单处理
10. 基于SQL的数据库API,其允许客户端的本地存储
11. 画布和视频,可在无需安装第三方插件的情况下添加图形和视频
12. Geolocation API规范,其通过使用智能phone功能来纳入移动云服务和应用
13. 增强型的表单,其降低了下载JavaScript代码的这种必要性,允许在移动设备和云服务之间进行更多高效的通信。

HTML5创建了一种更吸引用户的体验:使用HTML5设计的页面能够提供类似于桌面应用的体验。HTML5还通过把API功能和无处不在的浏览器结合起来的的方式提供了增强的多平台开发。通过使用HTML5,开发者能够提供一种顺畅地跨越各个平台的现代应用体验。

当你说HTML5这个词的时候,你使用了一个简短的词来表达一种持续的创新。新的标记、新的一套方法,以及一个基于HTML5和它的两个与之互为 补充的同仁:CSS3和JavaScript之间的相互作用的通用开发框架,这是以客户为中心的处理现象的应用的核心。除了HTML5技术的技巧和方法的 许多桌面部署之外,HTML5还可以在功能丰富的web移动电话浏览器中实施——移动电话浏览器是一个正在增长的市场,Apple iPhone、Google Android和运行Palm webOS的手机的普及以至于无处不在就可以证明这一点。

HTML5的强大功能中很重要的一面是信息的映射——或说是内容块化(content blocking)。如果你愿意的话——这种做法会产生一种容易理解得多的处理过程。你可以看到,通过日益增加对web处理这一领域的控制,这一工具在设 计和开发方面已经变得多么的高效。

HTML5预示着这样一些情况的出现,即其在文本层面上有着更高效的语义处理,以及在表单构造和用法上有着更强大的控制。所有的这些特性和 HTML5创新的其他许多细微之处是这一越来越占统治地位的范式的基础。许多机构实体,商业的和其他的——甚至许多根本不把信息的处理和通信作为他们的主 要机构活动的组织——都不同程度地被这一不断增长的现象的发展所侵袭。

HTML5并不是一盏神灯,不会有精灵出现。然而,它的技术和方法资产使得其成为了一件次好的东西,仅次于擦亮一盏神灯这件事情。

规划页面


你将要创建一个简单的web页面。在这一过程中,我会讨论几个HTML5中引入的新标签。为了创建一个高效的并且是有实效的web页面,你必须要 制定一个计划,考虑一下想要打造的所有组件。你创建的网页将会有如图1所示的高层设计,页面的设计包含了一个Header区、一个Navigation 区、一个包含了三个Section区和一个Aside区的Article区,以及最后的一个Footer区。该页面的设计目标是在Google的 Chrome浏览器中工作,其消除了一些视觉上的混乱,这些混乱带来的是浏览器兼容问题的调整,同时也妨碍到了对基础结构的理解。我们的目标是创建出一个 清晰地描述了新的HTML5标签的用法的页面,展示如何使用它们来创建格式良好的代码和优雅的页面设计。

图1. Acme United的网页的规划


在创建这一页面的过程中,我会涉及CSS3,我需要用它来正确地渲染HTML5网页。CSS3对于HTML5页面的的风格、导航和一般观感来说是 必不可少的,它的一些属性组,你可以在WsSchool的CSS3参考站点(参见参考资料一节)上找到这些属性,其中包括了一些很有用的元素,比如说 background、font、