text.html

 
<p class="zw">到目前为止，我希望你很享受之前所读到的内容，并且写一篇热情洋溢的评论，因为接下来我们将会讲到<code>h-review</code>。</p> 
<p class="zw">不论是谈话还是阅读，人们经常会表达自己的意见或者看法。我们的大脑随时都会产生评论：</p> 
<p class="zw">上周我租了一盘DVD，1994年的由Humphrey Bogart饰演Sam Spade的《The Maltese Falcon》，它仍然是我最喜欢的电影，给它一个赞”</p> 
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“电影: 《The Maltese Falcon》: 评分：10/10”</span></p> 
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“我对《Who Framed Roger Rabbit》预期很低，但我还是给了5颗星”</span></p> 
<p class="zw">电脑不能识别语言的细微差别，对它来说，这些评论信息只不过是一串字符。它是建立在我们学习过的微格式<code>h-card</code>和<code>h-event</code>之上，通过<code>h-review</code>提供的内容识别模式来解析这些内容的。</p> 
<p class="zw">和我们学过的其他微格式一样，<code>h-review</code>也是用根元素来包含其他元素。它的根元素属性值是<code>h-review</code>，我们可以把它应用到任何恰当的HTML元素上，下面的例子我们用到了<code>article</code>元素上：</p> 
<pre class="代码无行号"><code><article class="h-review"> 
<h1>The best detective film ever made</h1> 
</article></code></pre> 
<p class="zw">编写一个<code>h-review</code>用不了多少时间，因为<code>h-review</code>复用了一些值，这些值你在学习<code>h-card</code>和<code>h-event</code>时已经学过了。首先，像其他微格式一样，我们用<code>p-name</code>来命名评论，但值得注意的是，我们的<code>h-review</code>里的评论项的名字不一定非要一样。</p> 
<pre class="代码无行号"><code><article class="h-review"> 
   <h1 class="p-name">The best detective film ever made</h1> 
