如何在 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>