What is the difference between href and src, link, and @import?

This time to bring you the href and src, link and @import, what is the difference between the use of href and src, link and @import notes, the following is the actual case, together to see.

The difference between href and src:

href (hypertext Reference): Hypertext references, commonly used tags have link, a, etc., used to link the referenced external resources. Defines a link or relationship between the current element or the current document and the desired anchor or resource defined by the current attribute, such as:
<link href="style.css" rel="stylesheet" />

SRC (source): Introduction of resources, the introduction of SRC content is an essential part of the page. The introduced content embeds the current resource into the location defined by the current document element, which is commonly used: IMG, script, IFRAME, and so on. Such as:
<script src="script.js"></script>

The loading and processing of the page before the browser is downloaded, compiled, and executed will be paused (when the browser resolves to that element, it pauses the browser's rendering), which is why it is recommended to put the JS file on the bottom of the load. IMG tab similar to this, the browser pauses loading until the image is extracted and loaded.

The difference between link and @import:

Both are external references to CSS, but the differences are as follows:

difference 1: link is xhtml tag, in addition to loading CSS, you can also define other transactions such as RSS, @import belong to the CSS category, can only load CSS.

Difference 2: When the link refers to CSS, it is loaded at the same time when the page is loaded; @import need to load the page when it is fully loaded.

Difference 3: Link is XHTML label, no compatibility problem, @import is proposed in CSS2.1, the lower version of the browser is not supported.

Difference 4: Link supports using JavaScript to control the DOM to change style, while @import does not support it.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:

How property value inheritance in CSS is used

Double-wing layout and the Holy Grail layout and graphic explanation