卡片结构必须用语义化标签（如article、header、main、footer）包裹，避免纯div堆砌；响应式瀑布流需js动态平衡列高；交互元素须支持:focus-visible；图片懒加载应分层降级，首屏关键图禁用懒加载。
卡片结构必须用语义化标签包裹，不能只靠
纯 div 堆砌会导致可访问性差、SEO弱、后期维护成本高。比如用户用屏幕阅读器浏览时，会把整张卡片读作“一段内容”，无法区分头像、用户名、正文、时间等逻辑单元。
正确做法是用 HTML5 语义标签明确划分：
-
article包裹整条动态（每条都是独立内容项） -
header放用户信息区（头像 + 昵称 + 时间） -
main或section放正文和媒体内容 -
footer放互动区域（点赞、评论、转发按钮）
示例片段：
<article class="border rounded-lg p-4"><header class="flex items-center gap-3">
@@##@@
<div>
<p class="font-semibold">张伟</p>
<p class="text-xs text-gray-500">2小时前</p>
</div>
</header><main class="mt-3"><p>今天写了段 CSS 瀑布流，终于不用再手动算高度了。</p>
</main><footer class="mt-4 flex gap-4 text-gray-600"><button>?</button>
<button>?</button>
</footer></article>
响应式多列瀑布流不能只靠 CSS Grid，得配合 JS 控制列高平衡
CSS Grid 的 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 只能保证列数自适应，但每列底部高度不一致时，会出现“最后一行卡片参差不齐”或“空白缝隙卡在中间”的典型问题——尤其当卡片内图文比例差异大时。
真正可用的瀑布流需要 JS 动态计算并插入：
- 监听窗口 resize 和新卡片加载完成事件
- 获取当前所有列容器的高度（如用
document.querySelectorAll('.column')） - 把新卡片 append 到最短的那一列，而非按顺序轮询
- 避免在滚动中频繁重排：加节流（
throttle）或用IntersectionObserver替代scroll事件
纯 CSS 方案（如 Masonry）目前仅 Firefox 原生支持，Chrome / Safari 仍需 column-count + break-inside: avoid 模拟，但对图片加载时机敏感，容易错行。
交互反馈必须显式声明 :focus-visible，否则键盘用户无法感知焦点
很多卡片按钮（如“点赞”“分享”）只写了 :hover，没处理键盘 Tab 导航时的焦点样式。结果是：视力障碍用户或习惯键盘操作的人按 Tab 键，根本看不到当前聚焦在哪张卡片的哪个按钮上。
解决方式很简单，但常被跳过：
- 所有可交互元素（
button、a、带tabindex的div）必须有:focus-visible样式 - 不要覆盖浏览器默认 outline，而是用
outline: 2px solid #3b82f6+outline-offset: 2px增强可见性 - 禁用
*:focus { outline: none }这类全局重置——它直接让键盘导航失效
示例：
button:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
图片懒加载要绕开 IntersectionObserver 的兼容性陷阱
用 loading="lazy" 最省事，但它在 iOS Safari 14.5–15.6 和部分安卓 WebView 中不生效；而直接用 IntersectionObserver 在 Safari 12.1+ 才支持，且旧版需 polyfill。
稳妥方案是分层降级：
- 优先用
<img src="/avatars/1.jpg" alt="用户头像" class="h-10 w-10 rounded-full">（现代浏览器直接走原生） - 对不支持的环境，用
data-src存真实地址，JS 检测'IntersectionObserver' in window再初始化观察器 - 关键首屏图片（如头像、封面图）**绝不懒加载**，否则卡片初始渲染时大量空白占位，体验断层
另外注意：CSS 背景图无法用 loading="lazy"，必须转成 <img loading="lazy" src="..."> 或用 JS 动态 setAttribute。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
