如何在 HTML 中新增資源引用?


在 HTML 中,<link> 標籤用於新增資源引用。link 定義了外部文件和當前文件之間的關係。

<link> 標籤也用於連結外部樣式表和向我們的網站新增 favicon,<link> 標籤包含屬性值。以下是 HTML 中 <link> 標籤的用法:

<link rel="stylesheet" href="styles.css">

幾乎所有瀏覽器都支援<link> 標籤,它也支援全域性和事件屬性。

屬性

<link> 標籤的屬性如下所示:

  • crossorigin - crossorigin 屬性的值為 anonymous 或 use-credentials,用於指定元素如何處理跨域請求。

  • href - href 屬性的值為 URL,用於指定連結文件的位置。

  • hreflang - hreflang 屬性的值為語言程式碼,用於指定連結文件中文字的語言。

  • media - media 屬性的值為媒體查詢,指定連結文件將在哪個裝置上顯示。

  • referrerpolicy - referrerpolicy 屬性的值為 no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url,用於指定獲取資源時使用哪個推薦者。

  • rel - rel 屬性的值為 alternate、author、dns-prefetch、help、icon、license、next、pingback、preconnect、prefetch、preload、prerender、prev、search、stylesheet,用於指定當前文件和連結文件之間的關係。

  • sizes - size 屬性的值為 高x寬,用於指定連結資源的大小。僅限於 rel="icon"。

  • title - title 屬性用於定義首選或備用樣式表。

  • type - type 屬性的值為媒體型別,用於指定連結文件的媒體型別。

示例

在下面的示例中,我們嘗試在 HTML 中新增資源引用:

<!DOCTYPE html>
<html>
<head>
   <title>HTML link Tag</title>
   <link rel="stylesheet" href="stylenew.css">
</head>
<body>
   <div id="contentinfo">
      <h1>TutorialsPoint</h1>
      <h2>Technical content</h2>
      <p>Welcome to our website. We provide tutorials on various subjects.</p>
   </div>
</body>
</html>

示例

以下是另一個在 HTML 中新增資源引用的示例。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Link Tag</title>
   <link rel="stylesheet" type="text/css" href="stylenew.css" hreflang="en-us">
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>HTML Link Tag</h2>
</body>
</html>

更新於:2023年10月10日

2K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.