Dotcpp  >  编程教程  >  HTML语法  >  HTML超链接标签

HTML超链接标签

点击打开在线编译器,边学边练

一、什么是超链接

超链接属于网页的一部分,它是让网页和网页连接的元素。只有通过超链接把多个网页连接起来之后才能算得上是一个网站。超链接是指从一个网页指向另一个目标的连接关系,目标可以是网页、位置(相同网页的不同位置)、图片等等。在网页中用来超链接的对象,可以是文本、图片等。


二、超链接代码a标签

a标签是实现超链接的html代码,它是用来定义超链接的。接下来我们就一起来看一看a标签是怎么用的。

语法格式:超链接对象

说明:href是a标签中最重要的一个属性,指定了连接的目标,如果没有该属性,不能使用hreflang、media、rel、target 和 type属性。


三、a标签的常用属性

属性作用
href用于指定链接目标的url地址,该属性为超链接标签的必须属性,当为标签应用href属性时,它就具有了超链接的功能
target
用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式

说明:a标签除了href属性和target属性这两个常用属性外,还有很多属性,比如:download、name、rel等等属性。不常用就不介绍了,有兴趣的朋友可以自行研究一下。

1. 超链接的语法规范

<a href="https://www.dotcpp.com/" target="_blank">C语言网链接</ a>

其中a是anchor的缩写,中文意思是:锚

其中href用于指定目标页面的url地址**(不可省略)**,标签拥有href属性时,才有了超链接功能。

target用于指定目标页面的打开方式,可在引号""中输入_self为在当前页面中打开,输入_blank为在新窗口中打开,target可以省略不写,不写默认值为_self,即为在默认窗口中打开。

2. 超链接分类

(1)外部链接,当前项目外部的链接:

<a href="https://www.dotcpp.com/" target="_blank">C语言网链接</ a>

(2)内部链接,当前目录内部的链接也可以说是本项目不同页面之间的链接:

<a herf="index.html" target="_blank">首页</a><br />

(3)空链接,即当前项目尚未完成的页面,用#代替开发完成之后可以替换回来,点击之后会再次打开当前页面:

<a href="#" target="_blank">未完成的页面</a><br />

(4)下载链接:当内部链接的地址时一个文件或者压缩文件时:

<a href="新建 Microsoft Excel 工作表.xlsx">下载文件</a><br />
<a href="新建 Microsoft Excel 工作表.zip">下载文件</a><br />

(5)网页元素链接:在网页中的各种元素,如文本,图像,表格,音频,视频等都可以作为超链接:

(6)锚点链接:点击该链接可以迅速定位到页面中的某个位置(作用和目录的链接类似):

在链接文本中的href属性中,设置属性值为"#"+文本的形式,如:
<a href="#锚点">这是一个锚点</a>
找到目标位置标签,里面添加一个ID属性 = 刚才的属性值,如:
<h3 id="锚点">锚点</h3>

3.<a> 标签的默认样式

浏览器会为 <a> 标签设置一些默认样式。

(1)鼠标样式

当鼠标移入链接区域时,会变成一只小手;当鼠标移出链接区域时,会变回箭头形状。

(2)颜色及下划线

超链接被点击之前为蓝色,超链接被点击之后变成紫色。超链接默认带有下划线,下划线颜色和文本颜色保持一致。 

浏览器根据历史记录来判断超链接是否被点击过,如果 href 属性和历史记录中的某条 URL 重合,那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

【示例】HTML 超链接的多种形式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
    <p>
        <a href="https://www.dotcpp.com/course/html/" target="_blank">HTML教程(新窗口打开)</a><br>
        <a href="https://www.dotcpp.com/course/css/">CSS教程(当前窗口打开)</a><br>
        <a href="https://www.dotcpp.com/course/algorithm/">算法竞赛教程(被点击过)</a>
    </p>
</body>
</html>

效果展示如下:

超链接


本文固定URL:https://www.dotcpp.com/course/1106

上一课:

HTML文本格式化

下一课:

HTML插入图片

Dotcpp在线编译      (登录可减少运行等待时间)