1. 引言
在 HTML5 中，<time>元素是一个极具实用价值的语义化标签。它专门用于标记日期和时间，让浏览器、搜索引擎以及其他程序能够机器可读地理解页面中的时间信息，同时保持对人类读者的友好展示。
本文将带你全面了解<time>元素的定义、属性、使用场景以及注意事项，帮助你写出更规范、更语义化的 HTML 代码。
2. 什么是 <time> 元素
<time>元素是 HTML5 新增的语义化标签，用于表示一个特定的时间段或日期时间。它的核心价值在于：
- 机器可读：通过
datetime属性提供标准化的时间格式，供程序解析。 - 人类可读：元素内的文本内容以自然语言展示给用户。
例如：
<p>会议定于<timedatetime="2026-10-01T09:00">10 月 1 日上午 9 点</time>举行。</p>在这个例子中，用户看到的是「10 月 1 日上午 9 点」，而程序读取的是2026-10-01T09:00这个标准时间戳。
3. datetime 属性详解
datetime属性是<time>元素的核心，它定义了机器可读的时间值。该属性支持以下几种格式：
3.1 有效日期字符串
<timedatetime="2026-10-01">2026 年 10 月 1 日</time>3.2 有效日期时间字符串
<timedatetime="2026-10-01T09:30">2026 年 10 月 1 日上午 9 点 30 分</time>3.3 带时区的时间
<timedatetime="2026-10-01T09:30+08:00">北京时间上午 9 点 30 分</time>3.4 有效时间字符串
<timedatetime="09:30">上午 9 点 30 分</time>3.5 有效时长字符串
<timedatetime="PT2H30M">2 小时 30 分钟</time>注意：
datetime属性必须使用上述标准格式，否则该属性会被忽略，元素退化为普通文本容器。
4. 常见使用场景
4.1 文章发布时间
<article><h1>HTML 语义化最佳实践</h1><p>发布于<timedatetime="2026-09-30">2026 年 9 月 30 日</time></p></article>4.2 事件与日程
<p>开发者大会将于<timedatetime="2026-11-15T10:00">11 月 15 日上午 10 点</time>开幕。</p>4.3 倒计时与时长
<p>本次课程时长<timedatetime="PT45M">45 分钟</time>。</p>4.4 生日与纪念日
<p>我的生日是<timedatetime="1995-06-18">6 月 18 日</time>。</p>5. 与 <time> 相关的语义化对比
| 元素 | 用途 | 是否机器可读 |
|---|---|---|
<time> | 标记日期/时间 | ✅ 是 |
<data> | 标记任意机器可读数据 | ✅ 是 |
<span> | 普通文本容器 | ❌ 否 |
当时间信息需要被程序读取时，优先使用<time>；如果只是普通文本，使用<span>即可。
6. 浏览器支持与无障碍
<time>元素在现代浏览器中拥有广泛的支持，包括 Chrome、Firefox、Safari、Edge 等。对于屏幕阅读器，<time>元素默认不会改变朗读方式，但结合datetime属性可以提供更准确的时间信息。
7. 注意事项
- 不要滥用：只有真正表示时间语义时才使用
<time>，不要用它包裹普通文本。 - 格式必须规范：
datetime属性值必须符合标准格式，否则无效。 - 内容与属性一致：元素内的文本内容应与
datetime表示的时间一致，避免误导。 - 旧浏览器兼容：虽然支持广泛，但在极老浏览器中可能被当作普通内联元素，不影响布局。
8. 总结
<time>元素是 HTML5 语义化体系中的重要一环。通过它，我们可以让时间信息同时具备人类可读与机器可读的双重属性，提升页面的可访问性和可维护性。掌握它的正确用法，是写出高质量 HTML 代码的关键一步。
希望本文能帮助你更好地理解和使用<time>元素。如果你有任何疑问，欢迎在评论区交流讨论！
