a标签的属性:
1. href(hyper ref 超级链接):用于生成超级链接
a的href取值可以是:
(1) 网址:
例1:https://google.com
例2:http://google.com
例3://google.com(推荐使用,无协议网址)
(2)路径:
例1:/a/b/c以及a/b/c
例2:index.html以及./index.html
(3)伪协议:
例1:javascript:代码;
例如:想点击a标签后不刷新页面,则可以让href中的内容是#号,可以做到不刷新页面,但是会回滚到顶部。
但是采用javascript:;(即让代码留空),这样子点击后就没有任何动作
例2:mailto
在mailto:后输入邮箱地址就可以发送邮件
例3:tel
可以直接俄拨打电话
(4)id
例如:href=#xxx,这样子单击后就会跳转到指定标签id="xxx"的地方
*a标签内部可以包裹div等样式,这样就能实现无需监听,点击被a标签包裹的div就能跳转到指定位置。
2.target:在指定窗口打开超级链接。
a的target取值可以是:
(1)内置名字:
例1:_blank
在新的页面打开网站
例2:_top
在最顶层页面打开网站
例3:_parent
在父级窗口打开网站
例4:_self(默认值)
在当前页面打开网站
例5:xxx(自己命名)
在同一个窗口打开网页(如果所有a标签的target内容都一样,那就会新页面覆盖旧页面打开)
(2)自己命名:
例如window的name、iframe的name等等
_top用例:
如图,红色背景的内容是使用页面内的iframe标签展示,在名为acfun的a标签内使用_top后,点击该链接,就会使整个页面跳转到指定网站,而非红色背景的标签内跳转。
3.download
用于下载网页(很多浏览器不支持,不推荐)
4.rel=noopener
如果您选择在新窗口中打开链接,则WordPress会将此属性添加到您的链接中。 主要就是用来防范新窗口打开链接时可能存在的钓鱼攻击。
总结
a标签的作用主要是:
-
跳转到外部页面
-
跳转到内部锚点
-
跳转到邮箱或是电话等等