</article></code></pre> 
<p class="zw">现在我们开始定义我们评论的项目，<code>p-item</code>元素里的内容不一定是企业、人物、地方或者产品，我们可以创新，只要是和项目相关的其他信息。</p> 
<pre class="代码无行号"><code><p class="p-item">Who Framed Roger Rabbit, starring the late Bob
Hoskins as private investigator Eddie Valiant.</p></code></pre> 
<p class="zw">关于这个项目，我们需要更详细的信息，这无关评论。当评论一个人的时候，我们可以嵌入<code>h-card</code>，描述一个企业或者场地的位置时使用<code>h-adr</code>，产品评论使用<code>h-product</code>,其他类型的项目使用<code>h-item</code>来表示。这是一个特定项目的微格式结构信息。当我们正在评论一部电影，而不是一个业务或者产品，我们会选择<code>h-item</code>，并把它添加到我们的<code>p-item</code>元素上。</p> 
<pre class="代码无行号"><code><p class="p-item h-item">Who Framed Roger Rabbit, starring the
late Bob Hoskins as private investigator Eddie Valiant.</p></code></pre> 
<p class="zw">如果没有意见，一条评论是不会有多大用处的，因此我们将使用<code>e-description</code>。如果评论很简短，那么把这个属性值添加到列表或者是其他元素上，这个例子中，我们使用了段落：</p> 
<pre class="代码无行号"><code><p class="e-description">How much do I know about show business?
Only that there is no business like it, no business I know.</p></code></pre> 
<p class="zw">如果描述包含多个段落或者包含其他HTML元素，那么应该用一个元素把它们包起来，再把<code>e-description</code>赋值给这个包裹元素。如果我们的评论是我说的这种情况，那么使用最适当的方法是使用一个引用：</p> 
<pre class="代码无行号"><code><blockquote class="e-description"> 
<p>How much do I know about show business? Only that there is no
business like it, no business I know.</p> 
<p>A Classic film has to work on several different levels and animated
action movie Who Framed Roger Rabbit scores on all of them.
It's a fantastic children's film with characters like Roger, the
Weasels and Benny the Cab for them to enjoy. It also plays perfectly
as a detective story for adults. And who will ever forget
Jessica Rabbit?</p> 
</blockquote></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_144">URL</h3> 
<p class="zw">你应该能猜到我们如何在评论里包含一个URL，之前在h-card和h-event里已经看到过了。就是<code>u-url</code>属性值：</p> 
<pre class="代码无行号"><code><a href="HardboiledWebdesign.com" class="u-url">Canonical Permalink</a></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_145">添加评分</h3> 
<p class="zw">星评级是一个用来表明肯定或否定的非常流行的评论方式。它帮助人们一眼就能看出来一个项目是好是坏。在很多评论和购物网站，我们都能看到它们。我们将按照惯例，用星星来创建一个从0（最坏）到5（最好）的评级范围。</p> 
<p class="zw">用五颗星来评价《Who Framed Roger Rabbit》，我们将使用HTML5的<code>data</code>元素。如果你之前还没有用过<code>data</code>元素，那么很简单，<code>data</code>是处理人类可读的、可见的元素部分。在我们的星星评级的例子中，使用了能提供同样信息的<code>value</code>属性，这是一种机器可读的形式：</p> 
<pre class="代码无行号"><code><data class="p-rating" value="5">★★★★★</data></code></pre> 
<p class="zw">如果我们们需要更具体的，而不是一个平均的评价等级，那么我么可以分别使用<code>p-best</code>和<code>p-worst</code>来表示：</p> 
<pre class="代码无行号"><code><data class="p-best" value="5">★★★★★</data> 
<data class="p-worst" value="0"></data></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_146">评论日期</h3> 
<p class="zw">当然，我们还应该加上一个日期，这将帮助人们判断我们的评价。这对于酒店和餐馆尤为重要。我们将简单的复用<code>h-event</code>中的<code>time</code>元素，并为它加上<code>datetime</code>属性，然后再为它加上<code>dt-reviewed</code>的<code>class</code>名:</p> 
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30" class="dt-reviewed"> 
November 20th, 2015 at 7:30pm</time></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_147">混合评论和联系人</h3> 
<p class="zw">因为没必要知道是谁写的评论，所以<code>h-review</code>并没要求我们包含一个名字。但我们可以选择添加一个。因为一个人的身份可以大大提高一个评论的可信度。只要我们想要，就可以使用<code>h-card</code>来包裹很多信息。但在这里，我们只使用<code>p-reviewer</code>和<code>h-card</code>来添加评论者的名字：</p> 
<pre class="代码无行号"><code><a class="p-reviewer h-card" 
href="http://stuffandnonsense.co.uk">Andy Clarke</a></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_148">在新闻文章、博客和播客里使用h-entry</h3> 
<p class="zw">接下来，你将了解<code>h-entry,</code>它是为出版联合内容，如新闻、博客和播客而设计的微格式。<code>h-entry</code>表示单个条目，我们可以和其他条目组合使用，我们来写一个<code>h-entry</code>博客。</p> 
<p class="zw">微格式社区建议，我们应该用“最精确语义的HTML构建块对象等”。</p> 
<p class="zw">这是我们最初的HTML，开始用一个标题，后面跟一个段落：</p> 
<pre class="代码无行号"><code><h1>The Maltese Falcon</h1> 
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p></code></pre> 
<p class="zw">现在我们知道如何像这样单独的使用<code>article</code>元素，我们将在那篇文章里组合使用这些元素：</p> 
<pre class="代码无行号"><code><article> 
   <h1>The Maltese Falcon</h1> 
   <p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p> 
</article></code></pre> 
<p class="zw">把一篇文章转换成<code>h-entry</code>，我们将在每个单独条目的根元素上添加<code>h-entry</code>属性值：</p> 
<pre class="代码无行号"><code><article class="h-entry"> 
   <h1>The Maltese Falcon</h1> 
   <p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p> 
