All browsers support the tag.
tag defines a hyperlink, used to link from one page to another.
The most important attribute of theelement is the href attribute, which indicates the target of the link.
Across all browsers, the default appearance of links is:
Tips: If you do not use the href attribute, you cannot use the following attributes: download, hreflang, media, rel, target and type attributes.
Tip: The linked page is usually displayed in the current browser window, unless you specify another target (target attribute).
Tip: Please use CSS to style links.
| Property | Value | Description |
|---|---|---|
| charset | char_encoding | Not supported in HTML5. Specifies the character set of the linked document. |
| coords | coordinates | Not supported in HTML5. Specifies the coordinates of the link. |
| download(5) | filename | Specifies the hyperlink target to be downloaded. |
| href | URL | Specifies the URL of the page the link points to. |
| hreflang | language_code | Specifies the language of the linked document. |
| media(5) | media_query | Specifies the media/device for which the linked document is optimized. |
| name | section_name | Not supported in HTML5. Specifies the name of the anchor. |
| rel | text | Specifies the relationship between the current document and the linked document. |
| rev | text | Not supported in HTML5. Specifies the relationship between the linked document and the current document. |
| shape |
|
Not supported in HTML5. Specifies the shape of the link. |
| target |
|
Specifies where to open the linked document. |
| type(5) | MIME type | Specifies the MIME type of the linked document. |
<html> <body> <p> <a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.microsoft.com/</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html>
This example demonstrates how to use images as links.
<html> <body> <p><span style="color: #000000;"> 您也可以使用图像来作链接： </span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/lastpage.html</span><span style="color: #800000;">"</span>> <img border=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/i/eg_buttonnext.gif</span><span style="color: #800000;">"</span> /> </a> </p> </body> </html>
This example demonstrates how to use a link to jump to another part of the document
<html> <body> <p> <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#C4</span><span style="color: #800000;">"</span>>查看 Chapter <span style="color: #800080;">4</span>。</a> </p> <h2>Chapter <span style="color: #800080;">1</span></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter <span style="color: #800080;">2</span></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter <span style="color: #800080;">3</span></h2> <p>This chapter explains ba bla bla</p> <h2><a name=<span style="color: #800000;">"</span><span style="color: #800000;">C4</span><span style="color: #800000;">"</span>>Chapter <span style="color: #800080;">4</span></a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter <span style="color: #800080;">5</span></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter <span style="color: #800080;">6</span></h2> <p>This chapter explains ba bla bla</p> </body> </html>
This example demonstrates how to open a page in a new window so that visitors don’t have to leave your site.
<html> <body> <a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.w3school.com.cn/</span><span style="color: #800000;">"</span> target=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>>Visit W3School!</a> <p>如果把链接的 target 属性设置为 <span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>，该链接会在新窗口中打开。</p> </body> </html>
This example demonstrates how to jump out of the frame, assuming your page is fixed within the frame.
<html> <body> <p>被锁在框架中了吗？</p> <a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span><span style="color: #000000;"> target</span>=<span style="color: #800000;">"</span><span style="color: #800000;">_top</span><span style="color: #800000;">"</span>>请点击这里！</a> </body> </html>
This example demonstrates how to link to an email. (This example will only work after installing the email client program.)
<html> <body> <p><span style="color: #000000;"> 这是邮件链接： </span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?subject=Hello%20again</span><span style="color: #800000;">"</span>>发送邮件</a> </p> <p> <b>注意：</b>应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </span></p> </body> </html>
<html> <body> <p><span style="color: #000000;"> 这是另一个 mailto 链接： </span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!</span><span style="color: #800000;">"</span>>发送邮件！</a> </p> <p> <b>注意：</b>应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </span></p> </body> </html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
