HTML Basic

HTML hyperlink a tag (tag)

Kevin Li
by Kevin Li 10:45 PM


 Web pages or Internet resources in the world use links to refer to each other and link each other to form a big Internet, and HTML <a> tag is used to create hyperlinks - leading to other pages, files, Email addresses, or other Hyperlink to URL.

Give an example of use:

<a href="https://www.youtube.com/">This link</a> will link to YouTube<br>
<a href="https://www.google.com/">This link</a> will link to Google<br>
<a href="/html/image-img-tag.html">This link</a> will link to Fooish Picture tag tutorial page

The results actually displayed on the web page are as follows:

This link will connect to YouTube
This link will connect to Google
This link will connect to the Fooish image tag tutorial page

<a> tag attributes (attributes)

href

Specify a URL to see where the link should go.

target

Specify where to open the link.

The target has the following attribute values:

  • _self: Default value, open in the current window
  • _blank: Open in new window
  • _parent: Open in the parent window of the upper level
  • _top: Open in the topmost parent window
  • framename: specify in which frame to open

For example:

<a href="https://www.fooish.com/" target="_blank">Fooish technical teaching</a>

The result of the above example:

Fooish technical teaching

rel

Specify the relationship between the current page and the link destination.

rel has the following attribute values:

  • nofollow: Prohibit search engines (Google) from associating the link with your webpage, or prohibit linking webpages from your webpage index
  • noreferrer: If a user clicks on the link, do not send the Referer:header information to the linked website
  • noopener: If you use target="_blank"the time to open another page, do not link to the page setup window.opener(a JavaScript variable) permission. The advantage of setting noopener is to improve security, while avoiding the link page to affect the performance of the current page.
  • prev: Specify that each other is the previous relationship (for example, the previous article belonging to the same topic)
  • next: Specify the next relationship with each other (for example, the next article belonging to the same topic)

You can space-separated multiple values.

for example:

<a rel="nofollow noopener" href="https://examples.com/">External links</a>

download

download is used to instruct the browser to directly download the resource pointed to by the link when the user clicks on the link. The attribute value of download can set the file name of the downloaded file. If the attribute value is omitted, the original file name will be used.

for example:

<a href="/assets/img/fooish.jpg" download="myphoto.jpg">Download pictures</a>

The results are as follows:

Download image
The download function follows the restrictions of the same-origin policy, and only the source of the same origin can be downloaded directly.

ping

Ping is used for link click monitoring or tracking. When someone connects, an HTTP POST will be sent to notify the address (URL) specified by ping. If there are multiple URLs, they will be separated by blanks.

Examples of use:

<a href="https://www.fooish.com/html/" ping="https://www.fooish.com/trackpings">

When the user clicks on the link, the browser will send a ping in the background to the specified server to track the link click.

referrerpolicy

Specify what referrer (request source address) should be sent by the browser when making a request.

referrerpolicy has these attribute values:

  • no-referrer: Do not send Referer:header
  • no-referrer-when-downgrade: This is the default behavior. If the connected protocol is degraded (that is, HTTPS is connected to non-HTTPS resources), the Referer:header will not be sent
  • origin: Send origin as referrer. The so-called origin refers to the protocol + host + port part of the URL, which does not contain path or URL parameter information. For example, origin is like https://jasonchen050319.blogspot.com/
  • origin-when-cross-origin: If you connect to a different origin, only the origin (protocol + host + port) will be sent as a referrer, and only a page or resource with the same origin will be sent a referrer with complete information (including path and URL parameters)
  • unsafe-url: This is the most lenient strategy, no matter what the situation is to send referrers

Examples of various types of hyperlink syntax

Anchor link

Jump to the location of a different block on the same page.

Instructions:

<a href="#some-section-id">Link text</a>

Clicking on the above link will jump to the HTML element block with id="some-section-id".

For example, jump to this side:

<div id="some-section-id">
  hello
</div>

Picture link

<a> can wrap other HTML elements so that they can also be a link.

For example, create a picture link:

<a href="https://example.com/" target="_blank">
  <img src="https://source.unsplash.com/WLUHO9A_xik/600x400">
</a>

The actual display results are as follows:

Email hyperlink mailto:

<a href="mailto:Email mailbox">Contact mailbox</a>

If the browser supports it, clicking the link will open the mail editor to write a letter.

Usage example:

<a href="mailto:contact@xxxx.com">xxxContact mailbox</a>

The actual display results are as follows:

xxx contact mailbox

Phone number link tel:

<a href="tel:telephone number">Link text</a>

The telephone number follows the RFC 3966 standard format.

for example:

<a href="tel:+491570156">+49 157 0156</a>

The actual results are as follows:

+49 157 0156

If your device supports it, such as a mobile phone, click the link to make a call directly.

FTP hyperlink ftp:

<a href="ftp://someftpserver.com/">Browse FTP server</a>


Post a Comment

0 Comments