了解如何在HTML中使用容器标签,并找出应该选择哪一个标签
HTML提供了一系列的容器标签。这些标签可以包含一组未指定的其他标签。
我们有。
articlesectiondiv
而要理解它们之间的区别可能会很混乱。
让我们看看何时使用它们中的每一个。
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 是通用的容器元素。
你通常会给这个元素添加一个class 或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
main 标签代表一个页面的主要部分。
<body>
....
<main>
<p>....</p>
</main>
</body>
footer
footer 标签用于确定一篇文章的页脚,或页面的页脚。
<article>
....
<footer>
<p>Footer notes..</p>
</footer>
</article>