为何<link>标签的href属性表现得如同src属性？技术解析

Let’s start with the standard definitions to set the baseline:

• href (Hypertext Reference)：This attribute creates a relationship between the current document and an external resource. The browser doesn’t automatically load the resource unless the context demands it—it just marks that a connection exists. Examples:
  • <a href="page.html">：This is just a clickable link; the browser only requests page.html when the user actually clicks it.
  • <link rel="author" href="bio.html">：This associates the document with an author page, but the browser won’t load bio.html on its own.
• src (Source)：This attribute tells the browser to replace the element with the external resource. The browser must load and parse the resource immediately, because the element’s purpose depends entirely on it. Examples:
  • <img src="photo.jpg">：The <img> element is just a placeholder until the image loads—without the resource, it’s empty.
  • <script src="app.js">：The browser downloads and runs the script right away (unless defer/async is set) because the script is part of the page’s functionality.

Your confusion is totally valid—<link> with rel="stylesheet" does behave like src in that the browser loads the resource automatically. But this isn’t a flaw in the href definition; it’s a browser optimization for critical resources.

Here’s the breakdown:

• When you use <link rel="stylesheet">, the browser recognizes that CSS is essential to rendering the page correctly. So it immediately requests and applies the linked stylesheet. But this is still an association, not a replacement: the <link> element itself isn’t replaced by the CSS—instead, the CSS is used to style the existing document.
• For other rel values (like rel="preload", rel="alternate", or rel="license"), the browser won’t auto-load the resource. It just maintains the relationship, acting exactly like a regular href attribute.

The core distinction still holds:

• href = associate (browser may load based on context)
• src = replace (browser must load immediately)

The <link rel="stylesheet"> case is just a special scenario where the browser prioritizes loading the associated resource because it’s critical to the page’s presentation.

内容的提问来源于stack exchange，提问作者Jonathan002