text.html

 
<p class="zw">回想一下你每天在网上看到的一些事件信息，你会发现一些关于会议、体育赛事、音乐会或者电影里的细节。事件信息有时出现在组织中，有时出现在自然语言中。例如，我可能会在我的博客中写道，“今年11月份，我在曼彻斯特的艾伯特大厅看了Kacey Musgraves的演唱会”。</p> 
<p class="zw">你不必去网上找一些很难找的事件信息，网站与网站之间使用HTML来标记事件信息的差别很大。这是Kacey Musgraves演唱会在Ticketmaster上的标记：</p> 
<pre class="代码无行号"><code><tr> 
   <td class="event"> 
      <div class="summary"> </div> 
      <div class="ratingContainer" title="4.8 out of 5 stars"></div> 
   </td> 
   <td class="location">Albert Hall Manchester, GB</td> 
   <td class="date">Mon 16/11/15 19:00</td> 
</tr></code></pre> 
<p class="zw">Seetickets使用不同的HTML发布了相同的事件：</p> 
<pre class="代码无行号"><code><div class="browse-width result-text"> 
   <h3>Kacey Musgraves</a></h3> 
   <p>Albert Hall, Manchester</p> 
   <p>at 7:00 PM</p> 
</div></code></pre> 
<p class="zw">人们可以很容易理解它包含一个事件，但是这种HTML没法帮助机器去理解。这使得微格式成了完美的解决方案。</p> 
<p class="zw">一个日历事件很可能包含：</p> 
<ul> 
 <li class="第1级无序列表">名称或摘要</li> 
 <li class="第1级无序列表">描述</li> 
 <li class="第1级无序列表">地点</li> 
 <li class="第1级无序列表">开始和结束的时间</li> 
 <li class="第1级无序列表">URL链接指向事件页面或者网站</li> 
 <li class="第1级无序列表">场地的联系信息</li> 
</ul> 
<p class="zw">我们将构建一个单独的事件，用<code>h-event</code>属性值来指定根元素，然后在一个元素上使用<code>p-name</code>，甚至是<code>u-url</code>来表示，以保证我们的事件足够简单。</p> 
<pre class="代码无行号"><code><div class="h-event">The Maltese Falcon</div></code></pre> 
<p class="zw">我们需要更多有用的信息来展示《The Maltese Falcon》，然而，我们通过在<code>article</code>嵌入一个使用<code>p-name</code>属性值的主标题来区分开：</p> 
<pre class="代码无行号"><code><article class="h-event"> 
   <h1 class="p-name">The Maltese Falcon</h1> 
</article></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_138">摘要</h3> 
<p class="zw">接下来，我们在一个适当的HTML元素上使用属性值<code>p-summary</code>，来添加一个简短的摘要，这里我们使用了一个段落：</p> 
<pre class="代码无行号"><code><article class="h-event"> 
   <h1 class="p-name">The Maltese Falcon</h1> 
   <p class="p-summary">A special showing of the remastered
mystery that kicked off the film noir genre of the 1940s…</p> 
</article></code></pre> 
<p class="zw">如果我们的摘要包含多个段落，那么我们可以把标题、段落、列表或者任何其他元素放到一个<code>section</code>中划分出来做摘要。而不要在一个<code>h-event</code>里包含多个段落的摘要，否则，这将是一个无效的事件。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_139">位置</h3> 
<p class="zw">让人们知道事件在哪发生，只需要在一个元素上应用属性值<code>p-location</code>，在这个例子里， 场馆名字用<code>span</code>包起来：</p> 
<pre class="代码无行号"><code><p>Showing at <span class="p-location"> 
The Scala Cinema and Art Centre</span></p></code></pre> 
<p class="zw">我们应该需要提供更多关于地点的信息，比如地址，我们应该为场地创建一个<code>h-adr</code>元素，并把它嵌入到<code>h-event</code>里面。<code>h-adr</code>里包含相同的地址，这跟我们使用<code>h-card</code>时一样。</p> 
<pre class="代码无行号"><code><div class="p-location h-adr"> 
<span class="p-street-address">47 High Street</span> 
<span class="p-locality">Prestatyn</span> 
<span class="p-region">Denbighshire</span> 
<span class="p-country-name">Wales</span> 
</div></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_140">URL</h3> 
<p class="zw">如果这个事件中有个网站，那么我们将会使用和构建<code>h-card</code>时一样的<code>u-url</code>属性值：</p> 
<pre class="代码无行号"><code><a href="http://scalaPrestatyn.co.uk" class="u-url">The Scala
Cinema Website</a></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_141">开始日期和持续时间</h3> 
<p class="zw">我们构建的<code>h-event</code>微格式几乎要完整了，但是还缺少了开始日期和到场时间。首先，我们使用<code>time</code>元素，并为它添加属性值<code>datetime</code>来标记开始时间：</p> 
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30">Nov. 20th, 2015 at 7:30pm</time></code></pre> 
<p class="zw">显而易见，这是一个开始日期，我们还需要给<code>time</code>元素添加一个<code>dt-start</code>属性值：</p> 
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30" class="dt-start"> 
November 20th, 2015 at 7:30pm</time></code></pre> 
<p class="zw">这个事件是从傍晚持续到晚上10点。所以我们可以把这个时间也添加到我们的<code>datetime</code>属性里：</p> 
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30 P 150M" class="dt-start"> 
November 20th, 2015 at 7:30pm</time></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_142">混合事件和联系人</h3> 
<p class="zw">微格式按模块化、可嵌入来设计的，因此我们可以很容易把一个人的<code>h-card</code>嵌入到一个<code>h-event</code>里。</p> 
<p class="zw">还记得之前我们为《The Maltese Falcon》标记位置信息吗？我们为场馆名添加了属性值<code>p-location</code>:</p> 
<pre class="代码无行号"><code><p>Showing at <span class="p-location"> 
The Scala Cinema and Art Centre</span></p></code></pre> 
<p class="zw">现在需要为事件添加更精确的位置信息，所以我们要创建一个<code>h-card</code>，嵌入到我们的<code>h-event</code>里。</p> 
<pre class="代码无行号"><code><div class="p-location h-card"> 
   <span class="p-name">The Scala Cinema and Art Centre</span> 
   <span class="p-street-address">47 High Street</span> 
   <span class="p-locality">Prestatyn</span> 
   <span class="p-region">Denbighshire</span> 
   <span class="p-country-name">Wales</span> 
</div></code></pre>