HTML5中的Article和Section元素

本文主要为广大网友提供“HTML5中的Article和Section元素”，希望对需要HTML5中的Article和Section元素网友有所帮助，学习一下!

  HTML5带出了一系列新元素，并且将在未来被广泛应用。然而，有一些元素在使用时易被混淆，包括以下两个新元素：和。

      这是一个最容易产生歧义的元素。它与元素有什么区别？我们一直在用来划分段落，所以除 了,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档，对元素做了以下 描述：

“元素表示了一篇文档或应用中，通用段落 - WHATWG”

“当一个元素仅用于风格样式或是为了脚本的方便，我们鼓励作者使用。元素适用于，当元素的内容需要明确的列出时。- WHATWG”

      第一，尽管section元素在技术上是可以设计样式的，但是当有复杂的样式或脚本时，我们仍建议使用div元素。

      第二，类似于元素，section元素是用来列举内容的。

1. <div class="blog">  
2.     <section class="post">  
3.         <h2 class="post-title">Blog Post Title</h2>  
4.         <p class="post-excerpt">Ice cream tart powder jelly-o.   
5.         Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
6.     </section>  
7.     <section class="post">  
8.         <h2 class="post-title">Blog Post Title</h2>  
9.         <p class="post-excerpt">Ice cream tart powder jelly-o.   
10.         Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
11.     </section>  
12.     <section class="post">  
13.         <h2 class="post-title">Blog Post Title</h2>  
14.         <p class="post-excerpt">Ice cream tart powder jelly-o.   
15.         Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
16.     </section>  
17. </div>

      这只是个例子，元素也可以用作其他用途。

      从名字上，它已经很好的诠释了自己，但是我们仍要看看官方文档上是如何描述它的：

“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。”

以下例子给出了如何使用构建一个博客文章。

1. <article class="post">  
2.     <header>  
3.     <h1>This is Blog Post Title</h1>  
4.     <div class="post-meta">  
5.         <ul>  
6.             <li class="author">Author Name</li>  
7.             <li class="categories">Save in Categories</li>  
8.         </ul>  
9.     </div>  
10.     </header>  
11.   
12.     <div class="post-content">  
13.         Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
14.         Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat   
15.         cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies   
16.         halvah gummies danish biscuit applicake gingerbread jelly-o pastry.  
17.     </div>  
18.   
19. </article>

      此外，元素还可与section元素结合，需要的时候，可以使用元素将文章分为几个段落，如下例所示。

1. <article class="post">  
2.     <header>  
3.     <h1>This is Blog Post Title</h1>  
4.     <div class="post-meta">  
5.         <ul>  
6.             <li class="author">Author Name</li>  
7.             <li class="categories">Save in Categories</li>  
8.         </ul>  
9.     </div>  
10.     </header>  
11.   
12.     <div class="post-content">  
13.         <section>  
14.         <h2>This is the Sub-Heading</h2>  
15.         Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
16.         Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake   
17.         tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah   
18.         gummies danish biscuit applicake gingerbread jelly-o pastry.  
19.         </section>  
20.   
21.         <section>  
22.         <h3>This is another Sub-Heading</h3>  
23.         Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops  
24.         toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate  
25.         cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.   
26.         Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.  
27.         </section>  
28.     </div>  
29.   
30. </article>

      无论如何，不要混淆观点。如我之前提出的，只要是合理的情况，且你看到使用了它使得结构变得意义非凡，那么请用它。