HTML 链接

使用HTML链接可以把不同的网页组织在一起，用户可以通过点击链接进入其他网页。几乎所有的网页中都存在着链接。

HTML超链接（Hyperlink）

在HTML中，链接是超链接，用户通过点击链接可以跳转到其他HTML文档中。

默认情况下，当鼠标移动到超链接上时，鼠标指针会变成小手的形状。

HTML链接的语法

在HTML中，使用<a>标签来定义一个链接，其基本语法格式如下：

 其中，href是<a>标签一个非常重要的属性，用于给出链接到的目的网页url地址。

链接的文本也会显示在浏览器界面中，用户可以点击这个文本，并进入url给出的目的网页。

在HTML中，链接的内容不一定是文本，也不一定是一个短文本，图片或其他HTML元素或大范围内容都可以定义成一个超链接形式。

HTML链接在浏览器中的样式

在默认情况下，所有的浏览器都会以下面的样式来显示一个链接：

• 用户尚未访问过的链接将显示为：蓝色本文，带下划线；
• 用户已经访问过的链接将显示未：紫色文本，带下划线；
• 用户在链接上按下鼠标，但未松开鼠标时（即活动的链接）：红色本文，带下划线。

当然，用户可以通过定义链接的CSS样式，实现更加丰富的样式表现。

HTML链接的常用属性

HTML <a>标签支持HTML 的全局属性，下面将讲解一些<a>标签常用的一些属性。

id属性

id属性用于定义链接的一个标识，这可以让javascript脚本通过ID获取一个链接或使用CSS对于特定ID的标签进行统一格式化。

title属性

title属性用于用户的鼠标在链接内容上稍作停留时，在鼠标指针附近将会显示title属性值的提示性内容。

target属性

target属性用于指定当用户点击链接时，目标网页将以何种方式进行显示。

默认情况下，用户点击链接时，目标网页将在浏览器的当前窗口显示，也就是说新打开的网页将会替换掉原有的网页内容。

用户通过设置target属性给出其他显示方式。

常用的target属性值有以下几种：

• _self — 默认值。当用户点击链接时，目标网页将在当前窗体或浏览器当前标签中打开。
• _blank — 新打开的目标网页将在一个新窗体或浏览器的新标签中显示。
• _parent — 在包含框架(frame)的网页中，包含在子框架中的网页将在父框架中进行打开。
• _top — 在包含框架的网页中，目标网页将会跳出所有框架，目标网页将会替代原有网页内容。

除此之外，用户还可以通过将target属性的值设定为指定框架名称或ID，或指定区域的ID，则目标网页将在指定的子框架或区域中进行显示。

HTML链接例子

下面的例子综合演示了不同target属性取值情况：

首先建立一个example-6589.html文件，如果不知具体步骤，读者可以参考这篇文章：《HTML 简介》。

使用记事本打开这个文件，然后输入以下内容：

在上面的代码中<iframe>标签用于显示另外一个网页的元素。当位于同一网页中的target属性值设置为<iframe>的name属性的值时，新网页将在指定的<iframe>中打开。

建立第2个网页，命名为：link1.html，使用记事本打开后输入以下内容：

建立第3个网页，命名为：link2.html，使用记事本打开后输入以下内容：

以上三个文件放到一个目录里，双击打开example-6589.html，可以结合代码查看不同target属性值的作用。

读者也可以点击这里预览效果。

绝对地址与相对地址

在HTML 链接中，href的值给出了目的文档的地址，这个地址可以是绝对地址，也可以是相对地址。

简单地说，绝对地址是给出目的网页的全部路径，包括网页所在的域名，如：

上面这个例子给出了目的网页6588.html给出了从网站域名根目录到6588.html这个网页的所有目录路径，这就是绝对路径。

特别是我们需要访问其他网站的网页时，需要给出全部路径，如：

上面是访问菜鸟教程网站中有关HTML链接的介绍，这里必须给出网页的完整路径，即绝对路径。

如果我们只是链接到自己网站中的某个网页，则可以使用相对地址，如：

上面的例子向我们说明：

如果访问的文件与当前网页在同一目录下，直接使用 href="filename" 就可以访问到；

如果访问的网页在上一层目录中，可以使用"../"的形式指明文件在上一层目录下；

如果访问的网页在上一层的其他某个目录中，可以使用"../目录名/文件名"的形式访问；

如果访问的网页在根目录下，则空使用 "/" 直接到根目录下；

如果访问的网页在上一层的上一层某个目录下，则可以使用 "../../目录名/文件名"的形式访问。

以上访问形式，可以根据实际情况灵活运用。

使用图片作为链接

图片也可以作为图片，只需要把表示图片的<img>标签放在<a>和</a>之间即可。

 链接到Email地址

在<a>标签的href属性中使用mailto:而非http://或https://时可以创建一个打开邮件管理程序来发送邮件。

以上三个例子请点击这里预览效果。

以上讲解了HTML 链接的使用，如有问题，请留言。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/HTML5/2023/6588.html