3.5    Referencing an External Document via <link>通过<link>引用外部文档

The link element is a standalone tag for the head of the HTML document between <head> and </head>, which you can use to create a relationship between the current document and an external document. link元素是<head>和</head>之间HTML文档头部的独立标记，您可以使用它在当前文档和外部文档之间创建关系。In practice, the link element is often used to include an external CSS file in the current document. 在实践中，link元素通常用于在当前文档中包含外部CSS文件。The <link> tag can be used more than once in the head element to include multiple resources in the current document. <link>标签可以在head元素中多次使用，以在当前文档中包含多个资源。The type or purpose of the relationship depends on the value of the rel attribute used (see Table 3.4 for the attributes of the link element).关系的类型或目的取决于所使用的rel属性的值（链接元素的属性见表3.4）。

Even though the tag here is <link>, this standalone element has nothing in common with the familiar hypertext links, which are underlined and allow the user to navigate to other websites by clicking on this underlined text.尽管这里的标签是<link>，但这个独立元素与熟悉的超文本链接没有任何共同之处，这些超文本链接带有下划线，允许用户通过点击这个带下划线的文本导航到其他网站。

The following example shows you how you can include an external CSS file in the HTML document by using the link element.以下示例向您展示了如何使用link元素在HTML文档中包含外部CSS文件。

<!doctype html>
<html lang="en">
  <head>
   <title>Logical linking via link</title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <meta charset="UTF-8">
  </head>
  <body>
    <p>A simple paragraph text!</p>
  </body>
</html>

Listing 3.3     /examples/chapter003/3_5/index.html

You can specify the relationship between the document and the external document via the HTML attribute rel. 您可以通过HTML属性rel指定文档和外部文档之间的关系。Possible values for this attribute are listed in Table 3.4. In the example, the document is linked to an external stylesheet file. 表3.4列出了该属性的可能值。在该示例中，文档链接到外部样式表文件。When using this tag, you should also make sure to specify the MIME type, which I’ve done here with the type attribute and the text/css value. 使用此标记时，您还应该确保指定MIME类型，我在这里已经用type属性和text/css值指定了MIME类型。However, the most important attribute that you must always use along with the link element is the href attribute, which specifies the URL of the linked resource. 但是，您必须始终与link元素一起使用的最重要的属性是href属性，它指定了链接资源的URL。By specifying style.css, I assumed the stylesheet file is in the same directory as the HTML document.通过指定style.css，我假设样式表文件与HTML文档位于同一目录中。

Thanks to the Logical Link to the External CSS File, the <p> Element Was Formatted Here in This Example

Figure 3.5     Thanks to the Logical Link to the External CSS File, the <p> Element Was Formatted Here in This Example由于外部CSS文件的逻辑链接，本例中<p>元素的格式如下

Specifying a Base URL via the <base> Element通过<Base>元素指定基本URL

If you want to set the resources from another URL using the base element, you still need to put <base> before <link> in the head area between <head> and </head>. Example:如果你想使用base元素从另一个URL设置资源，你仍然需要在<head>和</head>之间的head区域将<base>放在<link>之前。示例：

...
<head>
  <title>Logical linking via link</title>
  <base href="https://css.sap-press.com/">
  <link rel="stylesheet" type="text/css" href="rheinwerk.css">
  <meta charset="UTF-8">
</head>
...

Here in <base>, https://css.sap-press.com/ was defined as the base URL for the references, so the reference to the CSS file https://css.sap-press.com/rheinwerk.css is added and used in <link>. 在<base>中，https://css.sap-press.com/被定义为引用的基本URL，因此对CSS文件的引用https://css.sap-press.com/rheinwerk.css在<link>中添加和使用。If the base element were located behind the link element, the rheinwerk.css file would again be expected in the same directory as the current document, which may well be intentional. 如果base元素位于link元素后面，那么rheinwerk.css文件将再次与当前文档位于同一目录中，这很可能是有意的。For this reason, you should pay attention to where you define the base element because only those references that are located after this element are extended with the base URL.因此，您应该注意定义base元素的位置，因为只有位于此元素之后的引用才会用基本URL扩展。

Regarding the rel attribute and its possible values, note that some of these values are only of limited use in practice because how (and whether) a logical link is displayed by the web browser isn’t specified. 关于rel属性及其可能的值，请注意，其中一些值在实践中的用途有限，因为没有指定web浏览器如何（以及是否）显示逻辑链接。Especially for links with the link types next, prev, first, last, author, help, search, sidebar, and license, it’s therefore more advisable (for the time being) to insert a corresponding button or text for this yourself to create a hyperlink (see Chapter 5, Section 5.2). 特别是对于具有next、prev、first、last、author、help、search、sidebar和license等链接类型的链接，因此（目前）最好自己插入相应的按钮或文本来创建超链接（见 第5章第5.2节）。The global title attribute enables you to define a caption here that will be displayed if a web browser should support one of these links, that is, the just-mentioned rel values such as next, prev, first, and so on.全局title属性允许您在此处定义一个标题，如果web浏览器支持其中一个链接，即刚才提到的rel值，如next、prev、first等，则将显示该标题。

Attribute属性

Meaning意思

href

Specifies the URL to the resource to be linked. This attribute must be used.指定要链接的资源的URL。必须使用此属性。

hreflang

Defines the language of the resource to be linked.定义要链接的资源的语言。

media

