HTML无法自动归档话题列表，因它是静态标记语言；所有自动行为需JavaScript驱动并依赖后端时间戳；标签仅语义化时间，不触发任何逻辑。
HTML 本身不能自动归档或关闭话题列表——它只是静态标记语言，没逻辑、没状态、不响应数据变化。所有“自动归档”“即将关闭”这类行为，必须靠 JavaScript 驱动，且通常依赖后端提供的时间戳或状态字段。纯 HTML 写出来的所谓“预览”，只是固定文案，骗不了人，也骗不了用户。
为什么 <time></time> 标签不能自动归档
<time></time> 只负责语义化时间值，浏览器不会拿它去比对当前时间、触发隐藏或变灰。它既不监听系统时钟，也不执行任何判断逻辑。
- 常见错误现象：
<time datetime="2024-10-15">10月15日截止</time>看起来像倒计时，但页面一打开就定格，永远不更新 - 正确用法：仅作为机器可读的时间标注，供 SEO 或辅助技术识别，不是功能组件
- 如果硬要用它“模拟”状态，得配 JavaScript 定期检查
datetime值并手动修改父元素的class或hidden属性
用 document.querySelectorAll 批量处理话题卡片
假设你有一组话题卡片，结构类似 <article class="topic" data-closed-at="2024-10-20">...</article>，JavaScript 才是真正干活的：
- 先用
document.querySelectorAll(".topic[data-closed-at]")拿到所有带截止时间的卡片 - 对每个卡片，解析
data-closed-at为Date对象，和new Date()比较 - 过期就加
class="archived"，或设hidden属性；临近（比如3天内）可加class="closing-soon" - 注意时区：
new Date("2024-10-20")在部分浏览器解析为 UTC 零点，建议统一用new Date("2024-10-20T00:00:00")显式指定
服务端渲染更靠谱，但前端仍要兜底
如果话题状态由后端管理（比如 CMS 或 API 返回 status: "open" | "closing_soon" | "archived"），那优先在 HTML 输出时就写入对应 class 或属性：
立即学习“前端免费学习笔记（深入）”；
- 例如后端吐出
<article class="topic topic--archived"></article>，CSS 控制显示/隐藏 - 但用户可能刷新旧缓存页，或网络延迟导致状态未更新，所以前端 JS 仍需做一次校验并修正 DOM
- 别信“服务端全搞定就不用管前端”——时间类逻辑一旦涉及客户端本地时钟，就必须双端对齐
- 性能影响小，但兼容性要注意：
Intl.DateTimeFormat在老 IE 不支持，简单比较用getTime()更稳
真正麻烦的不是怎么写那几行 JS，而是时间字段的精度、时区归属、以及“关闭”到底指用户不可提交，还是连预览都该隐藏——这些语义必须前后端对齐，否则前端再努力也是修修补补。
