先来说一下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>