4.4　指定时间

可以通过time元素标记一个准确的时间或日期，这是HTML5新增的元素。（关于日期体系的详细说明，参见本节末尾“理解datetime格式”。）

time最常见的一种用法是表示article元素的发布日期。要表示发布日期，需要包含pubdate属性。包含pubdate属性的time元素表示其最近的祖先article元素的发布日期（参见图4.4.1）。还可以用time、datetime和pubdate为article的读者评论添加时间戳（假定与article相关的评论都由嵌套在这个article中的article元素包着；参见3.9节“如何在article和section中作出选择”中的例2）。

在使用time元素时，可以用多种方式表示时间（参见图4.4.1和图4.4.3）。time中可选的文本内容（即文本）会出现在屏幕上，作为可选的、机器可读的datetime值的人工可读版本（参见图4.4.2和图4.4.4）。

  1. ...
  2. <body>
  3.  
  4. <article>
  5.      <header>
  6.         <h1>Cheetah and Gazelle Make Fast Friends</h1>
  7.         <p><time datetime="2011-10-15" pubdate="pubdate">October 15, 2011</time></p>
  8.      </header>
  9.  
  10.      ... [文章内容] ...
  11. </article>
  12.  
  13. </body>
  14. </html>

图4.4.1　datetime属性和time元素中的文本最好反映相同的日期，但它们在书写方式上可以不一样（更多例子见图4.4.3）。这个time元素代表文章发布的日期，因为它包含了pubdate属性

4.4　指定时间 - 图1

图4.4.2　article的发布日期出现在标题下面。显示出来的是time元素的文本内容，而不是datetime值

指定准确时间和日期

  • 输入开始time元素。

  • 如果需要，输入datetime="time"，其中time应使用合法的格式（参见本节末尾“理解datetime格式”）。

  • 如果这个时间代表的是article或整个页面的发布日期，则输入pubdate="pubdate"或pubdate。

  • 输入>结束这个开始标记。

  • 如果要让时间显示在浏览器中，则输入反映时间或日期的文本（关于允许的格式，参见第一条提示）。

6.输入。

提示　如果忽略datetime属性，文本内容就必须是合法的日期或时间格式。也就是说，图4.4.3第一个例子不能写成

The train arrives at

and on .

。如果包含了datetime，文本内容就可以按你希望的任何形式表示日期或时间了，就像图4.4.3中第二个和第三个例子那样。

　

提示　不要在time中使用不准确的日期或时间，如“20世纪中期”、“午夜过后”、“文艺复兴后期”或“上周早些时候”。

　

提示　如果要在页面中显示time元素，应该在该元素中包含时间和日期的文本版本。如果没有包含，浏览器理应根据datetime值显示对应的文本，但在本书写作之际，浏览器对这一特性的支持程度还很低，参见图4.4.4。

  1. ...
  2. <body>
  3.  
  4. <p>The train arrives at <time>08:45</time> and <time>16:20</time>.b> on <time>2012-04-10</time>.</p>
  6. <p>We began our descent from the peak of Everest on <time datetime="1952-06-12T11: 05:00">June 12, 1952 at 11:05 a.m. </time></p>
  8. <p>They made their dinner reservation for <time datetime="2011-09-20T18: 30:00">tonight at 6:30</time>.</p>
  10. <p>The record release party is on <time datetime="2011-12-09"></time>.</p>
  12. </body>
  13. </html>

图4.4.3　使用time元素有多种方式。最简单的形式（第一个例子）没有datetime属性。忽略datetime属性时，必须使用合法的格式表示日期和时间。头三个例子在time元素里都包含了时间或日期的文本，这些文字会显示在屏幕上（参见图4.4.4）。建议始终包含这种人类可读的时间，因为当前的浏览器不会显示属性中的值（参见图4.4.2）

提示　如果使用带pubdate的time元素指示article的发布日期，通常将它放置在这个article的header或footer元素里，尽管这不是必需的。不管怎样，一定要把它嵌套在相关的article里面的某个位置。

4.4　指定时间 - 图2

图4.4.4　头三个段落会显示时间，最后一个不会（参见最后一条提示）

提示　如果带pubdate属性的time元素的祖先中没有article元素，则代表整个页面的发布时间。

　

提示　既可以用，也可以用指定pubdate。不过，一旦包含它，就必须提供datetime或时间的文本内容（参见图4.4.1）。

　

提示　datetime属性的机器可读格式（参见本节末尾“理解datetime格式”）使Web应用之间可以同步日期和时间。不过在本书写作之际，还没有浏览器会显示datetime值（参见图4.4.2和图4.4.4）。

　

提示　不能在time元素中嵌套另一个time元素。

　

理解datetime格式

time元素的时间是以24小时制为基础的，也可以通过相对UTC（Coordinated Universal Time，全球标准时间）时差的方式来表示。datetime属性应提供机器可读的日期和时间格式，其简化形式为：

  1. YYYY-MM-DDThh:mm:ss

例如（当地时间）：

  1. 2011-11-03T17:19:10

表示“当地时间2011年11月3日下午5时19分10秒”。T用于将日期（YYYY-MM-DD）和时间（hh:mm:ss）隔开。如果包含时间，秒是可选的。也可以使用hh:mm.sss格式提供时间的毫秒数。注意毫秒数之前的符号是一个点。

如果你愿意，也可以表示为世界时。在末尾加上字母Z，就成了UTC。

例如（世界时）：

  1. 2011-11-03T17:19:10Z

也可以通过相对UTC时差的方式表示时间。这时不写字母Z，写上–（减）或+（加）及时差即可。

例如（含相对UTC时差的世界时）：

  1. 2011-11-03T17:19:10-03:30

表示“纽芬兰标准时（比UTC晚3个半小时）2011年11月3日下午5时19分10秒”。UTC时区列表参见http://en.wikipedia.org/wiki/List_of_time_zones_by_UTC_offset。

如果确实要包含datetime，也不必像图4.4.3中的示例那样提供时间的完整信息。从技术上来说，time元素中的日期是以公历为基础的（公历是当前广泛使用的国际公认的日历体系）。因此，HTML5不推荐使用该元素表示现行公历开始使用之前的日期（一般情况下这不会给你的内容带来影响，你只需要知道这一点就行了）。有很多关于这种限制的讨论，但这是一个复杂的主题。更多信息和实例参见http://dev.w3.org/html5/spec-author-view/the-time-element.html；关于其中一些问题的详细说明，参见www.quirksmode.org/blog/archives/2009/04/making_time_saf.html。