HTML <a> 标签

HTML `<a>` 标签

实例

指向 CtrlASD 的超链接：

<a href="https://ctrlasd.com/">CtrlASD</a>

浏览器支持

元素
`<a>`	Yes	Yes	Yes	Yes	Yes

所有浏览器都支持 <a> 标签。

定义和用法

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

提示：您可能已经注意到了，CtrlASD 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

术语解释

什么是超文本？

提示和注释

提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

提示：请使用 CSS 来设置链接的样式。

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中，<a> 标签可以是超链接或锚。在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。

HTML5 提供了一些新属性，同时不再支持一些 HTML 4.01 属性。

属性

New : HTML5 中的新属性。

属性	值	描述
charset	char_encoding	HTML5 中不支持。规定被链接文档的字符集。
coords	coordinates	HTML5 中不支持。规定链接的坐标。
download	filename	规定被下载的超链接目标。
href	URL	规定链接指向的页面的 URL。
hreflang	language_code	规定被链接文档的语言。
media	media_query	规定被链接文档是为何种媒介/设备优化的。
name	section_name	HTML5 中不支持。规定锚的名称。
rel	text	规定当前文档与被链接文档之间的关系。
rev	text	HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape	default rect circle poly	HTML5 中不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开链接文档。
type	MIME type	规定被链接文档的的 MIME 类型。

全局属性

<a> 标签支持 HTML 中的全局属性。

事件属性

<a> 标签支持 HTML 中的事件属性。

亲自试一试 - 实例

创建超级链接

本例演示如何在 HTML 文档中创建链接。

<p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

将图像作为链接

本例演示如何使用图像作为链接。

<p>
您也可以使用图像来作链接：
<a href="/read/html/tag-abbr">
<img border="0" src="/uploads/projects/html/202305/1763a5a1dd19c9f0.gif" />
</a>
</p>

链接到同一个页面的不同位置

本例演示如何使用链接跳转至文档的另一个部分

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

在新的浏览器窗口打开链接

本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

<a href="https://ctrlasd.com/" target="_blank">Visit CtrlASD.com!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

跳出框架

本例演示如何跳出框架，假如你的页面被固定在框架之内。

<p>被锁在框架中了吗？</p> 
<a href="/index.html"
target="_top">请点击这里！</a>

创建电子邮件链接

本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

创建电子邮件链接 2

本例演示更加复杂的邮件链接。

<p>
这是另一个 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

a

HTML <a> 标签

实例