Learn the important details about the difference between src and href!

The difference between src and href, the details you must know!

When writing HTML pages, we often encounter the two attributes src and href. They are both used to reference external resources, such as script files, style files, or images. Although their purposes are similar, there are some differences in their specific usage and details.

First of all, the src (source) attribute is mainly used to embed external resources, such as pictures or scripts. It is used to specify the address of a resource and embed its content into the current document. The href (hypertext reference) attribute is mainly used to specify the address of the linked document.

Secondly, the src attribute is only used for those resources that need to be embedded in the document. For example, the src attribute of the img element is used to specify the address of the image resource, and the src attribute of the script element is used to specify the address of the JavaScript script file, etc. . The href attribute is mainly used to specify the address of the linked document to be opened. For example, the href attribute of the a element is used to specify the address of the document to be linked, and the href attribute of the link element is used to specify the address of the style file to be imported.

Next, the src attribute is required, while the href attribute is optional. In other words, if we want to embed an external resource, such as an image or script, we must use the src attribute, otherwise the resource will not be loaded correctly. The href attribute is optional. When we do not use the href attribute, the current document will be used as the target document to jump by default.

In addition, the src attribute is used to request resources from the server and embed these resources into the current document. The href attribute is mainly used to specify the link address and open a new document.

Finally, the src attribute is parsed relative to the current HTML document path, and the href attribute is parsed relative to the currently linked document path. This means that if we reference an image resource in an HTML document using a relative path, then the relative path is relative to the current HTML document. And if we use the path specified by the href attribute in a link, it will also be resolved relative to the document path of the current link.

The following are some specific code examples to help us better understand the differences between src and href:

<!-- 图片资源 -->
<img  src="/static/imghwm/default1.png"  data-src="images/pic.jpg"  class="lazy" alt="Learn the important details about the difference between src and href!" >

<!-- JavaScript脚本 -->
<script src="scripts/script.js"></script>

<!-- 链接文档 -->
<a href="https://www.example.com">Example</a>

<!-- 引入样式文件 -->
<link href="styles/style.css" rel="stylesheet">

In the above code examples, we can see the specific usage of the src and href attributes. . The src attribute of the img element specifies the address of the image resource, the src attribute of the script element specifies the address of the JavaScript script file, the href attribute of the a element specifies the link document address, and the href attribute of the link element specifies the imported style file. address.

By studying these code examples, we can better understand the differences between src and href attributes and avoid confusion or incorrect use in actual development.

In summary, the src attribute is mainly used to embed external resources into the current document, while the href attribute is mainly used to specify the address of the linked document. The src attribute is required, while the href attribute is optional. At the same time, the src attribute is parsed relative to the current HTML document path, and the href attribute is parsed relative to the document path of the current link.

I hope that this article can help everyone better understand the differences between src and href, as well as their specific usage and details in HTML development.

The above is the detailed content of Learn the important details about the difference between src and href!. For more information, please follow other related articles on the PHP Chinese website!