如何在 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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告