HTML time 标签

HTML time 语法

在 HTML 中,time 标签用于包含日期时间内容,以提高页面的语义化,从而让网页对浏览器、搜索引擎、爬虫等机器更加友好。

语法:

<time datetime="供机器读的日期时间">供用户读的日期时间</time>

说明:

datetime 属性是必需的,它用于指定日期时间,并且格式需要遵循 ISO 8601 标准,比如:

  • 2025-05-20:只指定日期,不指定时间。
  • 13:14:30:只指定时间,不指定日期。
  • 2025-05-20T13:14:30+08:00:同时指定日期和时间,它表示 2025 年 5 月 20 日 13 时 14 分 30 秒(+08:00 时区)。

datetime 属性中的日期时间是提供给搜索引擎看的,而 time 标签内的日期时间是提供给用户看的,两者内容可以一样也可以不一样。time 标签与 datetime 属性的关系,有点类似于 img 标签与 alt 属性的关系。

除了 datetime 这个主要属性之外,time 标签还支持以下属性:

  • title:用于指定时间或日期的标题,作为鼠标悬停时的提示信息。
  • pubdate(已废弃):指示内容的发布时间。

注意: 一定要指定 datetime 属性,否则 time 标签的内容会被视为普通文本,而不会被识别为时间信息。

HTML time 摘要

属于 HTML 语义化
使用频率
兼容性 查看
官方文档 查看
MDN 查看

HTML time 示例

接下来,我们通过一个简单的例子来讲解一下 HTML time 标签是如何使用的。

示例:time 标签的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>这篇文章发表于:<time datetime="2025-05-20">2025年5月20日</time></p>
</body>
</html>

页面效果如下图所示。

HTML time标签示例

上一篇: address

下一篇: small

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号