<time> 标签必须配合 datetime 属性使用,值需符合 ISO 8601 格式(如 2024-05-20 或 2024-05-20T14:30:00+08:00),仅包裹文本无效;推荐用于标注博客“最后修改时间”或“发布日期”,并可通过 aria-label 区分语义,服务端生成时须确保时区明确、格式规范。

<time> 标签是 HTML5 中专门用于标记机器可读时间信息的语义化元素。在博客文章中,用它包裹“最后修改时间”不仅提升可访问性,还能帮助搜索引擎、日历工具或阅读器准确识别时间含义。
基本用法:必须提供 datetime 属性
仅用 <time> 包裹文字(如 <time>2024年5月20日</time>)是无效的——它缺乏标准化的时间值,无法被程序解析。正确做法是通过 datetime 属性提供符合 ISO 8601 格式 的时间字符串:
- 推荐写法(含时区,最严谨):
<time datetime="2024-05-20T14:30:00+08:00">2024年5月20日 14:30</time> - 简化写法(仅日期,适合不强调具体时刻的场景):
<time datetime="2024-05-20">2024年5月20日</time> - 避免写法:
<time>上周三更新</time>(无datetime,且内容非规范时间)
在博客文章中合理标注“最后修改时间”
通常放在文章元信息区域(如标题下方或文末),并明确说明其含义,例如:
<p>最后更新于:<time datetime="2024-05-20T14:30:00+08:00">2024年5月20日 14:30</time></p>- 若使用英文界面,可保持
datetime不变,仅改变显示文本:<time datetime="2024-05-20T14:30:00+08:00">Updated on May 20, 2024</time> - 不要与发布日期混淆;如需同时展示,建议分别用两个
<time>元素,并通过pubdate(已废弃)或上下文区分——现代做法靠属性名或 ARIA 标注,例如:<time datetime="2024-04-10" aria-label="Published on April 10, 2024">发布于 2024-04-10</time><time datetime="2024-05-20" aria-label="Last modified on May 20, 2024">更新于 2024-05-20</time>
动态生成时注意时区与格式一致性
服务端渲染(如 PHP、Node.js)或静态站点生成器(如 Hugo、Jekyll)输出 datetime 值时,应确保:
立即学习“前端免费学习笔记(深入)”;
- 使用协调世界时(UTC)或本地时区并显式标注偏移(如
+08:00),避免歧义 - 避免用 JavaScript 动态插入
datetime值(影响 SEO 和离线阅读),优先服务端生成 - 中文站点常见错误:用
"2024/05/20"或"2024年5月20日"直接填入datetime—— 这不符合标准,会导致解析失败
辅助理解:浏览器不会自动美化 time 标签
<time> 是纯语义标签,浏览器默认不改变其样式或行为。如需视觉优化,可用 CSS 控制外观,例如:
也可结合 title 属性增强提示:<time datetime="2024-05-20T14:30:00+08:00" title="最后修改时间:2024年5月20日 14:30">2024-05-20</time>



















