Detailed explanation of the differences between href and src, link and @import in css

This article mainly introduces the differences between href and src, link and @import, and explains the noun definitions and application scenarios. Friends in need can refer to it. I hope it can help everyone.

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:

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:

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. The img tag is similar, with the browser pausing 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, it 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 using JavaScript to control the DOM to change the style; @import does not support it.

Related recommendations:

Detailed explanation of the difference between nth-child and nth-of-type in CSS3

Detailed explanation of the difference between addEventListener and on

What is the difference between br, p and DIV in html

The above is the detailed content of Detailed explanation of the differences between href and src, link and @import in css. For more information, please follow other related articles on the PHP Chinese website!