1.Hyperlink
Hyperlinks, which refer to links by content, are one of the most common elements in web pages. The entire Internet is built based on hyperlinks. Every website is composed of numerous web pages. Only when hyperlinks link each web page together can a website be truly formed. The "net" in the Internet is due to the existence of hyperlinks.
2.HTML hyperlink (link)-- <a> tag
HTML uses the <a> tag to set up hypertext links.
A hyperlink can be a word, a word, a group of words, or an image. Click on these contents to jump to a new document or a certain part of the current document.
When you move your mouse pointer over a link on a web page, the arrow changes into a little hand.
The href attribute is used in the <a> tag to describe the address of the link.
By default, the link will appear in the browser as:
An unvisited link appears in blue font and underlined.
Visited links appear purple and underlined.
When you click a link, it appears red and underlined.
<a> link code format:
<a href="url(跳转目标地址)" target="opentype(规定在何处打开链接)" title="text(提示文本)"> 链接文本 </a>3. Various attributes of <a> tag
href attribute:
Specifies the URL of the hyperlink target. If the href attribute is not specified as a link, the <a> tag will not be a link. hrefs come in many forms, for example:
External links: jump to pages in other websites, remember to add "http://" or "https://". like:
<a href="https://www.html.com">HTML</a>Internal link: Jump to other pages in the same website, just link the internal page name directly. href points to a web page (.html, .php, .jsp, .asp, etc. formats). like:
<a href="html.html">HTML</a>Empty link: Link to this page, link to the current page. like:
<a href="#">首页</a>Download link: If the address in the href is a file or compressed package, the file will be downloaded. href points to compressed files (.zip, .rar, etc. formats), executable programs (.exe), etc.
<a href="./src/uploads/html_a.zip">下载文件</a>Note: HTML5 new attribute: download specifies the target to be downloaded, that is, a target will be downloaded directly after clicking.
<a href="./src/assets/img/img01.png" download="img01.png">下载图片</a>Web page element links: Hyperlinks can be added to various web page elements in the web page, such as text, images, tables, audio, video, etc. href points to media files such as pictures (.jpg, .gif, .png, etc. formats), audio (.mp3, .wav, etc. formats), videos (.mp4, .mkv formats), such as:
<a href="./src/assets/img/img01.png">加载图片</a>Anchor link: Positioned at a specified location on the same page.
<!-- 目标位置标签，里面添加一个id属性=“相同的名字” -->
<h1 id="head"> top </h1>
...
<!-- 链接文本的href属性中,设置属性值为“#相同的名字”的形式 -->
<a href="#head"> 回顶部 </a>Note: href (required attribute) is used to specify the URL address of the link target. When the href attribute is applied to a label, it has the function of a hyperlink. If the href attribute is not used, it is not a hyperlink, and the hreflang, media, rel, target, and type attributes cannot be used.
href essentially points to a file, which can be in almost any format. If the browser supports this format, then it can be displayed on the browser, such as common pictures, audio, video, etc. If the browser does not support this format, the user will be prompted to download it.
The path used by href can be a relative path or an absolute path, depending on whether you are accessing an internal or external page. href does not necessarily have to be clicked on the written text to access the link, it can be an image, carousel, CSS module and other elements.
target attribute:
Specifies where to open the target URL. By default, the hyperlink is opened in the current browser window. Jump methods are:
target="_self" //默认，当前页面跳转。
target="_blank" //新窗口打开。
target="_parent" //在父窗口中打开链接。。
target="_top" //在当前窗体打开链接，并替换当前的整个窗体(框架页)。
target="_framename" //在指定的框架中打开网页。Note: The target attribute is only used when the href attribute value exists. The default value is "_self". Opening a new page in the current window will overwrite the current page. Under normal circumstances, the target attribute is either left unwritten and kept as default, or set to "_blank" to open the link in a new window.
4.Default style of <a> tag
Mouse style:
When you move your mouse pointer over a link on a web page, the arrow changes into a little hand.
Link style:
The <a> tag has three default styles and five states.
An unvisited link appears in blue font and underlined.
Visited links appear purple and underlined.
When you click a link, it appears red and underlined.
<!-- css样式设置，五种状态的设置 -->
:link //用于声明未访问状态链接的样式；
:visited //用于声明已经访问链接的样式；
:hover //用于声明鼠标悬停在链接上的样式；
:focus //用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；
:active //用于声明浏览器点击链接的样式。Note: Generally, the status (color, underline, etc.) of a:hover and a:visited links should be the same. The entire <a> tag style presentation process is: a:link ->a:hover ->a:active ->a:visited (:focus can be set freely regardless of the order). In addition, a:active cannot be set with or without underline (it is always present).
Because the W3C specification stipulates the declaration order of links: in the CSS definition, a:hover must be placed after a:link and a:visited, and a:active must be placed after a:hover to be valid. .
5. Protocol qualifiers and common protocols of the <a> tag
Protocol qualifier:
JavaScript is the protocol qualifier.
<a href="javascript:alert('???');">点我</a>Note: After writing javascript, clicking the <a> tag will force the javascript code to run.
Commonly used protocols:
Mailto protocol (mail protocol), a window for sending emails will automatically pop up after clicking.
<a href="mailto:[email protected]">发邮件给我</a>tel protocol (telephone protocol), the window for making a call will automatically pop up after clicking.
<a href="tel:123456789">发邮件给我</a>There are also: file protocol (file protocol), sms message protocol, thunder (Thunder's protocol), ftp protocol, etc.
6. Commonly used examples of <a> tag
Click the image to jump to the link (carousel image display is also often used):
<a href="https://html.com/" target="_blank">
<img src="./img01.png" alt="HTML">
</a>Click on the image to download the image:
<a href="./src/assets/img/img01.png" download="img01.png" target="_blank">
<img src="./src/assets/img/img01.png"" alt="HTML">
</a>