超链接分为外部链接、电子邮件链接、锚点链接、空链接、脚本链接等。
—🌵 🍑 🍯 🐏 🍞—
超链接的基础知识
要正确地创建链接，就必须了解链接与被链接文档之间的路径。每个网页都有唯一的地址，称为统一资源定位符（url），也就是网页的绝对路径。然而，当在网页中创建内部链接时，一般不会指定链接文档的完整url，而是指定一个相对当前文档或站点根文件夹的相对路径。
❄️绝对路径
绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则链接不会失败。
优点：它同链接的源端点无关。只要被链接网站的地址不变，无论文档在站点中如何移动，使用绝对路径都可以正常实现跳转而不会发生错误。
缺点：包含了从根目录到目标文件的所有路径，在目标文件层次较深的情况下，链接字符串会很长。另外，绝对路径不利于网页的迁移，一旦网页的位置发生移动，就需要修改所有的相关路径。
查看文件的绝对路径：
在文件上单击鼠标右键，在弹出的快捷菜单中选择【属性】。选择后得到弹窗，弹窗中的“位置”信息表示这个文件的绝对路径。
❄️相对路径
相对路径可以表述源端点同目标端点之间的相对位置，它同源端点的位置密切相关。
如果链接中源端点和目标端点位于同一个目录下，则在链接路径中只需要指明目标端点的文档名称就可以了。为了避免绝对路径的缺陷，对于在同一站点之中的链接来说，使用相对路径是一个很好的方法。
优点：路径简洁明了，不随运行环境的变化而变化，只与文件相对位置有关，便于项目的移植。
缺点：每次写路径的时候都要计算相对路径，容易出错。
例如
文件1的绝对路径是C:UsersXHDesktop1.html，文件2的绝对路径是C:UsersXHDesktop2.html。此时，在文件2中，文件1的相对路径为./1.html或直接写为1.html。
URL的写法
上级目录：../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上两级目录，以此类推。
下级目录：引用下级目录的文件，直接写下级目录文件的路径即可。
同级目录：./表示文件当前所在的目录。在书写路径的时候，开头的./可以省略掉。
绝对路径的斜线“”和相对路径的斜线“/”方向不同，书写的时候应该特别注意。
❄️超链接
<a href="url">Link text</a>
<a>标签的常用属性如表所示。此属性表中不包含HTML5不支持的属性。
在新窗口打开链接
在创建网页的过程中，默认情况下超链接在原来的浏览器窗口中打开，可以使用target属性来控制打开的目标窗口。target的属性值。
<a href="链接目标" target="目标窗口的打开方式">
将超链接的target属性设为_blank时，网页将在新的窗口中打开。
设置链接目标窗口
创建锚点链接
网站中经常会有一些文档网页由于文本或图像内容过多而过长，访问者需要不停地拖动浏览器上的滚动条来查看文档中的内容。为了方便用户查看文档中的内容，可在文档中创建锚点链接。
❄️锚点链接
在创建锚点链接前首先要建立锚点。
<a name="锚点的名称"></a>
说明：
利用锚点名称可以链接到相应的位置。这个名称可以是数字或英文，或两者的混合，最好要区分大小写。同一个网页中可以有无数个锚点，但是不能有相同名称的两个锚点。
用id属性来代替name属性建立锚点，同样有效。
❄️链接同一网页中的锚点
通过创建锚点链接实现跳转到当前网页设置的锚点位置。
<a href="#锚点的名称">有用的提示</a>
当网页过长时，在网页的最上方设置锚点链接作为书签，单击可跳转到第六小节的位置。
锚点链接不但可以链接到同一网页中的锚点，还能链接到不同网页的锚点。
<a href="锚点所在网页的路径#锚点的名称">有用的提示</a>
说明：
在该语法中，与同一网页内的锚点链接不同的是需要在锚点名称前增加文件所在的位置，以设置一个单独的链接网页，使其链接到前面定义的锚点网页。
新建一个网页，命名为“锚点链接2.html”，在网页中创建锚点链接。
外部链接
尽管创建的大多数链接都是在网页之间或网页内进行链接，但有时候也需要进行外部链接，外部链接是指跳转到当前网站之外的资源中。
❄️链接到外部网站
很多网站会在自己的网页上设置友情链接，友情链接的对象一般为内容与当前网页互补或类似的其他网页。在设置友情链接时，经常需要利用HTTP进行外部链接。
<a href="http://...">…… </a>
说明：
在该语法中，http://...表明这是关于HTTP的外部链接，在其后输入网站的网址即可。
在网页中创建超链接，分别接到百度、搜狐、新浪这3个网站，在浏览器中的显示效果如图所示。单击超链接可跳转到对应的外部网站。
在网页上创建E-mail链接，可以使浏览者快速反馈自己的意见。当浏览者单击E-mail链接时，可以立即打开浏览器默认的E-mail处理程序，收件人的邮件地址由E-mail超链接中指定的地址自动更新，不需要浏览者输入。
<a href="mailto:邮件地址" target="_top">发送邮件</a>
说明：
在该语法中的 mailto: 后面输入电子邮件的地址。
在网页中创建一个链接到E-mail的超链接，在浏览器中的显示效果如图。
❄️链接到FTP
FTP中文译为文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。FTP服务器链接和网页链接的区别在于所用协议不同。FTP需要从服务器管理员处获得登录的权限。不过部分FTP服务器可以匿名访问，从而能获得一些公开的文件。
<a href = "ftp://服务器IP地址或域名">链接的文字</a>
在FTP 网站的链接内如果包含用户名和密码，这些信息对任何浏览源代码的人都是公开的。
❄️链接到Telnet
Telnet常常用来登录一些BBS网站，也是一种远程登录方式。Telnet协议应用非常少，使用HTTP居多。
<a href = "telnet://服务器IP地址或域名">链接的文字</a>
说明：
这种链接方式与其他两种类似，不同的就是它登录的是Telnet站点。
❄️下载文件
如果要在网站中提供下载资料，就需要为文件提供下载链接，在某些网站中只需要单击一个链接就可以自动下载文件。download 属性规定被下载的超链接目标。
<a href="文件地址" download="文件名称">链接的文本</a>
说明：
在文件所在地址部分设置文件的路径，可以是相对地址，也可以是绝对地址。
在网页中创建一个指向图片的超链接，设置download属性，值为下载的文件名称，在浏览器中的显示效果如图3-13所示。单击超链接，浏览器将自动下载这幅图像。
发表评论