必须用 article 包裹每条帖子，标题用 h2～h4、时间用带 ISO 8601 datetime 的 time 标签、缩略图用带 loading="lazy" 和 srcset 的 img，否则后续所有优化均失效。
直接用语义化 HTML 标签搭出可访问、可索引、响应式友好的帖子列表，不需要框架或 JS —— 关键是别写错结构，否则后续所有 CSS 都在修 bug。
每条帖子必须用 article 包裹，不是 div
浏览器和爬虫靠 article 识别“这是独立内容项”，RSS 订阅、屏幕阅读器跳转、搜索引擎摘要提取都依赖它。写成 <div class="post"> 看似省事，但会丢失语义层级，导致：
- 屏幕阅读器无法把整条帖子当一个导航单元
- 某些 CMS 或静态生成器无法自动提取摘要
- 后续加 <code>aria-labelledby 或微数据时逻辑断裂
article 内部可自由嵌套 header、section、footer，但不要把它塞进 ul 里 —— 列表容器和内容项语义不同，混用会触发浏览器自动修复 DOM。
header 里放标题和元信息，禁用 p 套 strong
标题必须是 h2～h4（按页面整体层级定），不能用 <p><strong>标题</strong></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 模拟 —— 这样既没语义，又会让大纲工具读不出层级。时间必须用 <time datetime="2026-08-01T10:22:00Z">2 小时前</time>：
- datetime 属性值必须是 ISO 8601（如 "2026-08-01T10:22:00Z"），不能写 "2026/08/01" 或 "昨天"
- 视觉上显示“2 小时前”可以，但那是 JS 动态算的，HTML 里只留机器可读时间戳
- 没 datetime 的 time 标签等于没写，浏览器不识别，排序功能直接失效
缩略图用 img，别用 background-image
论坛首页首屏性能敏感，一张未优化的图就能拖垮 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" alt="简述HTML如何快速搭建论坛帖子列表排版布局" >
- 禁用 background-image 实现缩略图：它无法右键保存、不进 alt 流程、暗色模式下不能通过 prefers-color-scheme 切换背景色
标题跳转用 a，别用 button + onclick
标题是导航动作，不是操作按钮：
- a 天然支持中键新标签页、右键复制链接、history.pushState、SEO 索引
- button 模拟跳转会破坏键盘焦点流，屏幕阅读器读作“按钮”而非“链接”，且默认不触发 pushState
- 如果加了 onclick="location.href='...'" 却没 event.preventDefault()，可能触发两次跳转（一次 JS，一次默认行为）
- 所有跳转链接都应有明确 href，哪怕只是 #post-123，避免空 href="#" 导致页面顶部跳转
真正卡住人的不是 CSS 写不写得漂亮，而是 article 有没有包对、time 有没有 datetime、img 有没有 loading="lazy" —— 这三处写错，后面调样式全是白忙。
