The difference between src and href attributes

There is a difference between src and href, which can be used confusingly. src is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.

src is the abbreviation of source, which points to the location of external resources. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document. For example, js scripts, img pictures, frames and other elements.

<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 is true for elements such as pictures and frames, similar to the resource pointed to. Embed within the current tag. This is why the js script

is placed at the bottom instead of the head.

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

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