HTML5教程 | HTML5 time元素

09-09 次

标签 html5 time元素 HTML5教程

HTML5 time元素是用于定义页面的日期和时间的语义元素。

time元素包含2个部分的日期信息。一个部分是给机器阅读的，另一个部分是给人阅读的。下面是一个简单的time元素的示例代码：

<time datetime="2015-10-01">2015年10月1日</time>

如上面的示例代码中，datetime属性中给出的日期是给机器阅读的。而给人阅读的日期是写在<time>标签之间的部分。

如果你只需要使用机器能阅读的日期，可以将日期写在<time>标签之间，而不写datatime属性，例如下面的样子：

<time>2015-10-01</time>

在2011年的时候，time元素曾经被从HTML5规范中移除。但是后面经过一些更新之后，有被从新添加到HTML5规范中。

time元素的日期格式必须是下面列出的几种格式中的一种：

YYYY-MM-DDTHH:MM:SS.SSS+ZHZM
YYYY-MM-DDTHH:MM:SS.SSS-ZHZM
YYYY-WXX

上面的日期格式的含义如下：

字母代码	描述
YYYY	使用4个数字指定的年份，例如：2015
MM	使用2个数字指定的月份，例如：09或12，月份必须在01-12之间
WXX	使用2个数字指定的一年中的星期数,例如01或51。星期数必须在01-53之间
DD	使用2个数字指定的天数，例如01或31。天数必须在01-31之间
T	字母T用于表明在日期之后包含一个时间串。也可以使用一个空格来代替字母T
HH	使用2个数字来指定的小时数，小时数必须在00-23之间
MM	使用2个数字指定的分钟数，分钟数必须在00-59之间
SS	使用2个数字指定的秒数，秒数必须在00-59之间
SSS	使用3个数字指定的毫秒数，毫秒数必须在000-999之间
-ZHZM	以UTC（Coordinated Universal Time）为标准的时区偏移。使用+或-来指定，然后使用4个数字的小时和分钟（HHMM）来作为偏移值。
+ZHZM	以UTC（Coordinated Universal Time）为标准的时区偏移。使用+或-来指定，然后使用4个数字的小时和分钟（HHMM）来作为偏移值。

这些选项的某些部分是可选的。例如，你可以不使用时间部分，苗和毫秒也是可选的。如果你使用了时间部分，必须指定时区。

下面列出了日期时间格式的一些例子：

我们还可以使用time元素来指定一个持续时间，而不是一个精确的时间。要指定一个持续时间，可以在一个time元素中的datatime属性中使用一个P前缀，然后在它的后面添加时间的单位。这里的时间单位使用1个字母来表示，例如：

<time datetime="P1D">

上面的例子表示持续一天的时间。

持续时间的单位可以是：

你不可以指定月为单位，因为月的天数是不固定的。这会导致用于计算时间到位的秒数值不一样，因此不可以使用月为单位。

上面的持续时间的写法也可以将各个字母之间使用空格来间隔开，便于阅读：

<time datetime="P 1 D">

如果你在P之后使用T，你可以更精确的指定持续时间：

<time datetime="PT12H 34M 59S">

上面的例子表示持续时间为12小时34分钟59秒。

注意上面写法中空格的使用。你还可以像下面这样来书写持续时间：

<time datetime="PT 12H 34M 59S">
<time datetime="PT12H34M59S">

time元素的pubdate属性指明这个时间是不是一篇文章<article>的发表时间。

下面是一个例子：

<time datetime="2015-09-10" pubdate>2015年9月10日</time>

注意，你不需要为pubdate属性指定true或false值。像上面这样书写，就表示这个时间是一个发表时间。

下面是一个在article元素中使用time元素的示例代码：

<article>

    <p>
        这是最后一次流星撞击地球。
    </p>

    <p>
        <time datetime="2015-09-10" pubdate>2015年9月10日</time>
    </p>

</article>

上面的<time>元素是否需要嵌入到一个p元素中并没有硬性的规定。