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


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

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

<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 屬性的值為 HeightxWidth,用於指定連結資源的大小。僅適用於 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.