第3章建立超链接（html）

误小果

已于 2022-12-28 16:27:17 修改

阅读量7.4k

点赞数 2

分类专栏：前端文章标签：前端 html 服务器

于 2022-11-29 15:06:45 首次发布

本文链接：https://blog.csdn.net/m0_72647241/article/details/128025511

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

                             建立超链接

目录标题

3.1超链接的基本知识
3.2在新窗口打开链接
3.3创建锚点链接
3.4外部链接
3.5练习题
3.6章节任务

3.1超链接的基本知识

要正确地创建链接，就必须了解链接与被链接文档之间的路径。每个网页都有唯一的地址，称为统一资源定位符（url）,也就是网页的绝对路径。然而，当在网页中创建内部链接时，一般不会指定链接文档的完整url,而是指定一个相对当前文档或站点根文件夹的相对路径。

3.1.1绝对路径

（1）绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精准地找到，除非是目标文档的位置发生变化，否则链接不会失败。
（2）优点：它同链接的源端点无关。只要被链接网站的地址不变，无论文档在站点中如何移动，使用绝对路径都可以正常实现跳转而不会发生错误。
（3）缺点：包含了从根目录到目标文件的所有路径，在目标文件层次较深的情况下，链接字符串会很长。另外，绝对路径不利于网页的迁移，一旦网页的位置发生移动，就需要修改所有的相关路径。
（4）如何查看文件的绝对路径？
在文件上单击鼠标右键，在弹出的快捷菜单中选择**【属性】，弹窗中的"位置**"信息表示这个文件的绝对路径。

3.1.2相对路径

（1）相对路径可以表达源端点同目标端点之间的相对位置，它同源端点的位置密切相关。
（2）如果链接中源端点和目标端点位于同一个目录下，则在链接路径中只需要指明目标端点的文档名称就可以了。为了避免绝对路径的缺陷，对于在同一站点之中的链接来说，使用相对路径是一个很好的办法。
（3）优点：路径简洁明了，不随运行环境的变化而变化，只与文件相对位置有关，便于项目的移植。
（4）缺点：每次写路径的时候都要计算相对路径，容易出错。

例子3-1
文件1的绝对路径是C：\Users\XH\Desktop\1.html,文档2的绝对路径是C:\Users\XH\Desktop\2.html。此时，在文件2中，文件1的相对路径为**./1.html或直接写为1.html**。

URL的写法
（1）上级目录：../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上两级目录，以此类推。
（2）下级目录:引用下级目录的文件，直接写下级目录文件的路径即可。
（3）同级目录：./表示文件的当前所在的目录。在书写路径的时候，开头的./可以省略掉。

注意：绝对路径的斜线**“\”和相对路径的斜线“/”**方向不同，书写的时候应该特别注意。

3.1.3超链接

语法：
a href=“url” Link text /a

a标签的常用属性

属性	值	描述
href	url	规定链接指向的网址，可以是任何有效文档的相对或绝对路径。
rel	text	规定当前文档与被链接文档之间的关系
target	_blank _parent _self _top framename	规定在何处打开链接文档
type	MIME type	规定被链接文档的MIME类型
download	filename	规定被下载的超链接目标
hreflang	language_code	规定被链接文档的语言
media	media_query	规定被链接文档是为何种媒介/设备优化的

3.2在新窗口打开链接

在创建网页的过程中，默认情况下超链接在原来的浏览器窗口中打开，可以使用target属性来控制打开的目标窗口。

表 target的属性值

值	描述
_blank	在新窗口中打开被链接文档
_self	默认值。在当前窗口中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
framename	在指定的框架中打开被链接文档

语法：a href=“链接目标” target="目标窗口的打开方式 "

例子3-2
将超链接的target属性设为_blank时，网页将在新的窗口中打开

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h1>我们的第一个HTML页面</h1>
    <p>开始HTML学习的旅程！</p>
    <div>Start</div>
    <a href="http://www.w3school.com.cn" target="_blank">W3School</a>
  </body>
</html>

3.3创建锚点链接

网站中经常会有一些文档网页由于文本或图像内容过多而过长，访问者需要不停地拖动浏览器上的滚动条来查看文档中的内容。为了方便用户查看文档中的内容，可在文档中创建锚点链接。

3.3.1锚点链接

1.在创建锚点链接前首先要建立锚点。
（1）语法：
a name="锚点的名称 " /a
（2）说明：利用锚点名称可以链接到相应的位置。这个名称可以是数字或英文，或两者的混合，最好要区分大小写。同一个网页中可以有无数个锚点，但是不能有相同名称的两个锚点。
（3）提示：用id属性来代替name属性建立锚点，同样有效。

2.在同一网页中创建指向该锚点的链接。
（1）语法：
a href=“# 锚点的名称” 有用的提示 /a

3.在其他网页中创建指向该锚点的链接。
（1）语法：
a href=“锚点所在网页的路径 #锚点的名称” 有用的提示 /a

3.3.2链接同一网页中的锚点

（1）通过创建锚点链接来实现跳转到当前网页设置的锚点位置。
（2）语法：
a href=“#锚点的名称” 有用的提示 /a

例子3-3
当网页过长时，在网页的最上方设置锚点链接作为书签，单击可跳转到第6小节的位置

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
  </head>
  <body>
      <a href="#p6"> 书签：第6小节 </a>
      <h3> 第1小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第2小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第3小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第4小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第5小节 </h3>
      <br><br><br><br><br><br>
      <h3><a href="" name="p6">第6小节</a></h3>
      <p>所谓超链接，是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
      </p>
      <h3> 第7小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第8小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第9小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第10小节 </h3>
      <br><br><br><br><br><br>
      <h3> 第11小节 </h3>
      <br><br><br><br><br><br>
    </body>
 </html>

