济南盈讯科技有限公司

提供行业解决方案

别再纠结了！尽管把你的烦恼交给我们吧，我们会将问题转化为一整套解决方案提供给你！方案的前期咨询根本不需你花一分钱。还不马上咨询？

提供软件客制服务

或许一套通用软件就能让你从烦恼中解脱出来，那就先到我们的软件产品仓库中选一款吧！我们还可以为你提供现有软件的扩展定制，即客户化定制。

提供软件实施服务

购买软件与汉堡包不同，软件产品和软件实施相结合才能发挥作用！没有良好的软件实施，必败！而采用我们的方案或产品，免费获得软件实施支持。

提供网站建设服务

坚持用心建站！ 您只需告知所需要到达的终点，我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护，享受全程的贴心服务。

提供网站维护服务

何必专门招人负责网站维护呢？你可能反驳招人能兼干其他工作，但是这样就不够专注。而我们提供的网站后期维护更专业，更专注，更划算。

补充材料：有关文档中 元素的更多知识

  • 打印
详细资料
发布于 2012年9月18日
点击数：3020

引言

在本教程的第13篇文章中你了解到了在 HTML 文档的 head 部分中有哪些重要的内容。在这篇教程里，我会更深入地探讨这一部分的知识，还会讲到一些其他的——较少用到的——内容，你可以将这些内容添加到 HTML 文档的 head 部分；这些东西的重要性虽然没有那么高，但是还是很有用的。学完了这篇教程，你就会知道如何将几份 HTML 文档组合成一个更大的文件集，什么是收藏夹图标，怎样使用它，以及关于 RSS 的一切。在你开始学习之前，先点击此处下载本文附带的压缩文件，这样你就能照着例子来学习了。本文目录如下：

 

文档关系——将若干 HTML 文档组合成一个集合

Web 是作为文档的储存库而产生的，由此而来的 HTML 的一个特征就是文档关系。文档关系定义了一份文档与另一份文档之间是如何关联的，举例来说就是，某文档是否是其他文档的上一个或下一个文档，或者是否是整个系列文档的索引。

从某种意义上来讲，在第13篇文章中你已经学过这部分的内容了，就在你通过 link 元素将一份样式表应用到某个文档中，来改变该文档的外观和感觉的时候：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Breeding Dogs - Tips about Alsatians</title>
  <link rel="stylesheet" type="text/css" media="screen" href="/styles.css">
  <link rel="stylesheet" type="text/css" media="print" href="/printstyles.css">
</head>
<body>
</body>
</html>

这份文档与其它文档的关系是通过 link 元素和 rel 或 rev 属性来定义的。 rel 属性（关系）定义了被链接文档到当前文档的关系， rev 属性（逆关系）则定义的是当前文档到被链接文档的关系。

不必过于担心 rev 属性——虽然让人有点晕，但你很少会用到它。

对于 rel 和 rev 属性来说，并没有强制规定要用哪些属性值，但却有浏览器和索引工具所支持的分类，因此在大多数情况下，使用 rel 时你都应该考虑到下面这些分类：

home
当前集合的主文档
index
当前集合的索引
contents
当前集合的目录列表
search
当前集合的搜索页面
glossary
当前集合的词汇表
help
当前集合的帮助页面
first
当前集合的第一篇文档
previous
当前文档在当前集合逻辑顺序上的前一篇文章
next
当前文档在当前集合逻辑顺序上的后一篇文章
last
当前集合的最后一篇文档
up
当前集合文件层级中的上一级文档
copyright
当前集合的版权信息
author
当前集合的作者信息页面

大多数浏览器不会对文档关系信息作任何处理。然而有的浏览器会跟踪链接并在后台中加载文档，这样读者看起来就会感觉页面载入更快了。在这方面真正例外的浏览器是 Opera ，它有一个额外的导航栏，你可以通过在菜单中选择视图> 工具栏> 导航栏 来打开该导航栏。打开之后你就会在一个额外工具栏中看到文档中定义的链接关系。图1显示了 Opera 中的 W3C 的 HTML 标准文档。

Screenshot of the Opera browser showing the navigation bar

图1： Opera 在一个特别的导航栏中显示了当前文档的链接关系。

即使文档关系信息不会在视觉意义上显示出来，但在 title 属性中提供一些可读的说明，来解释所链接到的文档是什么，也不失为一个好办法，因为仅仅只有文件名是不够的

下面我们来看看如何用链接关系将几份文档组合成一个集合。我们举个例子，某个在线教程的首页start.html 可能涵盖了下面几份文档：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Link relationship example</title>
  <link rel="contents" title="table of contents" href="/toc.html">
  <link rel="next" title="next: chapter one" href="/chapter1.html">
