code前端网HTML容器标签总结
本文的目标：了解如何在HTML中使用容器标签，并找出合适的容器标签。
容器标签
HTML 提供了一组容器标签。这些标签可能包含一组未指定的其他标签。
以下是常见的：
- 文章
- section
- div
理解它们之间的 的区别可能会令人困惑。
接下来，让我们看看什么时候应该使用这些标签。
文章
文章标签标识可以独立于页面上其他内容的内容。
例如主页上的博客文章列表。
或链表。
<!--前端教程网-->
<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>在文章标签中我们应该使用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，但现有的标记不适合。
与页面
相关的标签导航
此标签用于创建定义页面导航的标签。我们通常添加 ul 或 ol 列表：
<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>除了
aside 标签用于添加与主要内容相关的内容。
例如，您要在其中添加报价的框。或者侧边栏。
示例：
<div>
<p>some text..</p>
<aside>
<p>A quote..</p>
</aside>
<p>other text...</p>
</div>aside 标签用于添加与主要内容相关的内容。
标题
标题标签代表页面的一部分，即简介。例如，它可以包含一个或多个标题标签（h1-h6）、文章标签、图像。
<article>
<header>
<h1>Article title</h1>
</header>
...
</article>主要
面标签表示页面的主要部分：
<body>
....
<main>
<p>....</p>
</main>
</body>页脚
页脚用于标识文章的页脚，或者页面的页脚：
<article>
....
<footer>
<p>Footer notes..</p>
</footer>
</article>版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
上一篇：HTML 音频标签 下一篇：窗口对象和文档对象有什么区别
相关文章
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。