首页 HTML5 Dive Into HTML5:它的含义是什么?(续五)

Dive Into HTML5:它的含义是什么?(续五)

3 1.8K

日期和时间

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

这次我们要说的是下面的<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>

3 评论

考考拉 2012年3月11日 - 04:52

请教一下哦~标签中datetime里的内容页面中是看不见的么?我在IE9中没看见引号里面的内容,那那些日期写的有什么用呢?机读时间戳是什么意思呢?

回复
DevBean 2012年3月11日 - 10:03

是的,datetime 属性值在页面是不可见的,只有 <time></time> 标签之间的文本值才是页面可见的。所谓“机读”,就是给机器读取用的。意思就是,虽然机器(你可以理解成搜索引擎之类的)不认识 <time></time> 之间的东西,但是它能识别出 datetime 属性值,也就相当于知道了具体时间。由于 <time></time> 的文本值实际就是对 datetime 的一种人可读的说明,因此我们可以认为 datetime 也就让机器理解了这个时间标签。以后作搜索引擎优化时也就可以有机制让搜索引擎知道文章时间这些信息了。

回复
考考拉 2012年3月12日 - 18:05

哦 我明白了 非常感谢~~~

回复

发表评论

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2