</head>
<body>
  <h1>Course example</h1>
  <p>This would be the cover page of an article series or course</p>
  <ul>
    <li><a href="/chapter1.html" rel="next">Let's start with Chapter One</a></li>
  </ul>
</body>
</html>

第一章课程如下(chapter1.html)：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Chapter One - Link relationship example</title>
  <link rel="contents" title="Table of Contents" href="/toc.html">
  <link rel="home" title="Home Page" href="/start.html">
  <link rel="prev" title="previous: Home Page" href="/start.html">
  <link rel="next" title="next: Second Chapter" href="/chapter2.html">
</head>
<body>
  <h1>Chapter One</h1>
  <p>This would be the chapter one page of an article series or course</p>
  <ul>
    <li><a href="/start.html" rev="prev">Back to Start</a></li>
    <li><a href="/toc.html" rel="contents">Table of contents</a></li>
    <li><a href="/chapter2.html" rel="next">Go on to Chapter Two</a></li>
  </ul>
</body>
</html>

第二章 (chapter2.html)：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Link relationship example</title>
  <link rel="contents" title="Table of Contents" href="/toc.html">
  <link rel="home" title="Home page" href="/start.html">
  <link rel="prev" title="previous: first chapter" href="/chapter1.html">
</head>
<body>
  <h1>Chapter Two</h1>
  <p>This would be the second chapter page of an article series or course</p>
  <ul>
    <li><a href="/chapter1.html" rev="prev">Back to chapter 1</a></li>
    <li><a href="/toc.html" rel="contents">Table of contents</a></li>
  </ul>
</body>
</html>

最后是目录(toc.html)：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Table of contents - Link relationship example</title>
  <link rel="home" title="home page" href="/start.html">
</head>
<body>
  <h1>Table of contents</h1>
  <ul>
    <li><a href="/chapter1.html">Chapter One - about stuff</a></li>
    <li><a href="/chapter2.html">Chapter Two - about other stuff</a></li>
  </ul>
  <ul>
    <li><a href="/start.html" rel="home">Back to home</a></li>
  </ul>
</body>
</html>

你也可以在该文档的链接中用 rel 和 rev 属性来告诉浏览器和辅助技术，这些锚跟链接关系有关。

你也可以用 rel 和 rev 来作其它用途，比如微格式——点击这里查看 XFN Microformat 的一些用法。

连接到某文档的备选版本

链接到与当前文档有某种关系的其它文档，当然也包括了链接到该文档的不同语言的版本，或者不同版式的版本。为了实现这两种链接，你可以在一个链接中加入一个值为 alternate 的 rel 属性来指示一个备选版本。

译文

译文是使用文档互连很重要的对象。比如说，可能会出现这种情况：一份文档的某种语言的版本非常受欢迎，那些不懂这种语言的访客希望自己也能获取该文档的信息。通过从源文档链接到备选语言版的文档，就能使另一种语言的读者更容易地理解并进而宣传该文档的内容，这样就有可能使备选语言版的文档同样受欢迎。下面的例子告诉了我们该如何定义另一种语言的版本(languageexample.html)；注意语法——这是非常容易理解的：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Multiple Languages example</title>
  <link rel="contents" title="table of contents" href="/toc.html">
  <link rel="next" title="next: chapter one" href="/chapter1.html">
  <link rel="alternate" title="The course in Dutch" type="text/html" hreflang="nl" href="/../nl/start.html">
  <link rel="alternate" title="The course in German" type="text/html" hreflang="de" href="/../de/start.html">
</head>
<body>
  <h1>Course example</h1>
  <p>This would be the cover page of an article series or course</p>
  <ul>
    <li><a href="/chapter1.html" rel="next">Let's start with Chapter One</a></li>
  </ul>
  <ul>
    <li>Other languages:
      <uL>
        <li><a href="/../de/start.html" lang="de" hreflang="de">Deutsch</a></li>
        <li><a href="/../de/start.html" lang="nl" hreflang="nl">Nederlands</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

如果要提供整个网站的国际版本，比起上面这份文档来，还需要进行多得多的研究，我们希望在本系列课程的后面还会推出专门针对这个问题的教程。你可能已经注意到 hreflang 和 lang 属性是自己从来没见过的。链接和锚上的 hreflang 属性说明了被链接文件的语言，而 lang 属性则说明了该属性所属元素内的文本的语言。这对可访问性来说是非常重要的，因为语音合成软件需要在各种语言之间转换发音。

从互联网产生的时候起，语言差异就是一个突出的问题（其实在网络产生之前几千年就已经是这样了），此外还有另一种类型的替代网页，在你爬网的时候应该见到过很多——信息源（比如 RSS 信息源）。信息源是非常流行的，尤其是对那些经常改变的文档，比如新网站来说更是如此。下面我们就来谈谈这个问题。

