不能用包文章列表，因表示并列同类项（如导航菜单），而每篇文章是独立完整的内容单元，语义上应使用；误用会导致屏幕阅读器体验断裂、seo弱化、结构扩展困难。
直接用 <article></article> 做容器，别套 <ul></ul>，语义错位会导致屏幕阅读器混乱、SEO 弱化、后续加封面图或分类标签时结构松散。
为什么不能用 <ul></ul> 包文章列表
很多人习惯写 <ul class="post-list"><li>
<h3>标题</h3>
<p>摘要</p>
</li></ul>，这在视觉上能排成列表，但语义上完全错误：<ul></ul> 表示“并列同类项”，比如导航菜单、标签云；而每篇博客是独立、完整的内容单元，<article></article> 才是唯一正确的语义容器。
后果很实际：
- 屏幕阅读器会把整页当成一个大列表读，每篇标题后重复提示“列表项”，体验断裂
-
<time datetime="2024-03-15"></time>无法自然嵌入<li>内部的元信息区域，容易退化为纯文本 - 后续想给某篇文章加
<figure></figure>封面图或<footer></footer>分类标签时，硬塞进<li>会让 CSS 选择器变复杂、样式易冲突
<article></article> 结构怎么写才利于扩展
每篇用独立 <article></article>，内部用 <header></header> 包标题和元信息，<time></time> 标记发布时间，<footer></footer> 放分类或作者——这样天然支持 itemprop 结构化数据，也方便 JS 后续按 datetime 属性排序。
示例结构：
<main><article><header><h2>CSS Grid 布局避坑指南</h2>
<p class="meta"><time datetime="2024-03-10">2024-03-10</time> • 阅读 6 分钟</p>
</header><p><code>grid-template-areas</code> 中空字符串和点(.)行为不同……</p>
<footer><span>#CSS #布局</span></footer></article></main>
关键点：
-
<header></header>必须包裹标题 + 元信息，不能只包<h2></h2> -
<time></time>的datetime属性值必须是 ISO 格式（如2024-03-10），否则无法被搜索引擎识别为有效时间 - 避免在
<article></article>外层再套<div> 或 <code><section></section>—— 它本身已是语义完整的节区Flexbox 还是 Grid？选哪个做布局
两者都能用，但适用场景不同：Flexbox 适合单行/单列流式排列（比如移动端竖排文章），Grid 更适合多列响应式网格（比如桌面端三栏卡片）。别强行统一用一种。
推荐组合：
- 移动端（
@media (max-width: 768px)）：用display: flex; flex-direction: column;，每篇<article></article>占满宽度 - 桌面端：用
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))，自动适应列数 - 别用
float或inline-block—— 兼容性差、清除浮动易出错、垂直对齐难控制
注意：Grid 的
gap属性比margin更可靠，它不会触发外边距合并，也不依赖父容器的overflow设置。图片缩略图怎么嵌入不破坏语义
封面图不是装饰，是内容一部分，必须用
<figure></figure>+<img>，不能用 CSSbackground-image。正确写法：
<article><figure> @@##@@ <figcaption>Grid 布局可视化示意</figcaption></figure><header>...</header><p>...</p> </article>关键约束：
-
<img src="cover.jpg" alt="CSS Grid 布局示意图" style="max-width:90%" style="max-width:90%">必须带alt和明确的width/height，否则会触发浏览器重排（layout thrashing） -
<figure></figure>是块级容器，天然与<article></article>内其他元素形成语义分组，不用额外加class - 如果图只是装饰（比如分割线图标），才用
<img>或伪元素
真正容易被忽略的是：语义结构一旦定型，后续加 JS 交互（比如懒加载、点击展开摘要）就变得极其简单；而用一堆
<div> 堆出来的“列表”，改起来往往要重写 HTML + CSS + JS 三层逻辑。 <img src="icon.png" alt=""> </div> - 移动端（
