HTML超链接详解-优快云博客

一、超链接标签
在HTML中，超链接用标签<a>和</a>来实现，而定义源端点、目标端点、锚记等相关内容则由标签<a>的属性完成。标签<a>有如下几个常用属性：
1.href属性
用来定义指向链接目标端点的URL，取值是目标端点文件的URL路径和文件名。
例如：<a href=" http://www. 163.com">网易主页</a>
href=" http://www.163.com"指明了链接目标端点，“网易主页”是链接文字，浏览时单击“网易主页”就会打开由href指定的主页。

2.target属性
用于定义链接目标端点文档的显示窗口，取值可以是：_blank、_self、_parent、_top，也可以是一个框架名。
例如：<a href="kcjs.htm" target="mainFrame">课程介绍</a>
href="kcjs.htm"指明链接目标端点是当前文件夹中kcjs.htm文档，target="mainFrame"指明目标文档将显示在框架名为mainFrame的框架窗口中。“课程介绍”是链接文字，浏览时单击“课程介绍”将在mainFrame框架域中显示kcjs.htm文档内容。

3.name属性
用于在当前位置进行插入锚记操作，创建连接的目标端点，通过其他链接可跳转到创建的目标锚记上。name的值是锚记的名称。
例如：<a name="a1"></a>
在当前位置进行插入了一个名称为a1的锚记。

4.title属性
用于设置链接的标题，在浏览器中，鼠标指向连接时会显示在鼠标指针旁边，是链接的说明文字。
例如：<a href="1.htm" target="mainFrame" title="课程介绍">课程介绍</a>

二、链接到文档
链接到文档实际是链接到网页文件，用<a>标签的href属性完成。目标端点有2种：本地机的其他网页和因特网上的其他网页。常见的源端点也分2种：在文本上定义超链接和在图像上定义超链接。
例题：单击文字链接到文档
<html>
<head><title>单击文字链接到文档</title></head>
<body>
单击此处可以链接到本地机的
<a href="../jianjie.htm">企业简介网页</a>
 
 
单击此处可以链接到因特网的
<a href="http://www.163.com">网易主页</a>
</body>
</html>
说明：
（1）程序中的“企业简介网页”和“网易主页”是定义超链接的文字型源端点，浏览时显示为超链接文字单击该文字将跳转到指定的网站。
（2）如果链接的是本地文档，直接把路径和文件名赋给href属性即可。如果链接的是另一台计算机上的文档，则把目标端点的URL地址赋给href属性。
例题：单击图像链接到文档
<html>
<head><title>单击图像链接到文档</title></head>
<body>
单击此处可以打开“兔的属相”网页
<a href="../tu.htm">
<img src="file:///E|/网页练习/图像/tu.gif" width="84" height="84">
</a>
 
单击此处可以打开“鸡的属相”网页
<a href="../ji.htm">
<img src="file:///E|/网页练习/图像/ji.gif" width="84" height="84">
</a>
</body>
</htm>
说明：
（1）这个例题将2个图像文件作为源端点，浏览时单击图像将链接到指定文档。
（2）<img src="file:///E|/网页练习/图像/tu.gif" width="84" height="84">
语句中的<img>标签的功能是插入一个图像，src属性指出图像的URL，width属性和height属性用来定义图像的高和宽。

三、链接到锚记
链接到锚记是指到文章内部的链接，可是实现段落间的任意跳转。实现这样的链接要先定义一个锚记作为目标端点，再定义到锚记的链接。链接到锚记分为两种：链接到同文档中的锚记和链接到不同文当中的锚记。
定义锚记用<a>标签的name属性实现，链接到锚记用<a>的href属性实现。
例题：链接到同文档中的锚记
<html>
<head><title>链接到同文档中的锚记</title></head>
<body>
<a name="abc">第一张</a>
第二章
第三章
第四张

<hr>
<a href="#abc">单击这里可以进入第一章</a>
</body>
</html>
说明：
（1）<a name="abc">第一张</a>，为文字“第一章”定义了名为“abc”的锚记。
（2）<a href="#abc">单击这里可以进入第一章</a>，在文本“单击这里可以进入第一章”上定义了一个链接，链接到文档中名为“abc”的锚记位置。
例题：链接到不同文档的锚记
<html>
<head><title>链接到不同文档中的锚记</title></head>
<body>
<a href="wjyl.htm#abc">单击这里可以进入“微机原理”第一章</a>
</body>
</html>
说明：
<a href="wjyl.htm#abc">，在锚记之前加上文档的URL，可以链接到该文档的锚记。

四、链接到图像
连接的目标端点可以是一个图像文件，浏览时单击链接源点，就可以打开目标端点的图像文件。
例题：链接到图像
<html>
<head><title>链接到图像</title></head>
<body>
<a href="../picture-1.gif" target="_self" title="校园风光">
单击此处可以看到美丽的校园
</a>
</body>
</html>
说明：
（1）href="../picture-1.gif"，指明链接到的目标端点是一个图像。
（2）target="_self"，定义目标端点的图像在当前窗口打开。
（3）“单击此处可以看到美丽的校园”，是链接文本，也就是链接的源端点。
（4）title="校园风景"，定义链接标题，浏览时将鼠标指向文本时将显示标题。

五、链接到E-mail
E-mail地址也是由href属性实现，这是href属性所定义的路径不是文档的URL，而是一个以“mailto:”开头的邮件地址。
例题：链接到E-mail
<html>
<head><title>链接到E-mail</title></head>
<body>
欢迎大家
<a href="mailto:123@163.com" title="联系我们">
发邮件
</a>
与我们联系
</body>
</html>

HTML 超链接