HTML中的超链接（a元素）⽤法详解
Hello ⼤家好，我是，不是你想的那个“⼀碗粥”，是⼀个不想被喝掉的前端  ，如果我写的⽂章有幸可以得到你的青睐，万分有幸~
这是【】系列⽂章的第⼗⼋篇-《HTML中的超链接》
编写不易转载请获得允许
写在前⾯
本篇⽂章我们将来学习HTML中的链接，通过本篇⽂章的学习可以掌握的内容如下图所⽰：
超链接
HTML页⾯使⽤超链接与⽹络上的另⼀个HTML页⾯相连。⼏乎可以在所有的⽹页中到超链接，点击超链接会出现很多效果，例如从⼀个页⾯到另⼀个页⾯，或者下载⼀个⽂件等。
在HTML中链接可以是⼀个字，⼀个词，也可以是⼀个图⽚，这些都是可以点击的。
如下动图展⽰链接的基本⽤法：
超链接元素
<a>元素
HTML中使⽤<a>元素定义HTML页⾯中的超链接。每⼀个<a>元素⼀般都会存在⼀个href属性，该属性的作⽤是来设置跳转到指定HTML 页⾯或其他链接的地址。如果使⽤<a>元素时没有设置href属性的话，那么<a>元素将是⽆效的。
我们演⽰的那段代码实际上这个样⼦的：
html
<body>
<h1>这是⼀个演⽰页⾯</h1>
<a href="./demo.html">点击这⾥跳转到另⼀个页⾯</a>
</body>
href标签怎么用
点击<a>元素就会跳转到demo.html页⾯中。这⾥的./demo.html实际上⼀个相对路径。关于相对路径我
们稍后学习。
如果我们不想使这个<a>元素⽣效的话，可以在href属性中写⼊⼀个#或者是javascript:;，这个超链接就失效了。
⽰例代码如下：
<body>
<a href="#">这是写#号的超链接</a>
<br />
<a href="javascript:;">这是写javascript:；号的超链接</a>
</body>
代码运⾏结果如下图所⽰：
值得注意的是，如果不写href属性，<a>元素将会和普通元素⽆异，⽰例代码如下所⽰：
<body>
<a>没有href的a元素</a>
</body>
代码运⾏结果如下图所⽰：
<a>元素的默认是样式
我们可以看到<a>元素是存在⼀个默认效果：
字体是蓝⾊的
⿏标放在上⾯会出现⼀个⼩⼿的效果
字体下⾯还有⼀个下划线的效果
点击时字体变为红⾊
默认有⼀个下划线
⿏标悬停的效果和点击变⾊这是通过伪类选择器实现的，我们以后进⾏学习。
现在我们可以通过CSS来改写其默认的UI效果。
css
a{
color: #444;
text-decoration: none;
/* 通过 cursor来设置⿏标悬停的状态 */
cursor: pointer;
}
代码执⾏结果如下图所⽰：
这⾥补充⼀个CSS属性，cursor属性⽤于设置⿏标悬停的元素上⾯的状态，该属性的值可以参考
相对路径和绝对路径
由于<a>元素核⼼的是href属性，该属性的作⽤是设置跳转到⽬标的地址。这个地址可以是绝对路径，也可以是相对路径。
绝对路径
绝对路径 就是指完整的描述⽬标⽂件位置的路径。简单来说，绝对路径就是⽆论你当前的位置在哪，到⽬标⽂件的路径是不变的。例如我们的本地电脑中的某个⽂件，如果我们想要到它的话，可以通过绝对路径的⽅式，如下所⽰：
E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html
如上述所⽰的路径就是绝对路径，它是从系统盘符（E是盘符名称）开始查的路径。
再例如⽹络上存在某个⽹站，如果我们要访问到这个⽹站的话，也可以通过绝对路径的⽅式，如下所⽰：
如上述所⽰的路径就是绝对路径，它是从⽹络协议开始查的路径。
上述两个例⼦⽆论是本地电脑也好，还是⽹络上的⽹站也好，系统盘符或者⽹络协议后⾯的//都称为根⽬录 。也就是说，绝对路径是从根⽬录开始查⽬标⽂件的路径。
绝地路径的优点如下所⽰：
防⽌⽹站被恶意抄袭。使⽤绝对路径，如果有⼈抄袭采集你的⽹站内容，⾥⾯的链接还会指向你的⽹站。
⽹页被移动位置，⾥⾯的链接还是指向正确的URL。
绝对路径的缺点如下所⽰：
除⾮链接是动态插⼊的，不然没办法在测试服务器上进⾏测试。因为⾥⾯的链接将直接指向真正的域名URL，⽽不是测试服务器中的URL。
除⾮链接是动态插⼊的，不然移动内容页⾯将很困难。因为内容页⾯位置发⽣变化，在其他页⾯上的链接却可能⽆法跟着变化，还指向原来的已经硬编码的绝对路径。
相对路径
相对路径 就是指由这个⽂件所在的路径引起的跟其它⽂件（或⽂件夹）的路径关系。简单来说，相对路径和你所在的位置是有关系的，你所在位置的不同会导致相对路径也会不同。
例如我们的本地电脑中的某个⽂件，如果我们想要到它的话，可以通过相对路径的⽅式，如下所⽰：
假设我们当前的⽬录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\
需要访问的⽂件的⽬录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html
那么相对路径就是./demo.html
相对路径中使⽤ ./表⽰当前⽬录，使⽤ ../表⽰上⼀级⽬录 。
假设我们当前的⽬录为E:\...\02_HTML和CSS\06_链接\src\test\
需要访问的⽂件的⽬录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html
那么相对路径就是./../demo.html
如果是⽹络上的相对路径的话，就是指⽬标位置与当前位置处在同⼀个⽹站域名中，⽬标位置相对于当前位置的路径。
链接的打开⽅式
当使⽤<a>元素设置跳转到指定的HTML页⾯或⽂件时，默认情况下是在当前浏览器页签中直接打开⽬标HTML页⾯或⽂件。
通过<a>元素的target属性可以⽤来设置以什么⽅式打开⽬标资源，该属性的值有如下两种常见的值：
_self：默认值，表⽰⽬标链接在当前页⾯打开。
_blank：表⽰⽬标链接在新窗⼝打开。
如下⽰例代码展⽰了在⼀个新的浏览器页签中打开⽬标资源：
<body>
<h1>这是⼀个演⽰页⾯</h1>
<a href="./demo.html" target="_blank">点击这⾥跳转到另⼀个页⾯</a>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。