必须使用标签来标记具体可解析的时间点或时间段,如文章发布时间、活动截止日等;datetime属性须为yyyy-mm-dd或yyyy-mm-ddthh:mm:ss等标准格式,否则机器无法识别。

<time></time> 标签不是“可有可无的装饰”,它让时间变成机器可读的数据——搜索引擎、屏幕阅读器、日历工具都靠它识别日期和时间。不用它,<span></span> 或纯文本写 2024-06-15,对人没问题,对程序就是一串字符。
什么时候必须用 <time></time>?
只要页面上出现**具体可解析的时间点或时间段**,且这个时间对内容逻辑有意义(比如文章发布时间、活动截止日、视频时长),就该用 <time></time>。不是所有数字加“年月日”都要套,但凡你写了 2024年6月15日 且它代表真实时间,就值得语义化。
- 博客文章的
pubdate:用<time datetime="2024-06-15">2024年6月15日</time> - 倒计时文案:
<time datetime="2024-12-31T23:59:59">还有199天</time>(注意datetime值必须是机器可解析格式) - 避免这样写:
<span>2024-06-15</span>—— 丢掉了时间本质
datetime 属性怎么填才不被忽略?
浏览器不渲染 datetime,但它决定语义是否生效。填错格式,等于没写。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF,自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页,适用于看板、报表、网页和交互图表转 PDF。
- 日期单独用:必须是
YYYY-MM-DD(如2024-06-15),2024/06/15或15-06-2024都无效 - 带时间:用
YYYY-MM-DDThh:mm:ss(如2024-06-15T14:30),T不能省,时区建议显式写Z或+08:00 - 只写年份?可以,但仅限
datetime="2024";datetime="24"或datetime="二零二四"不识别 - 常见坑:
<time datetime="6/15/2024">6月15日</time>→ 机器完全无法解析
和 JavaScript 的 Date 对象能直接互通吗?
不能自动互通,但可以安全转换。HTML 的 <time></time> 是静态语义容器,JS 读取的是 datetime 字符串,需手动转成 Date。
- 正确做法:
const timeEl = document.querySelector('time'); const date = new Date(timeEl.dateTime); -
timeEl.dateTime返回的就是datetime属性值,不是渲染文本;想获取“2024年6月15日”得用timeEl.textContent - 别依赖
innerHTML解析时间——用户可能改了显示文案(比如写成“昨天”),但datetime还在,这才是可信源 - SSR 场景下更关键:服务端输出的
datetime是唯一可靠时间源,JS 初始化时应优先信任它
真正难的不是写对标签,而是坚持在每次出现时间的地方,下意识问一句:“这个值能不能被机器理解?”——漏掉一个 datetime,就少了一处结构化数据。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










