1. 犀牛前端部落首页
  2. Html5教程

HTML容器标签总结

本文目标:了解如何在HTML中使用容器标签,并找出适合的容器标签。

HTML容器标签总结

容器标签

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

常见的有以下:

  • article
  • section
  • div

理解它们之间的区别可能会令人困惑。

接下来让我们看看什么时候应该使用这些标签。

article

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可以是页面中的主要元素。

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

在article标签中,我们应该使用h1~h6标题标签。

section

表示文档的一部分。每个节都有一个标题标记(h1-h6),然后是section主体。

例子:

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

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

不应该用作泛型容器元素。而div就是为此而创建的。

div

div是通用的容器元素:

<div>
	...
</div>

您经常向这个元素添加一个类或id属性,以允许它使用CSS进行样式化。

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

与页面相关的标签

nav

此标记用于创建定义页面导航的标记。我们通常会在其中添加一个ul或ol列表:

<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

mian标签表示页面的主要部分:

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

footer

页脚标签用于确定文章的页脚,或页面的页脚:

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3282.html

发表评论

登录后才能评论