提示：如果链接的锚点在屏幕上已经可见，那么浏览器可能不会再跳到那个锚点。如果链接的锚点正好在屏幕的底部，那么根据屏幕的大小，浏览器也不能跳到该锚点。这是因为如果浏览器窗口已经到达了网页的底部，它将不能再继续往下走，所以也就只能尽可能地接近该锚点。

3.3.3链接到其他网页中的锚点

（1）锚点的链接不但可以链接到同一网页中的锚点，还能链接到不同网页的锚点。
（2）语法：
a href=“锚点所在网页的路径 # 锚点的名称” 有用的提示 /a
（3）说明：
在该语法中，与同一网页内的锚点链接不同的是需要在锚点名称前增加文件的所在位置，以设置一个单独的链接网页，使其链接到前面定义的锚点网页。

例子3-4
新建一个网页，命名为"锚点链接2.html"，在网页中创建锚点链接。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
       <a href="锚点链接.html#p6">跳转到其他网页的第6小节</a>
  </body>
</html>

锚点链接常常用于那些内容庞大烦琐的网页。通过单击锚点链接，能够快速重定向网页的特定的位置，如快速到页首，页尾或网页中的某个位置，便于浏览者查看网页内容。在百度百科中，因为搜索结果内容很长，所以常常用锚点链接做成目录的形式，方便查阅对应位置。

3.4外部链接

尽管创建的大多数链接都是在网页之间或网页内进行链接，但有时候也需要进行外部链接，外部链接是指跳转到当前网站之外的资源中。

3.4.1链接到外部网站

（1）很多网站会在自己的网页上设置友情链接，友情链接的对象一般为内容与当前网页互补或类似的其他网页。在设置友情链接时，经常需要利用HTTP进行外部链接。
（2）语法：
a href=“http://…” … /a
（3）说明：
在该语法中，http://…表明这是关于HTTP的外部链接，在其后输入网站的网址即可。

例子3-5
在网页中创建超链接，分别接到百度，搜狐，新浪这3个网站，在浏览器中的显示效果，单击超链接可跳转到对应的外部网站。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
     <p>友情链接:</p>
     <p><a href="http://www.baidu.com"> 百度</a></p>
     <p><a href="http://www.sohu.com"> 搜狐</a></p>
     <p><a href="http://www.sina.com"> 新浪</a></p>
  </body>
</html>

3.4.2链接到E-mail

（1）在网页上创建E-mail链接,可以使浏览器快速反馈自己的意见。当浏览者单击E-mail链接时，可以立即打开浏览器默认的E-mail处理程序，收件人的邮件地址由E-mail超链接中指定的地址自动更新，不需要浏览者输入。
（2）语法：
a href=“mailto:邮件地址” target=“_top” 发送邮件 /a
（3）说明：
在该语法中的mailto:后面输入电子邮件的地址。

例子3-6
在网页中创建一个链接到E-mail的超链接，在浏览器中的显示效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p>这是一个电子邮件链接：</p>
    <a href="mailto:someone@example.com?Subject=Hello%20again"target="_top">发送邮件</a>
  </body>
</html>

3.4.3链接到FTP

FTP中文译为文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。FTP服务器链接和网页链接的区别在于所用协议不同。FTP需要从服务器管理员处获得登陆的权限。不过部分FTP服务器可以匿名访问，从而能获得一些公开的文件。
（2）语法：
a href=“talnet://服务器IP地址或域名” 链接的文字 /a
（3）提示：
在FTP网站的链接内如果包含用户名和密码，这些信息对任何浏览源代码的人都是公开的。

3.4.4链接到Telnet

（1 ）Telnet常常用来登陆一些BBS网站，也是一种远程登陆方式。Telnet协议应用非常少，使用HTTP局多。
（2）语法：
a href=“telnet://服务器IP地址或域名” 链接的文字 /a
（3）说明：
这种链接方式与其他两种类似，不同的就是它登陆的是Telnet站点。

3.4.5下载文件

（1）如果要在网站中提供下载资料，就需要为文件提供下载链接，在某些网站中只需要单击一个链接就可以自动下载文件。download属性规定被下载的超链接目标。
（2）语法：
a href=“文件地址” download=“文件名称” 链接的文本 /a
（3）说明：
在文件所在地址部分设置文件的路径，可以是相对地址，也可以是绝对地址。

例子3-7
在网页中创建一个指向图片的超链接，设置download属性，值为下载的文件名称，在浏览器中显示出来，单击超链接，浏览器将自动下载这幅图像。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
  </head>
  <body>
     <a href="img/kitty.jpg" download="kitty">下载图片</a>
  </body>
</html>

3.5练习题

填空题
（1）绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则链接不会失败。
（2）在创建网页的过程中，默认情况下超链接在原来的浏览器窗口中打开，可以使用target属性来控制打开的目标窗口。
（3）锚点常常用于那些内容庞大烦琐的网页。通过name属性可以创建锚点链接，能够快速重定向网页的特定的位置，如快速到页首，页尾或网页中的某个位置，便于浏览者查看网页内容。

3.6章节任务

（1）制作锚点链接，指向其他网页中的锚点。
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
     <h3>欢迎来到page1</h3>
     <br><br><br><br><br><br>
     <a href="锚点链接.html#p2">由此跳转到page2</a>
  </body>
</html>

（2）制作两个网页，使用超链接实现它们的互相转换。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
     <h3>欢迎来到page1</h3>
     <br><br><br><br><br><br>
     <a href="file:///C:/Users/wh/Desktop/%E6%96%B0%E5%BB%BA%20%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3.html"target="_blank">由此跳转到page2</a>
  </body>
</html>