超链接标签：a标签的基本用法

一、构建外部超链接

二、构建锚点（即标记本html页面中的一个点，通过点击a标签，直接跳转到那个位置。）

三、构建资源下载

四、在网页中嵌入邮件发送链接以及启动本地应用程序

五、利用title属性给超链接添加简短说明

六、利用href="#"或者href="javascript:void(0)"配合javascript来进行页面跳转

a标签的基本用法：

一、构建外部超链接

1、在本页面中打开超链接

<a href="https://www.baidu.com" target="_self">百度</a> //默认情况下，target的值就是_self，所以上面第一条就算不指定target的值，也是直接在本页面中打开超链接。

2、在新的标签页中打开超链接

<a href="https://www.baidu.com" target="_blank">百度</a> //target的值为_blank的情况下，在新的标签页中打开超链接。

3、剩下两个target的值，_parent和_top都是用在iframe中，即内嵌网页时，控制跳转行为。_parent是跳转到上一级窗口，_top是跳转到顶级窗口。如果不用在iframe中，就如何1中一样。

二、构建锚点（即标记本html页面中的一个点，通过点击a标签，直接跳转到那个位置。）

1、构建锚点在本页面中跳转

第一种方式：id方式

<p id="top"><a href="#bottom"> 从这里跳转到底部</a></p> //锚点通过指定href="#id值"，指定跳转到相应的id标签处。

<p id="bottom"><a href="#top"> 跳转到这里，点击又跳转回去</a></p>

或者

第二种方式：a标签的name属性

2、特殊锚点：直接回到顶端

<a href="#">回到网页最顶部</a>

<a href=" ">回到网页最顶部</a>

三、构建资源下载

1、标记一个资源下载的超链接

具体浏览器采用什么插件打开，就看浏览器自己的选择了，以下几种在chrome测试，txt直接打开，png直接打开，word下载到本地。

<p><a href="/static/myapp/1.png">图片下载</a></p>
<p><a href="/static/myapp/测试html.txt">txt下载</a></p>
<p><a href="/static/myapp/测试word.doc">word下载</a></p>

2、指定下载资源的文件名（download是h5新增属性，需要确定浏览器是否支持，没特殊需求就不要用了。）

<p><a href="/static/myapp/测试word.doc" download="测试成功.doc">word下载</a></p> //下载好之后，名字就为测试成功.doc

3、其他资源的下载同上面一样构件链接即可

四、在网页中嵌入邮件发送链接以及启动本地应用程序

1、通过指定href的url类型来嵌入邮件发送地址

<a href="mailto:1943284453@qq.com">发送邮件</a> //当我们点击发送邮件的时候，浏览就会自动寻找本机中安装好的邮件客户端，并启动它，然后再地址栏中自动写入该邮箱地址。具体的可以参考：https://www.cnblogs.com/LiveWithIt/p/5937049.html 基本一个是通过a 标签，另外一个通过form标签，这两个的核心都是通过mailto这种类型的url来进行。https://www.cnblogs.com/LiveWithIt/p/5937049.html

2、另外还有一个url类型用于打电话，基本不常用，可以用于一些客户系统之中，例如：我查看一个客户信息，然后他有一个电话，为了减少客服在电脑的虚拟电话机上输入电话号码的时间，就可以直接设置这样一个链接。

<a href="tel:1943284453@qq.com">发送邮件</a> //生效前提是，本机中装有虚拟电话机。

3、web应用直接调用办法，就是采用自定义协议：registerProtocolHandler()。

这个就不写demo了，可能一辈子都不会用到。

4、浏览器中打开windows、man和linux gnome桌面的应用程序

https://blog.csdn.net/lengye7/article/details/105777448

注意事项：一些浏览器可能存在黑白名单，因此会造成通过协议无法启用对应的应用程序。

五、利用title属性给超链接添加简短说明

1、给链接添加简短说明，当鼠标悬停的时候，就会出现这个简短的说明。

六、利用href="#"或者href="javascript:void(0)"配合javascript来进行页面跳转

有些时候，我们为了隐藏a标签的跳转连接，我们可以使用javascript来进行跳转。

</script>