2.5K

日期和时间

很激动人心，是不是？我是说，不是那种“一边从珠穆朗玛峰顶上滑下来，一边倒背《星条旗》”的激动。这种激动是因为增加了很多急需的功能。那么，我们继续下面的内容。

这次我们要说的是下面的<p class="post-date">October 22, 2009</p>：

<div class="entry">
  <p class="post-date">October 22, 2009</p>
  <h2>Travel day</h2>
</div>

还是一个老问题，对吧？以往对文章发布日期的解决方案就是这样，没有有语义的标签，所以我们只能使用一个通用的标签，加上一个自定义的类名。当然，这在 HTML5 中也是可行的，你不需要非得改变它。但是 HTML5 提供了专门的解决方案：<time>标签。

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

<time>标签有三个部分：

1. 机器可读的时间戳；
2. 人类可读的内容；
3. 可选的 pubdate 标记。

在这个例子中，datetime 属性仅仅指定日期，没有时间。它的格式是四位的年，两位的月份和两位的日期，使用短线分隔。如果你要加入时间，那么就在日期后面增加一个大写的 T，然后写上 24 小时制的时间，最后是时区：

<time datetime="2009-10-22T13:59:47-04:00" pubdate>
  October 22, 2009 1:59pm EDT
</time>

（日期/时间的格式很灵活，HTML5 也提供了很多种合法的格式信息。）

注意，我改变了文本内容——也就是在<time>和</time>之间的部分——来匹配机读时间戳。这实际上不是必须的。文本内容可以是你需要的任何信息，只要你在datetime属性里面提供了机读时间戳。所以，下面的代码在 HTML5 中也是合法的：

<time datetime="2009-10-22">last Thursday</time>

另外，空的文本内容也是可以的：

<time datetime="2009-10-22"></time>

最后是关于pubdate。这个属性是一个 Boolean 值，所以你可以这么用：

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

如果你不喜欢这种没有值的属性，也可以这么写：

<time datetime="2009-10-22" pubdate="pubdate">October 22, 2009</time>

这个属性什么意思？它的含义有两个。如果<time>在<article>标签内，意味着这个时间戳是这篇文章的发表日期；如果<time>不在<article>内，意味着这个时间戳是整篇文档的发表日期。

下面就是我们前面所说的这篇文章的完整 HTML5 版本的代码：

<article>
  <header>
    <time datetime="2009-10-22" pubdate>
      October 22, 2009
    </time>
    <h1>
      <a href="#"
         rel="bookmark"
         title="link to this post">
         Travel day
      </a>
    </h1>
  </header>
  <p>Lorem ipsum dolor sit amet…</p>
</article>

导航

任何 web 站点的最重要的部分之一就是导航条。CNN.com 在每个页面顶部有一个“标签页”，用于链接到不同的新闻版块，比如“技术”、“健康”、“体育”等等。Google 搜索结果页面有一个类似的东西，可以让你选择 Google 的其他服务——“图像”、“视频”、“地图”等。我们这个例子也有一个导航条，可以让你访问站点的其他页面——“主页”、“博客”、“相册”和“关于”。下面是我们的导航条的代码：

<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>

当然，这在 HTML5 中同样适用。这段代码标记出四个导航项，并且没有什么标签告诉你，这是我们页面的导航。显然，你可以猜测，这其实是页面头的一部分，因为你可以阅读这些链接的信息。但是注意，对于浏览器而言，它可不知道这样的导航同其他链接有什么区别。

谁会关心站点导航的语义？第一，残疾人。为什么呢？想象一下，你的行动受到限制，不能很好的使用鼠标。为了上网，你可以使用一个浏览器插件，让它帮助你跳转到页面的主导航。再想象另外的情景：如果你是一个盲人，你可以使用一个叫做“屏幕阅读器”这么个程序，让它帮你一行行读出页面内容。一旦你读到页面标题，下一个重要的信息大概就是整个站点的主导航。如果你要快速导航，可以告诉屏幕阅读器跳转到导航条，然后开始阅读导航条的内容；如果你要快速浏览，则告诉它跳过导航，直接读内容。不管如何，正确识别出导航都是很重要的。

尽管使用<div id="nav">来标记站点导航没什么错误，但它也没有什么好处。HTML5 提供了关于导航的更有语义的标签：<nav>。

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</nav>

FAQ

Q: 跳过链接与<nav>标签兼容吗？我还要更改链接吗？

A: 跳过链接允许读者跳过导航部分。它们对于使用第三方软件阅读页面的残疾人是非常有用的。（学习为什么和如何使用跳过链接）

一旦屏幕阅读器正确识别出<nav>标签，这种跳过链接就会过时。因为屏幕阅读器可以自己提供跳过<nav>这么一种功能。但是，对于目前来说，让所有残疾人使用上支持 HTML5 的屏幕阅读器还是有些困难，所以你还是得为<nav>标签继续提供跳过链接。

脚注

终于，我们来到页面的最后一部分，也就是脚注。通常，我们会这么去写脚注：

<div id="footer">
  <p>§</p>
  <p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</div>

同样，HTML5 也支持这种写法。但它提供了另外更有语义的标签<footer>：

<footer>
  <p>§</p>
  <p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</footer>

把什么放进<footer>里面好呢？你可以把所有<div id="footer">里面的东西都放到<footer>。这是最简单的回答，事实也的确如此。HTML5 标准说，“脚注包含了这个块的作者信息、相关文档、版权数据，等等诸如此类的东西。”这就是我们在这个例子中显示的：一个简短的版权声明，一个到关于作者页面的链接。看看现在很多网站，你就有了放什么进去的思路。

CNN 的脚注里面放了版权信息、翻译页面、服务条款、隐私保护条款、“关于我们”、“联系我们”和“帮助”页面。这些都是符合<footer>精神的。Google 的主页很简洁，但是最下方也提供了“广告程序”、“商业解决方案”、“关于 Google”、版权信息和隐私条例这样的链接。所有这些都是在<footer>中。（注意，这些链接不应该在<nav>中，因为它们不是站点导航，仅仅是我们站点的一些有用的链接的集合。）“富脚注”现在也变得流行起来。看看 W3C 的脚注，它包含了三栏：“导航”、“联系 W3C”和“W3C 更新”。这种代码类似这样：

<div id="w3c_footer">
  <div class="w3c_footer-nav">
    <h3>Navigation</h3>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>Contact W3C</h3>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>W3C Updates</h3>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </div>
  <p class="copyright">Copyright ? 2009 W3C</p>
</div>

为将它转换成 HTML5 的格式，我们需要做如下处理：

• 将<div id="w3c_footer">换成<footer>；
• 将前两个<div>换成<nav>，第三个换成<section>；
• 将<h3>换成<h1>，因为他们每个都是在一个独立的块级元素中。事实上，<nav>会在文档大纲中创建一个块，就像<article>那样。

经过我们修改过的代码应该是这样的：

<footer>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </nav>
  <nav>
    <h1>Contact W3C</h1>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </nav>
  <section>
    <h1>W3C Updates</h1>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </section>
  <p class="copyright">Copyright ? 2009 W3C</p>
</footer>