HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何在 HTML 中添加资源引用?

htmlfront end technologyweb development更新于 2024/7/25 10:20:17

在 HTML 中，<link> 标签用于添加资源引用。链接定义了外部文档与当前文档之间的关系。

<link> 标签也用于链接外部样式表以及在网站上添加图标。<link> 标签由属性值组成。以下是 HTML 中 标签的用法 -

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

几乎所有浏览器都支持 <link> 标签，并且它还支持全局属性和事件属性。

属性

<link> 标签的属性如下所示 −

  • crossorigin − crossorigin 属性的值是匿名 use-credentials，用于指定元素如何处理跨域请求。

  • href − href 属性的值为 URL，用于指定链接文档的位置。

  • hreflang − hreflang 的值为语言代码，用于指定链接文档中文本的语言。

  • media − media 的值为媒体查询，它指定链接文档将在什么设备上显示。

  • referrerpolicy − referrerpolicy 的值为 no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin 和 unsafe-url，referrepolicy 属性用于指定在获取资源时使用哪个 referrer。

  • rel − rel 属性的值包括 alternative、author、dns-prefetch、help、icon、license、next、pingback、preconnect、prefetch、preload、prerender、prev、search、stylesheet。rel 属性用于指定当前文档与链接文档之间的关系。

  • 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>

相关文章

有用资源

打印 下一节:如何在 HTML5 中显示文档的主要内容? ❯❮ 上一节:如何在 HTML 中创建图像地图?