<time>仅提供时间语义，不触发过期逻辑；需JS比对datetime与当前时间并添加class，再用CSS控制样式，同时注意datetime格式规范与时区处理。
用 <time> 标记过期时间，但浏览器不自动处理过期逻辑
<time> 本身只是语义化容器，它不会让内容“自动消失”或触发样式变化。它的作用是告诉搜索引擎和辅助技术：“这个文本代表一个具体时间点”，比如 <time datetime="2023-01-01">2023年1月1日</time>。如果你希望视觉上体现“已过期”，必须配合 CSS 或 JS 手动控制显示状态。
用 <del> 表示内容已被删除，不是“过期”的等价替代
<del> 的语义是“该内容曾存在，但已被移除”，常用于修订稿、价格对比（如原价划掉）、法律条文修改等场景。它默认渲染为带删除线的文本，但不代表时间失效。直接套用 <del><time datetime="2023-01-01">…</time></del> 容易误导：屏幕阅读器会读作“已删除的时间”，而非“该活动已截止”。
- 错误用法：
<del>报名截止：<time datetime="2024-06-30">6月30日</time></del>—— 语义错位，内容没被删除，只是过了时效 - 正确思路：用
<time>存时间，用 class 控制是否显示/加灰/加提示
真正实现“过期内容标记”，靠 JS 判断 + class 切换
HTML 不提供运行时时间判断能力，必须用 JS 比对 datetime 属性与当前时间。关键点在于：datetime 值必须是完整、可解析的格式（推荐 YYYY-MM-DD 或 YYYY-MM-DDTHH:MM），否则 Date.parse() 可能返回 NaN。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保
<time>有合法datetime：<time datetime="2024-12-25T23:59">圣诞节活动</time> - JS 判断逻辑要处理时区：用
new Date(element.dateTime).getTime() < Date.now()，避免本地时间偏差 - 别只改样式，考虑可访问性：给过期元素加
aria-hidden="true"或role="status"提示
const times = document.querySelectorAll('time[datetime]');
times.forEach(el => {
const dt = Date.parse(el.dateTime);
if (!isNaN(dt) && dt < Date.now()) {
el.classList.add('expired');
}
});
CSS 配合时，datetime 值决定能否用 :has() 伪类
目前（2024 年中）:has() 还不能基于属性值做时间比较，所以不能写 time:has([datetime<="2024-06-01"]) { opacity: 0.5; }。只能靠 JS 注入 class 后再写样式规则。另外注意：datetime 属性值若含空格或非法字符（如 "6月30日"），CSS 选择器无法匹配，JS 解析也会失败。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
datetime="2024-06-30"、datetime="2024-06-30T18:00" - 危险写法：
datetime="6月30日"、datetime="2024/06/30"（部分浏览器解析不稳定） - 兼容性提醒：IE 完全不支持
<time>，老项目需降级 fallback
<time> 存的是“是什么”，<del> 表的是“改了什么”，而“过没过期”得靠 JS 算出来再告诉 DOM。最容易漏掉的是 datetime 格式校验和时区处理——看似写对了，实际比对结果是错的。 
