阿里云主机折上折
  • 微信号
Current Site：Index > `<link>` - External resource link

`<link>` - External resource link

Author：Chuan Chen 阅读数：25612人阅读 分类： HTML

The <link> tag in HTML is used to define the relationship between a document and external resources, commonly employed for linking stylesheets, icons, or other metadata. Its flexibility and versatility make it an indispensable part of front-end development.

Basic Syntax of the <link> Tag

The <link> tag is an empty element and does not require a closing tag. It must be placed within the <head> section and can include multiple attributes to define its behavior. The basic syntax is as follows:

<link rel="relationship" href="resource-url" type="mime-type" />

Where:

  • The rel attribute defines the relationship between the current document and the linked resource.
  • The href attribute specifies the URL of the linked resource.
  • The type attribute (optional) specifies the MIME type of the linked resource.

Common Use Cases

Linking External Stylesheets

The most common use is to link external CSS files:

<link rel="stylesheet" href="styles.css" type="text/css" />

rel="stylesheet" tells the browser that this is a stylesheet, and href points to the path of the CSS file. type="text/css" can be omitted in modern browsers since CSS is the default type.

Linking Website Icons (Favicon)

The <link> tag is also commonly used to specify website icons:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Modern browsers also support various icon formats and sizes:

<link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180" />

Preloading Resources

Using rel="preload" tells the browser to load important resources in advance:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

The as attribute specifies the resource type, helping the browser set the correct priority and request headers.

Linking Alternative Stylesheets

Multiple stylesheets can be defined, allowing users to choose:

<link rel="stylesheet" href="default.css" title="Default" />
<link rel="alternate stylesheet" href="high-contrast.css" title="High Contrast" />
<link rel="alternate stylesheet" href="dark-mode.css" title="Dark Mode" />

Users can switch between these stylesheets via the browser interface.

Advanced Usage

Using Media Queries

The media attribute allows loading different resources based on device characteristics:

<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)" />

Linking Canonical Versions of Documents

Prevents SEO issues with duplicate content:

<link rel="canonical" href="https://example.com/preferred-url" />

Linking RSS Feeds

<link rel="alternate" type="application/rss+xml" href="feed.xml" title="RSS Feed" />

Linking PWA Manifest Files

For Progressive Web Apps:

<link rel="manifest" href="app.webmanifest" />

Cross-Origin Resource Handling

The crossorigin attribute is used for handling cross-origin resources:

<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />

Performance Optimization Tips

DNS Prefetching

<link rel="dns-prefetch" href="//cdn.example.com" />

Preconnecting

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Prefetching

<link rel="prefetch" href="next-page.html" as="document" />

Browser Compatibility Considerations

While most modern browsers support various features of the <link> tag, certain aspects require attention:

  • IE11 and earlier versions have limited support for some rel values.
  • Mobile browsers may handle preloaded resources differently.
  • Certain resource types may require specific MIME type configurations on the server.

Practical Application Examples

Complete Head Section Link Example

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="alternate" type="application/rss+xml" href="/feed.xml" title="RSS Feed">
  <link rel="canonical" href="https://example.com/current-page">
</head>

Dynamically Loading Stylesheets

Creating <link> elements dynamically via JavaScript:

function loadStylesheet(url) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
}

loadStylesheet('dynamic-styles.css');

Security Considerations

When using the <link> tag, keep the following in mind:

  • Ensure external resources come from trusted sources.

  • Use the integrity attribute to verify resource integrity:

    <link rel="stylesheet" href="https://example.com/style.css"
      integrity="sha384-..." crossorigin="anonymous">

  • Use prefetch cautiously to avoid wasting bandwidth.

Debugging Tips

Inspecting <link> tags in developer tools:

  1. Check the Network panel to confirm resource loading.
  2. Verify if any 404 errors occur.
  3. Ensure the rel and type attributes are correct.
  4. Use Lighthouse to audit preloading effectiveness.
做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：-文档元数据

下一篇：<style>-内嵌CSS样式

Front End Chuan

Front End Chuan, Chen Chuan's Code Teahouse 🍵, specializing in exorcising all kinds of stubborn bugs 💻. Daily serving baldness-warning-level development insights 🛠️, with a bonus of one-liners that'll make you laugh for ten years 🐟. Occasionally drops pixel-perfect romance brewed in a coffee cup ☕.

相关文章