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

This time I will bring you the difference between href and src, link and @import, what are the precautions when using href and src, link and @import, the following is a practical case, let's take a look one time.

The difference between href and src:

##href (Hypertext Reference): Hypertext reference, commonly used tags are link, a, etc., are used to link referenced external resources. Define a link or relationship between the current element or current document and the required anchor or resource defined by the current attribute, such as:

<link href="style.css" rel="stylesheet" / >

src(source): Introduce resources. The content of the imported src is an essential part of the page. The imported content will embed the current resource into the position defined by the current document element. Commonly used ones include: img, script, iframe, etc. For example:

<script src="script.js"></script>

Loading and processing of the page before the browser downloads, compiles, and executes this file will be paused (when the browser parses the element, the browser's rendering will be paused), which is why it is recommended to load the js file at the bottom. img

TabSimilarly, the browser pauses loading until the image is fetched and loaded.

The difference between link and @import:

Both are ways of externally referencing CSS, but the differences are as follows :

Difference 1: link is an XHTML tag. In addition to loading CSS, you can also define other transactions such as RSS; @import belongs to the CSS category and can only load CSS. .

Difference 2: When the link references CSS, it is loaded at the same time when the page is loaded; @import requires the page to be fully loaded before loading.

Difference 3: link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers.

Difference 4: link supports Use JavaScript to control the DOM to change the style; while @import does not support it.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use attribute value inheritance in css

Double Flying Wing Layout and Holy Grail Layout Detailed Graphical Explanation

The above is the detailed content of What is the difference between href and src, link and @import?. For more information, please follow other related articles on the PHP Chinese website!