先来说一下iframe标签。

iframe标签内联框架元素 ,有效地将另一个HTML页面嵌入到当前页面中.例如加入以下代码
<iframe src="http://www.baidu.com"></iframe>
即可在当前页面嵌套一个百度页面,该页面的宽高可自行设置。不过,嵌套页面之后,当前html的页面加载速度就变慢了。


接下来我们看一下,iframe标签结合a标签如何使用。

<iframe src="http://www.baidu.com"></iframe>
<a href="http://qq.com">QQ</a>
<a href="http://github.com">github</a>

我们能不能点击下面的两个链接让该链接的页面在上面的iframe标签页面显示呢。可将代码改成如下形式,即a标签要在name为xxx的页面打开。

<iframe src="#" name="xxx"></iframe>
<a href="http://qq.com" target="xxx">QQ</a>
<a href="http://github.com" target="xxx">github</a>

给iframe加frameboder=”0”,可以去掉内嵌页面的border.
iframe标签的src属性也支持相对路径。如
<iframe src="./index.html"></iframe>
我们在内嵌页面index.html中写入以下代码

<a href="http://qq.com" target="_blank">blank</a>
<a href="http://qq.com" target="_self">self</a>
<a href="http://qq.com" target="_top">top</a>
<a href="http://qq.com" target="_parent">parent</a>

_blank是在新开页面打开,_self实在当前内嵌页面打开,_top是在顶层页面打开,_parent是在父级页面打开。(index.html页面是内嵌在当前index4.html中,所以其父级页面就是index4.html)
a标签还有个downloda属性。

<a href="http://qq.com" download>下载</a>

当你下载一个安装包时,可以用download属性。
那么浏览器决定要不要下载是由什么决定的呢,是由http响应决定。如果你把http的响应的content-type设成

Content-Type: application/octet-stream

浏览器就会以下载的形式接收这个响应。
如果你的content-type是

Content-Type: text/html

又想让用户下载,就可以使用a标签的download属性。
当a标签的href如下时,不会跳转到腾讯首页。会把它当成一个文件,并提示找不到该文件。

<a href="qq.com">QQ</a>

因为它是相对路径。
正确的写法就是

<a href="http://qq.com">QQ</a>

表示我要打开一个http协议,域名为qq.com的网页。
但如果写成

<a href="//qq.com">QQ</a>

此时,当前文件是什么协议就用什么协议。


关于a标签的javascript的伪协议。

<a href="javascript:alert(2);">qq</a>

点击链接,就可执行一段js代码。
当我们需要点击一个链接什么都不做时,可以写成这样。

<a href="javascript:;">qq</a>

详解a标签与iframe标签相关推荐

  1. html中的a标签、img标签、iframe标签、列表标签

    一. a标签 <a href="路径" target="打开方式">内容</a> 1.页面跳转: 2.定位:①设定锚点:在要定位到的位置 ...

  2. 表单标签和iframe标签的用法

    今天来看一下表单标签和frame标签的用法. 1. 表单标签 表单(form)是用户输入信息与网页互动的一种形式.大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单.表单由一种或多种的 ...

  3. 详解WordPress中简码格式标签编写的基本方法

    WordPress 简码是一种类似于论坛标签的东西,格式类似于把尖括号换成中括号的 Html 标签.简码很多人叫做短代码,但官方的翻译应该是简码,在这里纠正一下. 简码的开发的逻辑比较简单,主要就是添 ...

  4. python tkinter label标签_Python Tkinter详解 (二)Label标签的使用

    #一个简单到不能再简单的标签 import tkinter as tk window = tk.Tk() window.title('Label的使用') window.geometry('400x4 ...

  5. Python Tkinter详解 (二)Label标签的使用

    #一个简单到不能再简单的标签import tkinter as tkwindow = tk.Tk() window.title('Label的使用') window.geometry('400x400 ...

  6. php循环volist,详解thinkphp中的volist标签

    属性: name(必须):要输出的数据模板变量 id(必须):循环变量 offset(可选):要输出数据的offset length(可选):输出数据的长度 key(可选):循环的key变量,默认值为 ...

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

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

  8. HTML标签图文详解(三)

    前两篇博文我们学习了HTML的基础知识与标签 HTML标签图文详解(一) HTML标签图文详解(二) 现在我们开更加深入的学习 本文主要内容 列表标签:<ul>.<OL>.&l ...

  9. WordPress标签云小工具详解

    WordPress标签云小工具是WordPress程序自带的一个小工具,它可以在我们的博客侧边栏展示网站的标签列表.今天WordPress小工具详解系列就从WordPress标签云小工具开始.带大家熟 ...

最新文章

  1. IBM Rational DOORS通过DXL进行二次开发初试(2)
  2. vc 取windows系统信息 版本 cpu信息 内存信息 ie版本信息 office版本
  3. Firefox 65.0.2 发布,Firefox 66 预计3月19日推出
  4. 他无一纸文凭,何以成为清华教授,被誉为“三百年才出一个的大师”?
  5. OpenShift 之 用CodeReady Workspaces开发Quarkus云原生应用
  6. 对已经add的文件不在跟踪
  7. python爬虫-33个Python爬虫项目实战(推荐)
  8. 计算机c盘如何扩大,电脑c盘怎么扩大
  9. 检测到你的手机处于root环境_玩手游多开还在用模拟器?云手机了解一下
  10. 温习下 function pointer.
  11. step7启动不了的问题
  12. Kotlin中文教程
  13. 惠普服务器查询ilo信息,HP服务器在线配置ilo地址
  14. HNU JAVA 导弹防御系统
  15. html相册滑动手风琴效果实现,JS实现图片手风琴效果
  16. Reacte路由报错:A <Route> is only ever to be used as the child of <Routes> element, never rendered direct
  17. 计算机性能指标的类型,电脑显示器的分类, 性能指标介绍
  18. 开源监控Prometheus介绍,安装,配置,使用详解
  19. C++俄罗斯方块源码(Qt版)
  20. php在线查毒,linux clamav 免费查毒工具

热门文章

  1. 2022微信群裂变强制分享引流源码+防洪+独立后台
  2. 小猿圈python之python期末考试测试题(一)_小猿圈python之python期末考试测试题(二)...
  3. plantuml样式_PlantUML之活动图
  4. 第八章 字符串和字符串函数
  5. 工业强国机械制造增长新方向 工业机器人产业发展迅速
  6. [RK3288][Android6.0] 调试笔记 --- adb无法安装apk提示签名错误
  7. 这是我见过最通俗易懂的MES与ERP介绍文章,带你剖析工业4.0!
  8. alert angularjs
  9. 服务器进系统后键盘鼠标一卡一卡的,windows10系统鼠标卡顿的处理方法
  10. 笔记本分屏后鼠标卡顿问题解决