tp5.1外观_外观：HTML5 和元素

最新推荐文章于 2024-11-07 10:15:41 发布

cune1359

最新推荐文章于 2024-11-07 10:15:41 发布

阅读量167

点赞数

文章标签： java python 编程语言 javascript css ViewUI

HTML5附带了一堆新元素，将来还会推荐更多。但是，有些元素的实现可能会有些混乱，包括以下两个新元素： <article>和<section> 。

我在论坛上发现的一些最常见的问题是： 在什么情况下应该使用这些元素？ 同样，我们如何正确使用这些元素？

<section>元素

这可能是最含糊的元素之一。这些年来，我们已经使用<div>元素在我们的网站结构切片。因此，出现了一个问题，因为它与<div>元素有何不同，以及何时应在<div>元素之外使用此元素。

要揭开它的神秘面纱，我们需要参考官方文档。根据WHATWG文档， <section>描述如下：

“ <section>元素代表文档或应用程序的通用部分。 〜WHATWG”

从该描述中，我们可以得出结论， <section>元素肯定是用于分段的，或多或少类似于<div>元素。但是有一个例外。该文档添加了一些特定的额外说明，说明：

在这一点上，事情变得更轻松了，我们可以从两点总结该描述：

尽管section元素在技术上是可样式化的，但是当我们更有可能对元素应用沉重的样式或脚本时，建议使用<div>代替。
与<li>元素类似，section元素的一般思想是列出content 。

因此，在实际情况下，使用<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>

这只是一个例子。我们可以将此元素用于其他目的。

<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>
		<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>