HTML5中的Article和Section元素认识及使用

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

网页hTML5教程带出了一系列新网页元素，并且将在未来被广泛应用。然而，有一些网页元素在使用时易被混淆，包括以下两个新网页元素：<article>和<section>。
最常被问起的问题是：在什么情况下咱们应该使用这些网页元素？以及咱们应该如何正确的使用这些网页元素？

Section网页元素
这是一个最容易产生歧义的网页元素。它与<div>网页元素有什么区别？咱们一直在用<div>来划分段落，所依除了<div>,咱们什么时候使用这个网页元素。咱们引用官方文档来阐述它。根据WhATWG文档，对<section>网页元素做了以下描述：
“<section>网页元素表示了一篇文档或应用中，通用段落 - WhATWG”

从描述中咱们可以看出<section>网页元素的作用就是分段，或多或少类似于<div>。但是它仍有一个特例。在文档中，加入了一段特别声明：
“当一个网页元素仅用于风格样式或是为了脚本的方便，咱们鼓励作者使用<div>。<section>网页元素适用于，当网页元素的内容需要明确的列出时。- WhATWG”

基于这一点，咱们可以总结以下两点：
第一，尽管section网页元素在技术上是可以设计样式的，但是当有复杂的样式或脚本时，咱们仍建议使用div网页元素。
第二，类似于<li>网页元素，section网页元素是用来列举内容的。

因此在现具体相关子中，使用<section>网页元素的原因是结构化的列出博客的内容，具体代码如下：

复制具体代码具体代码如下:
<div class="blog">
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>

这只是个例子，<section>网页元素也可以用作其他用途。

Article网页元素
从名字上，它已经很好的诠释了自己，但是咱们仍要看看官方文档上是如何描述它的：
“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。”

从上描述中，咱们可以总结出<article>网页元素专用于结构化文章，特别是咱们要发布的，例如博客，页面内容或是论坛帖子。
以下例子给出了如何使用<article>构建一个博客文章。

复制具体代码具体代码如下:
<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>

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

复制具体代码具体代码如下:
<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>This is the Sub-heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>
<section>
<h3>This is another Sub-heading</h3>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>

总结
如万维网的创始人和W3C的董事所预测的那般，所有网页hTML5教程创造出来的新网页元素都是为了是网络结构更加语义化。如何正确的应用这些网页元素在网络开发建设者和设计者之间，仍存有争论。
无论如何，不要混淆观点。如我之前提出的，只要是合理的情况，且您看到使用了它使得结构变得意义非凡，那么请用它。