点评:HTML5带出了一系列新元素,以下两个新元素:article和section是比较混淆,经常提到是什么情况下我们应该使用这些元素,接下来为大家介绍下两者的应用,感兴趣的各位可以参考下哈
ttJHTML5中文学习网 - HTML5先行者学习网HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
ttJHTML5中文学习网 - HTML5先行者学习网最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?
ttJHTML5中文学习网 - HTML5先行者学习网ttJHTML5中文学习网 - HTML5先行者学习网Section元素 ttJHTML5中文学习网 - HTML5先行者学习网这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们一直在用<div>来划分段落,所以除 了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述:
ttJHTML5中文学习网 - HTML5先行者学习网“<section>元素表示了一篇文档或应用中,通用段落 - WHATWG”
ttJHTML5中文学习网 - HTML5先行者学习网ttJHTML5中文学习网 - HTML5先行者学习网从描述中我们可以看出<section>元素的作用就是分段,或多或少类似于<div>。但是它仍有一个特例。在文档中,加入了一段特别声明:
ttJHTML5中文学习网 - HTML5先行者学习网“当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用<div>。<section>元素适用于,当元素的内容需要明确的列出时。- WHATWG”
ttJHTML5中文学习网 - HTML5先行者学习网ttJHTML5中文学习网 - HTML5先行者学习网基于这一点,我们可以总结以下两点:
ttJHTML5中文学习网 - HTML5先行者学习网第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。
ttJHTML5中文学习网 - HTML5先行者学习网第二,类似于<li>元素,section元素是用来列举内容的。
ttJHTML5中文学习网 - HTML5先行者学习网ttJHTML5中文学习网 - HTML5先行者学习网因此在现实例子中,使用<section>元素的原因是结构化的列出博客的内容,代码如下:
ttJHTML5中文学习网 - HTML5先行者学习网 ttJHTML5中文学习网 - HTML5先行者学习网
<div class="blog"> ttJHTML5中文学习网 - HTML5先行者学习网
<section class="post"> ttJHTML5中文学习网 - HTML5先行者学习网
<h2 class="post-title">Blog Post Title</h2> ttJHTML5中文学习网 - HTML5先行者学习网
<p class="post-excerpt">Ice cream tart powder jelly-o. ttJHTML5中文学习网 - HTML5先行者学习网
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> ttJHTML5中文学习网 - HTML5先行者学习网
</section> ttJHTML5中文学习网 - HTML5先行者学习网
<section class="post"> ttJHTML5中文学习网 - HTML5先行者学习网
<h2 class="post-title">Blog Post Title</h2> ttJHTML5中文学习网 - HTML5先行者学习网
<p class="post-excerpt">Ice cream tart powder jelly-o. ttJHTML5中文学习网 - HTML5先行者学习网
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> ttJHTML5中文学习网 - HTML5先行者学习网
</section> ttJHTML5中文学习网 - HTML5先行者学习网
<section class="post"> ttJHTML5中文学习网 - HTML5先行者学习网
<h2 class="post-title">Blog Post Title</h2> ttJHTML5中文学习网 - HTML5先行者学习网
<p class="post-excerpt">Ice cream tart powder jelly-o. ttJHTML5中文学习网 - HTML5先行者学习网
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> ttJHTML5中文学习网 - HTML5先行者学习网
</section> ttJHTML5中文学习网 - HTML5先行者学习网
</div> ttJHTML5中文学习网 - HTML5先行者学习网
ttJHTML5中文学习网 - HTML5先行者学习网这只是个例子,<section>元素也可以用作其他用途。
ttJHTML5中文学习网 - HTML5先行者学习网ttJHTML5中文学习网 - HTML5先行者学习网Article元素 ttJHTML5中文学习网 - HTML5先行者学习网从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的:
ttJHTML5中文学习网 - HTML5先行者学习网“在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时。这个可以是论坛帖子,杂志或是新闻,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”
ttJHTML5中文学习网 - HTML5先行者学习网ttJHTML5中文学习网 - HTML5先行者学习网从上描述中,我们可以总结出<article>元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。
ttJHTML5中文学习网 - HTML5先行者学习网以下例子给出了如何使用<article>构建一个博客文章。
ttJHTML5中文学习网 - HTML5先行者学习网 ttJHTML5中文学习网 - HTML5先行者学习网
<article class="post"> ttJHTML5中文学习网 - HTML5先行者学习网
<header> ttJHTML5中文学习网 - HTML5先行者学习网
<h1>This is Blog Post Title</h1> ttJHTML5中文学习网 - HTML5先行者学习网
<div class="post-meta"> ttJHTML5中文学习网 - HTML5先行者学习网
<ul> ttJHTML5中文学习网 - HTML5先行者学习网
<li class="author">Author Name</li> ttJHTML5中文学习网 - HTML5先行者学习网
<li class="categories">Save in Categories</li> ttJHTML5中文学习网 - HTML5先行者学习网
</ul> ttJHTML5中文学习网 - HTML5先行者学习网
</div> ttJHTML5中文学习网 - HTML5先行者学习网
</header> ttJHTML5中文学习网 - HTML5先行者学习网
<div class="post-content"> ttJHTML5中文学习网 - HTML5先行者学习网
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. ttJHTML5中文学习网 - HTML5先行者学习网
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat ttJHTML5中文学习网 - HTML5先行者学习网
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies ttJHTML5中文学习网 - HTML5先行者学习网
halvah gummies danish biscuit applicake gingerbread jelly-o pastry. ttJHTML5中文学习网 - HTML5先行者学习网
</div> ttJHTML5中文学习网 - HTML5先行者学习网
</article> ttJHTML5中文学习网 - HTML5先行者学习网
ttJHTML5中文学习网 - HTML5先行者学习网此外,<article>元素还可与section元素结合,需要的时候,可以使用<section>元素将文章分为几个段落,如下例所示。
ttJHTML5中文学习网 - HTML5先行者学习网 ttJHTML5中文学习网 - HTML5先行者学习网
<article class="post"> ttJHTML5中文学习网 - HTML5先行者学习网
<header> ttJHTML5中文学习网 - HTML5先行者学习网
<h1>This is Blog Post Title</h1> ttJHTML5中文学习网 - HTML5先行者学习网
<div class="post-meta"> ttJHTML5中文学习网 - HTML5先行者学习网
<ul> ttJHTML5中文学习网 - HTML5先行者学习网
<li class="author">Author Name</li> ttJHTML5中文学习网 - HTML5先行者学习网
<li class="categories">Save in Categories</li> ttJHTML5中文学习网 - HTML5先行者学习网
</ul> ttJHTML5中文学习网 - HTML5先行者学习网
</div> ttJHTML5中文学习网 - HTML5先行者学习网
</header> ttJHTML5中文学习网 - HTML5先行者学习网
<div class="post-content"> ttJHTML5中文学习网 - HTML5先行者学习网
<section> ttJHTML5中文学习网 - HTML5先行者学习网
<h2>This is the Sub-Heading</h2> ttJHTML5中文学习网 - HTML5先行者学习网
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. ttJHTML5中文学习网 - HTML5先行者学习网
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake ttJHTML5中文学习网 - HTML5先行者学习网
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah ttJHTML5中文学习网 - HTML5先行者学习网
gummies danish biscuit applicake gingerbread jelly-o pastry. ttJHTML5中文学习网 - HTML5先行者学习网
</section> ttJHTML5中文学习网 - HTML5先行者学习网
<section> ttJHTML5中文学习网 - HTML5先行者学习网
<h3>This is another Sub-Heading</h3> ttJHTML5中文学习网 - HTML5先行者学习网
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops ttJHTML5中文学习网 - HTML5先行者学习网
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate ttJHTML5中文学习网 - HTML5先行者学习网
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. ttJHTML5中文学习网 - HTML5先行者学习网
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry. ttJHTML5中文学习网 - HTML5先行者学习网
</section> ttJHTML5中文学习网 - HTML5先行者学习网
</div> ttJHTML5中文学习网 - HTML5先行者学习网
</article> ttJHTML5中文学习网 - HTML5先行者学习网
ttJHTML5中文学习网 - HTML5先行者学习网总结 ttJHTML5中文学习网 - HTML5先行者学习网如万维网的创始人和W3C的董事所预测的那般,所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间,仍存有争论。
ttJHTML5中文学习网 - HTML5先行者学习网无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。
ttJHTML5中文学习网 - HTML5先行者学习网