a标签的target属性

  • 前端a标签最重要的属性是href属性,实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制

前端a标签最重要的属性是href属性,实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制

target属性有五个特殊值
1.target="_self"
内容在当前页面显示。
2.target="_blank"
内容在新页面显示。
3.target=“three”
内容在对应窗口显示
4.target="_top"
在当前窗体打开链接,并替换当前的整个窗体(框架页),清除所有包含的框架
5.target="_parent"
在父窗体中打开链接,在窗口与顶级框架中,等同于_self
在实现过程中,跳转按钮1,2很容易实现,但是跳转3中,在主页面写了一个iframe框架,在点击按钮3时,页面内容显示在框架中。
在实现跳转4,与跳转5时,采用大框架套中框架,中框架套小框架,而按钮与内容显示在小框架中,如图:

所有的框架均在首页显示。
下面是相应代码。test.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test</title><link rel="stylesheet" href="test.css">
</head><body><div id="main"><div id="first"><a href="first.html" target="_self">跳转1</a></div><div id="second"><a href="second.html" target="_blank">跳转2</a></div><div id="third"><a href="third.html" target="three">跳转3</a></div><div id="ad-iframe"><iframe name="three" width="100%" height="100%" src=" " frameborder="2" seamless></iframe><iframe name="big" width="800px" height="300px"  src="fourth.html" frameborder="2" seamless></iframe></div></div>
</body></html>

fourth.html为中框架

<body><iframe src="fourth1.html"  width="700px" height="300px" frameborder="2" seamless></iframe>
</body>

fourth1.html为小框架

<body><iframe src="fourth2.html" width="300px" height="200px" frameborder="2" seamless></iframe><iframe src="five.html" width="300px" height="200px" frameborder="2" seamless></iframe>
</body>

fourth2.html为框架中的内容,注意到href=""

<body><div id="fourth"><a href="" target="_top">跳转4</a></div><div>跳转按钮4</div><div> _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页),清除所有包含的框架</div>
</body>

five.html

<body><div id="five"><a href="" target="_parent">跳转5</a></div><div>跳转按钮5</div><div> _parent -- 在父窗体中打开链接,在窗口与顶级框架中,等同于_self </div>
</body>

参考链接:
[1]: https://www.runoob.com/cssref/css3-pr-target.html

a标签的target属性相关推荐

  1. 详解 HTML <a> 标签的 target 属性

    1.定义 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命 ...

  2. a标签之target属性----在何处打开链接

    <a> 标签的 target 属性规定在何处打开链接文档. eg: <a href="/example/html/pref.html" target=" ...

  3. jQuery 自动给a标签添加target属性

    本文档为个人博客文档系统的备份版本.作者:小游.作者博客:点击访问 代码如下 //自动给a标签添加target属性 $("a").attr({rel:"noopener& ...

  4. 有关<a>标签的target属性决定了是否展示新打开的网页

    <a>标签的target属性则决定了如何展示新打开的网页,最新版本html推荐的做法中, target属性可以定义为四种不同的值"_blank""_self& ...

  5. html中a标签的target属性值iframe

    <a href="xxx.html" target="iframe">使用iframe调用xxx.html页面 </a> 通过targe ...

  6. a 标签的 target 属性、描点链接

    一.target 打开窗口方式 < a href=" " target="">< /a> _self 当前窗口打开页面(默认值) _bl ...

  7. target html语言,html中a标签的target属性

    [修复Win8.1 BUG] 解决Win8.1英文字体发虚不渲染问题 Win8.1更新了宋体字体,中文字体显示漂亮了,但英文字体发虚不渲染,尤其是小号的英文和数字字体,看下图. 1.下载Win8的宋体 ...

  8. a标签的target属性 打开新窗口

    1._blank:在新窗口打开链接 2._parent:在父窗口打开链接 3._self:默认,在当前页面跳转 4._top:在当前窗口打开链接,并替换当前的整个窗体 参考: HTML 属性

  9. html target=_blank 弹出独立窗口,HTML base 标签的 target 属性 —— base target=_blank /...

    python中的迭代.生成器等等 本人对编程语言实在是一窍不通啊...今天看了廖雪峰老师的关于迭代,迭代器,生成器,递归等等,word天,这都什么跟什么啊... 1.关于迭代 如果给定一个list或t ...

最新文章

  1. 2019最新进展 | Transformer在深度推荐系统中的应用
  2. mega_[MEGA DEAL] 2020年完整的Java Master Class Bundle(96%)
  3. 设置ASP.NET中的TextBox控件不缓存上次输入的信息
  4. ASP.NET MVC下的四种验证编程方式
  5. mysql中如何删除表中int约束,MySQL中的约束,添加约束,删除约束,以及其他修饰
  6. 修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样?
  7. Linux系统驱动全吗,linux系统需要给硬件安装驱动程序么?谁推荐一下linux系统阿~要驱动最全...
  8. 速成pytorch学习——3天自动微分机制
  9. linux 重启21端口命令,修改SSH默认远程端口为21号端口
  10. win2003实现单用户远程登录
  11. 玩转spring boot——结合jQuery和AngularJs
  12. 如何在 R 中进行 Fisher 精确检验
  13. 单片机系统的电磁干扰要如何消除?
  14. cadence使用教程
  15. windows PE结构解析
  16. DBeaver与excel
  17. matlab中不同数据点的动态显示并生成gif图片
  18. 揭秘 Google 成长史:荒诞梦想的副产品
  19. 信息学竞赛OI 常用OJ
  20. 怎么在数学表达式里输入小数点

热门文章

  1. 小鸽子主题童装是众多妈妈的放心选择。
  2. 家里有甲醛怎么去除 怎么判断家里有甲醛
  3. QPainter的使用过程中遇到的一些问题,QWidget::paintEngine: Should no longer be called QPainter::begin: Paint device
  4. 从键盘输入两个数求他们的最大公约数
  5. 微信小程序开发教程:项目四组件布局 课后习题
  6. Mac系统截图快捷键技巧
  7. mac如何用python爬网页数据_Mac——利用Python进行网页爬取
  8. 重磅!认知智能真的来了?且看道翰天琼认知智能三大技术体系!
  9. python 通过ping获取丢包率
  10. 电话销售如何开场?1套心法4个模板打造高成交率的勾魂话术!