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