</article></code></pre> 
<p class="zw"><code>h-entry</code>里包括文章、博客和播客的标题在内的一些属性是隐藏的，但是每个属性是可选的，像发布日期和作者姓名之类的最好是在每个条目里显式的添加，这些属性你应该已经比较熟悉。我们先为主标题标记<code>p-name</code>属性：</p> 
<pre class="代码无行号"><code><h1 class="p-name">The Maltese Falcon</h1></code></pre> 
<p class="zw">这里需要说清一点，日期或者时间指的是一篇文章的发布日期，我们用<code>h-entry</code>的<code>dt-pulished</code>属性值：</p> 
<pre class="代码无行号"><code><time datetime="2015-11-20 T19:30" class="dt-published"> 
November 20th, 2015 at 7:30pm</time></code></pre> 
<p class="zw">如果<code>h-entry</code>的发布日期出现更新，我们应该把<code>dt-published</code>值更改为<code>dt-updated</code>:</p> 
<pre class="代码无行号"><code><time datetime="2015-11-20 T21:30" class="dt-updated"> 
November 20th, 2015 at 9:30pm</time></code></pre> 
<p class="zw">最后我们添加一个作者到<code>h-entry</code>里，你应该已经很熟悉<code>h-card</code>，这里我们将结合使用<code>h-card</code>里的<code>p-author</code>属性值。</p> 
<pre class="代码无行号"><code><address class="h-card p-author"> 
<a href="http://stuffandnonsense.co.uk">Andy Clarke</a> 
</address></code></pre> 
<p class="zw">不需要使用<code>p-name</code>或者<code>u-url</code>属性值，<code>h-card</code>里都隐含了这些。</p> 
<p class="zw">但是，这里为什会用<code>address</code>元素？</p> 
<p class="zw">前面表述过，<code>address</code>元素并不用来描述物理地址，但用来描述作者的联系信息绝对是恰当的。因为我们添加了一个指向作者网站的链接，所以我们需要用HTML链接来表达那个网站和作者的关系：</p> 
<pre class="代码无行号"><code><address class="h-card p-author"> 
<a href="http://stuffandnonsense.co.uk" rel="author">Andy Clarke</a> 
</address></code></pre> 
<p class="zw">有些作者往往喜欢把博客分割成多页，比如，我们会主页或者存档里使用摘要，然后在文章详细页展示完整的内容。<code>h-entry</code>可以使用<code>p-summary</code>定义一个小段落当做文章的摘要：</p> 
<p class="zw">我们的例子里，我们使用第一段：</p> 
<pre class="代码无行号"><code><p class="p-summary">The film stars Humphrey Bogart as private investigator
Sam Spade and Mary Astor as his femme fatale client.</p></code></pre> 
<p class="zw">用一个属性值为<code>p-summary</code>的<code>section</code>父元素将几个元素组合包裹起来，这样就形成了一个长摘要：</p> 
<pre class="代码无行号"><code><section class="p-summary"> 
   <p>The film stars Humphrey Bogart as private investigator Sam
   Spade and Mary Astor as his femme fatale client.</p> 
   <p>The story follows a San Francisco private detective and his
   dealings with three unscrupulous adventurers, all of whom are
   competing to obtain a jewel-encrusted falcon statuette.</p> 
</section></code></pre> 
<p class="zw"><code>p-summary</code>里包含一个永久的全文链接，并出现在多个页面时，就很重要了。需要用<code>rel</code>属性，并赋值为<code>bookmark</code>，来明确<code>p-summary</code>的链接指向：</p> 
<pre class="代码无行号"><code><a href="http://HardboiledWebdesign.com" rel="bookmark"> 
Permalink</a></code></pre> 
<p class="zw">现在人们通常在几个渠道发布自己的内容。例如，你可能会在自己的博客上发布一条。也可能在其他媒介上发布，用来获得更多的受众。如果你添加了一个指向其它地方的入口链接，那么使用<code>u-syndication</code>来标识那个链接为联合内容就尤为重要：</p> 
<pre class="代码无行号"><code><a href="http://medium.com" class="u-syndication"> 
Also published on Medium</a></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_149">管理多个h-entry</h3> 
<p class="zw">到目前位置，我们已经可以让单个<code>h-entry</code>工作起来。但是很多网站首页或者存档页有相关文章列表。这些条目的组合做称作<code>h-feed</code>。我们需要一个合适的父元素来组合一个<code>feed</code>，这里我们使用了<code>section</code>元素。结合上下文的意思，我们会给它一个描述性的标题:</p> 
<pre class="代码无行号"><code><section class="h-feed"> 
   <h1>Hardboiled archives</h1> 
   <article class="h-entry"> […] </article> 
   <article class="h-entry"> […] </article> 
   <article class="h-entry"> […] </article> 
</section></code></pre>