⚡️ warning, high energy ahead:
In this article, be on the lookout for the following emoji packs:
- White bookmark: 🔖, for level 1 title;
- The orange quadrilateral: 🔶, for secondary headings;
- The little blue quadrilateral: 🔹, representing the level 3 title;
- Yellow lightning: ⚡️, for emphasis;
🔖 1. Hyperlinks
🔶 1.1 What is a hyperlink
Hyperlinks are one of the most exciting innovations the Internet has to offer, and they have been a feature of the Internet since its inception, making it a connected network. ⚡️ hyperlinks enable us to link our documents to any other document (or other resource), as well as to specific parts of the document, and we can offer applications on a simple web site (as opposed to native applications or something else that must be installed first). Almost any web content can be converted into a link, and clicking (or activating) a hyperlink will redirect the Web browser to another web address (URL).
Note: urls can point to HTML files, text files, images, text documents, video and audio files, and any other content that can be saved on the network. If the browser doesn’t know how to display or process the file, it will ask you if you want to open the file (you need to select the appropriate local application to open or process the file) or download the file (you can process it later).
Take 🌰 for example:
On the home page of qq.com, each element of the blue background navigation bar is a hyperlink, providing navigation functions.
🔶 1.2 Hyperlink classification
🔹 1.2.1 Basic links
Take 🌰 for example:
<a href="https://juejin.cn/user/1151943918512216"> my nuggets home page </a>Copy the codeThe result looks like this: my Nuggets home page
The URL fragment is the name before the hash tag (#) that specifies the internal target location (THE ID of the HTML element) in the current document.
Urls are not limited to Web (HTTP) -based documents, but can also use any protocol supported by the browser. For example, file:, FTP:, and mailto: work correctly in most browsers.
⚡ Note: you can return to the top of the page using href=”#top” or href=”#” links. This behavior is a feature of HTML5.
🔹 1.2.2 block-level links
In addition to text, you can convert some content into links or even block-level elements. If you want to convert an image to a link, simply place the image element in the middle of the tag.
Take 🌰 for example:
<a href="https://juejin.cn/user/1151943918512216">
<img src="https://cdn.jsdelivr.net/gh/jolin27144/blog@master/images/html/1-intruduction/4-creating-hyperlinks/qq.jpeg" alt="Block level chaining">
</a>
Copy the code🔖 2. URI, URL, and URN
⚡️ A Uniform Resource Identifier (URI) is a string used to identify an Internet Resource.
🔶 2.1 Relationship between URIs and urls and UrNs
Let’s take a look at their history (skip it if you’re not interested) :
As mentioned at the beginning of the article, it was the birth of hyperlinks that provided a way for the Internet to “connect”.
At the same time, the URL was introduced as a “short string of hyperlinked target resources”.
In later years of development, to distinguish: ⚡️ “provide resource access” ⚡️ “resource tag” these two strings.
Two technical terms were born: “Uniform resource Locator” and “Uniform resource Name.”
These are what we call urls and UrNs today.
Later, it was realized that both were actually based on the same concept of “resource identification.” Hence RFC 3986 proposes that urls and UrNs are subsets of URIs.
It is also suggested that future specifications and related documents should use the generic term “URI” rather than the more restrictive terms “URL” and “URN”.
⚡ ️ summary:
-
Urls and UrNs are subsets of URIs.
-
In addition to identifying resources, urls provide a primary access mechanism for locating resources by describing them.
-
URN identifies the resource with a unique, unchangeable name, whether it is nonexistent or unavailable
The figure above shows the relationship between URIs and urls and UrNs.
🔶 2.2 URI format
-
Scheme: Indicates the protocol used to access resources. For example, HTTP and HTTPS. There are other less common schemes, such as FTP, LDAP, File, news, etc.
-
Between Scheme and authority, there must be three special characters ⚡️ “://”, which separates scheme from the rest. Note: URN has only “:”.
-
Authority: indicates the host name of the resource. It is usually in the form of host:port, that is, the host name and port number. The host name can be an IP address or a domain name and must be present otherwise the browser will not be able to find the server. But port numbers can sometimes be omitted
-
Path: starts with “/”. Using similar file system “directory” “path” representation, because the early Internet computers are UNIX system, so the UNIX “/” style was adopted. In fact, it is easier to understand, it is the same as “://” after Scheme.
-
Query: Appends some additional modifier parameters.
-
Fragment: An “anchor” or “tag” inside the resource located by the URI that the browser can jump to after retrieving the resource. But fragment identifiers can only be used by clients like browsers, not servers. That is, the browser will never send a URI with a #fragment to the server, and the server will never process a fragment of a resource in this way.
🔶 2.3 Absolute and relative urls
⚡️ Absolute URL: Points to a location defined by its absolute location on the Web. Includes protocol and domain name.
Take 🌰 for example:
-
If the index.html page is in the projects directory.
-
The projects directory is located at the root of the Web services site.
-
The domain name of the web site is http://www.example.com.
-
This page can be accessed through http://www.example.com/projects/index.html.
(or access through http://www.example.com/projects/, because in the absence of specific URL, most web services will default access load index. The HTML this page)
http://www.example.com/projects/index.html is the absolute URL.
⚡️ Relative URL: Points to a location associated with the file you are linking to.
Take 🌰 for example:
-
If we visited http://www.example.com/projects/index.html this file.
-
To go to a PDF file in the same directory as index.html, use the file name as the URL. Such as project – brief. PDF.
-
If the PDF file is in the projects subdirectory PDFS. The relative path is PDFS /project-brief.pdf. (corresponding to the absolute URL is www.example.com/projects/pd…
PDFS /project-brief. PDF is the relative URL.
🔖 3. Path
⚡️ URL Searches for files using the path.
🔶 3.1 Path used in the URL
The root directory of this directory structure is called Resume. When working on a website, you will have a directory containing the entire site.
In the root directory, we have a resume.html, which serves as the home page
Our root directory also has two directories — dist and images, which contain an index.html file and an img.png file, respectively.
-
⚡️ points to the current directory: if resume.html wants to include style.css. Because it is in the same directory as the current file. You can use “./” to indicate the current directory, or omit it.
The URL is style.css or./style.css
-
⚡️ points to a subdirectory: if resume.html wants to include img.png in the images directory.
The URL is: the images/img. PNG
-
⚡️ to the parent directory: To include a hyperlink to images/img.png in dist/index.html, you must go back to the parent directory and then back to the images directory. Returns the last directory level using two English dots for “..” .
The URL is:.. /imgaes/img.png
🔖 summary
- ✔️ Understand HTML hyperlinks
- ✔️ Understand URIs and urls and UrNs
- ✔️ Understand the path used in the URL
🔖 Resources
- Creating hyperlinks, developer.mozilla.org/en-US/docs/…
<a>: The Anchor element, Developer.mozilla.org/zh-CN/docs/…- What is a URL? , developer.mozilla.org/zh-CN/docs/…
- Uniform Resource Identifier (URI), zh.wikipedia.org/wiki/ Uniform Resource Identifier…
- Unified Resource Locator (URL), zh.wikipedia.org/wiki/ Unified Resource Locator…
- Uniform Resource Identifier (URN), zh.wikipedia.org/wiki/ Uniform Resource Name…
- “#” “? “in URL The effect of number “&”, www.cnblogs.com/kaituorensh…
- RFC 3986, tools.ietf.org/html/rfc398…