Difference between src and href attributes

There is a difference between src and href, and they can be confused. src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.

src is the abbreviation of source, which points to the location of external resources. The content pointed to will be embedded in the location of the current tag in the document. When the src resource is requested, the resource it points to will be downloaded and applied to the document, such as js scripts, img images, frame elements, etc.

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

When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same applies to elements such as images and frames, which is similar to embedding the pointed resource into the current tag. This is also why you should put js scripts at the bottom instead of at the top.

href is the abbreviation of Hypertext Reference, which points to the location of a network resource and establishes a link with the current element (anchor) or the current document (link). If we add

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

Then the browser will recognize the document as a CSS file, and will download the resources in parallel without stopping the processing of the current document. This is why it is recommended to use the link method to load CSS instead of the @import method.