必须用包裹每条帖子，标题用～，时间用带ISO 8601格式datetime属性的，缩略图加loading="lazy"及width/height。

直接说结论：用 <article></article> 包每条帖子，别用 <div class="post">；标题必须是 <code><h2></h2>～<h4></h4>，时间必须带 datetime 属性；缩略图必须加 loading="lazy" 和 width/height。

为什么 <article></article> 不能换成 <div> 或 <code><section></section>

因为 <article></article> 明确表示“可独立分发、引用、归档的内容单元”，浏览器、RSS 阅读器、爬虫和屏幕阅读器都靠它识别单条帖子边界。换成 <div> 后，所有语义信息丢失——你无法用 <code>article time[datetime] 一键选中所有发布时间，也无法让辅助技术正确 announce “第 3 条帖子，标题为……”。<section></section> 是逻辑区块容器，适合包“最新回复”“精华帖”这类集合，不是单条内容的容器。

常见错误现象：

• 用 <div class="post"> 套死，导致 SEO 抓取不到标题与时间，搜索结果里只显示“首页 - 论坛”<li>嵌套回复也用 <code><section></section>，结果屏幕阅读器把子回复当成平行主帖朗读
• 在外再包一层 <section></section>，结构层级变浅，<article></article> 的独立性被稀释

<time datetime></time> 写错会导致排序和缓存失效

HTML 里的时间标签不是装饰用的。<time datetime="2024-05-20T14:30:00Z">5分钟前</time> 这种写法才对：视觉上显示“5分钟前”，但机器可读的源数据必须是 ISO 8601 格式（UTC 或带时区偏移）。如果写成 <time>昨天</time> 或 <time datetime="2024/05/20"></time>，后果很实在：

立即学习“前端免费学习笔记（深入）”；

• 服务端缓存策略无法按发布时间做 TTL 分级
• 前端 JS 想按时间倒序重排列表时，new Date(el.dateTime) 解析失败返回 Invalid Date
• 搜索引擎不索引该时间字段，帖子在“最近一周”类筛选中直接消失
• 无障碍工具读不出具体日期，只读“时间”两个字

注意：datetime 属性值必须严格匹配格式，不能省略 T 和 Z（或 +08:00），也不能用中文分隔符。

缩略图加载慢、布局抖动、暗色模式白边怎么破

论坛首页首屏常有 10+ 张缩略图，一张没优化就拉垮 LCP（最大内容绘制）。关键不是“要不要图”，而是怎么写才不拖累体验：


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 强制加 loading="lazy"：否则滚动前全部加载，首屏渲染阻塞
• 必须声明 width 和 height 属性（哪怕后续用 CSS 覆盖）：防止图片加载瞬间撑开布局，造成 CLS（累积布局偏移）
• 用 srcset + sizes 适配不同设备，例如：<img src="t-small.jpg" srcset="t-small.jpg 480w, t-medium.jpg 768w" sizes="(max-width: 480px) 100vw, 50vw" alt="HTML怎么做论坛页面_HTML论坛帖子列表页面布局【常见问题】" >
• 禁用 background-image 实现缩略图：它绕过 alt、无法右键保存、不响应 prefers-color-scheme，深色模式下白底图边缘刺眼

另外，<img alt="HTML怎么做论坛页面_HTML论坛帖子列表页面布局【常见问题】" > 必须带 alt，即使为空也要写 alt=""（说明是纯装饰图），否则屏幕阅读器会读出文件名或路径。

<a href></a> 才是标题链接的唯一正解

标题跳转必须用 <a href="/post/123">标题文本</a>，而不是 <button onclick="location.href='/post/123'"></button>。后者看着能点，实则埋了三颗雷：

• 禁用 JavaScript 时完全不可用；而 <a></a> 天然降级为纯链接
• 不支持中键新标签页、右键复制链接、history.pushState 等原生导航能力
• 键盘用户 Tab 到按钮后按回车，可能触发两次跳转（一次是 button 默认提交，一次是 JS 跳转），尤其当父容器有 <form></form> 时

如果你需要点击后执行 JS（比如埋点），正确做法是：<a href="/post/123" onclick="trackClick(); return true;"></a>，并确保 trackClick() 不阻塞跳转。

最易被忽略的一点：所有 <article></article> 必须至少含一个标题级元素（<h2></h2>～<h4></h4>）或 <header></header>，否则语义链断裂，辅助技术和爬虫会把它当普通段落处理。别为了“样式统一”把标题降级成 <p class="title"></p>。