游客

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
  • 本文作者:菜鬼
  • 本文链接: https://caigui.net/post-892.html
  • 版权声明:本博客所有文章除特别声明外,均默认采用 CC BY-NC-SA 4.0 许可协议。
文章很赞!支持一下吧 还没有人为TA充电
为TA充电
还没有人为TA充电
0
0
  • 支付宝打赏
    支付宝扫一扫
  • 微信打赏
    微信扫一扫
感谢支持
文章很赞!支持一下吧
关于作者
685
5
0
1
梦想不大,创造神话。

超文本魔法之门 a标签的星辰大海航行指南

上一篇

HTML链接元素a的魔法指南 编织虚拟世界的超文本丝线

下一篇
评论区
内容为空

这一切,似未曾拥有