用 article 而不是 div 包裹每条帖子，因其语义明确表达“独立可分发内容单元”，能提升 SEO、RSS 订阅和屏幕阅读器体验；div 无语义，会导致解析失败、播报不准和抓取错乱。
用 article 而不是 div 包每条帖子
语义错位会直接拖累 SEO、RSS 订阅和屏幕阅读器体验。浏览器和爬虫靠标签理解内容结构，div 是无意义的容器，而 article 明确表达“这是独立可分发的内容单元”。Discuz! 和 Flarum 的模板里也默认用 article 套帖子，不是巧合。
-
article自带隐式 ARIA role="article"，辅助技术能准确播报“第3篇文章”而非“第3个区块” - RSS 解析器依赖
article或section提取条目，用div会导致抓取失败或内容错乱 - 别在
article外再套一层div class="post-item"——多余嵌套增加渲染开销，也干扰 CSS 选择器精度
time 标签必须带 datetime 属性
“2小时前”这类相对时间纯属前端展示层的事，HTML 源码里只允许存机器可读的 ISO 8601 时间戳。否则排序、缓存失效、多语言切换全会出问题。
- 正确写法：
<time datetime="2026-08-03T14:22:17Z">2小时前</time> - 错误写法：
<time>2小时前</time>（无datetime，等同于没写） - PHP 动态生成时，用
date('c', $timestamp)输出，别手拼字符串——c格式自动带时区，避免 GMT/UTC 混淆
缩略图 img 必须声明 width 和 height
不设尺寸会导致布局抖动（layout shift），尤其在滚动加载新帖子时，卡片高度突变会让点赞按钮跳走、输入框失焦，iOS 上甚至触发键盘意外收起。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 哪怕用 CSS 控制最终宽高，HTML 中仍要写
<img src="..." width="320" height="180"> - 搭配
loading="lazy"和srcset：移动端加载小图，桌面加载高清图，但尺寸属性值按最大可能尺寸设（防抖动） - 禁用
background-image实现缩略图——它无法被右键保存、不进 alt 流程、暗色模式下无法响应prefers-color-scheme
标题链接必须用 a，别用 button + onclick
标题是导航行为，不是操作动作。用 button 模拟跳转，会切断中键新标签页、右键复制链接、浏览器前进后退、SEO 索引等基础链路。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<a href="/post/123">如何配置 Discuz! 缓存</a> - 错误：
<button onclick="location.href='/post/123'">如何配置 Discuz! 缓存</button> - 如果需 JS 干预（比如埋点），在
a上加事件监听，但别阻止默认行为：a.addEventListener('click', () => track('post_click'))
最常被忽略的其实是时间戳和图片尺寸这两项——它们不报错、不阻断功能，但上线后首屏性能掉 30%、无障碍测试挂掉、用户抱怨“点着点着就点歪了”，根源往往就在这两个看似无关紧要的属性上。
