《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald

简介：

本节书摘来自异步社区《HTML5与CSS3实战指南》一书中的第2章，第2.5节,作者： 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5 构建The HTML5 Herald

我们已经介绍了页面结构的基础以及在此方面非常有帮助的HTML5元素。现在我们将开始创建有内容的网页部分。

使用header元素，从顶部开始。首先在此包含徽标、名称以及标语。我们还可以在网站导航中添加nav元素。

在添加header元素后，网站的内容被分为3列。在您使用section元素时，可以停下来思考其内容。如果每一部分包含一个独立的“部分”信息（比如体育部分和娱乐部分），那将非常有意义。因为，分成独立的栏目仅是一个可视化的安排—所以在每一列，我们将使用普通的老元素div。

在div里面，我们可以包含报纸文章。当然，这些也是article元素的候选者。

而在最右列，除了一篇文章，还有3个广告。我们将使用一个aside元素来包含广告，每一个广告放在article``元素中。这似乎很奇怪，但回头看看文章描述：“一个自我包含的组成部分[...]也就是说，从原则上讲，是独立分布或可重复使用的。”一个广告与该海报完美匹配，因为它通常没有修改以在许多网站上转载。

下一步，我们将为出现在广告下面的最后一篇文章添加article元素。这最后一篇文章将不被包括在保存了3个广告的aside元素中。如果要使其归属于aside元素中，article元素中的内容将需要与网页内容无关。但是事实不是这样的：article元素内容是页面中主要内容的一部分，所以将它放在aside元素中是错误的。

现在，第三列由两个元素组成：aside和article元素，其中一个放在另一个上面。为了将它们放在一起并容易设置其风格，我们将它们放在div元素中。我们在这里不使用section元素或其他语义标记，那样就意味着article和aside有某种局部的关系，但它们不是—在这里只是我们设计的一个功能，而它们恰巧在同一列中而已。

在页眉下方，出于样式目的，还有一个完整的上半部分包含在通用的div元素中。

最后，我们在其传统的位置—页面底部添加footer元素。由于包含了一些不同的内容块，而每一个内容块都形成了自我包含和主题相关的单位，我们将这些分到section元素中。作者信息将形成一个部分，而每一个作者都在自己嵌套的section元素中。这样，另一个section`元素放版权和其他信息。

让我们在页面添加新元素，文档如下：

我们现在已有了一个结构，可以作为内容的坚实基础。