HTML5怎么用time标签标注时间_datetime属性格式【教程】

time 标签的 datetime 属性必须严格使用 ISO 8601 格式,如“2025-10-05”或“2025-10-05T14:30:22+08:00”,否则语义失效;显示文本可任意(如“今天上午九点”),但 datetime 必须为确定的绝对时间,不可用“今天”等相对表述;无 datetime 属性则 time 标签无机器可读语义。

time 标签的 datetime 属性必须用 ISO 8601 格式

datetime 属性不是随便写个“2025-10-5”或“10/5/2025”就能生效的。浏览器只认严格符合 ISO 8601 的字符串,否则语义丢失、屏幕阅读器无法识别、搜索引擎可能忽略时间信息。

常见错误包括:"2025-5-10"(月/日没补零)、"2025/10/05"(用了斜杠)、"2025-10-05 14:30"(缺 T 分隔符和时区)。正确写法必须是:

  • "2025-10-05"(日期)
  • "2025-10-05T14:30"(本地时间,隐含时区,不推荐)
  • "2025-10-05T14:30:22Z"(UTC 时间)
  • "2025-10-05T14:30:22+08:00"(东八区明确偏移)

显示文本可以和 datetime 完全不同

的核心价值在于分离「机器可读时间」和「人类可读文案」。显示内容(即标签内文字)可以是中文、缩写、甚至带单位,只要 datetime 属性合规即可。

比如下面这段完全合法:



注意:datetime 里不能写“今天”“上周五”这类相对表述——它必须是确定的、可解析的绝对时间点。

JavaScript 动态生成 datetime 值要小心时区

new Date().toISOString() 最安全,它直接返回带 Z 的 UTC 字符串;但若想用本地时区,别直接拼接 getFullYear() 等方法——容易漏补零、错算时区偏移。

推荐做法:

  • 需要 UTC:用 date.toISOString()
  • 需要本地带偏移:用 date.toLocaleString("sv-SE", { timeZoneName: "short" }) 不行,得手动构造;更稳的是用 Intl.DateTimeFormat 或第三方库如 date-fnsformatISO{ format: "extended" }
  • 避免 date.toString()date.toUTCString() ——它们不是 ISO 8601 格式,不能塞进 datetime

不加 datetime 属性的 time 标签几乎没用

只写 是无效的。没有 datetime,这个标签对机器来说就是普通文字,起不到时间语义化作用,Accessibility 和 SEO 都不认。

另外注意:datetime 是唯一允许的属性,classid 可以加,但 data-*aria-* 不能替代它的功能。

真正要用好 ,关键就一条:先确保 datetime 是机器能无歧义解析的 ISO 字符串,其余都是次要的。漏掉这步,其他都白搭。