article标签专用于包裹可独立分发的完整帖子，应以header含标题与作者、section/p呈现正文、footer放操作与元信息，并避免滥用嵌套，确保语义清晰与可访问性。
article 标签在 HTML5 中专用于包裹“可独立分发或复用的内容”，比如博客文章、新闻稿、论坛帖子——它天然适合表达一条完整的、自包含的讨论帖。
结构上：用 article 包裹整条帖子，内部用语义化子元素组织内容
每条帖子应是一个独立的 article 元素，内部按逻辑嵌套：
– 用 header 包含标题（h2 或 h3）、作者信息、发布时间；
– 用 section 或直接用 p、blockquote 等呈现正文；
– 用 footer 放置操作区域（如点赞、回复、编辑按钮）和元信息（如最后更新时间、标签）。
语义上：确保每条 article 有明确的独立性与上下文标识
为增强可访问性和 SEO，建议：
– 给 article 添加 aria-labelledby 指向标题 ID，方便屏幕阅读器识别；
– 若帖子来自特定用户，可在 header 中用 address 标记作者（注意：仅当表示作者联系信息时才用，否则用 span + 微数据更稳妥）；
– 使用 time 元素标记发布时间，并设 datetime 属性（如 <time datetime="2024-06-15T14:22">2小时前</time>）。
嵌套关系上：避免在 article 内部再放 article，除非是真正嵌套的独立内容
常见误区是把“楼中楼”回复也套 article。正确做法：
– 主帖用 article；
– 每条一级回复也各自用独立的 article（因为它们也是可独立引用的内容）；
– 若某条回复里还引用了另一篇完整文章（比如“转一篇三年前的深度分析…”），这时被引用的内容才适合再用一层 article；
– 单纯的短评、表情回复、系统提示等非独立内容，用 div 或 aside 更合适。
样式与交互上：用 CSS 类辅助区分状态，不破坏语义结构
article 本身不带默认样式，需配合类名控制视觉表现：
– 加 class="post--pinned" 表示置顶帖；
– 加 class="post--solved" 表示问题已解决；
– 用 :has() 伪类（现代浏览器支持）快速匹配含特定子元素的 article，例如 article:has(.badge--urgent) 高亮紧急帖；
– 不要为了样式便利把 article 当作通用容器滥用——它的语义价值远高于 div。
用对 article，不仅让代码更清晰，也让搜索引擎、读屏软件和未来可能的聚合工具能准确理解每条帖子的边界与意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
