详解a标签与iframe标签
先来说一下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标签相关推荐
- html中的a标签、img标签、iframe标签、列表标签
一. a标签 <a href="路径" target="打开方式">内容</a> 1.页面跳转: 2.定位:①设定锚点:在要定位到的位置 ...
- 表单标签和iframe标签的用法
今天来看一下表单标签和frame标签的用法. 1. 表单标签 表单(form)是用户输入信息与网页互动的一种形式.大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单.表单由一种或多种的 ...
- 详解WordPress中简码格式标签编写的基本方法
WordPress 简码是一种类似于论坛标签的东西,格式类似于把尖括号换成中括号的 Html 标签.简码很多人叫做短代码,但官方的翻译应该是简码,在这里纠正一下. 简码的开发的逻辑比较简单,主要就是添 ...
- python tkinter label标签_Python Tkinter详解 (二)Label标签的使用
#一个简单到不能再简单的标签 import tkinter as tk window = tk.Tk() window.title('Label的使用') window.geometry('400x4 ...
- Python Tkinter详解 (二)Label标签的使用
#一个简单到不能再简单的标签import tkinter as tkwindow = tk.Tk() window.title('Label的使用') window.geometry('400x400 ...
- php循环volist,详解thinkphp中的volist标签
属性: name(必须):要输出的数据模板变量 id(必须):循环变量 offset(可选):要输出数据的offset length(可选):输出数据的长度 key(可选):循环的key变量,默认值为 ...
- 详解 HTML <a> 标签的 target 属性
1.定义 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命 ...
- HTML标签图文详解(三)
前两篇博文我们学习了HTML的基础知识与标签 HTML标签图文详解(一) HTML标签图文详解(二) 现在我们开更加深入的学习 本文主要内容 列表标签:<ul>.<OL>.&l ...
- WordPress标签云小工具详解
WordPress标签云小工具是WordPress程序自带的一个小工具,它可以在我们的博客侧边栏展示网站的标签列表.今天WordPress小工具详解系列就从WordPress标签云小工具开始.带大家熟 ...
最新文章
- IBM Rational DOORS通过DXL进行二次开发初试(2)
- vc 取windows系统信息 版本 cpu信息 内存信息 ie版本信息 office版本
- Firefox 65.0.2 发布,Firefox 66 预计3月19日推出
- 他无一纸文凭,何以成为清华教授,被誉为“三百年才出一个的大师”?
- OpenShift 之 用CodeReady Workspaces开发Quarkus云原生应用
- 对已经add的文件不在跟踪
- python爬虫-33个Python爬虫项目实战(推荐)
- 计算机c盘如何扩大,电脑c盘怎么扩大
- 检测到你的手机处于root环境_玩手游多开还在用模拟器?云手机了解一下
- 温习下 function pointer.
- step7启动不了的问题
- Kotlin中文教程
- 惠普服务器查询ilo信息,HP服务器在线配置ilo地址
- HNU JAVA 导弹防御系统
- html相册滑动手风琴效果实现,JS实现图片手风琴效果
- Reacte路由报错:A <Route> is only ever to be used as the child of <Routes> element, never rendered direct
- 计算机性能指标的类型,电脑显示器的分类, 性能指标介绍
- 开源监控Prometheus介绍,安装,配置,使用详解
- C++俄罗斯方块源码(Qt版)
- php在线查毒,linux clamav 免费查毒工具
热门文章
- 2022微信群裂变强制分享引流源码+防洪+独立后台
- 小猿圈python之python期末考试测试题(一)_小猿圈python之python期末考试测试题(二)...
- plantuml样式_PlantUML之活动图
- 第八章 字符串和字符串函数
- 工业强国机械制造增长新方向 工业机器人产业发展迅速
- [RK3288][Android6.0] 调试笔记 --- adb无法安装apk提示签名错误
- 这是我见过最通俗易懂的MES与ERP介绍文章,带你剖析工业4.0!
- alert angularjs
- 服务器进系统后键盘鼠标一卡一卡的,windows10系统鼠标卡顿的处理方法
- 笔记本分屏后鼠标卡顿问题解决