HTML5反映了在网络上和在云端实施业务的方式的巨大变化。本篇文章是一个由四个部分构成的系列的第一部分,该文章系列旨在寻找并突出说明HTML5中的变化。其开始先介绍新的标签和页面的组织,然后提供一些网页设计方面的高层面信息,比如说表单的创建、API的使用及其价值所在,以及Canvas提供的一些颇具创意的可能做法等。
推荐专题:HTML 5 下一代Web开发标准详解
HTML 5是一种设计来组织web内容的语言,其目的是通过创建一种标准的和直观的UI标记语言来把web设计和开发变得容易起来。HTML5提供了各种切割和划分页面的手段,其允许你创建的切割组件不仅能用来逻辑地组织站点,而且能够赋予网站聚合的能力。 HTML5可谓是“信息到网站设计的映射方法”,因为它体现了信息映射的本质,划分信息,并给信息加上标签,使其变得容易使用和理解。这是HTML5富于表现力的语义和实用性美学的基础,HTML5赋予设计者和开发者各种层面的能力来向外发布各式各样的内容,从简单的文本内容到丰富的、交互式的多媒体无不包括在内。
HTML5提供了高效的数据管理、绘制、视频和音频工具,其促进了web上的和便携式设备的跨浏览器应用的开发。HTML5是驱动移动云计算服务方面的发展的技术之一,因为其允许更大的灵活性,支持开发非常精彩的交互式网站。其还引入了新的标签(tag)和增强性的功能,其中包括了一个优雅的结构、表单的控制、API、多媒体、数据库支持和显著提升的处理速度等。
HTML5中的新标签都是能高度关联唤起的,标签封装了它们的作用和用法。HTML的过去版本更多的是使用非描述性的标签,然而,HTML5拥有高度描述性的、直观的标签,其提供了丰富的能够立刻让人识别出内容的内容标签。例如,被频繁使用的
图像元素
清单5.
Caption for the figure
#p#
媒体元素
清单6.
- Your browser does not support the audio tag.
清单7提供了一个
清单7. 标签的例子
- Your browser does not support the video tag
清单8.
Your browser does not support the HTML 'audio' element.
清单9.
除了src和type属性之外,
Aside区
Acme United规划中的Aside区可通过使用< aside>标签来创建。这一标签被看作是用来存放补充内容的地方,这些内容不是其所补充的一篇连续文章的组成部分。在杂志上,插入语(aside)通常被用来突出文章本身所制造的一个观点。< aside>标签包含的内容可被删除,而这不会影响到包含了该内容的文章、章节或是页面所要传达的信息。
清单10提供了
清单10.
My family and I visited Euro Disney last year.
Disney in France
Besides Euro Disney, there is a Disneyland in California.
Footer区
清单11.
Copyright 2011 Acme United. All rights reserved.
#p#
构建页面
现在你已经了解了需要用来创建一个HTML5页面的基本标签,让我们开始构建你的页面。你会为Acme United构建一个网页,完成后的页面如图2所示,该页面可以下载供你使用(参见下载一节)。
图2. Acme United的网页
那么,让我们把页面装配起来吧。首先要处理的是这个,在HTML5中,被简化了:所有你需要记住就是html。这不仅是简化了这一标签的条目,而还把它变得更适应未来的发展。需要注意的是,它不是被称为html5,就只是html。不管来来去去的有多少个HTML版本,可以一直都是html。
标签包含了所有除了标签之外的其他HTML元素,其他的每一个元素都必须嵌套在和标签之间,参见清单12。
清单12. < !doctype>标签的例子
在指出了html和语言为英语之后,你就可以使用< head>元素,该元素可以包含脚本、浏览器支持信息、样式表链接、meta信息和其他的初始化函数。你可以在head这一区域中使用这些标签:
1.
2.
3.
4.