<time>-日期/时间表示

<time> 是 HTML5 新增的语义化标签，用于明确标记日期或时间内容。它不仅能提升代码可读性，还能为机器（如搜索引擎、屏幕阅读器）提供结构化数据支持。

<time> 的基本语法

<time> 标签通过 datetime 属性提供机器可读的标准化时间格式，而标签内的内容则展示人类可读的日期或时间。基本结构如下：

<time datetime="YYYY-MM-DDThh:mm:ss±hh:mm">显示内容</time>

其中 datetime 遵循 ISO 8601 格式标准。例如：

<time datetime="2023-10-05">2023年10月5日</time>
<time datetime="15:30">下午3点半</time>
<time datetime="2023-10-05T15:30+08:00">2023年国庆假期下午3点半</time>

datetime 属性的详细规则

1. 纯日期格式

<time datetime="2023-10-05">十月的第一个周四</time>

• 年：4位数字
• 月：01-12
• 日：01-31

2. 纯时间格式

<time datetime="15:30:45.250">三点半</time>

• 时：00-23
• 分：00-59
• 秒：00-59
• 毫秒：可选，用小数点分隔

3. 日期时间组合

<time datetime="2023-10-05T15:30">国庆节下午茶时间</time>

• 用大写字母 T 分隔日期和时间

4. 时区表示

<time datetime="2023-10-05T15:30+08:00">北京时间下午3点半</time>

• +08:00 表示东八区
• Z 表示 UTC 时间

实际应用场景

新闻发布时间标注

<p>
  最新消息发布于
  <time datetime="2023-10-05T08:00+08:00">今天早上8点</time>
</p>

活动倒计时

结合 JavaScript 动态计算：

<time id="countdown" datetime="2023-12-31T23:59:59"></time>

<script>
  const target = new Date('2023-12-31T23:59:59');
  setInterval(() => {
    const now = new Date();
    const diff = target - now;
    document.getElementById('countdown').textContent = 
      `${Math.floor(diff/(1000*60*60*24))}天${Math.floor((diff/(1000*60*60))%24}小时`;
  }, 1000);
</script>

历史事件时间轴

<ul>
  <li>
    <time datetime="1969-07-20">1969年7月20日</time>
    - 人类首次登月
  </li>
  <li>
    <time datetime="1989-11-09">1989年11月9日</time>
    - 柏林墙倒塌
  </li>
</ul>

与微数据的结合使用

通过 itemprop 属性增强 SEO：

<div itemscope itemtype="http://schema.org/Event">
  <h2 itemprop="name">开发者大会</h2>
  <time itemprop="startDate" datetime="2023-11-15T09:00">11月15日上午9点</time>
  至
  <time itemprop="endDate" datetime="2023-11-17T18:00">11月17日下午6点</time>
</div>

样式定制示例

<time> 标签可以像其他 HTML 元素一样添加样式：

<style>
  time {
    background-color: #f0f8ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
  }
  time:hover {
    background-color: #e1f5fe;
  }
</style>

<p>
  会议时间：
  <time datetime="2023-10-10T14:00">10月10日下午2点</time>
</p>

浏览器兼容性注意事项

虽然现代浏览器都支持 <time> 标签，但在旧版 IE 中需要做兼容处理：

<!--[if lt IE 9]>
  <script>
    document.createElement('time');
  </script>
<![endif]-->

与其它时间相关元素的对比

与 <data> 标签的区别

<!-- 通用数据标注 -->
<data value="12345">订单编号：12345</data>

<!-- 专门的时间标注 -->
<time datetime="2023-10-05">今天</time>

与 <span> 的语义差异

<!-- 无语义 -->
<span>2023年10月5日</span>

<!-- 有明确时间语义 -->
<time datetime="2023-10-05">2023年10月5日</time>

动态时间更新案例

实现一个自动更新的"最近编辑时间"：

<time id="lastModified" datetime=""></time>

<script>
  const timeElement = document.getElementById('lastModified');
  const now = new Date();
  
  timeElement.setAttribute('datetime', now.toISOString());
  timeElement.textContent = `最后更新：${now.toLocaleString()}`;
  
  // 每分钟更新一次
  setInterval(() => {
    const updated = new Date();
    timeElement.textContent = `最后更新：${updated.toLocaleString()}`;
  }, 60000);
</script>

国际化时间处理

针对不同地区显示本地化时间格式：

<time datetime="2023-12-25T00:00Z" id="xmas"></time>

<script>
  const xmas = document.getElementById('xmas');
  const date = new Date(xmas.getAttribute('datetime'));
  
  xmas.textContent = new Intl.DateTimeFormat(navigator.language, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZoneName: 'short'
  }).format(date);
</script>

日历事件的完整示例

创建一个带有时区转换功能的会议邀请：

<div class="event">
  <h3>线上技术分享会</h3>
  <p>
    时间：
    <time datetime="2023-11-20T19:00+08:00" id="event-time">
      2023年11月20日 19:00 (GMT+8)
    </time>
  </p>
  <button onclick="convertTimezone()">转换为我的时区</button>
</div>

<script>
  function convertTimezone() {
    const timeElement = document.querySelector('#event-time');
    const datetime = timeElement.getAttribute('datetime');
    const localTime = new Date(datetime).toLocaleString([], {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZoneName: 'short'
    });
    timeElement.textContent = localTime;
  }
</script>