a标签的使用、特性-蒲公英云

HTML <a>元素 (或锚元素) 创建一个到其他网页，文件，同一页面内的位置，电子邮件地址或任何其他URL的超链接。

一、使用——href属性

1、超链接：

<a href="http://www.mozilla.com/">External Link</a>

（1）关于超链接的路径

参考这篇文章：url网址、决定路径、相对路径

（2）target属性：

规定在何处打开目标 URL。仅在 href 属性存在时使用。

_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

2、锚点：

<a href="#属性">Description of Same-Page Links</a>

3、打电话：

<a href="tel:+491570156">+49 157 0156</a>

更详细的语法请查看 RFC 2806 and RFC 2396。

4、发邮件：

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

有关mailto URL方案的更多细节，比如如何包含主题，正文，或其他预定内容，参考 Email links or RFC 6068.

5、H5页面打电话和发短信功能：

里面加上：

<meta name="format-detection" content="telephone=yes"/>

需要拨打电话的地方：

<a href="tel:400-0000-688">400-0000-688</a>

发短信：

<a href="sms:18688888888">发短信</a>

6、下载文件

实际项目中，使用a标签下载exe文件，比如：

<a href="/fileDir/sky_setup.exe">download</a>

二、a标签其他属性

1、rel属性（只有在使用了 href 属性才能使用 rel属性）

标签的 rel 属性用于指定当前文档与被链接文档的关系。

注意：尽管浏览器不会以任何方式使用该属性，不过搜索引擎可以利用该属性获得更多有关链接的信息。

相关的值和解释：https://www.runoob.com/tags/att-a-rel.html

nofollow	Google 使用 “nofollow”，用于指定 Google 搜索引擎不要跟踪链接。
alternate	文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet	文档的外部样式表。
start	集合中的第一个文档。
next	集合中的下一个文档。
prev	集合中的前一个文档。
contents	文档目录。
index	文档索引。
glossary	文档中所用字词的术语表或解释。
copyright	包含版权信息的文档。
chapter	文档的章。
section	文档的节。
subsection	文档的子段。
appendix	文档附录。
help	帮助文档。
bookmark	相关文档。

三、H5新增的属性

1、media 属性（只能在 href 属性存在时使用）

规定目标 URL 是给什么类型的媒介/设备进行优化的。

该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。

相关的值和解释：https://www.runoob.com/tags/att-a-media.html

默认值是all，适用于所有设备。

2、type 属性（只能在 href 属性存在时使用）

规定目标文档的 MIME 类型。被链接文档的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。

<a type="MIME_type">

该属性指定在一个 MIME type 链接目标的形式的媒体类型。其仅提供建议，并没有内置的功能。

3、download 属性，（href 属性必须在标签中指定。）

download 属性：定义了下载链接的地址。

属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。

检测当前浏览器是否支持download属性：

let canSupportDownload = 'download' in document.createElement('a');

使用：指定download属性

<a href="./img/img01.jpg" download="dog.jpg">下载图片</a>

兼容性：Firefox弹出下载框，chrome直接下载，safari没有响应下载，依旧跳转到指定url显示图片，其他浏览器尚未测试。所以这个属性目前兼容性确定不怎么好。

参考文章：

https://www.cnblogs.com/gja1026/p/9883743.html

https://www.cnblogs.com/yunnex-xw/p/10621174.html

四、a标签的CSS样式

1、Chrome中默认样式

user agent stylesheet ：

x a:-webkit-any-link {    
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

所以，在设置样式时，即使设置了父级样式。我们也要对a标签进行单独的样式设置

color、cursor:pointer、text-decoration: underline

2、a标签包裹别的标签，或被别的标签包裹

a标签包裹标签，当点击别的标签时，事件会冒泡到a标签上，进行href跳转功能。

（1）a标签包裹img标签，使得img可以超链接

<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
       alt="MDN logo" />
</a>

（2）被别的标签包裹

要单独设置a标签的样式，因为根据HTML和CSS特性，如果子元素有自己的样式，父级设置的样式无效。——CSS样式权重

五、相关事件

js中阻止默认事件，阻止a标签href属性跳转

使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
        event.cancelBubbl = true; //IE8之前(已经被弃用)
        event.preventDefault(); //IE 9
使用event.preventDefault()可以取消默认事件。