1.超链接(Hyperlink)
即超级链接,就是指按内容链接,是网页中最常见的元素之一,整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成,超链接将各个网页链接在一起后,才能真正构成一个网站,互联网中的“网”,就是因为有超链接的存在。
2.HTML 超链接(链接)-- <a>标签
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
<a>链接的代码格式:
<a href="url(跳转目标地址)" target="opentype(规定在何处打开链接)" title="text(提示文本)"> 链接文本 </a>
3.<a>标签的各个属性
href 属性:
指定超链接目标的URL。如果 href 属性没有被指定链接,<a> 标签将不是一个链接。href有多种形式,例如:
外部链接:跳转到其他网站中的页面,记得加上"http://"或者"https://"。如:
<a href="https://www.html.com">HTML</a>
内部链接:跳转到同一个网站中的其他页面,直接链接内部页面名称即可。href指向网页(.html、.php、.jsp、.asp等格式)。如:
<a href="html.html">HTML</a>
空链接:本页链接,链接到当前页面。如:
<a href="#">首页</a>
下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。href 指向压缩文件(.zip、.rar等格式)、可执行程序(.exe)等。
<a href="./src/uploads/html_a.zip">下载文件</a>
注:HTML5新属性:download 规定被下载的目标,即点击后直接下载某个目标 。
<a href="./src/assets/img/img01.png" download="img01.png">下载图片</a>
网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。href指向图片(.jpg、.gif、.png等格式)、音频(.mp3、.wav等格式)、视频(.mp4、.mkv格式)等媒体文件,如:
<a href="./src/assets/img/img01.png">加载图片</a>
锚点链接:定位到同一个页面中的指定位置。
<!-- 目标位置标签,里面添加一个id属性=“相同的名字” -->
<h1 id="head"> top </h1>
...
<!-- 链接文本的href属性中,设置属性值为“#相同的名字”的形式 -->
<a href="#head"> 回顶部 </a>
注:href(必须属性)用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。如果没有使用 href 属性,它就不是超链接,则不能使用 hreflang、media、rel、target 以及 type 属性。
href 本质上就是指向一个文件,这个文件几乎可以是任意格式的。如果浏览器支持这种格式,那么它就可以在浏览器上显示,比如常见的图片、音频、视频等,如果浏览器不支持这种格式,那么就提示用户下载。
href使用的路径可以是相对路径或者绝对路径,取决于你访问的是内部还是外部页面。href不一定非要点击所写的文字进行访问链接,可以是图片,轮播图,CSS模块等元素。
target属性:
规定在何处打开目标 URL,默认情况下,超链接在当前的浏览器窗口打开。跳转方式有:
target="_self" //默认,当前页面跳转。
target="_blank" //新窗口打开。
target="_parent" //在父窗口中打开链接。。
target="_top" //在当前窗体打开链接,并替换当前的整个窗体(框架页)。
target="_framename" //在指定的框架中打开网页。
注:target属性仅在href属性值存在时使用。默认值为"_self",在当前窗口打开新页面会覆盖当前页面。一般情况下,target属性要么不写保持默认,要么就设置为"_blank",在新窗口中发开链接。
4.<a>标签的默认样式
鼠标样式:
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
链接样式:
<a>标签有三种默认样式,五种状态。
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
<!-- css样式设置,五种状态的设置 -->
:link //用于声明未访问状态链接的样式;
:visited //用于声明已经访问链接的样式;
:hover //用于声明鼠标悬停在链接上的样式;
:focus //用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接);
:active //用于声明浏览器点击链接的样式。
注:一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。整个<a>标签的样式呈现先后过程是:a:link ->a:hover ->a:active ->a:visited(:focus无论先后,可以自由设置)。另外,a:active不能设置有无下划线(总是有的)。
因为在W3C规范中,规定了链接的声明顺序:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,a:active 必须被置于 a:hover 之后,才是有效的。
5.<a> 标签的协议限定符和常用协议
协议限定符:
javascript就是协议限定符。
<a href="javascript:alert('???');">点我</a>
说明:写上javascript后,点击<a>标签后就会强制运行javascript代码。
常用协议:
mailto协议(邮件协议),点击后自动弹出发邮箱的窗口。
<a href="mailto:123456789@email.com">发邮件给我</a>
tel协议(电话协议),点击后自动弹出拨打电话的窗口。
<a href="tel:123456789">发邮件给我</a>
还有:file协议(文件协议),sms信息协议,thunder(迅雷的协议),ftp协议等。
6.<a>标签常用的例子
点击图片跳转链接(轮播图展示也经常使用):
<a href="https://html.com/" target="_blank">
<img src="./img01.png" alt="HTML">
</a>
点击图片下载图片:
<a href="./src/assets/img/img01.png" download="img01.png" target="_blank">
<img src="./src/assets/img/img01.png"" alt="HTML">
</a>