HTML之超级链接

阅读 3

2022-12-02

1、超链接标签a

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

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

2、文字超级链接的用法

<html>
<head>
    <title>HTML超级链接</title>
</head>
<body>
<a href="https://siddim.com" title="学习网站">网站主页</a>
</body>
</html>

代码第6行网站主页文本中添加了超链接，链接地址是https://siddim.com，title增加了这个链接提示内容，增加链接后的文本颜色默认是蓝色，同时在链接的文本下面有一条下划线，当鼠标指针移动到上面时，形状就变成手形，如果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)–已检索到链接的资源。

上一篇： HTML显示图片标签img

类别