Detailed meanings of URLs, href, src in the front-end

First, the concept of the URL

Uniform Resource Locator (or unified resource Locator/location address, URL address, etc., English: Uniform Resource Locator, often abbreviated as a URL), sometimes also known as the Web address (URL). As on the Internet, the address of the standard resource on the Internet.

Ii. format of the URL 2.1 standard format

Protocol type: [//server address [: Port number]][/resource-level UNIX file path] file name? query

2.2 Full format

Protocol type: [//[credential information required to access resource @] server address [: Port number]][/resource-level UNIX file path] file name? query
Where "Access credential information @;: port number; query; #片段ID" are optional.

Third, the syntax rules of the URL

For example URL http://segmentfault.com/html/..., the following syntax rules must be observed:

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

3.1 Description

(1) Scheme-defines the type of Internet service. The most common type is the HTTP
(2) host-defines the domain host (the default host for HTTP is www)
(3) domain-defines Internet domain names, such as w3school.com.cn
(4):p ORT-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 in the root directory of the Web site).
(6) FileName-Defines the name of the document/resource

3.2 URL Schemes

Here are some of the most popular scheme:

Iv. type of URL 4.1 absolute URL

An absolute URL (absolute URL) displays the full path of the file, which means that the absolute URL itself is in a location independent of the location of the referenced actual file.

4.2 Relative URLs

The relative URL (relative URL) describes the location of the destination folder as a reference point in the folder that contains the URL itself.
In general, for files on the same server, you should always use relative URLs, which are easier to enter, and more convenient when moving pages from the local system to the server, as long as the relative position of each file remains the same, and the link remains valid.

The following are some of the special symbols used to establish the path, and the meanings they represent.

（1）.：代表目前所在的目录，相对路径。 如：文本 或 （2）..：代表上一层目录，相对路径。 如：文本 或 （3）../../：代表的是上一层目录的上一层目录，相对路径。 如：（4）/：代表根目录，绝对路径。 如：文本 或 

V. The concept of HREF 5.1 specification interpretation

href (hypertext Reference) specifies the location of a network resource to define a link or relationship between the current element or the current document and the desired anchor or resource defined by the current attribute.

5.2 Popular Understanding

HREF is not intended to refer to a resource, but to establish a connection so that the current tag can be linked to the destination address.

Vi. the concept of SRC

Source (abbreviated), which points to the location of the external resource, to which the content will be applied to the current label in the document.

Vii. differences between HREF and SRC 7.1 Request resource types are different

(1) HREF points to the location of the network resource, establishing a connection between the current element (anchor) or the current document (link).

(2) When the SRC resource is requested, the resource it points to is downloaded and applied to the document, such as JavaScript script, img image;

7.2 Different effect results

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

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

7.3 Browser parsing methods are different

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

(2) when the browser resolves to, it pauses the download and processing of other resources until the resource is loaded, compiled, executed, and so on, as is the case with the picture and frame, similar to applying the pointing resource to the current content. This is why it is recommended to put the JS script on the bottom instead of the head.

Viii. the difference between link and @import

Both are external ways of referencing CSS, but there are some differences:

(1) Link is the XHTML tag, in addition to the ability to load CSS, but also to define other transactions such as RSS, and @import belongs to the CSS category, can only load CSS.

(2) When the link refers to CSS, it is loaded at the same time when the page loads; @import need to load the page completely.

(3) Link is XHTML label, no compatibility problem, @import is proposed in CSS2.1, the lower version of the browser is not supported.

(4) Link supports the use of JavaScript to control the DOM change style; @import is not supported.

Detailed meanings of URLs, href, src in the front-end