HTML的a标签介绍

319 阅读2分钟

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用例:

image.png

如图,红色背景的内容是使用页面内的iframe标签展示,在名为acfun的a标签内使用_top后,点击该链接,就会使整个页面跳转到指定网站,而非红色背景的标签内跳转。

3.download

用于下载网页(很多浏览器不支持,不推荐)

4.rel=noopener

如果您选择在新窗口中打开链接,则WordPress会将此属性添加到您的链接中。 主要就是用来防范新窗口打开链接时可能存在的钓鱼攻击。

总结

a标签的作用主要是:

  1. 跳转到外部页面

  2. 跳转到内部锚点

  3. 跳转到邮箱或是电话等等