HTML中的超链接<a>使用

太过爱你忘了你带给我的痛 2022-08-21 12:36 166阅读 0赞

只要学习或者使用过HTML的人，我想对于<a>标签应该都是不陌生的。今天对<a>做一个简单的说明，将自己的理解简单描述出来。

<a>是超链接标签，什么是超链接呢？就是将当前内容与网络上的另一个资源进行连接起来，点击该连接就可以实现跳转到被链接的另一个资源上。

个人觉得，超链接可以想象成是一种能力，能力必须附着在某个具体的实物上，才能真正发挥该能力，比方说，隐身能力，它本身并不能隐身，只有当它附着在人身上，看到人隐身了，才能证明该能力的存在。<a>超链接也一样，它也已附着在很多内容上面，最简单的莫过于就是文本，当然也可以使其他东西，如图片等等。。。如下所示：

或者

对于超链接<a>来说，我们前面说了，作用就是当点击时能够跳转到另一个网络资源上，那么我们就需要重点关注两个点：（1）调到到什么地方？（2）跳转到的资源在什么地方打开显示？。

这时我们就需要关注<a>标签的两个重要的属性了，分别是href和target属性。

href属性用于表明被连接的另一个网络资源的地址，可以使绝对地址，也可以是相对地址，也可以是该页面内容内某个元素的位置；

target属性用于表明在什么地方打开被连接资源，其取值有五种：

### 属性值 ###

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 值</th> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> _blank</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 在新窗口中打开被链接文档。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> _self</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 默认。在相同的框架中打开被链接文档。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> _parent</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 在父框架集中打开被链接文档。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> _top</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 在整个窗口中打开被链接文档。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> framename</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 在指定的框架中打开被链接文档。</td> 
 </tr> 
 </tbody> 
</table>

简单说明下，

\_blank就是在点击后会新开一个浏览器页面然后载入被链接的资源；

\_top 就是在当前页面打开被连接的资源，原先页面上显示的内容会被覆盖；

如果<a>标签没有设置target标签，那么被链接的资源将会在原来显示<a>标签的地方显示出来。不了解的可以参考下http://www.w3school.com.cn/tiy/t.asp?f=html\_links。