如何在 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+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告