HTML文档之间创建关系外部资源

时间：2020-09-23 23:20:04 收藏：0 阅读：53

HTML资源链接

link 元素在HTML文档和之间创建关系外部资源，CSS样式表或Javascript文件。

link 元素具有局部属性: href，rel，hreflang，media，type，sizes 。

href - 指定链路元素引用的资源的URL。
hreflang - 指定链接资源的语言。
media - 指定链接内容用于的设备。
rel - 指定文档和链接资源之间的关系类型。
sizes - 指定图标的大小。
type - 指定链接资源的MIME类型，例如text/css 或 image/x-icon.

sizes 属性已在HTML5中添加，属性 charset ， rev 和 target 在HTML5中已过时。

rel 属性值决定浏览器如何处理link元素。以下列表显示 rel 属性的常见值。

alternate - 指向文档的替代版本的链接，例如翻译成另一种语言的链接。
author - 链接到文档的作者。
help - 与当前文档相关的帮助的链接。
icon - 指定图标资源。
license - 指向与当前文档相关联的许可证的链接。
pingback - 指定pingback服务器，允许当其他网站链接到博客时自动通知博客。
prefetch - 预加载资源。
stylesheet - 加载外部CSS样式表。

例子

为了演示link元素，创建了一个名为 styles.css 的样式表，其具有以下内容。

a  {
    background-color: grey;
    color: red;
    padding: 0.5em;
}

要应用这个样式表，我们可以使用link元素，如下面的代码所示。

<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <p>This is a test.</p>
  <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
</body>
</html>

您可以使用多个 link 元素来加载多个外部资源。外部样式表可以在多个文档中重用。

预加载资源

您可以要求浏览器预加载资源。

下面的代码显示了使用 link 元素来指定预加载。

<!DOCTYPE HTML>
<html>
<head>
<link rel="prefetch" href="/page2.html" />
</head>
<body>
  <p>This is a test.</p>
  <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
  <a href="page2.html">Page 2</a>
</body>
</html>

上面的代码将 rel 属性设置为 prefetch，并指定HTML页面 page2.html 被加载，期望用户将使用此页面。