当前位置:首页>基础编程学习>HTML>HTML之超级链接
HTML之超级链接
阅读 4
2022-12-02

1、超链接标签a

当你在网页上浏览时,单击一个标题就跳到另一网页中。这是因为文字上加了超链接。超级链接是创建万维网的基础,他提供了轻松访问相关文档的能力。你所看到网页中的任何导航元素现在都被称为“超链接”。

a标签的英文全称是:anchor,中文意思:锚; 固定桩,系缚物; 支柱,靠山;
超链接包含 <a>锚定标签对之间。
锚定标签起始标记中href(超文本引用)属性的目标URLhref属性说明文字链接的地址。属性里面可以是url地址、图片地址或视频文件等。
<a>标签还可以包含一个标题属性,以指定要在用户将光标放在超链接上时出现的“工具提示”中显示的文本。

2、文字超级链接的用法

<html>
<head>
    <title>HTML超级链接</title>
</head>
<body>
<a href="https://siddim.com" title="学习网站">网站主页</a>
</body>
</html>
代码第6行网站主页文本中添加了超链接,链接地址是https://siddim.comtitle增加了这个链接提示内容,增加链接后的文本颜色默认是蓝色,同时在链接的文本下面有一条下划线,当鼠标指针移动到上面时,形状就变成手形, 如果title属性添加了内容则会在显示出来,如下图


3、练习超链到其他页面

1、新建一个文件夹(a),创建四个html文件,依次是:index.html,product.html,news.html,about.html 如以下图如示:


文件index.html,在服务器上默认是首页的意思。
index.html文件里面输入以下代码:
<html>
<head>
    <title>公司主页</title>
</head>
<body>
<a href="index.html" title="公司主页">主页</a> | <a href="product.html" title="产品信息">产品信息</a> | <a href="news.html" title="公司新闻">新闻</a> | <a href="about.html" title="关于我们的相关信息">关于我们</a>
</body>
</html>

以上代码效果如下:




我们看到,没有点击的超级链接,文字颜色是蓝色字体加下滑线,点击过的字体颜色是这样的

当你点击产品信息超链接时,会跳转到product.html这个页面,



我们可以看到浏览器会显示product.html页面的信息

product.html页面代码如下:

<html>
<head>
    <title>公司产品信息</title>
</head>
<body>
<center><h1>产品信息</h1></center>
<hr>
<p>产品列表:</p>

</body>
</html>

其他页面的代码自己可以复制以上代码,修改一下标题和内容。然后打开index.html页面点击一下就可以跳转到不同的页面。
通过以上我们可以知道a标签的href属性是指定要链接的目标,可以是一个页面,一个文件,一张图片,一个视频等等

4、图片超级链接

如果觉得文本效果不是很引人注目,你可以把图片上加上链接,点击图片时就会跳转要让别人想看到的内容。
1、需要准备需要展示的图片,
2、在链接里面加上图片标签
就可以看到效果了,效果如下



以下是效果对应的代码,我本机电脑上的图片是放在a文件夹下的image目录里面了。

<html>
<head>
    <title>图片超级链接</title>
</head>
<body>

<a href="music.html" title="我的音乐"><img src="image/music.png" alt="我的音乐我作主" ></a>  <a href="boke.html" title="播客"><img src="image/blog.png" alt="播客"></a>  <a href="tv.html" title="看世界杯TV"><img src="image/tv.png" alt="TV秀"></a> 
</body>
</html>
加链接的效果和文本差不多,有蓝色边框框起来了,点击过的效果也和文字颜色一样。如果不想要边框需要在img 标签里面增加border="0" 。以下是没有边框的效果。



图片超链没有边框的代码如下:

<html>
<head>
    <title>图片超级链接</title>
</head>
<body>

<a href="music.html" title="我的音乐"><img src="image/music.png" border="0" alt="我的音乐我作主" ></a>  <a href="boke.html" title="播客"><img border="0" src="image/blog.png" alt="播客"></a>  <a href="tv.html" title="看世界杯TV"><img border="0" src="image/tv.png" alt="TV秀"></a> 
</body>
</html>

5、在本页面跳转到指定的位置

