The characteristics of the SRC
1. Refer to external sources
Examples include script elements, img elements, iframe elements, and video elements
2. Replaces the content of the element itself
The following two pieces of code, for example, print a 2 instead of a 1
// test.js
console.log(2)
Copy the code
<script src="./test.js">
console.log(1)
</script>
Copy the code
The reason is that the test.js code is embedded in the current script element, causing the original content to be replaced.
3. Downloads of other resources are suspended
When the browser parses an element that uses SRC, it suspends the downloading of other resources until the SRC reference is loaded, compiled, and executed. This is why script elements are recommended at the bottom of HTML structures. Right
The characteristics of the href
1. Hyperlink
For example, the A tag and link tag represent the connection between external resources and the page
2. Does not replace the content of the element itself
In this example, click on the A TAB to jump to another page, but the image content is not replaced
<a href="www.baidu.com">
<img src="xxx"/>
</a>
Copy the code
3. Downloads of other resources will not be suspended
Things like CSS that affect the look and feel of a page can be loaded first in the header of an HTML structure
Differences in core ideas
- SRC represents part of the site and does not affect the use of the site
- Href represents the attached resources of the site, and does not affect the core logic and structure of the site
Why use href for CSS references?
- As href implies, CSS is an attached resource of a website and does not affect the core logic and structure of a website
- It can also be simply attributed to the legacy of history