Can src appear in HTML5?

src can appear in HTML5. src is the attribute used to set the element mapping URL in HTML5; the src attribute is the abbreviation of source in HTML5, which means source. It can be used as the media resource of the media element "HTNLDediaElement" Mapping URL, such as "4e7c86c342a3058645e72e359dd02945", "401a8135cac0bdf0cd0f582027eef404".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

HTML5 src attribute

The src attribute is the abbreviation of source, which means source. It is generally used as the media resource mapping URL of the media element HTNLDediaElement. Example resource paths for pictures and scripts:

<img src="image/demo.png">
<iframe src="inner.html">
<script src="demo.js"></script>

src loading media resources is always blocked, and other resources on the page will be suspended for processing. This is one reason why the script tag is usually loaded at the end of the document.

Extension:

href is the abbreviation of Hypetext Reference, which means hypertext reference. Since it is a non-media resource, an external reference, that is, a resource that does not need to be displayed on the page, load this When planting resources, it is non-blocking. Example link and a tag:

<link rel="stylesheet" src="style/demo.css">
<a href="./demo">demo</a>

In summary, src is the mapping of the media resource path, which is blocking loading, and href is the hyperlink, which is non-blocking.

We can understand that media resources need to be actually displayed on the page and are real data in the DOM structure, so they will block loading, and a hyperlink is equivalent to an attribute or a reference. There is no need to render real resources to the page, and there is no need to block page loading.

One issue worth noting is that js scripts are not media resources, nor are they data required by the DOM. Why do js scripts use src while css can use href? In fact, this is a decision made at the beginning of the design. Maybe the designer thinks that the execution of the js script will change the page, that is, change the DOM. Of course, it needs to be loaded together with the page, while css is just the page style and will not change the DOM, that is. It belongs to a hyperlink. From this understanding, we know that whether the page is blocked has nothing to do with the size of the referenced resource, but is related to whether the page DOM is actually changed.

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Can src appear in HTML5?. For more information, please follow other related articles on the PHP Chinese website!