您现在的位置是：网站首页 > <time>-日期/时间表示文章详情

<time>-日期/时间表示

陈川【 HTML 】 34711人已围观 3253字

<time> 标签用于在HTML中表示日期或时间，既可以作为机器可读的数据，也能以人类友好的方式显示。它支持多种格式，包括日期、时间、日期时间组合，甚至时区偏移量。

`<time>` 标签的基本语法

<time> 标签的基本语法如下：

<time datetime="机器可读的日期/时间">人类可读的日期/时间</time>

其中：

datetime 属性是必需的，用于提供机器可读的日期或时间。
标签内的内容是可选的人类可读的日期或时间表示。

如果省略标签内的内容，浏览器会直接显示 datetime 的值。

`datetime` 属性的格式

datetime 属性支持多种日期和时间格式，以下是常见的几种：

日期格式

年-月-日：YYYY-MM-DD

<time datetime="2023-10-05">2023年10月5日</time>

年月日（无分隔符）：YYYYMMDD

<time datetime="20231005">2023年10月5日</time>

时间格式

小时:分钟:秒：HH:MM:SS

<time datetime="14:30:00">下午2点30分</time>

小时:分钟：HH:MM

<time datetime="14:30">下午2点30分</time>

日期时间组合

日期 + 时间（带分隔符T）：YYYY-MM-DDTHH:MM:SS

<time datetime="2023-10-05T14:30:00">2023年10月5日下午2点30分</time>

日期 + 时间（无分隔符T）：YYYYMMDDTHHMMSS

<time datetime="20231005T143000">2023年10月5日下午2点30分</time>

时区偏移

带时区偏移：YYYY-MM-DDTHH:MM:SS±HH:MM

<time datetime="2023-10-05T14:30:00+08:00">北京时间2023年10月5日下午2点30分</time>

常见用例

1. 显示发布日期

<p>本文发布于<time datetime="2023-10-05">2023年10月5日</time>。</p>

2. 显示事件时间

<p>会议时间：<time datetime="2023-10-10T09:00:00">2023年10月10日上午9点</time>。</p>

3. 显示持续时间

<time> 也可以用于表示持续时间，格式为 PnYnMnDTnHnMnS：

<p>任务耗时：<time datetime="P1DT2H30M">1天2小时30分钟</time>。</p>

结合JavaScript动态显示时间

可以通过JavaScript动态生成时间并插入到 <time> 标签中：

<time id="current-time" datetime=""></time>

<script>
  const now = new Date();
  const timeElement = document.getElementById('current-time');
  timeElement.setAttribute('datetime', now.toISOString());
  timeElement.textContent = now.toLocaleString();
</script>

浏览器兼容性与样式

<time> 标签在所有现代浏览器中均得到支持。默认情况下，它不会应用任何特殊样式，但可以通过CSS自定义：

time {
  color: #0066cc;
  font-weight: bold;
}

语义化与SEO优势

使用 <time> 标签有助于提升网页的语义化，使搜索引擎更容易理解页面中的时间信息。例如：

<article>
  <h1>最新公告</h1>
  <p>发布时间：<time datetime="2023-10-05T08:00:00Z">2023年10月5日</time></p>
  <p>内容...</p>
</article>

与其他HTML元素的结合

<time> 可以嵌套在其他元素中，比如 <span> 或 <p>：

<p>
  活动截止日期：
  <span class="highlight">
    <time datetime="2023-12-31">2023年12月31日</time>
  </span>
</p>

处理不同时区的时间

如果需要显示不同时区的时间，可以通过 datetime 属性指定时区偏移：

<p>
  纽约时间：
  <time datetime="2023-10-05T09:00:00-04:00">2023年10月5日上午9点（EST）</time>
</p>

动态更新时间的示例

以下是一个动态更新时间的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>动态时间示例</title>
  <style>
    #live-clock {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>
<body>
  <p>当前时间：<time id="live-clock" datetime=""></time></p>

  <script>
    function updateClock() {
      const now = new Date();
      const clockElement = document.getElementById('live-clock');
      clockElement.setAttribute('datetime', now.toISOString());
      clockElement.textContent = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    }

    updateClock();
    setInterval(updateClock, 1000);
  </script>
</body>
</html>

上一篇： <sup>-上标文本

下一篇： <header>-页眉或区块头