src
The source source
Usage scenarios
SRC points to the location of the external resource, and the content SRC points to is embedded in the document at the location of the current tag
- Img tags
- The script tag
- The iframe label
href
Hypertext Reference Hypertext reference
Usage scenarios
Used to establish a link between the current element and the document
- The link tag
- A label
The difference between
1. The browser starts the href referenced document and downloads it without stopping the processing of the current document. “This is why it is recommended to introduce CSS in link mode instead of import.”
2. When the browser parses a SRC reference, it pauses the browser rendering until the resource is loaded. “This is why it is recommended to put javascript scripts at the bottom.”
supplement
“The difference between link and @import“
1. Differences in affiliation
Link is an XHTML tag that can define things like RSS in addition to loading CSS, while @import is a CSS tag that can only load CSS
2. Different loading sequences
When link references CSS, it loads at the same time as the page loads, while @import waits for the page to load
3. Compatibility is different
Link is an XHTML tag with no compatibility issues, while @import was introduced after CSS2.1 and is not supported by older browsers
4. DOM controllability is different
Link supports Javascript control over DOM styling, while @import does not
conclusion
Href is used to establish a relationship (link) between the current page and the referenced resource, while SRC replaces the current tag. When href is encountered, the page loads subsequent content in parallel; SRC, on the other hand, needs to be loaded before the browser can proceed.