Hyperlink is the core of the Internet. It allows users to jump from one URL to another on the page, thereby linking all resources together.
URL is the address to which the link points. A link can not only point to another webpage, but also point to resources such as text, images, and files. It can be said that all resources on the Internet can be accessed through links.
The link is indicated by the
<a> tag. After the user clicks, the browser will jump to the specified URL. Below is a typical link.
The above code defines a hyperlink. The browser displays "Wikipedia", and the text will be underlined by default, indicating that this is a link. After the user clicks, the browser jumps to the URL specified by the
Not only text can be placed inside the
<a> tag, but other elements such as paragraphs, images, multimedia, etc. can also be placed.
<a href="https://www.example.com/"> <img src="https://www.example.com/foo.jpg" /> </a>
In the above code, the inside of the
<a> tag is an image. When the user clicks on the image, it will jump to the specified URL.
<a> tag has the following attributes.
href attribute gives the URL to which the link points. Its value should be a URL or anchor.
An example of a complete URL has been given above, and an example of an anchor point is below.
In the above code, the value of the
href attribute is
# plus the anchor name. After clicking, the browser will automatically scroll and stop at the location of the anchor point of
demo in the current page.
hreflang attribute gives the language of the URL pointed to by the link, which is purely indicative and has no actual function.
<a href="https://www.example.com" hreflang="en">Sample URL</a>
The above code indicates that the language of the URL pointed to by the
href attribute is English.
The value of this attribute is the same as the general attribute
lang, and the language code can refer to the introduction of the
lang attribute in the "Attributes" chapter.
title attribute gives descriptive information about the link. When the mouse hovers over the link, the browser will display the value of this attribute in the form of a prompt block.
<a href="https://www.example.com/" title="hello">Example</a>.
In the above code, if the user mouses over the link, the text prompt
hello will appear.
target attribute specifies how to display the opened link. It can be opened in a designated window or in
<p><a href="http://foo.com" target="test">foo</a></p> <p><a href="http://bar.com" target="test">bar</a></p>
In the above code, both links are opened in a window named
test. First click on the link
foo, the browser finds that there is no window called
test, so it creates a new window, named it
test, and opens
foo.com in this window. Then, the user clicks on the link
bar. Since there is already a
test window, the browser opens
bar.com in this window, replacing the opened
The value of the
target attribute can also be one of the following four keywords.
_self: The current window is open, this is the default value. -
_blank: A new window opens. -
_parent: The upper window is opened, which is usually used for child windows opened from the parent window, or links in
<iframe>. If the current window has no upper window, this value is equivalent to
_top: The top-level window is opened. If the current window is the top-level window, this value is equivalent to
<a href="https://www.example.com" target="_blank">Sample link</a>
After clicking the above code, the browser will create a new window, open the link in this window, and the new window has no name.
Note that when using the
target attribute, it is best to use it together with
rel="noreferrer" to avoid security risks.
rel attribute indicates the relationship between the link and the current page.
<a href="help.html" rel="help">Help</a>
rel attribute of the above code indicates that the link is the help document of the current page.
The following are some common
rel attribute values.
alternate: Another form of the current document, such as translation. -
author: author link. -
bookmark: Permanent address used as a bookmark. -
external: The external reference document of the current document. -
help: Help link. -
license: License link. -
next: The next article in a series of documents. -
nofollow: Tell search engines to ignore the link, which is mainly used for content submitted by users to prevent someone from attempting to increase the search ranking of the link by adding a link. -
noreferrer: Tell the browser not to send the current URL as the
Referer field of the HTTP header when opening the link, so that the source of the click can be hidden. -
window.opener property when opening the link, which improves security. -
prev: The previous article in a series of documents. -
search: The search link of the document. -
tag: The tag link of the document.
referrerpolicy attribute is used to precisely set the behavior of the browser sending the
Referer field of the HTTP header when the link is clicked.
This attribute can take the following eight values:
no-referrer indicates that the
Referer field is not sent,
same-origin indicates that the
Referer field is sent only when the same source, and
origin indicates that only the source information (protocol + domain name + port) is sent. For other explanations, please refer to the HTTP documentation.
ping attribute specifies a URL. When the user clicks, a POST request will be sent to the URL, which is usually used to track the user's behavior.
type attribute gives the MIME type of the link URL, such as whether it is a web page, an image or a file. It is also a purely informative attribute and has no actual function.
<a href="smile.jpg" type="image/jpeg">Sample picture</a>
In the above code, the
type attribute indicates that this is an image.
download attribute indicates that the current link is used for downloading, rather than redirecting to another URL.
<a href="demo.txt" download>Download</a>
After clicking the above code, a download dialog box will appear.
Note that the
download attribute will only take effect when the link and the URL are of the same origin. In other words, the link should belong to the same website as the URL.
download attribute has a value set, then this value is the name of the downloaded file.
<a href="foo.exe" download="bar.exe">Click to download</a>
In the above code, the original file name of the downloaded file is
foo.exe. After clicking, the file name prompted in the download dialog box is
Note that if the header of the server's HTTP response is set with the
Content-Disposition field after the link is clicked, and the value of this field is inconsistent with the
download property, then this field takes precedence, and the file name set by it will be displayed when downloading.
Another use of the
download attribute is that some addresses are not real URLs, but data URLs, such as the URLs beginning with
data:. At this time, the
download attribute can specify the name of the downloaded file for the virtual URL.
After clicking on the above link, a virtual web page will open with
Hello World! displayed on it.
<a href="data:,Hello%2C%20World!" download="hello.txt">click</a>
After clicking the above link, the content of the downloaded file
hello.txt is "Hello, World!".
The link can also point to an email address, using the
mailto protocol. After the user clicks, the browser will open the default mail program of the machine, allowing the user to send mail to the specified address.
<a href="mailto:firstname.lastname@example.org">Contact us</a>
In the above code, the link points to the email address. After clicking, the browser will open an email address, allowing you to send emails to
In addition to the mailbox, the mail protocol also allows several other mail elements to be specified.
subject: Subject -
cc: CC -
bcc: Bcc -
body: the content of the message
The method of use is to append these email elements to the email address in the form of a query string.
<a href="mailto:email@example.comfirstname.lastname@example.org&subject=The%20subject&body=The%20body" >Send mail</a >
In the above code, the email link not only contains the email address, but also contains email elements such as
body. The values of these elements need to be URL escaped, for example, spaces are converted to
It is also allowed not to specify an email address, as shown below. At this time, the user fills in the email address he wants to send in the mail program, which is usually used for mail sharing web pages.
<a href="mailto:">Tell a friend</a>
If it is a page browsed by a mobile phone, you can also use the
tel protocol to create a phone link. When the user clicks on the link, the phone will be awakened and the call can be made.
The above code is in the mobile phone, clicking the link will evoke the dialing interface, and you can directly dial the specified number.
<link> tag is mainly used to link the current webpage with related external resources, and is usually placed in the
<head> element. The most common use is to load CSS style sheets.
<link rel="stylesheet" type="text/css" href="theme.css" />
The above code loads the style sheet
theme.css for the web page.
In addition to the default style sheet, a web page can also load an alternative style sheet, that is, a style sheet that does not take effect by default and needs to be manually switched by the user.
<link href="default.css" rel="stylesheet" title="Default Style" /> <link href="fancy.css" rel="alternate stylesheet" title="Fancy" /> <link href="basic.css" rel="alternate stylesheet" title="Basic" />
In the above code,
default.css is the default style sheet, and the default will take effect.
basic.css are replacement stylesheets (
rel="alternate stylesheet"), which are not effective by default. The
title attribute is required here. It is used to list the names of these style sheets in the browser menu for the user to choose instead of the default style sheet.
<link> can also load the favicon icon file of the website.
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
When visiting by mobile phones, websites usually need to provide icon files of different resolutions.
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
The above code specifies the 114-pixel and 72-pixel icons required by the iPhone device.
<link> is also used to provide related links to documents, for example, the following is the RSS Feed address of the given document.
<link rel="alternate" type="application/atom+xml" href="/blog/news/atom" />
rel attribute represents the relationship between external resources and the current document, and is a required attribute of the
<link> tag. It can, but is not limited to, the following values.
alternate: A link to another manifestation of the document, such as a printed version. -
author: link to the author of the document. -
dns-prefetch: require the browser to perform DNS query of the specified URL in advance. -
help: Link to help document. -
icon: Load the icon file of the document. -
license: License link. -
next: The link to the next article in the series. -
pingback: The URL to receive the pingback request of the current document. -
preconnect: requires the browser to establish an HTTP connection with the given server in advance. -
prefetch: requires the browser to download and cache the specified resources in advance for use on the next page. It has a lower priority, and the browser may not download it. -
preload: require the browser to download and cache the specified resources in advance, and the current page will be used later. It has a higher priority and the browser must download it immediately. -
prerender: requires the browser to render the specified link in advance. In this case, when the user opens the link later, it will be displayed immediately, which feels very fast. -
prev: Indicates that the current document is one of a series of documents, here is a link to the previous document. -
search: Provide a search link for the current webpage. -
stylesheet: Load a style sheet.
Here are some examples.
<!-- Author information--> <link rel="author" href="humans.txt" /> <!-- Copyright information--> <link rel="license" href="copyright.html" /> <!-- Another language version--> <link rel="alternate" href="https://es.example.com/" hreflang="es" /> <!-- Contact information--> <link rel="me" href="https://google.com/profiles/someone" type="text/html" /> <link rel="me" href="mailto:email@example.com" /> <link rel="me" href="sms:+15035550125" /> <!-- Historical data--> <link rel="archives" href="http://example.com/archives/" /> <!-- Directory--> <link rel="index" href="http://example.com/article/" /> <!-- Navigation--> <link rel="first" href="http://example.com/article/" /> <link rel="last" href="http://example.com/article/?page=42" /> <link rel="prev" href="http://example.com/article/?page=1" /> <link rel="next" href="http://example.com/article/?page=3" />
Preloading of resources
In some cases, you need the browser to pre-load certain resources, that is, to cache the resources first, and when they are used, they do not need to be downloaded from the Internet and can be used immediately. Preprocessing instructions can do this.
There are mainly the following five types of preloading.
<link rel="preload"> tells the browser to download and cache resources (such as scripts or style sheets) as soon as possible. This command has a higher priority and the browser will definitely execute it. It is useful when the resource is needed a few seconds after loading the page. After downloading, the browser will not perform any operation on the resource, the script is not executed, and the style sheet is not applied. It's just a cache, and when other things need it, it's immediately available.
<link rel="preload" href="image.png" as="image" />
In addition to higher priority,
rel="preload" has two advantages: one is to allow the type of preloaded resources to be specified, and the other is to allow the callback function of the
onload event. The following is
rel="preload" with the
as attribute to tell the browser the type of pre-processing resources for correct processing.
<link rel="preload" href="style.css" as="style" /> <link rel="preload" href="main.js" as="script" />
The above code requires the browser to download and cache
main.js in advance.
as attribute specifies the type of resource to be loaded, and its values are generally as follows.
-"script" -"style" -"image" -"media" -"document"
as attribute is not specified, or its value is not recognized by the browser, the browser will download this resource with a lower priority.
type attribute is needed to further clarify the MIME type.
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
The above code requires the browser to download the video file in advance, and that it is MP4 encoding.
The following is an example of pre-downloaded font files.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
Note that all pre-downloaded resources are only downloaded to the browser's cache and are not executed. If you want the resources to be executed immediately after pre-downloading, you can refer to the following writing.
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'" />
In the above code, the callback function specified by
onload will be executed after the script is downloaded and inserted into the page immediately.
The use case of
<link rel="prefetch"> is if the subsequent page needs a certain resource, and you want to preload the resource in order to speed up page rendering. The instruction is not mandatory, the priority is low, and the browser may not execute it. This means that the browser does not need to download the resource, such as when the connection speed is slow.
<link rel="prefetch" href="https://www.example.com/" />
<link rel="preconnect"> requires the browser to establish a TCP connection with a domain name in advance. This is helpful when you know that the domain name will be requested soon.
<link rel="preconnect" href="https://www.example.com/" />
<link rel="dns-prefetch"> requires the browser to perform DNS resolution of a domain name in advance.
<link rel="dns-prefetch" href="//example.com/" />
<link rel="prerender"> requires the browser to load a web page and render it in advance. When the user clicks on the link to the web page, the page will be presented immediately. This is helpful if you are sure that the user will visit the page next.
<link rel="prerender" href="http://example.com/" />
media attribute gives the media conditions for external resources to take effect.
<link href="print.css" rel="stylesheet" media="print" /> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />
In the above code,
print.css is loaded when printing, and
mobile.css is loaded when accessing from a mobile device (the device width is less than 600 pixels).
The following is an example of conditional loading using the
<link rel="preload" as="image" href="map.png" media="(max-width: 600px)" /> <link rel="preload" as="script" href="map.js" media="(min-width: 601px)" />
In the above code, if the screen width is less than 600 pixels, only the first resource will be loaded, otherwise the second resource will be loaded.
The other attributes of the
<link> tag are as follows.
crossorigin: Load cross-domain settings for external resources. -
href: URL of external resource. -
referrerpolicy: The processing method of the
Referer header information field when loading. -
as: Set the type of external resource when
type: The MIME type of the external resource, currently only used in the case of
title: The name used to identify the style sheet when loading the style sheet. -
sizes: Used to declare the size of the icon file, such as loading the icon file of an Apple mobile phone.
<script> console.log("hello world"); </script>
The above code is embedded in the web page and will be executed immediately.
<script> can also load external scripts, and the
src attribute gives the address of the external script.
The above code will load the script file
type attribute can also be set to
module, indicating that this is an ES6 module, not a traditional script.
<script type="module" src="main.js"></script>
For those browsers that do not support ES6 modules, you can set the
nomodule attribute. Browsers that support ES6 modules will not load the specified script. This attribute is usually used in conjunction with
type="module" as a fallback solution for older browsers.
<script type="module" src="main.js"></script> <script nomodule src="fallback.js"></script>
crossorigin: If this attribute is used, external scripts will be loaded in a cross-domain manner, that is, the header information of the HTTP request will be added with the
origin field. -
integrity: Give the hash value of the external script to prevent the script from being tampered with. Only external scripts with matching hash values will be executed. -
nonce: A password random number, which is given by the server in the HTTP header, and is different every time the script is loaded. It is equivalent to giving a whitelist of embedded scripts, and only scripts in the whitelist can be executed. -
referrerpolicy: The processing method of the
Referer field of the HTTP request.