What are the differences in functions and usage between the src attribute and the href attribute?

The src attribute and href attribute are commonly used attributes in HTML and are used to load external resources. Although they have similar purposes, there are some differences in usage and purpose.

1. src attribute:
   The src attribute is used to specify external resources to be embedded in the document. It is mainly used to introduce external script files and media files into HTML documents. It can be used in the following situations:
2. Introducing external JavaScript files: Link external JavaScript files to HTML pages through the src attribute. For example: <script src="script.js"></script>
3. Introducing external images: Embed external image files into HTML pages through the src attribute. For example: <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="image">
4. Introduce external audio and video files: embed external audio or video files through the src attribute to the HTML page. For example: <audio src="audio.mp3"></audio>

##It should be noted that when using the src attribute, the external resource must be downloadable Yes, the browser will request resources based on the value of the src attribute, and these resources will be loaded onto the page together. Therefore, the browser will pause the rendering of the page before loading the resources specified by the src attribute.

href attribute:
2. The href attribute is used to specify the relationship between the document and external resources. It is mainly used to introduce external style sheets and hyperlinks into HTML documents. It can be used in the following situations:
   
Introducing external CSS style sheets: link external CSS files to HTML pages through the href attribute. For example:
Create a hyperlink: Create a link to other pages or other resources through the href attribute. For example:
4. Link

It should be noted that when using the href attribute, External resources will not be downloaded. Only when the user clicks the link, the browser will request and download the resource, and display the resource in a new page. In addition, the browser will not pause the rendering of the page when loading the resource specified by the href attribute.

In summary, there are certain differences in the use and purpose of the src attribute and the href attribute. The src attribute is used to embed downloadable resources and will pause page rendering during the page loading process; while the href attribute is used to specify the relationship between the document and external resources, mainly used to introduce style sheets and create hyperlinks. Here are some code examples:

<!-- 使用src属性引入外部JavaScript文件 -->
<script src="script.js"></script>

<!-- 使用src属性引入外部图片 -->
<img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="image">

<!-- 使用src属性引入外部音频文件 -->
<audio src="audio.mp3" controls></audio>

<!-- 使用href属性引入外部CSS样式表 -->
<link href="style.css" rel="stylesheet">

<!-- 创建超链接 -->
<a href="http://www.example.com">Link</a>

By using src and href properly, we can better control the performance of the page and how external resources are loaded.

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