<a>标签

<a>:anchor

1.target属性的值

  • _blank:新开一个页面打开<a>指向的页面

  • _self:在自身窗口打开<a>指向的页面

  • _top:在最顶级的窗口打开<a>指向的页面

  • _parent:在父元素的窗口打开<a>指向的页面

比较:_self _top _parent

这三个值,要在嵌套关系下理解

例子:

在index1.html文件中,使用<ifram>嵌入index2.html文件,

在index2.html文件中,使用<ifram>嵌入index3.html文件,

index3.html中有一个<a>

当<a>标签的target值为 _self 时,打开<a>指向的页面的窗口是index3.html本身

当<a>标签的target值为 _parent 时,打开<a>指向的页面的窗口是index2.html,即父元素

当<a>标签的target值为 _topf 时,打开<a>指向的页面的窗口是index1.html,即嵌套关系中,最顶级的元素

2.href 能传入什么样的值?(以下例子以https://www.qq.com为例,文件名为index.html)

一、<a>如果没有href,那么浏览器会将它转换成一个<span>

二、qq.com

传入该值,浏览器会把这个地址当作相对地址,即在index.html存在的目录中搜寻qq.com这个文件

三、//qq.com

传入该值,浏览器会识别这是一个网址,而且会自动把index.html的协议赋予qq.com,所以点击<a>可以跳转到www.qq.com页面中

四、#xxxx

这是一个锚点,浏览器会在地址后面添加这个锚点 .../index.html#xxxxx,锚点只是页面的跳转,是不发请求的

五、?a=1&b=2

这是传入查询参数,浏览器会在地址后面添加这个查询参数.../index.html?a=1&b=2,然后发起请求

六、javascript:[JS代码];

之前的地址都是默认是http:协议执行,而这里使用了javascript伪协议,当点击这个<a>后,会执行后面的JS代码,

但是一般不这么用这个功能。一般使用 href="javascript:;" 来获取一个没有任何作用的<a>

七、href="javascript:;" 与 href="#"

前者是执行段空的JS代码,所以不会有任何动作,而后者虽然也不会发生请求,但是有时候这个操作会使页面出现跳转的行为,如果没有指向对应id的锚,则会自动跳转到页面最顶部。

八、href的路径问题https://blog.csdn.net/weixin_42508745/article/details/82628353

1.(无)开头表示当前目录下的

2.(/)开头的目录表示该目录为根目录的一个子目录

href="/"指向的是当前文件所在目录所在的盘符

3.(./)开头的目录表示该目录为当前目录(当前目录所在的目录)的一个子目录

4.(../)开头的目录表示该目录为当前目录的父目录

5.(//)开头的目录表示和当前页面使用同一种协议http/https

3.下载download

<a>默认是查看页面,但是加上 download 属性后,<a>则变成了下载页面

另一种下载页面的方式:通过设置Content-type = application/octet-stream;在请求页面时,则会直接下载

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • iframe标签 iframe标签,内联框架元素 ,有效地将另一个HTML页面嵌入到当前页面中.例如加入以下代码 ...
    JaniceZD阅读 2,561评论 0 2
  • 1. 先说说target属性 target属性规定在何处打开超链接,取值有如下几种:_blank浏览器在一个新打开...
    易冷zzz阅读 1,304评论 0 1
  • 1、a标签的href 这两个都是相对路径,第一个是从当前目录下找xxx里的index.html文件;第二个是从当前...
    李悦之阅读 402评论 0 0
  • 众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a...
    达摩先森阅读 1,838评论 0 0
  • a标签 这里我们列举了a标签使用是的几种情况,由此我们可以看到a标签的几个属性:href target title...
    雅玲哑铃阅读 553评论 1 3

友情链接更多精彩内容