Link label

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.

<a>

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.

<a href="https://wikipedia.org/">Wikipedia</a>

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 href attribute.

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.

The <a> tag has the following attributes.

(1) href

The 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.

<a href="#demo">Example</a>

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.

(2) hreflang

The 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.

(3) title

The 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.

(4) target

The target attribute specifies how to display the opened link. It can be opened in a designated window or in <iframe>.

<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 foo.com inside.

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 _self. -_top: The top-level window is opened. If the current window is the top-level window, this value is equivalent to _self.

<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.

(5)rel

The rel attribute indicates the relationship between the link and the current page.

<a href="help.html" rel="help">Help</a>

The 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. -noopener: Tell the browser to prevent the link window from referencing the original window through JavaScript's 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.

(6) referrerpolicy

The 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, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url, same-origin , strict-origin, strict-origin-when-cross-origin.

Among them, 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.

(7)ping

The 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.

(8) type

The 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.

(9) download

The 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.

If the 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 bar.exe.

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.

<a href="data:,Hello%2C%20World!">Click</a>

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:contact@example.com">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 contact@example.com.

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:foo@bar.com?cc=test@test.com&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 cc, subject, and body. The values ​​of these elements need to be URL escaped, for example, spaces are converted to %20.

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.

<a href="tel:13312345678">13312345678</a>

The above code is in the mobile phone, clicking the link will evoke the dialing interface, and you can directly dial the specified number.

Basic usage

The <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. fancy.css and 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

The 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:name@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.

(1) <link rel="preload">

<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 style.css and main.js in advance.

The as attribute specifies the type of resource to be loaded, and its values ​​are generally as follows.

-"script" -"style" -"image" -"media" -"document"

If the as attribute is not specified, or its value is not recognized by the browser, the browser will download this resource with a lower priority.

Sometimes the 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.

(2) <link rel="prefetch">

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/" />

(3) <link rel="preconnect">

<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/" />

(4) <link rel="dns-prefetch">

<link rel="dns-prefetch"> requires the browser to perform DNS resolution of a domain name in advance.

<link rel="dns-prefetch" href="//example.com/" />

(5) <link rel="prerender">

<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

The 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 media attribute.

<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.

Other attributes

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 rel="preload" or rel="prefetch". -type: The MIME type of the external resource, currently only used in the case of rel="preload" or rel="prefetch". -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>

<script> is used to load script code, currently it is mainly used to load JavaScript code.

<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.

<script src="javascript.js"></script>

The above code will load the script file javascript.js and execute it.

The type attribute gives the type of script. The default is JavaScript code, so it can be omitted. The complete writing is actually as follows.

<script type="text/javascript" src="javascript.js"></script>

The 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>

<script> also has some other attributes below, most of which are related to the JavaScript language. You can refer to related JavaScript tutorials.

-async: This attribute specifies that the JavaScript code is executed asynchronously and does not cause a blocking effect. The JavaScript code is executed synchronously by default. -defer: This attribute specifies that the JavaScript code is not executed immediately, but executed after the page is parsed. -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.

<noscript>

The <noscript> tag is used to display the content when the browser does not support or disable JavaScript. Users may turn off JavaScript to save bandwidth, to extend the battery life of the phone, or to prevent tracking and protect privacy.

<noscript>
  Your browser cannot execute JavaScript language, and the page cannot be
  displayed normally.
</noscript>

The above code will only be displayed when the browser cannot execute the JavaScript code, otherwise it will not be displayed.