Detailed explanation on the use of url, href and src

This time I will bring you a detailed explanation of the use of url, href, and src, and what are the precautions for the use of url, href, and src. 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 as URL), sometimes also commonly known as web 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:

Scheme	Access	for...
http	Hypertext Transfer Protocol	Ordinary web pages starting with http://. No encryption.
https	Secure Hypertext Transfer Protocol	Secure web page. Encrypt all information exchanged.
ftp	File Transfer Protocol	is used to download or upload files to a website.
file		A file on your computer.

4. Types of URL

4.1 Absolute URL

Absolute URL (absolute URL) displays the file Full path, meaning 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 it points to will be downloaded and applied to the document, such as JavaScript scripts, img images;

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 Browse The 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. 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 an 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; while @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:

How to use Node.js to register email activation

jQuery makes images scroll and fade in and out

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