<time>标签的核心作用是向机器提供可解析的时间值,必须通过符合ISO 8601标准的datetime属性实现,且内容与属性需逻辑一致,不承担样式、本地化或时区转换功能。

<time> 标签不是用来“美化”或“自动格式化”时间的,它的唯一核心作用是:向机器(搜索引擎、爬虫、屏幕阅读器)提供一个可解析、可计算、可排序的时间值。不带 datetime 属性的 <time> 等同于普通 <span>,毫无语义价值。
必须写 datetime 属性,否则等于没写
浏览器不会报错,但所有依赖结构化数据的工具都会跳过它。常见无效写法包括:
-
<time>2024年3月15日</time>—— 没有datetime,机器无法识别这是哪一天 -
<time datetime="2024/03/15">3月15日</time>—— 斜杠分隔不符合 ISO 8601,new Date("2024/03/15")在 Safari 中可能返回Invalid Date -
<time datetime="2024-03-15 (周五)">3月15日(周五)</time>——datetime值里混入中文或括号,破坏机器可读性
正确写法只认三类严格格式:
- 日期型:
datetime="2024-03-15" - 日期时间型:
datetime="2024-03-15T14:30:00+08:00"(注意T和时区) - 周期型:
datetime="2024-W11-5"(第 11 周周五)、datetime="2024-03"(仅年月)
文本内容和 datetime 必须逻辑一致
标签内显示的文本是给人看的,datetime 是给机器读的,二者不能自相矛盾:
立即学习“前端免费学习笔记(深入)”;
- ✅
<time datetime="2024-03-15">3月15日(周五)</time> - ❌
<time datetime="2024-03-15">下周三</time>—— 2024-03-15 不一定是下周三 - ❌
<time datetime="2024-03-15">昨天</time>—— “昨天”是相对时间,但datetime是绝对时间点,需确保页面生成时仍匹配
动态页面建议服务端输出绝对 datetime,前端用 Intl.DateTimeFormat 渲染相对文本,且不修改 datetime 值。
别指望 time 标签做任何样式或本地化工作
<time> 是纯语义容器,无默认样式、不触发任何 JS 行为、不自动转换时区或语言:
- 它不会把
2024-03-15变成 “2024年3月15日” —— 这得靠 CSS 的::before或 JS 处理 - 它不会根据用户系统语言显示 “Mar 15” 或 “15 mars” —— 必须显式调用
Intl.DateTimeFormat - 它不支持嵌套块级元素:
<time><p>2024-03-15</p></time>违反 HTML 规范,部分解析器会降级处理
也别用它替代 <meta name="pubdate">:后者是文档级元数据,<time> 是内容中某个具体时间点的标记,用途不同。
最容易被忽略的一点:时区。省略时区(如 2024-03-15T14:30)会被当作本地时间解释,跨时区部署时,同一份 HTML 在东京和旧金山可能被解析为不同 UTC 时间 —— 务必显式带上 +09:00 或 Z。



















