HTML article标签详解 独立内容容器的使用指南

<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

📚目录

评论 (0)

×

暂无评论,快来发表第一条评论吧

请输入验证码

×
验证码图片

©2025 - 菜鬼自学网 - 梦想不大创造神话~