HTML 資源鏈接

2018-10-10 15:31 更新

HTML資源鏈接


link 元素在HTML文檔和之間創(chuàng)建關(guān)系外部資源，CSS樣式表或Javascript文件。

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

  • href - 指定鏈路元素引用的資源的URL。
  • hreflang - 指定鏈接資源的語言。
  • media - 指定鏈接內(nèi)容用于的設(shè)備。
  • rel - 指定文檔和鏈接資源之間的關(guān)系類型。
  • sizes - 指定圖標(biāo)的大小。
  • type - 指定鏈接資源的MIME類型，例如text/css 或 image/x-icon.

sizes 屬性已在HTML5中添加，屬性 charset ， rev 和 target 在HTML5中已過時。

rel 屬性值決定瀏覽器如何處理link元素。以下列表顯示 rel 屬性的常見值。

  • alternate - 指向文檔的替代版本的鏈接，例如翻譯成另一種語言的鏈接。
  • author - 鏈接到文檔的作者。
  • help - 與當(dāng)前文檔相關(guān)的幫助的鏈接。
  • icon - 指定圖標(biāo)資源。
  • license - 指向與當(dāng)前文檔相關(guān)聯(lián)的許可證的鏈接。
  • pingback - 指定pingback服務(wù)器，允許當(dāng)其他網(wǎng)站鏈接到博客時自動通知博客。
  • prefetch - 預(yù)加載資源。
  • stylesheet - 加載外部CSS樣式表。

例子

為了演示link元素，創(chuàng)建了一個名為 styles.css 的樣式表，其具有以下內(nèi)容。

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

要應(yīng)用這個樣式表，我們可以使用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.o2fo.com">Visit www.o2fo.com</a>
</body>
</html>

您可以使用多個 link 元素來加載多個外部資源。外部樣式表可以在多個文檔中重用。


預(yù)加載資源

您可以要求瀏覽器預(yù)加載資源。

下面的代碼顯示了使用 link 元素來指定預(yù)加載。

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

上面的代碼將 rel 屬性設(shè)置為 prefetch，并指定HTML頁面 page2.html 被加載，期望用戶將使用此頁面。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號