一、什么是超链接
超链接属于网页的一部分,它是让网页和网页连接的元素。只有通过超链接把多个网页连接起来之后才能算得上是一个网站。超链接是指从一个网页指向另一个目标的连接关系,目标可以是网页、位置(相同网页的不同位置)、图片等等。在网页中用来超链接的对象,可以是文本、图片等。
二、超链接代码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 <a>标签演示</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>
效果展示如下:
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程