HTML学习第七章(HTML超链接--<a>标签)

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:[email protected]">发邮件给我</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>

猜你喜欢

转载自blog.csdn.net/Baileys_99/article/details/129233691
今日推荐