文章分类: 综合实战

Article和Section区

你设计的页面包含了一个Article区，该区域存放了页面的实际内容。你使用< article>标签来创建这一区域，该标签定义的内容可独立于页面中的其他内容使用。例如，如果想创建一个RSS源(RSS feed)的话，那么你可以使用<article>来唯一标识该内容。<article>标签标识了可被删除、可被放置在另一上下文中，并且是可被完全理解的内容。

Acme United规划中的Article区包含了三个Section区，可使用<setction>标签来创建这几个区域。<section>包含了web内容的相关组件区域，<section>标签——以及<article>标签——可以包含页眉、页脚，或是其他需要用来完成该部分内容的组件。< section>标签用于分组的内容，<section>标签和<article>标签通常以一个<header>为开始并以一个<footer>结束，标签的内容则放在这两者之间。

<section>标签也可以包含<article>标签，就像<article>标签可以包含<section>标签一样。<section>标签应该用来分组相类似的信息，而<article>标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。<article>标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。

<article>和<section>标签的用法例子请参见清单4。

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

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

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

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

在了解了有关“渐进增强”和“平稳退化”的概念以及本次实战的设计需求之后，我们来看看灰稿原型图及页面代码框架(详见全文)。

关于这段代码有几点说明：

• 我们可以看到3个针对IE的条件判断语句。第一条针对所有版本的IE从Google Code中加载html5 shiv脚本；第二个条件判断语句针对IE7及之后的浏览器进行向后兼容；最后一个用于修复IE6中的bug。
• body标签的id="index"和class="home"纯属作者习惯，并没有特殊的必要。
• 简化的字符集声明可以更好的兼容低级浏览器。
• 该文件使用标准的XHTML 1.0标签的写法。

这个最基本的代码框架可以用来作为任何HTML5页面的起点；接下来，我们开始按照之前的页面设计来为不同的布局区块编写代码。