PHP小码农

Appearance

time 时间 ​

<time> 标签用于表示日期和时间，并通过 datetime 属性提供机器可读的格式。这对于搜索引擎、日历应用等需要解析日期时间的工具非常有用。

前置知识

阅读本节前，建议先了解：q 行内引用

基础概念 ​

<time> 是 HTML5 中的语义标签，用于标记特定的时间或日期。它允许人类可读的时间和机器可读的时间并存——用户看到的是友好的文本描述，机器通过 datetime 属性获取精确的时间值。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>time 示例</title>
</head>
<body>
  <!-- 日期 -->
  <p>发布日期：<time datetime="2025-01-15">2025年1月15日</time></p>

  <!-- 时间 -->
  <p>会议时间：<time datetime="14:30">下午 2:30</time></p>

  <!-- 日期 + 时间 -->
  <p>活动：<time datetime="2025-03-20T19:00">3月20日晚7点</time></p>
</body>
</html>

详细说明 ​

datetime 属性格式 ​

格式示例说明
日期2025-01-15年-月-日
时间14:30时:分
日期+时间2025-01-15T14:30T 分隔
带时区2025-01-15T14:30:00+08:00UTC+8
时长PT2H30M2小时30分钟

time 的常见用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>time 常见用法</title>
</head>
<body>
  <h1>time 标签的常见用法</h1>

  <!-- 文章发布时间 -->
  <article>
    <footer>
      发布于 <time datetime="2025-01-15">2025年1月15日</time>
    </footer>
  </article>

  <!-- 活动时间 -->
  <p>会议定于 <time datetime="2025-02-01T09:00+08:00">2月1日上午9点</time> 开始。</p>

  <!-- 时长 -->
  <p>视频时长：<time datetime="PT1H30M">1小时30分钟</time></p>

  <!-- 更新时间 -->
  <p>最后更新：<time datetime="2025-01-15T16:00">今天下午4点</time></p>
</body>
</html>

不需要 datetime 的情况 ​

当 <time> 的文本内容本身就是一个有效的日期时间格式时，可以省略 datetime 属性：

html
<!-- 文本已是有效格式，不需要 datetime -->
<time>2025-01-15</time>

<!-- 文本不是标准格式，需要 datetime -->
<time datetime="2025-01-15">2025年1月15日</time>

实战示例 ​

博客文章时间线 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>博客时间线</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .post { margin: 1.5rem 0; padding-bottom: 1rem; border-bottom: 1px solid #eee; }
    .post-date { color: #888; font-size: 0.875rem; }
  </style>
</head>
<body>
  <h1>最新文章</h1>
  <article class="post">
    <h2>HTML5 新特性详解</h2>
    <time class="post-date" datetime="2025-01-15">2025年1月15日</time>
    <p>本文介绍了 HTML5 中最重要的新特性。</p>
  </article>
  <article class="post">
    <h2>CSS Grid 布局指南</h2>
    <time class="post-date" datetime="2025-01-10">2025年1月10日</time>
    <p>CSS Grid 是目前最强大的布局方案之一。</p>
  </article>
</body>
</html>

注意事项 ​

  • datetime 属性的值必须是有效的 ISO 8601 格式
  • <time> 不应用于不表示时间的文本
  • 时长使用 ISO 8601 duration 格式（PT 开头）

最佳实践 ​

  1. 文章日期使用 time：发布时间、更新时间
  2. 提供 datetime 属性：当文本不是标准格式时
  3. 用于活动时间：日程、会议等
  4. 用于时长：视频时长、阅读时长等

下一节

继续学习：ruby 注音

参考链接 ​