Detailed explanation of knowledge about url, href and src in front-end

This time I will bring you a detailed explanation of the knowledge about url, href, and src in the front-end. What are the precautions about url, href, and src in the front-end. The following is a practical case, let's take a look.

1. The concept of URL

Uniform Resource Locator (or Uniform Resource Locator/location address, URL address, etc., English: Uniform Resource Locator, often abbreviated (for URL), sometimes also commonly known as web page address (web address). Just like a house number on the Internet, it is the address of a standard resource on the Internet.

2. URL format

2.1 Standard format

Protocol type:[// Server address[:port number]][/resource level UNIX file path]File name? Query

2.2 Full format

Protocol type:[//[Access resources Required credential information@]server address[:port number]][/resource level UNIX file path]file name?query
where [access credential information@;:port number;?query;#fragment ID] are all options Fill in the items.

3. URL syntax rules

For example, the URL http://segmentfault.com/html/index.asp must comply with the following Syntax rules:

scheme: //host.domain:port/path/filename

3.1 Description

(1) scheme - Define Internet services type. The most common type is http

(2) host - defines the domain host (the default host for http is www)

(3) domain - defines the Internet domain name, such as w3school.com.cn

(4):port - defines the port number on the host (the default port number for http is 80)

(5) path - defines the path on the server (if omitted, the document must be located in the root directory of the website).

(6)filename - defines the name of the document/resource

3.2 URL Schemes

The following are some of the most popular schemes:

4. Types of URL

4.1 Absolute URL

Absolute URL (absolute URL) displays the file Full path, which means that the location of the absolute URL itself has nothing to do with the location of the actual file being referenced.

4.2 Relative URL

A relative URL uses the location of the folder containing the URL itself as a reference point to describe the location of the target folder.

In general, you should always use relative URLs for files on the same server, they are easier to type and more convenient when moving pages from the local system to the server, as long as each file is relative The position remains unchanged and the link is still valid.

The following are several special symbols used to establish paths and their meanings.

(1) .: Represents the current directory, relative path. For example: Text or

(2) ..: represents the upper directory, relative path. For example: text or

(3) ../../: represents the upper-level directory The upper directory, relative path. For example:

(4) /: represents the root directory, absolute path. For example: [text] (/abc) or

5. The concept of href

5.1 Specification Explanation

href (Hypertext Reference) specifies the location of a network resource, thereby defining a link between the current element or current document and the required anchor or resource defined by the current attribute. Link or relationship.

5.2 Popular understanding

The purpose of href is not to reference resources, but to establish a connection so that the current tag can be linked to the target address.

6. The concept of src

source (abbreviation) points to the location of an external resource. The pointed content will be applied to the current document. The location of the label.

7. The difference between href and src

7.1 Different resource types requested

(1 ) href points to the location of the network resource and establishes a connection with the current element (anchor) or current document (link).

(2) When requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as JavaScript script, img image;

7.2 The results are different

(1) href is used to establish a connection between the current document and the referenced resource;

(2) src is used to replace the current content;

7.3 Browser parsing methods are different

(1) If added to the document, the browser will recognize the document as a CSS file, download the resource in parallel and will not stop processing the current document processing. This is why it is recommended to use the link method to load CSS instead of using the @import method.

(2) When the browser parses it, it will suspend the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for pictures and frames, which is similar to applying the pointed resource to Current content. This is why it is recommended to place js scripts at the bottom instead of the head.

8. The difference between link and @import

Both are ways of externally referencing CSS, but there are certain differences:

(1) link is the XHTML tag . In addition to loading CSS, it can also define other transactions such as RSS; while @import belongs to the CSS category and can only load CSS.

(2) When link refers to CSS, it is loaded at the same time when the page is loaded; @import requires the page to be fully loaded before loading.

(3) link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers.

(4) link supports using Javascript to control the DOM to change the style; but @import does not support it.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS uses regular expressions to determine date of birth

Detailed explanation of Vue filter formatting method

The above is the detailed content of Detailed explanation of knowledge about url, href and src in front-end. For more information, please follow other related articles on the PHP Chinese website!