Specifies for which medium/device the target resource in href has been optimized. 指定href中的目标资源已针对哪种介质/设备进行了优化。For example, this attribute is popular with stylesheets to define multiple styles for different media types.例如，此属性在样式表中很受欢迎，可以为不同的媒体类型定义多种样式。

rel

Sets the relationship or relatedness (the type of link) between the current document and the external resource in href. Possible values are as follows:在href中设置当前文档与外部资源之间的关系或相关性（链接类型）。可能的值如下：

  • alternate: Links to an alternative presentation form of the current page. ：指向当前页面的替代演示形式的链接。It’s used, for example, to link an RSS or Atom feed to a page. Other similar values are feed and feed alternate.例如，它用于将RSS或Atom提要链接到页面。其他类似的值是feed和feed alternate。

  • author: Links to another page with information about the author of the current document. ：链接到另一个页面，其中包含有关当前文档作者的信息。You can also use another resource such as a mailto: link to an email address of the author.您还可以使用其他资源，如mailto:链接到作者的电子邮件地址。

  • archives: links to a previous version of certain documents, such as in a blog archive.：指向某些文档的先前版本的链接，例如博客存档中的文档。

  • help: Links to a help document.：指向帮助文档的链接。

  • icon: Allows you to assign a favicon to the web page, which will be displayed as a mini graphic in the bookmarks or in the tabs of the browsers. ：允许您为网页分配一个集合夹图标，该图标将在书签或浏览器的选项卡中显示为迷你图形。In this context, there are two Apple-specific values for the iPhone or iPad available, apple-touch-icon and apple-touch-startup-icon, which I’ll also explain in Chapter 5, Section 5.2.在这种情况下，iPhone或iPad有两个苹果特有的值，apple-touch-icon和apple-touch-startup-icon，我也将在第5章第5.2节中解释。

rel

  • license: Links the current page to a page that contains the usage rights for the contents of the current page.：将当前页面链接到包含当前页面内容使用权限的页面。

  • next, prev: Creates a link from the current page to the next (next) or previous page (prev).：创建从当前页面到下一页（next）或上一页（prev）的链接。

  • prefetch: Links an external web page, which probably could be called next by the user, to the current page. ：将用户接下来可能调用的外部网页链接到当前页面。This could cause the browser to already load this page into a cache even though the user is still viewing the current page. 这可能会导致浏览器已经将此页面加载到缓存中，即使用户仍在查看当前页面。When the user then opens this page, it can load faster from the cache.当用户打开此页面时，它可以从缓存中更快地加载。

  • pingback: Specifies the website of a pingback server, which is very useful especially for blogs to handle pingbacks for the current document.：指定pingback服务器的网站，这对于博客处理当前文档的pingback非常有用。

  • search: Links the current document to another document where a search across the whole website is possible.：将当前文档链接到另一个文档，可以在整个网站上进行搜索。

  • stylesheet: Probably the most often used and common value for rel, as it links an external CSS file to the current document.：可能是rel最常用和最常见的值，因为它将外部CSS文件链接到当前文档。

  • tag: A simple tag as a linked resource that applies to the current document.：一个简单的标记，作为应用于当前文档的链接资源。

size

Specifies the size(s) for the resource to be linked. Makes sense only if the attribute is rel="icon". 指定要链接的资源的大小。只有当属性为rel="icon"时才有意义。Example: size="16x16" (one size), size="16x16 32x32" (two sizes), or size="any" (any size).示例：size="16x16"（一种尺寸），size="16x16 32x32"（两种尺寸）或size="any"（任意尺寸）。

type

Specifies the MIME type for the document to link to (e.g., text/css for a CSS file).指定要链接到的文档的MIME类型（例如，css文件的text/css）。

Table 3.4     HTML Attributes for the <link> HTML Element<link>HTML元素的HTML属性

If you take a closer look at the rel values in Table 3.4, you might notice that there are two different types of values here: (1) the attribute values for pure hypertext links, and (2) values for links to external resources. 如果你仔细看看表3.4中的rel值，你可能会注意到这里有两种不同类型的值：（1）纯超文本链接的属性值，以及（2）指向外部资源的链接的值。rel values to external resources are icon, pingback, prefetch, and stylesheet. All other values are pure hypertext links.外部资源的rel值是icon、pingback、prefetch和stylesheet。所有其他值都是纯超文本链接。

Confusion with the "rel" Attribute Values与“rel”属性值混淆

Besides the rel attribute values shown here, you’ll probably come across other values on the internet. 除了这里显示的rel属性值外，您可能还会在互联网上遇到其他值。It’s quite hard to keep track of this as well as of what works and what doesn’t work on which web browsers. 很难跟踪这一点，以及在哪些网络浏览器上哪些有效，哪些无效。But I’m sure there’ll be some movement in this regard in the future. 但我相信未来在这方面会有一些进展。However, you should note that many of those values you find on the web are merely suggestions. 然而，你应该注意到，你在网上找到的许多价值观只是建议。Going into this topic in greater depth is beyond the scope of this chapter; however, you can find a good overview and recommendations at http://microformats.org/wiki/existing-rel-values. 更深入地探讨这个话题超出了本章的范围；但是，您可以在以下网址http://microformats.org/wiki/existing-rel-values找到一个很好的概述和建议。The W3C website also provides a useful overview at www.w3.org/TR/html5/links.html#sec-link-types.W3C网站还提供了有用的概述www.w3.org/TR/html5/links.html#sec-link-types。