HTML5附带了一堆新元素，将来还会推荐更多。但是，有些元素的实现可能会有些混乱，包括以下两个新元素：<article>和<section>。
我在论坛上发现的一些最常见的问题是：在什么情况下应使用这些元素？而同样，我们如何正确地使用这些内容？
<section>元素
这可能是最含糊的元素之一。这些年来，我们已经使用<div>元素为切片在我们的网页结构。因此，出现了一个问题，因为它与<div>element 有什么不同，何时应该在element之外使用此<div>element。
要揭开它的神秘面纱，我们需要参考官方文档。根据WHATWG文档，其<section>描述如下：
“ <section>元素代表文档或应用程序的通用部分。〜WHATWG”
从该描述中，我们可以得出结论，该<section>元素或多或少像<div>元素一样肯定是用于分段的。但是有一个例外。该文档添加了一些特定的额外说明，说明：
“当仅出于样式目的或为了方便编写脚本而需要元素时，鼓励作者改用div元素……一般规则是，仅当元素的内容明确列出时，section元素才是适当的……〜WHATWG”
在这一点上，事情变得更轻松了，我们可以从两点总结该描述：
- 尽管section元素在技术上是可样式化的，但建议
<div>在我们更可能将沉重的样式或脚本应用于该元素时使用它。 - 与
<li>element 相似，section element的一般思想是列出content。
因此，在实际情况下，使用<section>元素的明智原因之一是构建博客文章内容列表，如以下代码片段所示：
|
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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> |
这只是一个例子。我们可以将此元素用于其他目的。
<article>元素
这个名称本身是不言自明的，但是让我们看看官方文档是如何描述它的：
“文件，页面，应用程序或网站中的独立文件，原则上可以独立分发或重用，例如在联合组织中。这可以是论坛帖子，杂志或报纸文章，博客条目，用户提交的评论，交互式小部件或小工具或任何其他独立的内容。“
从上面的解释中，我们可以得出结论，特别<article>推荐将元素用于结构化文章，尤其是我们可能要联合的文章，例如博客文章，页面内容或论坛文章。
以下示例说明了如何使用来构建博客文章内容<article>。
|
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
|
<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>合理的情况下，例如以下示例，可以将文章与element 分为几个部分。
|
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
22
23
24
25
26
27
28
29
30
|
<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> <h4>This is another Sub-Heading</h4> 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> |
结论
发明了HTML5中的所有新元素，以使万维网结构更具语义，这是万维网的创始人和W3C主管的预言所致。但是，在Web开发人员和设计人员中，仍然存在关于如何更正确地应用这些元素的争论，有人说这句话，而其他人则可能不同。
但是，不要与这个想法混淆。正如我上面提到的，只要使用情况合理，并且您在检查结构时就发现该结构非常有意义，然后再继续使用。毕竟，最后没有关系。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259437.html