如何在HTML中使用容器标签

150 阅读2分钟

了解如何在HTML中使用容器标签,并找出应该选择哪一个标签

HTML提供了一系列的容器标签。这些标签可以包含一组未指定的其他标签。

我们有。

  • article
  • section
  • div

而要理解它们之间的区别可能会很混乱。

让我们看看何时使用它们中的每一个。

article

文章标签标识了一个可以独立于页面中其他事物事物

例如,主页中的博客文章列表。

或者一个链接的列表。

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>

我们并不局限于列表:一篇文章可以是一个页面中的主要元素。

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>

在一个article 标签里面,我们应该有一个标题(h1-h6)和

section

代表一个文件的一个部分。每个部分都有一个标题标签(h1-h6),然后是部分正文

例子。

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>

把一篇长文章分成不同的章节是很有用的。

不应作为一般的容器元素使用。div 就是为了这个目的而制作的。

div

div 是通用的容器元素。

你通常会给这个元素添加一个classid 属性,以允许它使用CSS进行样式设计。

我们在任何需要容器但现有标签不适合的地方使用div

与页面有关的标签

nav

这个标签是用来创建定义页面导航的标记的。在此,我们通常会添加一个ulol 列表。

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>

aside

aside 标签用于添加一块与主要内容相关的内容。

例如,一个添加报价的方框。或者一个侧边栏。

例子。

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>

使用aside 是一个信号,表明它所包含的东西不属于它所处的部分的常规流程。

header

header 标签代表页面的一部分,是介绍。例如,它可以包含一个或多个标题标签(h1-h6 ),文章的标语,一张图片。

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</article>

main

main 标签代表一个页面的主要部分。

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

footer

footer 标签用于确定一篇文章的页脚,或页面的页脚。

<article>
 ....
	<footer>
    <p>Footer notes..</p>
  </footer>
</article>