当一个页面内容很多时候,以超链的形式快速跳到某个位置,快速查看内容,方便索引。用法如下:
<a href="#位置名">内容</a>
<!--以下方式已不推荐使用-->
<a name="位置"></a>
<!--以下方式推荐使用-->
<标签 id="唯一的标识"></标签>
下面代码可以放到浏览器里面试一下,就可以看到效果。
<html>
<head>
    <title>HTML超级链接-跳转指定位置</title>
</head>
<body>
五虎上将是指汉末三国时期,跟随刘备建立蜀汉政权的五位将军。
分别为<a href="#guanyu">关羽</a> 、<a href="#zhangfei">张飞</a>、<a href="#zhaoyun">赵云</a>、<a href="#machao">马超</a>、<a href="#huangzhong">黄忠</a>。
<table>
    <tr><td height="500"></td></tr>
    <tr><td><h2 id="guanyu">关羽</h2></td></tr>
    <tr><td>字云长,河东解良人。</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="zhangfei">张飞</h2></td></tr>
    <tr><td>字翼德,幽州涿郡人。</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="zhaoyun">赵云</h2></td></tr>
    <tr><td>字子龙,常山真定人。</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="machao">马超</h2></td></tr>
    <tr><td>字孟起,扶风茂陵人。</td></tr>


    <tr><td height="500"></td></tr>
    <tr><td><h2 id="huangzhong">黄忠</h2></td></tr>
    <tr><td>字汉升,南阳人。</td></tr>
</table>



</body>
</html>

以上代码可知,只要把某一位置标签的id,在链接时候,用href属性在id名称的前面加上#号就可以跳转到该位置。

6、跳转到某个页面的指定位置

如果想在本页面点击某个连接,跳转到另一个页面的指定位置,和上面的代码做法差不多,只不过需要增加某个页面的地址然后加上#位置名
<!--引导页面的代码和wuhu.html页面放在同一目录下,点击就可以跳转了-->
<html>
<head>
    <title>HTML超级链接-跳转某页面指定位置</title>
</head>
<body>
五虎上将是指汉末三国时期,跟随刘备建立蜀汉政权的五位将军。
分别为<a href="wuhu.html#guanyu">关羽</a> 、<a href="wuhu.html#zhangfei">张飞</a>、<a href="wuhu.html#zhaoyun">赵云</a>、<a href="wuhu.html#machao">马超</a>、<a href="wuhu.html#huangzhong">黄忠</a>。
</body>
</html>
<!--以下代码是wuhu.html页面的代码-->
<html>
<head>
    <title>HTML超级链接-跳转某页面指定位置</title>
</head>
<body>
<table>
    <tr><td height="500"></td></tr>
    <tr><td><h2 id="guanyu">关羽</h2></td></tr>
    <tr><td>字云长,河东解良人。于白马坡斩杀袁绍大将颜良,与张飞一同被称为万人敌</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="zhangfei">张飞</h2></td></tr>
    <tr><td>字翼德,幽州涿郡人。早期和关羽一起追随刘备左右。</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="zhaoyun">赵云</h2></td></tr>
    <tr><td>字子龙,常山真定人。是继关羽、张飞之后最早追随刘备的将领,早期跟随公孙瓒,后在邺城加入当时还依附在袁绍处的刘备。</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="machao">马超</h2></td></tr>
    <tr><td>字孟起,扶风茂陵人。汉伏波将军马援的后人,马腾的儿子,少年成名,曹操曾多次征召马超入京为官,但都被马超拒绝。</td></tr>

    <tr><td height="500"></td></tr>
    <tr><td><h2 id="huangzhong">黄忠</h2></td></tr>
    <tr><td>字汉升,南阳人。本为刘表部下中郎将,后归降刘备,随刘备入川作战。</td></tr>
</table>
</body>
</html>
通过以上代码我们可以知道 href="#位置名"这可以在本页面跳转 href="name.html#位置名”可以跳转到name.html页面的具体位置,你也可以试一下 href="http://siddim.com/#位置" 这样的方式访问线上某个页面的具体位置。
网络浏览器将以区别于常规文本的方式显示超链接——通常,超文本获得下划线,基于图像的超链接获得彩色边框。
每个网页超链接都对三种交互状态:
•悬停(hover)–获得焦点,光标放在超链接上。
•活动(Active)–检索链接资源时,用户单击超链接。
•已访问(Visited)–已检索到链接的资源。
评论 (0)