必须用 article 包裹每条帖子，内部用 header 包含 h2～h4 标题和 time[datetime] 元信息，摘要用 p，缩略图用带 loading="lazy" 和 srcset 的 img，标题跳转用 a 而非 button。
怎么搭出语义正确、能被爬虫和屏幕阅读器识别的帖子列表
社区首页的核心是帖子流，不是一堆 div 堆出来的“看起来像论坛”的东西。用错容器标签，SEO 和无障碍支持直接打折。
每条帖子必须用 article 包裹——它自带独立内容语义，RSS 解析、搜索引擎抓取、辅助技术导航都依赖这个。别用 section 或 div 替代。
-
article内部用header放标题和元信息（作者、时间），别把time塞进p里套strong - 标题必须是
h2～h4（按页面层级定，首页主帖一般用h2），禁用h1—— 整个页面只能有一个h1，属于页面总标题 - 摘要正文用
p，不是div；如果需要多段落或嵌入链接，仍保持p为基本单元 -
summary不是摘要容器！它是details的子元素，乱用会导致 DOM 结构断裂、辅助技术误读
为什么 time datetime="2024-05-20T14:30:00Z" 比 “2小时前” 更关键
“2小时前” 是给眼睛看的，但 HTML 骨架要靠机器可读的时间戳撑住。没这个，排序、缓存、国际化、无障碍支持全会掉链子。
-
datetime属性值必须是 ISO 8601 格式，例如"2024-05-20T14:30:00Z"，不能写"2024/05/20"或"昨天" - 没
datetime的time标签等于没写——浏览器不识别为时间，爬虫忽略，JS 排序逻辑也拿不到原始值 - 视觉上显示相对时间可以，但得用 JS 动态计算并更新；HTML 里只保留标准时间戳作为唯一可信源
缩略图怎么写才不拖慢首屏、又兼容暗色模式
一张没优化的 img 就能让 LCP 崩盘，还可能在深色背景下白边刺眼。背景图方案在这里完全不合适。
- 必须加
loading="lazy"，否则滚动前就加载所有缩略图，浪费带宽且阻塞渲染 - 强制指定
width和height属性（哪怕后续用 CSS 覆盖），防止布局抖动 - 用
srcset+sizes适配不同屏幕，例如：<img src="t-small.jpg" srcset="t-small.jpg 480w, t-medium.jpg 768w" sizes="(max-width: 480px) 100vw, 50vw"> - 绝对不用
background-image实现缩略图——它无法右键保存、不进alt流程、暗色模式下无法通过prefers-color-scheme切换
标题跳转该用 a 还是 button？
标题是导航入口，不是操作按钮。用 button 模拟链接，会破坏语义、键盘焦点流和基础可用性。
-
a天然支持中键新标签页、右键复制链接、history.pushState、SEO 索引；button默认不触发任何这些 - 如果加了
onclick却没处理event.preventDefault()，点击时可能意外触发表单提交或页面跳转异常 - 即使加了
role="link"，也难完全模拟a的原生行为，尤其在移动端和辅助技术中表现不稳定
真正容易被忽略的，是 article 的嵌套层级和 time 的 datetime 格式校验——这两处出错，不会立刻报错，但会让整个 feed 在 RSS 订阅、爬虫索引、屏幕阅读器朗读时悄无声息地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