信息源(Feeds)

一个信息源就是一份文档，包含了一些浓缩的信息，按照年月日的顺序详细列出了你的站点的最新更新。用户可以订阅信息源，从而了解你的网站最近发生了什么变化，而不必访问你的站点。他们可以通过信息源阅读器之类的工具，比如 Google Reader， Netvibes 或 Bloglines，来订阅信息源。一些最新的浏览器（比如 Opera ）和 e-mail 客户端（比如Mac Mail，或 Windows 的 Outlook）也可以处理并显示信息源。你可以通过网站地址旁边的 RSS 图标来识别某个网站是否提供了信息源，如图2所示：

Screenshot of the Opera browser showing a RSS icon in the navigation bar

图2： Opera 显示了地址旁边的橙色 RSS 图标，表示该网站提供了信息源。

信息源页面是使用 HTML 或某种 XML 格式，如 RSS 或 Atom ，它们很少是手动生成的。大多数时候个人发布系统会替你完成这项工作，而你只需要在你的文档开头部分用正确的meta元素链接到XML文件，就可以向全世界提供你网站的信息源了。下面代码是从我的博客 http://wait-till-i.com 上摘录下来的，并且指向 RSS 信息源（feedexample.html）：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="alternate" type="application/rss+xml" title="Wait till I come!  RSS  Feed" href="http://www.wait-till-i.com/feed/">
  <title>Wait till I come!</title>
</head>
<body>
</body>
</html>

对于那些经常更新的具有大量内容的网站(如博客网站和网络相册)来说，提供一份信息源是非常明智的，通过信息源阅读工具以及订阅信息源，你就可以节省下大量的网上冲浪和查看的时间。

如果你的网站更新并不频繁，但因为你的内容很多，希望用形象提示来提醒人们注意你的网站的话，你可能会考虑在人们的收藏夹列表中使用快捷图标来吸引他们的注意力。这就是我接下来要讨论的问题。

让收藏夹变得更有趣——收藏夹图标的使用

我要谈的最后一个话题就是快捷图标，或者说收藏夹图标。这些图标是一些小图片，文件格式为.ico——如果你放一个在你的web服务器上的话，就可以用它来在用户的收藏夹列表中你网站的条目旁边显示出一个小图标，如图3所示：

Screenshot of bookmark list with icons next to the entries

图3：书签旁边的图标方便了人们记住网站。你可以通过使用快捷图标 meta 元素来在访客的收藏夹里添加这样一个图标。

由于支持 ico 格式的图像制作工具不多，因此添加快捷图标的最大障碍就是按照正确的格式来创建图标。有一个解决办法是用免费的在线工具 genfavicon.。一旦图标做好了，将它添加到你的文档就像添加其它 meta 元素一样简单，只需要将 rel 值设为“Shortcut Icon”就可以了，如下面例子 (favicon-example.html) 所示：


<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Shortcut Icon example</title>
  <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>Example of a shortcut icon</h1>
</body>
</html>

如果你用浏览器打开这个文档，你就会在地址栏中的地址旁看到 Opera 图标。如果你将这个网页添加到收藏夹，同样的图标就会出现在书签旁。

总结

本文的全部内容到此结束，同时关于 HTML 文档的 head 部分的内容也到此结束了。其实我还有其它东西要讲，但是它们是很高级的应用，而且通常不是什么好办法——这里我所讲的内容，以及在第13篇文章中讲的内容，应该已经提供了所有进一步学习所需的信息。在本文中我谈到了：

  • 在 link 元素中用 rel 和 rev 属性来定义文档关系
  • 链接到同一份文档的备选版本，比如译文或信息源
  • 在文档中添加快捷图标，以便显示在收藏夹和浏览器标签中

练习题

  • 为什么定义链接关系很有意义，即使它们并不会显示出来？
  • 你该如何链接到一个搜索页面？
  • 向你的访客提供信息源有什么用处？你用什么 rel 值来链接到信息源？
  • 如果你要链接到另一种语言的文档的话，哪些地方是需要弄清楚的？
  • 如果你将示例文档在文本编辑器中打开的话，将会发现另一种我们没有讨论过的 meta 元素，其属性值为 content-type，还有叫做 utf-8 的东西。什么是 utf-8 ？

最新发布

热门点击

友情链接

联系我们

  • 网址：www.yercent.com
  • 电话：+86-531-66683968
  • 传真：+86-531-61365117
  • QQ:1251420996或564590102
  • Email： 该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。
当前位置：首页 建站知识 补充材料：有关文档中 元素的更多知识
版权 © 2025 济南盈讯科技有限公司 保留所有权利 鲁ICP备13014166号 济南盈讯科技有限公司 始终坚持以用户价值为归依，用心服务，不断协助用户构筑新的管理模式！