html5 页面结构_HTML5页面结构基础

html5 页面结构

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

Now that we’ve broken down the basics of our template, let’s start adding some meat to the bones and give our page some structure.

现在，我们已经分解了模板的基础知识，让我们开始向骨骼添加一些肉，并为页面提供一些结构。

Later in the book, we’re going to specifically deal with adding CSS3 features and other HTML5 goodness; for now, we’ll consider what elements we want to use in building our site’s overall layout. We’ll be covering a lot in this section and throughout the coming chapters about semantics. When we use the term “semantics,” we’re referring to the way a given HTML element describes the meaning of its content.

在本书的后面，我们将专门处理添加CSS3功能和其他HTML5优点。 现在，我们将考虑在构建网站的整体布局时要使用哪些元素。 在本节以及接下来的有关语义的各章中，我们将涉及很多内容。 当我们使用“语义”一词时，是指给定HTML元素描述其内容含义的方式。

If you look back at the screenshot of The HTML5 Herald (or view the site online), you’ll see that it’s divided up as follows:

如果回头看HTML5 Herald的屏幕截图(或在线查看网站)，您会发现它的划分如下：

• header section with a logo and title

  标头部分带有徽标和标题

• navigation bar

  导航栏

• body content divided into three columns

  正文内容分为三列

• articles and ad blocks within the columns

  列中的文章和广告块

• footer containing some author and copyright information

  页脚包含一些作者和版权信息

Before we decide which elements are appropriate for these different parts of our page, let’s consider some of our options. First of all, we’ll introduce you to some of the new HTML5 semantic elements that could be used to help divide our page and add more meaning to our document’s structure.

在决定哪些元素适合页面的这些不同部分之前，让我们考虑一些选项。 首先，我们将向您介绍一些新HTML5语义元素，这些元素可用于帮助划分页面并为文档的结构添加更多含义。

header元素 (The header Element)

Naturally, the first element we’ll look at is the header element. The spec describes it succinctly as “a group of introductory or navigational aids.”

自然，我们要看的第一个元素是header元素。 该规范将其简洁地描述为“一组入门或导航辅助工具”。

Contrary to what you might normally assume, you can include a new header element to introduce each section of your content. It’s not just reserved for the page header (which you might normally mark up with <div id="header">). When we use the word “section” here, we’re not limiting ourselves to the actual section element described in the next part; technically, we’re referring to what HTML5 calls “sectioning content.” This means any chunk of content that might need its own header, even if that means there are multiple such chunks on a single page.

与通常的假设相反，您可以包括一个新的header元素以介绍内容的每个部分。 它不只是保留给页面标题(通常可以用<div id="header">标记)。 当我们在此处使用“ section”一词时，我们并不局限于下一部分中描述的实际section元素； 从技术上讲，我们指的是HTML5所谓的“分段内容”。 这意味着可能需要其自己的标头的任何内容块，即使这意味着在单个页面上存在多个此类块。

A header element can be used to include introductory content or navigational aids that are specific to any single section of a page, or apply to the entire page, or both.

header元素可用于包括介绍性内容或特定于页面任何部分的导航帮助，或应用于整个页面，或两者。

While a header element will frequently be placed at the top of a page or section, its definition is independent from its position. Your site’s layout might call for the title of an article or blog post to be off to the left, right, or even below the content; regardless of which, you can still use header to describe this content.

尽管header元素通常会放置在页面或节的顶部，但其定义与位置无关。 您网站的布局可能要求文章或博客文章的标题位于内容的左侧，右侧甚至下方。 无论哪个，您仍然可以使用header来描述此内容。

section元素