HTML学习第七章(HTML超链接–＜a＞标签)

1.超链接(Hyperlink)

即超级链接，就是指按内容链接，是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接将各个网页链接在一起后，才能真正构成一个网站，互联网中的“网”，就是因为有超链接的存在。

2.HTML 超链接(链接)– <a>标签

HTML使用标签 <a&gt;来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a&gt; 中使用了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>