What are the differences between src and href in HTML? What's the difference in usage?

This article mainly introduces the difference between src and href in HTML and their usage.

In our front-end development process, everyone must be very familiar with src and href when used alone, but if they are compared together, it may not be explained clearly for a while.

And regarding the difference between src and href, the frequency of appearing in front-end interview questions is also very high.

Below we will introduce and summarize the difference between src and href in detail.

1. href is the abbreviation of Reference, indicating a hypertext reference.

href refers to the location of the network resource, established with the current element (anchor) or current document ( link), used for hyperlinks.

Usage such as:

<a href="m.sbmmt.com">m.sbmmt.com</a>

or

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

, etc.

2. src is the abbreviation of source, indicating resource introduction

src points to the location of the external resource, and the pointed content will be embedded in the document at the location of the current tag;

When requesting the src resource, the resource it points to will be downloaded and applied into the document, such as js scripts, img pictures, frames and other elements. .

When the browser parses this element, it will suspend 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, which is similar to embedding the pointed resource. within the current label. This is also why the js script is placed at the bottom instead of the head.

Usage such as:

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

or

<img src="xx.jpg" />

, etc.

Note : src and href cannot be replaced with each other. We use src on replaceable elements, whereas href is used to establish a relationship between the document in question and the external resource.

This article is about the difference between src and href. I hope it will be helpful to friends in need!

The above is the detailed content of What are the differences between src and href in HTML? What's the difference in usage?. For more information, please follow other related articles on the PHP Chinese website!