详解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>
发布了39 篇原创文章 · 获赞 12 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/xiaoritai7803/article/details/79451631