时间标签 - <time>

什么是 <time> 标签？

<time> 是HTML5引入的语义化标签，用于定义日期或时间。它允许将人类可读的日期/时间与机器可读的格式关联起来，有助于搜索引擎和辅助技术更好地理解时间信息。

基本语法

仅包含时间文本

html 
<time>2026年2月6日</time>

使用 datetime 属性

html 
<time datetime="2026-02-06">2026年2月6日</time>

核心属性

datetime 属性

datetime 属性用于指定机器可读的日期或时间，格式必须符合ISO 8601标准。这使得搜索引擎和辅助技术能够准确解析时间信息。

典型用法

日期表示

html 
<!-- 完整日期 -->
<time datetime="2026-02-06">2026年2月6日</time>

<!-- 年月 -->
<time datetime="2026-02">2026年2月</time>

<!-- 年 -->
<time datetime="2026">2026年</time>

时间表示

html 
<!-- 具体时间 -->
<time datetime="14:30">下午2:30</time>

<!-- 带时区的时间 -->
<time datetime="14:30+08:00">下午2:30 (UTC+8)</time>

<!-- 24小时制 -->
<time datetime="14:30:45">14:30:45</time>

日期和时间

html 
<time datetime="2026-02-06T14:30">2026年2月6日 下午2:30</time>

<!-- 带时区 -->
<time datetime="2026-02-06T14:30:00+08:00">2026年2月6日 下午2:30 (UTC+8)</time>

持续时间

html 
<!-- 持续时间：2小时30分钟 -->
<time datetime="PT2H30M">2小时30分钟</time>

<!-- 持续时间：3天 -->
<time datetime="P3D">3天</time>

事件时间

html 
<article>
  <h2>会议通知</h2>
  <p>会议将于 <time datetime="2026-02-10T10:00">2026年2月10日上午10点</time> 举行。</p>
</article>

全局属性

<time> 标签支持所有HTML全局属性：

属性 描述
class 为元素指定一个或多个类名
id 为元素指定唯一ID
style 为元素指定内联样式
title 提供有关元素的额外信息

最佳实践

  1. 始终使用 datetime 属性：即使内容已经是机器可读的格式，也建议添加 datetime 属性以确保兼容性

  2. 使用标准格式：datetime 属性值必须符合ISO 8601标准格式

  3. 保持一致性：在网站中使用统一的日期/时间表示方式

  4. 增强可访问性：对于复杂的时间表示，使用 datetime 属性可以帮助辅助技术用户理解

浏览器兼容性

  • Chrome 6+
  • Firefox 4+
  • Safari 5+
  • Opera 11.1+
  • IE 9+

总结

<time> 标签是HTML5中一个重要的语义化标签，它提供了机器可读的日期/时间表示，有助于：

  • 提高搜索引擎优化，使搜索引擎更好地理解时间相关内容
  • 改善可访问性，帮助辅助技术用户准确理解时间信息
  • 增强代码的可读性和可维护性
  • 支持未来的Web技术和标准，如日历集成等
最后更新：2026-02-07