结论：用 <article> 套 <time> + CSS Flex/Grid 实现倒序，时间戳必须用 ISO 8601 格式写死在 datetime 属性中；HTML 结构需语义化，每篇博客用 <article> 包裹，标题用 <h2>，发布时间严格使用 <time datetime="YYYY-MM-DD">，避免 JS 排序以保障 SEO、RSS 和首屏性能。
直接说结论：用 <article> 套 <time> + CSS Flex/Grid 控制倒序，别碰 JavaScript 排序；时间戳必须用 ISO 8601 格式写死在 datetime 属性里，否则 RSS 和搜索引擎会丢时间。
HTML 结构怎么组织文章卡片
核心是语义化 + 可读性优先。每篇博客用 <article> 包裹，不是 <div>；标题用 <h2>（别用 <h1>，首页只有一个主标题）；发布时间必须用 <time datetime="2024-05-20">May 20, 2024</time>，不能只写文字。
常见错误现象：
• 把时间写成 <p>2024/05/20</p> → 搜索引擎无法识别为日期
• 用 <span> 包时间 → 屏幕阅读器和爬虫忽略语义
• datetime 值写成 2024.05.20 或 2024-5-20 → 浏览器解析失败或降级为当前日期
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 时间字符串严格用
YYYY-MM-DD（如2024-05-20），带时分秒就补上T和Z（2024-05-20T14:30:00Z） - 卡片内顺序固定为：
<header>（含<h2>和<time>）→<p>摘要 →<footer>（可选分类/标签） - 不要在 HTML 里动态插入时间——静态生成时就写死，避免 JS 渲染导致 SEO 折损
CSS 实现时间倒序显示（不用 JS）
浏览器默认按 HTML 顺序从上到下渲染，所以“倒序”本质是把 DOM 顺序反过来写，再用 CSS 控制视觉流。Flex 是最稳的方案，Grid 次之，flex-direction: column-reverse 是关键。
性能影响：
• column-reverse 不触发重排，纯渲染层翻转，比 JS 排序快一个数量级
• 但会导致键盘 tab 顺序和屏幕阅读器顺序也倒过来——需加 tabindex 或用 aria-reversed 补偿（小众需求，多数博客可忽略）
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
display: flex; flex-direction: column-reverse;，卡片用<article>直接子元素 - 如果用 Grid，写
grid-auto-flow: row; order: -1;配合每个卡片的order属性递减（不推荐，维护成本高） - 禁止用
transform: scaleY(-1)翻转——内容镜像、点击坐标错乱、打印失效
为什么不能靠 JavaScript 排序文章列表
看似灵活，实则埋雷。JS 排序依赖客户端执行，而首页首屏内容对 SEO、LCP（最大内容绘制）、RSS 解析都极其敏感。
容易踩的坑：
- RSS 订阅器只读 HTML 源码，JS 排完的顺序它完全看不到 → 时间戳全变成页面生成时间
- Googlebot 早期版本不执行 JS，或延迟执行 → 首屏抓到的是未排序的旧文章
- LCP 元素可能变成最后一张图或最后一个标题，而非真正的最新文章卡片 → 核心指标变差
- 离线缓存时 JS 未加载，用户看到的是原始顺序（通常是最老的文章在顶）
唯一可接受的 JS 场景：用户点击“按热度排序”切换视图，且该操作不改变初始 HTML 结构。
静态生成时怎么保证 HTML 顺序就是倒序
如果你用 Hugo/Jekyll/Next.js 等工具，排序逻辑必须落在模板编译期，不是浏览器运行时。
参数差异举例：
- Hugo：用
{{ range sort .Site.RegularPages "Date" "desc" }}，不是.Site.Pages - Jekyll：在
_config.yml设defaults:+sort_by: date，模板里用{% for post in site.posts %}（默认已倒序） - 纯手写 HTML：把最新文章的
<article>写在最前面，手动维护——适合不到 10 篇的极简博客
兼容性提醒：所有现代浏览器支持 <time datetime> 和 flex-direction: column-reverse，IE11 及以下不支持后者，但 IE 用户基本不会访问个人博客首页——不必 polyfill。
真正容易被忽略的点：时间格式校验。哪怕只错一个字符（比如 2024-05-20T14:30:00+08:00 少了个冒号），<time> 的 datetime 属性就会失效，浏览器回退到元素文本内容，而那段文本大概率没被标记为日期语义。
