<article>
:独立内容的容器
功能:
定义独立于文档的完整内容块,如新闻、博客、评论或交互组件。其内容应具备自释性,即使脱离上下文也能被理解。
特性:
- 语义化标签,提升SEO和可访问性
- 支持嵌套使用(如评论列表中的每条评论)
- 常与
<header>
、<section>
等配合使用
示例:
<article class="blog-post">
<header>
<h2>荷塘月色</h2>
<p>作者:<span class="author">朱自清</span></p>
</header>
<section>
<p>曲曲折折的荷塘上面,弥望的是田田的叶子...</p>
</section>
<footer>
<time datetime="1927-07-15">发表于1927年</time>
</footer>
</article>
注意:
- 与
<section>
的区别:<article>
强调独立性,<section>
仅作逻辑分组 - 现代浏览器默认无样式,需自行设计CSS
这一切,似未曾拥有