files/zh-cn/web/html/element/time/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

---
title: <time>
slug: Web/HTML/Element/time
translation_of: Web/HTML/Element/time
---
<h2 id="概述">概述</h2>

<p> HTML <em>time</em> 标签(<code>&lt;time&gt;</code>) 用来表示24小时制时间或者<a class="external" href="http://en.wikipedia.org/wiki/Gregorian_calendar">公历日期</a>，若表示日期则也可包含时间和时区。</p>

<p>此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。</p>

<div class="note"><strong>用法提示： </strong>如果给定的日期不是正常日期或者在公历中最早的日期之前，请不要使用此元素。</div>

<div class="note"><strong>状态提示</strong>： <span class="long_text short_text" id="result_box" lang="zh-CN"><span>该元素</span><span>仍在</span><span>设计</span><span>和</span><span>讨论中</span></span>(<a class="external" href="http://blog.whatwg.org/weekly-time-data">http://blog.whatwg.org/weekly-time-data</a>)</div>

<h3 id="使用场景"><span class="long_text short_text" id="result_box" lang="zh-CN"><span>使用场景</span></span></h3>

<table class="standard-table">
 <tbody>
  <tr>
   <td><a href="/zh-cn/HTML/Content_categories" title="zh-cn/HTML/Content categories">内容分类</a></td>
   <td><a href="/zh-cn/HTML/Content_categories#flow_content" title="zh-cn/HTML/Content categories#flow content">flow content</a>, <a href="/zh-cn/HTML/Content_categories#phrasing_content" title="zh-cn/HTML/Content categories#phrasing content">phrasing content</a></td>
  </tr>
  <tr>
   <td>可包含内容</td>
   <td><a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="zh-cn/HTML/Content categories#Phrasing content">Phrasing content</a>， 但不能包含子 <code>time</code> 元素。</td>
  </tr>
  <tr>
   <td>标签可省略？</td>
   <td>起止标签均不能省略。</td>
  </tr>
  <tr>
   <td>允许的父元素</td>
   <td>任何接受 phrasing content 的元素。</td>
  </tr>
  <tr>
   <td>标准文档</td>
   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element" rel="external nofollow">HTML5, section 4.6.10</a></td>
  </tr>
 </tbody>
</table>

<h3 id="属性">属性</h3>

<p>像所有其他元素一样，此元素拥有可以使用 <a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">通用属性</a>。</p>

<dl>
 <dt>{{ htmlattrdef("datetime") }}</dt>
 <dd>该属性表示此元素的时间和日期，并且属性值必须是一个<a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">有效的日期格式，并可包含时间</a>。 如果此值不能被解析为日期，元素不会有一个关联的时间戳.</dd>
 <dt>{{ htmlattrdef("pubdate") }}</dt>
 <dd>(该属性仍在被WHATWG 和 W3C组织设计和讨论中.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor <a href="/zh-cn/HTML/Element/article" title="zh-cn/HTML/Element/Article">article</a> element). If true, the <code>time</code> element must have a corresponding date. Additionally, each <code>time</code> element indicating a publication date must be the only <code>time</code> element that does so for that document.</dd>
</dl>

<h3 id="DOM_接口">DOM 接口</h3>

<p>该元素实现了 <code><a href="/zh-cn/DOM/HTMLTimeElement" title="zh-cn/DOM/HTMLTimeElement">HTMLTimeElement</a></code> 接口。</p>

<h3 id="例子">例子</h3>

<pre class="brush: html">&lt;p&gt;The concert starts at &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
</pre>

<p>上面的HTML会显示:</p>

<p>The concert starts at 20:00.</p>

<h4 id="Pubdate_example" name="Pubdate_example"><code>pubdate</code> 示例</h4>

<pre class="brush: html">&lt;article&gt;
  &lt;p&gt;This article was created on &lt;time pubdate&gt;2011-01-28&lt;/time&gt;.&lt;/p&gt;
&lt;/article&gt;
</pre>

<p>上面的HTML会显示：</p>

<p>This article was created on 2011-01-28.</p>

<h4 id="Datetime_example" name="Datetime_example"><code>datetime</code> 示例</h4>

<pre class="brush: html">&lt;p&gt;The concert took place on &lt;time datetime="2001-05-15 19:00"&gt;May 15&lt;/time&gt;.&lt;/p&gt;
</pre>

<p>上面的HTML会显示：</p>

<p>The concert took place on May 15.</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }} {{ bug("629801") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>11.50</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>{{ languages( { "en": "en/HTML/HTML_Elements/time"} ) }}</p>