[HTML/HTML5]3 页面结构

　　在HTML5之前，主要的容器元素是div元素，但在HTML5中提供了数种其它容器元素供我们使用。

　　因此，当组织Web页面结构时，首先使用HTML将内容分成多部分，然后在对其使用CSS应用样式和格式。

　　HTML5添加了6个新的容器元素以及最初的div元素：

• header：用于容纳文档或部分的标题，比如：标题、副标题、标语和导航；
• footer：用于容纳文档或部分的页脚，比如：联系信息和版权数据；
• nav：用于容纳文档或部分的重要导航元素；
• aside：用于分组与主题无关的内容，比如：重要的引文、传记信息和相关链接；
• section：用于分组与主题相关的内容，比如：一本书中的各章，通常可以作为数据库的一部分；
• article：用于容纳可聚合的内容；
• div：用于容纳通用的内容部分，主要出于对该部分内容应用样式表的目的。

　　当开始创建页面内容的结构时，请记住这一点：同一个页面可以采用多种不同的分块方法。

　　只要遵循W3C对容器的一般性指导原则，在什么地方使用哪一种容器元素，就具有一定的灵活性。

　　（1）header元素和footer元素

　　header元素和footer元素用于容纳一个页面主要的header和footer区域，也可以作为其它较小的header和footer部分。因此在单个页面上，实际上可以存在多个header和footer元素。

 <header>
 Header content goes here
 </header>
 <footer>
 Footer content goes here
 </footer>

　　（2）nav元素

　　nav元素既可以单独使用，也可以放在其它部分之内。然而，将页面上的每一个超链接都包含在一个nav容器之中也并无必要。恰恰相反，<nav>标记中只应包含最重要的导航块。

 <nav>
 Nav content goes here
 </nav>

　　（3）aside元素

　　在HTML中，侧边栏（aside）就是与主文章（article）或部分（section）有关的一块内容，但它又不是页面主文档流的一部分。在最常见的情形下，aside元素中的内容是重要的引文、传记信息和相关的广告和链接。

 <aside>
 Aside content goes here
 </aside>

　　（4）section元素和article元素

　　二者都可以包含相同类型的内容，但仅有article元素指定具有聚合内容的用途。聚合内容的一些例子包括博客文章、新闻或杂志文章。与之相比，section元素更适合表示故事中的章节、Web网站常规的区块（比如：“关于我们”、“联系信息”、“公司历史”），以及其它非聚合的页面内容。

 <section>
 Section content goes here
 <section>
 <article>
 article content goes here
 </article>

　　在单个Web页面中，可以具有多个section元素和article元素。另外，根据使用情形，这两个元素中的任意一个都可以嵌套在另一个元素中。

　　假如我们正在创建一本在线图书，可以将该书中的每一章放在一个section元素中，然后将整本书放在一个article元素之中，用于内容聚合。

 <article>
         <header>My Book<header>
         <secition>Chapter 1 goes here</section>
         <secition>Chapter 2 goes here</section>
         <secition>Chapter 3 goes here</section>
 </article>

　　根据W3C的建议，section元素专门为要存储在数据库的一块内容而创建的。因此不应该将section元素作为容纳内容的通用容器。如果仅仅是出于定义样式的目的而寻找一个通用容器元素来包含内容，请改用div元素。

　　（5）element + id

　　如果使用这6种容器元素中的任何一种都没有明确的意义，那么你可以使用div元素，本质上div元素就是最通用的容器元素。请注意，没有必要一定要将内容区域强制性的放在HTML新增的这6种新元素中。对于页面的绝大多数甚至是所有内容区域，使用通用的div元素也完全可以接受，有时甚至更好。

　　当在一个页面多次使用这些容器时，最好为每一个容器元素添加一个id特性，为每一个内容区域定义一个名称：

 <section id="introduction">
 Section content goes here
 <section>
 <section id="summary">
 Section content goes here
 </section>

　　在为分块定义了名称后，就可以在样式表中设置该区域的样式：

 #introduction {border:1px;}
 #summary {font-family:Verdana; font-size:12pt;}

　　（6）element + class

　　如果想为多个区块定义相同的样式，可在容器元素的开始标记中，使用一个class属性来代替id属性：

 <article id="scienceBook">
         <header>My Book<header>
         <secition class="introChapter">Chapter 1 goes here</section>
         <secition class="normalChapter">Chapter 2 goes here</section>
         <secition class="normalChapter">Chapter 3 goes here</section>
 </article>

　　相应的样式表可以按照下面定义：

 #scienceBook {font-family:Verdana; font-size:2pt; color:green;}
 .introChapter{border:double medium;}
 .normalChapter{margin:2em;}