time 元素

以下是 Ty Strong 的客座文章。Ty 注意到 CSS-Tricks 上关于<time> 元素的信息非常少，我同意他的观点。不能让这种情况发生！Ty，请开始吧。

HTML 中的<time> 元素表示机器可读的日期、时间或持续时间。它可用于创建事件调度、存档和其他基于时间的函数。WordPress 在默认主题中使用 time 元素。Reddit 也使用 time 元素。

简史

time 元素经历了一段曲折的历程。它于 2009 年被添加到 HTML5 规范中。两年后的 2011 年，该规范被删除，并被一个更广泛的元素<data> 替换。同年晚些时候，time 元素又重新添加回来，并具有一些改进的功能。

请放心，您可以使用它！

Bruce Lawson 对此情况进行了很好的概述：消失，回归，现在。HTML 历史上一个经典的“铺设牛路”时刻。

标签和属性

Time 只是一个 HTML 标签。以下是一个表示 2011 年 11 月的简单示例

<time>2011-11</time>

其中的文本恰好是一个有效的datetime 属性值（稍后将详细介绍）。但它不必如此。您可以将该文本移动到datetime 属性中并使用不同的文本。

<time datetime="2011-11">A cold winter month many years ago</time>

datetime 属性使 time 元素独一无二。它以机器可读的格式表示您正在表示的任何文本的日期、时间或持续时间。这意味着它是为计算机准备的，而不是为人类准备的，因此它具有非常具体的格式。

对于人类可读版本，可能更常见的是仅使用日期时间的文本表示形式

<time datetime="2011-11">November, 2011</time>

10 种方式

有多种标准方法可以格式化datetime 属性。

年和月

2014-06

非常简单。年份在月份之前。

日期

1969-07-16

年份、月份，然后是日期。

无年份日期

12-31

月份在日期之前。

仅时间

14:54:39.929

小时、分钟，然后是秒。秒是可选的。秒的分数可以表示到三位小数。

日期和时间

2013-11-20T14:54

日期和时间的组合，用大写字母 T 分隔。大写“T”可以用空格代替。

时区偏移量

+06:00

以加号或减号开头。冒号 (:) 是可选的。+00:00 或 UTC 时间可以用大写字母“Z”表示。

本地日期和时间

2019-12-31T23:59:59-02:00

这与日期和时间相同，只是添加了时区偏移量。同样，“T”可以用空格代替。

年和周

2010-W21

年份后跟大写字母“W”以及相应的周数。

仅年份

1776

这必须是四位或更多位数字，因此0001 和12345 都可以。

持续时间（方法一）

P2DT2H30M10.501S

大写字母“P”，一个可选的日期值，大写字母“T”，然后是可选的小时、分钟和秒的值。所有字母都必须是大写。

持续时间（方法二）

1w 2d 2h 30m 10.501s

周 (w)、日 (d)、时 (h)、分 (m) 和秒 (s)。字母可以是大写或小写。空格是可选的。

示例

Google released Gmail Blue on <time datetime="2013-04-01">April 1st, 2013</time>.

The Chelyabinsk meteor entered Earth's atmosphere over Russia on <time datetime="2013-02-15T09:20+06:00">15 February 2013 at about 09:20 YEKT (03:20 UTC)</time>.

The Apollo 13 mission lasted a total of <time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>.

日期时间格式化遇到问题？

使用这个小工具，您可以输入特定的日期或时间（或两者），它将输出正确的日期时间值。

查看 Chris Coyier 编写的 CodePen 上的 Datetime Creator Tool (@chriscoyier) 。

浏览器支持

对于 `` 元素，浏览器支持不是主要问题。如果浏览器熟悉它，很好；如果不是，它会将其视为一个普通的内联元素，这完全没问题。`datetime` 属性也可以完美访问。

不过，与 `` 元素相关联的 DOM 接口。具体来说，dateTime 应该可以在对该元素的引用上使用。

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<script>
  var time = document.getElementsByTagName("time")[0];
  console.log(time.dateTime);
  // outputs "2001-05-15 19:00"
</script>

这仅在 Firefox 中受支持，而且也不是特别有用，因为它只返回该属性（如果属性不存在但文本是有效值，它甚至不会返回一个值，这似乎是有意义的）。

使用 `` 的好处是什么？

我将再次引用 Bruce，因为他曾在 HTML5 Doctor 的一篇帖子 中非常出色地表达了这一点。

在网页中使用明确的日期并不难想象。浏览器可以提供将事件添加到用户日历的功能。一个泰国本地化的浏览器可以提供将公历日期转换为泰国佛教纪元日期的功能。一个日本浏览器可以将 <time>16:00</time> 本地化为“16:00时”。内容聚合器可以生成事件的视觉时间线。

搜索引擎可以生成更智能的搜索结果。例如，在英国最近的大雪中，我搜索了我们镇的学校停课情况，发现我孩子的学校停课了。在接到学校的电话询问我的孩子在哪里后，我重新检查了网页。在页面底部的细小印刷体中，写着“发布日期：2008年1月5日”。我预计搜索引擎运营商会在与当前事件相关的搜索中，对更新的页面给予更高的排名。

其他细节

您可以对 `` 元素做的另一个操作是添加一个 `title` 属性，以便向用户显示更详细的信息。这意味着您可以用三种方式提供相同的信息

• 一种友好的易读的显示格式
• 一种更详细的易读的悬停格式
• 一种机器可读的格式

这在 CodePen 上使用。

这是输出这些不同格式的 Rails 代码（STRFTIME 是一个很好的工具）。

<time 
  datetime="<%= @pen.created_at.strftime("%Y-%m-%dT%H:%M") %>"
  title="<%= @pen.created_at.strftime("%Y-%m-%d at %I:%M %p") %>">
    <%= @pen.created_at.strftime("%B %d, %Y") %>
</time>

您在任何项目中使用 `` 吗？