src is the abbreviation of search, meaning to search for objects. This is used when placing it in pictures or frames <img src=http://img.baidu.com/img/logo-zhidao.gif>
Its function allows the web page to search for this object (it can be a picture or a web page, etc.) and display it.
href is the abbreviation of hyperrefresh. It means update, refresh. Used for hyperlinks, for example, <a href=www.baidu.com>Baidu</a>
There is a difference between src and href, which can be confused and used. 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 the external resource. The content pointed to will be embedded in the current tag location in the document. When requesting the src resource, the resource it points to will be downloaded and applied to the document, such as js scripts, img images, frames and other elements.
<script src =js.js></script>
When the browser parses this element, the download and processing of other resources will be paused until the resource is loaded, compiled, and executed. The same is true for elements such as images and frameworks, similar to embedding the pointed resource into the current tag. This is also why js scripts are placed at the bottom instead of at the head.
href is the abbreviation of Hypertext Reference, which points to the location of the network resource, establishes a link between the current element (anchor point) or the current document (link), if we add it in the document
<link href=common.css rel=stylesheet/>
Then the browser will recognize that the document is a css file, and will download the resources in parallel and will not stop processing the current document. This is also why it is recommended to use the link method to load css instead of the @import method.