HTML怎么标记过期内容_HTML time与del组合用法【说明】-html教程-PHP中文网

仅提供时间语义，不触发过期逻辑；需js比对datetime与当前时间并添加class，再用css控制样式，同时注意datetime格式规范与时区处理。

html怎么标记过期内容_html time与del组合用法【说明】

用 `<time></time>` 标记过期时间，但浏览器不自动处理过期逻辑

<time></time> 本身只是语义化容器，它不会让内容“自动消失”或触发样式变化。它的作用是告诉搜索引擎和辅助技术：“这个文本代表一个具体时间点”，比如 <time datetime="2023-01-01">2023年1月1日</time>。如果你希望视觉上体现“已过期”，必须配合 CSS 或 JS 手动控制显示状态。

用 `<del></del>` 表示内容已被删除，不是“过期”的等价替代

<del></del> 的语义是“该内容曾存在，但已被移除”，常用于修订稿、价格对比（如原价划掉）、法律条文修改等场景。它默认渲染为带删除线的文本，但不代表时间失效。直接套用 <del><time datetime="2023-01-01">…</time></del> 容易误导：屏幕阅读器会读作“已删除的时间”，而非“该活动已截止”。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

错误用法：<del>报名截止：<time datetime="2024-06-30">6月30日</time></del> —— 语义错位，内容没被删除，只是过了时效
正确思路：用 <time></time> 存时间，用 class 控制是否显示/加灰/加提示

真正实现“过期内容标记”，靠 JS 判断 + class 切换

HTML 不提供运行时时间判断能力，必须用 JS 比对 datetime 属性与当前时间。关键点在于：datetime 值必须是完整、可解析的格式（推荐 YYYY-MM-DD 或 YYYY-MM-DDTHH:MM），否则 Date.parse() 可能返回 NaN。

确保 <time></time> 有合法 datetime：<time datetime="2024-12-25T23:59">圣诞节活动</time>
JS 判断逻辑要处理时区：用 new Date(element.dateTime).getTime() ，避免本地时间偏差
别只改样式，考虑可访问性：给过期元素加 aria-hidden="true" 或 role="status" 提示

const times = document.querySelectorAll('time[datetime]');
times.forEach(el => {
  const dt = Date.parse(el.dateTime);
  if (!isNaN(dt) && dt 

<h3>CSS 配合时，<code>datetime</code> 值决定能否用 :has() 伪类</h3>
<p>目前（2024 年中）<code>:has()</code> 还不能基于属性值做时间比较，所以不能写 <code>time:has([datetime。只能靠 JS 注入 class 后再写样式规则。另外注意：<code>datetime</code> 属性值若含空格或非法字符（如 <code>"6月30日"</code>），CSS 选择器无法匹配，JS 解析也会失败。</code></p>